Merge pull request #78 from qwikerx/feat/radio

feat: radio button

README.md

@@ -124,25 +124,27 @@ export default component$(() => {
 - Accordion
 - Alert
 - Avatar
-- Checkbox
 - Badge
 - Breadcrumb
 - Button
+- Checkbox
 - Drawer
 - Dropdown
 - Footer
 - Input
 - Jumbotron
 - Modal
 - Navbar
+- Radio
 - Rating
+- Select
 - Sidebar
 - Spinner
 - Tabs
 - Toast
 - Toggle
 
-## Composables
+## Composables / hooks
 
 - useToasts
 - useDark

apps/web/src/examples.ts

@@ -797,6 +797,32 @@ export const examples: Record<string, Example[]> = {
       height: '400',
     },
   ],
+  radio: [
+    {
+      title: 'Default',
+      description: 'Use the default example of a radio component with the checked and unchecked state.',
+      url: '/examples/[theme-rtl]/radio/01-default',
+      content:
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Radio } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const pick = useSignal<string>(\'\')\n\n  return (\n    <>\n      <div class="p-3 flex flex-col gap-3">\n        <Radio name="radio" value="one" bind:option={pick}>\n          First option\n        </Radio>\n        <Radio name="radio" value="two" bind:option={pick}>\n          Second option\n        </Radio>\n      </div>\n    </>\n  )\n})',
+      height: '200',
+    },
+    {
+      title: 'Color',
+      description: 'This example can be used for the color of the radio component by applying the color attribute to the input element.',
+      url: '/examples/[theme-rtl]/radio/02-colors',
+      content:
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Radio } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const pick = useSignal<string>(\'blue\')\n\n  return (\n    <>\n      <h2 class="text-xl font-semibold">Picked color : {pick.value}</h2>\n      <div class="p-3 flex flex-col gap-3">\n        <Radio name="radio" value="blue" bind:option={pick}>\n          Blue\n        </Radio>\n        <Radio name="radio" value="purple" color="purple" bind:option={pick}>\n          Purple\n        </Radio>\n        <Radio name="radio" value="red" color="red" bind:option={pick}>\n          Red\n        </Radio>\n        <Radio name="radio" value="green" color="green" bind:option={pick}>\n          Green\n        </Radio>\n        <Radio name="radio" value="pink" color="pink" bind:option={pick}>\n          Pink\n        </Radio>\n      </div>\n    </>\n  )\n})',
+      height: '200',
+    },
+    {
+      title: 'Disabled',
+      description: 'This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.',
+      url: '/examples/[theme-rtl]/radio/03-disabled',
+      content:
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Radio } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const pick = useSignal<string>(\'\')\n\n  return (\n    <>\n      <div class="p-3 flex flex-col gap-3">\n        <Radio name="radio" value="one" disabled bind:option={pick}>\n          First option\n        </Radio>\n        <Radio name="radio" value="two" disabled bind:option={pick}>\n          Second option\n        </Radio>\n      </div>\n    </>\n  )\n})',
+      height: '200',
+    },
+  ],
   rating: [
     {
       title: 'Default rating',
@@ -831,6 +857,48 @@ export const examples: Record<string, Example[]> = {
       height: '200',
     },
   ],
+  select: [
+    {
+      title: 'Default',
+      description: 'Get started with the default example of a select input component to get a single option selection.',
+      url: '/examples/[theme-rtl]/select/01-default',
+      content:
+        "import { component$, useSignal } from '@builder.io/qwik'\nimport { Select } from 'flowbite-qwik'\n\nexport default component$(() => {\n  const selected = useSignal('')\n  const countries = [\n    { value: 'us', name: 'United States' },\n    { value: 'ca', name: 'Canada' },\n    { value: 'fr', name: 'France' },\n  ]\n\n  return (\n    <>\n      <div class=\"p-3 flex flex-col gap-3\">\n        <Select bind:value={selected} options={countries} placeholder=\"Choose a country\" label=\"Select an option\" />\n      </div>\n    </>\n  )\n})",
+      height: '200',
+    },
+    {
+      title: 'Disabled',
+      description: 'Apply the disable state to the select component to disallow the selection of new options.',
+      url: '/examples/[theme-rtl]/select/02-disabled',
+      content:
+        "import { component$, useSignal } from '@builder.io/qwik'\nimport { Select } from 'flowbite-qwik'\n\nexport default component$(() => {\n  const selected = useSignal('')\n  const countries = [\n    { value: 'us', name: 'United States' },\n    { value: 'ca', name: 'Canada' },\n    { value: 'fr', name: 'France' },\n  ]\n\n  return (\n    <>\n      <div class=\"p-3 flex flex-col gap-3\">\n        <Select bind:value={selected} disabled options={countries} placeholder=\"Choose a country\" label=\"Select an option\" />\n      </div>\n    </>\n  )\n})",
+      height: '200',
+    },
+    {
+      title: 'Selected option',
+      description: 'Use this example to get a single option selection with the selected state of the select input component.',
+      url: '/examples/[theme-rtl]/select/03-selected',
+      content:
+        "import { component$, useSignal } from '@builder.io/qwik'\nimport { Select } from 'flowbite-qwik'\n\nexport default component$(() => {\n  const selected = useSignal('fr')\n  const countries = [\n    { value: 'us', name: 'United States' },\n    { value: 'ca', name: 'Canada' },\n    { value: 'fr', name: 'France' },\n  ]\n\n  return (\n    <>\n      <div class=\"p-3 flex flex-col gap-3\">\n        <Select bind:value={selected} options={countries} placeholder=\"Choose a country\" label=\"Select an option\" />\n      </div>\n    </>\n  )\n})",
+      height: '200',
+    },
+    {
+      title: 'Sizes',
+      description: 'Get started with the small, default, and large sizes for the select component from the example below.',
+      url: '/examples/[theme-rtl]/select/04-sizes',
+      content:
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Select } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const selected = useSignal(\'\')\n  const countries = [\n    { value: \'us\', name: \'United States\' },\n    { value: \'ca\', name: \'Canada\' },\n    { value: \'fr\', name: \'France\' },\n  ]\n\n  return (\n    <>\n      <div class="p-3 flex flex-col gap-3">\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Small" size="sm" />\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Medium" size="md" />\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Large" size="lg" />\n      </div>\n    </>\n  )\n})',
+      height: '200',
+    },
+    {
+      title: 'Underline',
+      description: 'Use the underline style for the select component as an alternative appearance.',
+      url: '/examples/[theme-rtl]/select/05-underline',
+      content:
+        "import { component$, useSignal } from '@builder.io/qwik'\nimport { Select } from 'flowbite-qwik'\n\nexport default component$(() => {\n  const selected = useSignal('')\n  const countries = [\n    { value: 'us', name: 'United States' },\n    { value: 'ca', name: 'Canada' },\n    { value: 'fr', name: 'France' },\n  ]\n\n  return (\n    <>\n      <div class=\"p-3 flex flex-col gap-3\">\n        <Select bind:value={selected} options={countries} underline placeholder=\"Choose a country\" label=\"Underline\" />\n      </div>\n    </>\n  )\n})",
+      height: '200',
+    },
+  ],
   sidebar: [
     {
       title: 'Default sidebar',

apps/web/src/routes/docs/components/radio/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik'
+import { ComponentDocPage } from '~/components/ComponentDocPage/ComponentDocPage'
+import { DocumentHead } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <ComponentDocPage name="radio">
+      <div q:slot="explanation">
+        Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple
+        styles and colors.
+      </div>
+    </ComponentDocPage>
+  )
+})
+
+export const head: DocumentHead = () => ({
+  title: 'Qwik Radio - Flowbite',
+})

apps/web/src/routes/docs/components/select/index.tsx

@@ -0,0 +1,19 @@
+import { component$ } from '@builder.io/qwik'
+import { ComponentDocPage } from '~/components/ComponentDocPage/ComponentDocPage'
+import { DocumentHead } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <ComponentDocPage name="select">
+      <div q:slot="explanation">
+        The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by
+        browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available
+        in dark mode.{' '}
+      </div>
+    </ComponentDocPage>
+  )
+})
+
+export const head: DocumentHead = () => ({
+  title: 'Qwik Select - Flowbite',
+})

apps/web/src/routes/docs/layout.tsx

@@ -97,6 +97,12 @@ export default component$(() => {
             <SidebarItem tag={NavLink} href="/docs/components/input">
               Input
             </SidebarItem>
+            <SidebarItem tag={NavLink} href="/docs/components/radio">
+              Radio
+            </SidebarItem>
+            <SidebarItem tag={NavLink} href="/docs/components/select">
+              Select
+            </SidebarItem>
             <SidebarItem tag={NavLink} href="/docs/components/toggle">
               Toggle
             </SidebarItem>

apps/web/src/routes/examples/[theme-rtl]/radio/01-default/index@examples.tsx

@@ -0,0 +1,30 @@
+/**
+ * title: Default
+ * description: Use the default example of a radio component with the checked and unchecked state.
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Radio } from 'flowbite-qwik'
+
+export default component$(() => {
+  const pick = useSignal<string>('')
+
+  return (
+    <>
+      <div class="p-3 flex flex-col gap-3">
+        <Radio name="radio" value="one" bind:option={pick}>
+          First option
+        </Radio>
+        <Radio name="radio" value="two" bind:option={pick}>
+          Second option
+        </Radio>
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/radio/02-colors/index@examples.tsx

@@ -0,0 +1,40 @@
+/**
+ * title: Color
+ * description: This example can be used for the color of the radio component by applying the color attribute to the input element.
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Radio } from 'flowbite-qwik'
+
+export default component$(() => {
+  const pick = useSignal<string>('blue')
+
+  return (
+    <>
+      <h2 class="text-xl font-semibold">Picked color : {pick.value}</h2>
+      <div class="p-3 flex flex-col gap-3">
+        <Radio name="radio" value="blue" bind:option={pick}>
+          Blue
+        </Radio>
+        <Radio name="radio" value="purple" color="purple" bind:option={pick}>
+          Purple
+        </Radio>
+        <Radio name="radio" value="red" color="red" bind:option={pick}>
+          Red
+        </Radio>
+        <Radio name="radio" value="green" color="green" bind:option={pick}>
+          Green
+        </Radio>
+        <Radio name="radio" value="pink" color="pink" bind:option={pick}>
+          Pink
+        </Radio>
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/radio/03-disabled/index@examples.tsx

@@ -0,0 +1,30 @@
+/**
+ * title: Disabled
+ * description: This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Radio } from 'flowbite-qwik'
+
+export default component$(() => {
+  const pick = useSignal<string>('')
+
+  return (
+    <>
+      <div class="p-3 flex flex-col gap-3">
+        <Radio name="radio" value="one" disabled bind:option={pick}>
+          First option
+        </Radio>
+        <Radio name="radio" value="two" disabled bind:option={pick}>
+          Second option
+        </Radio>
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/select/01-default/index@examples.tsx

@@ -0,0 +1,30 @@
+/**
+ * title: Default
+ * description: Get started with the default example of a select input component to get a single option selection.
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Select } from 'flowbite-qwik'
+
+export default component$(() => {
+  const selected = useSignal('')
+  const countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' },
+  ]
+
+  return (
+    <>
+      <div class="p-3 flex flex-col gap-3">
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Select an option" />
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/select/02-disabled/index@examples.tsx

@@ -0,0 +1,30 @@
+/**
+ * title: Disabled
+ * description: Apply the disable state to the select component to disallow the selection of new options.
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Select } from 'flowbite-qwik'
+
+export default component$(() => {
+  const selected = useSignal('')
+  const countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' },
+  ]
+
+  return (
+    <>
+      <div class="p-3 flex flex-col gap-3">
+        <Select bind:value={selected} disabled options={countries} placeholder="Choose a country" label="Select an option" />
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/select/03-selected/index@examples.tsx

@@ -0,0 +1,30 @@
+/**
+ * title: Selected option
+ * description: Use this example to get a single option selection with the selected state of the select input component.
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Select } from 'flowbite-qwik'
+
+export default component$(() => {
+  const selected = useSignal('fr')
+  const countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' },
+  ]
+
+  return (
+    <>
+      <div class="p-3 flex flex-col gap-3">
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Select an option" />
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/select/04-sizes/index@examples.tsx

@@ -0,0 +1,32 @@
+/**
+ * title: Sizes
+ * description: Get started with the small, default, and large sizes for the select component from the example below.
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Select } from 'flowbite-qwik'
+
+export default component$(() => {
+  const selected = useSignal('')
+  const countries = [
+    { value: 'us', name: 'United States' },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France' },
+  ]
+
+  return (
+    <>
+      <div class="p-3 flex flex-col gap-3">
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Small" size="sm" />
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Medium" size="md" />
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Large" size="lg" />
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}