@simpli-route/apollo-ds 0.1.35 → 0.1.37

package/dist/index.es15.js

@@ -1,94 +1,177 @@
-import { j as r } from "./index.es31.js";
-import { NumberField as w, Group as B, Input as E } from "react-aria-components";
-import { cn as t } from "./index.es32.js";
-import "./index.es10.js";
-import { Label as G } from "./index.es11.js";
-import { CaptionNumberField as S } from "./index.es58.js";
-import { StepperButton as V } from "./index.es59.js";
-import { inputNumberVariant as _ } from "./index.es38.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,
+import { j as o } from "./index.es36.js";
+import { Time as O } from "@internationalized/date";
+import { useRef as j, useState as P, useCallback as u, useEffect as N } from "react";
+import { Popover as $, ListBox as S, ListBoxItem as k } from "react-aria-components";
+import { cn as h } from "./index.es37.js";
+import { Button as I } from "./index.es5.js";
+function U(L) {
+  const { isOpen: i, onOpenChange: c, value: r, onChange: x, hourCycle: a = 12, containerRef: v, confirmButtonLabel: K } = L, y = j(null), b = j(null), g = j(null), [l, w] = P((r == null ? void 0 : r.hour) ?? 0), [m, A] = P((r == null ? void 0 : r.minute) ?? 0), R = Array.from({ length: a === 12 ? 12 : 24 }, (e, t) => a === 12 ? t + 1 : t), E = Array.from({ length: 60 }, (e, t) => t), d = a === 12 ? l === 0 ? 12 : l > 12 ? l - 12 : l : l, T = l >= 12 ? "PM" : "AM", [f, C] = P(T), M = u(() => {
+    const e = new O(l, m, 0);
+    x == null || x(e), c == null || c(!1);
+  }, [l, m, x, c]), p = u(() => {
+    c == null || c(!1);
+  }, [c]);
+  N(() => {
+    if (i) {
+      w((r == null ? void 0 : r.hour) ?? 0), A((r == null ? void 0 : r.minute) ?? 0);
+      const e = ((r == null ? void 0 : r.hour) ?? 0) >= 12 ? "PM" : "AM";
+      C(e);
+    }
+  }, [i, r]), N(() => {
+    i && setTimeout(() => {
+      if (y.current && b.current) {
+        const e = y.current.querySelector(`[data-key="${d}"]`), t = b.current.querySelector(`[data-key="${m}"]`);
+        e == null || e.scrollIntoView({ block: "center", behavior: "smooth" }), t == null || t.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+      if (g.current && a === 12) {
+        const e = g.current.querySelector(`[data-key="${f}"]`);
+        e == null || e.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }, 50);
+  }, [i, d, m, f, a]), N(() => {
+    const e = (t) => {
+      i && t.key === "Enter" && (t.preventDefault(), M()), i && t.key === "Escape" && (t.preventDefault(), p());
+    };
+    return i && document.addEventListener("keydown", e), () => {
+      document.removeEventListener("keydown", e);
+    };
+  }, [i, M, p]);
+  const V = u(
+    (e) => {
+      let t = e;
+      if (a === 12) {
+        const n = f === "PM";
+        e === 12 ? t = n ? 12 : 0 : t = n ? e + 12 : e;
+      }
+      w(t);
+    },
+    [a, f]
+  ), B = u((e) => {
+    A(e);
+  }, []), q = u(
+    (e) => {
+      C(e);
+      let t = l;
+      const n = e === "PM", s = d;
+      s === 12 ? t = n ? 12 : 0 : t = n ? s + 12 : s, w(t);
+    },
+    [l, d]
+  ), D = u(
+    (e) => {
+      e || p();
+    },
+    [p]
+  );
+  return /* @__PURE__ */ o.jsx(
+    $,
     {
-      autoFocus: F,
-      className: t(e ? "opacity-70" : "", C),
-      isDisabled: e,
-      isReadOnly: l,
-      maxValue: v,
-      minValue: b,
-      ...I,
-      children: [
-        /* @__PURE__ */ r.jsx(
-          G,
-          {
-            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__ */ r.jsxs(B, { className: "relative mb-0.5 w-full rounded", children: [
-          /* @__PURE__ */ r.jsx(
-            E,
+      isOpen: i,
+      triggerRef: v,
+      placement: "bottom start",
+      className: "overflow-hidden rounded bg-white ring-1 ring-black/10",
+      style: {
+        boxShadow: "0px 1px 2px 0px #22242A0F, 0px 1px 3px 0px #22242A1A"
+      },
+      shouldCloseOnInteractOutside: () => !0,
+      onOpenChange: D,
+      children: /* @__PURE__ */ o.jsxs("div", { className: h("flex flex-col", a === 12 ? "w-[180px]" : "w-[140px]"), children: [
+        /* @__PURE__ */ o.jsxs("div", { className: "flex h-[180px] divide-x divide-neutral-200", children: [
+          /* @__PURE__ */ o.jsx("div", { className: "flex-1", children: /* @__PURE__ */ o.jsx(
+            S,
+            {
+              ref: y,
+              "aria-label": "Hours",
+              selectionMode: "single",
+              selectedKeys: /* @__PURE__ */ new Set([String(d)]),
+              className: "custom-scrollbar h-full overflow-y-auto p-1 outline-none",
+              onSelectionChange: (e) => {
+                const t = Array.from(e)[0];
+                t && V(Number(t));
+              },
+              children: R.map((e) => /* @__PURE__ */ o.jsx(
+                k,
+                {
+                  id: String(e),
+                  textValue: String(e).padStart(2, "0"),
+                  className: ({ isSelected: t, isFocused: n, isHovered: s }) => h(
+                    "my-0.5 cursor-pointer rounded px-2 py-1.5 text-center text-sm outline-none transition-colors",
+                    t && "bg-primary-50 font-semibold text-primary-600",
+                    !t && n && "bg-neutral-100",
+                    !t && s && "bg-neutral-50",
+                    !t && !n && !s && "text-neutral-700"
+                  ),
+                  children: String(e).padStart(2, "0")
+                },
+                e
+              ))
+            }
+          ) }),
+          /* @__PURE__ */ o.jsx("div", { className: "flex-1", children: /* @__PURE__ */ o.jsx(
+            S,
             {
-              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
-              )
+              ref: b,
+              "aria-label": "Minutes",
+              selectionMode: "single",
+              selectedKeys: /* @__PURE__ */ new Set([String(m)]),
+              className: "custom-scrollbar h-full overflow-y-auto p-1 outline-none",
+              onSelectionChange: (e) => {
+                const t = Array.from(e)[0];
+                t && B(Number(t));
+              },
+              children: E.map((e) => /* @__PURE__ */ o.jsx(
+                k,
+                {
+                  id: String(e),
+                  textValue: String(e).padStart(2, "0"),
+                  className: ({ isSelected: t, isFocused: n, isHovered: s }) => h(
+                    "my-0.5 cursor-pointer rounded px-2 py-1.5 text-center text-sm outline-none transition-colors",
+                    t && "bg-primary-50 font-semibold text-primary-600",
+                    !t && n && "bg-neutral-100",
+                    !t && s && "bg-neutral-50",
+                    !t && !n && !s && "text-neutral-700"
+                  ),
+                  children: String(e).padStart(2, "0")
+                },
+                e
+              ))
             }
-          ),
-          /* @__PURE__ */ r.jsx(V, { isDisabled: e })
+          ) }),
+          a === 12 && /* @__PURE__ */ o.jsx("div", { className: "w-14", children: /* @__PURE__ */ o.jsx(
+            S,
+            {
+              ref: g,
+              "aria-label": "Period",
+              selectionMode: "single",
+              selectedKeys: /* @__PURE__ */ new Set([f]),
+              className: "custom-scrollbar h-full overflow-y-auto p-1 outline-none",
+              onSelectionChange: (e) => {
+                const t = Array.from(e)[0];
+                t && q(t);
+              },
+              children: ["AM", "PM"].map((e) => /* @__PURE__ */ o.jsx(
+                k,
+                {
+                  id: e,
+                  textValue: e,
+                  className: ({ isSelected: t, isFocused: n, isHovered: s }) => h(
+                    "my-0.5 cursor-pointer rounded px-1 py-1.5 text-center text-sm outline-none transition-colors",
+                    t && "bg-primary-50 font-semibold text-primary-600",
+                    !t && n && "bg-neutral-100",
+                    !t && s && "bg-neutral-50",
+                    !t && !n && !s && "text-neutral-700"
+                  ),
+                  children: e
+                },
+                e
+              ))
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ r.jsx(
-          S,
-          {
-            description: s,
-            descriptionClasses: c,
-            errorMessage: n,
-            errorClasses: N,
-            isInvalidField: a
-          }
-        )
-      ]
+        /* @__PURE__ */ o.jsx("div", { className: "border-t border-neutral-200 p-2", children: /* @__PURE__ */ o.jsx(I, { fullWidth: !0, intent: "tertiary", size: "sm", onPress: M, children: K }) })
+      ] })
     }
-  ) });
-};
+  );
+}
 export {
-  K as NumberField
+  U as TimePickerPopover
 };