{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hooks-use-controlled-state",
  "title": "useControlledState",
  "description": "A hook that allows you to control a state.",
  "files": [
    {
      "path": "registry/hooks/use-controlled-state/index.tsx",
      "content": "import * as React from \"react\";\n\ninterface CommonControlledStateProps<T> {\n  defaultValue?: T;\n  value?: T;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useControlledState<T, Rest extends any[] = []>(\n  props: CommonControlledStateProps<T> & {\n    onChange?: (value: T, ...args: Rest) => void;\n  }\n): readonly [T, (next: T, ...args: Rest) => void] {\n  const { value, defaultValue, onChange } = props;\n\n  const [state, setInternalState] = React.useState<T>(\n    value === undefined ? (defaultValue as T) : value\n  );\n\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalState(value);\n    }\n  }, [value]);\n\n  const setState = React.useCallback(\n    (next: T, ...args: Rest) => {\n      setInternalState(next);\n      onChange?.(next, ...args);\n    },\n    [onChange]\n  );\n\n  return [state, setState] as const;\n}\n",
      "type": "registry:hook",
      "target": "hooks/use-controlled-state.tsx"
    }
  ],
  "type": "registry:hook"
}