radio-group

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/radio-group/RadioGroup.astro directly.
3/**
4 * @component RadioGroup
5 * @title Radio Group
6 * @description A group of options where users can select exactly one choice.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-18817&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <RadioGroup name="plan" defaultValue="free">
12 *   <div class="flex items-center gap-2">
13 *     <RadioGroupItem value="free" id="free" />
14 *     <Label for="free">Free</Label>
15 *   </div>
16 *   <div class="flex items-center gap-2">
17 *     <RadioGroupItem value="pro" id="pro" />
18 *     <Label for="pro">Pro</Label>
19 *   </div>
20 * </RadioGroup>
21 *
22 * @usage
23 *
24 * ```astro nocollapse
25 * ---
26 * import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
27 * import { Label } from '@bejamas/ui/components/label';
28 * ---
29 *
30 * <RadioGroup name="plan" defaultValue="free">
31 *   <div class="flex items-center gap-2">
32 *     <RadioGroupItem value="free" id="free" />
33 *     <Label for="free">Free</Label>
34 *   </div>
35 * </RadioGroup>
36 * ```
37 */
38import type { HTMLAttributes } from "astro/types";
39import { cn } from "@/lib/utils";
40 
41interface Props extends HTMLAttributes<"div"> {
42  class?: string;
43  defaultValue?: string;
44  name?: string;
45  disabled?: boolean;
46  readOnly?: boolean;
47  required?: boolean;
48  "aria-label"?: string;
49  "aria-labelledby"?: string;
50}
51 
52const {
53  class: className = "",
54  defaultValue,
55  name,
56  disabled = false,
57  readOnly = false,
58  required = false,
59  ...rest
60} = Astro.props as Props;
61---
62 
63<div
64  {...rest}
65  data-slot="radio-group"
66  data-default-value={defaultValue}
67  data-name={name}
68  data-disabled={disabled ? "true" : undefined}
69  data-read-only={readOnly ? "true" : undefined}
70  data-required={required ? "true" : undefined}
71  class={cn("grid gap-3", className)}
72>
73  <slot />
74</div>
75 
76<script>
77  import { createRadioGroup } from "@data-slot/radio-group";
78 
79  document
80    .querySelectorAll('[data-slot="radio-group"]')
81    .forEach((el) => createRadioGroup(el));
82</script>