konsolpro-custom-ui 0.0.327

package/dist/lib/ui/time-picker.js

@@ -0,0 +1,130 @@
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import h from "react";
+import { X as g } from "../../chunks/uploader-BN38rjbw.js";
+import { Icon as N } from "../icon/icon.js";
+import "../icon-banks/icons-banks.js";
+import "../icon-documents/icons-document.js";
+import { c as x } from "../../chunks/utils-TbLXCoKm.js";
+import "./command.js";
+import "../../chunks/popover-kFSgc5Lv.js";
+import "./avatar.js";
+import "./card.js";
+import "./checkbox.js";
+import "../../chunks/combobox-primitive-context-B_ldR_VA.js";
+import "./combobox-primitive/components/combobox-container.js";
+import "./combobox-primitive/components/combobox-input.js";
+import "./combobox-primitive/components/combobox-item-renderer.js";
+import "./combobox-primitive/components/combobox-menu.js";
+import "./combobox-primitive/components/Item.js";
+import "./combobox-primitive/components/item-view.js";
+import "./combobox-primitive/components/list.js";
+import "./customizable-carousel.js";
+import "./date-range-picker/locales.js";
+import "./dialog/dialog-base/use-base-dialog.js";
+import "./link.js";
+import "./segments.js";
+import "./spinner.js";
+import "./switch.js";
+import "./tabs.js";
+import "./tag.js";
+import "./toaster.js";
+import "../../chunks/tooltip-BxRtZLBR.js";
+function I(r, t) {
+  return r === t ? "unchanged" : r.length > t.length ? "added" : r.length < t.length ? "removed" : "added";
+}
+function k(r, t) {
+  const e = r.replace(/\D/g, ""), n = t.replace(/\D/g, ""), i = I(r, t);
+  return e.length === 0 ? "" : i === "removed" && e.length === 2 && n.length === 3 ? `${e}:` : i === "removed" && e.length === 2 && n.length === 2 && t.includes(":") ? e[0] : i === "removed" && e.length === 1 ? e : i === "added" && e.length === 2 && n.length === 1 ? `${e}:` : e.length === 1 || e.length === 2 ? e : e.length <= 4 ? `${e.slice(0, 2)}:${e.slice(2)}` : `${e.slice(0, 2)}:${e.slice(2, 4)}`;
+}
+function w(r) {
+  if (!r)
+    return !0;
+  if (!/^(?:[01]?\d|2[0-3]):[0-5]?\d$/.test(r))
+    return !1;
+  const [e, n] = r.split(":").map(Number);
+  return e >= 0 && e <= 23 && n >= 0 && n <= 59;
+}
+function oe({
+  time: r,
+  onSelect: t,
+  disabled: e = !1,
+  placeholder: n = "00:00",
+  className: i,
+  size: a = "md",
+  error: o,
+  caption: b,
+  label: v,
+  onBlur: u,
+  "data-testid": y
+}) {
+  const [p, s] = h.useState(r || ""), l = h.useRef(r || "");
+  h.useEffect(() => {
+    s(r || ""), l.current = r || "";
+  }, [r]);
+  const T = (c) => {
+    const d = k(c.target.value, l.current);
+    s(d), l.current = d, d.length === 5 && w(d) ? t == null || t(d) : d === "" && (t == null || t(void 0));
+  }, $ = (c) => {
+    u == null || u(c), p && !w(p) && (s(""), t == null || t(void 0));
+  };
+  return /* @__PURE__ */ f("div", { className: x("w-full", i), children: [
+    v && /* @__PURE__ */ m(
+      g,
+      {
+        variant: "p3",
+        weight: "medium",
+        className: x("mb-1.5", {
+          "text-[14px]": a === "md",
+          "text-[16px]": a === "lg"
+        }),
+        children: v
+      }
+    ),
+    /* @__PURE__ */ f("div", { className: "relative flex w-full items-center", children: [
+      /* @__PURE__ */ m(
+        "input",
+        {
+          type: "text",
+          value: p,
+          onChange: T,
+          onBlur: $,
+          placeholder: n,
+          disabled: e,
+          maxLength: 5,
+          className: x(
+            "focus:shadow-focus font-graphik flex rounded-md py-1 focus:outline-none disabled:cursor-not-allowed",
+            a === "md" ? "rounded-lg" : "rounded-xl",
+            "border-1 focus:border-1",
+            "enabled:hover:border-1",
+            "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+            "bg-background placeholder:text-muted-foreground w-full pr-8",
+            {
+              "border-border enabled:hover:border-hover-input-primary focus:border-primary": o == null,
+              "border-destructive focus:border-destructive enabled:hover:border-destructive focus:shadow-error": o != null,
+              "h-8 px-2.5 pt-1.5 pb-1.5 text-[14px]": a === "md",
+              "h-10 px-3 pt-1.5 pb-1.5 text-[16px]": a === "lg",
+              "bg-muted text-muted-foreground placeholder:text-muted-foreground cursor-not-allowed": e
+            }
+          ),
+          "data-testid": y
+        }
+      ),
+      /* @__PURE__ */ f("div", { className: "pointer-events-none absolute right-3 flex items-center", children: [
+        /* @__PURE__ */ m(N, { icon: "TimeIcon", className: "text-muted-foreground" }),
+        o && /* @__PURE__ */ m(
+          N,
+          {
+            icon: "ErrorFillIcon",
+            className: "text-destructive ml-1.5",
+            size: 16
+          }
+        )
+      ] })
+    ] }),
+    b && !o && /* @__PURE__ */ m(g, { variant: "p1", className: "mt-1.5", textColor: "secondary", children: b }),
+    o && /* @__PURE__ */ m(g, { variant: "p1", className: "mt-1.5", textColor: "destructive", children: o })
+  ] });
+}
+export {
+  oe as TimePicker
+};

package/dist/lib/ui/time-range-picker.js

@@ -0,0 +1,198 @@
+import { jsxs as E, jsx as m } from "react/jsx-runtime";
+import p from "react";
+import { X as k } from "../../chunks/uploader-BN38rjbw.js";
+import { Icon as F } from "../icon/icon.js";
+import "../icon-banks/icons-banks.js";
+import "../icon-documents/icons-document.js";
+import { c as l } from "../../chunks/utils-TbLXCoKm.js";
+import "./command.js";
+import "../../chunks/popover-kFSgc5Lv.js";
+import "./avatar.js";
+import "./card.js";
+import "./checkbox.js";
+import "../../chunks/combobox-primitive-context-B_ldR_VA.js";
+import "./combobox-primitive/components/combobox-container.js";
+import "./combobox-primitive/components/combobox-input.js";
+import "./combobox-primitive/components/combobox-item-renderer.js";
+import "./combobox-primitive/components/combobox-menu.js";
+import "./combobox-primitive/components/Item.js";
+import "./combobox-primitive/components/item-view.js";
+import "./combobox-primitive/components/list.js";
+import "./customizable-carousel.js";
+import "./date-range-picker/locales.js";
+import "./dialog/dialog-base/use-base-dialog.js";
+import "./link.js";
+import "./segments.js";
+import "./spinner.js";
+import "./switch.js";
+import "./tabs.js";
+import "./tag.js";
+import "./toaster.js";
+import "../../chunks/tooltip-BxRtZLBR.js";
+function H(t, i) {
+  return t === i ? "unchanged" : t.length > i.length ? "added" : t.length < i.length ? "removed" : "added";
+}
+function Et({
+  value: t,
+  onTimeChange: i,
+  placeholder: $ = {
+    from: "00:00",
+    to: "00:00"
+  },
+  disabled: f = !1,
+  className: L,
+  size: s = "md",
+  error: n,
+  caption: A,
+  label: j,
+  onBlur: d,
+  "data-testid": I
+}) {
+  const [a, y] = p.useState((t == null ? void 0 : t.from) || ""), [h, N] = p.useState((t == null ? void 0 : t.to) || ""), R = p.useRef((t == null ? void 0 : t.from) || ""), T = p.useRef((t == null ? void 0 : t.to) || ""), _ = p.useMemo(() => {
+    const o = (w) => typeof w == "string", e = (w) => typeof w == "object" && w !== null;
+    return {
+      hasAnyError: () => n ? o(n) ? !0 : !!(n.from || n.to) : !1,
+      hasFromError: () => o(n) ? !0 : e(n) && !!n.from,
+      hasToError: () => o(n) ? !0 : e(n) && !!n.to,
+      getErrorText: () => o(n) ? n : e(n) ? n.from && n.to ? `${n.from}, ${n.to}` : n.from || n.to || "" : ""
+    };
+  }, [n]), { hasAnyError: u, hasFromError: M, hasToError: O, getErrorText: P } = _;
+  p.useEffect(() => {
+    y((t == null ? void 0 : t.from) || ""), N((t == null ? void 0 : t.to) || ""), R.current = (t == null ? void 0 : t.from) || "", T.current = (t == null ? void 0 : t.to) || "";
+  }, [t]);
+  const D = (o, e) => {
+    const r = o.replace(/\D/g, ""), c = e.replace(/\D/g, ""), g = H(o, e);
+    return r.length === 0 ? "" : g === "removed" && r.length === 2 && c.length === 3 ? `${r}:` : g === "removed" && r.length === 2 && c.length === 2 && e.includes(":") ? r[0] : g === "removed" && r.length === 1 ? r : g === "added" && r.length === 2 && c.length === 1 ? `${r}:` : r.length === 1 || r.length === 2 ? r : r.length <= 4 ? `${r.slice(0, 2)}:${r.slice(2)}` : `${r.slice(0, 2)}:${r.slice(2, 4)}`;
+  }, x = (o) => {
+    if (!o)
+      return !0;
+    if (!/^(?:[01]?\d|2[0-3]):[0-5]?\d$/.test(o))
+      return !1;
+    const [r, c] = o.split(":").map(Number);
+    return r >= 0 && r <= 23 && c >= 0 && c <= 59;
+  }, b = (o, e) => {
+    const r = {
+      from: o || void 0,
+      to: e || void 0
+    };
+    !r.from && !r.to ? i == null || i(void 0) : i == null || i(r);
+  }, S = (o) => {
+    const e = D(o.target.value, R.current);
+    y(e), R.current = e, (e === "" || e.length === 5 && x(e)) && b(e, h);
+  }, X = (o) => {
+    const e = D(o.target.value, T.current);
+    N(e), T.current = e, (e === "" || e.length === 5 && x(e)) && b(a, e);
+  }, q = (o) => {
+    d == null || d(o), a && !x(a) && (y(""), b("", h));
+  }, G = (o) => {
+    d == null || d(o), h && !x(h) && (N(""), b(a, ""));
+  };
+  return /* @__PURE__ */ E("div", { className: l("w-full", L), children: [
+    j && /* @__PURE__ */ m(
+      k,
+      {
+        variant: "p3",
+        weight: "medium",
+        className: l("mb-1.5", {
+          "text-[14px]": s === "md",
+          "text-[16px]": s === "lg"
+        }),
+        children: j
+      }
+    ),
+    /* @__PURE__ */ E("div", { className: "relative flex w-full items-center", children: [
+      /* @__PURE__ */ E(
+        "div",
+        {
+          className: l(
+            "font-graphik flex w-full items-center py-1 focus-within:outline-none",
+            s === "md" ? "rounded-lg" : "rounded-xl",
+            "border-1 focus-within:border-1",
+            "enabled:hover:border-1",
+            "bg-background w-full pr-10",
+            {
+              "border-border hover:border-hover-input-primary enabled:hover:border-primary focus-within:border-primary focus-within:shadow-focus": !u(),
+              "border-destructive focus-within:border-destructive enabled:hover:border-destructive focus:shadow-error": u(),
+              "h-8 px-2.5 pt-1.5 pr-2 pb-1.5 text-[14px]": s === "md",
+              "h-10 px-3 pt-2 pr-3 pb-2 text-[16px]": s === "lg",
+              "bg-muted text-muted-foreground cursor-not-allowed": f
+            }
+          ),
+          children: [
+            /* @__PURE__ */ m(
+              "input",
+              {
+                type: "text",
+                value: a,
+                onChange: S,
+                onBlur: q,
+                placeholder: $.from,
+                disabled: f,
+                maxLength: 5,
+                className: l(
+                  "font-graphik w-0 flex-1 border-none bg-transparent outline-none",
+                  "placeholder:text-muted-foreground",
+                  "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                  M() && "text-destructive",
+                  {
+                    "h-8 text-[14px]": s === "md",
+                    "h-10 text-[16px]": s === "lg",
+                    "text-muted-foreground cursor-not-allowed": f
+                  }
+                ),
+                "data-testid": I
+              }
+            ),
+            /* @__PURE__ */ m(
+              F,
+              {
+                icon: "ArrowForwardIcon",
+                className: "text-muted-foreground mx-1.5 flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ m(
+              "input",
+              {
+                type: "text",
+                value: h,
+                onChange: X,
+                onBlur: G,
+                placeholder: $.to,
+                disabled: f,
+                maxLength: 5,
+                className: l(
+                  "font-graphik w-0 flex-1 border-none bg-transparent outline-none",
+                  "placeholder:text-muted-foreground",
+                  "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                  O() && "text-destructive",
+                  {
+                    "h-8 text-[14px]": s === "md",
+                    "h-10 text-[16px]": s === "lg",
+                    "text-muted-foreground cursor-not-allowed": f
+                  }
+                ),
+                "data-testid": `${I}-to`
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ E("div", { className: "pointer-events-none absolute right-3 flex items-center", children: [
+        /* @__PURE__ */ m(F, { icon: "TimeIcon", className: "text-muted-foreground" }),
+        u() && /* @__PURE__ */ m(
+          F,
+          {
+            icon: "ErrorFillIcon",
+            className: "text-destructive ml-1.5",
+            size: 16
+          }
+        )
+      ] })
+    ] }),
+    A && !u() && /* @__PURE__ */ m(k, { variant: "p1", className: "mt-1.5", textColor: "secondary", children: A }),
+    u() && /* @__PURE__ */ m(k, { variant: "p1", className: "mt-1.5", textColor: "destructive", children: P() })
+  ] });
+}
+export {
+  Et as TimeRangePicker
+};

package/dist/lib/ui/timeline.js

@@ -0,0 +1,36 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { c as s } from "../../chunks/utils-TbLXCoKm.js";
+import { X as a } from "../../chunks/uploader-BN38rjbw.js";
+const h = ({ items: i, className: d }) => /* @__PURE__ */ r("div", { className: d, children: i.map((e, t) => /* @__PURE__ */ l("div", { className: "flex", children: [
+  /* @__PURE__ */ l("div", { className: "relative mr-4 flex flex-col items-center", children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: s(
+          "flex-shrink-0 rounded-full",
+          "h-2.5 w-2.5 border-2 bg-white",
+          e.active ? "border-primary" : "border-border"
+        )
+      }
+    ),
+    t < i.length - 1 && /* @__PURE__ */ r("div", { className: "border-border-timeline w-0 flex-1 border-l-2" })
+  ] }),
+  /* @__PURE__ */ r("div", { className: "-mt-[5px] flex-1 pb-4", children: /* @__PURE__ */ l("div", { className: "flex items-start justify-between", children: [
+    /* @__PURE__ */ l("div", { className: "flex-1", children: [
+      /* @__PURE__ */ r(
+        a,
+        {
+          variant: e.titleVariant,
+          weight: e.titleWeight,
+          children: e.title
+        }
+      ),
+      e.additionalText && /* @__PURE__ */ r(a, { textColor: "secondary", children: e.additionalText }),
+      e.subtitle && /* @__PURE__ */ r(a, { variant: e.subtitleVariant, children: e.subtitle })
+    ] }),
+    e.date && /* @__PURE__ */ r(a, { className: "text-right", children: e.date })
+  ] }) })
+] }, t)) });
+export {
+  h as Timeline
+};