@temp-spotwork/ui 1.4.3

package/dist/components/atoms/form/time-picker/time-picker-input.js

@@ -0,0 +1,248 @@
+import { jsxs as Q, jsx as M } from "react/jsx-runtime";
+import { forwardRef as W, useRef as X, useState as Y, useEffect as x, useCallback as z } from "react";
+import "../../../../purify.es-eYFoHPwR.js";
+import { styleMap as B } from "../../../styles/typography/style.js";
+import "../../../styles/colors/colormap.js";
+import { t as I } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Icons as O } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { outlinedBorder as L } from "../../../styles/defaults/defaults.js";
+import { m as c } from "../../../../index-CYyrKZeH.js";
+import { getLabelColor as ee, getBorderClasses as te } from "../utils-for-forms/state-functions.js";
+const pe = W(
+  ({
+    value: o,
+    error: v = !1,
+    warning: A = !1,
+    disabled: f = !1,
+    label: P,
+    isOpened: r,
+    focus: T,
+    onFocus: U,
+    onBlur: m,
+    setIsOpened: _,
+    selectValue: N,
+    onScrollToSelectedValue: E,
+    autoFocus: $ = !1,
+    step: R = 5,
+    min: p,
+    max: y,
+    timezone: i,
+    options: S
+  }, K) => {
+    const g = "__:__ __", V = X(null), [n, a] = Y(c(o).tz(i).format("hh:mm A")), Z = ee(r || T, A, v, f), q = te(T || r, A, v, f), F = f ? `bg-surface-disabled ${L.disabled}` : "", G = () => {
+      _(!0), r || setTimeout(() => {
+        var e;
+        (e = V.current) == null || e.select();
+      }, 0);
+    }, H = () => {
+      m == null || m();
+    };
+    x(() => {
+      r || a(c(o).tz(i).format("hh:mm A"));
+    }, [r, o]);
+    const j = z(
+      (e) => {
+        if (r)
+          try {
+            const t = c().utcOffset() - c().tz(i).utcOffset(), u = c(e.toUpperCase(), "hh:mm A").set("date", c(o).tz(i).date()).add(t, "minutes");
+            if (!u.isValid())
+              return;
+            const d = u.minutes(), b = Math.round(d / R) * R;
+            let l = u.toDate();
+            if (l.setMinutes(b), p && l < p || y && l > y) {
+              const k = c(p).tz(i), C = c(y).tz(i), h = c(l).tz(i), D = S.filter((w) => w instanceof Date).map((w) => c(w).tz(i).format("D/MM/yyyy hh:mm A Z")).find((w) => w.includes(e.split("_")[0]));
+              D ? l = c(D, "D/MM/yyyy hh:mm A Z").tz(i).toDate() : h.isBefore(k) ? l = k.toDate() : h.isAfter(C) && (l = C.toDate());
+            }
+            u.isValid() && !c(l).tz(i).isSame(c(o).tz(i), "minute") && (N(l), setTimeout(E, 0), e.includes("_") || a(c(l).tz(i).format("hh:mm A")));
+          } catch (t) {
+            console.error("Error in onAccept:", t);
+          }
+      },
+      [r, S, i, p, y, N, E, R, o]
+    );
+    x(() => {
+      j(n);
+    }, [n, r, S, i, p, y, j]);
+    const J = (e) => {
+      var h;
+      if (e.key === "Enter" || e.key === "Escape" || e.key === "Tab") {
+        a(c(o).tz(i).format("hh:mm A")), e.key === "Escape" && ((h = V.current) == null || h.blur(), e.target.selectionStart = 0, e.target.selectionEnd = 0, m == null || m(), _(!1));
+        return;
+      }
+      const t = e.target.selectionStart, u = e.target.selectionEnd, d = t === 0 && u === n.length && u !== 0, b = ["0", "1", "2", "4", "5", "7", "8", "9"];
+      if (e.key === "Backspace" || e.key === "Delete") {
+        if (e.preventDefault(), d) {
+          a(g), setTimeout(() => {
+            e.target.setSelectionRange(0, 0);
+          }, 0);
+          return;
+        }
+        if (b.includes(t.toString()) && t > 0) {
+          const s = n.slice(0, t - 1) + "_" + n.slice(t);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t - 1, t - 1);
+          }, 0);
+        }
+        if (t === 3) {
+          const s = n.slice(0, t - 2) + "_" + n.slice(t - 1);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t - 2, t - 2);
+          }, 0);
+        }
+        if (t === 6) {
+          const s = n.slice(0, t - 2) + "_" + n.slice(t - 1);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t - 2, t - 2);
+          }, 0);
+        }
+      }
+      const l = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+      if (d && l.includes(e.key)) {
+        if (e.preventDefault(), Number(e.key) > 1) {
+          const s = "0" + e.key + g.slice(2);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t + 3, t + 3);
+          }, 0);
+        } else {
+          const s = e.key + g.slice(1);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(1, 1);
+          }, 0);
+        }
+        return;
+      } else if (d) {
+        e.preventDefault(), a(g), setTimeout(() => {
+          e.target.setSelectionRange(0, 0);
+        }, 0);
+        return;
+      }
+      if (t === 0 && l.includes(e.key))
+        if (e.preventDefault(), Number(e.key) > 1) {
+          const s = "0" + e.key + n.slice(2);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t + 3, t + 3);
+          }, 0);
+        } else {
+          const s = n.slice(0, t) + e.key + n.slice(t + 1);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t + 1, t + 1);
+          }, 0);
+        }
+      if (t === 1 && l.includes(e.key)) {
+        e.preventDefault();
+        const s = n.slice(0, t) + e.key + n.slice(t + 1);
+        a(s), setTimeout(() => {
+          e.target.setSelectionRange(t + 1, t + 1);
+        }, 0);
+      }
+      if (t === 1 && e.key === ":") {
+        e.preventDefault();
+        const s = n[0];
+        if (!isNaN(Number(s))) {
+          const D = "0" + n.slice(0, t) + g.slice(2);
+          a(D), setTimeout(() => {
+            e.target.setSelectionRange(3, 3);
+          }, 0);
+        }
+      }
+      if (t === 2 && e.key === ":") {
+        e.preventDefault(), setTimeout(() => {
+          e.target.setSelectionRange(t + 1, t + 1);
+        }, 0);
+        return;
+      }
+      if (t === 2 && l.includes(e.key)) {
+        e.preventDefault();
+        const s = n.slice(0, t + 1) + e.key + n.slice(t + 2);
+        a(s), setTimeout(() => {
+          e.target.setSelectionRange(t + 2, t + 2);
+        }, 0);
+      }
+      if (t === 3 && l.includes(e.key))
+        if (e.preventDefault(), Number(e.key) > 5) {
+          const s = n.slice(0, t) + "5" + n.slice(t + 1);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t + 1, t + 1);
+          }, 0);
+        } else {
+          const s = n.slice(0, t) + e.key + n.slice(t + 1);
+          a(s), setTimeout(() => {
+            e.target.setSelectionRange(t + 1, t + 1);
+          }, 0);
+        }
+      if (t === 4 && l.includes(e.key)) {
+        e.preventDefault();
+        const s = n.slice(0, t) + e.key + n.slice(t + 1);
+        a(s), setTimeout(() => {
+          e.target.setSelectionRange(t + 1, t + 1);
+        }, 0);
+      }
+      const k = ["A", "P", "a", "p"];
+      if (t === 5 && k.includes(e.key)) {
+        e.preventDefault();
+        const s = n.slice(0, t + 1) + e.key.toUpperCase() + "M" + n.slice(t + 3);
+        a(s), setTimeout(() => {
+          e.target.setSelectionRange(t + 3, t + 3);
+        }, 0);
+      }
+      if (t === 5 && e.key === " " && (e.preventDefault(), setTimeout(() => {
+        e.target.setSelectionRange(t + 1, t + 1);
+      }, 0)), t === 6 && k.includes(e.key)) {
+        e.preventDefault();
+        const s = n.slice(0, t) + e.key.toUpperCase() + "M" + n.slice(t + 2);
+        a(s), setTimeout(() => {
+          e.target.setSelectionRange(t + 2, t + 2);
+        }, 0);
+      }
+      if (t === 7 && ["M", "m"].includes(e.key)) {
+        e.preventDefault();
+        const s = n.slice(0, t) + e.key.toUpperCase() + n.slice(t + 1);
+        a(s), setTimeout(() => {
+          e.target.setSelectionRange(t + 1, t + 1);
+        }, 0);
+      }
+    };
+    return /* @__PURE__ */ Q(
+      "button",
+      {
+        ref: K,
+        type: "button",
+        autoFocus: $,
+        className: I(
+          "px-md h-[4rem] w-full flex flex-row justify-between items-center gap-md",
+          q,
+          F
+        ),
+        onClick: G,
+        disabled: f,
+        children: [
+          /* @__PURE__ */ M(
+            "input",
+            {
+              ref: V,
+              type: "text",
+              maxLength: 8,
+              value: n,
+              onKeyDown: J,
+              readOnly: !r || f || !T,
+              onFocus: U,
+              onBlur: H,
+              className: I(
+                "reset-input",
+                `${L.none} ${B[5]} bg-transparent w-full`,
+                f ? "text-glyph-disabled" : ""
+              ),
+              placeholder: g
+            }
+          ),
+          /* @__PURE__ */ M("div", { children: /* @__PURE__ */ M(O, { id: `${P}-clock`, disabled: !0, icon: "Clock", color: Z }) })
+        ]
+      }
+    );
+  }
+);
+export {
+  pe as TimePickerInput
+};

package/dist/components/atoms/form/time-picker/time-picker.d.ts

@@ -0,0 +1,111 @@
+import { default as React } from 'react';
+
+/**
+ * A TimePicker component that allows users to select a time using either a dropdown or direct input.
+ * The component supports both 12-hour format input and a dropdown selection interface.
+ *
+ * @example
+ * ```tsx
+ * const [time, setTime] = useState(new Date());
+ *
+ * <TimePicker
+ *   value={time}
+ *   selectValue={setTime}
+ *   label="Select Time"
+ *   helperText="Choose your preferred time"
+ * />
+ * ```
+ */
+export type TimePickerProps = {
+    /**
+     * Indicates whether the time picker is in an error state.
+     * When true, the component will display error styling.
+     */
+    error?: boolean;
+    /**
+     * Indicates whether the time picker is in a warning state.
+     * When true, the component will display warning styling.
+     */
+    warning?: boolean;
+    /**
+     * Disables the time picker when true.
+     * Prevents user interaction and displays disabled styling.
+     */
+    disabled?: boolean;
+    /**
+     * The currently selected time value.
+     * Must be a valid Date object.
+     */
+    value: Date;
+    /**
+     * Callback function to update the selected time.
+     * Receives the new Date value as an argument.
+     */
+    selectValue: React.Dispatch<React.SetStateAction<Date>>;
+    /**
+     * The timezone of the time picker.
+     * Must be a valid timezone string.
+     */
+    timezone?: string;
+    /**
+     * Optional label text displayed above the time picker.
+     */
+    label?: string;
+    /**
+     * Optional helper text displayed below the time picker.
+     * Can be used for additional context or validation messages.
+     */
+    helperText?: string;
+    /**
+     * The time increment step in minutes.
+     * Defaults to 5 minutes.
+     * @default 5
+     */
+    step?: number;
+    /**
+     * Callback function triggered when the time picker loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * When true, the time picker input will automatically receive focus on mount.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * The minimum allowed time value.
+     * Times before this value will be disabled in the dropdown.
+     * @default startOfDay(new Date())
+     */
+    min?: Date;
+    /**
+     * The maximum allowed time value.
+     * Times after this value will be disabled in the dropdown.
+     * @default endOfDay(addDays(new Date(), 1))
+     */
+    max?: Date;
+    /**
+     * Controls the display format of day separators in the time dropdown.
+     * Day separators appear when the time range spans multiple days.
+     *
+     * - "literal": Shows "Previous Day" and "Next Day" labels
+     * - "date": Shows actual dates (e.g., "Jan 15, 2024", "Jan 16, 2024")
+     * @default "literal"
+     */
+    daySeparatorFormat?: 'literal' | 'date';
+    /**
+     * Optional reference date used for computing relative time differences.
+     */
+    dateToCompare?: Date;
+    /**
+     * Optional flag to not render the time difference (+X hours) in the dropdown when we have a dateToCompare.
+     * When true, the time difference will not be rendered.
+     * for specific use cases where we don't want to render the time difference.
+     * @default false
+     */
+    notRenderTimeDifference?: boolean;
+    /**
+     * Optional className to apply to the time picker container.
+     */
+    className?: string;
+};
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/form/time-picker/time-picker.js

@@ -0,0 +1,126 @@
+import { jsxs as A, jsx as S } from "react/jsx-runtime";
+import K, { useState as Y, useEffect as P, useRef as x, useMemo as Q } from "react";
+import { Typography as U } from "../../../styles/typography/typography.js";
+import { getLabelColor as W, getHelperTextColor as X } from "../utils-for-forms/state-functions.js";
+import { FormHelperText as Z } from "../form-helper-text/form-helper-text.js";
+import { TimePickerInput as B } from "./time-picker-input.js";
+import { TimePickerDropdown as b } from "./time-picker-dropdown.js";
+import { m as n } from "../../../../index-CYyrKZeH.js";
+import { t as ee } from "../../../../bundle-mjs-CAy1p0fn.js";
+const fe = K.forwardRef(
+  ({
+    value: c,
+    selectValue: O,
+    timezone: E,
+    error: f = !1,
+    warning: m = !1,
+    disabled: h = !1,
+    helperText: k,
+    label: u,
+    onBlur: y,
+    step: i = 5,
+    autoFocus: L = !1,
+    min: s = n().startOf("day").toDate(),
+    max: l = n().endOf("day").toDate(),
+    dateToCompare: p,
+    daySeparatorFormat: z = "literal",
+    notRenderTimeDifference: N = !1,
+    className: _
+  }, j) => {
+    const [d, D] = Y(!1), [a, v] = Y(c), [C, I] = Y(!1);
+    P(() => {
+      v(c);
+    }, [c]);
+    const T = x(null), R = x(null), o = E || n.tz.guess();
+    P(() => {
+      const t = (r) => {
+        d && T.current && !T.current.contains(r.target) && (D(!1), O(a));
+      };
+      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+    }, [d, a, O]);
+    const H = W(d || C, m, f, h), $ = X(m, f, h), F = (t) => {
+      O(t), D(!1);
+    }, q = () => {
+      var t;
+      (t = R.current) == null || t.scrollToSelectedValue();
+    }, V = Q(() => {
+      const t = p ? n.tz(p, o) : null, r = n.tz(c, o), G = s ? n.tz(s, o) : r.startOf("day"), w = l ? n.tz(l, o) : r.endOf("day");
+      let e = G;
+      if (s) {
+        const g = e.minutes() % i;
+        if (g !== 0) {
+          const J = i - g;
+          e = e.add(J, "minutes");
+        }
+      }
+      const M = /* @__PURE__ */ new Set([]);
+      for (; e <= w; )
+        e.isSame(t || r, "day") && !e.isSame(s) && e.hours() === 0 && e.minutes() === 0 && M.add(
+          z === "literal" ? "Previous Day" : `${n.tz(e, o).format("MMM D, YYYY")}`
+        ), !e.isSame(t || r, "day") && e.isBefore(w) && e.isAfter(t || r) && M.add(
+          z === "literal" ? "Next Day" : `${n.tz(e, o).format("MMM D, YYYY")}`
+        ), e.isSameOrBefore(w) && M.add(e.toDate()), e = n(e).tz(o).add(i, "minutes");
+      return Array.from(M);
+    }, [c, i, s, l, p, z, o]);
+    return /* @__PURE__ */ A("div", { className: ee("w-[13.5rem]", _), children: [
+      u && /* @__PURE__ */ S(U, { swStyle: 3, color: H, children: u }),
+      /* @__PURE__ */ A("div", { className: "relative", ref: T, id: a.toISOString() + Math.random(), children: [
+        /* @__PURE__ */ S(
+          B,
+          {
+            ref: j,
+            value: a,
+            options: V,
+            selectValue: v,
+            error: f,
+            warning: m,
+            disabled: h,
+            label: u,
+            isOpened: d,
+            focus: C,
+            onFocus: () => I(!0),
+            onBlur: () => {
+              I(!1), y == null || y();
+            },
+            setIsOpened: D,
+            autoFocus: L,
+            step: i,
+            onScrollToSelectedValue: q,
+            min: s,
+            max: l,
+            timezone: o
+          }
+        ),
+        /* @__PURE__ */ S(
+          b,
+          {
+            ref: R,
+            isOpened: d,
+            value: a,
+            timezone: o,
+            onOptionClick: F,
+            dateToCompare: p,
+            notRenderTimeDifference: N,
+            label: u,
+            min: s,
+            max: l,
+            step: i,
+            options: V
+          }
+        )
+      ] }),
+      k && /* @__PURE__ */ S(
+        Z,
+        {
+          helperText: k,
+          warning: m,
+          error: f,
+          helperTextAndIconColor: $
+        }
+      )
+    ] });
+  }
+);
+export {
+  fe as TimePicker
+};

package/dist/components/atoms/form/time-picker/time-picker.stories.d.ts

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TimePicker } from './time-picker';
+
+declare const meta: Meta<typeof TimePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Basic: Story;
+export declare const WithLabel: Story;
+export declare const WithHelperText: Story;
+export declare const Error: Story;
+export declare const Warning: Story;
+export declare const Disabled: Story;
+export declare const CustomStep: Story;
+export declare const WithTimeConstraints: Story;
+export declare const WithTimezone: Story;
+export declare const WithDateComparison: Story;
+export declare const WithDateSeparators: Story;
+export declare const WithoutTimeDifference: Story;
+export declare const AutoFocus: Story;
+export declare const CustomStyling: Story;
+export declare const EarlyMorning: Story;
+export declare const LateEvening: Story;
+export declare const EarlyMorningWithDateToCompareAndMin: Story;
+export declare const Midnight: Story;
+export declare const MidnightPlus1Hour: Story;
+export declare const MidnightMinus1Hour: Story;
+export declare const MidnightMinus1HourAnd18HoursMaxUpperBound: Story;
+export declare const Noon: Story;
+export declare const FifteenMinutesStep: Story;