@simpli-route/apollo-ds 0.1.71 → 0.1.72

package/dist/index.es37.js

@@ -1,47 +1,102 @@
-import { j as s } from "./index.es47.js";
-import { useRef as b } from "react";
-import { useTabList as d } from "react-aria";
-import { useTabListState as u, Item as N } from "react-stately";
-import { cn as e } from "./index.es48.js";
-import { Tab as j } from "./index.es95.js";
-import { TabPanel as h } from "./index.es96.js";
-import { tabsVariants as T } from "./index.es97.js";
-const v = (a) => {
-  var l;
+import { j as n } from "./index.es49.js";
+import { CheckIcon as I } from "./index.es51.js";
+import { motion as f } from "framer-motion";
+import { useRef as k } from "react";
+import { useButton as D, useHover as V } from "react-aria";
+import z from "./index.es95.js";
+import B from "./index.es96.js";
+import { cn as H } from "./index.es50.js";
+import { stepVariants as R, iconVariants as $, labelVariants as E } from "./index.es97.js";
+const c = z(B), x = (s, e) => typeof s == "function" ? /* @__PURE__ */ n.jsx(s, { step: e || 0 }) : s, C = (s) => {
+  var t, r, o, a, i;
+  const e = (t = c == null ? void 0 : c.theme) == null ? void 0 : t.colors;
+  switch (s) {
+    case "pending":
+      return ((r = e == null ? void 0 : e.neutral) == null ? void 0 : r["500"]) || "#C7C9D1";
+    case "inProgress":
+      return ((o = e == null ? void 0 : e.blue) == null ? void 0 : o["500"]) || "#2644D9";
+    case "completed":
+      return ((a = e == null ? void 0 : e.success) == null ? void 0 : a["500"]) || "#1FB576";
+    case "error":
+      return ((i = e == null ? void 0 : e.error) == null ? void 0 : i["500"]) || "#CC4033";
+    default:
+      return "#C7C9D1";
+  }
+}, G = (s, e) => {
+  const t = C(s), r = C(e);
+  return {
+    background: `linear-gradient(to right, ${t} 50%, ${r} 50%)`
+  };
+};
+function W(s) {
   const {
-    rootClassName: m,
-    tabClassName: n,
-    tabPanelClassName: c,
-    orientation: o = "horizontal",
-    id: f = void 0,
-    isDisabled: p
-  } = a, t = u(a), r = b(null), { tabListProps: x } = d(a, t, r);
-  return /* @__PURE__ */ s.jsxs("div", { className: e(T({ orientation: o }), m), children: [
-    /* @__PURE__ */ s.jsx(
-      "div",
+    step: e,
+    state: t,
+    size: r,
+    icon: o,
+    completedIcon: a,
+    onPress: i,
+    nextState: h,
+    isLastStep: d,
+    allowStepClick: b = !1,
+    isDisabled: l = !1,
+    label: m
+  } = s, j = k(null), { buttonProps: g, isPressed: p } = D(
+    {
+      ...s,
+      onPress: b ? i : void 0,
+      isDisabled: l
+    },
+    j
+  ), { hoverProps: v, isHovered: u } = V({}), w = R({ size: r, state: t, isHovered: u, isPressed: p, isDisabled: l }), N = $({ size: r, state: t, isHovered: u }), P = E({ size: r }), S = x(t === "completed" ? a || /* @__PURE__ */ n.jsx(I, {}) : o, e), y = x(m, e);
+  return /* @__PURE__ */ n.jsxs("div", { className: H("flex h-full items-center", d ? "w-fit" : "w-full"), children: [
+    /* @__PURE__ */ n.jsx("div", { className: "flex h-24 w-fit items-center justify-center py-2", children: /* @__PURE__ */ n.jsxs(
+      "button",
       {
-        ...x,
-        ref: r,
-        className: e("flex", o === "horizontal" ? "flex-row flex-wrap" : "flex-col"),
-        children: [...t.collection].map((i) => /* @__PURE__ */ s.jsx(j, { item: i, state: t, orientation: o, className: n, id: f }, i.key))
+        className: "z-10 flex flex-col items-center whitespace-nowrap",
+        ...v,
+        ...g,
+        "data-testid": "step-button",
+        "data-state": t,
+        "aria-disabled": l,
+        children: [
+          /* @__PURE__ */ n.jsx(
+            f.div,
+            {
+              className: w,
+              "data-testid": "step-icon-container",
+              initial: !1,
+              animate: { scale: p ? 0.95 : 1 },
+              transition: { duration: 0.2 },
+              children: /* @__PURE__ */ n.jsx(
+                f.span,
+                {
+                  className: N,
+                  initial: !1,
+                  animate: {
+                    scale: t === "completed" ? [1, 1.1, 1] : 1,
+                    rotate: t === "completed" ? [0, 10, 0] : 0
+                  },
+                  transition: { duration: 0.3 },
+                  children: S
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ n.jsx("div", { className: "mt-2 flex select-none flex-col items-center justify-between", children: m ? /* @__PURE__ */ n.jsx("span", { className: P, children: y }) : null })
+        ]
       }
-    ),
-    /* @__PURE__ */ s.jsx(
-      h,
+    ) }),
+    d ? null : /* @__PURE__ */ n.jsx(
+      "div",
       {
-        state: t,
-        className: e(
-          "p-2",
-          o === "horizontal" ? "pl-2" : "pt-2",
-          p ? "cursor-not-allowed opacity-50" : "",
-          c
-        )
-      },
-      (l = t.selectedItem) == null ? void 0 : l.key
+        className: "mx-4 hidden h-1 w-full sm:block",
+        "data-testid": "progress-bar",
+        style: G(t, h)
+      }
     )
   ] });
-};
-v.Item = N;
+}
 export {
-  v as Tabs
+  W as StepperStep
 };

package/dist/index.es38.js

@@ -1,10 +1,80 @@
-import { j as e } from "./index.es47.js";
-import { CrossCircleIcon as r, CheckCircleIcon as o } from "./index.es49.js";
-import { cn as i } from "./index.es48.js";
-function m(n) {
-  const { className: t, validationState: s } = n;
-  return s === "invalid" ? /* @__PURE__ */ e.jsx("div", { className: i("pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", t), children: /* @__PURE__ */ e.jsx(r, { className: "size-6 text-error-500" }) }) : s === "valid" ? /* @__PURE__ */ e.jsx("div", { className: i("pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", t), children: /* @__PURE__ */ e.jsx(o, { className: "size-6 text-success-500" }) }) : null;
-}
+import { j as o } from "./index.es49.js";
+import { Switch as u } from "react-aria-components";
+import { cn as c } from "./index.es50.js";
+import { ContentSwitch as L } from "./index.es98.js";
+import { SwitchIndicator as v } from "./index.es99.js";
+import { switchVariants as b } from "./index.es73.js";
+const E = ({
+  children: f,
+  label: m,
+  description: n,
+  errorMessage: s,
+  validationState: e,
+  size: a = "md",
+  isDisabled: r = !1,
+  isSelected: t = !1,
+  onChange: h,
+  renderLabelIcon: x = null,
+  "aria-label": p,
+  "aria-describedby": l
+}) => {
+  const j = e === "invalid" && !r, w = a === "sm" ? { offLeft: 3, onLeft: 19 } : { offLeft: 4, onLeft: 28 };
+  return /* @__PURE__ */ o.jsxs(
+    "label",
+    {
+      className: c("group flex flex-row gap-2", (m || f) && n ? "items-start" : "items-center"),
+      children: [
+        /* @__PURE__ */ o.jsx(
+          u,
+          {
+            isDisabled: r,
+            isSelected: t,
+            "aria-checked": t,
+            "aria-label": p,
+            "aria-describedby": l,
+            onChange: h,
+            children: ({ isFocusVisible: d, isHovered: i }) => /* @__PURE__ */ o.jsx(
+              "div",
+              {
+                className: c(
+                  b({
+                    isSelected: t,
+                    isDisabled: r,
+                    isFocusVisible: d,
+                    size: a,
+                    isHoveredWhenOff: i && !t
+                  })
+                ),
+                children: /* @__PURE__ */ o.jsx(
+                  v,
+                  {
+                    isSelected: t,
+                    isDisabled: r,
+                    isHovered: i,
+                    size: a,
+                    dimensions: w
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          L,
+          {
+            label: m,
+            description: n,
+            errorMessage: s,
+            isDisabled: r,
+            isInvalid: j,
+            renderLabelIcon: x,
+            children: f
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  m as InputValidationIcon
+  E as Switch
 };

package/dist/index.es39.js

@@ -1,164 +1,47 @@
-import { j as s } from "./index.es47.js";
-import { useState as D, useRef as ce } from "react";
-import { TextField as fe, Text as pe, FieldError as me } from "react-aria-components";
-import { cn as b } from "./index.es48.js";
-import { Badge as xe } from "./index.es4.js";
-import "./index.es5.js";
-import "./index.es15.js";
-import { Label as he } from "./index.es16.js";
-import { multiTextFieldContainerVariants as ge } from "./index.es69.js";
-const je = (q) => {
+import { j as s } from "./index.es49.js";
+import { useRef as b } from "react";
+import { useTabList as d } from "react-aria";
+import { useTabListState as u, Item as N } from "react-stately";
+import { cn as e } from "./index.es50.js";
+import { Tab as j } from "./index.es100.js";
+import { TabPanel as h } from "./index.es101.js";
+import { tabsVariants as T } from "./index.es102.js";
+const v = (a) => {
+  var l;
   const {
-    label: j,
-    placeholder: z,
-    isDisabled: o = !1,
-    size: E = "sm",
-    description: R,
-    inputValue: T,
-    isInvalid: _,
-    errorMessage: I,
-    invalidInputErrorMessage: k,
-    values: A,
-    onValuesChange: a,
-    onInputChange: B,
-    validateValue: i,
-    separator: r = `
-`,
-    icon: F,
-    tooltipText: G,
-    tooltipSupportText: H,
-    tooltipProps: J,
-    labelClassName: Q,
-    errorClassName: U,
-    descriptionClassName: W,
-    isRequired: M = !1,
-    isReadOnly: S = !1,
-    className: X,
-    inputType: P = "text",
-    inputMax: N,
-    inputMin: y,
-    ...Y
-  } = q, [Z, ee] = D(""), [te, w] = D([]), [K, u] = D(!1), L = T !== void 0, x = A !== void 0, l = L ? T : Z, n = x ? A : te, d = l.trim(), ne = d !== "" && n.includes(d), se = d !== "" && i && !i(d), h = K && (ne || se), le = n.length > 0, C = () => {
-    d !== "" && u(!0);
-  }, c = (e) => {
-    K && u(!1), L || ee(e), B && B(e);
-  }, O = (e) => {
-    const t = e.trim();
-    if (!t)
-      return !1;
-    if (P === "number") {
-      const p = Number(t);
-      if (Number.isNaN(p) || y !== void 0 && p < Number(y) || N !== void 0 && p > Number(N))
-        return !1;
-    }
-    if (i && !i(t) || n.includes(t))
-      return !1;
-    const f = [...n, t];
-    return x || w(f), a && a(f), !0;
-  }, $ = (e) => {
-    const t = n.filter((f) => f !== e);
-    x || w(t), a && a(t);
-  }, ae = (e) => {
-    if (e.key === "Enter")
-      e.preventDefault(), C(), l.trim() && O(l) && (c(""), u(!1));
-    else if (e.key === " " || e.key === "Tab")
-      C(), l.trim() && (O(l) ? (c(""), u(!1)) : e.preventDefault());
-    else if (e.key === "Backspace" && l === "" && n.length > 0) {
-      e.preventDefault();
-      const t = n[n.length - 1];
-      $(t), c(t), u(!1);
-    }
-  }, ie = () => {
-    C();
-  }, re = (e) => {
-    const t = e.clipboardData.getData("text");
-    if (!(typeof r == "string" ? new RegExp(r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) : r).test(t))
-      return;
-    e.preventDefault();
-    const p = t.split(r), V = [];
-    for (const v of p) {
-      const m = v.trim();
-      m && (!i || i(m)) && !n.includes(m) && !V.includes(m) && V.push(m);
-    }
-    if (V.length > 0) {
-      const v = [...n, ...V];
-      x || w(v), a && a(v);
-    }
-    c("");
-  }, g = (_ || h) && !o, oe = ce(null), ue = b("text-sm leading-6 text-error-500", U), de = b("text-xs leading-5 text-neutral-700", W);
-  return /* @__PURE__ */ s.jsxs(
-    fe,
-    {
-      className: b("flex flex-col gap-2", X),
-      isDisabled: o,
-      isReadOnly: S,
-      isRequired: M,
-      isInvalid: g,
-      ...Y,
-      children: [
-        j && /* @__PURE__ */ s.jsx(
-          he,
-          {
-            isRequired: M,
-            tooltipText: G,
-            tooltipSupportText: H,
-            tooltipProps: J,
-            labelClassName: Q,
-            children: j
-          }
-        ),
-        /* @__PURE__ */ s.jsxs(
-          "div",
-          {
-            ref: oe,
-            "data-testid": "multi-text-field-container",
-            className: ge({
-              size: E,
-              isDisabled: o,
-              hasInvalidValue: h
-            }),
-            children: [
-              le && /* @__PURE__ */ s.jsx(s.Fragment, { children: n.map((e) => /* @__PURE__ */ s.jsx(
-                xe,
-                {
-                  label: e,
-                  size: E,
-                  isDisabled: o,
-                  onDelete: () => $(e)
-                },
-                e
-              )) }),
-              /* @__PURE__ */ s.jsx(
-                "input",
-                {
-                  type: P,
-                  max: N,
-                  min: y,
-                  value: l,
-                  placeholder: z,
-                  className: b(
-                    "min-w-[120px] flex-1 border-0 bg-transparent p-0 outline-none focus:ring-0",
-                    h && "text-error-500"
-                  ),
-                  disabled: o,
-                  readOnly: S,
-                  "aria-invalid": g,
-                  onChange: (e) => c(e.target.value),
-                  onKeyDown: ae,
-                  onBlur: ie,
-                  onPaste: re
-                }
-              ),
-              F ? /* @__PURE__ */ s.jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-700", children: F }) : null
-            ]
-          }
-        ),
-        R && !g && /* @__PURE__ */ s.jsx(pe, { slot: "description", className: de, children: R }),
-        g && /* @__PURE__ */ s.jsx(me, { className: ue, children: I ? typeof I != "function" ? I : null : h && k ? k : null })
-      ]
-    }
-  );
+    rootClassName: m,
+    tabClassName: n,
+    tabPanelClassName: c,
+    orientation: o = "horizontal",
+    id: f = void 0,
+    isDisabled: p
+  } = a, t = u(a), r = b(null), { tabListProps: x } = d(a, t, r);
+  return /* @__PURE__ */ s.jsxs("div", { className: e(T({ orientation: o }), m), children: [
+    /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ...x,
+        ref: r,
+        className: e("flex", o === "horizontal" ? "flex-row flex-wrap" : "flex-col"),
+        children: [...t.collection].map((i) => /* @__PURE__ */ s.jsx(j, { item: i, state: t, orientation: o, className: n, id: f }, i.key))
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      h,
+      {
+        state: t,
+        className: e(
+          "p-2",
+          o === "horizontal" ? "pl-2" : "pt-2",
+          p ? "cursor-not-allowed opacity-50" : "",
+          c
+        )
+      },
+      (l = t.selectedItem) == null ? void 0 : l.key
+    )
+  ] });
 };
+v.Item = N;
 export {
-  je as MultiTextField
+  v as Tabs
 };

package/dist/index.es4.js

@@ -1,33 +1,139 @@
-import { j as e } from "./index.es47.js";
-import { CrossCircleIcon as m } from "./index.es49.js";
-import { Button as c } from "react-aria-components";
-import { cn as l } from "./index.es48.js";
-import { badgeVariants as x } from "./index.es5.js";
-const h = (n) => {
-  const { label: o, onDelete: a, size: r = "xs", isDisabled: s = !1, maxLength: t } = n, i = t && o.length > t ? `${o.slice(0, t)}...` : o;
-  return /* @__PURE__ */ e.jsxs("div", { className: l(x({ size: r, isDisabled: s })), children: [
-    /* @__PURE__ */ e.jsx("span", { children: i }),
-    /* @__PURE__ */ e.jsx(
-      c,
-      {
-        className: l("outline-none", s ? "cursor-not-allowed" : ""),
-        isDisabled: s,
-        slot: null,
-        onPress: a,
-        children: /* @__PURE__ */ e.jsx(
-          m,
+import { j as s } from "./index.es49.js";
+import { DownChevronIcon as ne } from "./index.es51.js";
+import { useState as d, useCallback as n, useMemo as ae } from "react";
+import { ComboBox as ie, Group as re, Input as ce, Text as C, Popover as me, ListBox as ue } from "react-aria-components";
+import { cn as p } from "./index.es50.js";
+import "./index.es17.js";
+import { Label as de } from "./index.es18.js";
+import { AutocompleteContext as pe } from "./index.es52.js";
+import { AutocompleteToggle as xe } from "./index.es53.js";
+import { comboBoxVariants as fe, autocompleteGroupVariants as Ie, autocompleteInputVariants as je, autocompletePopoverVariants as Ve } from "./index.es54.js";
+function Ce(L) {
+  const {
+    size: x = "sm",
+    label: O,
+    description: v,
+    errorMessage: N,
+    intent: B = "tertiary",
+    children: M,
+    items: a,
+    // destructured so it only goes to ListBox
+    defaultItems: i,
+    className: R,
+    buttonClassName: D,
+    iconClassName: G,
+    tooltipText: q,
+    tooltipProps: w,
+    isInvalid: r,
+    isDisabled: f = !1,
+    isRequired: b = !1,
+    isReadOnly: I = !1,
+    icon: z = ne,
+    onIconPress: E,
+    isLoading: F = !1,
+    placeholder: _,
+    onInputChange: l,
+    onOpenChange: c,
+    onSelectionChange: t,
+    inputValue: h,
+    selectedKey: H,
+    defaultSelectedKey: J,
+    defaultInputValue: g,
+    ...Q
+  } = L, [U, m] = d(g ?? ""), [W, j] = d(J ?? null), [X, u] = d(h ?? g ?? ""), [Y, Z] = d(!1), $ = h ?? U, K = H ?? W, P = K !== null, k = n(
+    (e, o) => {
+      Z(e), c == null || c(e, o);
+    },
+    [c]
+  ), ee = n(
+    (e) => {
+      m(e), u(e), e === "" && (j(null), t == null || t(null)), l == null || l(e);
+    },
+    [l, t]
+  ), V = ae(() => a ?? i ?? [], [a, i]), T = n((e) => {
+    const o = e;
+    return o.textValue ?? o.name ?? o.title ?? o.label ?? "";
+  }, []), te = n(
+    (e) => {
+      if (j(e), e === null)
+        m(""), u("");
+      else {
+        const y = (Array.isArray(V) ? V : []).find((oe) => {
+          const S = oe;
+          return S.id === e || S.id === String(e);
+        }) ?? null, A = y ? T(y) : String(e ?? "");
+        m(A), u(A);
+      }
+      t == null || t(e);
+    },
+    [t, V, T]
+  ), se = n(() => {
+    j(null), m(""), u(""), t == null || t(null), l == null || l("");
+  }, [t, l]), le = r === void 0 ? void 0 : r ? "invalid" : "valid";
+  return /* @__PURE__ */ s.jsx(
+    ie,
+    {
+      ...Q,
+      className: p(fe({ size: x }), R),
+      isInvalid: r,
+      isDisabled: f,
+      isReadOnly: I,
+      isRequired: b,
+      selectedKey: K,
+      inputValue: $,
+      items: a,
+      defaultItems: i,
+      onInputChange: ee,
+      onSelectionChange: te,
+      onOpenChange: k,
+      children: /* @__PURE__ */ s.jsxs(pe.Provider, { value: X, children: [
+        /* @__PURE__ */ s.jsx(de, { isRequired: b, tooltipText: q, tooltipProps: w, children: O }),
+        /* @__PURE__ */ s.jsxs(
+          re,
           {
-            className: l(
-              "text-primary-800",
-              s ? "text-neutral-600" : "",
-              r === "xs" || r === "sm" ? "size-3" : "size-4"
-            )
+            className: ({ isHovered: e }) => p(
+              Ie({
+                size: x,
+                isHovered: e,
+                isDisabled: f,
+                isReadOnly: I,
+                validationState: le,
+                intent: B
+              }),
+              D
+            ),
+            children: [
+              /* @__PURE__ */ s.jsx(
+                ce,
+                {
+                  placeholder: _,
+                  className: p(je({ size: x, isInvalid: r || void 0 }))
+                }
+              ),
+              /* @__PURE__ */ s.jsx(
+                xe,
+                {
+                  hasSelection: P,
+                  isOpen: Y,
+                  isDisabled: f,
+                  isReadOnly: I,
+                  isLoading: F,
+                  iconClassName: G,
+                  icon: z,
+                  onClear: se,
+                  onIconPress: E
+                }
+              )
+            ]
           }
-        )
-      }
-    )
-  ] });
-};
+        ),
+        v && /* @__PURE__ */ s.jsx(C, { slot: "description", className: "text-xs leading-6 text-neutral-700", children: v }),
+        N && /* @__PURE__ */ s.jsx(C, { slot: "errorMessage", className: "text-sm leading-6 text-error-500", children: N }),
+        /* @__PURE__ */ s.jsx(me, { className: p(Ve()), children: /* @__PURE__ */ s.jsx(ue, { className: "p-1 outline-none", items: a ?? i, children: M }) })
+      ] })
+    }
+  );
+}
 export {
-  h as Badge
+  Ce as Autocomplete
 };