{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-auto-height",
  "title": "Use auto height",
  "description": "Hook utility: use-auto-height",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/optics/hooks/use-auto-height.jsx",
      "content": "\"use client\";\nimport * as React from \"react\";\n\nexport function useAutoHeight(\n\tdeps = [],\n\toptions = {\n\t\tincludeParentBox: true,\n\t\tincludeSelfBox: false,\n\t},\n) {\n\tconst ref = React.useRef(null);\n\tconst roRef = React.useRef(null);\n\tconst [height, setHeight] = React.useState(0);\n\n\tconst measure = React.useCallback(() => {\n\t\tconst el = ref.current;\n\t\tif (!el) return 0;\n\n\t\tconst base = el.getBoundingClientRect().height || 0;\n\n\t\tlet extra = 0;\n\n\t\tif (options.includeParentBox && el.parentElement) {\n\t\t\tconst cs = getComputedStyle(el.parentElement);\n\t\t\tconst paddingY =\n\t\t\t\t(parseFloat(cs.paddingTop || \"0\") || 0) +\n\t\t\t\t(parseFloat(cs.paddingBottom || \"0\") || 0);\n\t\t\tconst borderY =\n\t\t\t\t(parseFloat(cs.borderTopWidth || \"0\") || 0) +\n\t\t\t\t(parseFloat(cs.borderBottomWidth || \"0\") || 0);\n\t\t\tconst isBorderBox = cs.boxSizing === \"border-box\";\n\t\t\tif (isBorderBox) {\n\t\t\t\textra += paddingY + borderY;\n\t\t\t}\n\t\t}\n\n\t\tif (options.includeSelfBox) {\n\t\t\tconst cs = getComputedStyle(el);\n\t\t\tconst paddingY =\n\t\t\t\t(parseFloat(cs.paddingTop || \"0\") || 0) +\n\t\t\t\t(parseFloat(cs.paddingBottom || \"0\") || 0);\n\t\t\tconst borderY =\n\t\t\t\t(parseFloat(cs.borderTopWidth || \"0\") || 0) +\n\t\t\t\t(parseFloat(cs.borderBottomWidth || \"0\") || 0);\n\t\t\tconst isBorderBox = cs.boxSizing === \"border-box\";\n\t\t\tif (isBorderBox) {\n\t\t\t\textra += paddingY + borderY;\n\t\t\t}\n\t\t}\n\n\t\tconst dpr =\n\t\t\ttypeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1;\n\t\tconst total = Math.ceil((base + extra) * dpr) / dpr;\n\n\t\treturn total;\n\t}, [options.includeParentBox, options.includeSelfBox]);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst el = ref.current;\n\t\tif (!el) return;\n\n\t\tsetHeight(measure());\n\n\t\tif (roRef.current) {\n\t\t\troRef.current.disconnect();\n\t\t\troRef.current = null;\n\t\t}\n\n\t\tconst ro = new ResizeObserver(() => {\n\t\t\tconst next = measure();\n\t\t\trequestAnimationFrame(() => setHeight(next));\n\t\t});\n\n\t\tro.observe(el);\n\t\tif (options.includeParentBox && el.parentElement) {\n\t\t\tro.observe(el.parentElement);\n\t\t}\n\n\t\troRef.current = ro;\n\n\t\treturn () => {\n\t\t\tro.disconnect();\n\t\t\troRef.current = null;\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps);\n\n\tReact.useLayoutEffect(() => {\n\t\tif (height === 0) {\n\t\t\tconst next = measure();\n\t\t\tif (next !== 0) setHeight(next);\n\t\t}\n\t}, [height, measure]);\n\n\treturn {\n\t\tref,\n\t\theight,\n\t};\n}\n",
      "type": "registry:lib",
      "target": "hooks/use-auto-height.jsx"
    }
  ],
  "type": "registry:lib"
}