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

package/dist/components/field/field-combobox.js

@@ -1,14 +1,13 @@
-import { jsx as r, jsxs as L } from "react/jsx-runtime";
-import * as s from "react";
-import { SLOT_ATTR as d, mergeClasses as b, shorthands as c } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as N } from "../../styles/make-styles.js";
-import { boxModel as l, nativeControl as F } from "../../styles/host-reset.js";
-import { grayA8 as q, focusRing as v, accentA11 as T, spacingElement2 as u, spacingGroup1 as f, grayA11 as h, spacingElement1 as S, graySoft as P, leadingXs as V, textXs as D, fontWeightSemibold as B, leadingSm as C, textSm as w, grayA12 as g, radiusMd as G, radiusLg as k } from "../../tokens/index.js";
-import { Command as A, CommandEmpty as E, CommandGroup as j, CommandInput as z, CommandItem as H, CommandList as W, CommandLoading as M, CommandSeparator as O } from "../command/command.js";
-import { Label as Z } from "../label/label.js";
-import { Popover as X, PopoverPortal as $, PopoverContent as _, PopoverTrigger as J } from "../popover/popover.js";
-import { useOptionalFieldContext as K } from "./field.js";
-const Q = (a) => /* @__PURE__ */ r(
+import { jsx as r, jsxs as P } from "react/jsx-runtime";
+import * as m from "react";
+import { SLOT_ATTR as c, mergeClasses as b, shorthands as d } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as B } from "../../styles/make-styles.js";
+import { boxModel as s, nativeControl as R } from "../../styles/host-reset.js";
+import { grayA8 as V, focusRing as S, accentA11 as D, spacingElement2 as u, spacingGroup1 as h, grayA11 as y, spacingElement1 as L, graySoft as G, leadingXs as k, textXs as A, fontWeightSemibold as E, leadingSm as w, textSm as F, grayA12 as C, radiusMd as j, radiusLg as z } from "../../tokens/index.js";
+import { CommandCollection as H, Command as W, CommandEmpty as M, CommandGroup as O, CommandGroupLabel as Z, CommandInput as X, CommandItem as $, CommandList as _, CommandLoading as J, CommandSeparator as K } from "../command/command.js";
+import { Popover as Q, PopoverPortal as U, PopoverContent as Y, PopoverTrigger as oo } from "../popover/popover.js";
+import { useFieldLabelId as eo, useOptionalFieldContext as to, useReportFieldControlId as no } from "./field.js";
+const ro = (a) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -19,7 +18,7 @@ const Q = (a) => /* @__PURE__ */ r(
     ...a,
     children: /* @__PURE__ */ r("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
   }
-), U = (a) => /* @__PURE__ */ r(
+), ao = (a) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -30,7 +29,7 @@ const Q = (a) => /* @__PURE__ */ r(
     ...a,
     children: /* @__PURE__ */ r("path", { d: "M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z" })
   }
-), R = (a) => /* @__PURE__ */ r(
+), N = (a) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -41,27 +40,27 @@ const Q = (a) => /* @__PURE__ */ r(
     ...a,
     children: /* @__PURE__ */ r("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" })
   }
-), p = N({
+), p = B({
   trigger: {
-    ...F,
+    ...R,
     width: "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    ...c.gap(u),
-    ...c.borderRadius(k),
+    ...d.gap(u),
+    ...d.borderRadius(z),
     backgroundColor: "transparent",
-    fontSize: w,
-    lineHeight: C,
+    fontSize: F,
+    lineHeight: w,
     whiteSpace: "nowrap",
     outlineStyle: "none",
-    ...c.border("0"),
-    ...c.padding(0),
+    ...d.border("0"),
+    ...d.padding(0),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: v
+      outlineColor: S
     },
     ":disabled": {
       cursor: "not-allowed",
@@ -69,7 +68,7 @@ const Q = (a) => /* @__PURE__ */ r(
     },
     // The open-state chevron rotation is declared HERE, on the trigger that carries the state
     // attribute, reaching the chevron by SLOT_ATTR.
-    [`&[data-popup-open] [${d}="combobox-icon"]`]: {
+    [`&[data-popup-open] [${c}="combobox-icon"]`]: {
       transform: "rotate(180deg)"
     }
   },
@@ -80,7 +79,7 @@ const Q = (a) => /* @__PURE__ */ r(
     }
   },
   triggerChevron: {
-    ...l,
+    ...s,
     width: "1.5rem",
     height: "1.5rem",
     flexShrink: 0,
@@ -90,58 +89,58 @@ const Q = (a) => /* @__PURE__ */ r(
     "@media (prefers-reduced-motion: reduce)": {
       transitionDuration: "0.01ms"
     },
-    color: h
+    color: y
   },
   value: {
-    ...l,
-    color: g,
+    ...s,
+    color: C,
     width: "100%",
     textAlign: "left",
     flexWrap: "wrap",
     display: "flex",
-    ...c.gap(u),
+    ...d.gap(u),
     position: "relative",
     whiteSpace: "normal",
     marginRight: "1.25rem"
   },
   content: {
-    ...l,
-    ...c.padding(0)
+    ...s,
+    ...d.padding(0)
   },
   command: {
-    ...l,
+    ...s,
     width: "100%",
-    ...c.borderRadius(0)
+    ...d.borderRadius(0)
   },
   input: {
-    ...F,
+    ...R,
     width: "100%"
   },
   list: {
-    ...l,
-    ...c.padding(u)
+    ...s,
+    ...d.padding(u)
   },
   item: {
-    ...l,
-    paddingLeft: f,
+    ...s,
+    paddingLeft: h,
     paddingRight: "2rem",
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    color: g,
+    color: C,
     position: "relative",
     display: "flex",
     width: "100%",
     cursor: "default",
     alignItems: "center",
-    ...c.gap(u),
-    ...c.borderRadius(G),
-    fontSize: w,
-    lineHeight: C,
+    ...d.gap(u),
+    ...d.borderRadius(j),
+    fontSize: F,
+    lineHeight: w,
     outlineStyle: "none",
     userSelect: "none"
   },
   itemCheckIcon: {
-    ...l,
+    ...s,
     position: "absolute",
     right: u,
     display: "flex",
@@ -151,212 +150,247 @@ const Q = (a) => /* @__PURE__ */ r(
     justifyContent: "center"
   },
   checkSvg: {
-    ...l,
+    ...s,
     width: "1rem",
     height: "1rem",
-    color: g
+    color: C
   },
   empty: {
-    ...l,
+    ...s,
     paddingTop: "1.5rem",
     paddingBottom: "1.5rem",
     textAlign: "center",
-    color: g,
-    fontSize: w,
-    lineHeight: C
+    color: C,
+    fontSize: F,
+    lineHeight: w,
+    ":empty": {
+      paddingTop: 0,
+      paddingBottom: 0
+    }
   },
   group: {
-    ...l,
-    ...c.padding(0)
+    ...s,
+    ...d.padding(0)
   },
   groupLabel: {
-    ...l,
-    color: h,
-    fontWeight: B,
+    ...s,
+    color: y,
+    fontWeight: E,
     paddingLeft: u,
     paddingRight: u,
     paddingTop: u,
     paddingBottom: u,
-    fontSize: D,
-    lineHeight: V
+    fontSize: A,
+    lineHeight: k
   },
   separator: {
-    ...l,
-    backgroundColor: P,
+    ...s,
+    backgroundColor: G,
     pointerEvents: "none",
-    marginLeft: `calc(-1 * ${S})`,
-    marginRight: `calc(-1 * ${S})`,
+    marginLeft: `calc(-1 * ${L})`,
+    marginRight: `calc(-1 * ${L})`,
     marginTop: u,
     marginBottom: u,
     height: "1px"
   },
   loading: {
-    ...l,
-    color: h,
-    paddingLeft: f,
-    paddingRight: f,
+    ...s,
+    color: y,
+    paddingLeft: h,
+    paddingRight: h,
     paddingTop: u,
-    paddingBottom: u
+    paddingBottom: u,
+    // A status region stays mounted; it takes room only while it has something to say.
+    ":empty": {
+      paddingTop: 0,
+      paddingBottom: 0
+    }
   },
   clear: {
-    ...l,
+    ...s,
     position: "absolute",
     right: "2.75rem",
     cursor: "pointer",
     minHeight: "auto",
-    ...c.padding("0.125rem"),
+    ...d.padding("0.125rem"),
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...c.borderRadius("9999px"),
+    ...d.borderRadius("9999px"),
     backgroundColor: "transparent",
-    ...c.border("0"),
-    color: T,
+    ...d.border("0"),
+    color: D,
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: v
+      outlineColor: S
     }
   },
   clearSvg: {
-    ...l,
+    ...s,
     width: "1.25rem",
     height: "1.25rem"
   },
   clearValue: {
-    ...l,
+    ...s,
     cursor: "pointer",
     ":hover": {
       opacity: 0.7
     },
     color: "currentColor",
-    ...c.borderRadius("9999px"),
+    ...d.borderRadius("9999px"),
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center"
   },
   clearValueSvg: {
-    ...l,
+    ...s,
     width: "1rem",
     height: "1rem",
     color: "currentColor"
   },
   placeholder: {
-    color: q
+    color: V
   }
-}), mo = s.forwardRef(
+}), go = m.forwardRef(
   function(t, o) {
     return /* @__PURE__ */ r(
-      X,
+      Q,
       {
         "data-slot": "combobox",
-        [d]: "combobox",
+        [c]: "combobox",
         ...t
       }
     );
   }
-), co = s.forwardRef(function({ className: t, children: o, ...n }, e) {
-  const m = p(), i = K(), I = i !== null, y = (i == null ? void 0 : i.inputRef) ?? null;
-  return /* @__PURE__ */ L(
-    J,
+), xo = m.forwardRef(function({ className: t, children: o, ...n }, e) {
+  const l = p(), i = to(), g = i !== null, f = (i == null ? void 0 : i.inputRef) ?? null;
+  return no(n.id), /* @__PURE__ */ P(
+    oo,
     {
       ref: (x) => {
-        y && (y.current = x), typeof e == "function" ? e(x) : e && (e.current = x);
+        f && (f.current = x), typeof e == "function" ? e(x) : e && (e.current = x);
       },
       "data-slot": "select-trigger",
-      [d]: "select-trigger",
+      [c]: "select-trigger",
       className: b(
-        m.trigger,
-        I && m.triggerInField,
+        l.trigger,
+        g && l.triggerInField,
         t
       ),
       ...n,
       children: [
         o,
         /* @__PURE__ */ r(
-          U,
+          ao,
           {
             "data-slot": "combobox-icon",
-            [d]: "combobox-icon",
-            className: m.triggerChevron
+            [c]: "combobox-icon",
+            className: l.triggerChevron
           }
         )
       ]
     }
   );
-}), bo = s.forwardRef(function({ className: t, children: o, container: n, ...e }, m) {
-  const i = p();
-  return /* @__PURE__ */ r($, { container: n, children: /* @__PURE__ */ r(
-    _,
+}), fo = m.forwardRef(function({
+  className: t,
+  children: o,
+  container: n,
+  items: e,
+  filter: l,
+  itemToStringValue: i,
+  limit: g,
+  value: f,
+  defaultValue: v,
+  onValueChange: x,
+  ...q
+}, T) {
+  const I = p();
+  return /* @__PURE__ */ r(U, { container: n, children: /* @__PURE__ */ r(
+    Y,
     {
-      ref: m,
+      ref: T,
       "data-slot": "combobox-content",
-      [d]: "combobox-content",
-      className: b(i.content, t),
-      ...e,
+      [c]: "combobox-content",
+      className: b(I.content, t),
+      ...q,
       children: /* @__PURE__ */ r(
-        A,
+        W,
         {
           "data-slot": "combobox-command",
-          [d]: "combobox-command",
-          className: i.command,
+          [c]: "combobox-command",
+          className: I.command,
+          items: e,
+          filter: l,
+          itemToStringValue: i,
+          limit: g,
+          value: f,
+          defaultValue: v,
+          onValueChange: x,
           children: o
         }
       )
     }
   ) });
-}), po = s.forwardRef(function({ className: t, children: o, ...n }, e) {
-  const m = p();
+}), Co = m.forwardRef(function({ className: t, children: o, ...n }, e) {
+  const l = p();
   return /* @__PURE__ */ r(
     "div",
     {
       ref: e,
       "data-slot": "combobox-value",
-      [d]: "combobox-value",
-      className: b(m.value, t),
+      [c]: "combobox-value",
+      className: b(l.value, t),
       ...n,
       children: o
     }
   );
-}), uo = s.forwardRef(function({ className: t, ...o }, n) {
+}), ho = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
-    z,
+    X,
     {
       ref: n,
       "data-slot": "combobox-command-input",
-      [d]: "combobox-command-input",
+      [c]: "combobox-command-input",
       className: b(e.input, t),
       ...o
     }
   );
-}), go = s.forwardRef(function({ className: t, ...o }, n) {
-  const e = p();
+}), yo = m.forwardRef(function({
+  className: t,
+  "aria-label": o,
+  "aria-labelledby": n,
+  ...e
+}, l) {
+  const i = p(), g = eo();
   return /* @__PURE__ */ r(
-    W,
+    _,
     {
-      ref: n,
+      ref: l,
       "data-slot": "combobox-command-list",
-      [d]: "combobox-command-list",
-      className: b(e.list, t),
-      ...o
+      [c]: "combobox-command-list",
+      className: b(i.list, t),
+      "aria-label": o,
+      "aria-labelledby": n ?? (o ? void 0 : g),
+      ...e
     }
   );
-}), xo = s.forwardRef(function({ className: t, children: o, ...n }, e) {
-  const m = p();
+}), wo = m.forwardRef(function({ className: t, children: o, ...n }, e) {
+  const l = p();
   return /* @__PURE__ */ r(
-    H,
+    $,
     {
       ref: e,
       "data-slot": "combobox-item",
-      [d]: "combobox-item",
-      className: b(m.item, t),
+      [c]: "combobox-item",
+      className: b(l.item, t),
       ...n,
       children: o
     }
   );
-}), fo = s.forwardRef(function({ className: t, ...o }, n) {
+}), Fo = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
     "span",
@@ -364,78 +398,78 @@ const Q = (a) => /* @__PURE__ */ r(
       ref: n,
       className: b(e.itemCheckIcon, t),
       ...o,
-      children: /* @__PURE__ */ r(Q, { className: e.checkSvg })
+      children: /* @__PURE__ */ r(ro, { className: e.checkSvg })
     }
   );
-}), ho = s.forwardRef(function({ className: t, ...o }, n) {
+}), vo = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
-    E,
+    M,
     {
       ref: n,
       "data-slot": "combobox-empty",
-      [d]: "combobox-empty",
+      [c]: "combobox-empty",
       className: b(e.empty, t),
       ...o
     }
   );
-}), Co = s.forwardRef(function({ className: t, ...o }, n) {
+}), Io = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
-    j,
+    O,
     {
       ref: n,
       "data-slot": "combobox-group",
-      [d]: "combobox-group",
+      [c]: "combobox-group",
       className: b(e.group, t),
       ...o
     }
   );
-}), wo = s.forwardRef(function({ className: t, ...o }, n) {
+}), Ro = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
     Z,
     {
       ref: n,
       "data-slot": "combobox-group-label",
-      [d]: "combobox-group-label",
+      [c]: "combobox-group-label",
       className: b(e.groupLabel, t),
       ...o
     }
   );
-}), yo = s.forwardRef(function({ className: t, ...o }, n) {
+}), So = (a) => /* @__PURE__ */ r(H, { ...a }), Lo = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
-    O,
+    K,
     {
       ref: n,
       "data-slot": "select-separator",
-      [d]: "select-separator",
+      [c]: "select-separator",
       className: b(e.separator, t),
       ...o
     }
   );
-}), Fo = s.forwardRef(function({ className: t, ...o }, n) {
+}), No = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
-    M,
+    J,
     {
       ref: n,
       "data-slot": "combobox-command-loading",
-      [d]: "combobox-command-loading",
+      [c]: "combobox-command-loading",
       className: b(e.loading, t),
       ...o
     }
   );
-}), vo = s.forwardRef(function({ className: t, onClick: o, ...n }, e) {
-  const m = p();
+}), qo = m.forwardRef(function({ className: t, onClick: o, ...n }, e) {
+  const l = p();
   return /* @__PURE__ */ r(
     "span",
     {
       ref: e,
       role: "button",
       tabIndex: 0,
-      className: b(m.clear, t),
+      className: b(l.clear, t),
       onPointerDown: (i) => {
         i.preventDefault(), i.stopPropagation();
       },
@@ -443,10 +477,10 @@ const Q = (a) => /* @__PURE__ */ r(
         i.preventDefault(), i.stopPropagation(), o == null || o(i);
       },
       ...n,
-      children: /* @__PURE__ */ r(R, { className: m.clearSvg })
+      children: /* @__PURE__ */ r(N, { className: l.clearSvg })
     }
   );
-}), So = s.forwardRef(function({ className: t, ...o }, n) {
+}), To = m.forwardRef(function({ className: t, ...o }, n) {
   const e = p();
   return /* @__PURE__ */ r(
     "span",
@@ -456,15 +490,15 @@ const Q = (a) => /* @__PURE__ */ r(
       ...o
     }
   );
-}), Ro = s.forwardRef(function({ className: t, onClick: o, ...n }, e) {
-  const m = p();
+}), Po = m.forwardRef(function({ className: t, onClick: o, ...n }, e) {
+  const l = p();
   return /* @__PURE__ */ r(
     "span",
     {
       ref: e,
       role: "button",
       tabIndex: 0,
-      className: b(m.clearValue, t),
+      className: b(l.clearValue, t),
       onPointerDown: (i) => {
         i.preventDefault(), i.stopPropagation();
       },
@@ -472,42 +506,44 @@ const Q = (a) => /* @__PURE__ */ r(
         i.preventDefault(), i.stopPropagation(), o == null || o(i);
       },
       ...n,
-      children: /* @__PURE__ */ r(R, { className: m.clearValueSvg })
+      children: /* @__PURE__ */ r(N, { className: l.clearValueSvg })
     }
   );
 });
 export {
-  mo as Combobox,
-  vo as ComboboxClear,
-  Ro as ComboboxClearValue,
-  bo as ComboboxContent,
-  ho as ComboboxEmpty,
-  Co as ComboboxGroup,
-  wo as ComboboxGroupLabel,
-  uo as ComboboxInput,
-  xo as ComboboxItem,
-  fo as ComboboxItemCheckIcon,
-  go as ComboboxList,
-  Fo as ComboboxLoading,
-  So as ComboboxPlaceholder,
-  yo as ComboboxSeparator,
-  co as ComboboxTrigger,
-  po as ComboboxValue,
-  mo as FieldCombobox,
-  vo as FieldComboboxClear,
-  Ro as FieldComboboxClearValue,
-  bo as FieldComboboxContent,
-  ho as FieldComboboxEmpty,
-  Co as FieldComboboxGroup,
-  wo as FieldComboboxGroupLabel,
-  uo as FieldComboboxInput,
-  xo as FieldComboboxItem,
-  fo as FieldComboboxItemCheckIcon,
-  go as FieldComboboxList,
-  Fo as FieldComboboxLoading,
-  So as FieldComboboxPlaceholder,
-  yo as FieldComboboxSeparator,
-  co as FieldComboboxTrigger,
-  po as FieldComboboxValue
+  go as Combobox,
+  qo as ComboboxClear,
+  Po as ComboboxClearValue,
+  So as ComboboxCollection,
+  fo as ComboboxContent,
+  vo as ComboboxEmpty,
+  Io as ComboboxGroup,
+  Ro as ComboboxGroupLabel,
+  ho as ComboboxInput,
+  wo as ComboboxItem,
+  Fo as ComboboxItemCheckIcon,
+  yo as ComboboxList,
+  No as ComboboxLoading,
+  To as ComboboxPlaceholder,
+  Lo as ComboboxSeparator,
+  xo as ComboboxTrigger,
+  Co as ComboboxValue,
+  go as FieldCombobox,
+  qo as FieldComboboxClear,
+  Po as FieldComboboxClearValue,
+  So as FieldComboboxCollection,
+  fo as FieldComboboxContent,
+  vo as FieldComboboxEmpty,
+  Io as FieldComboboxGroup,
+  Ro as FieldComboboxGroupLabel,
+  ho as FieldComboboxInput,
+  wo as FieldComboboxItem,
+  Fo as FieldComboboxItemCheckIcon,
+  yo as FieldComboboxList,
+  No as FieldComboboxLoading,
+  To as FieldComboboxPlaceholder,
+  Lo as FieldComboboxSeparator,
+  xo as FieldComboboxTrigger,
+  Co as FieldComboboxValue
 };
 //# sourceMappingURL=field-combobox.js.map