feat(styled kit): add RadioGroup component

Author: maiieul

.changeset/green-ducks-kick.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+feat(styled kit): add RadioGroup component

apps/website/src/_state/component-statuses.ts

@@ -23,6 +23,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Modal: ComponentStatus.Draft,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Draft,
+    RadioGroup: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Skeleton: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,

apps/website/src/routes/docs/styled/menu.md

@@ -19,6 +19,7 @@
 - [Label](/docs/styled/label)
 - [Modal](/docs/styled/modal)
 - [Popover](/docs/styled/popover)
+- [RadioGroup](/docs/styled/radio-group)
 - [Separator](/docs/styled/separator)
 - [Skeleton](/docs/styled/skeleton)
 - [Tabs](/docs/styled/tabs)

apps/website/src/routes/docs/styled/radio-group/examples/hero.tsx

@@ -0,0 +1,21 @@
+import { component$ } from '@builder.io/qwik';
+import { Label, RadioGroup, RadioGroupItem } from '@qwik-ui/styled';
+
+export default component$(() => {
+  return (
+    <RadioGroup>
+      <div class="flex items-center space-x-2">
+        <RadioGroupItem name="size" value="default" id="r1" />
+        <Label for="r1">Default</Label>
+      </div>
+      <div class="flex items-center space-x-2">
+        <RadioGroupItem name="size" value="comfortable" id="r2" />
+        <Label for="r2">Comfortable</Label>
+      </div>
+      <div class="flex items-center space-x-2">
+        <RadioGroupItem name="size" value="compact" id="r3" />
+        <Label for="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  );
+});

apps/website/src/routes/docs/styled/radio-group/index.mdx

@@ -0,0 +1,46 @@
+---
+title: Qwik UI | Styled Radio Group Component
+---
+
+import { statusByComponent } from '~/_state/component-statuses';
+
+<StatusBanner status={statusByComponent.styled.RadioGroup} />
+
+# Popover
+
+Visually or semantically separates content.
+
+> The current implementation of the styled radio-group uses the native html `<input type="radio" />` element. We intend to introduce a headless radio-group with better support for colors, animations, etc. In the meantime, this native element is still better than nothing 🙃. You can remove the accent-primary class from the RadioGroupItem component if you prefer the default blue color.
+
+<br />
+
+<Showcase name="hero" />
+
+## Installation
+
+```sh
+qwik-ui add radio-group
+```
+
+## Usage
+
+```tsx
+import { Label, RadioGroup, RadioGroupItem } from '@qwik-ui/styled';
+```
+
+```tsx
+<RadioGroup>
+  <div class="flex items-center space-x-2">
+    <RadioGroupItem name="size" value="default" id="r1" />
+    <Label for="r1">Default</Label>
+  </div>
+  <div class="flex items-center space-x-2">
+    <RadioGroupItem name="size" value="comfortable" id="r2" />
+    <Label for="r2">Comfortable</Label>
+  </div>
+  <div class="flex items-center space-x-2">
+    <RadioGroupItem name="size" value="compact" id="r3" />
+    <Label for="r3">Compact</Label>
+  </div>
+</RadioGroup>
+```

packages/kit-styled/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,25 @@
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
+import { cn } from '@qwik-ui/utils';
+
+const RadioGroup = component$<PropsOf<'div'>>(({ ...props }) => {
+  return (
+    <div class={cn('grid gap-2', props.class)} {...props}>
+      <Slot />
+    </div>
+  );
+});
+
+const RadioGroupItem = component$<PropsOf<'input'>>(({ ...props }) => {
+  return (
+    <input
+      type="radio"
+      {...props}
+      class={cn(
+        'accent-primary h-4 w-4 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )}
+    />
+  );
+});
+
+export { RadioGroup, RadioGroupItem };

packages/kit-styled/src/components/skeleton/skeleton.tsx

@@ -2,5 +2,7 @@ import { QwikIntrinsicElements, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
 export const Skeleton = component$<QwikIntrinsicElements['div']>(({ ...props }) => {
-  return <div {...props} class={cn('bg-accent animate-pulse rounded', props.class)} />;
+  return (
+    <div {...props} class={cn('bg-foreground/10 animate-pulse rounded', props.class)} />
+  );
 });

packages/kit-styled/src/index.ts

@@ -9,6 +9,7 @@ export * from './components/input/input';
 export * from './components/label/label';
 export * from './components/modal/modal';
 export * from './components/popover/popover';
+export * from './components/radio-group/radio-group';
 export * from './components/separator/separator';
 export * from './components/skeleton/skeleton';
 export * from './components/tabs/tabs';