{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hooks-use-auto-height",
  "title": "useAutoHeight",
  "description": "A hook that allows you to automatically adjust the height of an element based on its content.",
  "files": [
    {
      "path": "registry/hooks/use-auto-height/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\ntype AutoHeightOptions = {\n  includeParentBox?: boolean;\n  includeSelfBox?: boolean;\n};\n\nexport function useAutoHeight<T extends HTMLElement = HTMLDivElement>(\n  deps: React.DependencyList = [],\n  options: AutoHeightOptions = {\n    includeParentBox: true,\n    includeSelfBox: false,\n  },\n) {\n  const ref = React.useRef<T | null>(null);\n  const roRef = React.useRef<ResizeObserver | null>(null);\n  const [height, setHeight] = React.useState(0);\n\n  const measure = React.useCallback(() => {\n    const el = ref.current;\n    if (!el) return 0;\n\n    const base = el.getBoundingClientRect().height || 0;\n\n    let extra = 0;\n\n    if (options.includeParentBox && el.parentElement) {\n      const cs = getComputedStyle(el.parentElement);\n      const paddingY =\n        (parseFloat(cs.paddingTop || \"0\") || 0) +\n        (parseFloat(cs.paddingBottom || \"0\") || 0);\n      const borderY =\n        (parseFloat(cs.borderTopWidth || \"0\") || 0) +\n        (parseFloat(cs.borderBottomWidth || \"0\") || 0);\n      const isBorderBox = cs.boxSizing === \"border-box\";\n      if (isBorderBox) {\n        extra += paddingY + borderY;\n      }\n    }\n\n    if (options.includeSelfBox) {\n      const cs = getComputedStyle(el);\n      const paddingY =\n        (parseFloat(cs.paddingTop || \"0\") || 0) +\n        (parseFloat(cs.paddingBottom || \"0\") || 0);\n      const borderY =\n        (parseFloat(cs.borderTopWidth || \"0\") || 0) +\n        (parseFloat(cs.borderBottomWidth || \"0\") || 0);\n      const isBorderBox = cs.boxSizing === \"border-box\";\n      if (isBorderBox) {\n        extra += paddingY + borderY;\n      }\n    }\n\n    const dpr =\n      typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1;\n    const total = Math.ceil((base + extra) * dpr) / dpr;\n\n    return total;\n  }, [options.includeParentBox, options.includeSelfBox]);\n\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    setHeight(measure());\n\n    if (roRef.current) {\n      roRef.current.disconnect();\n      roRef.current = null;\n    }\n\n    const ro = new ResizeObserver(() => {\n      const next = measure();\n      requestAnimationFrame(() => setHeight(next));\n    });\n\n    ro.observe(el);\n    if (options.includeParentBox && el.parentElement) {\n      ro.observe(el.parentElement);\n    }\n\n    roRef.current = ro;\n\n    return () => {\n      ro.disconnect();\n      roRef.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  React.useLayoutEffect(() => {\n    if (height === 0) {\n      const next = measure();\n      if (next !== 0) setHeight(next);\n    }\n  }, [height, measure]);\n\n  return { ref, height } as const;\n}\n",
      "type": "registry:hook",
      "target": "hooks/use-auto-height.tsx"
    }
  ],
  "type": "registry:hook"
}