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

package/dist/components/field/field.js

@@ -1,30 +1,68 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import * as a from "react";
-import { mergeClasses as f, SLOT_ATTR as c, shorthands as r } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as W } from "../../styles/make-styles.js";
-import { fontWeightNormal as b, leadingSm as v, textSm as C, grayA11 as H, grayA8 as G, grayA12 as x, fieldInputHeight as P, leadingXs as D, textXs as F, errorOnSoft as N, errorA4 as V, errorSoft as L, grayA3 as I, accentA4 as X, accentA3 as $, grayA4 as j, focusRing as M, fieldPaddingX as k, fieldPaddingY as A, spacingElement2 as S, spacingElement1 as z, fieldSetGap as Y, radiusLg as q } from "../../tokens/index.js";
-const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createContext(null), E = () => {
-  const l = a.useContext(R);
-  if (!l)
+import { mergeClasses as f, SLOT_ATTR as r, shorthands as d } from "@epilot/zenith-runtime/v1";
+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 l;
-}, ne = () => a.useContext(R), p = W({
+  return n;
+}, 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]",
+    ...k.map(
+      (n) => `&:has([${r}="${n}"]:disabled)`
+    )
+  ].flatMap(
+    (n) => ne.map((l) => [
+      `${n} [${r}="${l}"]`,
+      ie
+    ])
+  )
+), B = {
+  alignSelf: "center",
+  marginTop: `calc(-1 * ${w})`,
+  marginBottom: `calc(-1 * ${w})`
+}, re = [...k, "field-input-group"], ae = () => Object.fromEntries([
+  ["& > *", { gridColumnStart: 1, gridColumnEnd: -1 }],
+  ...re.flatMap((n) => [
+    [
+      `& > [${r}="${n}"]`,
+      { gridColumnStart: 1, gridColumnEnd: 2 }
+    ],
+    [
+      `& > [${r}="${n}"] + :not([${r}])`,
+      {
+        gridColumnStart: 2,
+        gridColumnEnd: 3,
+        marginLeft: L,
+        ...B
+      }
+    ]
+  ])
+]), p = P({
   root: {
+    ...m,
     position: "relative",
-    display: "flex",
-    flexDirection: "column",
+    // 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.
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) auto",
     width: "100%",
     // Density-bound (DENSITY-SPEC.md §2.3, WP9B1-ACCEPTANCE-WP9B2A): normal resolves to the same
     // spacingElement2/spacingElement3 values this used before binding — `spacingGroup1` (0.5rem)
     // 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: A,
-    paddingBottom: A,
-    paddingLeft: k,
-    paddingRight: k,
-    ...r.gap(z),
-    ...r.borderRadius(q),
+    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: L,
+    ...d.borderRadius(J),
     transitionProperty: "all",
     transitionDuration: "75ms",
     outlineOffset: "2px",
@@ -35,64 +73,58 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
     },
     "&[data-focused='true'], &[data-focus-visible]": {
       outlineStyle: "solid",
-      outlineColor: M
+      outlineColor: U
     },
     "&[data-invalid]": {
-      backgroundColor: L
+      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
     // "[data-disabled] ~ &"; Griffel does not substitute `&` in that position and emits
     // `.hash<selector> .hash`, which never matches, so a label in a disabled field never dimmed.
-    // See src/ancestor-selector.test.ts.
-    [`&[data-disabled] [${c}="label"]`]: {
-      pointerEvents: "none",
-      opacity: 0.5
-    },
-    [`& :disabled ~ [${c}="label"]`]: {
-      cursor: "not-allowed",
-      opacity: 0.5
-    },
-    [`& [data-disabled] ~ [${c}="label"]`]: {
-      cursor: "not-allowed",
-      opacity: 0.5
-    }
+    // 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.
+    ...le(),
+    ...ae()
   },
   rootDefault: {
-    backgroundColor: I,
+    backgroundColor: T,
     ":hover": {
-      backgroundColor: j
+      backgroundColor: q
     }
   },
   rootHighlight: {
-    backgroundColor: $,
+    backgroundColor: Y,
     ":hover": {
       backgroundColor: X
     }
   },
   rootReadonly: {
-    backgroundColor: I
+    backgroundColor: T
   },
   rootDestructive: {
-    backgroundColor: L,
+    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.
-    ...r.gap(Y),
-    ...r.border("0"),
-    ...r.padding(0),
-    ...r.margin(0)
+    ...d.gap(Z),
+    ...d.border("0"),
+    ...d.padding(0),
+    ...d.margin(0)
   },
   fieldGroup: {
+    ...m,
     display: "flex",
     width: "100%",
-    ...r.gap(S)
+    ...d.gap(F)
   },
   fieldGroupColumn: {
     flexDirection: "column"
@@ -106,16 +138,18 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
     flexShrink: 1,
     flexBasis: "0%",
     flexDirection: "column",
-    ...r.gap(S),
+    ...d.gap(F),
     lineHeight: "1.375"
   },
   label: {
+    ...m,
     minHeight: "1rem",
-    fontSize: F,
-    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",
-    width: "fit-content",
-    ...r.gap(S),
+    ...d.gap(F),
     cursor: "default",
     color: x,
     "&[data-disabled]": {
@@ -125,7 +159,7 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
   labelContent: {
     display: "inline-flex",
     alignItems: "center",
-    ...r.gap(z),
+    ...d.gap(L),
     transitionProperty: "opacity",
     transitionDuration: "150ms",
     "@media (prefers-reduced-motion: reduce)": {
@@ -133,6 +167,7 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
     }
   },
   labelContentHover: {
+    ...m,
     width: 0,
     height: 0,
     overflowX: "visible",
@@ -141,10 +176,10 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
     pointerEvents: "none"
   },
   description: {
-    fontSize: F,
+    fontSize: C,
     lineHeight: "1.5",
-    fontWeight: b,
-    ...r.margin(0),
+    fontWeight: S,
+    ...d.margin(0),
     "& a": {
       textDecorationLine: "underline",
       textUnderlineOffset: "4px"
@@ -154,43 +189,45 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
     color: x
   },
   descriptionHelper: {
-    color: H
+    color: O
   },
   error: {
-    color: N,
-    fontSize: F,
-    lineHeight: D,
-    fontWeight: b
+    color: H,
+    fontSize: C,
+    lineHeight: E,
+    fontWeight: S
   },
   errorList: {
+    ...m,
     display: "flex",
     flexDirection: "column",
-    ...r.margin(0),
+    ...d.margin(0),
     paddingLeft: "1.25rem",
     listStyleType: "disc"
   },
   errorListItem: {
-    color: N,
-    fontSize: F,
-    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: C,
-    lineHeight: v,
+    fontSize: D,
+    lineHeight: R,
     color: x,
     backgroundColor: "transparent",
-    ...r.border("0"),
-    ...r.padding(0),
+    ...d.border("0"),
+    ...d.padding(0),
     "::placeholder": {
       color: G
     },
@@ -199,20 +236,24 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
     }
   },
   inputGroup: {
+    ...m,
     display: "flex",
     alignItems: "center",
-    ...r.gap(z),
-    width: "100%"
+    ...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}])`]: B
   },
   textarea: {
+    ...N,
     width: "100%",
     outlineStyle: "none",
-    fontSize: C,
-    lineHeight: v,
+    fontSize: D,
+    lineHeight: R,
     color: x,
     backgroundColor: "transparent",
-    ...r.border("0"),
-    ...r.padding(0),
+    ...d.border("0"),
+    ...d.padding(0),
     "::placeholder": {
       color: G
     },
@@ -230,17 +271,18 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
     resize: "horizontal"
   },
   addon: {
-    color: H,
+    ...m,
+    color: O,
     display: "flex",
     height: "auto",
     cursor: "text",
     whiteSpace: "nowrap",
     alignItems: "center",
     justifyContent: "center",
-    ...r.gap(S),
-    fontSize: C,
-    lineHeight: v,
-    fontWeight: b,
+    ...d.gap(F),
+    fontSize: D,
+    lineHeight: R,
+    fontWeight: S,
     userSelect: "none"
   },
   addonStart: {
@@ -249,132 +291,132 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
   addonEnd: {
     order: 1
   }
-}), ie = ({
-  variant: l = "default"
-} = {}) => l, le = a.forwardRef(
+}), ge = ({
+  variant: n = "default"
+} = {}) => n, me = a.forwardRef(
   function({
-    className: i,
+    className: l,
     variant: e = "default",
     children: t,
     onFocusCapture: o,
-    onBlurCapture: n,
-    ...d
-  }, m) {
-    const u = p(), h = a.useRef(null), [g, y] = a.useState(!1), T = (w) => {
-      y(!0), o == null || o(w);
-    }, O = (w) => {
-      y(!1), n == null || n(w);
-    }, B = e === "highlight" ? u.rootHighlight : e === "readonly" ? u.rootReadonly : e === "destructive" ? u.rootDestructive : u.rootDefault;
-    return /* @__PURE__ */ s(R.Provider, { value: { inputRef: h }, children: /* @__PURE__ */ s(
-      U,
+    onBlurCapture: i,
+    ...s
+  }, 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",
-        [c]: "field",
+        [r]: "field",
         "data-focused": g ? "true" : "false",
-        className: f(u.root, B, i),
-        onFocusCapture: T,
-        onBlurCapture: O,
-        ...d,
+        className: f(u.root, M, l),
+        onFocusCapture: _,
+        onBlurCapture: W,
+        ...s,
         children: t
       }
     ) });
   }
-), re = a.forwardRef(
-  function({ className: i, ...e }, t) {
+), he = a.forwardRef(
+  function({ className: l, ...e }, t) {
     const o = p();
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ c(
       "fieldset",
       {
         ref: t,
         "data-slot": "field-set",
-        [c]: "field-set",
-        className: f(o.fieldSet, i),
+        [r]: "field-set",
+        className: f(o.fieldSet, l),
         ...e
       }
     );
   }
-), ae = a.forwardRef(
-  function({ className: i, direction: e = "column", ...t }, o) {
-    const n = p();
-    return /* @__PURE__ */ s(
+), ye = a.forwardRef(
+  function({ className: l, direction: e = "column", ...t }, o) {
+    const i = p();
+    return /* @__PURE__ */ c(
       "div",
       {
         ref: o,
         "data-slot": "field-group",
-        [c]: "field-group",
+        [r]: "field-group",
         className: f(
-          n.fieldGroup,
-          e === "row" ? n.fieldGroupRow : n.fieldGroupColumn,
-          i
+          i.fieldGroup,
+          e === "row" ? i.fieldGroupRow : i.fieldGroupColumn,
+          l
         ),
         ...t
       }
     );
   }
-), de = a.forwardRef(
-  function({ className: i, ...e }, t) {
+), be = a.forwardRef(
+  function({ className: l, ...e }, t) {
     const o = p();
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ c(
       "div",
       {
         ref: t,
         "data-slot": "field-content",
-        [c]: "field-content",
-        className: f(o.fieldContent, i),
+        [r]: "field-content",
+        className: f(o.fieldContent, l),
         ...e
       }
     );
   }
-), se = a.forwardRef(
-  function({ className: i, ...e }, t) {
+), Se = a.forwardRef(
+  function({ className: l, ...e }, t) {
     const o = p();
-    return /* @__PURE__ */ s(
-      Z,
+    return /* @__PURE__ */ c(
+      Q,
       {
         ref: t,
         "data-slot": "field-label",
-        [c]: "field-label",
-        className: f(o.label, i),
+        [r]: "field-label",
+        className: f(o.label, l),
         ...e
       }
     );
   }
-), ce = a.forwardRef(function({ className: i, showOnHover: e = !0, ...t }, o) {
-  const n = p();
-  return /* @__PURE__ */ s(
+), xe = a.forwardRef(function({ className: l, showOnHover: e = !0, ...t }, o) {
+  const i = p();
+  return /* @__PURE__ */ c(
     "div",
     {
       ref: o,
       "data-slot": "field-label-content",
-      [c]: "field-label-content",
+      [r]: "field-label-content",
       className: f(
-        n.labelContent,
-        e && n.labelContentHover,
-        i
+        i.labelContent,
+        e && i.labelContentHover,
+        l
       ),
       ...t
     }
   );
-}), ue = ({
-  variant: l = "default"
-} = {}) => l, fe = a.forwardRef(function({ className: i, variant: e = "default", ...t }, o) {
-  const n = p(), d = e === "helper" ? n.descriptionHelper : n.descriptionDefault;
-  return /* @__PURE__ */ s(
-    J,
+}), Ce = ({
+  variant: n = "default"
+} = {}) => 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(
+    te,
     {
       ref: o,
       "data-slot": "field-description",
-      [c]: "field-description",
-      className: f(n.description, d, i),
+      [r]: "field-description",
+      className: f(i.description, s, l),
       ...t
     }
   );
-}), pe = a.forwardRef(
-  function({ className: i, children: e, errors: t, ...o }, n) {
-    const d = p(), m = a.useMemo(() => {
-      var h;
+}), Le = a.forwardRef(
+  function({ className: l, children: e, errors: t, ...o }, i) {
+    const s = p(), h = a.useMemo(() => {
+      var y;
       if (e)
         return e;
       if (!(t != null && t.length))
@@ -382,106 +424,106 @@ const U = "div", Z = "label", _ = "input", J = "p", K = "div", R = a.createConte
       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__ */ s("ul", { className: d.errorList, children: u.map(
-        (g, y) => (g == null ? void 0 : g.message) && /* @__PURE__ */ s("li", { className: d.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, d.errorList, d.errorListItem]);
-    return m ? /* @__PURE__ */ s(
-      K,
+    }, [e, t, s.errorList, s.errorListItem]);
+    return h ? /* @__PURE__ */ c(
+      oe,
       {
-        ref: n,
+        ref: i,
         role: "alert",
         "data-slot": "field-error",
-        [c]: "field-error",
-        className: f(d.error, i),
+        [r]: "field-error",
+        className: f(s.error, l),
         ...o,
-        children: m
+        children: h
       }
     ) : null;
   }
-), ge = a.forwardRef(
-  function({ className: i, ...e }, t) {
-    const o = p(), { inputRef: n } = E();
-    return /* @__PURE__ */ s(
-      _,
+), we = a.forwardRef(
+  function({ className: l, ...e }, t) {
+    const o = p(), { inputRef: i } = $();
+    return /* @__PURE__ */ c(
+      ee,
       {
-        ref: (d) => {
-          n.current = d, typeof t == "function" ? t(d) : t && (t.current = d);
+        ref: (s) => {
+          i.current = s, typeof t == "function" ? t(s) : t && (t.current = s);
         },
         "data-readonly": e.readOnly,
         "data-slot": "field-input",
-        [c]: "field-input",
-        className: f(o.input, i),
+        [r]: "field-input",
+        className: f(o.input, l),
         ...e
       }
     );
   }
-), me = a.forwardRef(function({ className: i, ...e }, t) {
+), ve = a.forwardRef(function({ className: l, ...e }, t) {
   const o = p();
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(
     "div",
     {
       ref: t,
       "data-slot": "field-input-group",
-      [c]: "field-input-group",
-      className: f(o.inputGroup, i),
+      [r]: "field-input-group",
+      className: f(o.inputGroup, l),
       ...e
     }
   );
-}), he = a.forwardRef(function({ className: i, resize: e = "none", ...t }, o) {
-  const n = p(), { inputRef: d } = E(), m = e === "vertical" ? n.resizeVertical : e === "horizontal" ? n.resizeHorizontal : n.resizeNone;
-  return /* @__PURE__ */ s(
+}), 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",
     {
       ...t,
       ref: (u) => {
-        d.current = u, typeof o == "function" ? o(u) : o && (o.current = u);
+        s.current = u, typeof o == "function" ? o(u) : o && (o.current = u);
       },
       "data-readonly": t.readOnly,
       "data-slot": "field-textarea",
-      [c]: "field-textarea",
+      [r]: "field-textarea",
       "data-resize": e,
-      className: f(n.textarea, m, i)
+      className: f(i.textarea, h, l)
     }
   );
-}), ye = ({
-  align: l = "start"
-} = {}) => l, be = a.forwardRef(function({ className: i, align: e = "start", ...t }, o) {
-  const n = p();
-  return /* @__PURE__ */ s(
+}), De = ({
+  align: n = "start"
+} = {}) => n, Ee = a.forwardRef(function({ className: l, align: e = "start", ...t }, o) {
+  const i = p();
+  return /* @__PURE__ */ c(
     "div",
     {
       ref: o,
       role: "group",
       "data-slot": "input-group-addon",
-      [c]: "input-group-addon",
+      [r]: "input-group-addon",
       "data-align": e,
       className: f(
-        n.addon,
-        e === "end" ? n.addonEnd : n.addonStart,
-        i
+        i.addon,
+        e === "end" ? i.addonEnd : i.addonStart,
+        l
       ),
       ...t
     }
   );
 });
 export {
-  le as Field,
-  de as FieldContent,
-  fe as FieldDescription,
-  pe as FieldError,
-  ae as FieldGroup,
-  be as FieldGroupAddon,
-  ge as FieldInput,
-  me as FieldInputGroup,
-  se as FieldLabel,
-  ce as FieldLabelContent,
-  re as FieldSet,
-  he as FieldTextarea,
-  ue as fieldDescriptionVariants,
-  ie as fieldVariants,
-  ye as inputGroupAddonVariants,
-  E as useFieldContext,
-  ne 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