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

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

@@ -1,14 +1,14 @@
-import { jsx as n, jsxs as I } from "react/jsx-runtime";
+import { jsx as r, jsxs as L } 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 { 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 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(
+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(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -17,9 +17,9 @@ const K = (a) => /* @__PURE__ */ n(
     width: "24px",
     fill: "currentColor",
     ...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" })
+    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" })
   }
-), Q = (a) => /* @__PURE__ */ n(
+), U = (a) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -28,9 +28,9 @@ const K = (a) => /* @__PURE__ */ n(
     width: "24px",
     fill: "currentColor",
     ...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" })
+    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" })
   }
-), S = (a) => /* @__PURE__ */ n(
+), R = (a) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -39,24 +39,24 @@ const K = (a) => /* @__PURE__ */ n(
     width: "24px",
     fill: "currentColor",
     ...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" })
+    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" })
   }
-), d = L({
+), p = N({
   trigger: {
     ...F,
     width: "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    ...m.gap(p),
-    ...m.borderRadius(G),
+    ...c.gap(u),
+    ...c.borderRadius(k),
     backgroundColor: "transparent",
     fontSize: w,
     lineHeight: C,
     whiteSpace: "nowrap",
     outlineStyle: "none",
-    ...m.border("0"),
-    ...m.padding(0),
+    ...c.border("0"),
+    ...c.padding(0),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
@@ -66,6 +66,17 @@ const K = (a) => /* @__PURE__ */ n(
     ":disabled": {
       cursor: "not-allowed",
       opacity: 0.5
+    },
+    // 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"]`]: {
+      transform: "rotate(180deg)"
+    }
+  },
+  triggerInField: {
+    outlineStyle: "none",
+    ":focus-visible": {
+      outlineStyle: "none"
     }
   },
   triggerChevron: {
@@ -75,13 +86,11 @@ const K = (a) => /* @__PURE__ */ n(
     flexShrink: 0,
     transitionProperty: "transform",
     transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     "@media (prefers-reduced-motion: reduce)": {
       transitionDuration: "0.01ms"
     },
-    color: h,
-    "&[data-popup-open], &[data-open]": {
-      transform: "rotate(180deg)"
-    }
+    color: h
   },
   value: {
     ...l,
@@ -90,19 +99,19 @@ const K = (a) => /* @__PURE__ */ n(
     textAlign: "left",
     flexWrap: "wrap",
     display: "flex",
-    ...m.gap(p),
+    ...c.gap(u),
     position: "relative",
     whiteSpace: "normal",
     marginRight: "1.25rem"
   },
   content: {
     ...l,
-    ...m.padding(0)
+    ...c.padding(0)
   },
   command: {
     ...l,
     width: "100%",
-    ...m.borderRadius(0)
+    ...c.borderRadius(0)
   },
   input: {
     ...F,
@@ -110,7 +119,7 @@ const K = (a) => /* @__PURE__ */ n(
   },
   list: {
     ...l,
-    ...m.padding(p)
+    ...c.padding(u)
   },
   item: {
     ...l,
@@ -124,8 +133,8 @@ const K = (a) => /* @__PURE__ */ n(
     width: "100%",
     cursor: "default",
     alignItems: "center",
-    ...m.gap(p),
-    ...m.borderRadius(B),
+    ...c.gap(u),
+    ...c.borderRadius(G),
     fontSize: w,
     lineHeight: C,
     outlineStyle: "none",
@@ -134,7 +143,7 @@ const K = (a) => /* @__PURE__ */ n(
   itemCheckIcon: {
     ...l,
     position: "absolute",
-    right: p,
+    right: u,
     display: "flex",
     width: "1rem",
     height: "1rem",
@@ -158,27 +167,27 @@ const K = (a) => /* @__PURE__ */ n(
   },
   group: {
     ...l,
-    ...m.padding(0)
+    ...c.padding(0)
   },
   groupLabel: {
     ...l,
     color: h,
-    fontWeight: D,
-    paddingLeft: p,
-    paddingRight: p,
-    paddingTop: p,
-    paddingBottom: p,
-    fontSize: V,
-    lineHeight: T
+    fontWeight: B,
+    paddingLeft: u,
+    paddingRight: u,
+    paddingTop: u,
+    paddingBottom: u,
+    fontSize: D,
+    lineHeight: V
   },
   separator: {
     ...l,
     backgroundColor: P,
     pointerEvents: "none",
-    marginLeft: `calc(-1 * ${R})`,
-    marginRight: `calc(-1 * ${R})`,
-    marginTop: p,
-    marginBottom: p,
+    marginLeft: `calc(-1 * ${S})`,
+    marginRight: `calc(-1 * ${S})`,
+    marginTop: u,
+    marginBottom: u,
     height: "1px"
   },
   loading: {
@@ -186,8 +195,8 @@ const K = (a) => /* @__PURE__ */ n(
     color: h,
     paddingLeft: f,
     paddingRight: f,
-    paddingTop: p,
-    paddingBottom: p
+    paddingTop: u,
+    paddingBottom: u
   },
   clear: {
     ...l,
@@ -195,14 +204,14 @@ const K = (a) => /* @__PURE__ */ n(
     right: "2.75rem",
     cursor: "pointer",
     minHeight: "auto",
-    ...m.padding("0.125rem"),
+    ...c.padding("0.125rem"),
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...m.borderRadius("9999px"),
+    ...c.borderRadius("9999px"),
     backgroundColor: "transparent",
-    ...m.border("0"),
-    color: q,
+    ...c.border("0"),
+    color: T,
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
@@ -222,7 +231,7 @@ const K = (a) => /* @__PURE__ */ n(
       opacity: 0.7
     },
     color: "currentColor",
-    ...m.borderRadius("9999px"),
+    ...c.borderRadius("9999px"),
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center"
@@ -234,261 +243,271 @@ const K = (a) => /* @__PURE__ */ n(
     color: "currentColor"
   },
   placeholder: {
-    color: N
+    color: q
   }
-}), so = s.forwardRef(
+}), mo = s.forwardRef(
   function(t, o) {
-    return /* @__PURE__ */ n(
-      Z,
+    return /* @__PURE__ */ r(
+      X,
       {
         "data-slot": "combobox",
-        [u]: "combobox",
+        [d]: "combobox",
         ...t
       }
     );
   }
-), 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(
-    $,
+), 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,
     {
       ref: (x) => {
-        i && (i.current = x), typeof e == "function" ? e(x) : e && (e.current = x);
+        y && (y.current = x), typeof e == "function" ? e(x) : e && (e.current = x);
       },
       "data-slot": "select-trigger",
-      [u]: "select-trigger",
-      className: c(b.trigger, t),
-      ...r,
+      [d]: "select-trigger",
+      className: b(
+        m.trigger,
+        I && m.triggerInField,
+        t
+      ),
+      ...n,
       children: [
         o,
-        /* @__PURE__ */ n(Q, { className: b.triggerChevron })
+        /* @__PURE__ */ r(
+          U,
+          {
+            "data-slot": "combobox-icon",
+            [d]: "combobox-icon",
+            className: m.triggerChevron
+          }
+        )
       ]
     }
   );
-}), co = s.forwardRef(function({ className: t, children: o, container: r, ...e }, b) {
-  const i = d();
-  return /* @__PURE__ */ n(X, { container: r, children: /* @__PURE__ */ n(
+}), bo = s.forwardRef(function({ className: t, children: o, container: n, ...e }, m) {
+  const i = p();
+  return /* @__PURE__ */ r($, { container: n, children: /* @__PURE__ */ r(
     _,
     {
-      ref: b,
+      ref: m,
       "data-slot": "combobox-content",
-      [u]: "combobox-content",
-      className: c(i.content, t),
+      [d]: "combobox-content",
+      className: b(i.content, t),
       ...e,
-      children: /* @__PURE__ */ n(
-        k,
+      children: /* @__PURE__ */ r(
+        A,
         {
           "data-slot": "combobox-command",
-          [u]: "combobox-command",
+          [d]: "combobox-command",
           className: i.command,
           children: o
         }
       )
     }
   ) });
-}), bo = s.forwardRef(function({ className: t, children: o, ...r }, e) {
-  const b = d();
-  return /* @__PURE__ */ n(
+}), po = s.forwardRef(function({ className: t, children: o, ...n }, e) {
+  const m = p();
+  return /* @__PURE__ */ r(
     "div",
     {
       ref: e,
       "data-slot": "combobox-value",
-      [u]: "combobox-value",
-      className: c(b.value, t),
-      ...r,
+      [d]: "combobox-value",
+      className: b(m.value, t),
+      ...n,
       children: o
     }
   );
-}), po = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
-    j,
+}), uo = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
+    z,
     {
-      ref: r,
+      ref: n,
       "data-slot": "combobox-command-input",
-      [u]: "combobox-command-input",
-      className: c(e.input, t),
+      [d]: "combobox-command-input",
+      className: b(e.input, t),
       ...o
     }
   );
-}), uo = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
+}), go = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
     W,
     {
-      ref: r,
+      ref: n,
       "data-slot": "combobox-command-list",
-      [u]: "combobox-command-list",
-      className: c(e.list, t),
+      [d]: "combobox-command-list",
+      className: b(e.list, t),
       ...o
     }
   );
-}), go = s.forwardRef(function({ className: t, children: o, ...r }, e) {
-  const b = d();
-  return /* @__PURE__ */ n(
+}), xo = s.forwardRef(function({ className: t, children: o, ...n }, e) {
+  const m = p();
+  return /* @__PURE__ */ r(
     H,
     {
       ref: e,
       "data-slot": "combobox-item",
-      [u]: "combobox-item",
-      className: c(b.item, t),
-      ...r,
+      [d]: "combobox-item",
+      className: b(m.item, t),
+      ...n,
       children: o
     }
   );
-}), xo = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
+}), fo = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
     "span",
     {
-      ref: r,
-      className: c(e.itemCheckIcon, t),
+      ref: n,
+      className: b(e.itemCheckIcon, t),
       ...o,
-      children: /* @__PURE__ */ n(K, { className: e.checkSvg })
+      children: /* @__PURE__ */ r(Q, { className: e.checkSvg })
     }
   );
-}), fo = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
-    A,
+}), ho = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
+    E,
     {
-      ref: r,
+      ref: n,
       "data-slot": "combobox-empty",
-      [u]: "combobox-empty",
-      className: c(e.empty, t),
+      [d]: "combobox-empty",
+      className: b(e.empty, t),
       ...o
     }
   );
-}), ho = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
-    E,
+}), Co = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
+    j,
     {
-      ref: r,
+      ref: n,
       "data-slot": "combobox-group",
-      [u]: "combobox-group",
-      className: c(e.group, t),
+      [d]: "combobox-group",
+      className: b(e.group, t),
       ...o
     }
   );
-}), Co = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
-    O,
+}), wo = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
+    Z,
     {
-      ref: r,
+      ref: n,
       "data-slot": "combobox-group-label",
-      [u]: "combobox-group-label",
-      className: c(e.groupLabel, t),
+      [d]: "combobox-group-label",
+      className: b(e.groupLabel, t),
       ...o
     }
   );
-}), wo = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
-    M,
+}), yo = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
+    O,
     {
-      ref: r,
+      ref: n,
       "data-slot": "select-separator",
-      [u]: "select-separator",
-      className: c(e.separator, t),
+      [d]: "select-separator",
+      className: b(e.separator, t),
       ...o
     }
   );
-}), yo = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
-    z,
+}), Fo = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
+    M,
     {
-      ref: r,
+      ref: n,
       "data-slot": "combobox-command-loading",
-      [u]: "combobox-command-loading",
-      className: c(e.loading, t),
+      [d]: "combobox-command-loading",
+      className: b(e.loading, t),
       ...o
     }
   );
-}), Fo = s.forwardRef(function({ className: t, onClick: o, ...r }, e) {
-  const b = d();
-  return /* @__PURE__ */ n(
+}), vo = s.forwardRef(function({ className: t, onClick: o, ...n }, e) {
+  const m = p();
+  return /* @__PURE__ */ r(
     "span",
     {
       ref: e,
       role: "button",
       tabIndex: 0,
-      className: c(b.clear, t),
+      className: b(m.clear, t),
       onPointerDown: (i) => {
         i.preventDefault(), i.stopPropagation();
       },
       onClick: (i) => {
         i.preventDefault(), i.stopPropagation(), o == null || o(i);
       },
-      ...r,
-      children: /* @__PURE__ */ n(S, { className: b.clearSvg })
+      ...n,
+      children: /* @__PURE__ */ r(R, { className: m.clearSvg })
     }
   );
-}), vo = s.forwardRef(function({ className: t, ...o }, r) {
-  const e = d();
-  return /* @__PURE__ */ n(
+}), So = s.forwardRef(function({ className: t, ...o }, n) {
+  const e = p();
+  return /* @__PURE__ */ r(
     "span",
     {
-      ref: r,
-      className: c(e.placeholder, t),
+      ref: n,
+      className: b(e.placeholder, t),
       ...o
     }
   );
-}), Ro = s.forwardRef(function({ className: t, onClick: o, ...r }, e) {
-  const b = d();
-  return /* @__PURE__ */ n(
+}), Ro = s.forwardRef(function({ className: t, onClick: o, ...n }, e) {
+  const m = p();
+  return /* @__PURE__ */ r(
     "span",
     {
       ref: e,
       role: "button",
       tabIndex: 0,
-      className: c(b.clearValue, t),
+      className: b(m.clearValue, t),
       onPointerDown: (i) => {
         i.preventDefault(), i.stopPropagation();
       },
       onClick: (i) => {
         i.preventDefault(), i.stopPropagation(), o == null || o(i);
       },
-      ...r,
-      children: /* @__PURE__ */ n(S, { className: b.clearValueSvg })
+      ...n,
+      children: /* @__PURE__ */ r(R, { className: m.clearValueSvg })
     }
   );
 });
 export {
-  so as Combobox,
-  Fo as ComboboxClear,
+  mo as Combobox,
+  vo 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,
+  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,
-  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
+  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
 };
 //# sourceMappingURL=field-combobox.js.map