@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/x/switch-x.tsx

@@ -1,681 +0,0 @@
-import React, { useId, useState } from 'react'
-import { Switch, switchRootVariants, switchThumbVariants, Label } from '~/components/catalyst-ui'
-import { MoonIcon, SunIcon, CheckIcon, XIcon, DatabaseIcon, CodeIcon, PaletteIcon, ShieldIcon } from 'lucide-react'
-import { cn } from '~/components/catalyst-ui'
-
-export function SwitchXGroup({ variant, className, children }: any) {
-  switch (variant) {
-    case 'vertical':
-      return (
-        <div className={cn('flex flex-col *:rounded-none *:shadow-none *:not-last:border-b-0 *:first:rounded-t-xl *:last:rounded-b-xl', className)}>
-          {children}
-        </div>
-      )
-    default:
-      return (
-        <div className={cn('flex *:rounded-none *:shadow-none max-xl:flex-col max-xl:*:not-last:border-b-0 max-xl:*:first:rounded-t-xl max-xl:*:last:rounded-b-xl xl:*:not-last:border-r-0 xl:*:first:rounded-l-xl xl:*:last:rounded-r-xl', className)}>
-          {children}
-        </div>
-      )
-  }
-}
-
-
-export function SwitchX({ switch: switchType = 'default', ...props }: any) {
-  switch (switchType) {
-    case 'toggleLabel':
-      return <ToggleLabel {...props} />
-    case 'dualToggleLabel':
-      return <DualToggleLabel {...props} />
-    case 'iconLabel':
-      return <IconLabel {...props} />
-    case 'dualIconLabel':
-      return <DualIconLabel {...props} />
-    case 'iconIndicator':
-      return <IconIndicator {...props} />
-    case 'permanentIndicator':
-      return <PermanentIndicator {...props} />
-    case 'squarePermanentIndicator':
-      return <SquarePermanentIndicator {...props} />
-    case 'animated':
-      return <Animated {...props} />
-    case 'animatedGradient':
-      return <AnimatedGradient {...props} />
-    case 'card':
-      return <Card {...props} />
-      case 'gradient':
-      return <Gradient {...props} />
-    case 'colors':
-      return <Colors {...props} />
-    case 'sizes':
-      return <Sizes {...props} />
-    case 'square':
-      return <Square {...props} />
-    case 'mini':
-      return <Mini {...props} />
-    case 'outline':
-      return <Outline {...props} />
-    default:
-      return <DefaultSwitch {...props} />
-  }
-}
-
-const DefaultSwitch = ({ label, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center space-x-2'>
-      <Switch id={id} size={size} variant={variant} shape={shape} style={style} mini={mini} className={className} {...props} />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const ToggleLabel = ({ checked: controlledChecked, onCheckedChange, label, yesLabel = 'Yes', noLabel = 'No', className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-  const [internalChecked, setInternalChecked] = useState(false)
-  const checked = controlledChecked !== undefined ? controlledChecked : internalChecked
-  const handleChange = (value: boolean) => {
-    if (onCheckedChange) {
-      onCheckedChange(value)
-    } else {
-      setInternalChecked(value)
-    }
-  }
-
-  return (
-    <div className='inline-flex items-center gap-2'>
-      <Switch id={id} checked={checked} onCheckedChange={handleChange} size={size} variant={variant} shape={shape} style={style} mini={mini} className={className} {...props} />
-      <Label htmlFor={id} className='text-sm font-medium'>
-        {checked ? yesLabel : noLabel}
-      </Label>
-    </div>
-  )
-}
-
-const DualToggleLabel = ({ checked: controlledChecked, onCheckedChange, yesLabel = 'Yes', noLabel = 'No', className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-  const [internalChecked, setInternalChecked] = useState(false)
-  const checked = controlledChecked !== undefined ? controlledChecked : internalChecked
-  const handleChange = (value: boolean) => {
-    if (onCheckedChange) {
-      onCheckedChange(value)
-    } else {
-      setInternalChecked(value)
-    }
-  }
-
-  return (
-    <div className='group inline-flex items-center gap-2' data-state={checked ? 'checked' : 'unchecked'}>
-      <span
-        id={`${id}-yes`}
-        className='group-data-[state=checked]:text-muted-foreground/70 cursor-pointer text-right text-sm font-medium'
-        aria-controls={id}
-        onClick={() => handleChange(false)}
-      >
-        {yesLabel}
-      </span>
-      <Switch id={id} checked={checked} onCheckedChange={handleChange} size={size} variant={variant} shape={shape} style={style} mini={mini} className={className} {...props} />
-      <span
-        id={`${id}-no`}
-        className='group-data-[state=unchecked]:text-muted-foreground/70 cursor-pointer text-left text-sm font-medium'
-        aria-controls={id}
-        onClick={() => handleChange(true)}
-      >
-        {noLabel}
-      </span>
-    </div>
-  )
-}
-
-const IconLabel = ({ checked: controlledChecked, onCheckedChange, checkedIcon: CheckedIcon = MoonIcon, uncheckedIcon: UncheckedIcon = SunIcon, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-  const [internalChecked, setInternalChecked] = useState(true)
-  const checked = controlledChecked !== undefined ? controlledChecked : internalChecked
-  const handleChange = (value: boolean) => {
-    if (onCheckedChange) {
-      onCheckedChange(value)
-    } else {
-      setInternalChecked(value)
-    }
-  }
-
-  return (
-    <div className='inline-flex items-center gap-2'>
-      <Switch id={id} checked={checked} onCheckedChange={handleChange} size={size} variant={variant} shape={shape} style={style} mini={mini} className={className} {...props} />
-      <Label htmlFor={id}>
-        <span className='sr-only'>Toggle switch</span>
-        {checked ? (
-          <CheckedIcon className='size-4' aria-hidden='true' />
-        ) : (
-          <UncheckedIcon className='size-4' aria-hidden='true' />
-        )}
-      </Label>
-    </div>
-  )
-}
-
-const DualIconLabel = ({ checked: controlledChecked, onCheckedChange, checkedIcon: CheckedIcon = MoonIcon, uncheckedIcon: UncheckedIcon = SunIcon, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-  const [internalChecked, setInternalChecked] = useState(true)
-  const checked = controlledChecked !== undefined ? controlledChecked : internalChecked
-  const handleChange = (value: boolean) => {
-    if (onCheckedChange) {
-      onCheckedChange(value)
-    } else {
-      setInternalChecked(value)
-    }
-  }
-
-  return (
-    <div className='group inline-flex items-center gap-2' data-state={checked ? 'checked' : 'unchecked'}>
-      <span
-        id={`${id}-light`}
-        className='group-data-[state=checked]:text-muted-foreground/70 cursor-pointer text-left text-sm font-medium'
-        aria-controls={id}
-        onClick={() => handleChange(false)}
-      >
-        <UncheckedIcon className='size-4' aria-hidden='true' />
-      </span>
-      <Switch
-        id={id}
-        checked={checked}
-        onCheckedChange={handleChange}
-        size={size}
-        variant={variant}
-        shape={shape}
-        style={style}
-        mini={mini}
-        className={className}
-        {...props}
-      />
-      <span
-        id={`${id}-dark`}
-        className='group-data-[state=unchecked]:text-muted-foreground/70 cursor-pointer text-right text-sm font-medium'
-        aria-controls={id}
-        onClick={() => handleChange(true)}
-      >
-        <CheckedIcon className='size-4' aria-hidden='true' />
-      </span>
-    </div>
-  )
-}
-
-const IconIndicator = ({ checked: controlledChecked, onCheckedChange, checkedIcon: CheckedIcon = CheckIcon, uncheckedIcon: UncheckedIcon = XIcon, className, size, variant, shape, style, mini, ...props }) => {
-  const [internalChecked, setInternalChecked] = useState(true)
-  const checked = controlledChecked !== undefined ? controlledChecked : internalChecked
-  const handleChange = (value: boolean) => {
-    if (onCheckedChange) {
-      onCheckedChange(value)
-    } else {
-      setInternalChecked(value)
-    }
-  }
-
-  return (
-    <div>
-      <div className='relative inline-grid h-7 grid-cols-[1fr_1fr] items-center text-sm font-medium'>
-        <Switch
-          checked={checked}
-          onCheckedChange={handleChange}
-          className={cn(
-            switchRootVariants({ size, variant, shape, style, mini }),
-            'peer data-[state=checked]:bg-input/50 data-[state=unchecked]:bg-input/50 [&_span]:!bg-background absolute inset-0 h-[inherit] w-14 [&_span]:size-6.5 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-7 [&_span]:data-[state=checked]:rtl:-translate-x-7',
-            className
-          )}
-          {...props}
-        />
-        <span className='peer-data-[state=checked]:text-muted-foreground/70 pointer-events-none relative ml-1.75 flex min-w-7 items-center text-center'>
-          <CheckedIcon className='size-4' aria-hidden='true' />
-        </span>
-        <span className='peer-data-[state=unchecked]:text-muted-foreground/70 pointer-events-none relative -ms-0.25 flex min-w-7 items-center text-center'>
-          <UncheckedIcon className='size-4' aria-hidden='true' />
-        </span>
-      </div>
-    </div>
-  )
-}
-
-const PermanentIndicator = ({ checked: controlledChecked, onCheckedChange, checkedIcon: CheckedIcon = CheckIcon, uncheckedIcon: UncheckedIcon = XIcon, className, size, variant, shape, style, mini, ...props }) => {
-  const [internalChecked, setInternalChecked] = useState(true)
-  const checked = controlledChecked !== undefined ? controlledChecked : internalChecked
-  const handleChange = (value: boolean) => {
-    if (onCheckedChange) {
-      onCheckedChange(value)
-    } else {
-      setInternalChecked(value)
-    }
-  }
-
-  return (
-    <div>
-      <div className='relative inline-grid h-7 grid-cols-[1fr_1fr] items-center text-sm font-medium'>
-        <Switch
-          checked={checked}
-          onCheckedChange={handleChange}
-          className={cn(
-            switchRootVariants({ size, variant, shape, style, mini }),
-            'peer data-[state=unchecked]:bg-input/50 absolute inset-0 h-[inherit] w-14 [&_span]:z-10 [&_span]:size-6.5 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-7 [&_span]:data-[state=checked]:rtl:-translate-x-7',
-            className
-          )}
-          {...props}
-        />
-        <span className='pointer-events-none relative ml-0.5 flex min-w-8 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-6 peer-data-[state=unchecked]:rtl:-translate-x-6'>
-          <UncheckedIcon className='size-4' aria-hidden='true' />
-        </span>
-        <span className='peer-data-[state=checked]:text-background pointer-events-none relative flex min-w-8 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:-translate-x-full peer-data-[state=unchecked]:invisible peer-data-[state=checked]:rtl:translate-x-full'>
-          <CheckedIcon className='size-4' aria-hidden='true' />
-        </span>
-      </div>
-    </div>
-  )
-}
-
-const SquarePermanentIndicator = ({ checked: controlledChecked, onCheckedChange, yesLabel = 'Yes', noLabel = 'No', className, size, variant, shape, style, mini, ...props }) => {
-  const [internalChecked, setInternalChecked] = useState(true)
-  const checked = controlledChecked !== undefined ? controlledChecked : internalChecked
-  const handleChange = (value: boolean) => {
-    if (onCheckedChange) {
-      onCheckedChange(value)
-    } else {
-      setInternalChecked(value)
-    }
-  }
-
-  return (
-    <div>
-      <div className='relative inline-grid h-8 grid-cols-[1fr_1fr] items-center text-sm font-medium'>
-        <Switch
-          checked={checked}
-          onCheckedChange={handleChange}
-          className={cn(
-            switchRootVariants({ size, variant, shape, style, mini }),
-            'peer data-[state=unchecked]:bg-input/50 absolute inset-0 h-[inherit] w-auto rounded-md [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:rounded-sm [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-8.75 [&_span]:data-[state=checked]:rtl:-translate-x-8.75',
-            className
-          )}
-          {...props}
-        />
-        <span className='pointer-events-none relative ml-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full'>
-          <span className='text-[10px] font-medium uppercase'>{noLabel}</span>
-        </span>
-        <span className='peer-data-[state=checked]:text-background pointer-events-none relative mr-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:-translate-x-full peer-data-[state=unchecked]:invisible peer-data-[state=checked]:rtl:translate-x-full'>
-          <span className='text-[10px] font-medium uppercase'>{yesLabel}</span>
-        </span>
-      </div>
-    </div>
-  )
-}
-
-const Animated = ({ label, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center space-x-2'>
-      <Switch id={id} size={size} variant={variant} shape={shape} style={style} mini={mini} className={className} {...props} />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const AnimatedGradient = ({ label, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center space-x-2'>
-      <Switch
-        id={id}
-        size={size}
-        variant={variant}
-        shape={shape}
-        style={style}
-        mini={mini}
-        className={cn(
-          'focus-visible:border-destructive to-destructive/60 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border-none bg-gradient-to-r from-amber-500 data-[state=checked]:from-sky-400 data-[state=checked]:to-indigo-700 [&_span]:size-5 [&_span]:!translate-x-0.25',
-          className
-        )}
-        {...props}
-      />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const Card = ({ icon: Icon = DatabaseIcon, title, description, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='border-input has-data-[state=checked]:border-primary/50 relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none'>
-      <Switch
-        id={id}
-        size={size}
-        variant={variant}
-        shape={shape}
-        style={style}
-        mini={mini}
-        className={cn(
-          'order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2.5 data-[state=checked]:[&_span]:rtl:-translate-x-2.5',
-          className
-        )}
-        {...props}
-      />
-      <div className='flex grow items-center gap-3'>
-        {Icon && <Icon className='size-5' />}
-        <div className='grid grow gap-2'>
-          {title && <Label htmlFor={id}>{title}</Label>}
-          {description && (
-            <p id={`${id}-description`} className='text-muted-foreground text-xs'>
-              {description}
-            </p>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-
-const Gradient = ({ label, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center space-x-2'>
-      <Switch
-        id={id}
-        size={size}
-        variant={variant}
-        shape={shape}
-        style={style}
-        mini={mini}
-        className={cn(
-          'focus-visible:border-destructive to-destructive/60 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 h-6 w-10 border-none bg-gradient-to-r from-amber-500 data-[state=checked]:from-sky-400 data-[state=checked]:to-indigo-700 [&_span]:size-5 [&_span]:!translate-x-0.25 data-[state=checked]:[&_span]:!translate-x-4.75 data-[state=checked]:[&_span]:rtl:!-translate-x-4.75',
-          className
-        )}
-        {...props}
-      />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const Colors = ({ colorVariant = 'destructive', label, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center gap-3'>
-      <Switch
-        id={id}
-        size={size}
-        variant={colorVariant}
-        shape={shape}
-        style={style}
-        mini={mini}
-        className={className}
-        defaultChecked
-        {...props}
-      />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const Sizes = ({ sizeVariant = 'sm', label, className, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center gap-3'>
-      <Switch
-        id={id}
-        size={sizeVariant}
-        variant={variant}
-        shape={shape}
-        style={style}
-        mini={mini}
-        className={className}
-        {...props}
-      />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const Square = ({ label, className, size, variant, shape, style, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center space-x-2'>
-      <Switch
-        id={id}
-        size={size}
-        variant={variant}
-        shape='square'
-        style={style}
-        mini={mini}
-        className={className}
-        {...props}
-      />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const Mini = ({ label, className, size, variant, shape, style, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center space-x-2'>
-      <Switch
-        id={id}
-        size={size}
-        variant={variant}
-        shape={shape}
-        style={style}
-        mini={true}
-        className={className}
-        {...props}
-      />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-const Outline = ({ colorVariant = 'default', label, className, size, variant, shape, mini, ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-center gap-3'>
-      <Switch
-        id={id}
-        size={size}
-        variant={colorVariant}
-        shape={shape}
-        style='outline'
-        mini={mini}
-        className={className}
-        defaultChecked
-        {...props}
-      />
-      {label && <Label htmlFor={id}>{label}</Label>}
-    </div>
-  )
-}
-
-export function SwitchXDemo() {
-  const [checked1, setChecked1] = useState(false)
-  const [checked2, setChecked2] = useState(true)
-  const [checked3, setChecked3] = useState(false)
-  const [checked4, setChecked4] = useState(true)
-  const [checked5, setChecked5] = useState(true)
-  const [checked6, setChecked6] = useState(true)
-  const [checked7, setChecked7] = useState(true)
-  const [checked8, setChecked8] = useState(true)
-  const [checked9, setChecked9] = useState(false)
-  const [checked10, setChecked10] = useState(false)
-  const [checked11, setChecked11] = useState(false)
-  const [checked12, setChecked12] = useState(false)
-  const [checked13, setChecked13] = useState(false)
-  const [checked14, setChecked14] = useState(false)
-  const [checked15, setChecked15] = useState(false)
-  const [checked16, setChecked16] = useState(false)
-  const [checked17, setChecked17] = useState(false)
-
-  const [listItems, setListItems] = useState([
-    { label: 'React', icon: CodeIcon, checked: false },
-    { label: 'Design', icon: PaletteIcon, checked: false },
-    { label: 'Security', icon: ShieldIcon, checked: false },
-  ])
-
-  const handleListItemChange = (index: number, checked: boolean) => {
-    const newItems = [...listItems]
-    newItems[index].checked = checked
-    setListItems(newItems)
-  }
-
-  return (
-    <div className='space-y-12 p-6 max-w-3xl mx-auto'>
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Default</h3>
-        <SwitchX label='Airplane Mode' checked={checked1} onCheckedChange={setChecked1} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Square</h3>
-        <SwitchX switch='square' label='Square Switch' checked={checked15} onCheckedChange={setChecked15} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Mini</h3>
-        <SwitchX switch='mini' label='Mini Switch' checked={checked16} onCheckedChange={setChecked16} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Colors</h3>
-        <div className='flex items-center gap-3'>
-          <SwitchX switch='colors' colorVariant='destructive' />
-          <SwitchX switch='colors' colorVariant='success' />
-          <SwitchX switch='colors' colorVariant='info' />
-          <SwitchX switch='colors' colorVariant='warning' />
-        </div>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Sizes</h3>
-        <div className='flex items-center gap-3'>
-          <SwitchX switch='sizes' sizeVariant='sm' />
-          <SwitchX switch='sizes' sizeVariant='md' />
-          <SwitchX switch='sizes' sizeVariant='lg' />
-        </div>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Outline</h3>
-        <div className='flex items-center gap-3'>
-          <SwitchX switch='outline' colorVariant='default' />
-          <SwitchX switch='outline' colorVariant='destructive' />
-          <SwitchX switch='outline' colorVariant='success' />
-          <SwitchX switch='outline' colorVariant='info' />
-          <SwitchX switch='outline' colorVariant='warning' />
-        </div>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Gradient</h3>
-        <SwitchX switch='gradient' label='Gradient Switch' checked={checked17} onCheckedChange={setChecked17} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Toggle Label</h3>
-        <SwitchX switch='toggleLabel' checked={checked2} onCheckedChange={setChecked2} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Dual Toggle Label</h3>
-        <SwitchX switch='dualToggleLabel' checked={checked3} onCheckedChange={setChecked3} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Icon Label</h3>
-        <SwitchX switch='iconLabel' checked={checked4} onCheckedChange={setChecked4} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Dual Icon Label</h3>
-        <SwitchX switch='dualIconLabel' checked={checked5} onCheckedChange={setChecked5} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Icon Indicator</h3>
-        <SwitchX switch='iconIndicator' checked={checked6} onCheckedChange={setChecked6} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Permanent Indicator</h3>
-        <SwitchX switch='permanentIndicator' checked={checked7} onCheckedChange={setChecked7} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Square Permanent Indicator</h3>
-        <SwitchX switch='squarePermanentIndicator' checked={checked8} onCheckedChange={setChecked8} />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Card 1</h3>
-        <SwitchX
-          switch='card'
-          icon={DatabaseIcon}
-          title='Backup'
-          description='Backup every file from your project.'
-          checked={checked9}
-          onCheckedChange={setChecked9}
-        />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Card 2</h3>
-        <SwitchX
-          switch='card'
-          icon={() => (
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/brand-logo/google-icon.png?width=20&height=20&format=auto'
-              alt='Google Icon'
-              className='size-5'
-            />
-          )}
-          title='Google Cloud Backup'
-          description='Backup every picture, video and PDFs.'
-          checked={checked10}
-          onCheckedChange={setChecked10}
-        />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Card 3</h3>
-        <SwitchX
-          switch='card'
-          icon={() => (
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/brand-logo/github-icon.png?width=20&height=20&format=auto'
-              alt='GitHub Icon'
-              className='size-5'
-            />
-          )}
-          title='Connect with GitHub'
-          description='Access your projects direct from GitHub.'
-          checked={checked11}
-          onCheckedChange={setChecked11}
-        />
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>List Group</h3>
-        <SwitchX
-          switch='listGroup'
-          items={listItems.map((item, index) => ({
-            ...item,
-            onCheckedChange: (checked: boolean) => handleListItemChange(index, checked),
-          }))}
-        />
-      </div>
-
-    </div>
-  )
-}