@temp-spotwork/ui 1.4.3

package/dist/components/atoms/form/dateselect/date-month-year-switch.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+
+export type DateMonthYearSwitchProps = {
+    /**
+     * Current month in format 'yyyy-MM'
+     */
+    currentMonth: string;
+    /**
+     * Current date value
+     */
+    value: string | Date;
+    /**
+     * Minimum date allowed
+     */
+    min: Date;
+    /**
+     * Maximum date allowed
+     */
+    max: Date;
+    /**
+     * Callback when onChange is triggered
+     */
+    onChange: React.Dispatch<React.SetStateAction<string | Date>>;
+    /**
+     * Callback to update current month
+     */
+    onMonthChange: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * Callback to close the month/year switch
+     */
+    onClose: () => void;
+    /**
+     * The timezone of the date selector.
+     * Must be a valid timezone string.
+     */
+    timezone: string;
+};
+export declare const DateMonthYearSwitch: React.FC<DateMonthYearSwitchProps>;

package/dist/components/atoms/form/dateselect/date-month-year-switch.js

@@ -0,0 +1,67 @@
+import { jsxs as e, Fragment as a, jsx as r } from "react/jsx-runtime";
+import { Icons as n } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as f } from "../../../styles/typography/typography.js";
+import { MonthSwitch as h } from "./month-switch.js";
+import { YearSwitch as y } from "./year-switch.js";
+import { m as p } from "../../../../index-CYyrKZeH.js";
+const j = ({
+  currentMonth: t,
+  value: o,
+  min: i,
+  max: m,
+  onChange: s,
+  onMonthChange: l,
+  onClose: c,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  timezone: d
+}) => /* @__PURE__ */ e(a, { children: [
+  /* @__PURE__ */ e("div", { className: "h-[3rem] flex items-center w-full relative", children: [
+    /* @__PURE__ */ r(
+      f,
+      {
+        swStyle: 5,
+        children: p(t, "yyyy-MM").format("MMMM yyyy"),
+        className: "w-full text-center"
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "absolute right-0 top-0", children: /* @__PURE__ */ r(
+      n,
+      {
+        disabled: !1,
+        button: !0,
+        handleClick: c,
+        icon: "Cross",
+        color: "active"
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "flex justify-evenly min-w-[30rem]", children: [
+    /* @__PURE__ */ r(
+      h,
+      {
+        onChange: s,
+        currMonth: t,
+        setCurrMonth: l,
+        value: o,
+        min: i,
+        max: m
+      }
+    ),
+    /* @__PURE__ */ r(
+      y,
+      {
+        onChange: s,
+        currMonth: t,
+        setCurrMonth: l,
+        value: o,
+        min: i,
+        max: m
+      }
+    )
+  ] })
+] });
+export {
+  j as DateMonthYearSwitch
+};

package/dist/components/atoms/form/dateselect/dateselect.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+
+export type DateselectProps = {
+    /**
+     * the variable for the label string
+     */
+    label?: string;
+    /**
+     * the variable for the hint string
+     */
+    helperText?: string;
+    /**
+     * the date to display the calendar
+     */
+    value: string | Date;
+    /**
+     * setState to control the state of the date to display the calendar
+     */
+    onChange: React.Dispatch<React.SetStateAction<string | Date>>;
+    /**
+     * The timezone of the date selector.
+     * Must be a valid timezone string.
+     */
+    timezone?: string;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * error state for the component
+     */
+    error?: boolean;
+    /**
+     * warning state for the component
+     */
+    warning?: boolean;
+    /**
+     * disabled state for the component
+     */
+    disabled?: boolean;
+    /**
+     * min date can be selected
+     */
+    min?: Date;
+    /**
+     * max date can be selected
+     */
+    max?: Date;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+    /**
+     * position of the dropdown component
+     */
+    isDropdownRightAligned?: boolean;
+    /**
+     * optional className for the component
+     */
+    className?: string;
+};
+export declare const Dateselect: React.ForwardRefExoticComponent<DateselectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/form/dateselect/dateselect.js

@@ -0,0 +1,164 @@
+import { jsxs as z, jsx as f } from "react/jsx-runtime";
+import l, { useState as Y } from "react";
+import { Icons as W } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { getStyles as X } from "./styles.js";
+import { t as k } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { m as n } from "../../../../index-CYyrKZeH.js";
+import { Typography as A } from "../../../styles/typography/typography.js";
+import { getLabelColor as Z, getInnerIconColor as tt, getBorderClasses as et, getHelperTextColor as ot } from "../utils-for-forms/state-functions.js";
+import { FormHelperText as nt } from "../form-helper-text/form-helper-text.js";
+import { DateInput as rt } from "./date-input.js";
+import { DateDropdown as st } from "./date-dropdown.js";
+import { s as at } from "../../../../startOfToday-BPMZZniU.js";
+import { a as L } from "../../../../addYears-D3POA9ql.js";
+import { f as b } from "../../../../format-BwmhcciO.js";
+const zt = l.forwardRef(
+  ({
+    label: R,
+    helperText: v,
+    value: r,
+    onChange: u,
+    timezone: j,
+    onBlur: M,
+    error: i = !1,
+    warning: m = !1,
+    disabled: e = !1,
+    autoFocus: F = !1,
+    min: h = L(/* @__PURE__ */ new Date(), -5),
+    max: d = L(/* @__PURE__ */ new Date(), 5),
+    isDropdownRightAligned: H,
+    className: I
+  }, V) => {
+    console.log("value", r);
+    const D = l.useRef(null), C = l.useRef(null), [s, c] = Y(!1), [_, w] = Y(!1), [p, g] = Y(!1), o = j || n.tz.guess(), T = (t) => {
+      D.current && !D.current.contains(t.target) && (s || p) && (g(!1), c(!1), w(!1), M == null || M());
+    };
+    l.useEffect(() => (document.addEventListener("mousedown", T), () => {
+      document.removeEventListener("mousedown", T);
+    }), [s, p]), l.useEffect(() => {
+      s && C.current && C.current.select();
+    }, [s]);
+    const x = X(), K = Z(p, m, i, e), $ = ot(m, i, e), E = et(p, m, i, e), N = tt(p, m, i, e), q = at(), [O, y] = l.useState(() => r ? n(r).tz(o).format("yyyy-MM") : n(q).tz(o).format("yyyy-MM")), B = () => {
+      const a = n.tz(O, o).clone().subtract(1, "month");
+      y(b(a.toDate(), "yyyy-MM"));
+    }, G = () => {
+      const a = n.tz(O, o).clone().add(1, "month");
+      y(b(a.toDate(), "yyyy-MM"));
+    }, P = (t) => {
+      const a = n(t), J = a.year(), Q = a.month(), U = a.date(), S = n(r).tz(o).year(J).month(Q).date(U).toDate();
+      if (S < h) {
+        u(h);
+        return;
+      }
+      if (S > d) {
+        u(d);
+        return;
+      }
+      u(S);
+    };
+    return /* @__PURE__ */ z("div", { ref: D, className: k("w-[15.5rem]", I), children: [
+      R && /* @__PURE__ */ f(A, { swStyle: 3, color: K, children: R }),
+      /* @__PURE__ */ z(
+        "div",
+        {
+          className: "relative",
+          onKeyDown: (t) => {
+            t.key === "Escape" && c(!1);
+          },
+          onFocus: () => {
+            g(!0);
+          },
+          onBlur: () => {
+            c(!1);
+          },
+          children: [
+            s ? /* @__PURE__ */ f(
+              rt,
+              {
+                inputRef: C,
+                value: r,
+                min: h,
+                max: d,
+                disabled: e,
+                onDateChange: P,
+                onCloseDropdown: () => c(!1),
+                onMonthChange: y,
+                borderClasses: E,
+                containerClasses: x.container,
+                iconColor: N,
+                className: I,
+                timezone: o
+              }
+            ) : /* @__PURE__ */ z(
+              "button",
+              {
+                autoFocus: F,
+                type: "button",
+                ref: V,
+                className: k(
+                  `${s ? "hidden" : ""}`,
+                  x.container,
+                  E,
+                  e ? "cursor-not-allowed bg-surface-disabled" : ""
+                ),
+                onClick: (t) => {
+                  t.stopPropagation(), c(!0);
+                },
+                onBlur: (t) => {
+                  g(!1), t.stopPropagation();
+                },
+                disabled: e,
+                children: [
+                  /* @__PURE__ */ f(
+                    A,
+                    {
+                      swStyle: 5,
+                      children: n(r).tz(o).format("MM/DD/YYYY"),
+                      color: e ? "disabled" : "default"
+                    }
+                  ),
+                  /* @__PURE__ */ f(W, { disabled: !0, icon: "Calendar", color: N })
+                ]
+              }
+            ),
+            /* @__PURE__ */ f(
+              st,
+              {
+                isOpen: s,
+                isMonthYearSwitchOpen: _,
+                currentMonth: O,
+                value: r,
+                min: h,
+                max: d,
+                isDropdownRightAligned: H,
+                onDateChange: P,
+                onCloseDropdown: () => c(!1),
+                onMonthChange: y,
+                onToggleMonthYearSwitch: () => w(!0),
+                onCloseMonthYearSwitch: () => w(!1),
+                onPreviousMonth: B,
+                onNextMonth: G,
+                onChange: u,
+                timezone: o
+              }
+            )
+          ]
+        }
+      ),
+      v && /* @__PURE__ */ f(
+        nt,
+        {
+          helperText: v,
+          warning: m,
+          error: i,
+          helperTextAndIconColor: $
+        }
+      )
+    ] });
+  }
+);
+export {
+  zt as Dateselect
+};

package/dist/components/atoms/form/dateselect/helpers.d.ts

@@ -0,0 +1,36 @@
+export declare const formatShortMonthYear: (shortDate: string) => string;
+export declare const parseShortMonthYear: (dateString: any) => Date;
+export declare const formatDateToMonthYear: (date: any) => string;
+/**
+ * Generates an array of the first day of each month within the specified date interval.
+ * This version minimizes reliance on the Date class for cross-browser compatibility (e.g. Safari).
+ *
+ * @param {Object} interval - The start and end of the interval.
+ * @param {Date} interval.start - The start date of the interval.
+ * @param {Date} interval.end - The end date of the interval.
+ * @returns {Date[]} - Array of dates representing the first day of each month.
+ *
+ * @throws {Error} - If the start date is after the end date.
+ */
+export declare const eachMonthOfInterval: (interval: {
+    start: Date;
+    end: Date;
+}) => string[];
+/**
+ * Generates an array of the first day of each year within the specified date interval.
+ * This version minimizes reliance on the Date class for cross-browser compatibility (e.g. Safari).
+ *
+ * @param {Object} interval - The start and end of the interval.
+ * @param {Date} interval.start - The start date of the interval.
+ * @param {Date} interval.end - The end date of the interval.
+ * @returns {Date[]} - Array of dates representing the first day of each year.
+ *
+ * @throws {Error} - If the start date is after the end date.
+ */
+export declare const eachYearOfInterval: (interval: {
+    start: Date;
+    end: Date;
+}) => Date[];
+export declare const isSameMonth: (shortDate: any, currentDay: any) => boolean;
+export declare const isSameWeek: (dateLeft: any, dateRight: any, weekStartsOn?: number) => boolean;
+export declare const endOfMonth: (date: Date) => Date;

package/dist/components/atoms/form/dateselect/helpers.js

@@ -0,0 +1,83 @@
+const g = (r) => {
+  const t = {
+    Jan: "January",
+    Feb: "February",
+    Mar: "March",
+    Apr: "April",
+    May: "May",
+    Jun: "June",
+    Jul: "July",
+    Aug: "August",
+    Sep: "September",
+    Oct: "October",
+    Nov: "November",
+    Dec: "December"
+  }, [e, n] = r.split("-"), o = t[e];
+  if (!o || !n)
+    throw new Error("Invalid date format");
+  return `${o} ${n}`;
+}, d = (r) => {
+  const t = {
+    Jan: 0,
+    Feb: 1,
+    Mar: 2,
+    Apr: 3,
+    May: 4,
+    Jun: 5,
+    Jul: 6,
+    Aug: 7,
+    Sep: 8,
+    Oct: 9,
+    Nov: 10,
+    Dec: 11
+  }, [e, n] = r.split("-"), o = parseInt(n, 10), a = t[e];
+  return isNaN(o) || a === void 0 ? /* @__PURE__ */ new Date(NaN) : new Date(o, a);
+}, p = (r) => {
+  const t = { month: "short", year: "numeric" }, [e, n] = r.toLocaleDateString("en-US", t).split(" ");
+  return `${e}-${n}`;
+}, D = (r) => {
+  const { start: t, end: e } = r;
+  if (t > e)
+    throw new Error("The start of the interval cannot be after the end");
+  const n = t.getFullYear(), o = t.getMonth(), a = e.getFullYear(), s = e.getMonth(), h = [];
+  for (let c = n; c <= a; c++) {
+    const f = c === n ? o : 0, i = c === a ? s : 11;
+    for (let u = f; u <= i; u++) {
+      const M = String(u + 1).padStart(2, "0"), m = `${c}-${M}-01`;
+      h.push(m);
+    }
+  }
+  return h;
+}, S = (r) => {
+  const { start: t, end: e } = r;
+  if (!(t instanceof Date) || !(e instanceof Date))
+    throw new Error("Invalid start or end date");
+  if (t > e)
+    throw new Error("The start date must be before or equal to the end date");
+  const n = [], o = t.getFullYear(), a = e.getFullYear();
+  for (let s = o; s <= a; s++)
+    n.push(new Date(s, 0, 1));
+  return n;
+}, y = (r, t) => {
+  const [e, n] = g(r).split(" "), o = parseInt(n, 10), a = (/* @__PURE__ */ new Date(`${e} 1, ${o}`)).getMonth(), s = t.getMonth(), h = t.getFullYear();
+  return s === a && h === o;
+}, l = (r, t) => {
+  const e = new Date(r), n = (e.getDay() - t + 7) % 7;
+  return e.setDate(e.getDate() - n), e.setHours(0, 0, 0, 0), e;
+}, Y = (r, t, e = 0) => {
+  const n = l(r, e), o = l(t, e);
+  return n.getTime() === o.getTime();
+}, w = (r) => {
+  const t = new Date(r);
+  return t.setMonth(t.getMonth() + 1), t.setDate(0), t.setHours(23, 59, 59, 999), t;
+};
+export {
+  D as eachMonthOfInterval,
+  S as eachYearOfInterval,
+  w as endOfMonth,
+  p as formatDateToMonthYear,
+  g as formatShortMonthYear,
+  y as isSameMonth,
+  Y as isSameWeek,
+  d as parseShortMonthYear
+};

package/dist/components/atoms/form/dateselect/index.d.ts

@@ -0,0 +1,2 @@
+export { Dateselect } from './dateselect';
+export type { DateselectProps } from './dateselect';

package/dist/components/atoms/form/dateselect/index.js

@@ -0,0 +1,4 @@
+import { Dateselect as o } from "./dateselect.js";
+export {
+  o as Dateselect
+};

package/dist/components/atoms/form/dateselect/month-switch.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export declare const MonthSwitch: ({ onChange, currMonth, setCurrMonth, value, min, max, }: {
+    onChange: React.Dispatch<React.SetStateAction<string | Date>>;
+    currMonth: string | Date;
+    setCurrMonth: React.Dispatch<React.SetStateAction<string>>;
+    value: string | Date;
+    min: string | Date;
+    max: string | Date;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/form/dateselect/month-switch.js

@@ -0,0 +1,135 @@
+import { jsxs as E, jsx as s } from "react/jsx-runtime";
+import { useRef as F, useCallback as D, useEffect as j } from "react";
+import { Icons as S } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { getStyles as I } from "./styles.js";
+import { l as P } from "../../../../lodash-BRbpQ7iy.js";
+import { t as V } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { eachMonthOfInterval as W } from "./helpers.js";
+import { Typography as N } from "../../../styles/typography/typography.js";
+import { m as k } from "../../../../index-CYyrKZeH.js";
+import { b as L, a as x, f as p } from "../../../../format-BwmhcciO.js";
+import { i as u } from "../../../../isWithinInterval-BTUruC3j.js";
+import { s as w, a as R } from "../../../../set-CXVt2sL3.js";
+function U(a, o) {
+  return L(a, -2);
+}
+const _ = ({
+  onChange: a,
+  currMonth: o,
+  setCurrMonth: l,
+  value: e,
+  min: c,
+  max: d
+}) => {
+  const m = I(), y = F(null), C = W({
+    start: U(o),
+    end: L(o, 2)
+  }), r = u(
+    w(e, {
+      month: new Date(o).getMonth() ? new Date(o).getMonth() - 1 : 11
+      //
+    }),
+    {
+      start: c,
+      end: d
+    }
+  ), i = u(
+    w(e, {
+      month: new Date(o).getMonth() == 11 ? 0 : new Date(o).getMonth() + 1
+    }),
+    {
+      start: c,
+      end: d
+    }
+  ), b = D(
+    P.debounce((t) => {
+      t.deltaY < 0 && i ? g() : t.deltaY > 0 && r && M();
+    }, 35),
+    // Adjust the debounce delay as needed
+    [e, i, r]
+  ), h = D(
+    (t) => {
+      t.preventDefault(), b(t);
+    },
+    [b]
+  );
+  j(() => {
+    const t = y.current;
+    return t && t.addEventListener("wheel", h), () => {
+      t && t.removeEventListener("wheel", h);
+    };
+  }, [h]);
+  const g = () => {
+    const t = x(e, { months: 1 }).setFullYear(new Date(e).getFullYear());
+    l(p(t, "yyyy-MM")), a(new Date(t));
+  }, Y = (t) => {
+    const n = R(e, t);
+    l(p(n, "yyyy-MM")), a(n);
+  }, M = () => {
+    const t = x(e, { months: -1 }).setFullYear(new Date(e).getFullYear());
+    l(p(t, "yyyy-MM")), a(new Date(t));
+  };
+  return /* @__PURE__ */ E("div", { className: m.switchIconsLists, ref: y, children: [
+    /* @__PURE__ */ s("div", { className: "h-[3rem] flex items-center justify-center", children: /* @__PURE__ */ s(
+      S,
+      {
+        button: !0,
+        handleClick: (t) => {
+          t.stopPropagation(), M();
+        },
+        icon: "ChevronUp",
+        color: r ? "active" : "disabled",
+        disabled: !r
+      }
+    ) }),
+    /* @__PURE__ */ s("div", { className: m.timeFlex, children: C.map((t) => {
+      const n = k(t).toDate(), f = u(w(e, { month: n.getMonth() }), {
+        start: c,
+        end: d
+      }), v = k(t).isSame(o, "month");
+      return /* @__PURE__ */ s(
+        "div",
+        {
+          "data-testid": n.toLocaleString(),
+          onClick: () => f && Y(n.getMonth()),
+          className: V(
+            m.hourStyle,
+            f ? "hover:bg-surface-active cursor-pointer" : "cursor-not-allowed",
+            `${v ? "bg-surface-active" : ""}`,
+            " rounded"
+          ),
+          children: /* @__PURE__ */ s(
+            N,
+            {
+              color: f ? v ? "active" : "default" : "disabled",
+              children: n.toLocaleString("en-US", {
+                month: "long"
+              }),
+              swStyle: 5,
+              className: "text-center"
+            }
+          )
+        },
+        n.toLocaleString()
+      );
+    }) }),
+    /* @__PURE__ */ s("div", { className: "h-[3rem] flex items-center justify-center", children: /* @__PURE__ */ s(
+      S,
+      {
+        button: !0,
+        handleClick: (t) => {
+          t.stopPropagation(), g();
+        },
+        icon: "ChevronDown",
+        color: i ? "active" : "disabled",
+        disabled: !i
+      }
+    ) }),
+    /* @__PURE__ */ s(N, { children: "Month", swStyle: 1, color: "subdued" })
+  ] });
+};
+export {
+  _ as MonthSwitch
+};

package/dist/components/atoms/form/dateselect/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const getStyles: () => {
+    container: string;
+    dropdownContainer: string;
+    monthYearSwitch: string;
+    MonthYearContainer: string;
+    borderSwitches: string;
+    switchIconsLists: string;
+    timeFlex: string;
+    hourStyle: string;
+};

package/dist/components/atoms/form/dateselect/styles.js

@@ -0,0 +1,14 @@
+import { outlinedBorder as e } from "../../../styles/defaults/defaults.js";
+const l = () => ({
+  container: "h-[4rem] w-full px-md flex items-center justify-between relative",
+  dropdownContainer: `flex flex-col justify-end items-center p-md gap-md absolute ${e.active} bg-surface-default z-50 min-w-[30rem] mt-xs`,
+  monthYearSwitch: "flex flex-col items-start gap-xs w-full",
+  MonthYearContainer: "h-[3rem] flex items-center w-full relative",
+  borderSwitches: "flex justify-evenly  min-w-[30rem]",
+  switchIconsLists: "flex flex-col gap-xs items-center",
+  timeFlex: "flex flex-col justify-center items-center gap-xs w-[13rem]",
+  hourStyle: " h-[3rem] flex justify-center items-center w-full "
+});
+export {
+  l as getStyles
+};

package/dist/components/atoms/form/dateselect/year-switch.d.ts

@@ -0,0 +1,8 @@
+export declare const YearSwitch: ({ onChange, currMonth, setCurrMonth, value, min, max, }: {
+    onChange: React.Dispatch<React.SetStateAction<string | Date>>;
+    currMonth: string | Date;
+    setCurrMonth: React.Dispatch<React.SetStateAction<string>>;
+    value: string | Date;
+    min: string | Date;
+    max: string | Date;
+}) => import("react/jsx-runtime").JSX.Element;