{"name":"density","type":"registry:ui","files":[{"path":"density.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\n\ntype Density = \"compact\" | \"default\" | \"comfortable\"\n\nconst DensityContext = React.createContext<Density | undefined>(undefined)\n\n/**\n * The density of the nearest `DensityScope` or `DensityProvider`, or\n * `undefined` outside one. A bare `data-density` attribute is CSS-only and is\n * not visible here.\n */\nfunction useDensity(): Density | undefined {\n  return React.useContext(DensityContext)\n}\n\n/**\n * Shares a density with descendants without rendering an element. Use it when\n * the element that carries `data-density` is rendered elsewhere.\n */\nfunction DensityProvider({\n  density,\n  children,\n}: {\n  density: Density\n  children: React.ReactNode\n}) {\n  return (\n    <DensityContext.Provider value={density}>{children}</DensityContext.Provider>\n  )\n}\n\n/**\n * Sets the density for a section. Popups such as menus and select lists are\n * portaled out of the section's DOM subtree, so they read the density from\n * this component rather than from CSS inheritance.\n */\nfunction DensityScope({\n  density,\n  children,\n  ...props\n}: React.ComponentPropsWithRef<\"div\"> & { density: Density }) {\n  return (\n    <div data-slot=\"density-scope\" data-density={density} {...props}>\n      <DensityProvider density={density}>{children}</DensityProvider>\n    </div>\n  )\n}\n\nexport { DensityProvider, DensityScope, useDensity, type Density }\n","target":"components/ui/density.tsx"}]}