{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "A checkbox component that can be used to select options.",
  "registryDependencies": [
    "@tra-kit/label"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/checkbox.tsx",
      "content": "import { cva } from 'class-variance-authority';\r\nimport * as React from 'react';\r\n\r\nimport { CheckIcon, MinusIcon } from '@phosphor-icons/react';\r\nimport Label from '@/components/ui/label';\r\nimport { cn } from '@/lib/utils';\r\n\r\nconst checkboxVariants = cva(\r\n  `border-primary ring-offset-background focus-visible:ring-ring data-[disabled=true]:border-input data-[checked=true]:bg-primary data-[disabled=true]:bg-input data-[checked=true]:text-primary-foreground data-[checked=true]:disabled:bg-input peer flex\r\n  shrink-0 select-none items-center justify-center \r\n  rounded-sm border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 \r\n  data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-white data-[disabled=true]:opacity-50`,\r\n  {\r\n    variants: {\r\n      variant: {\r\n        rectangular: 'rounded-sm',\r\n        circular: 'rounded-full',\r\n      },\r\n      size: {\r\n        sm: 'size-3',\r\n        default: 'size-4',\r\n        lg: 'size-5',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      size: 'default',\r\n      variant: 'rectangular',\r\n    },\r\n  },\r\n);\r\n\r\ninterface ICheckbox {\r\n  className?: string;\r\n  disabled?: boolean;\r\n  id?: string;\r\n  label?: string;\r\n  size?: 'sm' | 'default' | 'lg';\r\n  variant?: 'rectangular' | 'circular';\r\n  checked?: boolean;\r\n  onChange?: (checked: boolean) => void;\r\n  labelSide?: 'left' | 'right';\r\n  labelClassName?: string;\r\n  containerClassName?: string;\r\n}\r\n\r\nconst Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>(\r\n  (\r\n    {\r\n      className,\r\n      disabled,\r\n      id,\r\n      checked = false,\r\n      label,\r\n      size,\r\n      variant,\r\n      onChange,\r\n      labelSide = 'right',\r\n      labelClassName,\r\n      containerClassName,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const [checkedValue, setCheckedValue] = React.useState<boolean | undefined>(checked);\r\n    return (\r\n      <div className={cn('flex items-center gap-2', containerClassName)}>\r\n        {label && labelSide === 'left' && (\r\n          <Label\r\n            className={cn('select-none', labelClassName)}\r\n            htmlFor={id}\r\n            id={`${id}-label`}\r\n            disabled={disabled}\r\n            size={size}\r\n          >\r\n            {label}\r\n          </Label>\r\n        )}\r\n        <div>\r\n          <label\r\n            className={cn(checkboxVariants({ variant, size }), className)}\r\n            htmlFor={id}\r\n            data-disabled={disabled}\r\n            data-checked={checkedValue}\r\n          >\r\n            {disabled && !checkedValue ? (\r\n              <MinusIcon\r\n                className={`${size === 'sm' ? 'size-2' : size === 'lg' ? 'size-4' : 'size-3'} ${variant === 'circular' ? 'rounded-full' : 'rounded-sm'} bg-input`}\r\n              />\r\n            ) : disabled && checkedValue ? (\r\n              <CheckIcon\r\n                className={`${size === 'sm' ? 'size-2' : size === 'lg' ? 'size-4' : 'size-3'} ${variant === 'circular' ? 'rounded-full' : 'rounded-sm'} bg-input`}\r\n              />\r\n            ) : (\r\n              <>\r\n                {checkedValue && (\r\n                  <span className={cn('flex items-center justify-center text-current')}>\r\n                    <CheckIcon\r\n                      className={`${size === 'sm' ? 'size-2' : size === 'lg' ? 'size-4' : 'size-3'} ${variant === 'circular' ? 'rounded-full' : 'rounded-sm'} bg-primary rounded-sm`}\r\n                    />\r\n                  </span>\r\n                )}\r\n              </>\r\n            )}\r\n          </label>\r\n          <input\r\n            ref={ref}\r\n            type=\"checkbox\"\r\n            checked={checkedValue}\r\n            disabled={disabled}\r\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\r\n              if (!disabled) {\r\n                setCheckedValue(e.target.checked);\r\n                onChange?.(e.target.checked);\r\n              }\r\n            }}\r\n            id={id}\r\n            className=\"peer hidden\"\r\n            {...props}\r\n          />\r\n        </div>\r\n        {label && labelSide === 'right' && (\r\n          <Label\r\n            className={cn('select-none', labelClassName)}\r\n            htmlFor={id}\r\n            id={`${id}-label`}\r\n            disabled={disabled}\r\n            size={size}\r\n          >\r\n            {label}\r\n          </Label>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nexport default Checkbox;\r\n",
      "type": "registry:ui"
    }
  ]
}