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

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

@@ -1,13 +1,14 @@
-import { jsx as n, jsxs as R } from "react/jsx-runtime";
-import * as l from "react";
-import { SLOT_ATTR as p, mergeClasses as m, shorthands as s } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as S } from "../../styles/make-styles.js";
-import { grayA8 as I, focusRing as y, accentA11 as L, spacingElement2 as b, spacingGroup1 as x, grayA11 as f, spacingElement1 as F, graySoft as N, leadingXs as q, textXs as P, fontWeightSemibold as T, leadingSm as h, textSm as C, grayA12 as u, radiusMd as V, radiusLg as D } from "../../tokens/index.js";
-import { Command as B, CommandEmpty as G, CommandGroup as k, CommandInput as A, CommandItem as E, CommandList as j, CommandLoading as H, CommandSeparator as W } from "../command/command.js";
-import { Label as z } from "../label/label.js";
-import { Popover as O, PopoverPortal as Z, PopoverContent as M, PopoverTrigger as X } from "../popover/popover.js";
-import { useOptionalFieldContext as _ } from "./field.js";
-const $ = (a) => /* @__PURE__ */ n(
+import { jsx as n, jsxs as I } from "react/jsx-runtime";
+import * as s from "react";
+import { SLOT_ATTR as u, mergeClasses as c, shorthands as m } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as L } from "../../styles/make-styles.js";
+import { boxModel as l, nativeControl as F } from "../../styles/host-reset.js";
+import { grayA8 as N, focusRing as v, accentA11 as q, spacingElement2 as p, spacingGroup1 as f, grayA11 as h, spacingElement1 as R, graySoft as P, leadingXs as T, textXs as V, fontWeightSemibold as D, leadingSm as C, textSm as w, grayA12 as g, radiusMd as B, radiusLg as G } from "../../tokens/index.js";
+import { Command as k, CommandEmpty as A, CommandGroup as E, CommandInput as j, CommandItem as H, CommandList as W, CommandLoading as z, CommandSeparator as M } from "../command/command.js";
+import { Label as O } from "../label/label.js";
+import { Popover as Z, PopoverPortal as X, PopoverContent as _, PopoverTrigger as $ } from "../popover/popover.js";
+import { useOptionalFieldContext as J } from "./field.js";
+const K = (a) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -18,7 +19,7 @@ const $ = (a) => /* @__PURE__ */ n(
     ...a,
     children: /* @__PURE__ */ n("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" })
   }
-), J = (a) => /* @__PURE__ */ n(
+), Q = (a) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -29,7 +30,7 @@ const $ = (a) => /* @__PURE__ */ n(
     ...a,
     children: /* @__PURE__ */ n("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" })
   }
-), v = (a) => /* @__PURE__ */ n(
+), S = (a) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40,26 +41,27 @@ const $ = (a) => /* @__PURE__ */ n(
     ...a,
     children: /* @__PURE__ */ n("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" })
   }
-), c = S({
+), d = L({
   trigger: {
+    ...F,
     width: "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    ...s.gap(b),
-    ...s.borderRadius(D),
+    ...m.gap(p),
+    ...m.borderRadius(G),
     backgroundColor: "transparent",
-    fontSize: C,
-    lineHeight: h,
+    fontSize: w,
+    lineHeight: C,
     whiteSpace: "nowrap",
     outlineStyle: "none",
-    ...s.border("0"),
-    ...s.padding(0),
+    ...m.border("0"),
+    ...m.padding(0),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: y
+      outlineColor: v
     },
     ":disabled": {
       cursor: "not-allowed",
@@ -67,6 +69,7 @@ const $ = (a) => /* @__PURE__ */ n(
     }
   },
   triggerChevron: {
+    ...l,
     width: "1.5rem",
     height: "1.5rem",
     flexShrink: 0,
@@ -75,56 +78,63 @@ const $ = (a) => /* @__PURE__ */ n(
     "@media (prefers-reduced-motion: reduce)": {
       transitionDuration: "0.01ms"
     },
-    color: f,
+    color: h,
     "&[data-popup-open], &[data-open]": {
       transform: "rotate(180deg)"
     }
   },
   value: {
-    color: u,
+    ...l,
+    color: g,
     width: "100%",
     textAlign: "left",
     flexWrap: "wrap",
     display: "flex",
-    ...s.gap(b),
+    ...m.gap(p),
     position: "relative",
     whiteSpace: "normal",
     marginRight: "1.25rem"
   },
   content: {
-    ...s.padding(0)
+    ...l,
+    ...m.padding(0)
   },
   command: {
+    ...l,
     width: "100%",
-    ...s.borderRadius(0)
+    ...m.borderRadius(0)
   },
   input: {
+    ...F,
     width: "100%"
   },
   list: {
-    ...s.padding(b)
+    ...l,
+    ...m.padding(p)
   },
   item: {
-    paddingLeft: x,
+    ...l,
+    paddingLeft: f,
     paddingRight: "2rem",
     paddingTop: "0.375rem",
     paddingBottom: "0.375rem",
-    color: u,
+    color: g,
     position: "relative",
     display: "flex",
     width: "100%",
     cursor: "default",
     alignItems: "center",
-    ...s.gap(b),
-    ...s.borderRadius(V),
-    fontSize: C,
-    lineHeight: h,
+    ...m.gap(p),
+    ...m.borderRadius(B),
+    fontSize: w,
+    lineHeight: C,
     outlineStyle: "none",
     userSelect: "none"
   },
   itemCheckIcon: {
+    ...l,
     position: "absolute",
-    right: b,
+    right: p,
     display: "flex",
     width: "1rem",
     height: "1rem",
@@ -132,271 +142,281 @@ const $ = (a) => /* @__PURE__ */ n(
     justifyContent: "center"
   },
   checkSvg: {
+    ...l,
     width: "1rem",
     height: "1rem",
-    color: u
+    color: g
   },
   empty: {
+    ...l,
     paddingTop: "1.5rem",
     paddingBottom: "1.5rem",
     textAlign: "center",
-    color: u,
-    fontSize: C,
-    lineHeight: h
+    color: g,
+    fontSize: w,
+    lineHeight: C
   },
   group: {
-    ...s.padding(0)
+    ...l,
+    ...m.padding(0)
   },
   groupLabel: {
-    color: f,
-    fontWeight: T,
-    paddingLeft: b,
-    paddingRight: b,
-    paddingTop: b,
-    paddingBottom: b,
-    fontSize: P,
-    lineHeight: q
+    ...l,
+    color: h,
+    fontWeight: D,
+    paddingLeft: p,
+    paddingRight: p,
+    paddingTop: p,
+    paddingBottom: p,
+    fontSize: V,
+    lineHeight: T
   },
   separator: {
-    backgroundColor: N,
+    ...l,
+    backgroundColor: P,
     pointerEvents: "none",
-    marginLeft: `calc(-1 * ${F})`,
-    marginRight: `calc(-1 * ${F})`,
-    marginTop: b,
-    marginBottom: b,
+    marginLeft: `calc(-1 * ${R})`,
+    marginRight: `calc(-1 * ${R})`,
+    marginTop: p,
+    marginBottom: p,
     height: "1px"
   },
   loading: {
-    color: f,
-    paddingLeft: x,
-    paddingRight: x,
-    paddingTop: b,
-    paddingBottom: b
+    ...l,
+    color: h,
+    paddingLeft: f,
+    paddingRight: f,
+    paddingTop: p,
+    paddingBottom: p
   },
   clear: {
+    ...l,
     position: "absolute",
     right: "2.75rem",
     cursor: "pointer",
     minHeight: "auto",
-    ...s.padding("0.125rem"),
+    ...m.padding("0.125rem"),
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...s.borderRadius("9999px"),
+    ...m.borderRadius("9999px"),
     backgroundColor: "transparent",
-    ...s.border("0"),
-    color: L,
+    ...m.border("0"),
+    color: q,
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: y
+      outlineColor: v
     }
   },
   clearSvg: {
+    ...l,
     width: "1.25rem",
     height: "1.25rem"
   },
   clearValue: {
+    ...l,
     cursor: "pointer",
     ":hover": {
       opacity: 0.7
     },
     color: "currentColor",
-    ...s.borderRadius("9999px"),
+    ...m.borderRadius("9999px"),
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center"
   },
   clearValueSvg: {
+    ...l,
     width: "1rem",
     height: "1rem",
     color: "currentColor"
   },
   placeholder: {
-    color: I
+    color: N
   }
-}), ao = l.forwardRef(
+}), so = s.forwardRef(
   function(t, o) {
     return /* @__PURE__ */ n(
-      O,
+      Z,
       {
         "data-slot": "combobox",
-        [p]: "combobox",
+        [u]: "combobox",
         ...t
       }
     );
   }
-), io = l.forwardRef(function({ className: t, children: o, ...r }, e) {
-  var w;
-  const d = c(), i = ((w = _()) == null ? void 0 : w.inputRef) ?? null;
-  return /* @__PURE__ */ R(
-    X,
+), mo = s.forwardRef(function({ className: t, children: o, ...r }, e) {
+  var y;
+  const b = d(), i = ((y = J()) == null ? void 0 : y.inputRef) ?? null;
+  return /* @__PURE__ */ I(
+    $,
     {
-      ref: (g) => {
-        i && (i.current = g), typeof e == "function" ? e(g) : e && (e.current = g);
+      ref: (x) => {
+        i && (i.current = x), typeof e == "function" ? e(x) : e && (e.current = x);
       },
       "data-slot": "select-trigger",
-      [p]: "select-trigger",
-      className: m(d.trigger, t),
+      [u]: "select-trigger",
+      className: c(b.trigger, t),
       ...r,
       children: [
         o,
-        /* @__PURE__ */ n(J, { className: d.triggerChevron })
+        /* @__PURE__ */ n(Q, { className: b.triggerChevron })
       ]
     }
   );
-}), lo = l.forwardRef(function({ className: t, children: o, container: r, ...e }, d) {
-  const i = c();
-  return /* @__PURE__ */ n(Z, { container: r, children: /* @__PURE__ */ n(
-    M,
+}), co = s.forwardRef(function({ className: t, children: o, container: r, ...e }, b) {
+  const i = d();
+  return /* @__PURE__ */ n(X, { container: r, children: /* @__PURE__ */ n(
+    _,
     {
-      ref: d,
+      ref: b,
       "data-slot": "combobox-content",
-      [p]: "combobox-content",
-      className: m(i.content, t),
+      [u]: "combobox-content",
+      className: c(i.content, t),
       ...e,
       children: /* @__PURE__ */ n(
-        B,
+        k,
         {
           "data-slot": "combobox-command",
-          [p]: "combobox-command",
+          [u]: "combobox-command",
           className: i.command,
           children: o
         }
       )
     }
   ) });
-}), so = l.forwardRef(function({ className: t, children: o, ...r }, e) {
-  const d = c();
+}), bo = s.forwardRef(function({ className: t, children: o, ...r }, e) {
+  const b = d();
   return /* @__PURE__ */ n(
     "div",
     {
       ref: e,
       "data-slot": "combobox-value",
-      [p]: "combobox-value",
-      className: m(d.value, t),
+      [u]: "combobox-value",
+      className: c(b.value, t),
       ...r,
       children: o
     }
   );
-}), mo = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), po = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
-    A,
+    j,
     {
       ref: r,
       "data-slot": "combobox-command-input",
-      [p]: "combobox-command-input",
-      className: m(e.input, t),
+      [u]: "combobox-command-input",
+      className: c(e.input, t),
       ...o
     }
   );
-}), co = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), uo = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
-    j,
+    W,
     {
       ref: r,
       "data-slot": "combobox-command-list",
-      [p]: "combobox-command-list",
-      className: m(e.list, t),
+      [u]: "combobox-command-list",
+      className: c(e.list, t),
       ...o
     }
   );
-}), bo = l.forwardRef(function({ className: t, children: o, ...r }, e) {
-  const d = c();
+}), go = s.forwardRef(function({ className: t, children: o, ...r }, e) {
+  const b = d();
   return /* @__PURE__ */ n(
-    E,
+    H,
     {
       ref: e,
       "data-slot": "combobox-item",
-      [p]: "combobox-item",
-      className: m(d.item, t),
+      [u]: "combobox-item",
+      className: c(b.item, t),
       ...r,
       children: o
     }
   );
-}), po = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), xo = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
     "span",
     {
       ref: r,
-      className: m(e.itemCheckIcon, t),
+      className: c(e.itemCheckIcon, t),
       ...o,
-      children: /* @__PURE__ */ n($, { className: e.checkSvg })
+      children: /* @__PURE__ */ n(K, { className: e.checkSvg })
     }
   );
-}), uo = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), fo = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
-    G,
+    A,
     {
       ref: r,
       "data-slot": "combobox-empty",
-      [p]: "combobox-empty",
-      className: m(e.empty, t),
+      [u]: "combobox-empty",
+      className: c(e.empty, t),
       ...o
     }
   );
-}), go = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), ho = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
-    k,
+    E,
     {
       ref: r,
       "data-slot": "combobox-group",
-      [p]: "combobox-group",
-      className: m(e.group, t),
+      [u]: "combobox-group",
+      className: c(e.group, t),
       ...o
     }
   );
-}), xo = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), Co = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
-    z,
+    O,
     {
       ref: r,
       "data-slot": "combobox-group-label",
-      [p]: "combobox-group-label",
-      className: m(e.groupLabel, t),
+      [u]: "combobox-group-label",
+      className: c(e.groupLabel, t),
       ...o
     }
   );
-}), fo = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), wo = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
-    W,
+    M,
     {
       ref: r,
       "data-slot": "select-separator",
-      [p]: "select-separator",
-      className: m(e.separator, t),
+      [u]: "select-separator",
+      className: c(e.separator, t),
       ...o
     }
   );
-}), ho = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), yo = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
-    H,
+    z,
     {
       ref: r,
       "data-slot": "combobox-command-loading",
-      [p]: "combobox-command-loading",
-      className: m(e.loading, t),
+      [u]: "combobox-command-loading",
+      className: c(e.loading, t),
       ...o
     }
   );
-}), Co = l.forwardRef(function({ className: t, onClick: o, ...r }, e) {
-  const d = c();
+}), Fo = s.forwardRef(function({ className: t, onClick: o, ...r }, e) {
+  const b = d();
   return /* @__PURE__ */ n(
     "span",
     {
       ref: e,
       role: "button",
       tabIndex: 0,
-      className: m(d.clear, t),
+      className: c(b.clear, t),
       onPointerDown: (i) => {
         i.preventDefault(), i.stopPropagation();
       },
@@ -404,28 +424,28 @@ const $ = (a) => /* @__PURE__ */ n(
         i.preventDefault(), i.stopPropagation(), o == null || o(i);
       },
       ...r,
-      children: /* @__PURE__ */ n(v, { className: d.clearSvg })
+      children: /* @__PURE__ */ n(S, { className: b.clearSvg })
     }
   );
-}), wo = l.forwardRef(function({ className: t, ...o }, r) {
-  const e = c();
+}), vo = s.forwardRef(function({ className: t, ...o }, r) {
+  const e = d();
   return /* @__PURE__ */ n(
     "span",
     {
       ref: r,
-      className: m(e.placeholder, t),
+      className: c(e.placeholder, t),
       ...o
     }
   );
-}), yo = l.forwardRef(function({ className: t, onClick: o, ...r }, e) {
-  const d = c();
+}), Ro = s.forwardRef(function({ className: t, onClick: o, ...r }, e) {
+  const b = d();
   return /* @__PURE__ */ n(
     "span",
     {
       ref: e,
       role: "button",
       tabIndex: 0,
-      className: m(d.clearValue, t),
+      className: c(b.clearValue, t),
       onPointerDown: (i) => {
         i.preventDefault(), i.stopPropagation();
       },
@@ -433,42 +453,42 @@ const $ = (a) => /* @__PURE__ */ n(
         i.preventDefault(), i.stopPropagation(), o == null || o(i);
       },
       ...r,
-      children: /* @__PURE__ */ n(v, { className: d.clearValueSvg })
+      children: /* @__PURE__ */ n(S, { className: b.clearValueSvg })
     }
   );
 });
 export {
-  ao as Combobox,
-  Co as ComboboxClear,
-  yo as ComboboxClearValue,
-  lo as ComboboxContent,
-  uo as ComboboxEmpty,
-  go as ComboboxGroup,
-  xo as ComboboxGroupLabel,
-  mo as ComboboxInput,
-  bo as ComboboxItem,
-  po as ComboboxItemCheckIcon,
-  co as ComboboxList,
-  ho as ComboboxLoading,
-  wo as ComboboxPlaceholder,
-  fo as ComboboxSeparator,
-  io as ComboboxTrigger,
-  so as ComboboxValue,
-  ao as FieldCombobox,
-  Co as FieldComboboxClear,
-  yo as FieldComboboxClearValue,
-  lo as FieldComboboxContent,
-  uo as FieldComboboxEmpty,
-  go as FieldComboboxGroup,
-  xo as FieldComboboxGroupLabel,
-  mo as FieldComboboxInput,
-  bo as FieldComboboxItem,
-  po as FieldComboboxItemCheckIcon,
-  co as FieldComboboxList,
-  ho as FieldComboboxLoading,
-  wo as FieldComboboxPlaceholder,
-  fo as FieldComboboxSeparator,
-  io as FieldComboboxTrigger,
-  so as FieldComboboxValue
+  so as Combobox,
+  Fo as ComboboxClear,
+  Ro as ComboboxClearValue,
+  co as ComboboxContent,
+  fo as ComboboxEmpty,
+  ho as ComboboxGroup,
+  Co as ComboboxGroupLabel,
+  po as ComboboxInput,
+  go as ComboboxItem,
+  xo as ComboboxItemCheckIcon,
+  uo as ComboboxList,
+  yo as ComboboxLoading,
+  vo as ComboboxPlaceholder,
+  wo as ComboboxSeparator,
+  mo as ComboboxTrigger,
+  bo as ComboboxValue,
+  so as FieldCombobox,
+  Fo as FieldComboboxClear,
+  Ro as FieldComboboxClearValue,
+  co as FieldComboboxContent,
+  fo as FieldComboboxEmpty,
+  ho as FieldComboboxGroup,
+  Co as FieldComboboxGroupLabel,
+  po as FieldComboboxInput,
+  go as FieldComboboxItem,
+  xo as FieldComboboxItemCheckIcon,
+  uo as FieldComboboxList,
+  yo as FieldComboboxLoading,
+  vo as FieldComboboxPlaceholder,
+  wo as FieldComboboxSeparator,
+  mo as FieldComboboxTrigger,
+  bo as FieldComboboxValue
 };
 //# sourceMappingURL=field-combobox.js.map