{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-controllable-state",
  "type": "registry:lib",
  "title": "Use Controllable State",
  "description": "Use Controllable State component",
  "files": [
    {
      "path": "src/registry/lib/use-controllable-state.ts",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Hook for components that support both controlled and uncontrolled modes.\n *\n * @param controlledValue - The controlled value (if provided)\n * @param defaultValue - The default value for uncontrolled mode\n * @param onChange - Callback fired when value changes\n * @returns A tuple of [currentValue, setValue]\n *\n * @example\n * ```tsx\n * interface Props {\n *   value?: string;\n *   defaultValue?: string;\n *   onValueChange?: (value: string) => void;\n * }\n *\n * function Input({ value, defaultValue = \"\", onValueChange }: Props) {\n *   const [currentValue, setValue] = useControllableState(\n *     value,\n *     defaultValue,\n *     onValueChange,\n *   );\n *\n *   return (\n *     <input\n *       value={currentValue}\n *       onChange={(e) => setValue(e.target.value)}\n *     />\n *   );\n * }\n * ```\n */\nexport function useControllableState<T>(\n  controlledValue: T | undefined,\n  defaultValue: T,\n  onChange?: (value: T) => void,\n): [T, (value: T) => void] {\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (newValue: T) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onChange?.(newValue);\n    },\n    [isControlled, onChange],\n  );\n\n  return [value, setValue];\n}\n",
      "type": "registry:lib",
      "target": "lib/use-controllable-state.ts"
    }
  ]
}