@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/x/radio-group-x.tsx

@@ -1,499 +0,0 @@
-/**
-
-const RadioGroupDemo = () => {
-  return (
-    <RadioGroup defaultValue='higher-secondary'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='higher-secondary' id='higher-secondary' />
-        <Label htmlFor='higher-secondary'>Higher Secondary</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='graduation' id='graduation' />
-        <Label htmlFor='graduation'>Graduation</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='post-graduation' id='post-graduation' />
-        <Label htmlFor='post-graduation'>Post Graduation</Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupHorizontalDemo = () => {
-  return (
-    <RadioGroup defaultValue='beginner' className='flex items-center gap-4'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='beginner' id='beginner' />
-        <Label htmlFor='beginner'>Beginner</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='intermediate' id='intermediate' />
-        <Label htmlFor='intermediate'>Intermediate</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='advanced' id='advanced' />
-        <Label htmlFor='advanced'>Advanced</Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupColorsDemo = () => {
-  return (
-    <RadioGroup defaultValue='destructive' className='flex items-center gap-4'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='destructive'
-          id='color-destructive'
-          className='border-destructive text-destructive [&_svg]:fill-destructive focus-visible:ring-destructive/20 focus-visible:border-destructive dark:focus-visible:ring-destructive/40'
-        />
-        <Label htmlFor='color-destructive'>Destructive</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='success'
-          id='color-success'
-          className='border-green-600 text-green-600 focus-visible:border-green-600 focus-visible:ring-green-600/20 dark:border-green-400 dark:text-green-400 dark:focus-visible:border-green-400 dark:focus-visible:ring-green-400/40 [&_svg]:fill-green-600 dark:[&_svg]:fill-green-400'
-        />
-        <Label htmlFor='color-success'>Success</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='info'
-          id='color-info'
-          className='border-sky-600 text-sky-600 focus-visible:border-sky-600 focus-visible:ring-sky-600/20 dark:border-sky-400 dark:text-sky-400 dark:focus-visible:border-sky-400 dark:focus-visible:ring-sky-400/40 [&_svg]:fill-sky-600 dark:[&_svg]:fill-sky-400'
-        />
-        <Label htmlFor='color-info'>Info</Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupSizesDemo = () => {
-  return (
-    <RadioGroup defaultValue='default' className='flex items-center gap-4'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='default' id='size-default' />
-        <Label htmlFor='size-default'>Default</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='medium' id='size-medium' className='size-5 [&_svg]:size-3' />
-        <Label htmlFor='size-medium'>Medium</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='large' id='size-large' className='size-6 [&_svg]:size-3.5' />
-        <Label htmlFor='size-large'>Large</Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupDashedDemo = () => {
-  return (
-    <RadioGroup defaultValue='standard'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='standard'
-          id='standard'
-          className='border-primary focus-visible:border-primary border-dashed'
-        />
-        <Label htmlFor='standard'>Standard Shipping</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='express'
-          id='express'
-          className='border-primary focus-visible:border-primary border-dashed'
-        />
-        <Label htmlFor='express'>Express Delivery</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='overnight'
-          id='overnight'
-          className='border-primary focus-visible:border-primary border-dashed'
-        />
-        <Label htmlFor='overnight'>Overnight Shipping</Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupSolidDemo = () => {
-  return (
-    <RadioGroup defaultValue='light'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='light'
-          id='theme-light'
-          className='text-primary-foreground data-[state=checked]:bg-primary! data-[state=checked]:border-primary data-[state=checked]:[&_svg]:fill-primary-foreground'
-        />
-        <Label htmlFor='theme-light'>Light Theme</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='dark'
-          id='theme-dark'
-          className='text-primary-foreground data-[state=checked]:bg-primary! data-[state=checked]:border-primary data-[state=checked]:[&_svg]:fill-primary-foreground'
-        />
-        <Label htmlFor='theme-dark'>Dark Theme</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem
-          value='system'
-          id='theme-system'
-          className='text-primary-foreground data-[state=checked]:bg-primary! data-[state=checked]:border-primary data-[state=checked]:[&_svg]:fill-primary-foreground'
-        />
-        <Label htmlFor='theme-system'>System Default</Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupDescriptionDemo = () => {
-  return (
-    <RadioGroup defaultValue='basic'>
-      <div className='flex gap-2'>
-        <RadioGroupItem value='basic' id='plan-basic' />
-        <div className='grid flex-1 space-y-2'>
-          <Label htmlFor='plan-basic'>Basic Plan</Label>
-          <p className='text-muted-foreground text-xs'>Perfect for individuals just getting started</p>
-        </div>
-      </div>
-      <div className='flex gap-2'>
-        <RadioGroupItem value='pro' id='plan-pro' />
-        <div className='grid flex-1 space-y-2'>
-          <Label htmlFor='plan-pro'>Pro Plan</Label>
-          <p className='text-muted-foreground text-xs'>Advanced features for power users and small teams</p>
-        </div>
-      </div>
-      <div className='flex gap-2'>
-        <RadioGroupItem value='enterprise' id='plan-enterprise' />
-        <div className='grid flex-1 space-y-2'>
-          <Label htmlFor='plan-enterprise'>Enterprise Plan</Label>
-          <p className='text-muted-foreground text-xs'>Custom solutions for large organizations</p>
-        </div>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupChipDemo = () => {
-  const id = useId()
-
-  const items = [
-    { value: '1', label: 'Size: 6 (UK)' },
-    { value: '2', label: 'Size: 7 (UK)', disabled: true },
-    { value: '3', label: 'Size: 8 (UK)' },
-    { value: '4', label: 'Size: 9 (UK)' },
-    { value: '5', label: 'Size: 10 (UK)' }
-  ]
-
-  return (
-    <fieldset className='w-full max-w-96 space-y-4'>
-      <legend className='text-foreground text-sm leading-none font-medium'>Select Shoe Size: </legend>
-      <RadioGroup className='grid grid-cols-3 gap-2' defaultValue='1'>
-        {items.map(item => (
-          <label
-            key={`${id}-${item.value}`}
-            className='border-input has-data-[state=checked]:border-primary/80 has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative flex flex-col items-center gap-3 rounded-md border px-2 py-3 text-center shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px] has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50'
-          >
-            <RadioGroupItem
-              id={`${id}-${item.value}`}
-              value={item.value}
-              className='sr-only after:absolute after:inset-0'
-              aria-label={`size-radio-${item.value}`}
-              disabled={item.disabled}
-            />
-            <p className='text-foreground text-sm leading-none font-medium'>{item.label}</p>
-          </label>
-        ))}
-      </RadioGroup>
-    </fieldset>
-  )
-}
-
-const RadioGroupListGroupDemo = () => {
-  const id = useId()
-
-  const items = [
-    { value: '1', label: 'Pro', price: '$39/mo' },
-    { value: '2', label: 'Team', price: '$69/mo' },
-    { value: '3', label: 'Enterprise', price: 'Custom' }
-  ]
-
-  return (
-    <RadioGroup className='w-full max-w-96 gap-0 -space-y-px rounded-md shadow-xs' defaultValue='2'>
-      {items.map(item => (
-        <div
-          key={`${id}-${item.value}`}
-          className='border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent relative flex flex-col gap-4 border p-4 outline-none first:rounded-t-md last:rounded-b-md has-data-[state=checked]:z-10'
-        >
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2'>
-              <RadioGroupItem
-                id={`${id}-${item.value}`}
-                value={item.value}
-                className='after:absolute after:inset-0'
-                aria-label={`plan-radio-${item.value}`}
-                aria-describedby={`${`${id}-${item.value}`}-price`}
-              />
-              <Label className='inline-flex items-center' htmlFor={`${id}-${item.value}`}>
-                {item.label}
-                {item.value === '2' && <Badge className='rounded-sm px-1.5 py-px text-xs'>Best Seller</Badge>}
-              </Label>
-            </div>
-            <div id={`${`${id}-${item.value}`}-price`} className='text-muted-foreground text-xs leading-[inherit]'>
-              {item.price}
-            </div>
-          </div>
-        </div>
-      ))}
-    </RadioGroup>
-  )
-}
-
-const RadioGroupSplitListGroupDemo = () => {
-  const id = useId()
-
-  const items = [
-    { value: '1', label: 'Pro', price: '$39/mo' },
-    { value: '2', label: 'Team', price: '$69/mo' },
-    { value: '3', label: 'Enterprise', price: 'Custom' }
-  ]
-
-  return (
-    <RadioGroup className='w-full max-w-96 gap-0 space-y-2 rounded-md *:rounded-full' defaultValue='2'>
-      {items.map(item => (
-        <div
-          key={`${id}-${item.value}`}
-          className='border-input has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground relative flex flex-col gap-4 border p-4 outline-none has-data-[state=checked]:z-10'
-        >
-          <div className='group flex items-center justify-between'>
-            <div className='flex items-center gap-2'>
-              <RadioGroupItem
-                id={`${id}-${item.value}`}
-                value={item.value}
-                aria-label={`plan-radio-${item.value}`}
-                className='text-primary bg-accent data-[state=checked]:bg-primary-foreground! data-[state=checked]:border-primary-foreground data-[state=checked]:[&_svg]:fill-primary after:absolute after:inset-0'
-                aria-describedby={`${`${id}-${item.value}`}-price`}
-              />
-              <Label className='inline-flex items-center' htmlFor={`${id}-${item.value}`}>
-                {item.label}
-                {item.value === '2' && (
-                  <Badge
-                    variant='outline'
-                    className='rounded-sm border-green-500 bg-green-500/10 px-1.5 py-px text-xs text-green-500'
-                  >
-                    Best Seller
-                  </Badge>
-                )}
-              </Label>
-            </div>
-            <div
-              id={`${`${id}-${item.value}`}-price`}
-              className='group-has-checked:text-primary-foreground text-xs leading-[inherit]'
-            >
-              {item.price}
-            </div>
-          </div>
-        </div>
-      ))}
-    </RadioGroup>
-  )
-}
-
-const RadioGroupCardRadioDemo = () => {
-  const id = useId()
-
-  return (
-    <RadioGroup className='w-full max-w-96 gap-2' defaultValue='1'>
-      <div className='border-input has-data-[state=checked]:border-primary/50 relative flex w-full items-center gap-2 rounded-md border p-4 shadow-xs outline-none'>
-        <RadioGroupItem
-          value='1'
-          id={`${id}-1`}
-          aria-label='plan-radio-basic'
-          aria-describedby={`${id}-1-description`}
-          className='size-5 after:absolute after:inset-0 [&_svg]:size-3'
-        />
-        <div className='grid grow gap-2'>
-          <Label htmlFor={`${id}-1`} className='justify-between'>
-            Basic <span className='text-muted-foreground text-xs leading-[inherit] font-normal'>Free</span>
-          </Label>
-          <p id={`${id}-1-description`} className='text-muted-foreground text-xs'>
-            Get 1 project with 1 teams members.
-          </p>
-        </div>
-      </div>
-
-      <div className='border-input has-data-[state=checked]:border-primary/50 relative flex w-full items-center gap-2 rounded-md border p-4 shadow-xs outline-none'>
-        <RadioGroupItem
-          value='2'
-          id={`${id}-2`}
-          aria-describedby={`${id}-2-description`}
-          className='size-5 after:absolute after:inset-0 [&_svg]:size-3'
-        />
-        <div className='grid grow gap-2'>
-          <Label htmlFor={`${id}-2`} className='justify-between'>
-            Premium <span className='text-muted-foreground text-xs leading-[inherit] font-normal'>$5.00</span>
-          </Label>
-          <p id={`${id}-2-description`} className='text-muted-foreground text-xs'>
-            Get 5 projects with 5 team members.
-          </p>
-        </div>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupCardRadioWithBorderDemo = () => {
-  const id = useId()
-
-  return (
-    <RadioGroup className='w-full max-w-96 gap-2' defaultValue='1'>
-      <div className='border-input has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative w-full rounded-md border p-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px]'>
-        <RadioGroupItem
-          value='1'
-          id={`${id}-1`}
-          className='sr-only'
-          aria-label='plan-radio-basic'
-          aria-describedby={`${id}-1-description`}
-        />
-
-        <Label htmlFor={`${id}-1`} className='text-foreground flex flex-col items-start after:absolute after:inset-0'>
-          <div className='flex w-full items-center justify-between'>
-            <span>Basic</span>
-            <span className='text-muted-foreground text-xs leading-[inherit] font-normal'>Free</span>
-          </div>
-          <p id={`${id}-1-description`} className='text-muted-foreground text-xs'>
-            Get 1 project with 1 teams members.
-          </p>
-        </Label>
-      </div>
-
-      <div className='border-input has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative w-full rounded-md border p-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px]'>
-        <RadioGroupItem
-          value='2'
-          id={`${id}-2`}
-          className='sr-only'
-          aria-label='plan-radio-premium'
-          aria-describedby={`${id}-2-description`}
-        />
-
-        <Label htmlFor={`${id}-2`} className='text-foreground flex flex-col items-start after:absolute after:inset-0'>
-          <div className='flex w-full items-center justify-between'>
-            <span>Premium</span>
-            <span className='text-muted-foreground text-xs leading-[inherit] font-normal'>$5.00</span>
-          </div>
-          <p id={`${id}-2-description`} className='text-muted-foreground text-xs'>
-            Get 5 projects with 5 team members.
-          </p>
-        </Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupCardVerticalRadioDemo = () => {
-  const id = useId()
-
-  return (
-    <RadioGroup className='w-full max-w-96 justify-items-center sm:grid-cols-2' defaultValue='1'>
-      <div className='border-input has-data-[state=checked]:border-primary/50 relative flex w-full max-w-50 flex-col items-center gap-3 rounded-md border p-4 shadow-xs outline-none'>
-        <RadioGroupItem
-          value='1'
-          id={`${id}-1`}
-          className='order-1 size-5 after:absolute after:inset-0 [&_svg]:size-3'
-          aria-describedby={`${id}-1-description`}
-          aria-label='plan-radio-basic'
-        />
-        <div className='grid grow justify-items-center gap-2'>
-          <UserIcon />
-          <Label htmlFor={`${id}-1`} className='justify-center'>
-            Basic
-          </Label>
-          <p id={`${id}-1-description`} className='text-muted-foreground text-center text-xs'>
-            Get 1 project with 1 teams members.
-          </p>
-        </div>
-      </div>
-      <div className='border-input has-data-[state=checked]:border-primary/50 relative flex w-full max-w-50 flex-col items-center gap-3 rounded-md border p-4 shadow-xs outline-none'>
-        <RadioGroupItem
-          value='2'
-          id={`${id}-2`}
-          className='order-1 size-5 after:absolute after:inset-0 [&_svg]:size-3'
-          aria-describedby={`${id}-2-description`}
-          aria-label='plan-radio-premium'
-        />
-        <div className='grid grow justify-items-center gap-2'>
-          <CrownIcon />
-          <Label htmlFor={`${id}-2`} className='justify-center'>
-            Premium
-          </Label>
-          <p id={`${id}-2-description`} className='text-muted-foreground text-center text-xs'>
-            Get 5 projects with 5 team members.
-          </p>
-        </div>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupAnimatedDemo = () => {
-  return (
-    <RadioGroup defaultValue='realtime'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='realtime' id='notifications-realtime' />
-        <Label htmlFor='notifications-realtime'>Real-time</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='daily' id='notifications-daily' />
-        <Label htmlFor='notifications-daily'>Daily Digest</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupItem value='none' id='notifications-none' />
-        <Label htmlFor='notifications-none'>No Notifications</Label>
-      </div>
-    </RadioGroup>
-  )
-}
-
-const RadioGroupAnimatedInsetDemo = () => {
-  return (
-    <RadioGroupPrimitive.Root data-slot='radio-group' defaultValue='english' className='grid gap-3'>
-      <div className='flex items-center gap-2'>
-        <RadioGroupPrimitive.Item
-          value='english'
-          id='lang-english'
-          data-slot='radio-group-item'
-          className='border-input focus-visible:border-ring focus-visible:ring-ring/50 text-primary-foreground [&_svg]:fill-primary-foreground data-[state=checked]:border-primary data-[state=checked]:bg-primary! relative aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow,border] outline-none focus-visible:ring-[3px] [&_svg]:size-4 data-[state=checked]:[&_svg]:size-2'
-        >
-          <CircleIcon className='fill-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-500' />
-        </RadioGroupPrimitive.Item>
-        <Label htmlFor='lang-english'>English</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupPrimitive.Item
-          value='spanish'
-          id='lang-spanish'
-          data-slot='radio-group-item'
-          className='border-input focus-visible:border-ring focus-visible:ring-ring/50 text-primary-foreground [&_svg]:fill-primary-foreground data-[state=checked]:border-primary data-[state=checked]:bg-primary! relative aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow,border] outline-none focus-visible:ring-[3px] [&_svg]:size-4 data-[state=checked]:[&_svg]:size-2'
-        >
-          <CircleIcon className='fill-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-500' />
-        </RadioGroupPrimitive.Item>
-        <Label htmlFor='lang-spanish'>Español</Label>
-      </div>
-      <div className='flex items-center gap-2'>
-        <RadioGroupPrimitive.Item
-          value='french'
-          id='lang-french'
-          data-slot='radio-group-item'
-          className='border-input focus-visible:border-ring focus-visible:ring-ring/50 text-primary-foreground [&_svg]:fill-primary-foreground data-[state=checked]:border-primary data-[state=checked]:bg-primary! relative aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow,border] outline-none focus-visible:ring-[3px] [&_svg]:size-4 data-[state=checked]:[&_svg]:size-2'
-        >
-          <CircleIcon className='fill-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-500' />
-        </RadioGroupPrimitive.Item>
-        <Label htmlFor='lang-french'>Français</Label>
-      </div>
-    </RadioGroupPrimitive.Root>
-  )
-} */