@epilot/zenith-react 0.1.0-next.0

package/dist/components/date-time-picker/time-picker.js

@@ -0,0 +1,275 @@
+import { jsxs as O, jsx as m } from "react/jsx-runtime";
+import * as n from "react";
+import { SLOT_ATTR as x, mergeClasses as h, shorthands as k } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as U } from "../../styles/make-styles.js";
+import { semAccentSolidHover as V, semAccentContrast as _, semAccentSolid as z, fontWeightSemibold as F, grayA4 as G, grayA11 as L, leadingSm as X, textSm as Z, grayA8 as J, leadingBase as K, textBase as P, grayA6 as Q, radiusMd as A, grayA5 as ee, spacingElement1 as te } from "../../tokens/index.js";
+import { getHours as re, getMinutes as oe, updateTime as N, padNumber as ne } from "./date-time-picker-utils.js";
+const le = Array.from({ length: 24 }, (w, t) => t), R = U({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    justifyContent: "center",
+    ...k.gap(te)
+  },
+  fillHeight: {
+    height: "100%"
+  },
+  column: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: "3.5rem"
+  },
+  columnFillHeight: {
+    minHeight: "0"
+  },
+  scroll: {
+    display: "flex",
+    flexDirection: "column",
+    overflowY: "auto",
+    overflowX: "hidden",
+    width: "100%",
+    alignItems: "center",
+    ...k.borderRadius(A),
+    ...k.border("1px", "solid", ee),
+    scrollbarWidth: "thin",
+    scrollbarColor: `${Q} transparent`
+  },
+  scrollFixed: {
+    height: "8rem"
+  },
+  scrollFill: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    minHeight: "0"
+  },
+  separator: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: P,
+    lineHeight: K,
+    fontWeight: F,
+    color: J
+  },
+  timeBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: Z,
+    lineHeight: X,
+    ...k.borderRadius(A),
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    minHeight: "2rem",
+    width: "100%",
+    maxWidth: "3rem",
+    ...k.border("0"),
+    outlineStyle: "none"
+  },
+  timeBtnDefault: {
+    backgroundColor: "transparent",
+    color: L,
+    ":hover": {
+      backgroundColor: G
+    }
+  },
+  timeBtnSelected: {
+    fontWeight: F,
+    backgroundColor: z,
+    color: _,
+    ":hover": {
+      backgroundColor: V
+    }
+  },
+  timeBtnDisabled: {
+    cursor: "not-allowed",
+    opacity: 0.5
+  },
+  timeBtnEnabled: {
+    cursor: "pointer"
+  }
+}), H = n.memo(function({
+  value: t,
+  isSelected: a,
+  isDisabled: l,
+  onClick: d
+}) {
+  const c = R(), f = n.useCallback(() => {
+    l || d(t);
+  }, [d, t, l]);
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      "aria-disabled": l,
+      "aria-pressed": a,
+      className: h(
+        c.timeBtn,
+        !a && c.timeBtnDefault,
+        a && c.timeBtnSelected,
+        l ? c.timeBtnDisabled : c.timeBtnEnabled
+      ),
+      "data-selected": a,
+      "data-slot": "time-button",
+      [x]: "time-button",
+      "data-value": t,
+      disabled: l,
+      onClick: f,
+      type: "button",
+      children: ne(t)
+    }
+  );
+});
+H.displayName = "TimeButton";
+const me = n.forwardRef(
+  function({
+    value: t,
+    onChange: a,
+    onTimeSelect: l,
+    disablePast: d = !1,
+    currentTimeInTimezone: c,
+    fillHeight: f = !1,
+    minuteStep: I = 1,
+    className: j,
+    hoursLabel: W = "Hours",
+    minutesLabel: T = "Minutes"
+  }, E) {
+    const r = R(), g = Math.max(1, Math.floor(I)), M = n.useMemo(() => {
+      const e = [];
+      for (let s = 0; s < 60; s += g) e.push(s);
+      return e;
+    }, [g]), u = t !== null ? re(t) : -1, S = t !== null ? oe(t) : -1, p = t === null ? -1 : g === 1 ? S : Math.min(
+      M[M.length - 1],
+      Math.round(S / g) * g
+    ), C = n.useRef(null), B = n.useRef(null), i = n.useMemo(
+      () => c || /* @__PURE__ */ new Date(),
+      [c]
+    ), y = n.useMemo(() => t ? t.getFullYear() === i.getFullYear() && t.getMonth() === i.getMonth() && t.getDate() === i.getDate() : !1, [t, i]), b = i.getHours(), D = i.getMinutes(), Y = n.useCallback(
+      (e) => !d || !y ? !1 : e < b,
+      [d, y, b]
+    ), $ = n.useCallback(
+      (e) => !d || !y ? !1 : u < b ? !0 : u === b ? e < D : !1,
+      [d, y, u, b, D]
+    ), q = n.useCallback(
+      (e) => {
+        const s = t || i, o = p >= 0 ? p : 0;
+        a(N(s, e, o));
+      },
+      [a, t, i, p]
+    ), v = n.useCallback(
+      (e) => {
+        const s = t || i, o = u >= 0 ? u : 0;
+        a(N(s, o, e)), l == null || l();
+      },
+      [a, l, t, i, u]
+    );
+    return n.useEffect(() => {
+      var e, s;
+      if (C.current) {
+        const o = C.current.querySelector(
+          `[data-value="${u}"]`
+        );
+        o && ((e = o.scrollIntoView) == null || e.call(o, {
+          block: "center",
+          behavior: "auto"
+        }));
+      }
+      if (B.current) {
+        const o = B.current.querySelector(
+          `[data-value="${p}"]`
+        );
+        o && ((s = o.scrollIntoView) == null || s.call(o, {
+          block: "center",
+          behavior: "auto"
+        }));
+      }
+    }, []), /* @__PURE__ */ O(
+      "div",
+      {
+        ref: E,
+        className: h(
+          r.root,
+          f && r.fillHeight,
+          j
+        ),
+        "data-slot": "timepicker",
+        [x]: "timepicker",
+        children: [
+          /* @__PURE__ */ m(
+            "div",
+            {
+              className: h(
+                r.column,
+                f && r.columnFillHeight
+              ),
+              children: /* @__PURE__ */ m(
+                "div",
+                {
+                  className: h(
+                    r.scroll,
+                    f ? r.scrollFill : r.scrollFixed
+                  ),
+                  "aria-label": W,
+                  "data-slot": "timepicker-scroll",
+                  role: "group",
+                  [x]: "timepicker-scroll",
+                  ref: C,
+                  children: le.map((e) => /* @__PURE__ */ m(
+                    H,
+                    {
+                      isDisabled: Y(e),
+                      isSelected: e === u,
+                      onClick: q,
+                      value: e
+                    },
+                    e
+                  ))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: r.separator, children: ":" }),
+          /* @__PURE__ */ m(
+            "div",
+            {
+              className: h(
+                r.column,
+                f && r.columnFillHeight
+              ),
+              children: /* @__PURE__ */ m(
+                "div",
+                {
+                  className: h(
+                    r.scroll,
+                    f ? r.scrollFill : r.scrollFixed
+                  ),
+                  "aria-label": T,
+                  "data-slot": "timepicker-scroll",
+                  role: "group",
+                  [x]: "timepicker-scroll",
+                  ref: B,
+                  children: M.map((e) => /* @__PURE__ */ m(
+                    H,
+                    {
+                      isDisabled: $(e),
+                      isSelected: e === p,
+                      onClick: v,
+                      value: e
+                    },
+                    e
+                  ))
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  me as TimePicker
+};
+//# sourceMappingURL=time-picker.js.map

package/dist/components/date-time-picker/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n  getHours,\n  getMinutes,\n  padNumber,\n  updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n  value: Date | null\n  onChange: (date: Date) => void\n  onTimeSelect?: () => void\n  disablePast?: boolean\n  currentTimeInTimezone?: Date\n  fillHeight?: boolean\n  minuteStep?: number\n  className?: string\n  /**\n   * Accessible name for the hours column. Pass a translated string.\n   *\n   * These are ACCESSIBLE NAMES, not visible headers, and the distinction is deliberate. v1 ≤1.3.x\n   * had `hoursLabel`/`minutesLabel` that rendered visible \"HH\"/\"MM\" headings; v1 deleted them in\n   * `138fe05` (2026-06-25) and this package mirrors v1's current output, which Rule 0 makes the\n   * fidelity target. But v1 replaced them with nothing, so both libraries now hand a screen reader\n   * two unnamed columns of bare numbers. Naming them via `aria-label` closes that without moving a\n   * pixel — the VR gate still matches v1 specimen for specimen.\n   */\n  hoursLabel?: string\n  /** Accessible name for the minutes column. Pass a translated string. See `hoursLabel`. */\n  minutesLabel?: string\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"stretch\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  fillHeight: {\n    height: \"100%\",\n  },\n  column: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    width: \"3.5rem\",\n  },\n  columnFillHeight: {\n    minHeight: \"0\",\n  },\n  scroll: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n    width: \"100%\",\n    alignItems: \"center\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    scrollbarWidth: \"thin\",\n    scrollbarColor: `${tokens.grayA6} transparent`,\n  },\n  scrollFixed: {\n    height: \"8rem\",\n  },\n  scrollFill: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: \"0\",\n  },\n  separator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA8,\n  },\n  timeBtn: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    minHeight: \"2rem\",\n    width: \"100%\",\n    maxWidth: \"3rem\",\n    ...shorthands.border(\"0\"),\n    outlineStyle: \"none\",\n  },\n  timeBtnDefault: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA11,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n  },\n  timeBtnSelected: {\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSolidHover,\n    },\n  },\n  timeBtnDisabled: {\n    cursor: \"not-allowed\",\n    opacity: 0.5,\n  },\n  timeBtnEnabled: {\n    cursor: \"pointer\",\n  },\n})\n\ntype TimeButtonProps = {\n  value: number\n  isSelected: boolean\n  isDisabled: boolean\n  onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n  value,\n  isSelected,\n  isDisabled,\n  onClick,\n}: TimeButtonProps) {\n  const styles = useStyles()\n  const handleClick = React.useCallback(() => {\n    if (!isDisabled) {\n      onClick(value)\n    }\n  }, [onClick, value, isDisabled])\n\n  return (\n    <button\n      aria-disabled={isDisabled}\n      aria-pressed={isSelected}\n      className={mergeClasses(\n        styles.timeBtn,\n        !isSelected && styles.timeBtnDefault,\n        isSelected && styles.timeBtnSelected,\n        isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n      )}\n      data-selected={isSelected}\n      data-slot=\"time-button\"\n      {...{ [SLOT_ATTR]: \"time-button\" }}\n      data-value={value}\n      disabled={isDisabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {padNumber(value)}\n    </button>\n  )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      onTimeSelect,\n      disablePast = false,\n      currentTimeInTimezone,\n      fillHeight = false,\n      minuteStep = 1,\n      className,\n      hoursLabel = \"Hours\",\n      minutesLabel = \"Minutes\",\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const step = Math.max(1, Math.floor(minuteStep))\n\n    // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n    // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n    // value like 63.\n    const MINUTES = React.useMemo(() => {\n      const buckets: number[] = []\n      for (let m = 0; m < 60; m += step) buckets.push(m)\n\n      return buckets\n    }, [step])\n\n    const selectedHour = value !== null ? getHours(value) : -1\n    const rawMinute = value !== null ? getMinutes(value) : -1\n    const selectedMinute =\n      value === null\n        ? -1\n        : step === 1\n          ? rawMinute\n          : Math.min(\n              MINUTES[MINUTES.length - 1],\n              Math.round(rawMinute / step) * step\n            )\n\n    const hoursRef = React.useRef<HTMLDivElement>(null)\n    const minutesRef = React.useRef<HTMLDivElement>(null)\n\n    const now = React.useMemo(\n      () => currentTimeInTimezone || new Date(),\n      [currentTimeInTimezone]\n    )\n    const isToday = React.useMemo(() => {\n      if (!value) return false\n\n      return (\n        value.getFullYear() === now.getFullYear() &&\n        value.getMonth() === now.getMonth() &&\n        value.getDate() === now.getDate()\n      )\n    }, [value, now])\n\n    const currentHour = now.getHours()\n    const currentMinute = now.getMinutes()\n\n    const isHourDisabled = React.useCallback(\n      (hour: number) => {\n        if (!disablePast || !isToday) return false\n\n        return hour < currentHour\n      },\n      [disablePast, isToday, currentHour]\n    )\n\n    const isMinuteDisabled = React.useCallback(\n      (minute: number) => {\n        if (!disablePast || !isToday) return false\n        if (selectedHour < currentHour) return true\n        if (selectedHour === currentHour) return minute < currentMinute\n\n        return false\n      },\n      [disablePast, isToday, selectedHour, currentHour, currentMinute]\n    )\n\n    const handleHourChange = React.useCallback(\n      (hour: number) => {\n        const base = value || now\n        const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n        onChange(updateTime(base, hour, minute))\n      },\n      [onChange, value, now, selectedMinute]\n    )\n\n    const handleMinuteChange = React.useCallback(\n      (minute: number) => {\n        const base = value || now\n        const hour = selectedHour >= 0 ? selectedHour : 0\n\n        onChange(updateTime(base, hour, minute))\n        onTimeSelect?.()\n      },\n      [onChange, onTimeSelect, value, now, selectedHour]\n    )\n\n    React.useEffect(() => {\n      if (hoursRef.current) {\n        const selectedElement = hoursRef.current.querySelector(\n          `[data-value=\"${selectedHour}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n      if (minutesRef.current) {\n        const selectedElement = minutesRef.current.querySelector(\n          `[data-value=\"${selectedMinute}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n    }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClasses(\n          styles.root,\n          fillHeight && styles.fillHeight,\n          className\n        )}\n        data-slot=\"timepicker\"\n        {...{ [SLOT_ATTR]: \"timepicker\" }}\n      >\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            aria-label={hoursLabel}\n            data-slot=\"timepicker-scroll\"\n            role=\"group\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={hoursRef}\n          >\n            {HOURS.map((hour) => (\n              <TimeButton\n                isDisabled={isHourDisabled(hour)}\n                isSelected={hour === selectedHour}\n                key={hour}\n                onClick={handleHourChange}\n                value={hour}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className={styles.separator}>:</div>\n\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            aria-label={minutesLabel}\n            data-slot=\"timepicker-scroll\"\n            role=\"group\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={minutesRef}\n          >\n            {MINUTES.map((minute) => (\n              <TimeButton\n                isDisabled={isMinuteDisabled(minute)}\n                isSelected={minute === selectedMinute}\n                key={minute}\n                onClick={handleMinuteChange}\n                value={minute}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],"names":["HOURS","_","i","useStyles","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","hoursLabel","minutesLabel","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}

package/dist/components/density-provider/density-provider.js

@@ -0,0 +1,32 @@
+import { jsx as r, Fragment as v } from "react/jsx-runtime";
+import * as e from "react";
+import { SLOT_ATTR as u } from "@epilot/zenith-runtime/v1";
+const f = [
+  "compact",
+  "normal",
+  "comfortable"
+], s = (t) => f.includes(t) ? t : "normal", n = e.createContext(void 0), p = e.forwardRef(function({ density: o, className: a, children: c, ...d }, m) {
+  const i = s(o);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: m,
+      "data-slot": "density-provider",
+      [u]: "density-provider",
+      className: a,
+      ...d,
+      "data-density": i,
+      children: /* @__PURE__ */ r(n.Provider, { value: i, children: c })
+    }
+  );
+}), D = () => e.useContext(n), x = ({
+  density: t,
+  children: o
+}) => t === void 0 ? /* @__PURE__ */ r(v, { children: o }) : /* @__PURE__ */ r(n.Provider, { value: s(t), children: o });
+export {
+  x as DensityContextBoundary,
+  p as DensityProvider,
+  s as canonicalDensity,
+  D as useDensity
+};
+//# sourceMappingURL=density-provider.js.map

package/dist/components/density-provider/density-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density-provider.js","sources":["../../../src/components/density-provider/density-provider.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\n\n/**\n * DENSITY-SPEC.md §4.4 — the two density mechanisms, and why this component is the only one that\n * does both:\n *\n * - CSS custom-property inheritance (no JavaScript) already delivers the shell's AMBIENT default\n *   to every element, portalled or not — a Radix portal root is still an ordinary DOM descendant\n *   of `<html>`, so it inherits `<html data-density=\"...\">` with zero wiring. No provider needed\n *   for that common case.\n * - A bare `data-density` DOM attribute alone never reaches a portal that ISN'T a DOM descendant of\n *   it — setting a DOM attribute runs no React code, so `useDensity()` inside such a subtree (or a\n *   sibling-in-DOM, descendant-in-React-tree portal) sees nothing from it.\n *\n * `DensityProvider` sets both at once: a real DOM `data-density` boundary for ordinary (non-portal)\n * CSS inheritance, and a React context value that portal-content components (`SelectContent`,\n * `PopoverContent`, `DialogContent`, etc.) read via `useDensity()` to re-stamp themselves — since\n * portalled content is a React-tree descendant but a DOM sibling, only the context path reaches it.\n */\n\nexport type Density = \"compact\" | \"normal\" | \"comfortable\"\n\nconst CANONICAL_DENSITIES: readonly Density[] = [\n  \"compact\",\n  \"normal\",\n  \"comfortable\",\n]\n\n/**\n * Invalid runtime input (a bad string slipping past TypeScript) normalizes to \"normal\". Exported\n * (package-internal — NOT added to `src/index.ts`, no new public export) so `Table`/`DataTable`/\n * `TableHead`/`TableCell` can apply the exact same normalization to their own DOM `data-density`\n * stamp that `DensityContextBoundary` already applies to the context value — one function, so the\n * two can never independently disagree on what an invalid input normalizes to.\n */\nexport const canonicalDensity = (density: Density): Density =>\n  CANONICAL_DENSITIES.includes(density) ? density : \"normal\"\n\n/**\n * Unexported by design, same as `ListContext` — read only through `useDensity()`. Default\n * `undefined`: a component nested with no `DensityProvider` ancestor gets `undefined`, never a\n * fabricated \"normal\" — that would be a JS reading of ambient CSS this hook explicitly does not do.\n */\nconst DensityContext = React.createContext<Density | undefined>(undefined)\n\nexport type DensityProviderProps = React.ComponentProps<\"div\"> & {\n  /** The explicit density boundary for this subtree. No default — always a real caller choice. */\n  density: Density\n}\n\n/**\n * Ordinary HTML div semantics: forwards `ref`/`className`/`style`/every other div prop, no\n * polymorphic `asChild`. Renders one real DOM node (the boundary) wrapping a React context\n * provider around `children` — not two independent trees, so context and DOM boundary can never\n * disagree about which density is active.\n */\nexport const DensityProvider = React.forwardRef<\n  HTMLDivElement,\n  DensityProviderProps\n>(function DensityProvider({ density, className, children, ...props }, ref) {\n  const value = canonicalDensity(density)\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"density-provider\"\n      {...{ [SLOT_ATTR]: \"density-provider\" }}\n      className={className}\n      {...props}\n      // Authoritative, spread LAST: a raw caller `data-density` prop (part of `...props`, since\n      // `DensityProviderProps` extends every native div prop) must never win over the normalized\n      // `density` prop — the DOM attribute and the context value below both derive from the same\n      // `value`, and this ordering is what keeps that invariant true even when a caller passes a\n      // conflicting literal `data-density` alongside `density` (finish-line integration fix).\n      data-density={value}\n    >\n      <DensityContext.Provider value={value}>\n        {children}\n      </DensityContext.Provider>\n    </div>\n  )\n})\n\n/**\n * Returns the nearest explicit `DensityProvider` value, or `undefined` if none exists. Never reads\n * `getComputedStyle`/CSS custom properties — an `undefined` result means \"no explicit override in\n * the React tree,\" not \"ambient density is unknown\"; the caller's job (portal content components)\n * is to stamp nothing in that case and let ordinary CSS inheritance supply the ambient value.\n */\nexport const useDensity = (): Density | undefined =>\n  React.useContext(DensityContext)\n\n/**\n * Internal, package-private — NOT exported from `src/index.ts`. `DensityProvider` is the only\n * public density-boundary API; this is a context-only variant for a component that already owns a\n * real DOM boundary of its own (e.g. `Table`, whose root is a `<table>` and cannot safely have\n * `DensityProvider`'s wrapping `<div>` injected into its child structure without breaking table\n * semantics) and just needs the same context so its own descendant portals (e.g.\n * `table-pagination.tsx`'s inline Select) can read an explicit override via `useDensity()`.\n *\n * Renders no DOM node. Provides nothing (passes `children` through untouched, leaving whatever\n * outer `DensityContext` value already exists) when `density` is `undefined` — omitted density\n * must not fabricate a boundary any more than `DensityProvider` fabricates a DOM stamp.\n *\n * @no-host-element A pure context provider — it renders no host element (a `React.Context.Provider`\n * is not one), so there is no DOM node for a forwarded ref to ever reach.\n */\nexport const DensityContextBoundary = ({\n  density,\n  children,\n}: {\n  density: Density | undefined\n  children: React.ReactNode\n}): React.ReactElement => {\n  if (density === undefined) return <>{children}</>\n  return (\n    <DensityContext.Provider value={canonicalDensity(density)}>\n      {children}\n    </DensityContext.Provider>\n  )\n}\n"],"names":["CANONICAL_DENSITIES","canonicalDensity","density","DensityContext","React","DensityProvider","className","children","props","ref","value","jsx","SLOT_ATTR","useDensity","DensityContextBoundary","Fragment"],"mappings":";;;AAwBA,MAAMA,IAA0C;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,GASaC,IAAmB,CAACC,MAC/BF,EAAoB,SAASE,CAAO,IAAIA,IAAU,UAO9CC,IAAiBC,EAAM,cAAmC,MAAS,GAa5DC,IAAkBD,EAAM,WAGnC,SAAyB,EAAE,SAAAF,GAAS,WAAAI,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC1E,QAAMC,IAAQT,EAAiBC,CAAO;AAEtC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAAN;AAAA,MACC,GAAGE;AAAA,MAMJ,gBAAcE;AAAA,MAEd,UAAA,gBAAAC,EAACR,EAAe,UAAf,EAAwB,OAAAO,GACtB,UAAAH,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAQYM,IAAa,MACxBT,EAAM,WAAWD,CAAc,GAiBpBW,IAAyB,CAAC;AAAA,EACrC,SAAAZ;AAAA,EACA,UAAAK;AACF,MAIML,MAAY,SAAkB,gBAAAS,EAAAI,GAAA,EAAG,UAAAR,GAAS,IAE5C,gBAAAI,EAACR,EAAe,UAAf,EAAwB,OAAOF,EAAiBC,CAAO,GACrD,UAAAK,GACH;"}