feat(component): add radio component

apps/website/src/components/menu/menu.tsx

@@ -27,6 +27,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
     },
     { label: 'Drawer', path: `/docs/${appState.theme.toLowerCase()}/drawer` },
     { label: 'Rating', path: `/docs/${appState.theme.toLowerCase()}/rating` },
+    { label: 'Radio', path: `/docs/${appState.theme.toLowerCase()}/radio` },
     { label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },
     { label: 'Select', path: `/docs/${appState.theme.toLowerCase()}/select` },
     { label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },

apps/website/src/routes/docs/daisy/radio/index.tsx

@@ -0,0 +1,102 @@
+import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
+import { Radio } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  useStylesScoped$(`
+    .container { width: 300px } Accordion {border: 1px solid white}
+    .panel {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+  `);
+
+  let radioValue = useSignal('primary');
+  return (
+    <>
+      <div class="container">
+        <h2>This is the documentation for the Radio</h2>
+        <div class="panel mt-5 flex-col">
+          <h2>Selected vatiant: {radioValue.value}</h2>
+          <div>
+            <Radio
+              variant="primary"
+              class="mt-5"
+              name="radio"
+              value="primary"
+              onChange$={(e) => {
+                radioValue.value = e.target.value;
+              }}
+              checked
+            />
+            <Radio
+              variant="secondary"
+              class="mt-5"
+              name="radio"
+              value="secondary"
+              onChange$={(e) => {
+                radioValue.value = e.target.value;
+              }}
+            />
+            <Radio
+              variant="accent"
+              class="mt-5"
+              name="radio"
+              value="accent"
+              onChange$={(e) => {
+                radioValue.value = e.target.value;
+              }}
+            />
+            <Radio
+              variant="info"
+              class="mt-5"
+              name="radio"
+              value="info"
+              onChange$={(e) => {
+                radioValue.value = e.target.value;
+              }}
+            />
+            <Radio
+              variant="success"
+              class="mt-5"
+              name="radio"
+              value="success"
+              onChange$={(e) => {
+                radioValue.value = e.target.value;
+              }}
+            />
+            <Radio
+              variant="warning"
+              class="mt-5"
+              name="radio"
+              value="warning"
+              onChange$={(e) => {
+                radioValue.value = e.target.value;
+              }}
+            />
+            <Radio
+              variant="error"
+              class="mt-5"
+              name="radio"
+              value="error"
+              onChange$={(e) => {
+                radioValue.value = e.target.value;
+              }}
+            />
+          </div>
+
+          <h2 class="mt-5">Primary Example</h2>
+          <div>
+            <Radio
+              variant="primary"
+              name="radio-Selected"
+              value="first"
+              checked
+            />
+            <Radio variant="primary" name="radio-Selected" value="second" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/radio/index.tsx

@@ -0,0 +1,45 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Radio } from '@qwik-ui/headless';
+
+export default component$(() => {
+  let radioValue = useSignal('first');
+
+  return (
+    <div class="flex flex-col gap-3 mt-2">
+      <h2>This is the documentation for the Radio</h2>
+      <h3>Basic Example </h3>
+      <div class="flex gap-1">
+        <Radio name="one" />
+        <Radio name="one" />
+        <Radio name="one" />
+      </div>
+
+      <h3 class="mt-5">Change value Example </h3>
+      <p>Selected radio: {radioValue.value}</p>
+      <div class="flex gap-1">
+        <Radio
+          name="two"
+          value="first"
+          checked
+          onChange$={(e) => {
+            radioValue.value = e.target.value;
+          }}
+        />
+        <Radio
+          name="two"
+          value="second"
+          onChange$={(e) => {
+            radioValue.value = e.target.value;
+          }}
+        />
+        <Radio
+          name="two"
+          value="third"
+          onChange$={(e) => {
+            radioValue.value = e.target.value;
+          }}
+        />
+      </div>
+    </div>
+  );
+});

packages/daisy/src/components/ratio/daisy.config.ts

@@ -0,0 +1,11 @@
+export const daisyConfig = {
+  variants: {
+    accent: 'radio-accent',
+    error: 'radio-error',
+    info: 'radio-info',
+    primary: 'radio-primary',
+    secondary: 'radio-secondary',
+    success: 'radio-success',
+    warning: 'radio-warning',
+  },
+};

packages/daisy/src/components/ratio/radio.tsx

@@ -0,0 +1,51 @@
+import {
+  component$,
+  PropFunction,
+  QwikIntrinsicElements,
+  QwikChangeEvent,
+} from '@builder.io/qwik';
+import { Radio as HeadlessRadio } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+import { daisyConfig } from './daisy.config';
+
+export type HTMLRadioProps = QwikIntrinsicElements['input'];
+
+export type DaisyRadioProps = {
+  variant?: DaisyRadioVariants;
+  name?: string;
+  value?: string;
+  onChange$?: PropFunction<(evt: QwikChangeEvent<HTMLInputElement>) => void>;
+};
+
+export type DaisyRadioVariants =
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error';
+
+export type RadioProps = HTMLRadioProps & DaisyRadioProps;
+
+export const Radio = component$((props: RadioProps) => {
+  const {
+    variant = 'primary',
+    class: classNames,
+    value = 'first',
+    name = 'radio-1',
+    ...rest
+  } = props;
+
+  const { variants } = daisyConfig;
+
+  return (
+    <HeadlessRadio
+      {...rest}
+      type="radio"
+      name={name}
+      class={clsq('radio mx-1', variants[variant], classNames)}
+      value={value}
+    ></HeadlessRadio>
+  );
+});

packages/daisy/src/index.ts

@@ -11,3 +11,4 @@ export * from './components/tabs';
 export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
+export * from './components/ratio/radio';

packages/headless/src/components/radio/radio.tsx

@@ -0,0 +1,7 @@
+import { component$, QwikIntrinsicElements } from '@builder.io/qwik';
+
+export type RadioProps = QwikIntrinsicElements['input'];
+
+export const Radio = component$((props: RadioProps) => (
+  <input {...props} type="radio" />
+));

packages/headless/src/index.ts

@@ -13,3 +13,4 @@ export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
 export * as Select from './components/select/select';
+export * from './components/radio/radio';