{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-buttons",
  "type": "registry:ui",
  "title": "Radio Buttons",
  "description": "A radio buttons component that can be used to select one option from a set.",
  "files": [
    {
      "path": "registry/tra-kit/components/radio-buttons.tsx",
      "content": "import React, { useContext, useMemo } from 'react';\r\n\r\ninterface IRadioButtonContext {\r\n  selectedValue: string | number | undefined;\r\n  setSelectedValue: React.Dispatch<React.SetStateAction<string | number | undefined>>;\r\n  onChange?: (value: string | number | undefined) => void;\r\n}\r\n\r\nconst RadioButtonContext = React.createContext<IRadioButtonContext | undefined>(undefined);\r\n\r\ninterface IRadioGroupItem {\r\n  id: string;\r\n  label?: string;\r\n  disabled?: boolean;\r\n  name?: string;\r\n  value: string;\r\n  className?: string;\r\n  checked?: boolean;\r\n}\r\n\r\nexport const RadioGroupItem: React.FC<IRadioGroupItem> = ({\r\n  id,\r\n  label,\r\n  disabled = false,\r\n  checked = false,\r\n  name,\r\n  value,\r\n  className = '',\r\n}) => {\r\n  const context = useContext(RadioButtonContext);\r\n  if (!context) {\r\n    throw new Error('RadioGroupItem component must be used within a RadioGroup component');\r\n  }\r\n  const { selectedValue, setSelectedValue, onChange } = context;\r\n  return (\r\n    <div className=\"flex items-center space-x-2\">\r\n      <input\r\n        type=\"radio\"\r\n        id={id}\r\n        name={name}\r\n        value={value}\r\n        checked={checked || selectedValue === value}\r\n        disabled={disabled}\r\n        onChange={() => {\r\n          setSelectedValue(value);\r\n          if (onChange) {\r\n            onChange(value);\r\n          }\r\n        }}\r\n        className=\"peer hidden\"\r\n      />\r\n      <label\r\n        htmlFor={id}\r\n        data-checked={checked || selectedValue === value}\r\n        data-disabled={disabled}\r\n        className={`border-primary-30 bg-disabled-light-dark text-primary ring-offset-error focus-visible:ring-primary peer-checked:border-primary data-[disabled=true]:border-primary-15! group \r\n        relative aspect-square size-5 select-none rounded-full border-[1.5px] ring-offset-8 focus:outline-hidden\r\n        focus-visible:ring-2 focus-visible:ring-offset-2 peer-checked:bg-transparent data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50\r\n        dark:bg-transparent ${className}`}\r\n      >\r\n        <span\r\n          className=\"group-data-[checked=true]:bg-primary group-data-[disabled=true]:bg-primary-15 absolute left-1/2 top-1/2 hidden aspect-square size-3 -translate-x-1/2\r\n      -translate-y-1/2 select-none rounded-full group-data-[checked=true]:block\"\r\n        />\r\n      </label>\r\n      {label && (\r\n        <label\r\n          htmlFor={id}\r\n          className=\"select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\r\n        >\r\n          {label}\r\n        </label>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ninterface IRadioGroup {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  defaultValue?: string | number;\r\n  onChange?: (value: string | number | undefined) => void;\r\n}\r\n\r\nexport const RadioGroup: React.FC<IRadioGroup> = ({\r\n  children,\r\n  className,\r\n  defaultValue,\r\n  onChange,\r\n}) => {\r\n  const [selectedValue, setSelectedValue] = React.useState<string | number | undefined>(\r\n    defaultValue,\r\n  );\r\n\r\n  const value = useMemo(() => ({ selectedValue, setSelectedValue, onChange }), [selectedValue]);\r\n  return (\r\n    <RadioButtonContext.Provider value={value}>\r\n      <div className={className}>{children}</div>\r\n    </RadioButtonContext.Provider>\r\n  );\r\n};\r\n",
      "type": "registry:ui"
    }
  ]
}