@konstructio/ui 0.0.13-alpha.1 → 0.1.0-alpha.10

package/dist/components/TimePicker/components/HoursList/HoursList.js

@@ -0,0 +1,93 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as p, useCallback as v, useEffect as y } from "react";
+import { cn as o } from "../../../../utils/index.js";
+import { buttonVariants as b, liVariants as d, ulVariants as h } from "../../TimePicker.variants.js";
+import { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
+const H = ({ hours: l, scrollBehavior: i }) => {
+  const n = p(null), u = p(!0), { format: c, onSelectHour: m } = k(), s = c === "12" && l >= 12 ? l - 12 : l, f = v(
+    (r, e) => {
+      var t;
+      (t = r.currentTarget) == null || t.blur(), m(e);
+    },
+    [m]
+  );
+  if (y(() => {
+    if (u.current) {
+      const r = n.current, e = s === 0 && c === "12" ? 12 : s;
+      if (r) {
+        const t = r.querySelector(
+          `[data-value="${`0${e}`.slice(-2)}"]`
+        );
+        t == null || t.scrollIntoView({
+          behavior: i,
+          block: "center"
+        });
+      }
+      u.current = !1;
+    }
+  }, [c, s, i]), c === "12") {
+    const r = s === 0 ? 12 : s;
+    return /* @__PURE__ */ a(
+      "ul",
+      {
+        ref: n,
+        className: o(h()),
+        "aria-label": "hours",
+        role: "listbox",
+        children: Array.from({ length: 12 }, (e, t) => /* @__PURE__ */ a(
+          "li",
+          {
+            className: o(d()),
+            "data-value": `0${t + 1}`.slice(-2),
+            "data-active": r - 1 === t,
+            role: "presentation",
+            children: /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                className: o(b()),
+                onClick: (N) => f(N, t + 1),
+                children: t + 1
+              }
+            )
+          },
+          t
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ a(
+    "ul",
+    {
+      ref: n,
+      className: o(h()),
+      "aria-label": "hours",
+      role: "listbox",
+      children: Array.from({ length: 24 }, (r, e) => /* @__PURE__ */ a(
+        "li",
+        {
+          className: o(d()),
+          "data-value": `0${e}`.slice(-2),
+          "data-active": l === e,
+          role: "presentation",
+          children: /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              className: o(b()),
+              onClick: (t) => f(t, e),
+              children: e
+            }
+          )
+        },
+        e
+      ))
+    }
+  );
+};
+H.displayName = "HoursList";
+export {
+  H as HoursList
+};

package/dist/components/TimePicker/components/MeridianList/MeridianList.js

@@ -0,0 +1,68 @@
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { useCallback as N } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { buttonVariants as c, liVariants as s } from "../../TimePicker.variants.js";
+import { useTimePickerContext as x } from "../../contexts/time-picker.hook.js";
+const M = ({
+  listClassName: m,
+  listItemClassName: a,
+  listItemButtonClassName: i
+}) => {
+  const { format: p, isAM: l, onSelectAM: u, onSelectPM: d } = x(), o = N(
+    (e, f) => {
+      var n;
+      (n = e.currentTarget) == null || n.blur(), f();
+    },
+    []
+  );
+  return p === "24" ? null : /* @__PURE__ */ b(
+    "ul",
+    {
+      className: t("flex items-center justify-center flex-col", m),
+      "aria-label": "meridian",
+      role: "listbox",
+      children: [
+        /* @__PURE__ */ r(
+          "li",
+          {
+            className: t(s({ className: a })),
+            "data-active": l,
+            role: "presentation",
+            children: /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                className: t(c({ className: i })),
+                onClick: (e) => o(e, u),
+                children: "AM"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          "li",
+          {
+            className: t(s({ className: a })),
+            "data-active": !l,
+            role: "presentation",
+            children: /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                className: t(c({ className: i })),
+                onClick: (e) => o(e, d),
+                children: "PM"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+M.displayName = "MeridianList";
+export {
+  M as MeridianList
+};

package/dist/components/TimePicker/components/MinutesList/MinutesList.js

@@ -0,0 +1,60 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as i, useEffect as p, useCallback as f } from "react";
+import { cn as n } from "../../../../utils/index.js";
+import { buttonVariants as b, liVariants as h, ulVariants as d } from "../../TimePicker.variants.js";
+import { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
+const y = ({ minutes: a, scrollBehavior: l }) => {
+  const s = i(null), u = i(a), { onSelectMinute: c } = k();
+  p(() => {
+    const r = s.current;
+    if (r) {
+      const e = `0${u.current}`.slice(-2), t = r.querySelector(
+        `[data-value="${e}"]`
+      );
+      t == null || t.scrollIntoView({
+        behavior: l,
+        block: "center"
+      });
+    }
+  }, [l]);
+  const m = f(
+    (r, e) => {
+      var t;
+      c(r), (t = e.currentTarget) == null || t.blur();
+    },
+    [c]
+  );
+  return /* @__PURE__ */ o(
+    "ul",
+    {
+      ref: s,
+      className: n(d()),
+      "aria-label": "minutes",
+      role: "listbox",
+      children: Array.from({ length: 60 }, (r, e) => /* @__PURE__ */ o(
+        "li",
+        {
+          className: n(h()),
+          "data-value": `0${e}`.slice(-2),
+          "data-active": a === e,
+          role: "presentation",
+          children: /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              className: n(b()),
+              onClick: (t) => m(e, t),
+              children: `0${e}`.slice(-2)
+            }
+          )
+        },
+        e
+      ))
+    }
+  );
+};
+y.displayName = "MinutesList";
+export {
+  y as MinutesList
+};

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -0,0 +1,96 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { useId as y, useState as E, useRef as O, useCallback as I, useEffect as L } from "react";
+import { cn as d } from "../../../../utils/index.js";
+import { timePickerVariants as j } from "../../TimePicker.variants.js";
+import { WrapperList as P } from "../WrapperList/WrapperList.js";
+import { C as R } from "../../../../chevron-down-UW8ts6wI.js";
+import { useTimePickerContext as T } from "../../contexts/time-picker.hook.js";
+const $ = ({
+  name: p,
+  label: i,
+  required: f,
+  scrollBehavior: u,
+  className: x,
+  listClassName: h,
+  listItemClassName: w,
+  listItemButtonClassName: b
+}) => {
+  const g = y(), [n, r] = E(!1), l = O(null), { format: k, formattedTime: c } = T(), s = p ?? `time-${g}`, v = I(() => r((e) => !e), []);
+  return L(() => {
+    const e = new AbortController(), C = (o) => {
+      o.key === "Escape" && r(!1);
+    }, N = (o) => {
+      var m;
+      (m = l.current) != null && m.contains(o.target) || r(!1);
+    };
+    return document.addEventListener("mousedown", N, {
+      signal: e.signal
+    }), document.addEventListener("keydown", C, {
+      signal: e.signal
+    }), () => {
+      e.abort();
+    };
+  }, []), /* @__PURE__ */ t(
+    "div",
+    {
+      ref: l,
+      className: d(
+        "w-max text-slate-800 text-sm flex flex-col gap-2",
+        k === "12" ? "w-[208px]" : "w-[140px]"
+      ),
+      children: [
+        i ? /* @__PURE__ */ t("label", { htmlFor: s, className: "text-slate-500 font-medium", children: [
+          i,
+          " ",
+          f && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
+        ] }) : null,
+        /* @__PURE__ */ t("div", { className: "relative", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              "aria-label": s,
+              "aria-haspopup": "listbox",
+              "aria-expanded": "true",
+              "aria-controls": "time-options",
+              className: d(j({ className: x })),
+              "data-open": n,
+              onClick: v,
+              children: [
+                c,
+                /* @__PURE__ */ a(
+                  R,
+                  {
+                    className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
+                    "data-open": n
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            P,
+            {
+              isOpen: n,
+              scrollBehavior: u,
+              listClassName: h,
+              listItemClassName: w,
+              listItemButtonClassName: b
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            type: "hidden",
+            name: s,
+            value: c,
+            className: "hidden"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  $ as Wrapper
+};

package/dist/components/TimePicker/components/WrapperList/WrapperList.js

@@ -0,0 +1,51 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { cn as s } from "../../../../utils/index.js";
+import { getHours as d, getMinutes as M } from "../../utils/index.js";
+import { HoursList as x } from "../HoursList/HoursList.js";
+import { MeridianList as L } from "../MeridianList/MeridianList.js";
+import { MinutesList as g } from "../MinutesList/MinutesList.js";
+import { wrapperVariants as H } from "./WrapperList.variants.js";
+import { useTimePickerContext as j } from "../../contexts/time-picker.hook.js";
+const v = ({
+  isOpen: m,
+  scrollBehavior: p,
+  listClassName: o,
+  listItemClassName: i,
+  listItemButtonClassName: t
+}) => {
+  const { time: r } = j(), u = n(() => d(r), [r]), f = n(() => M(r), [r]);
+  return m ? /* @__PURE__ */ c("div", { role: "group", className: s(H()), children: [
+    /* @__PURE__ */ e(
+      x,
+      {
+        hours: u,
+        scrollBehavior: p,
+        listClassName: o,
+        listItemClassName: i,
+        listItemButtonClassName: t
+      }
+    ),
+    /* @__PURE__ */ e(
+      g,
+      {
+        minutes: f,
+        scrollBehavior: p,
+        listClassName: o,
+        listItemClassName: i,
+        listItemButtonClassName: t
+      }
+    ),
+    /* @__PURE__ */ e(
+      L,
+      {
+        listClassName: o,
+        listItemClassName: i,
+        listItemButtonClassName: t
+      }
+    )
+  ] }) : null;
+};
+export {
+  v as WrapperList
+};

package/dist/components/TimePicker/components/WrapperList/WrapperList.variants.js

@@ -0,0 +1,16 @@
+import { c as a } from "../../../../index-BNmRGtA6.js";
+const p = a([
+  "flex",
+  "gap-1.5",
+  "p-2",
+  "rounded-md",
+  "shadow",
+  "w-full",
+  "max-h-[216px]",
+  "absolute mt-1",
+  "bg-white",
+  "z-10"
+]);
+export {
+  p as wrapperVariants
+};

package/dist/components/TimePicker/components/index.js

@@ -0,0 +1,4 @@
+import { WrapperList as e } from "./WrapperList/WrapperList.js";
+export {
+  e as WrapperList
+};

package/dist/components/TimePicker/contexts/index.js

@@ -0,0 +1,8 @@
+import { TimePickerContext as o } from "./time-picker.context.js";
+import { TimePickerProvider as t } from "./time-picker.provider.js";
+import { useTimePickerContext as x } from "./time-picker.hook.js";
+export {
+  o as TimePickerContext,
+  t as TimePickerProvider,
+  x as useTimePickerContext
+};

package/dist/components/TimePicker/contexts/time-picker.context.js

@@ -0,0 +1,22 @@
+import { createContext as e } from "react";
+const o = e({
+  time: /* @__PURE__ */ new Date(),
+  format: "12",
+  formattedTime: "",
+  isAM: !1,
+  onSelectHour() {
+    throw new Error("onSelectHour is not implemented");
+  },
+  onSelectMinute() {
+    throw new Error("onSelectMinute is not implemented");
+  },
+  onSelectAM() {
+    throw new Error("onSelectAM is not implemented");
+  },
+  onSelectPM() {
+    throw new Error("onSelectPM is not implemented");
+  }
+});
+export {
+  o as TimePickerContext
+};

package/dist/components/TimePicker/contexts/time-picker.hook.js

@@ -0,0 +1,13 @@
+import { useContext as t } from "react";
+import { TimePickerContext as r } from "./time-picker.context.js";
+const n = () => {
+  const e = t(r);
+  if (!e)
+    throw new Error(
+      "useTimePickerContext must be used within a TimePickerProvider"
+    );
+  return e;
+};
+export {
+  n as useTimePickerContext
+};

package/dist/components/TimePicker/contexts/time-picker.provider.js

@@ -0,0 +1,46 @@
+import { jsx as S } from "react/jsx-runtime";
+import { useState as i, useMemo as T, useCallback as c, useEffect as d } from "react";
+import { getFormattedTime as P } from "../utils/index.js";
+import { TimePickerContext as p } from "./time-picker.context.js";
+const x = ({ children: m, time: u, format: a }) => {
+  const [n, l] = i(a), [t, r] = i(() => u ?? /* @__PURE__ */ new Date()), s = T(() => t.getHours() < 12, [t]), f = c(
+    (e) => {
+      const o = new Date(t);
+      n === "12" ? e === 12 ? o.setHours(s ? 0 : 12) : o.setHours(s ? e : e + 12) : o.setHours(e), r(o);
+    },
+    [n, s, t]
+  ), H = c(
+    (e) => {
+      const o = new Date(t);
+      o.setMinutes(e), r(o);
+    },
+    [t]
+  ), w = c(() => {
+    const e = new Date(t), o = e.getHours();
+    s || e.setHours(o - 12), r(e);
+  }, [s, t]), M = c(() => {
+    const e = new Date(t), o = e.getHours();
+    s && e.setHours(o + 12), r(e);
+  }, [s, t]);
+  return d(() => {
+    l(n);
+  }, [n]), /* @__PURE__ */ S(
+    p.Provider,
+    {
+      value: {
+        time: t,
+        format: n,
+        formattedTime: P(t, n),
+        isAM: s,
+        onSelectHour: f,
+        onSelectMinute: H,
+        onSelectAM: w,
+        onSelectPM: M
+      },
+      children: m
+    }
+  );
+};
+export {
+  x as TimePickerProvider
+};

package/dist/components/TimePicker/utils/index.js

@@ -0,0 +1,6 @@
+const e = (t, r) => r === "12" ? `${t.getHours() % 12 || 12}:${t.getMinutes().toString().padStart(2, "0")} ${t.getHours() >= 12 ? "PM" : "AM"}` : `${t.getHours().toString().padStart(2, "0")}:${t.getMinutes().toString().padStart(2, "0")}`, n = (t) => t.getHours(), g = (t) => t.getMinutes();
+export {
+  e as getFormattedTime,
+  n as getHours,
+  g as getMinutes
+};