{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "type": "registry:ui",
  "title": "Switch",
  "description": "A switch component that can be used to toggle between two states.",
  "registryDependencies": [
    "@tra-kit/label"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/switch.tsx",
      "content": "import * as React from 'react';\n\nimport { cva } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport Label from './label';\n\nconst switchBaseVariants = cva(\n  'bg-disabled-light focus-visible:ring-ring focus-visible:ring-offset-background peer-checked:bg-primary-focused group inline-flex  shrink-0 select-none items-center rounded-full  border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        apple: '',\n        android: '',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: 'cursor-pointer',\n      },\n      size: {\n        default: 'w-12',\n        sm: 'w-10',\n        lg: 'w-14',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'apple',\n        size: 'sm',\n        className: 'h-6',\n      },\n      {\n        variant: 'apple',\n        size: 'lg',\n        className: 'h-8',\n      },\n      {\n        variant: 'apple',\n        size: 'default',\n        className: 'h-7',\n      },\n      {\n        variant: 'android',\n        size: 'sm',\n        className: 'h-5',\n      },\n      {\n        variant: 'android',\n        size: 'lg',\n        className: 'h-7',\n      },\n      {\n        variant: 'android',\n        size: 'default',\n        className: 'h-6',\n      },\n    ],\n    defaultVariants: {\n      variant: 'apple',\n      size: 'default',\n    },\n  },\n);\n\nconst switchThumbVariants = cva(\n  'bg-button-text pointer-events-none block translate-x-0 rounded-full transition-transform group-data-[checked=true]:translate-x-5',\n  {\n    variants: {\n      variant: {\n        apple: 'ring-0',\n        android: 'ring-disabled-light group-data-[checked=true]:ring-primary ring-2',\n      },\n      size: {\n        default: 'size-6',\n        sm: 'size-5',\n        lg: 'size-7',\n      },\n    },\n    defaultVariants: {\n      variant: 'apple',\n      size: 'default',\n    },\n  },\n);\n\ninterface ISwitch {\n  className?: string;\n  thumbClassName?: string;\n  containerClassName?: string;\n  id: string;\n  defaultChecked?: boolean;\n  size?: 'default' | 'sm' | 'lg';\n  variant?: 'apple' | 'android';\n  label?: string;\n  showRequiredIcon?: boolean;\n  labelClassName?: string;\n  disabled?: boolean;\n  checked?: boolean;\n  onChange?: (e: boolean) => void;\n  labelSide?: 'left' | 'right';\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, ISwitch>(\n  (\n    {\n      className = '',\n      thumbClassName = '',\n      containerClassName = '',\n      variant = 'apple',\n      id,\n      label,\n      labelClassName,\n      showRequiredIcon = false,\n      disabled = false,\n      checked,\n      defaultChecked = false,\n      onChange,\n      size = 'default',\n      labelSide = 'right',\n      ...props\n    },\n    ref,\n  ) => {\n    const isControlled = checked !== undefined;\n    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);\n    const resolvedChecked = isControlled ? checked : internalChecked;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalChecked(e.target.checked);\n      }\n      onChange?.(e.target.checked);\n    };\n\n    const labelElement = label ? (\n      <Label\n        className={cn('select-none', labelClassName)}\n        htmlFor={id}\n        size={size}\n        id={`${id}-label`}\n        disabled={disabled}\n        showRequiredIcon={showRequiredIcon}\n      >\n        {label}\n      </Label>\n    ) : null;\n\n    return (\n      <div className={cn('flex gap-2', disabled && 'select-none', containerClassName)}>\n        {labelSide === 'left' && labelElement && <div className=\"order-0\">{labelElement}</div>}\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          checked={resolvedChecked}\n          onChange={handleChange}\n          id={id}\n          disabled={disabled}\n          className=\"peer hidden\"\n          {...props}\n        />\n        <label\n          htmlFor={id}\n          data-checked={resolvedChecked}\n          className={cn(switchBaseVariants({ variant, disabled, size }), className)}\n        >\n          <span className={cn(switchThumbVariants({ variant, size }), thumbClassName)} />\n        </label>\n        {labelSide === 'right' && labelElement && <div className=\"order-2\">{labelElement}</div>}\n      </div>\n    );\n  },\n);\n\nexport default Switch;\n",
      "type": "registry:ui"
    }
  ]
}