The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 5 | import { cn } from "../lib/utils"; |
| 6 |
| 7 | /** Radio choices as quiet cards; the dot springs in on selection. */ |
| 8 | export function RadioGroup({ |
| 9 | className, |
| 10 | ...props |
| 11 | }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) { |
| 12 | return ( |
| 13 | <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid gap-2", className)} {...props} /> |
| 14 | ); |
| 15 | } |
| 16 |
| 17 | export function RadioGroupItem({ |
| 18 | className, |
| 19 | children, |
| 20 | description, |
| 21 | ...props |
| 22 | }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & { description?: React.ReactNode }) { |
| 23 | return ( |
| 24 | <RadioGroupPrimitive.Item |
| 25 | data-slot="radio-group-item" |
| 26 | className={cn( |
| 27 | "group/radio flex w-full items-start gap-3 rounded-xl border border-border/80 px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color] duration-150 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring/50 disabled:opacity-50 data-[state=checked]:border-action/40 data-[state=checked]:bg-action/[0.05]", |
| 28 | className, |
| 29 | )} |
| 30 | {...props} |
| 31 | > |
| 32 | <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border transition-colors duration-150 group-data-[state=checked]/radio:border-action group-data-[state=checked]/radio:bg-action"> |
| 33 | <span |
| 34 | aria-hidden="true" |
| 35 | className="size-1.5 scale-0 rounded-full bg-background transition-transform duration-200 ease-[var(--ease-spring)] group-data-[state=checked]/radio:scale-100" |
| 36 | /> |
| 37 | </span> |
| 38 | <span className="min-w-0"> |
| 39 | <span className="block font-medium text-foreground">{children}</span> |
| 40 | {description ? <span className="mt-0.5 block text-xs text-muted-foreground">{description}</span> : null} |
| 41 | </span> |
| 42 | </RadioGroupPrimitive.Item> |
| 43 | ); |
| 44 | } |
| 45 |
