@epilot/zenith-react 0.2.0-next.1 → 0.2.0-next.4

package/dist/components/radio/radio.js

@@ -1,16 +1,17 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import * as d from "react";
-import { Root as b, Item as x, Indicator as C } from "../../vendor/.bun/@radix-ui_react-radio-group@1.3.8_2b23df507bdda662/vendor/@radix-ui/react-radio-group/dist/index.js";
-import { mergeClasses as f, SLOT_ATTR as s, shorthands as t } from "@epilot/zenith-runtime/v1";
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as n from "react";
+import { Radio as p } from "../../_virtual/_zenith-runtime-family_radio.js";
+import { mergeClasses as b, SLOT_ATTR as l, shorthands as i } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as k } from "../../styles/make-styles.js";
-import { boxModel as l, nativeControl as w } from "../../styles/host-reset.js";
-import { accentContrast as u, errorA10 as R, focusRing as p, errorSoft as y, grayA3 as m, accentSolid as v, accentOnSoft as S, accentSoft as I, errorA8 as j, accentA7 as A, spacingElement3 as G } from "../../tokens/index.js";
-const N = d.forwardRef(
-  function(o, r) {
-    return /* @__PURE__ */ e(
+import { boxModel as m, nativeControl as y } from "../../styles/host-reset.js";
+import { accentContrast as f, errorA10 as v, focusRing as h, errorSoft as R, grayA3 as g, accentSolid as w, accentOnSoft as S, accentSoft as I, errorA8 as E, accentA7 as A, spacingElement3 as T } from "../../tokens/index.js";
+import { RadioGroupBase as j } from "./radio-group-base.js";
+const G = n.forwardRef(
+  function(o, e) {
+    return /* @__PURE__ */ t(
       "svg",
       {
-        ref: r,
+        ref: e,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "currentColor",
@@ -19,17 +20,17 @@ const N = d.forwardRef(
         strokeLinecap: "round",
         strokeLinejoin: "round",
         ...o,
-        children: /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" })
+        children: /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10" })
       }
     );
   }
-), g = k({
+), C = k({
   group: {
     display: "grid",
-    ...t.gap(G)
+    ...i.gap(T)
   },
   item: {
-    ...w,
+    ...y,
     boxSizing: "border-box",
     display: "inline-flex",
     alignItems: "center",
@@ -40,7 +41,7 @@ const N = d.forwardRef(
     height: "1rem",
     flexShrink: 0,
     borderRadius: "9999px",
-    ...t.border("1px", "solid", A),
+    ...i.border("1px", "solid", A),
     backgroundColor: I,
     color: S,
     // Tailwind `shadow-xs` — literal per CONVENTIONS B7
@@ -55,32 +56,32 @@ const N = d.forwardRef(
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: p
+      outlineColor: h
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
-      backgroundColor: m,
-      ...t.borderColor("transparent")
+      backgroundColor: g,
+      ...i.borderColor("transparent")
     },
-    "&[data-state='checked']": {
-      backgroundColor: v,
-      color: u
+    "&[data-checked]": {
+      backgroundColor: w,
+      color: f
     },
-    "&[data-state='checked'][data-disabled]": {
-      backgroundColor: m
+    "&[data-checked][data-disabled]": {
+      backgroundColor: g
     },
     "&[aria-invalid='true'], &[data-invalid]": {
-      backgroundColor: y,
-      ...t.borderColor(j),
-      outlineColor: p
-    },
-    "&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]": {
       backgroundColor: R,
-      ...t.borderColor("transparent")
+      ...i.borderColor(E),
+      outlineColor: h
+    },
+    "&[data-checked][aria-invalid='true'], &[data-checked][data-invalid]": {
+      backgroundColor: v,
+      ...i.borderColor("transparent")
     }
   },
   indicator: {
-    ...l,
+    ...m,
     position: "relative",
     display: "flex",
     alignItems: "center",
@@ -89,8 +90,8 @@ const N = d.forwardRef(
     height: "100%"
   },
   icon: {
-    ...l,
-    color: u,
+    ...m,
+    color: f,
     position: "absolute",
     top: "50%",
     left: "50%",
@@ -99,45 +100,55 @@ const N = d.forwardRef(
     transform: "translate(-50%, -50%)",
     pointerEvents: "none"
   }
-}), W = d.forwardRef(function({ className: o, ...r }, i) {
-  const a = g();
-  return /* @__PURE__ */ e(
-    b,
-    {
-      ref: i,
-      "data-slot": "radio-group",
-      [s]: "radio-group",
-      className: f(a.group, o),
-      ...r
-    }
-  );
-}), B = d.forwardRef(function({ className: o, children: r, ...i }, a) {
-  const n = g();
-  return /* @__PURE__ */ h(
-    x,
+});
+function N(a) {
+  const o = n.Children.toArray(a).filter(n.isValidElement);
+  return o.length === 1 ? o[0] : void 0;
+}
+const F = n.forwardRef(
+  function({ className: o, asChild: e, children: d, ...u }, c) {
+    const s = C(), r = e ? N(d) : void 0;
+    return /* @__PURE__ */ t(
+      j,
+      {
+        ref: c,
+        "data-slot": "radio-group",
+        [l]: "radio-group",
+        className: b(s.group, o),
+        ...u,
+        ...r ? { render: r } : { children: d }
+      }
+    );
+  }
+), L = /* @__PURE__ */ t("button", { type: "button" }), P = n.forwardRef(function({ className: o, children: e, asChild: d, checked: u, ...c }, s) {
+  const r = C();
+  return /* @__PURE__ */ x(
+    p.Root,
     {
-      ref: a,
+      ref: s,
+      nativeButton: !0,
+      render: L,
       "data-slot": "radio-group-item",
-      [s]: "radio-group-item",
-      className: f(n.item, o),
-      ...i,
+      [l]: "radio-group-item",
+      className: b(r.item, o),
+      ...c,
       children: [
-        /* @__PURE__ */ e(
-          C,
+        /* @__PURE__ */ t(
+          p.Indicator,
           {
             "data-slot": "radio-group-indicator",
-            [s]: "radio-group-indicator",
-            className: n.indicator,
-            children: /* @__PURE__ */ e(N, { className: n.icon })
+            [l]: "radio-group-indicator",
+            className: r.indicator,
+            children: /* @__PURE__ */ t(G, { className: r.icon })
           }
         ),
-        r
+        e
       ]
     }
   );
 });
 export {
-  W as RadioGroup,
-  B as RadioGroupItem
+  F as RadioGroup,
+  P as RadioGroupItem
 };
 //# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeZenithStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    ...nativeControl,\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.accentSolid,\n      color: tokens.accentContrast,\n    },\n    \"&[data-state='checked'][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.errorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n      {\n        backgroundColor: tokens.errorA10,\n        ...shorthands.borderColor(\"transparent\"),\n      },\n  },\n  indicator: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    ...boxModel,\n    color: tokens.accentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      {...{ [SLOT_ATTR]: \"radio-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </RadioGroupPrimitive.Indicator>\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","nativeControl","tokens.accentA7","tokens.accentSoft","tokens.accentOnSoft","tokens.focusRing","tokens.grayA3","tokens.accentSolid","tokens.accentContrast","tokens.errorSoft","tokens.errorA8","tokens.errorA10","boxModel","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","jsxs","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":"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"}
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Radio } from \"@base-ui/react/radio\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n  RadioGroupBase,\n  type RadioGroupBaseProps,\n  type RadioGroupOrientation,\n} from \"./radio-group-base\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeZenithStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    ...nativeControl,\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-checked]\": {\n      backgroundColor: tokens.accentSolid,\n      color: tokens.accentContrast,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.errorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-checked][aria-invalid='true'], &[data-checked][data-invalid]\": {\n      backgroundColor: tokens.errorA10,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n  },\n  indicator: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    ...boxModel,\n    color: tokens.accentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\n/**\n * What `onValueChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n */\nexport type RadioGroupChangeDetails = {\n  /** Why the value changed. Base UI reports every radio group change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the group's current value. */\n  cancel: () => void\n  /** Lets the event propagate where the group would otherwise stop it. */\n  allowPropagation: () => void\n  isCanceled: boolean\n  isPropagationAllowed: boolean\n  /** The element that caused the change, if any. */\n  trigger: Element | undefined\n}\n\ntype RadioGroupRootProps = {\n  /**\n   * The controlled value of the radio item that should be currently selected.\n   *\n   * To render an uncontrolled radio group, use the `defaultValue` prop instead.\n   */\n  value?: string | null | undefined\n  /** The value of the radio item that should be initially selected. */\n  defaultValue?: string | undefined\n  /** Event handler called when the value changes. */\n  onValueChange?:\n    ((value: string, eventDetails: RadioGroupChangeDetails) => void) | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** Whether the user must choose a value before submitting a form. */\n  required?: boolean | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * The axis the arrow keys move along. When set, only that axis' keys move between the options\n   * (Up and Down for `vertical`) and it is restated as `aria-orientation`. Unset, all four work.\n   */\n  orientation?: RadioGroupOrientation | undefined\n  /** The reading direction, which decides what Left and Right mean. */\n  dir?: \"ltr\" | \"rtl\" | undefined\n  /** Whether the arrow keys wrap from the last option to the first and back. Defaults to `true`. */\n  loop?: boolean | undefined\n  /** Renders the single child element as the group, merging the group's props and behaviour onto it. */\n  asChild?: boolean | undefined\n}\n\nexport type RadioGroupProps = Omit<\n  React.ComponentPropsWithRef<\"div\">,\n  keyof RadioGroupRootProps\n> &\n  RadioGroupRootProps\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime, which\n// Radix's Slot normalised.\nfunction onlySlotChild(children: React.ReactNode) {\n  const elements = React.Children.toArray(children).filter(React.isValidElement)\n  return elements.length === 1 ? elements[0] : undefined\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup({ className, asChild, children, ...props }, ref) {\n    const styles = useStyles()\n    const child = asChild ? onlySlotChild(children) : undefined\n\n    return (\n      <RadioGroupBase\n        ref={ref}\n        data-slot=\"radio-group\"\n        {...{ [SLOT_ATTR]: \"radio-group\" }}\n        className={mergeClasses(styles.group, className)}\n        // Base UI types the group's handlers for its <div>, which is the element rendered; the\n        // caller's div-typed handlers receive exactly the events they declare.\n        {...(props as RadioGroupBaseProps)}\n        {...(child ? { render: child } : { children })}\n      />\n    )\n  }\n)\n\ntype RadioGroupItemOwnProps = {\n  /** The value this item submits and selects the group with. */\n  value: string\n  /** Whether the item should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** Whether the user must choose this item before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * @deprecated Has no effect. The group decides which item is checked, as it did on Radix, which\n   * ignored this prop.\n   */\n  checked?: boolean | undefined\n  /**\n   * @deprecated Has no effect. The indicator is the item's only child, so on Radix this rendered\n   * the indicator as the item rather than an element of yours. Remove it.\n   */\n  asChild?: boolean | undefined\n}\n\n// `name` belongs to the group, which submits it, so it is not an item prop, as on Radix.\nexport type RadioGroupItemProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof RadioGroupItemOwnProps | \"name\"\n> &\n  RadioGroupItemOwnProps\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ITEM_ELEMENT = <button type=\"button\" />\n\nexport const RadioGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  RadioGroupItemProps\n>(function RadioGroupItem(\n  { className, children, asChild: _asChild, checked: _checked, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <Radio.Root\n      ref={ref}\n      nativeButton\n      render={ITEM_ELEMENT}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      // Base UI types the item's handlers for its default <span>; the element is the button above.\n      {...(props as Radio.Root.Props<string>)}\n    >\n      <Radio.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </Radio.Indicator>\n      {children}\n    </Radio.Root>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","nativeControl","tokens.accentA7","tokens.accentSoft","tokens.accentOnSoft","tokens.focusRing","tokens.grayA3","tokens.accentSolid","tokens.accentContrast","tokens.errorSoft","tokens.errorA8","tokens.errorA10","boxModel","onlySlotChild","children","elements","RadioGroup","className","asChild","styles","child","RadioGroupBase","SLOT_ATTR","mergeClasses","ITEM_ELEMENT","RadioGroupItem","_asChild","_checked","jsxs","Radio"],"mappings":"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"}

package/dist/components/scroll-area/scroll-area.js

@@ -1,24 +1,26 @@
-import { jsx as f, jsxs as H } from "react/jsx-runtime";
+import { jsx as o, jsxs as O } from "react/jsx-runtime";
 import * as e from "react";
-import { Root as W, Scrollbar as O, Thumb as L, Corner as M, Viewport as q } from "../../vendor/.bun/@radix-ui_react-scroll-area@1.2.10_2b23df507bdda662/vendor/@radix-ui/react-scroll-area/dist/index.js";
-import { mergeClasses as h, SLOT_ATTR as o, shorthands as R } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as I } from "../../styles/make-styles.js";
-import { boxModel as T } from "../../styles/host-reset.js";
-import { grayA9 as Z, grayA11 as _, grayA10 as B, focusRing as G } from "../../tokens/index.js";
-import { useScrollbarStyles as J } from "./scrollbar-styles.js";
-const E = e.createContext(null), z = I({
+import { CSPProvider as D } from "../../_virtual/_zenith-runtime-family_csp-provider.js";
+import { DirectionProvider as L } from "../../_virtual/_zenith-runtime-family_direction-provider.js";
+import { ScrollArea as m } from "../../_virtual/_zenith-runtime-family_scroll-area.js";
+import { mergeClasses as x, SLOT_ATTR as a, shorthands as g } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as M } from "../../styles/make-styles.js";
+import { boxModel as _ } from "../../styles/host-reset.js";
+import { grayA9 as q, grayA11 as I, grayA10 as X, focusRing as Y } from "../../tokens/index.js";
+import { useScrollbarStyles as Z } from "./scrollbar-styles.js";
+const N = e.createContext(null), V = M({
   root: {
-    ...T,
+    ..._,
     position: "relative",
     minWidth: 0,
     minHeight: 0,
-    ...R.overflow("hidden"),
-    [`&[data-revealed='true'] > [${o}='scroll-area-scrollbar']`]: {
+    ...g.overflow("hidden"),
+    [`&[data-revealed='true'] > [${a}='scroll-area-scrollbar']`]: {
       opacity: 1,
       pointerEvents: "auto"
     },
     "@media (forced-colors: active)": {
-      [`& > [${o}='scroll-area-scrollbar']`]: {
+      [`& > [${a}='scroll-area-scrollbar']`]: {
         opacity: 1,
         pointerEvents: "auto",
         backgroundColor: "Canvas"
@@ -32,171 +34,203 @@ const E = e.createContext(null), z = I({
     minHeight: 0,
     boxSizing: "border-box",
     borderRadius: "inherit",
+    // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline
+    // <style> needs a nonce (Radix's took the viewport's).
+    scrollbarWidth: "none",
+    "::-webkit-scrollbar": { display: "none" },
     ":focus-visible": {
       outlineWidth: "3px",
       outlineStyle: "solid",
-      outlineColor: G,
+      outlineColor: Y,
       outlineOffset: "-3px"
     }
   },
-  verticalContent: {
-    ...T,
-    // Radix's measurement wrapper defaults to display:table, which expands long lines.
-    "& > div": { display: "block", minWidth: "100%" }
-  },
+  // The content wrapper keeps Radix's display:table, which grows to the content's width...
+  content: { display: "table" },
+  // ...except in a vertical area, where that would expand long lines past the viewport.
+  verticalContent: { display: "block" },
   reserveVertical: { paddingInlineEnd: "12px" },
   reserveHorizontal: { paddingBottom: "12px" },
   track: {
     boxSizing: "border-box",
-    ...R.padding("3px"),
     backgroundColor: "transparent",
     opacity: 0,
     pointerEvents: "none",
     transitionProperty: "opacity",
     transitionDuration: "120ms",
     "@media (prefers-reduced-motion: reduce)": { transitionDuration: "0s" },
-    [`&:hover > [${o}='scroll-area-thumb']`]: {
-      backgroundColor: B
+    [`&:hover > [${a}='scroll-area-thumb']`]: {
+      backgroundColor: X
     },
-    [`&:active > [${o}='scroll-area-thumb']`]: {
-      backgroundColor: _
+    [`&:active > [${a}='scroll-area-thumb']`]: {
+      backgroundColor: I
     },
     "@media (forced-colors: active)": {
-      [`& > [${o}='scroll-area-thumb']`]: {
+      [`& > [${a}='scroll-area-thumb']`]: {
         backgroundColor: "ButtonText",
         forcedColorAdjust: "none"
       }
     }
   },
-  vertical: { width: "12px" },
-  horizontal: { height: "12px", flexDirection: "column" },
-  thumb: { backgroundColor: Z },
-  // Radix owns thumb length (including its 18px minimum) and uses it in drag math.
+  // The 3px inset along the scroll axis is margin, not padding. With both tracks shown, Base UI
+  // 1.7.0 sizes the thumb from the track's offsetHeight/offsetWidth without subtracting its padding,
+  // which lengthened the thumb by the padding's share; a margin shrinks the track box instead, so
+  // the thumb keeps Radix's length on every orientation.
+  vertical: {
+    width: "12px",
+    ...g.padding("0", "3px"),
+    ...g.margin("3px", "0")
+  },
+  horizontal: {
+    height: "12px",
+    flexDirection: "column",
+    ...g.padding("3px", "0"),
+    ...g.margin("0", "3px")
+  },
+  thumb: { backgroundColor: q },
+  // Base UI owns thumb length (including its 16px minimum) and uses it in drag math.
   // A CSS-only minimum overrides the paint but not that math, overshooting the track.
   corner: { backgroundColor: "transparent", pointerEvents: "none" }
-}), rr = e.forwardRef(
+}), er = e.forwardRef(
   function({
-    orientation: a = "vertical",
-    visibility: u = "interaction",
-    className: v,
-    children: g,
-    onPointerEnter: t,
-    onPointerLeave: l,
-    onFocusCapture: n,
-    onBlurCapture: x,
-    ...V
-  }, p) {
-    const d = z(), y = J(), w = e.useRef(null), k = e.useRef(
+    dir: y = "ltr",
+    orientation: l = "vertical",
+    visibility: p = "interaction",
+    className: S,
+    children: k,
+    onPointerEnter: f,
+    onPointerLeave: h,
+    onFocusCapture: s,
+    onBlurCapture: t,
+    ...i
+  }, n) {
+    const b = V(), C = Z(), A = e.useRef(null), R = e.useRef(
       void 0
-    ), s = e.useRef({
+    ), c = e.useRef({
       hover: !1,
       focus: !1,
       drag: !1
-    }), [N, C] = e.useState(!1), c = e.useCallback(() => {
-      clearTimeout(k.current);
-    }, []), m = e.useCallback(() => {
-      c(), C(!0);
-    }, [c]), i = e.useCallback(() => {
-      c(), Object.values(s.current).some(Boolean) || (k.current = setTimeout(() => C(!1), 600));
-    }, [c]), S = e.useCallback(() => {
-      m(), i();
-    }, [m, i]);
+    }), [W, T] = e.useState(!1), u = e.useCallback(() => {
+      clearTimeout(R.current);
+    }, []), v = e.useCallback(() => {
+      u(), T(!0);
+    }, [u]), d = e.useCallback(() => {
+      u(), Object.values(c.current).some(Boolean) || (R.current = setTimeout(() => T(!1), 600));
+    }, [u]), E = e.useCallback(() => {
+      v(), d();
+    }, [v, d]);
     e.useEffect(() => {
-      var A;
-      const r = (A = w.current) == null ? void 0 : A.ownerDocument, b = () => {
-        s.current.drag && (s.current.drag = !1, i());
+      var z;
+      const r = (z = A.current) == null ? void 0 : z.ownerDocument, w = () => {
+        c.current.drag && (c.current.drag = !1, d());
       };
-      return r == null || r.addEventListener("pointerup", b, !0), r == null || r.addEventListener("pointercancel", b, !0), () => {
-        c(), r == null || r.removeEventListener("pointerup", b, !0), r == null || r.removeEventListener("pointercancel", b, !0);
+      return r == null || r.addEventListener("pointerup", w, !0), r == null || r.addEventListener("pointercancel", w, !0), () => {
+        u(), r == null || r.removeEventListener("pointerup", w, !0), r == null || r.removeEventListener("pointercancel", w, !0);
       };
-    }, [c, i]);
-    const $ = e.useMemo(
-      () => ({ orientation: a, onScroll: S }),
-      [a, S]
-    ), j = a === "both" ? ["vertical", "horizontal"] : [a];
-    return /* @__PURE__ */ f(E.Provider, { value: $, children: /* @__PURE__ */ H(
-      W,
+    }, [u, d]);
+    const j = e.useMemo(
+      () => ({ orientation: l, onScroll: E }),
+      [l, E]
+    ), H = l === "both" ? ["vertical", "horizontal"] : [l];
+    return /* @__PURE__ */ o(N.Provider, { value: j, children: /* @__PURE__ */ o(L, { direction: y, children: /* @__PURE__ */ o(D, { disableStyleElements: !0, children: /* @__PURE__ */ o(
+      m.Root,
       {
-        ...V,
-        type: "auto",
+        ...i,
+        dir: y,
         ref: (r) => {
-          w.current = r, typeof p == "function" ? p(r) : p && (p.current = r);
+          A.current = r, typeof n == "function" ? n(r) : n && (n.current = r);
         },
         "data-slot": "scroll-area",
-        [o]: "scroll-area",
-        "data-orientation": a,
-        "data-revealed": u === "always" || N,
-        className: h(d.root, v),
+        [a]: "scroll-area",
+        "data-orientation": l,
+        "data-revealed": p === "always" || W,
+        className: x(b.root, S),
         onPointerEnter: (r) => {
-          r.pointerType !== "touch" && (s.current.hover = !0, m()), t == null || t(r);
+          r.pointerType !== "touch" && (c.current.hover = !0, v()), f == null || f(r);
         },
         onPointerLeave: (r) => {
-          s.current.hover = !1, i(), l == null || l(r);
+          c.current.hover = !1, d(), h == null || h(r);
         },
         onFocusCapture: (r) => {
-          s.current.focus = !0, m(), n == null || n(r);
+          c.current.focus = !0, v(), s == null || s(r);
         },
         onBlurCapture: (r) => {
-          r.currentTarget.contains(r.relatedTarget) || (s.current.focus = !1, i()), x == null || x(r);
+          r.currentTarget.contains(r.relatedTarget) || (c.current.focus = !1, d()), t == null || t(r);
         },
-        children: [
-          g,
-          j.map((r) => /* @__PURE__ */ f(
-            O,
+        children: /* @__PURE__ */ O(D, { children: [
+          k,
+          H.map((r) => /* @__PURE__ */ o(
+            m.Scrollbar,
             {
               orientation: r,
               "data-slot": "scroll-area-scrollbar",
-              [o]: "scroll-area-scrollbar",
-              className: h(
-                y.track,
-                d.track,
-                d[r]
+              [a]: "scroll-area-scrollbar",
+              className: x(
+                C.track,
+                b.track,
+                b[r]
               ),
               onPointerDown: () => {
-                s.current.drag = !0, m();
+                c.current.drag = !0, v();
               },
-              children: /* @__PURE__ */ f(
-                L,
+              children: /* @__PURE__ */ o(
+                m.Thumb,
                 {
                   "data-slot": "scroll-area-thumb",
-                  [o]: "scroll-area-thumb",
-                  className: h(y.thumb, d.thumb)
+                  [a]: "scroll-area-thumb",
+                  className: x(C.thumb, b.thumb)
                 }
               )
             },
             r
           )),
-          a === "both" && /* @__PURE__ */ f(M, { className: d.corner })
-        ]
+          l === "both" && /* @__PURE__ */ o(m.Corner, { className: b.corner })
+        ] })
       }
-    ) });
+    ) }) }) });
   }
-), er = e.forwardRef(function({ className: a, onScroll: u, ...v }, g) {
-  const t = e.useContext(E), l = z();
-  if (!t)
+), tr = e.forwardRef(function({ className: y, style: l, onScroll: p, children: S, nonce: k, ...f }, h) {
+  const s = e.useContext(N), t = V();
+  if (!s)
     throw new Error("ScrollAreaViewport requires a ScrollArea parent");
-  return /* @__PURE__ */ f(
-    q,
+  const { orientation: i } = s;
+  return /* @__PURE__ */ o(
+    m.Viewport,
     {
-      ...v,
-      ref: g,
+      ...f,
+      ref: h,
       "data-slot": "scroll-area-viewport",
-      [o]: "scroll-area-viewport",
-      className: h(
-        l.viewport,
-        t.orientation === "vertical" && l.verticalContent,
-        t.orientation !== "horizontal" && l.reserveVertical,
-        t.orientation !== "vertical" && l.reserveHorizontal,
-        a
+      [a]: "scroll-area-viewport",
+      className: x(
+        t.viewport,
+        i !== "horizontal" && t.reserveVertical,
+        i !== "vertical" && t.reserveHorizontal,
+        y
       ),
+      style: {
+        overflowX: i === "vertical" ? "hidden" : "scroll",
+        overflowY: i === "horizontal" ? "hidden" : "scroll",
+        ...l
+      },
       onScroll: (n) => {
-        n.target === n.currentTarget && (t.onScroll(), u == null || u(n));
-      }
+        n.target === n.currentTarget && (s.onScroll(), p == null || p(n));
+      },
+      children: /* @__PURE__ */ o(
+        m.Content,
+        {
+          className: x(
+            t.content,
+            i === "vertical" && t.verticalContent
+          ),
+          style: { minWidth: "100%" },
+          children: S
+        }
+      )
     }
   );
 });
 export {
-  rr as ScrollArea,
-  er as ScrollAreaViewport
+  er as ScrollArea,
+  tr as ScrollAreaViewport
 };
 //# sourceMappingURL=scroll-area.js.map