@temp-spotwork/ui 1.4.3

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

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+import { IconsProps } from '../../icons';
+
+export type TextfieldProps = {
+    /**
+     * Trigger error state.
+     */
+    error?: boolean;
+    /**
+     * Trigger warning state.
+     */
+    warning?: boolean;
+    /**
+     * Display helper text.
+     */
+    helperText?: string;
+    /**
+     * Specify the type of the input field.
+     */
+    fieldType?: 'text' | 'email' | 'password' | 'phone' | 'number';
+    /**
+     * works when field type is phone
+     */
+    prefix?: string;
+    /**
+     * Disable input field
+     */
+    disabled?: boolean;
+    /**
+     * A label to be displayed above the input field.
+     */
+    label?: string;
+    /**
+     * A placeholder to be displayed in the input field.
+     */
+    placeholder?: string;
+    /**
+     * Assign a function to be called when the input field changes for controlled ../../
+     */
+    onChange?: (value: string) => void | React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * pass onKeyDown event
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Set value for controlled components
+     */
+    value?: string;
+    /**
+     * start Icon
+     */
+    startIcon?: IconsProps;
+    /**
+     * end Icon
+     */
+    endIcon?: IconsProps;
+    /**
+     * Action on end icon click.
+     */
+    modification?: 'messageEditor';
+    /**
+     * Pass onFocus
+     */
+    onFocus?: () => void;
+    /**
+     * Pass onBlur
+     */
+    onBlur?: () => void;
+    /**
+     * Icon before end Icon
+     */
+    loadingIcon?: React.ReactNode;
+    /**
+     * Pass active state from parent component
+     */
+    externalActive?: boolean;
+    /**
+     * optional: autoFocus
+     */
+    autoFocus?: boolean;
+    /**
+     * if true - for password field, show password by default
+     */
+    showPasswordByDefault?: boolean;
+    /**
+     * prevent rendering a browser suggestion list (history of typed text, etc)
+     */
+    preventBrowserSuggestions?: boolean;
+};
+export declare const Textfield: React.ForwardRefExoticComponent<TextfieldProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,144 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import W, { useState as S } from "react";
+import { c } from "../../../../index-fN7hCOo3.js";
+import { textFieldMessageEditor as q, textFieldContainer as z, helperTextContainer as D } from "./styles.js";
+import { Icons as h } from "../../icons/icons.js";
+import G from "../../icons/iconsSVGs/Large/EyeClose.js";
+import I from "../../icons/iconsSVGs/Large/EyeOpen.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as w } from "../../../styles/typography/typography.js";
+import { styleMap as J } from "../../../styles/typography/style.js";
+import { getLabelColor as K, getBorderClasses as Q, getHelperTextColor as U } from "../utils-for-forms/state-functions.js";
+import "../../../styles/colors/colors.js";
+import { glyph as l } from "../../../styles/colors/colormap.js";
+const de = W.forwardRef(
+  ({
+    error: s = !1,
+    warning: o = !1,
+    helperText: x,
+    label: r,
+    fieldType: a = "text",
+    placeholder: b,
+    value: E,
+    onChange: $ = () => null,
+    onKeyDown: j = () => null,
+    startIcon: g,
+    endIcon: v,
+    disabled: e = !1,
+    modification: i,
+    onFocus: p,
+    onBlur: f,
+    prefix: n,
+    loadingIcon: k,
+    externalActive: C,
+    autoFocus: A = !1,
+    showPasswordByDefault: P,
+    preventBrowserSuggestions: M = !1
+  }, R) => {
+    const [m, N] = S(!1), [u, _] = S(!!P), F = () => {
+      _(!u);
+    }, H = K(m || !!C, o, s, e), y = U(o, s, e), L = Q(m || !!C, o, s, e);
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: "w-full",
+        onFocus: () => {
+          !e && N(!0), !e && (p == null || p());
+        },
+        onBlur: () => {
+          N(!1), f == null || f();
+        },
+        children: [
+          r && /* @__PURE__ */ t("label", { "data-testid": "textfield-label-test", htmlFor: `${r}`, children: /* @__PURE__ */ t(w, { swStyle: 3, children: r, color: H }) }),
+          /* @__PURE__ */ d("div", { className: c("flex flex-col gap-xs"), children: [
+            /* @__PURE__ */ d(
+              "div",
+              {
+                "data-testid": "textfield",
+                className: c(
+                  !i && L,
+                  n ? "pr-md" : "px-md",
+                  e ? "bg-surface-disabled cursor-not-allowed" : "bg-white",
+                  i ? i === "messageEditor" ? q : null : z
+                ),
+                children: [
+                  g && /* @__PURE__ */ t(h, { disabled: e, ...g }),
+                  /* @__PURE__ */ d("div", { className: "flex items-center w-full", children: [
+                    n && /* @__PURE__ */ t("div", { className: "flex justify-center items-center px-md rounded-l-[0.4rem] bg-surface-subdued h-[3.8rem] min-w-[4.5rem] border-r border-bcolor-default  ", children: /* @__PURE__ */ t(w, { swStyle: 5, color: "default", className: "", children: n }) }),
+                    /* @__PURE__ */ t(
+                      "input",
+                      {
+                        autoFocus: A,
+                        type: a === "password" ? u ? "text" : "password" : a === "phone" ? "number" : a,
+                        name: r,
+                        ref: R,
+                        id: r,
+                        className: c(
+                          `w-full h-[2.5rem] focus:outline-none ${i === "messageEditor" ? "" : J[5]}`,
+                          e ? "bg-surface-disabled text-glyph-disabled cursor-not-allowed" : "",
+                          n ? "pl-md " : "",
+                          a === "phone" ? "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" : ""
+                        ),
+                        placeholder: b,
+                        onChange: (O) => $(O.target.value),
+                        onKeyDown: j,
+                        value: E,
+                        "data-testid": "textfield-test",
+                        disabled: e,
+                        autoComplete: M ? "off" : "on"
+                      }
+                    )
+                  ] }),
+                  k,
+                  v && a !== "password" && /* @__PURE__ */ t(
+                    h,
+                    {
+                      color: m ? "active" : s ? "alert" : o ? "warning" : e ? "disabled" : "default",
+                      disabled: e,
+                      ...v
+                    }
+                  ),
+                  a === "password" && /* @__PURE__ */ t("div", { className: "hover:cursor-pointer", onClick: F, children: u ? /* @__PURE__ */ t(
+                    G,
+                    {
+                      fill: m ? l.active : s ? l.alert : o ? l.warning : e ? l.disabled : l.default
+                    }
+                  ) : /* @__PURE__ */ t(
+                    I,
+                    {
+                      fill: m ? l.active : s ? l.alert : o ? l.warning : e ? l.disabled : l.default
+                    }
+                  ) })
+                ]
+              }
+            ),
+            x && /* @__PURE__ */ d(
+              "div",
+              {
+                className: c(D),
+                id: s ? `${r}-error-message` : `${r}-field-message`,
+                "data-testid": "textfield-helper-test",
+                children: [
+                  !e && (o || s) && /* @__PURE__ */ t(
+                    h,
+                    {
+                      disabled: !0,
+                      icon: s ? "AlertSmall" : "WarningSmall",
+                      id: "Alertwarning",
+                      color: y
+                    }
+                  ),
+                  /* @__PURE__ */ t(w, { swStyle: 1, color: y, children: x })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  de as Textfield
+};

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

@@ -0,0 +1,2 @@
+export { TimePicker } from './time-picker';
+export type { TimePickerProps } from './time-picker';

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

@@ -0,0 +1,4 @@
+import { TimePicker as i } from "./time-picker.js";
+export {
+  i as TimePicker
+};

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

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+
+/**
+ * Reference type for the TimePickerDropdown component.
+ * Provides methods to control the dropdown's behavior.
+ */
+export type TimePickerDropdownRef = {
+    /**
+     * Scrolls the dropdown to center the currently selected time value.
+     * This is exposed to parent components to ensure the selected time
+     * is always visible when the dropdown opens.
+     */
+    scrollToSelectedValue: () => void;
+};
+/**
+ * Props interface for the TimePickerDropdown component.
+ * Defines the configuration and behavior of the time selection dropdown.
+ */
+type TimePickerDropdownProps = {
+    /**
+     * Controls the visibility of the dropdown.
+     * When false, the component will not render to optimize performance.
+     */
+    isOpened: boolean;
+    /**
+     * The currently selected time value.
+     * Used to highlight the selected option and calculate relative times.
+     */
+    value: Date;
+    /**
+     * Callback triggered when a time option is selected.
+     * Provides the selected Date value to the parent component.
+     */
+    onOptionClick: (option: Date) => void;
+    /**
+     * The timezone context for time display and calculations.
+     * Must be a valid IANA timezone string (e.g., 'America/New_York').
+     */
+    timezone: string;
+    /**
+     * Optional reference date 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 label for accessibility and testing purposes.
+     */
+    label?: string;
+    /**
+     * The minimum allowed time value.
+     * Times before this value will be disabled in the dropdown.
+     */
+    min?: Date;
+    /**
+     * The maximum allowed time value.
+     * Times after this value will be disabled in the dropdown.
+     */
+    max?: Date;
+    /**
+     * The time increment step in minutes.
+     * Determines the granularity of available time options.
+     * @default 5
+     */
+    step?: number;
+    /**
+     * The list of time options to render in the dropdown.
+     */
+    options: (Date | string)[];
+};
+export declare const TimePickerDropdown: React.ForwardRefExoticComponent<TimePickerDropdownProps & React.RefAttributes<TimePickerDropdownRef>>;
+export {};

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

@@ -0,0 +1,193 @@
+import { jsxs as j, jsx as c } from "react/jsx-runtime";
+import { forwardRef as z, useRef as h, useState as L, useImperativeHandle as V, useEffect as b } from "react";
+import { Typography as x } from "../../../styles/typography/typography.js";
+import { m as W } from "../../../../index-CYyrKZeH.js";
+import { t as S } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Icons as P } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { outlinedBorder as q } from "../../../styles/defaults/defaults.js";
+import { t as d } from "../../../../toDate-DF9e2eS8.js";
+import { i as F } from "../../../../isBefore-D0yKF9R5.js";
+import { m as G } from "../../../../constants-BfMb81ht.js";
+function J(t) {
+  return (r) => {
+    const n = Math[t], s = n(r);
+    return s === 0 ? 0 : s;
+  };
+}
+function K(t, r) {
+  return +d(t) - +d(r);
+}
+function Q(t, r, n) {
+  const s = K(t, r) / G;
+  return J(n == null ? void 0 : n.roundingMethod)(s);
+}
+function $(t) {
+  const r = d(t);
+  return r.setSeconds(0, 0), r;
+}
+function X(t, r) {
+  const n = d(t), s = d(r);
+  return n.getTime() > s.getTime();
+}
+function Y(t, r) {
+  const n = $(t), s = $(r);
+  return +n == +s;
+}
+const de = z(
+  ({ isOpened: t, value: r, onOptionClick: n, timezone: s, dateToCompare: M, notRenderTimeDifference: k, label: y, min: I, max: T, options: w }, B) => {
+    const l = h(null), f = h(null), i = h(), a = h(1), [A, H] = L(!1), [N, R] = L(!1), C = () => {
+      if (l.current && f.current) {
+        const e = l.current.clientHeight, o = f.current.offsetTop, u = f.current.clientHeight, E = o - (e - -20 * 2) / 2 + u / 2, U = l.current.scrollHeight - e, _ = Math.max(0, Math.min(E, U));
+        l.current.scrollTop = _;
+      }
+    };
+    V(B, () => ({
+      scrollToSelectedValue: C
+    })), b(() => {
+      t && C();
+    }, [t, r]), b(() => {
+      const e = l.current;
+      if (!e) return;
+      const o = () => {
+        H(e.scrollTop === 0), R(e.scrollTop === e.scrollHeight - e.clientHeight);
+      };
+      return o(), e.addEventListener("scroll", o), () => {
+        e.removeEventListener("scroll", o);
+      };
+    }, [t, H, R]);
+    const m = (e) => {
+      if (l.current) {
+        const u = 2 * a.current;
+        l.current.scrollTop += e === "up" ? -u : u;
+      }
+    }, D = (e) => {
+      a.current = 0.5, m(e), i.current = setInterval(() => {
+        a.current < 5 && (a.current += 0.1), m(e);
+      }, 16);
+    }, p = () => {
+      i.current && (clearInterval(i.current), i.current = void 0, a.current = 1);
+    };
+    b(() => () => {
+      i.current && clearInterval(i.current);
+    }, []);
+    const O = (e, o) => {
+      const u = Q(e, o, {
+        roundingMethod: "round"
+      }), g = Math.round(u * 100 / 60) / 100;
+      return g <= 0 ? "" : `+${g} hours`;
+    }, v = (e) => !!(I && F(e, I) || T && X(e, T));
+    return t ? /* @__PURE__ */ j(
+      "div",
+      {
+        className: S(
+          "absolute top-full left-0 mt-1 bg-surface-default rounded-lg border-[0.15rem] outline-none w-[20rem] p-md",
+          q.active
+        ),
+        children: [
+          /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center justify-center h-[2.5rem] w-full bg-surface-default text-glyph-active cursor-default",
+              onClick: () => m("up"),
+              onMouseDown: () => D("up"),
+              onMouseUp: p,
+              onMouseLeave: p,
+              disabled: A,
+              children: /* @__PURE__ */ c(P, { id: `${y}-dropdown-scroll-up`, disabled: !0, icon: "ChevronUp", color: A ? "disabled" : "active" })
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: l,
+              className: "max-h-[20rem] overflow-y-auto flex flex-col gap-xs",
+              style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+              children: w == null ? void 0 : w.map((e) => {
+                if (typeof e == "string")
+                  return /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: S("flex flex-row items-center gap-xs justify-between py-xxs px-sm"),
+                      children: /* @__PURE__ */ c(
+                        x,
+                        {
+                          swStyle: 1,
+                          children: e,
+                          color: "subdued",
+                          className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                        }
+                      )
+                    },
+                    `dropdown-option-${e}`
+                  );
+                {
+                  const o = Y(e, r);
+                  return /* @__PURE__ */ j(
+                    "div",
+                    {
+                      ref: o ? f : null,
+                      className: S(
+                        "flex flex-row items-center gap-xs justify-between py-xxs px-sm rounded cursor-pointer hover:bg-surface-active hover:outline-none focus:bg-surface-active focus:outline-none",
+                        o && "bg-surface-active",
+                        v(e) && "cursor-not-allowed"
+                      ),
+                      onClick: () => n(e),
+                      children: [
+                        /* @__PURE__ */ c(
+                          x,
+                          {
+                            swStyle: 5,
+                            children: W(e).tz(s).format("hh:mm A"),
+                            color: v(e) ? "disabled" : o ? "active" : "default",
+                            className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                          }
+                        ),
+                        M && !k && /* @__PURE__ */ c(
+                          x,
+                          {
+                            swStyle: 1,
+                            children: O(e, M),
+                            color: v(e) ? "disabled" : o ? "active" : "default",
+                            className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                          }
+                        )
+                      ]
+                    },
+                    `dropdown-option-${e.toString()}`
+                  );
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center justify-center h-[2.5rem] w-full bg-surface-default",
+              onClick: () => m("down"),
+              onMouseDown: () => D("down"),
+              onMouseUp: p,
+              onMouseLeave: p,
+              disabled: N,
+              children: /* @__PURE__ */ c(
+                P,
+                {
+                  id: `${y}-dropdown-scroll-down`,
+                  disabled: !0,
+                  icon: "ChevronDown",
+                  color: N ? "disabled" : "active"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) : null;
+  }
+);
+export {
+  de as TimePickerDropdown
+};

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

@@ -0,0 +1,107 @@
+import { default as React } from 'react';
+
+/**
+ * TimePickerInput Component
+ *
+ * A specialized input component for time selection that combines a masked input field
+ * with a dropdown picker. It handles:
+ * - 12-hour time format with AM/PM selection
+ * - Timezone-aware time manipulation
+ * - Keyboard navigation and direct input
+ * - Time step adjustments
+ * - Min/max time constraints
+ *
+ * The component uses react-imask for input masking and moment-timezone for timezone handling.
+ * It maintains internal state for editing mode and input value while syncing with external value prop.
+ */
+type TimePickerInputProps = {
+    /**
+     * 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>>;
+    /**
+     * Indicates whether the input is in an error state.
+     * When true, the component will display error styling.
+     */
+    error?: boolean;
+    /**
+     * Indicates whether the input is in a warning state.
+     * When true, the component will display warning styling.
+     */
+    warning?: boolean;
+    /**
+     * Disables the input when true.
+     * Prevents user interaction and displays disabled styling.
+     */
+    disabled?: boolean;
+    /**
+     * Optional label text used for accessibility.
+     */
+    label?: string;
+    /**
+     * Indicates whether the dropdown is currently open.
+     * Used for styling and state management.
+     */
+    isOpened: boolean;
+    /**
+     * Indicates whether the input currently has focus.
+     * Used for styling and state management.
+     */
+    focus: boolean;
+    /**
+     * Callback function triggered when the input receives focus.
+     */
+    onFocus: () => void;
+    /**
+     * Callback function triggered when the input loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback function triggered when the input is clicked.
+     * Used to toggle the dropdown.
+     */
+    setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * When true, the input will automatically receive focus on mount.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * The time increment step in minutes.
+     * Used to round input values to the nearest step.
+     * @default 5
+     */
+    step?: number;
+    /**
+     * Callback function to scroll the dropdown to the selected value.
+     * Called after value changes.
+     */
+    onScrollToSelectedValue: () => void;
+    /**
+     * The minimum allowed time value.
+     * Times before this value will be invalid.
+     */
+    min: Date;
+    /**
+     * The maximum allowed time value.
+     * Times after this value will be invalid.
+     */
+    max: Date;
+    /**
+     * The timezone of the time picker.
+     * Must be a valid timezone string.
+     */
+    timezone: string;
+    /**
+     * The list of possible values for the input.
+     */
+    options: (Date | string)[];
+};
+export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLButtonElement>>;
+export {};