@catalystsoftware/ui 1.0.0

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

@@ -0,0 +1,681 @@
+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>
+  )
+}