@simpli-route/apollo-ds 0.1.36 → 0.1.38

package/dist/index.es19.js

@@ -1,146 +1,107 @@
-import { j as r } from "./index.es32.js";
-import { useState as f, useRef as C, useEffect as I } from "react";
-import { Select as S, Popover as tt, ListBox as st } from "react-aria-components";
-import { cn as P } from "./index.es33.js";
+import { j as e } from "./index.es36.js";
+import { UpChevronIcon as B, DownChevronIcon as R } from "./index.es38.js";
+import { forwardRef as U } from "react";
+import { NumberField as _, Group as k, Input as A, Button as d, FieldError as H } from "react-aria-components";
+import { cn as r } from "./index.es37.js";
 import "./index.es11.js";
-import { Label as it } from "./index.es12.js";
-import { SelectContent as rt } from "./index.es59.js";
-import { SelectItem as lt } from "./index.es20.js";
-import { TooltipSelect as ot } from "./index.es60.js";
-const b = "all-select-option", bt = ({
-  mode: e = "single",
-  keyLabelName: V,
-  keyIdName: j,
-  className: _,
-  selectButtonClassName: k,
-  placeholder: O = "Select an option",
-  isDisabled: x = !1,
-  size: q = "md",
-  items: l = [],
-  renderItem: N,
-  value: s = [],
-  onSelectChange: t,
-  classNameLabel: B,
-  isRequired: $ = !1,
-  label: L,
-  tooltipText: F,
-  tooltipSupportText: H,
-  tooltipProps: g,
-  hiddenDiscardButton: z = !1,
-  tooltipMode: G = "dark",
-  textAllOption: J = "Select all"
-}) => {
-  const [y, K] = f(e), [M, d] = f(!1), [R, Q] = f(""), [U, u] = f(0), [X, T] = f(!1), [Y, A] = f(!1), m = C(null);
-  I(() => {
-    e !== y && (t == null || t([]), K(e));
-  }, [e, t, y]), I(() => {
-    if (!m.current || s.length === 0)
-      return;
-    const i = () => {
-      const n = m.current;
-      n && (A(!0), u(s.length), requestAnimationFrame(() => {
-        let c = 0;
-        const a = n.querySelectorAll("[data-chip]");
-        let h = 0;
-        const p = document.createElement("div");
-        p.innerText = `+${s.length}`, p.style.visibility = "hidden", p.style.position = "absolute", n.appendChild(p);
-        const v = p.offsetWidth;
-        n.removeChild(p);
-        for (let w = 0; w < a.length; w++) {
-          const E = a[w].getBoundingClientRect().width, W = 8;
-          if (c + E + W > n.offsetWidth - v)
-            break;
-          c += E + W, h++;
-        }
-        h < s.length ? (u(Math.max(1, h)), T(!0)) : (u(s.length), T(!1)), A(!1);
-      }));
-    };
-    i();
-    const o = new ResizeObserver(i);
-    return o.observe(m.current), () => {
-      o == null || o.disconnect();
-    };
-  }, [s]);
-  const Z = P("flex w-full flex-col gap-1 !min-w-[150px]", _), D = (i) => {
-    t == null || t((s == null ? void 0 : s.filter((o) => o !== i)) ?? []);
-  };
-  return /* @__PURE__ */ r.jsxs(
-    S,
-    {
-      isDisabled: x,
-      className: Z,
-      placeholder: O,
-      onSelectionChange: (i) => {
-        if (i === b && e === "multiple") {
-          if (s.length === l.length)
-            t == null || t([]);
-          else {
-            const c = l.map((a) => a[j]);
-            t == null || t(c);
-          }
-          return;
-        }
-        const o = s != null && s.includes(i) ? s.filter((c) => c !== i) : [...s, i], n = [i];
-        e === "multiple" ? t == null || t(o) : (d(!1), t == null || t(n));
-      },
-      children: [
-        /* @__PURE__ */ r.jsxs("div", { className: "flex items-center justify-between", children: [
-          L ? /* @__PURE__ */ r.jsx(
-            it,
+import { Label as J } from "./index.es12.js";
+import { invisibleInputContainerVariants as K, invisibleInputLabelVariants as M, invisibleInputCaptionVariants as O } from "./index.es47.js";
+import { invisibleNumberFieldGroupVariants as P, invisibleNumberFieldVariants as Q, invisibleNumberFieldStepperVariants as t } from "./index.es45.js";
+const T = U(
+  ({
+    size: l = "bodyDefault",
+    orientation: a = "vertical",
+    label: f,
+    placeholder: p,
+    captionError: n,
+    validationState: i,
+    className: x,
+    inputClassName: N,
+    labelClassName: v,
+    captionErrorClassName: b,
+    isDisabled: s = !1,
+    isRequired: u = !1,
+    tooltipText: h,
+    tooltipSupportText: j,
+    tooltipProps: I,
+    minValue: F = 0,
+    maxValue: y,
+    step: V,
+    formatOptions: C,
+    showStepper: w = !0,
+    ...L
+  }, g) => {
+    const G = (m, o, c) => s ? "disabled" : i === "invalid" ? "error" : o || c ? "active" : m ? "hover" : "default";
+    return /* @__PURE__ */ e.jsxs(
+      _,
+      {
+        className: r(K({ size: l, orientation: a }), x),
+        isDisabled: s,
+        isInvalid: i === "invalid",
+        isRequired: u,
+        minValue: F,
+        maxValue: y,
+        step: V,
+        formatOptions: C,
+        ...L,
+        children: [
+          f && /* @__PURE__ */ e.jsx(
+            J,
             {
-              labelClassName: P("leading-[19.07px] text-left mb-[1px]", {
-                "text-neutral-700": x,
-                classNameLabel: B
-              }),
-              isRequired: $,
-              tooltipText: F,
-              tooltipSupportText: H,
-              tooltipProps: g,
-              children: L
+              labelClassName: r(
+                M({ size: l }),
+                v,
+                a === "horizontal" && i !== "invalid" ? "self-center" : "self-start"
+              ),
+              isRequired: u,
+              tooltipText: h,
+              tooltipSupportText: j,
+              tooltipProps: I,
+              children: f
             }
-          ) : /* @__PURE__ */ r.jsx("div", {}),
-          R && /* @__PURE__ */ r.jsx("div", { className: "relative -mb-2 mr-20 flex self-end", children: /* @__PURE__ */ r.jsx(ot, { mode: G, className: "mr-2", placement: "none", children: /* @__PURE__ */ r.jsx("p", { className: "whitespace-nowrap text-xs", children: R }) }) })
-        ] }),
-        /* @__PURE__ */ r.jsx(
-          rt,
-          {
-            isDisabled: x,
-            size: q,
-            selectButtonClassName: k,
-            setIsOpen: d,
-            isOpen: M,
-            value: s,
-            placeholder: O,
-            items: l,
-            keyIdName: j,
-            keyLabelName: V,
-            visibleItems: U,
-            handleDeleteOptionSelected: D,
-            maxLengthTextOption: 12,
-            hiddenDiscardButton: z,
-            containerRef: m,
-            setTooltipMessage: Q,
-            hasOverflow: X,
-            isCalculatingChips: Y
-          }
-        ),
-        /* @__PURE__ */ r.jsx(
-          tt,
-          {
-            isOpen: M,
-            placement: "bottom start",
-            className: "custom-scrollbar !max-h-[185px] w-[--trigger-width] overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-black/5",
-            onOpenChange: d,
-            children: /* @__PURE__ */ r.jsxs(st, { items: l, className: "p-1 outline-none", children: [
-              e === "multiple" && /* @__PURE__ */ r.jsx(lt, { id: b, children: J }, b),
-              Array.isArray(l) && (l == null ? void 0 : l.map((i) => N ? N(i) : null))
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
+          ),
+          /* @__PURE__ */ e.jsxs("div", { className: r("flex flex-col", a === "horizontal" ? "flex-1" : "w-full"), children: [
+            /* @__PURE__ */ e.jsxs(k, { className: r(P({ size: l })), children: [
+              /* @__PURE__ */ e.jsx(
+                A,
+                {
+                  ref: g,
+                  placeholder: p,
+                  className: ({ isHovered: m, isFocusVisible: o, isFocused: c }) => r(
+                    Q({
+                      size: l,
+                      state: G(m, o, c)
+                    }),
+                    "font-semibold",
+                    N
+                  )
+                }
+              ),
+              w && /* @__PURE__ */ e.jsxs("div", { className: "absolute inset-y-0 right-0 flex flex-col items-center justify-center space-y-0.5 pr-2", children: [
+                /* @__PURE__ */ e.jsx(d, { slot: "increment", className: r(t({ size: l, isDisabled: s })), children: /* @__PURE__ */ e.jsx(B, { className: r(t({ size: l, isDisabled: s })) }) }),
+                /* @__PURE__ */ e.jsx(d, { slot: "decrement", className: r(t({ size: l, isDisabled: s })), children: /* @__PURE__ */ e.jsx(R, { className: r(t({ size: l, isDisabled: s })) }) })
+              ] })
+            ] }),
+            n && i === "invalid" && /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                className: r(
+                  O({
+                    state: "error"
+                  }),
+                  b
+                ),
+                children: n
+              }
+            )
+          ] }),
+          i === "invalid" && n && /* @__PURE__ */ e.jsx(H, { className: "sr-only", children: n })
+        ]
+      }
+    );
+  }
+);
+T.displayName = "InvisibleNumberField";
 export {
-  bt as Select
+  T as InvisibleNumberField
 };

package/dist/index.es2.js

@@ -1,6 +1,6 @@
-import { j as g } from "./index.es32.js";
+import { j as g } from "./index.es36.js";
 import { useState as a } from "react";
-import { cn as l } from "./index.es33.js";
+import { cn as l } from "./index.es37.js";
 import { AccordionItem as v } from "./index.es3.js";
 const S = ({
   items: n,

package/dist/index.es20.js

@@ -1,42 +1,94 @@
-import { j as e } from "./index.es32.js";
-import { ListBoxItem as m } from "react-aria-components";
-import { cn as i } from "./index.es33.js";
-const c = (t) => {
-  const { isSelected: r } = t;
-  return /* @__PURE__ */ e.jsx(
-    m,
+import { j as r } from "./index.es36.js";
+import { NumberField as w, Group as B, Input as E } from "react-aria-components";
+import { cn as t } from "./index.es37.js";
+import "./index.es11.js";
+import { Label as G } from "./index.es12.js";
+import { CaptionNumberField as S } from "./index.es70.js";
+import { StepperButton as V } from "./index.es71.js";
+import { inputNumberVariant as _ } from "./index.es45.js";
+const K = ({
+  size: o = "sm",
+  label: i,
+  description: s,
+  errorMessage: n,
+  isDisabled: e = !1,
+  isReadOnly: l = !1,
+  isRequired: p = !1,
+  tooltipText: f,
+  tooltipSupportText: u,
+  tooltipProps: d,
+  className: x,
+  descriptionClasses: c,
+  errorClasses: N,
+  validationState: m = "default",
+  inputClassName: j,
+  maxValue: v,
+  minValue: b = 0,
+  autoFocus: F = !1,
+  maxLength: h,
+  classNameNumberField: C,
+  ...I
+}) => {
+  const a = m === "invalid" && !e;
+  return /* @__PURE__ */ r.jsx("div", { className: t("flex", x), children: /* @__PURE__ */ r.jsxs(
+    w,
     {
-      ...t,
-      className: ({ isHovered: n, isFocusVisible: l }) => i(
-        "group flex cursor-pointer select-none items-center gap-2 rounded-sm px-4 py-2 text-primary-500 outline-none",
-        r && "bg-primary-100",
-        (n || l) && !r && "bg-primary-50",
-        (n || l) && r && "bg-primary-200"
-      ),
-      children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx(
-          "span",
+      autoFocus: F,
+      className: t(e ? "opacity-70" : "", C),
+      isDisabled: e,
+      isReadOnly: l,
+      maxValue: v,
+      minValue: b,
+      ...I,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          G,
           {
-            className: i(
-              "flex flex-1 items-center gap-2  text-sm font-normal text-primary-900",
-              r && "text-primary-500"
-            ),
-            children: t == null ? void 0 : t.children
+            labelClassName: t("leading-[19.07px] text-left mb-0.5", {
+              "text-neutral-700": e
+            }),
+            isRequired: p,
+            tooltipText: f,
+            tooltipSupportText: u,
+            tooltipProps: d,
+            children: i
           }
         ),
-        /* @__PURE__ */ e.jsx("span", { className: "flex w-5 items-center", children: r && /* @__PURE__ */ e.jsx("svg", { width: "14", height: "13", viewBox: "0 0 14 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e.jsx(
-          "path",
+        /* @__PURE__ */ r.jsxs(B, { className: "relative mb-0.5 w-full rounded", children: [
+          /* @__PURE__ */ r.jsx(
+            E,
+            {
+              disabled: e,
+              maxLength: h,
+              className: ({ isFocused: L, isHovered: g }) => t(
+                _({
+                  size: o,
+                  isDisabled: e,
+                  isReadOnly: l,
+                  isHovered: g,
+                  isFocused: L,
+                  validationState: m === "valid" ? "valid" : a ? "invalid" : "default"
+                }),
+                j
+              )
+            }
+          ),
+          /* @__PURE__ */ r.jsx(V, { isDisabled: e })
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          S,
           {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M13.2241 0.601824C13.4808 0.780773 13.5439 1.13398 13.365 1.39073L5.69829 12.3907C5.59653 12.5367 5.43209 12.6264 5.25425 12.633C5.07641 12.6395 4.90582 12.5622 4.79359 12.4241L0.460261 7.09072C0.26291 6.84783 0.299829 6.49094 0.542723 6.29358C0.785617 6.09623 1.14251 6.13315 1.33986 6.37605L5.19872 11.1254L12.4352 0.7427C12.6141 0.485948 12.9673 0.422875 13.2241 0.601824Z",
-            fill: "#4C3BEF"
+            description: s,
+            descriptionClasses: c,
+            errorMessage: n,
+            errorClasses: N,
+            isInvalidField: a
           }
-        ) }) })
-      ] })
+        )
+      ]
     }
-  );
+  ) });
 };
 export {
-  c as SelectItem
+  K as NumberField
 };

package/dist/index.es21.js

@@ -1,80 +1,110 @@
-import { j as m } from "./index.es32.js";
-import { useState as q, useEffect as x } from "react";
-import { Slider as z, SliderTrack as B } from "react-aria-components";
-import { cn as F } from "./index.es33.js";
-import { SliderContainerTrack as G } from "./index.es62.js";
-import { validateMinDistance as H } from "./index.es63.js";
-const U = ({
-  type: r = "single",
-  showTypeValue: A = "default",
-  positionTooltip: S = "top",
-  modeTooltip: j = "dark",
-  isHiddenValue: w = !1,
-  maxValue: T = 100,
-  minValue: k = 0,
-  value: f = r === "range" ? [0, 5] : 0,
-  onChangeValue: i,
-  className: p,
-  classNameFilled: v,
-  classNameUnfilled: N,
-  classNameThumb: E,
-  suffix: M = "%",
-  suffixRangeCustom: P = {
-    left: "",
-    right: ""
-  },
-  step: R = 1,
-  minDistance: d = 2,
-  ...$
-}) => {
-  const [l, b] = q(r);
-  return x(() => {
-    if (r === "range" && Array.isArray(f)) {
-      const [s, t] = f;
-      if (t - s < d) {
-        const c = [s, s + d];
-        (c[0] !== f[0] || c[1] !== f[1]) && (i == null || i(c));
-      }
-    }
-  }, [r, f, i, d]), x(() => {
-    l !== r && (b(r), i == null || i(r === "range" ? [0, 5] : 0));
-  }, [r, i, l]), /* @__PURE__ */ m.jsx("div", { className: "flex w-full flex-col py-4", children: /* @__PURE__ */ m.jsx(
-    z,
+import { j as t } from "./index.es36.js";
+import { motion as D } from "framer-motion";
+import { ProgressBar as I } from "react-aria-components";
+import "react";
+import { cn as s } from "./index.es37.js";
+import "./index.es39.js";
+import "./index.es40.js";
+import "./index.es41.js";
+import "react-aria";
+import "./index.es42.js";
+import "@react-stately/color";
+import "./index.es43.js";
+import "./index.es10.js";
+import "./index.es11.js";
+import { Label as M } from "./index.es12.js";
+import "@internationalized/date";
+import "./index.es44.js";
+import "./index.es14.js";
+import "./index.es18.js";
+import "./index.es19.js";
+import "./index.es45.js";
+import { progressBarVariants as S, progressFillVariants as $ } from "./index.es46.js";
+import "./index.es47.js";
+import "./index.es48.js";
+import "./index.es49.js";
+import "./index.es50.js";
+import { Tooltip as k } from "./index.es32.js";
+import { TooltipTrigger as z } from "./index.es33.js";
+import "./index.es52.js";
+import "./index.es27.js";
+import "./index.es28.js";
+import "./index.es29.js";
+import "./index.es53.js";
+import "./index.es31.js";
+import { Text as d } from "./index.es34.js";
+import "./index.es54.js";
+const jt = (f) => {
+  const {
+    className: h,
+    classNameLabel: N,
+    label: o,
+    variant: p = "primary",
+    barClassName: u,
+    fillClassName: g,
+    valueTextClassName: n,
+    isLoading: e = !1,
+    showPercentage: x = !0,
+    percentageDisplayMode: i = "text",
+    positionTooltip: j = "top",
+    modeTooltip: b = "dark",
+    maxValue: w = 100,
+    minValue: y = 0,
+    valueCustomLabel: r,
+    valuePosition: c = "right",
+    classNameTooltip: v,
+    tooltipMessage: a,
+    barStyle: C = {},
+    fillStyle: T = {},
+    ...L
+  } = f, P = s("flex w-full flex-col gap-2 text-neutral-900", h), B = s(S({ variant: p }), u), V = s($({ variant: p }), g);
+  return /* @__PURE__ */ t.jsx(I, { className: P, maxValue: w, minValue: y, ...L, children: ({ percentage: l, valueText: m }) => /* @__PURE__ */ t.jsxs(
+    "div",
     {
-      value: f,
-      step: R,
-      maxValue: T,
-      minValue: k,
-      className: F("w-full", p),
-      onChange: (s) => {
-        const t = s;
-        if (t !== void 0) {
-          const c = Array.isArray(t), o = r === "range" && c ? H(t, r, d) : t;
-          i == null || i(
-            r === "range" ? o : Array.isArray(o) ? o[0] || 0 : o
-          );
-        }
-      },
-      ...$,
-      children: /* @__PURE__ */ m.jsx(B, { className: "relative h-3 w-full cursor-pointer", children: ({ state: s }) => /* @__PURE__ */ m.jsx(
-        G,
-        {
-          state: s,
-          type: r,
-          showTypeValue: A,
-          isHiddenValue: w,
-          suffix: M,
-          suffixRangeCustom: P,
-          classNameFilled: v,
-          classNameUnfilled: N,
-          modeTooltip: j,
-          positionTooltip: S,
-          classNameThumb: E
-        }
-      ) })
+      className: s("flex w-full items-center gap-2", {
+        "items-end": o
+      }),
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+          o ? /* @__PURE__ */ t.jsx(M, { labelClassName: s("leading-[19.07px] text-left", N), children: o }) : null,
+          /* @__PURE__ */ t.jsxs(
+            z,
+            {
+              isDisabled: i === "text" && !a || e,
+              className: "items-start",
+              delay: 90,
+              closeDelay: 200,
+              children: [
+                /* @__PURE__ */ t.jsx("div", { className: B, style: C, children: /* @__PURE__ */ t.jsx(
+                  D.div,
+                  {
+                    className: V,
+                    style: { width: e ? "100%" : `${l}%`, ...T },
+                    animate: e ? { x: ["-100%", "100%"] } : { width: l + "%", x: [0, 0] },
+                    transition: e ? { repeat: 1 / 0, duration: 1, ease: "easeInOut" } : {}
+                  }
+                ) }),
+                /* @__PURE__ */ t.jsx(
+                  k,
+                  {
+                    className: s("text-xs", v),
+                    style: i === "tooltip" ? { left: l + "%" } : {},
+                    mode: b,
+                    size: "sm",
+                    placement: j,
+                    children: a && i === "text" ? a : r || m
+                  }
+                )
+              ]
+            }
+          ),
+          !e && x && i === "text" && c === "bottom" && /* @__PURE__ */ t.jsx("div", { className: "mt-0.5 self-end", children: /* @__PURE__ */ t.jsx(d, { className: s("whitespace-nowrap text-xs text-neutral-900", n), children: r || m }) })
+        ] }),
+        !e && x && i === "text" && c === "right" && /* @__PURE__ */ t.jsx("div", { className: o ? "-mb-0.5" : "", children: /* @__PURE__ */ t.jsx(d, { className: s("whitespace-nowrap text-xs text-neutral-900", n), children: r || m }) })
+      ]
     }
   ) });
 };
 export {
-  U as Slider
+  jt as ProgressBar
 };