@temp-spotwork/ui 1.4.3

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

@@ -0,0 +1,220 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import y, { useState as O } from "react";
+import { Icons as P } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { getStyles as E } from "./styles.js";
+import { c as r } from "../../../../index-fN7hCOo3.js";
+import { Typography as s } from "../../../styles/typography/typography.js";
+import { getLabelColor as F, getInnerIconColor as L, getBorderClasses as b, getHelperTextColor as j } from "../utils-for-forms/state-functions.js";
+import { FormHelperText as _ } from "../form-helper-text/form-helper-text.js";
+import { MinutesTimeSwitch as z } from "./minutes-switch.js";
+import { HoursTimeSwitch as D } from "./hours-switch.js";
+const T = y.forwardRef(
+  ({
+    selectedTime: t = { hour: 12, min: 20, period: "PM" },
+    error: c = !1,
+    warning: d = !1,
+    disabled: l = !1,
+    setSelectedTime: p,
+    helperText: I,
+    label: N,
+    onBlur: m,
+    step: g = 5,
+    autoFocus: w = !1
+  }, $) => {
+    const [i, u] = O(!1), [a, f] = O(!1), h = y.useRef(null), S = (C) => {
+      h.current && !h.current.contains(C.target) && (i || a) && (f(!1), u(!1), m == null || m());
+    };
+    y.useEffect(() => (document.addEventListener("mousedown", S), () => {
+      document.removeEventListener("mousedown", S);
+    }), [i, a]);
+    const A = F(
+      a || i,
+      d,
+      c,
+      l
+    ), H = j(d, c, l), v = b(
+      a || i,
+      d,
+      c,
+      l
+    ), M = L(
+      a || i,
+      d,
+      c,
+      l
+    ), o = E(l), k = t.hour.toString().padStart(2, "0"), x = t.min.toString().padStart(2, "0"), R = () => i && !l && /* @__PURE__ */ n(
+      "div",
+      {
+        "data-testid": "timeSelect-dropdown",
+        className: r(
+          v,
+          o.dropdownContainer,
+          "absolute top-[4.3rem] z-10 cursor-default"
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            D,
+            {
+              setSelectedTime: p,
+              selectedTime: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: r(o.flexColItems, o.divOuterColon),
+              children: /* @__PURE__ */ e("div", { className: r(o.divInnerColon), children: /* @__PURE__ */ e(s, { children: ":", type: "title", color: "default" }) })
+            }
+          ),
+          /* @__PURE__ */ e(
+            z,
+            {
+              setSelectedTime: p,
+              selectedTime: t,
+              step: g
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: o.divOuterPeriod, children: /* @__PURE__ */ n(
+            "div",
+            {
+              className: r(o.timeFlex, o.divInnerPeriod),
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: r(
+                      o.hourStyle,
+                      "cursor-pointer select-none"
+                    ),
+                    onClick: () => p({
+                      ...t,
+                      period: t.period === "PM" ? "AM" : "PM"
+                    }),
+                    children: /* @__PURE__ */ e(
+                      s,
+                      {
+                        type: "title",
+                        color: "default",
+                        children: t.period === "PM" ? "AM" : "PM"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: r(
+                      "rounded-[0.5rem] bg-surface-active select-none",
+                      o.hourStyle
+                    ),
+                    children: /* @__PURE__ */ e(
+                      s,
+                      {
+                        type: "title",
+                        color: "active",
+                        children: t.period
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+    return /* @__PURE__ */ n("div", { className: "w-[14.5rem]", ref: h, children: [
+      N && /* @__PURE__ */ e(s, { swStyle: 3, color: A, children: N }),
+      /* @__PURE__ */ n("div", { className: r(o.flexColItems, o.displayOuter), children: [
+        /* @__PURE__ */ n("div", { className: "relative cursor-pointer", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              autoFocus: w,
+              type: "button",
+              ref: $,
+              className: r(
+                v,
+                o.displayInner,
+                i ? "hidden" : ""
+              ),
+              onFocus: () => {
+                f(!0);
+              },
+              onClick: () => {
+                u(!0);
+              },
+              onBlur: (C) => {
+                C.stopPropagation(), f(!1);
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    type: "title",
+                    children: `${k}:${x} ${t.period}`,
+                    color: "default"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  P,
+                  {
+                    disabled: !0,
+                    icon: "Clock",
+                    color: M,
+                    id: "ClockOpenClose"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              "data-testid": "displaytime",
+              className: r(
+                v,
+                o.displayInner,
+                i ? "" : "hidden"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    type: "title",
+                    children: `${k}:${x} ${t.period}`,
+                    color: "default"
+                  }
+                ),
+                /* @__PURE__ */ e("div", { onClick: () => u(!1), children: /* @__PURE__ */ e(
+                  P,
+                  {
+                    disabled: !0,
+                    icon: "Clock",
+                    color: M,
+                    id: "ClockOpenClose"
+                  }
+                ) })
+              ]
+            }
+          ),
+          R()
+        ] }),
+        I && /* @__PURE__ */ e(
+          _,
+          {
+            helperText: I,
+            warning: d,
+            error: c,
+            helperTextAndIconColor: H
+          }
+        )
+      ] })
+    ] });
+  }
+);
+export {
+  T as Timeselect
+};

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

@@ -0,0 +1,2 @@
+export { Typeahead } from './typeahead';
+export type { TypeaheadProps } from './typeahead';

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

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

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

@@ -0,0 +1,7 @@
+export declare const getStyles: () => {
+    outDiv: string;
+    dropdown: string;
+    itemContainer: string;
+    addValue: string;
+    helperContainer: string;
+};

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

@@ -0,0 +1,11 @@
+import { outlinedBorder as e } from "../../../styles/defaults/defaults.js";
+const t = () => ({
+  outDiv: "relative flex gap-md w-full",
+  dropdown: `flex flex-col items-start max-h-[24rem] min-h-[4rem] w-full overflow-x-hidden absolute ${e.active} bg-surface-default z-50 overflow-y-auto`,
+  itemContainer: "min-h-[4rem] w-full gap-md flex items-center border-b border-bcolor-subdued  hover:cursor-pointer py-[0.75rem] px-[1rem] first:rounded-t last:rounded-b",
+  addValue: "flex flex-row items-center gap-xs self-stretch py-[0.75rem] px-[1rem] w-[full] h-[4rem] cursor-pointer",
+  helperContainer: "flex justify-start items-center gap-xs mt-xs"
+});
+export {
+  t as getStyles
+};

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

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+import { LabelValuePair } from '../form-types';
+
+export type TypeaheadProps = {
+    /**
+     * Trigger error state.
+     */
+    error?: boolean;
+    /**
+     * Trigger warning state.
+     */
+    warning?: boolean;
+    /**
+     * Display helper text.
+     */
+    helperText?: 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
+     */
+    onChange?: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * Set value for controlled components
+     */
+    value?: string;
+    /**
+     * Set value for controlled components, if it is defined it shows a dropdown
+     */
+    selectValue?: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * An Array of options
+     */
+    options?: string[] | LabelValuePair[];
+    /**
+     * handleChange click to the end Textfield icon
+     */
+    endIconClick?: () => void;
+    /**
+     * handle click to the 'add value' button in the end of dropdown
+     */
+    addValue?: (value: string) => void;
+    /**
+     * ref to the input of textfield
+     */
+    inputRef?: React.LegacyRef<HTMLInputElement>;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * show dropdown on focus
+     */
+    expandOnFocus?: boolean;
+    /**
+     * Icon before end Icon
+     */
+    loadingIcon?: React.ReactNode;
+    /**
+     * optional: autoFocus
+     */
+    autoFocus?: boolean;
+    /**
+     * optional: autoFocus
+     */
+    notFoundText?: string;
+    /**
+     * For case when we don't want to filter options, but still want to show dropdown.
+     * This prop added specially for Address Form Component when we render addresses from google API and don't need to filter them.
+     */
+    disableOptionsFiltering?: boolean;
+};
+export declare function Typeahead({ error, warning, helperText, label, placeholder, disabled, options, value, selectValue, onChange, endIconClick, addValue, inputRef, onBlur, loadingIcon, autoFocus, expandOnFocus, notFoundText, disableOptionsFiltering, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,146 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import A, { useState as L, useEffect as R } from "react";
+import { t as D } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Textfield as C } from "../textfield/textfield.js";
+import { Icons as k } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as N } from "../../../styles/typography/typography.js";
+import { getStyles as I } from "./styles.js";
+function le({
+  error: F = !1,
+  warning: M = !1,
+  helperText: _,
+  label: O,
+  placeholder: G = "",
+  disabled: $ = !1,
+  options: r,
+  value: s,
+  selectValue: m,
+  onChange: d,
+  endIconClick: c,
+  addValue: p,
+  inputRef: n,
+  onBlur: l,
+  loadingIcon: q,
+  autoFocus: z,
+  expandOnFocus: E,
+  notFoundText: H = "No results found",
+  disableOptionsFiltering: J = !1
+}) {
+  const j = A.useRef(null), y = A.useRef(null), [g, h] = L(!1), [K, w] = L(!1), [T, u] = L(""), i = Array.isArray(r) && typeof r[0] == "object" && r[0] !== null && "label" in r[0] && "value" in r[0];
+  A.useEffect(() => {
+    const e = (t) => {
+      const f = j.current;
+      f && t.target !== f && !f.contains(t.target) && g && (h(!1), w(!1), l == null || l());
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [g]), R(() => {
+    if (i && r && s) {
+      const e = r.find(
+        (t) => t.value === s
+      );
+      u(e.label);
+    }
+  }, [r]);
+  const x = (e) => typeof e == "string" ? e : e.value, v = (e) => typeof e == "string" ? e : e.label, P = (e) => x(e) === s, o = I(), Q = s !== "" && s !== void 0 ? "Cross" : "MagnifyingGlass", U = (e) => {
+    const t = (i ? T : s) ?? "";
+    return e.toLowerCase().includes(t.toLowerCase());
+  }, W = () => {
+    var e, t;
+    i && u(""), c == null || c(), h(!0), (e = n == null ? void 0 : n.current) == null || e.focus(), (t = y == null ? void 0 : y.current) == null || t.focus();
+  }, X = (e) => {
+    if (m == null || m(e), i) {
+      const t = r.find(
+        (f) => typeof f != "string" && f.value === e
+      );
+      t && u(t.label);
+    }
+    h(!1), w(!1), l == null || l();
+  }, Y = (e) => {
+    d == null || d(e), w(!!e);
+  }, Z = (e) => {
+    u(e), d == null || d(e);
+  }, S = r == null ? void 0 : r.filter((e) => J ? !0 : U(v(e))).sort(
+    (e, t) => v(e).toLowerCase().localeCompare(v(t).toLowerCase())
+  );
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: "flex flex-col w-full relative",
+      onFocus: () => {
+        E && w(!0), h(!0);
+      },
+      ref: j,
+      children: [
+        /* @__PURE__ */ a("div", { className: o.outDiv, children: /* @__PURE__ */ a(
+          C,
+          {
+            ref: n ?? y,
+            autoFocus: z,
+            fieldType: "text",
+            placeholder: G,
+            value: i ? T : s,
+            endIcon: {
+              icon: Q,
+              handleClick: W
+            },
+            onChange: (e) => i ? Z(e) : Y(e),
+            label: O,
+            helperText: _,
+            error: F,
+            warning: M,
+            disabled: $,
+            externalActive: g,
+            loadingIcon: q
+          }
+        ) }),
+        K && (s || E) && m && /* @__PURE__ */ b(
+          "div",
+          {
+            "data-testid": "typeahead-dropdown",
+            className: D(
+              o.dropdown,
+              O ? "top-[6.8rem]" : "top-[4.5rem]"
+              // if label doesn't define the height of textfield is different
+            ),
+            children: [
+              S != null && S.length ? S.map((e) => /* @__PURE__ */ a(
+                "div",
+                {
+                  "data-testid": `typeahead-${e}`,
+                  onClick: () => X(x(e)),
+                  className: D(
+                    o.itemContainer,
+                    P(e) ? "bg-surface-active" : "bg-white"
+                  ),
+                  children: /* @__PURE__ */ a(
+                    N,
+                    {
+                      swStyle: 5,
+                      children: v(e),
+                      color: "default"
+                    }
+                  )
+                },
+                x(e)
+              )) : /* @__PURE__ */ b("div", { className: o.itemContainer, children: [
+                /* @__PURE__ */ a(N, { swStyle: 5, color: "default", children: H }),
+                " "
+              ] }),
+              p && s && /* @__PURE__ */ b("div", { className: o.addValue, onClick: () => p(s), children: [
+                /* @__PURE__ */ a(k, { disabled: !0, id: "addvalue", color: "active", icon: "Add" }),
+                /* @__PURE__ */ a(N, { children: "Add value", swStyle: 5, color: "active" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  le as Typeahead
+};

package/dist/components/atoms/form/utils-for-forms/state-functions.d.ts

@@ -0,0 +1,6 @@
+import { GlyphColor } from '../../../styles/colors';
+
+export declare const getLabelColor: (active: boolean, warning: boolean, error: boolean, disabled: boolean) => GlyphColor;
+export declare const getHelperTextColor: (warning: boolean, error: boolean, disabled: boolean) => GlyphColor;
+export declare const getBorderClasses: (active: boolean, warning: boolean, error: boolean, disabled: boolean) => string;
+export declare const getInnerIconColor: (active: boolean, warning: boolean, error: boolean, disabled: boolean) => GlyphColor;

package/dist/components/atoms/form/utils-for-forms/state-functions.js

@@ -0,0 +1,8 @@
+import { outlinedBorder as o } from "../../../styles/defaults/defaults.js";
+const l = (e, r, t, a) => a ? "disabled" : e ? "active" : t ? "alert" : r ? "warning" : "default", n = (e, r, t) => t ? "subdued" : r ? "alert" : e ? "warning" : "subdued", i = (e, r, t, a) => a ? o.disabled : e ? o.active : t ? o.error : r ? o.warning : o.default, s = (e, r, t, a) => a ? "disabled" : e ? "active" : t ? "alert" : r ? "warning" : "default";
+export {
+  i as getBorderClasses,
+  n as getHelperTextColor,
+  s as getInnerIconColor,
+  l as getLabelColor
+};

package/dist/components/atoms/horizontal-border/horizontal-border.d.ts

@@ -0,0 +1,21 @@
+/**
+ * HorizontalBorder component
+ *
+ * A simple horizontal divider line that can be used to separate content sections.
+ * The component renders a full-width border with customizable height and can be
+ * conditionally hidden based on the isDisplaced prop.
+ */
+export type horizontalBorderType = {
+    /** Whether to show the border. If false, component returns null */
+    isDisplaced?: boolean;
+    /** Height of the border in pixels. Defaults to 1px */
+    height?: number;
+};
+/**
+ * Renders a horizontal border/divider line
+ *
+ * @param isDisplaced - Controls visibility of the border (default: true)
+ * @param height - Height of the border in pixels (default: 1)
+ * @returns JSX element or null if isDisplaced is false
+ */
+export declare function HorizontalBorder({ isDisplaced, height }: horizontalBorderType): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/horizontal-border/horizontal-border.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+function l({ isDisplaced: r = !0, height: o = 1 }) {
+  return r ? /* @__PURE__ */ e("div", { className: "w-full border-t border-bcolor-subdued", style: { height: o } }) : null;
+}
+export {
+  l as HorizontalBorder
+};

package/dist/components/atoms/horizontal-border/index.d.ts

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

package/dist/components/atoms/horizontal-border/index.js

@@ -0,0 +1,4 @@
+import { HorizontalBorder as e } from "./horizontal-border.js";
+export {
+  e as HorizontalBorder
+};