@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/field/field.js

@@ -1,32 +1,33 @@
 import { jsx as c } from "react/jsx-runtime";
 import * as a from "react";
 import { mergeClasses as f, SLOT_ATTR as r, shorthands as d } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as W } from "../../styles/make-styles.js";
-import { fontWeightNormal as b, leadingSm as v, textSm as R, grayA11 as z, grayA8 as N, grayA12 as S, fieldPaddingY as L, fieldInputHeight as P, leadingXs as D, textXs as x, errorOnSoft as O, errorA4 as V, errorSoft as G, grayA3 as H, accentA4 as j, accentA3 as M, grayA4 as X, focusRing as Y, spacingElement1 as F, fieldPaddingX as I, spacingElement2 as C, fieldSetGap as q, radiusLg as U } from "../../tokens/index.js";
-const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createContext(null), T = () => {
-  const n = a.useContext(E);
+import { makeZenithStyles as P } from "../../styles/make-styles.js";
+import { boxModel as m, nativeControl as N } from "../../styles/host-reset.js";
+import { fontWeightNormal as S, leadingSm as R, textSm as D, grayA11 as O, grayA8 as G, grayA12 as x, fieldPaddingY as w, fieldInputHeight as V, leadingXs as E, textXs as C, errorOnSoft as H, errorA4 as j, errorSoft as I, grayA3 as T, accentA4 as X, accentA3 as Y, grayA4 as q, focusRing as U, spacingElement1 as L, fieldPaddingX as A, spacingElement2 as F, fieldSetGap as Z, radiusLg as J } from "../../tokens/index.js";
+const K = "div", Q = "label", ee = "input", te = "p", oe = "div", z = a.createContext(null), $ = () => {
+  const n = a.useContext(z);
   if (!n)
     throw new Error("FieldInput must be used within a Field component");
   return n;
-}, ce = () => a.useContext(E), A = ["field-input", "field-textarea", "select-trigger"], te = ["field-label", "label"], oe = { cursor: "not-allowed", opacity: 0.5 }, ne = () => Object.fromEntries(
+}, pe = () => a.useContext(z), k = ["field-input", "field-textarea", "select-trigger"], ne = ["field-label", "label"], ie = { cursor: "not-allowed", opacity: 0.5 }, le = () => Object.fromEntries(
   [
     "&[data-disabled]",
-    ...A.map(
+    ...k.map(
       (n) => `&:has([${r}="${n}"]:disabled)`
     )
   ].flatMap(
-    (n) => te.map((l) => [
+    (n) => ne.map((l) => [
       `${n} [${r}="${l}"]`,
-      oe
+      ie
     ])
   )
-), $ = {
+), B = {
   alignSelf: "center",
-  marginTop: `calc(-1 * ${L})`,
-  marginBottom: `calc(-1 * ${L})`
-}, ie = [...A, "field-input-group"], le = () => Object.fromEntries([
+  marginTop: `calc(-1 * ${w})`,
+  marginBottom: `calc(-1 * ${w})`
+}, re = [...k, "field-input-group"], ae = () => Object.fromEntries([
   ["& > *", { gridColumnStart: 1, gridColumnEnd: -1 }],
-  ...ie.flatMap((n) => [
+  ...re.flatMap((n) => [
     [
       `& > [${r}="${n}"]`,
       { gridColumnStart: 1, gridColumnEnd: 2 }
@@ -36,13 +37,14 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       {
         gridColumnStart: 2,
         gridColumnEnd: 3,
-        marginLeft: F,
-        ...$
+        marginLeft: L,
+        ...B
       }
     ]
   ])
-]), p = W({
+]), p = P({
   root: {
+    ...m,
     position: "relative",
     // A grid, not a column, so an injected button can sit beside the control (see BESIDE_CONTROL).
     // The second column is empty and zero-wide unless something is injected.
@@ -54,13 +56,13 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     // is a half-step short of the 0.75rem v1 actually uses, which three components got wrong by
     // reaching for it directly; that pitfall is why fieldPaddingX's normal tier aliases
     // spacingElement3, not spacingGroup1 (packages/tokens/spec/density.yaml).
-    paddingTop: L,
-    paddingBottom: L,
-    paddingLeft: I,
-    paddingRight: I,
+    paddingTop: w,
+    paddingBottom: w,
+    paddingLeft: A,
+    paddingRight: A,
     // Row gap only: a column gap would narrow the control even while the second column is empty.
-    rowGap: F,
-    ...d.borderRadius(U),
+    rowGap: L,
+    ...d.borderRadius(J),
     transitionProperty: "all",
     transitionDuration: "75ms",
     outlineOffset: "2px",
@@ -71,10 +73,10 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     },
     "&[data-focused='true'], &[data-focus-visible]": {
       outlineStyle: "solid",
-      outlineColor: Y
+      outlineColor: U
     },
     "&[data-invalid]": {
-      backgroundColor: G
+      backgroundColor: I
     },
     // Label's disabled styling, declared here because Field owns the elements these selectors are
     // rooted at. On Label they were written as "[data-disabled] &", ":disabled ~ &" and
@@ -83,44 +85,46 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     // See src/ancestor-selector.test.ts. The port of those rules still missed: they named the
     // `label` slot while FieldLabel emits `field-label`, and the `~` forms needed the label AFTER
     // the control, but it comes first. `:has()` reaches the control wherever it sits.
-    ...ne(),
-    ...le()
+    ...le(),
+    ...ae()
   },
   rootDefault: {
-    backgroundColor: H,
+    backgroundColor: T,
     ":hover": {
-      backgroundColor: X
+      backgroundColor: q
     }
   },
   rootHighlight: {
-    backgroundColor: M,
+    backgroundColor: Y,
     ":hover": {
-      backgroundColor: j
+      backgroundColor: X
     }
   },
   rootReadonly: {
-    backgroundColor: H
+    backgroundColor: T
   },
   rootDestructive: {
-    backgroundColor: G,
+    backgroundColor: I,
     ":hover": {
-      backgroundColor: V
+      backgroundColor: j
     }
   },
   fieldSet: {
+    ...m,
     display: "flex",
     flexDirection: "column",
     // Density-bound (DENSITY-SPEC.md §2.3): normal resolves to the same spacingLayout2 (32px)
     // this used before binding.
-    ...d.gap(q),
+    ...d.gap(Z),
     ...d.border("0"),
     ...d.padding(0),
     ...d.margin(0)
   },
   fieldGroup: {
+    ...m,
     display: "flex",
     width: "100%",
-    ...d.gap(C)
+    ...d.gap(F)
   },
   fieldGroupColumn: {
     flexDirection: "column"
@@ -134,19 +138,20 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     flexShrink: 1,
     flexBasis: "0%",
     flexDirection: "column",
-    ...d.gap(C),
+    ...d.gap(F),
     lineHeight: "1.375"
   },
   label: {
+    ...m,
     minHeight: "1rem",
-    fontSize: x,
-    lineHeight: D,
+    fontSize: C,
+    lineHeight: E,
     // No width: the label stretches across the field's column, so the whole label row is a hit
     // area for the control rather than only the text. Field reads as one box and is aimed at as one.
     display: "flex",
-    ...d.gap(C),
+    ...d.gap(F),
     cursor: "default",
-    color: S,
+    color: x,
     "&[data-disabled]": {
       opacity: 0.5
     }
@@ -154,7 +159,7 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
   labelContent: {
     display: "inline-flex",
     alignItems: "center",
-    ...d.gap(F),
+    ...d.gap(L),
     transitionProperty: "opacity",
     transitionDuration: "150ms",
     "@media (prefers-reduced-motion: reduce)": {
@@ -162,6 +167,7 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     }
   },
   labelContentHover: {
+    ...m,
     width: 0,
     height: 0,
     overflowX: "visible",
@@ -170,9 +176,9 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     pointerEvents: "none"
   },
   description: {
-    fontSize: x,
+    fontSize: C,
     lineHeight: "1.5",
-    fontWeight: b,
+    fontWeight: S,
     ...d.margin(0),
     "& a": {
       textDecorationLine: "underline",
@@ -180,18 +186,19 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     }
   },
   descriptionDefault: {
-    color: S
+    color: x
   },
   descriptionHelper: {
-    color: z
+    color: O
   },
   error: {
-    color: O,
-    fontSize: x,
-    lineHeight: D,
-    fontWeight: b
+    color: H,
+    fontSize: C,
+    lineHeight: E,
+    fontWeight: S
   },
   errorList: {
+    ...m,
     display: "flex",
     flexDirection: "column",
     ...d.margin(0),
@@ -199,53 +206,56 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     listStyleType: "disc"
   },
   errorListItem: {
-    color: O,
-    fontSize: x,
-    lineHeight: D,
-    fontWeight: b,
+    color: H,
+    fontSize: C,
+    lineHeight: E,
+    fontWeight: S,
     marginTop: "0.25rem",
     marginBottom: "0.25rem"
   },
   input: {
+    ...N,
     width: "100%",
     // Density-bound (DENSITY-SPEC.md §2.3): normal resolves to the same "1.5rem" this used before
     // binding. FieldComboboxInput (field-combobox.tsx) has its OWN separate makeZenithStyles call
     // and its own unrelated "input" key (width: "100%" only, no height) — this binding does not
     // reach it; review corrected an earlier claim that it did.
-    height: P,
+    height: V,
     outlineStyle: "none",
-    fontSize: R,
-    lineHeight: v,
-    color: S,
+    fontSize: D,
+    lineHeight: R,
+    color: x,
     backgroundColor: "transparent",
     ...d.border("0"),
     ...d.padding(0),
     "::placeholder": {
-      color: N
+      color: G
     },
     ":disabled": {
       cursor: "not-allowed"
     }
   },
   inputGroup: {
+    ...m,
     display: "flex",
     alignItems: "center",
-    ...d.gap(F),
+    ...d.gap(L),
     width: "100%",
     // Already a row, so an injected button lands beside the input; it must not stretch the row.
-    [`& > [${r}="field-input"] + :not([${r}])`]: $
+    [`& > [${r}="field-input"] + :not([${r}])`]: B
   },
   textarea: {
+    ...N,
     width: "100%",
     outlineStyle: "none",
-    fontSize: R,
-    lineHeight: v,
-    color: S,
+    fontSize: D,
+    lineHeight: R,
+    color: x,
     backgroundColor: "transparent",
     ...d.border("0"),
     ...d.padding(0),
     "::placeholder": {
-      color: N
+      color: G
     },
     ":disabled": {
       cursor: "not-allowed"
@@ -261,17 +271,18 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     resize: "horizontal"
   },
   addon: {
-    color: z,
+    ...m,
+    color: O,
     display: "flex",
     height: "auto",
     cursor: "text",
     whiteSpace: "nowrap",
     alignItems: "center",
     justifyContent: "center",
-    ...d.gap(C),
-    fontSize: R,
-    lineHeight: v,
-    fontWeight: b,
+    ...d.gap(F),
+    fontSize: D,
+    lineHeight: R,
+    fontWeight: S,
     userSelect: "none"
   },
   addonStart: {
@@ -280,9 +291,9 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
   addonEnd: {
     order: 1
   }
-}), ue = ({
+}), ge = ({
   variant: n = "default"
-} = {}) => n, fe = a.forwardRef(
+} = {}) => n, me = a.forwardRef(
   function({
     className: l,
     variant: e = "default",
@@ -290,29 +301,29 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
     onFocusCapture: o,
     onBlurCapture: i,
     ...s
-  }, m) {
-    const u = p(), h = a.useRef(null), [g, y] = a.useState(!1), k = (w) => {
-      y(!0), o == null || o(w);
-    }, B = (w) => {
-      y(!1), i == null || i(w);
-    }, _ = e === "highlight" ? u.rootHighlight : e === "readonly" ? u.rootReadonly : e === "destructive" ? u.rootDestructive : u.rootDefault;
-    return /* @__PURE__ */ c(E.Provider, { value: { inputRef: h }, children: /* @__PURE__ */ c(
-      Z,
+  }, h) {
+    const u = p(), y = a.useRef(null), [g, b] = a.useState(!1), _ = (v) => {
+      b(!0), o == null || o(v);
+    }, W = (v) => {
+      b(!1), i == null || i(v);
+    }, M = e === "highlight" ? u.rootHighlight : e === "readonly" ? u.rootReadonly : e === "destructive" ? u.rootDestructive : u.rootDefault;
+    return /* @__PURE__ */ c(z.Provider, { value: { inputRef: y }, children: /* @__PURE__ */ c(
+      K,
       {
-        ref: m,
+        ref: h,
         role: "group",
         "data-slot": "field",
         [r]: "field",
         "data-focused": g ? "true" : "false",
-        className: f(u.root, _, l),
-        onFocusCapture: k,
-        onBlurCapture: B,
+        className: f(u.root, M, l),
+        onFocusCapture: _,
+        onBlurCapture: W,
         ...s,
         children: t
       }
     ) });
   }
-), pe = a.forwardRef(
+), he = a.forwardRef(
   function({ className: l, ...e }, t) {
     const o = p();
     return /* @__PURE__ */ c(
@@ -326,7 +337,7 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       }
     );
   }
-), ge = a.forwardRef(
+), ye = a.forwardRef(
   function({ className: l, direction: e = "column", ...t }, o) {
     const i = p();
     return /* @__PURE__ */ c(
@@ -344,7 +355,7 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       }
     );
   }
-), me = a.forwardRef(
+), be = a.forwardRef(
   function({ className: l, ...e }, t) {
     const o = p();
     return /* @__PURE__ */ c(
@@ -358,11 +369,11 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       }
     );
   }
-), he = a.forwardRef(
+), Se = a.forwardRef(
   function({ className: l, ...e }, t) {
     const o = p();
     return /* @__PURE__ */ c(
-      J,
+      Q,
       {
         ref: t,
         "data-slot": "field-label",
@@ -372,7 +383,7 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       }
     );
   }
-), ye = a.forwardRef(function({ className: l, showOnHover: e = !0, ...t }, o) {
+), xe = a.forwardRef(function({ className: l, showOnHover: e = !0, ...t }, o) {
   const i = p();
   return /* @__PURE__ */ c(
     "div",
@@ -388,12 +399,12 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       ...t
     }
   );
-}), be = ({
+}), Ce = ({
   variant: n = "default"
-} = {}) => n, Se = a.forwardRef(function({ className: l, variant: e = "default", ...t }, o) {
+} = {}) => n, Fe = a.forwardRef(function({ className: l, variant: e = "default", ...t }, o) {
   const i = p(), s = e === "helper" ? i.descriptionHelper : i.descriptionDefault;
   return /* @__PURE__ */ c(
-    Q,
+    te,
     {
       ref: o,
       "data-slot": "field-description",
@@ -402,10 +413,10 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       ...t
     }
   );
-}), xe = a.forwardRef(
+}), Le = a.forwardRef(
   function({ className: l, children: e, errors: t, ...o }, i) {
-    const s = p(), m = a.useMemo(() => {
-      var h;
+    const s = p(), h = a.useMemo(() => {
+      var y;
       if (e)
         return e;
       if (!(t != null && t.length))
@@ -413,12 +424,12 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       const u = [
         ...new Map(t.map((g) => [g == null ? void 0 : g.message, g])).values()
       ];
-      return u.length === 1 ? (h = u[0]) == null ? void 0 : h.message : /* @__PURE__ */ c("ul", { className: s.errorList, children: u.map(
-        (g, y) => (g == null ? void 0 : g.message) && /* @__PURE__ */ c("li", { className: s.errorListItem, children: g.message }, y)
+      return u.length === 1 ? (y = u[0]) == null ? void 0 : y.message : /* @__PURE__ */ c("ul", { className: s.errorList, children: u.map(
+        (g, b) => (g == null ? void 0 : g.message) && /* @__PURE__ */ c("li", { className: s.errorListItem, children: g.message }, b)
       ) });
     }, [e, t, s.errorList, s.errorListItem]);
-    return m ? /* @__PURE__ */ c(
-      ee,
+    return h ? /* @__PURE__ */ c(
+      oe,
       {
         ref: i,
         role: "alert",
@@ -426,15 +437,15 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
         [r]: "field-error",
         className: f(s.error, l),
         ...o,
-        children: m
+        children: h
       }
     ) : null;
   }
-), Ce = a.forwardRef(
+), we = a.forwardRef(
   function({ className: l, ...e }, t) {
-    const o = p(), { inputRef: i } = T();
+    const o = p(), { inputRef: i } = $();
     return /* @__PURE__ */ c(
-      K,
+      ee,
       {
         ref: (s) => {
           i.current = s, typeof t == "function" ? t(s) : t && (t.current = s);
@@ -447,7 +458,7 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       }
     );
   }
-), Fe = a.forwardRef(function({ className: l, ...e }, t) {
+), ve = a.forwardRef(function({ className: l, ...e }, t) {
   const o = p();
   return /* @__PURE__ */ c(
     "div",
@@ -459,8 +470,8 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       ...e
     }
   );
-}), Le = a.forwardRef(function({ className: l, resize: e = "none", ...t }, o) {
-  const i = p(), { inputRef: s } = T(), m = e === "vertical" ? i.resizeVertical : e === "horizontal" ? i.resizeHorizontal : i.resizeNone;
+}), Re = a.forwardRef(function({ className: l, resize: e = "none", ...t }, o) {
+  const i = p(), { inputRef: s } = $(), h = e === "vertical" ? i.resizeVertical : e === "horizontal" ? i.resizeHorizontal : i.resizeNone;
   return /* @__PURE__ */ c(
     "textarea",
     {
@@ -472,12 +483,12 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
       "data-slot": "field-textarea",
       [r]: "field-textarea",
       "data-resize": e,
-      className: f(i.textarea, m, l)
+      className: f(i.textarea, h, l)
     }
   );
-}), we = ({
+}), De = ({
   align: n = "start"
-} = {}) => n, ve = a.forwardRef(function({ className: l, align: e = "start", ...t }, o) {
+} = {}) => n, Ee = a.forwardRef(function({ className: l, align: e = "start", ...t }, o) {
   const i = p();
   return /* @__PURE__ */ c(
     "div",
@@ -497,22 +508,22 @@ const Z = "div", J = "label", K = "input", Q = "p", ee = "div", E = a.createCont
   );
 });
 export {
-  fe as Field,
-  me as FieldContent,
-  Se as FieldDescription,
-  xe as FieldError,
-  ge as FieldGroup,
-  ve as FieldGroupAddon,
-  Ce as FieldInput,
-  Fe as FieldInputGroup,
-  he as FieldLabel,
-  ye as FieldLabelContent,
-  pe as FieldSet,
-  Le as FieldTextarea,
-  be as fieldDescriptionVariants,
-  ue as fieldVariants,
-  we as inputGroupAddonVariants,
-  T as useFieldContext,
-  ce as useOptionalFieldContext
+  me as Field,
+  be as FieldContent,
+  Fe as FieldDescription,
+  Le as FieldError,
+  ye as FieldGroup,
+  Ee as FieldGroupAddon,
+  we as FieldInput,
+  ve as FieldInputGroup,
+  Se as FieldLabel,
+  xe as FieldLabelContent,
+  he as FieldSet,
+  Re as FieldTextarea,
+  Ce as fieldDescriptionVariants,
+  ge as fieldVariants,
+  De as inputGroupAddonVariants,
+  $ as useFieldContext,
+  pe as useOptionalFieldContext
 };
 //# sourceMappingURL=field.js.map