Merge pull request #973 from tszhong0411/pack-32-add-radio-group

Add Radio Group

.changeset/twenty-baboons-protect.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add Radio Group

apps/docs/src/app/ui/components/radio-group.mdx

@@ -0,0 +1,25 @@
+---
+title: Radio Group
+description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+---
+
+<ComponentPreview name='radio-group/radio-group' />
+
+## Usage
+
+```tsx
+import { Label, RadioGroup, RadioGroupItem } from '@tszhong0411/ui'
+```
+
+```tsx
+<RadioGroup defaultValue='option-one'>
+  <div className='flex items-center space-x-2'>
+    <RadioGroupItem value='option-one' id='option-one' />
+    <Label htmlFor='option-one'>Option One</Label>
+  </div>
+  <div className='flex items-center space-x-2'>
+    <RadioGroupItem value='option-two' id='option-two' />
+    <Label htmlFor='option-two'>Option Two</Label>
+  </div>
+</RadioGroup>
+```

apps/docs/src/components/demos/radio-group/radio-group.tsx

@@ -0,0 +1,22 @@
+import { Label, RadioGroup, RadioGroupItem } from '@tszhong0411/ui'
+
+const RadioGroupDemo = () => {
+  return (
+    <RadioGroup defaultValue='comfortable'>
+      <div className='flex items-center space-x-2'>
+        <RadioGroupItem value='default' id='r1' />
+        <Label htmlFor='r1'>Default</Label>
+      </div>
+      <div className='flex items-center space-x-2'>
+        <RadioGroupItem value='comfortable' id='r2' />
+        <Label htmlFor='r2'>Comfortable</Label>
+      </div>
+      <div className='flex items-center space-x-2'>
+        <RadioGroupItem value='compact' id='r3' />
+        <Label htmlFor='r3'>Compact</Label>
+      </div>
+    </RadioGroup>
+  )
+}
+
+export default RadioGroupDemo

apps/docs/src/config/links.ts

@@ -150,6 +150,10 @@ const COMPONENT_LINKS = [
     href: '/ui/components/progress',
     text: 'Progress'
   },
+  {
+    href: '/ui/components/radio-group',
+    text: 'Radio Group'
+  },
   {
     href: '/ui/components/resizable',
     text: 'Resizable'

packages/ui/package.json

@@ -46,6 +46,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.1",

packages/ui/src/index.ts

@@ -33,6 +33,7 @@ export * from './navigation-menu'
 export * from './pagination'
 export * from './popover'
 export * from './progress'
+export * from './radio-group'
 export * from './resizable'
 export * from './scroll-area'
 export * from './select'

packages/ui/src/radio-group.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cn } from '@tszhong0411/utils'
+import { CircleIcon } from 'lucide-react'
+
+type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root>
+
+export const RadioGroup = (props: RadioGroupProps) => {
+  const { className, ...rest } = props
+
+  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...rest} />
+}
+
+type RadioGroupItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item>
+
+export const RadioGroupItem = (props: RadioGroupItemProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        'border-primary text-primary ring-offset-background aspect-square size-4 rounded-full border',
+        'focus:outline-none',
+        'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...rest}
+    >
+      <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
+        <CircleIcon className='size-2.5 fill-current text-current' />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}