@konstructio/ui 0.1.2-alpha.52 → 0.1.2-alpha.53

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

@@ -1,61 +1,120 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { useId as N, useState as E, useRef as L, useCallback as O, useEffect as I } from "react";
-import { Typography as c } from "../../../Typography/Typography.js";
-import { cn as d } from "../../../../utils/index.js";
-import { timePickerVariants as T } from "../../TimePicker.variants.js";
-import { WrapperList as j } from "../WrapperList/WrapperList.js";
-import { C as P } from "../../../../chevron-down-DgT-uSF9.js";
-import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
-const q = ({
-  name: p,
-  label: i,
-  isRequired: f,
-  scrollBehavior: u,
-  className: h,
-  listClassName: x,
-  listItemClassName: w,
-  listItemButtonClassName: b
+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 g = N(), [n, r] = E(!1), l = L(null), { format: k, formattedTime: m } = R(), o = p ?? `time-${g}`, v = O(() => r((e) => !e), []);
-  return I(() => {
-    const e = new AbortController(), y = (s) => {
-      s.key === "Escape" && r(!1);
-    }, C = (s) => {
-      l.current?.contains(s.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", y, {
-      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: d(
-        "w-max",
+      ref: C,
+      onMouseDown: E === "input" ? G : void 0,
+      className: $(
+        "w-full",
         "text-slate-800",
         "text-sm",
         "flex",
         "flex-col",
-        "gap-2",
-        k === "12" ? "w-53 min-w-53" : "w-36 min-w-36"
+        "gap-2"
       ),
       children: [
-        i ? /* @__PURE__ */ t(
-          c,
+        M ? /* @__PURE__ */ m(
+          T,
           {
             component: "label",
             variant: "labelLarge",
-            htmlFor: o,
+            htmlFor: v,
             className: "font-medium",
             children: [
-              i,
+              M,
               " ",
-              f && /* @__PURE__ */ a(
-                c,
+              R && /* @__PURE__ */ c(
+                T,
                 {
                   component: "span",
                   className: "text-red-600 dark:text-red-500 text-sm font-normal",
@@ -65,46 +124,105 @@ const q = ({
             ]
           }
         ) : null,
-        /* @__PURE__ */ t("div", { className: "relative", children: [
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ m("div", { className: "relative", children: [
+          E === "select" ? /* @__PURE__ */ m(
             "button",
             {
-              "aria-label": o,
+              "aria-label": v,
               "aria-haspopup": "listbox",
               "aria-expanded": "true",
               "aria-controls": "time-options",
-              className: d(T({ className: h })),
-              "data-open": n,
-              onClick: v,
+              className: $(
+                Z({ className: F }),
+                n && "opacity-50 cursor-not-allowed"
+              ),
+              "data-open": g,
+              onClick: q,
+              disabled: n,
               children: [
-                m,
-                /* @__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: u,
-              listClassName: x,
-              listItemClassName: w,
-              listItemButtonClassName: b
+              isOpen: g,
+              scrollBehavior: V,
+              listClassName: W,
+              listItemClassName: j,
+              listItemButtonClassName: B,
+              onClose: () => o(!1)
             }
           )
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ c(
           "input",
           {
             type: "hidden",
-            name: o,
-            value: m,
+            name: v,
+            value: d,
             className: "hidden"
           }
         )
@@ -113,5 +231,5 @@ const q = ({
   );
 };
 export {
-  q 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,31 +1,48 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { cn as c } from "../../../../utils/index.js";
-import { getHours as s, getMinutes as x } from "../../utils/index.js";
-import { HoursList as g } from "../HoursList/HoursList.js";
-import { MeridianList as b } from "../MeridianList/MeridianList.js";
-import { MinutesList as M } from "../MinutesList/MinutesList.js";
-import { useTimePickerContext as h } from "../../contexts/time-picker.hook.js";
-const T = ({
-  isOpen: d,
+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: e,
-  listItemButtonClassName: i
+  listItemButtonClassName: i,
+  onClose: n
 }) => {
-  const { time: r } = h(), p = n(() => s(r), [r]), u = n(() => x(r), [r]);
-  return d ? /* @__PURE__ */ f(
+  const { time: r, format: u } = k(), f = d(() => g(r), [r]), c = d(() => a(r), [r]);
+  return p ? /* @__PURE__ */ s(
     "div",
     {
       role: "group",
-      className: c(
-        "flex gap-1.5 p-2 rounded-md shadow w-full max-h-[216px] absolute mt-1 bg-white z-10 animate-in fade-in-0 zoom-in-95 dark:bg-metal-800 dark:border dark:border-metal-700"
+      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(
-          g,
+          b,
           {
-            hours: p,
+            hours: f,
             scrollBehavior: m,
             listClassName: o,
             listItemClassName: e,
@@ -33,21 +50,23 @@ const T = ({
           }
         ),
         /* @__PURE__ */ t(
-          M,
+          h,
           {
-            minutes: u,
+            minutes: c,
             scrollBehavior: m,
             listClassName: o,
             listItemClassName: e,
-            listItemButtonClassName: i
+            listItemButtonClassName: i,
+            onClose: u === "24" ? n : void 0
           }
         ),
         /* @__PURE__ */ t(
-          b,
+          M,
           {
             listClassName: o,
             listItemClassName: e,
-            listItemButtonClassName: i
+            listItemButtonClassName: i,
+            onClose: n
           }
         )
       ]
@@ -55,5 +74,5 @@ const T = ({
   ) : null;
 };
 export {
-  T 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;
+}>;

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

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

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

@@ -0,0 +1,8 @@
+export declare const getFormattedTime: (time: Date, format: "12" | "24") => string;
+export declare const getHours: (time: Date | undefined) => number;
+export declare const getMinutes: (time: Date | undefined) => number;
+/**
+ * Parses a time string and returns a Date object.
+ * Supports formats: "HH:MM", "H:MM", "H:M", "HH:MM AM/PM", "H:MM AM/PM", "H:M AM/PM"
+ */
+export declare const parseTimeString: (value: string, format: "12" | "24") => Date | null;

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

@@ -1,6 +1,31 @@
-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();
+const i = (t, o) => o === "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")}`, c = (t) => t?.getHours() ?? -1, g = (t) => t?.getMinutes() ?? -1, p = (t, o) => {
+  const u = t.trim().toUpperCase();
+  if (o === "12") {
+    const r = u.match(/^(\d{1,2}):(\d{1,2})\s*(AM|PM)?$/i);
+    if (r) {
+      let e = parseInt(r[1], 10);
+      const n = parseInt(r[2], 10), s = r[3]?.toUpperCase();
+      if (e < 1 || e > 12 || n < 0 || n > 59)
+        return null;
+      s === "PM" && e !== 12 ? e += 12 : s === "AM" && e === 12 && (e = 0);
+      const a = /* @__PURE__ */ new Date();
+      return a.setHours(e, n, 0, 0), a;
+    }
+  } else {
+    const r = u.match(/^(\d{1,2}):(\d{1,2})$/);
+    if (r) {
+      const e = parseInt(r[1], 10), n = parseInt(r[2], 10);
+      if (e < 0 || e > 23 || n < 0 || n > 59)
+        return null;
+      const s = /* @__PURE__ */ new Date();
+      return s.setHours(e, n, 0, 0), s;
+    }
+  }
+  return null;
+};
 export {
-  e as getFormattedTime,
-  n as getHours,
-  g as getMinutes
+  i as getFormattedTime,
+  c as getHours,
+  g as getMinutes,
+  p as parseTimeString
 };

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { ToastProps } from './Toast.types';
+/**
+ * A toast notification component built on Radix UI primitives.
+ * Wraps a trigger element and shows a toast when clicked.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Toast
+ *   open={open}
+ *   setOpen={setOpen}
+ *   title="Saved"
+ *   description="Your changes have been saved successfully"
+ *   variant="success"
+ *   duration={3000}
+ * >
+ *   <Button>Save Changes</Button>
+ * </Toast>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-toast--docs Storybook}
+ */
+export declare const Toast: FC<ToastProps>;