@flanksource/clicky-ui/dist/hooks/use-density.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsx } from "react/jsx-runtime";
import { useContext, createContext, useState, useEffect, useCallback, useMemo } from "react";
const STORAGE_KEY = "clicky-ui-density";
const DATA_ATTR = "data-density";
const DensityContext = createContext(null);
function readStored() {
  if (typeof window === "undefined") return null;
  const raw = window.localStorage.getItem(STORAGE_KEY);
  return raw === "compact" || raw === "comfortable" || raw === "spacious" ? raw : null;
}
function apply(density) {
  if (typeof document === "undefined") return;
  document.documentElement.setAttribute(DATA_ATTR, density);
}
function DensityProvider({
  children,
  defaultDensity = "comfortable",
  storageKey = STORAGE_KEY
}) {
  const [density, setDensityState] = useState(() => {
    if (typeof window === "undefined") return defaultDensity;
    return readStored() ?? defaultDensity;
  });
  useEffect(() => {
    apply(density);
    if (typeof window !== "undefined") {
      window.localStorage.setItem(storageKey, density);
    }
  }, [density, storageKey]);
  const setDensity = useCallback((next) => setDensityState(next), []);
  const value = useMemo(
    () => ({ density, setDensity }),
    [density, setDensity]
  );
  return /* @__PURE__ */ jsx(DensityContext.Provider, { value, children });
}
function useDensity() {
  const ctx = useContext(DensityContext);
  if (!ctx) throw new Error("useDensity must be used inside <DensityProvider>");
  return ctx;
}
function useDensityValue() {
  const ctx = useContext(DensityContext);
  if (ctx) return ctx.density;
  if (typeof document === "undefined") return "comfortable";
  const raw = document.documentElement.getAttribute("data-density");
  return raw === "compact" || raw === "spacious" ? raw : "comfortable";
}
export {
  DensityProvider,
  useDensity,
  useDensityValue
};
//# sourceMappingURL=use-density.js.map