@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

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

@@ -1,59 +1,102 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useRef as c, useEffect as p, useCallback as f } from "react";
-import { cn as o } 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: n, scrollBehavior: a }) => {
-  const l = c(null), u = c(n), { onSelectMinute: s } = k();
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as m, useEffect as p, useCallback as b } from "react";
+import { cn as c } from "../../../../utils/index.js";
+import { buttonVariants as h, liVariants as M, ulVariants as S } from "../../TimePicker.variants.js";
+import { useTimePickerContext as D } from "../../contexts/time-picker.hook.js";
+const $ = ({
+  minutes: o,
+  scrollBehavior: u,
+  onClose: l
+}) => {
+  const a = m(null), y = m(o), { isTyping: f, onSelectMinute: n } = D();
   p(() => {
-    const t = l.current;
+    const t = a.current;
     if (t) {
-      const e = `0${u.current}`.slice(-2);
+      const e = `0${y.current}`.slice(-2);
       t.querySelector(
         `[data-value="${e}"]`
       )?.scrollIntoView({
-        behavior: a,
+        behavior: u,
         block: "center"
       });
     }
-  }, [a]);
-  const m = f(
+  }, [u]), p(() => {
+    if (!f) return;
+    const t = a.current;
+    if (t) {
+      const e = `0${o}`.slice(-2);
+      t.querySelector(
+        `[data-value="${e}"]`
+      )?.scrollIntoView({
+        behavior: "instant",
+        block: "center"
+      });
+    }
+  }, [o, f]);
+  const d = b(
+    (t, e) => {
+      n(t), e.currentTarget?.blur();
+    },
+    [n]
+  ), k = b(
     (t, e) => {
-      s(t), e.currentTarget?.blur();
+      const i = a.current?.querySelectorAll("button");
+      if (!i) return;
+      let r = e;
+      if (t.key === "ArrowDown" || t.key === "Tab" && !t.shiftKey)
+        t.preventDefault(), r = (e + 1) % 60;
+      else if (t.key === "ArrowUp" || t.key === "Tab" && t.shiftKey)
+        t.preventDefault(), r = (e - 1 + 60) % 60;
+      else if (t.key === "Enter") {
+        if (t.preventDefault(), n(e), l) {
+          l();
+          return;
+        }
+        document.querySelector('[aria-label="meridian"]')?.querySelector(
+          'li[data-active="true"] button'
+        )?.focus();
+        return;
+      }
+      r !== e && i[r]?.focus();
     },
-    [s]
+    [n, l]
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(
     "ul",
     {
-      ref: l,
-      className: o(d()),
+      ref: a,
+      className: c(S()),
       "aria-label": "minutes",
       role: "listbox",
-      children: Array.from({ length: 60 }, (t, e) => /* @__PURE__ */ r(
-        "li",
-        {
-          className: o(h()),
-          "data-value": `0${e}`.slice(-2),
-          "data-active": n === e,
-          role: "presentation",
-          children: /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              className: o(b()),
-              onClick: (i) => m(e, i),
-              children: `0${e}`.slice(-2)
-            }
-          )
-        },
-        e
-      ))
+      children: Array.from({ length: 60 }, (t, e) => {
+        const i = o === e;
+        return /* @__PURE__ */ s(
+          "li",
+          {
+            className: c(M()),
+            "data-value": `0${e}`.slice(-2),
+            "data-active": i,
+            role: "presentation",
+            children: /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                tabIndex: i ? 0 : -1,
+                className: c(h()),
+                onClick: (r) => d(e, r),
+                onKeyDown: (r) => k(r, e),
+                children: `0${e}`.slice(-2)
+              }
+            )
+          },
+          e
+        );
+      })
     }
   );
 };
-y.displayName = "MinutesList";
+$.displayName = "MinutesList";
 export {
-  y as MinutesList
+  $ as MinutesList
 };

package/dist/components/TimePicker/components/MinutesList/MinutesList.types.d.ts

@@ -0,0 +1,9 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type MinutesLitProps = {
+    minutes: number;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

package/dist/components/TimePicker/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WrapperProps } from './Wrapper.types';
+export declare const Wrapper: FC<WrapperProps>;

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

@@ -1,88 +1,228 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { useId as N, useState as y, useRef as E, useCallback as O, useEffect as I } from "react";
-import { cn as m } from "../../../../utils/index.js";
-import { timePickerVariants as L } from "../../TimePicker.variants.js";
-import { WrapperList as j } from "../WrapperList/WrapperList.js";
-import { C as P } from "../../../../chevron-down-MZvQoT2F.js";
-import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
-const V = ({
-  name: d,
-  label: i,
-  required: p,
-  scrollBehavior: f,
-  className: u,
-  listClassName: x,
-  listItemClassName: h,
-  listItemButtonClassName: w
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { useId as Y, useState as I, useRef as N, useEffect as A, useCallback as f } from "react";
+import { Typography as T } from "../../../Typography/Typography.js";
+import { cn as $ } from "../../../../utils/index.js";
+import { timePickerVariants as Z } from "../../TimePicker.variants.js";
+import { parseTimeString as D } from "../../utils/index.js";
+import { WrapperList as _ } from "../WrapperList/WrapperList.js";
+import { C as ee } from "../../../../chevron-down-BBFYYzZq.js";
+import { useTimePickerContext as te } from "../../contexts/time-picker.hook.js";
+const pe = ({
+  name: O,
+  label: M,
+  isRequired: R,
+  scrollBehavior: V,
+  className: F,
+  listClassName: W,
+  listItemClassName: j,
+  listItemButtonClassName: B,
+  disabled: n,
+  mode: E = "select",
+  showList: w = !0,
+  error: H,
+  placeholder: L
 }) => {
-  const b = N(), [n, r] = y(!1), l = E(null), { format: g, formattedTime: c } = R(), s = d ?? `time-${b}`, k = O(() => r((e) => !e), []);
-  return I(() => {
-    const e = new AbortController(), v = (o) => {
-      o.key === "Escape" && r(!1);
-    }, C = (o) => {
-      l.current?.contains(o.target) || r(!1);
+  const K = Y(), [g, o] = I(!1), h = N(!1), C = N(null), P = N(null), { format: s, formattedTime: d, setTimeDirectly: x, setIsTyping: l } = te(), v = O ?? `time-${K}`, [b, k] = I(d), [U, i] = I(), y = H || U;
+  A(() => {
+    h.current || (k(d), i(void 0));
+  }, [d]);
+  const q = f(() => {
+    n || o((t) => !t);
+  }, [n]), z = f(() => {
+    !n && w && o(!0), i(void 0);
+  }, [n, w]), G = f(
+    (t) => {
+      t.target !== P.current && (h.current = !1, l(!1));
+    },
+    [l]
+  ), J = f(
+    (t) => {
+      if (C.current?.contains(t.relatedTarget))
+        return;
+      h.current = !1, l(!1), o(!1);
+      const a = t.currentTarget.value.trim();
+      if (a === "") {
+        i(void 0);
+        return;
+      }
+      const e = D(a, s);
+      if (e) {
+        i(void 0), x(e);
+        const r = e.getHours(), p = e.getMinutes().toString().padStart(2, "0");
+        if (s === "24")
+          k(`${r.toString().padStart(2, "0")}:${p}`);
+        else {
+          const u = r % 12 || 12, S = r >= 12 ? "PM" : "AM";
+          k(`${u}:${p} ${S}`);
+        }
+      } else
+        i("Invalid time");
+    },
+    [s, x, l]
+  ), Q = f(
+    (t) => {
+      const a = t.target.value;
+      let e = "";
+      h.current = !0, l(!0);
+      const r = a.length < b.length;
+      if (s === "12") {
+        const u = a.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, (X) => X.toUpperCase());
+        u.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || u === "" ? (e = u.slice(0, 8), !r && /^\d{2}$/.test(e) && (e = e + ":")) : e = b;
+      } else
+        e = a.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !r && /^\d{2}$/.test(e) && (e = e + ":");
+      k(e), i(void 0);
+      const p = D(e, s);
+      p && x(p);
+    },
+    [s, b, x, l]
+  );
+  return A(() => {
+    const t = new AbortController(), a = (r) => {
+      r.key === "Escape" && o(!1);
+    }, e = (r) => {
+      C.current?.contains(r.target) || o(!1);
     };
-    return document.addEventListener("mousedown", C, {
-      signal: e.signal
-    }), document.addEventListener("keydown", v, {
-      signal: e.signal
+    return document.addEventListener("mousedown", e, {
+      signal: t.signal
+    }), document.addEventListener("keydown", a, {
+      signal: t.signal
     }), () => {
-      e.abort();
+      t.abort();
     };
-  }, []), /* @__PURE__ */ t(
+  }, []), /* @__PURE__ */ m(
     "div",
     {
-      ref: l,
-      className: m(
-        "w-max text-slate-800 text-sm flex flex-col gap-2",
-        g === "12" ? "w-[208px]" : "w-[140px]"
+      ref: C,
+      onMouseDown: E === "input" ? G : void 0,
+      className: $(
+        "w-full",
+        "text-slate-800",
+        "text-sm",
+        "flex",
+        "flex-col",
+        "gap-2"
       ),
       children: [
-        i ? /* @__PURE__ */ t("label", { htmlFor: s, className: "text-slate-500 font-medium", children: [
-          i,
-          " ",
-          p && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
-        ] }) : null,
-        /* @__PURE__ */ t("div", { className: "relative", children: [
-          /* @__PURE__ */ t(
+        M ? /* @__PURE__ */ m(
+          T,
+          {
+            component: "label",
+            variant: "labelLarge",
+            htmlFor: v,
+            className: "font-medium",
+            children: [
+              M,
+              " ",
+              R && /* @__PURE__ */ c(
+                T,
+                {
+                  component: "span",
+                  className: "text-red-600 dark:text-red-500 text-sm font-normal",
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ m("div", { className: "relative", children: [
+          E === "select" ? /* @__PURE__ */ m(
             "button",
             {
-              "aria-label": s,
+              "aria-label": v,
               "aria-haspopup": "listbox",
               "aria-expanded": "true",
               "aria-controls": "time-options",
-              className: m(L({ className: u })),
-              "data-open": n,
-              onClick: k,
+              className: $(
+                Z({ className: F }),
+                n && "opacity-50 cursor-not-allowed"
+              ),
+              "data-open": g,
+              onClick: q,
+              disabled: n,
               children: [
-                c,
-                /* @__PURE__ */ a(
-                  P,
+                d,
+                /* @__PURE__ */ c(
+                  ee,
                   {
                     className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
-                    "data-open": n
+                    "data-open": g
                   }
                 )
               ]
             }
-          ),
-          /* @__PURE__ */ a(
-            j,
+          ) : /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ c(
+              "input",
+              {
+                ref: P,
+                type: "text",
+                "aria-label": v,
+                value: b,
+                onChange: Q,
+                onFocus: z,
+                onBlur: J,
+                disabled: n,
+                "data-error": !!y,
+                "data-open": g,
+                placeholder: L,
+                className: $(
+                  "w-full",
+                  "h-10",
+                  "px-2.5",
+                  "text-sm",
+                  "rounded",
+                  "border",
+                  "border-gray-300",
+                  "bg-white",
+                  "text-slate-800",
+                  "transition-all",
+                  "placeholder:text-slate-400",
+                  "focus-visible:outline-none",
+                  "data-[open=true]:ring-1",
+                  "data-[open=true]:ring-aurora-500",
+                  "dark:bg-metal-800",
+                  "dark:border-metal-700",
+                  "dark:text-white",
+                  "dark:placeholder:text-metal-300",
+                  "dark:data-[open=true]:ring-aurora-500",
+                  "disabled:cursor-not-allowed",
+                  "disabled:bg-gray-50",
+                  "disabled:text-slate-500",
+                  "dark:disabled:bg-metal-900",
+                  "dark:disabled:text-metal-400",
+                  {
+                    "border-red-600 data-[open=true]:border-red-600 data-[open=true]:ring-transparent dark:border-red-500": y
+                  }
+                )
+              }
+            ),
+            y && /* @__PURE__ */ c(
+              T,
+              {
+                component: "span",
+                className: "text-red-600 dark:text-red-500 text-xs",
+                children: y
+              }
+            )
+          ] }),
+          w && /* @__PURE__ */ c(
+            _,
             {
-              isOpen: n,
-              scrollBehavior: f,
-              listClassName: x,
-              listItemClassName: h,
-              listItemButtonClassName: w
+              isOpen: g,
+              scrollBehavior: V,
+              listClassName: W,
+              listItemClassName: j,
+              listItemButtonClassName: B,
+              onClose: () => o(!1)
             }
           )
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ c(
           "input",
           {
             type: "hidden",
-            name: s,
-            value: c,
+            name: v,
+            value: d,
             className: "hidden"
           }
         )
@@ -91,5 +231,5 @@ const V = ({
   );
 };
 export {
-  V as Wrapper
+  pe as Wrapper
 };

package/dist/components/TimePicker/components/Wrapper/Wrapper.types.d.ts

@@ -0,0 +1,6 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type WrapperProps = Omit<TimePickerProps, 'format' | 'time' | 'onChange'> & {
+    mode?: 'select' | 'input';
+    showList?: boolean;
+    error?: string;
+};

package/dist/components/TimePicker/components/WrapperList/WrapperList.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WrapperListProps } from './WrapperList.types';
+export declare const WrapperList: FC<WrapperListProps>;

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

@@ -1,51 +1,78 @@
-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,
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { cn as x } from "../../../../utils/index.js";
+import { getHours as g, getMinutes as a } from "../../utils/index.js";
+import { HoursList as b } from "../HoursList/HoursList.js";
+import { MeridianList as M } from "../MeridianList/MeridianList.js";
+import { MinutesList as h } from "../MinutesList/MinutesList.js";
+import { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
+const W = ({
+  isOpen: p,
+  scrollBehavior: m,
   listClassName: o,
-  listItemClassName: i,
-  listItemButtonClassName: t
+  listItemClassName: e,
+  listItemButtonClassName: i,
+  onClose: n
 }) => {
-  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;
+  const { time: r, format: u } = k(), f = d(() => g(r), [r]), c = d(() => a(r), [r]);
+  return p ? /* @__PURE__ */ s(
+    "div",
+    {
+      role: "group",
+      className: x(
+        "flex",
+        "gap-1.5",
+        "p-2",
+        "rounded-md",
+        "shadow",
+        "w-max",
+        "max-h-54",
+        "absolute",
+        "bg-white",
+        "z-20",
+        "animate-in",
+        "fade-in-0",
+        "zoom-in-95",
+        "dark:bg-metal-800",
+        "dark:border",
+        "dark:border-metal-700",
+        "mt-1"
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          b,
+          {
+            hours: f,
+            scrollBehavior: m,
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          h,
+          {
+            minutes: c,
+            scrollBehavior: m,
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i,
+            onClose: u === "24" ? n : void 0
+          }
+        ),
+        /* @__PURE__ */ t(
+          M,
+          {
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i,
+            onClose: n
+          }
+        )
+      ]
+    }
+  ) : null;
 };
 export {
-  v as WrapperList
+  W as WrapperList
 };

package/dist/components/TimePicker/components/WrapperList/WrapperList.types.d.ts

@@ -0,0 +1,9 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type WrapperListProps = {
+    isOpen: boolean;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

package/dist/components/TimePicker/components/index.d.ts

@@ -0,0 +1 @@
+export * from './WrapperList/WrapperList';

package/dist/components/TimePicker/contexts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './time-picker.context';
+export * from './time-picker.provider';
+export * from './time-picker.hook';

package/dist/components/TimePicker/contexts/time-picker.context.d.ts

@@ -0,0 +1,15 @@
+import { TimePickerProps } from '../TimePicker.types';
+export type TimePickerContextType = {
+    time: Date | undefined;
+    format: NonNullable<TimePickerProps['format']>;
+    formattedTime: string;
+    isAM: boolean;
+    isTyping: boolean;
+    onSelectHour: (hour: number) => void;
+    onSelectMinute: (minute: number) => void;
+    onSelectAM: () => void;
+    onSelectPM: () => void;
+    setTimeDirectly: (time: Date) => void;
+    setIsTyping: (value: boolean) => void;
+};
+export declare const TimePickerContext: import('react').Context<TimePickerContextType>;

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

@@ -1,9 +1,10 @@
 import { createContext as e } from "react";
 const o = e({
-  time: /* @__PURE__ */ new Date(),
+  time: void 0,
   format: "12",
   formattedTime: "",
   isAM: !1,
+  isTyping: !1,
   onSelectHour() {
     throw new Error("onSelectHour is not implemented");
   },
@@ -15,6 +16,12 @@ const o = e({
   },
   onSelectPM() {
     throw new Error("onSelectPM is not implemented");
+  },
+  setTimeDirectly() {
+    throw new Error("setTimeDirectly is not implemented");
+  },
+  setIsTyping() {
+    throw new Error("setIsTyping is not implemented");
   }
 });
 export {

package/dist/components/TimePicker/contexts/time-picker.hook.d.ts

@@ -0,0 +1,2 @@
+import { TimePickerContextType } from './time-picker.context';
+export declare const useTimePickerContext: () => TimePickerContextType;

package/dist/components/TimePicker/contexts/time-picker.provider.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { TimePickerProps } from '../TimePicker.types';
+export declare const TimePickerProvider: FC<PropsWithChildren & {
+    time?: Date;
+    format: NonNullable<TimePickerProps['format']>;
+    onChange?: (time: Date) => void;
+}>;