@temp-spotwork/ui 1.4.3

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

@@ -0,0 +1,156 @@
+import { jsxs as I, jsx as o } from "react/jsx-runtime";
+import x, { useState as v, useEffect as _ } from "react";
+import { c as E } from "../../../../index-fN7hCOo3.js";
+import { textFieldContainer as $ } from "./styles.js";
+import { Icons as R } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as D } from "../../../styles/typography/typography.js";
+import { styleMap as F } from "../../../styles/typography/style.js";
+import { getLabelColor as q, getBorderClasses as z, getHelperTextColor as G } from "../utils-for-forms/state-functions.js";
+import { FormHelperText as J } from "../form-helper-text/form-helper-text.js";
+const C = x.forwardRef(
+  ({
+    error: i = !1,
+    warning: s = !1,
+    helperText: k,
+    label: m,
+    placeholder: S,
+    value: r = 1,
+    step: l = 1,
+    onChange: t,
+    disabled: e = !1,
+    onFocus: d,
+    onBlur: p,
+    autoFocus: T = !1
+  }, b) => {
+    const [f, w] = v(!1), a = x.useRef(null), [n, u] = v(r);
+    _(() => {
+      u(r);
+    }, [r]);
+    const A = () => {
+      w(!1);
+      const c = Math.round(r / l) * l;
+      t == null || t(c), u(c), p == null || p();
+    }, y = (c) => {
+      a.current && !a.current.contains(c.target) && f && A();
+    };
+    x.useEffect(() => (document.addEventListener("mousedown", y), () => {
+      document.removeEventListener("mousedown", y);
+    }), [f, r]);
+    const L = q(f, s, i, e), O = G(s, i, e), V = z(f, s, i, e), j = () => {
+      if (!e) {
+        if (n === "") {
+          t == null || t(0 + l);
+          return;
+        }
+        if (typeof r == "number") {
+          t == null || t(r + l);
+          return;
+        }
+      }
+    }, H = () => {
+      if (!e) {
+        if (n === "") {
+          t == null || t(0);
+          return;
+        }
+        if (typeof r == "number") {
+          if (r - l < 0) {
+            t == null || t(0);
+            return;
+          }
+          t == null || t(r - l);
+          return;
+        }
+      }
+    }, M = (c) => {
+      if (c.target.value === "") {
+        u(c.target.value);
+        return;
+      }
+      u(c.target.value), t == null || t(parseInt(c.target.value));
+    }, N = (c) => {
+      c.currentTarget.select();
+    };
+    return /* @__PURE__ */ I(
+      "div",
+      {
+        onFocus: () => {
+          !e && w(!0), !e && (d == null || d());
+        },
+        ref: a,
+        children: [
+          m && /* @__PURE__ */ o("label", { "data-testid": "textfield-label-test", htmlFor: `${m}`, children: /* @__PURE__ */ o(D, { swStyle: 3, children: m, color: L }) }),
+          /* @__PURE__ */ I(
+            "div",
+            {
+              "data-testid": "textfield",
+              className: E(
+                V,
+                "inline-flex",
+                e ? "bg-surface-disabled cursor-not-allowed" : "bg-white",
+                $
+              ),
+              children: [
+                /* @__PURE__ */ o(
+                  R,
+                  {
+                    id: "decrease-stepper",
+                    color: f ? "active" : i ? "alert" : s ? "warning" : "default",
+                    icon: "Subtract",
+                    disabled: r === 0 || e,
+                    handleClick: H
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "input",
+                  {
+                    type: "number",
+                    autoFocus: T,
+                    name: m,
+                    min: 0,
+                    ref: b,
+                    id: m,
+                    className: E(
+                      `w-[3.5rem] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-center ${F[5]}`,
+                      e ? "bg-surface-disabled cursor-not-allowed" : ""
+                    ),
+                    placeholder: S,
+                    onChange: M,
+                    value: n,
+                    onClick: N,
+                    "data-testid": "stepper-test",
+                    disabled: e
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  R,
+                  {
+                    disabled: e,
+                    id: "stepper-increment",
+                    icon: "Add",
+                    color: f ? "active" : i ? "alert" : s ? "warning" : "default",
+                    handleClick: j
+                  }
+                )
+              ]
+            }
+          ),
+          k && /* @__PURE__ */ o(
+            J,
+            {
+              helperText: k,
+              warning: s,
+              error: i,
+              helperTextAndIconColor: O
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  C as Stepper
+};

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

@@ -0,0 +1,3 @@
+export declare const textFieldContainer = "h-[4rem] items-center gap-xs p-sm border-[0.1rem]";
+export declare const iconSize = "h-[2rem]";
+export declare const textFieldMessageEditor = "flex h-[4rem] px-5 items-center space-x-2.5 border-t border-transparent border-bcolor-subdued text-xl font-medium [&_path]:fill-surface-active";

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

@@ -0,0 +1,6 @@
+const e = "h-[4rem] items-center gap-xs p-sm border-[0.1rem]", t = "h-[2rem]", r = "flex h-[4rem] px-5 items-center space-x-2.5 border-t border-transparent border-bcolor-subdued text-xl font-medium [&_path]:fill-surface-active";
+export {
+  t as iconSize,
+  e as textFieldContainer,
+  r as textFieldMessageEditor
+};

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

@@ -0,0 +1,2 @@
+export { Switch } from './switch';
+export type { SwitchProps } from './switch';

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

@@ -0,0 +1,4 @@
+import { Switch as t } from "./switch.js";
+export {
+  t as Switch
+};

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

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+
+export type SwitchProps = {
+    /**
+     * A main, large title on the side of the switch
+     */
+    label?: string | React.ReactNode;
+    /**
+     * A smaller text at the bottom of label
+     */
+    helperText?: string | React.ReactNode;
+    /**
+     * Layout of the element: swicth on the left, and text on the right. Or vise-versa.
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Whether element is turned on by default or not
+     */
+    checked?: boolean;
+    /**
+     * variable to determine error state
+     */
+    error?: boolean;
+    /**
+     * variable to determine warning state
+     */
+    warning?: boolean;
+    /**
+     * Whether element is interactable or not
+     */
+    disabled?: boolean;
+    /**
+     * Function to fire on switch change
+     */
+    onChange?: () => void;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare function Switch({ label, helperText, labelPosition, checked, error, warning, onChange, disabled, autoFocus, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,184 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import * as d from "react";
+import H, { useId as M } from "react";
+import { b as k, u as A, c as j, a as P, d as F, e as U } from "../../../../index-DotfMcM0.js";
+import { u as q } from "../../../../index-BZPx6jYI.js";
+import { Typography as z } from "../../../styles/typography/typography.js";
+import { FormHelperText as L } from "../form-helper-text/form-helper-text.js";
+import { getHelperTextColor as O } from "../utils-for-forms/state-functions.js";
+import { t as w } from "../../../../bundle-mjs-CAy1p0fn.js";
+var b = "Switch", [D, oe] = j(b), [V, W] = D(b), R = d.forwardRef(
+  (e, c) => {
+    const {
+      __scopeSwitch: r,
+      name: a,
+      checked: s,
+      defaultChecked: u,
+      required: n,
+      disabled: t,
+      value: l = "on",
+      onCheckedChange: f,
+      form: i,
+      ...S
+    } = e, [p, m] = d.useState(null), g = k(c, (v) => m(v)), C = d.useRef(!1), y = p ? i || !!p.closest("form") : !0, [h, T] = A({
+      prop: s,
+      defaultProp: u ?? !1,
+      onChange: f,
+      caller: b
+    });
+    return /* @__PURE__ */ x(V, { scope: r, checked: h, disabled: t, children: [
+      /* @__PURE__ */ o(
+        P.button,
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": h,
+          "aria-required": n,
+          "data-state": E(h),
+          "data-disabled": t ? "" : void 0,
+          disabled: t,
+          value: l,
+          ...S,
+          ref: g,
+          onClick: F(e.onClick, (v) => {
+            T((B) => !B), y && (C.current = v.isPropagationStopped(), C.current || v.stopPropagation());
+          })
+        }
+      ),
+      y && /* @__PURE__ */ o(
+        _,
+        {
+          control: p,
+          bubbles: !C.current,
+          name: a,
+          value: l,
+          checked: h,
+          required: n,
+          disabled: t,
+          form: i,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+R.displayName = b;
+var I = "SwitchThumb", N = d.forwardRef(
+  (e, c) => {
+    const { __scopeSwitch: r, ...a } = e, s = W(I, r);
+    return /* @__PURE__ */ o(
+      P.span,
+      {
+        "data-state": E(s.checked),
+        "data-disabled": s.disabled ? "" : void 0,
+        ...a,
+        ref: c
+      }
+    );
+  }
+);
+N.displayName = I;
+var X = "SwitchBubbleInput", _ = d.forwardRef(
+  ({
+    __scopeSwitch: e,
+    control: c,
+    checked: r,
+    bubbles: a = !0,
+    ...s
+  }, u) => {
+    const n = d.useRef(null), t = k(n, u), l = q(r), f = U(c);
+    return d.useEffect(() => {
+      const i = n.current;
+      if (!i) return;
+      const S = window.HTMLInputElement.prototype, m = Object.getOwnPropertyDescriptor(
+        S,
+        "checked"
+      ).set;
+      if (l !== r && m) {
+        const g = new Event("click", { bubbles: a });
+        m.call(i, r), i.dispatchEvent(g);
+      }
+    }, [l, r, a]), /* @__PURE__ */ o(
+      "input",
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: r,
+        ...s,
+        tabIndex: -1,
+        ref: t,
+        style: {
+          ...s.style,
+          ...f,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+_.displayName = X;
+function E(e) {
+  return e ? "checked" : "unchecked";
+}
+var $ = R, G = N;
+function ae({
+  label: e,
+  helperText: c,
+  labelPosition: r = "left",
+  checked: a = !1,
+  error: s = !1,
+  warning: u = !1,
+  onChange: n,
+  disabled: t,
+  autoFocus: l = !1
+}) {
+  const f = M(), i = O(u, s, !!t);
+  return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ x("div", { className: w(" w-full flex gap-md", r === "right" && "flex-row-reverse justify-between"), children: [
+    /* @__PURE__ */ o("div", { className: w("pt-[0.2rem]"), children: /* @__PURE__ */ o(
+      $,
+      {
+        autoFocus: l,
+        className: w(
+          "w-[3.5rem] h-[2.1rem] rounded-[1.2rem] relative outline-none cursor-default",
+          a ? "bg-surface-activeInverted" : " bg-surface-defaultInverted",
+          t && "cursor-not-allowed bg-surface-disabled",
+          t && a && "bg-surface-disabledActive"
+        ),
+        id: f,
+        checked: a,
+        onCheckedChange: () => {
+          n && n();
+        },
+        disabled: t,
+        "data-testid": "switchRoot",
+        children: /* @__PURE__ */ o(
+          G,
+          {
+            className: w(
+              "block w-[1.6rem] h-[1.6rem] rounded-full transition-transform duration-100 translate-x-[0.3rem] will-change-transform data-[state=checked]:translate-x-[1.6rem] bg-glyph-defaultInverted",
+              t && "bg-glyph-disabled"
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ x("div", { className: "flex flex-col", children: [
+      e && /* @__PURE__ */ o("label", { htmlFor: f, children: H.isValidElement(e) ? e : /* @__PURE__ */ o(z, { swStyle: 5, children: e }) }),
+      c && /* @__PURE__ */ o(
+        L,
+        {
+          helperText: c,
+          warning: u,
+          error: s,
+          helperTextAndIconColor: i
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  ae as Switch
+};

package/dist/components/atoms/form/switch/switch.props.d.ts

@@ -0,0 +1,26 @@
+declare const switchPropDefs: {
+    size: {
+        type: string;
+        values: readonly ["1", "2", "3"];
+        default: string;
+        responsive: boolean;
+    };
+    variant: {
+        type: string;
+        values: readonly ["classic", "surface", "soft"];
+        default: string;
+    };
+    color: {
+        type: string;
+        default: string;
+    };
+    highContrast: {
+        type: string;
+        default: undefined;
+    };
+    radius: {
+        type: string;
+        default: undefined;
+    };
+};
+export { switchPropDefs };

package/dist/components/atoms/form/switch/switch.props.js

@@ -0,0 +1,19 @@
+const e = ["1", "2", "3"], t = ["classic", "surface", "soft"], s = {
+  size: { type: "enum", values: e, default: "2", responsive: !0 },
+  variant: { type: "enum", values: t, default: "surface" },
+  color: {
+    type: "enum",
+    default: "red"
+  },
+  highContrast: {
+    type: "boolean",
+    default: void 0
+  },
+  radius: {
+    type: "enum",
+    default: void 0
+  }
+};
+export {
+  s as switchPropDefs
+};

package/dist/components/atoms/form/textarea/Textarea.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from './textarea';
+
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/atoms/form/textarea/Textarea.stories.js

@@ -0,0 +1,22 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { Textarea as a } from "./textarea.js";
+const e = {
+  title: "@spotwork-ui/Textarea",
+  component: a,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, s = {
+  args: {
+    label: "Textarea"
+  }
+};
+export {
+  s as Primary,
+  e as default
+};

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

@@ -0,0 +1,2 @@
+export { Textarea } from './textarea';
+export type { TextareaProps } from './textarea';

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

@@ -0,0 +1,4 @@
+import { Textarea as a } from "./textarea.js";
+export {
+  a as Textarea
+};

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

@@ -0,0 +1,6 @@
+export declare const styles: (disabled: boolean | undefined) => {
+    container: string;
+    subContainer: string;
+    helperContainer: string;
+    textarea: string;
+};

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

@@ -0,0 +1,9 @@
+const t = (e) => ({
+  container: "flex flex-col w-full",
+  subContainer: "flex flex-col justify-center items-start gap-xs self-stretch",
+  helperContainer: "flex justify-start items-center gap-xs",
+  textarea: `self-stretch ${e ? "bg-surface-disabled" : "bg-surface-default"} opacity-100 px-[1rem] py-[0.75rem] focus:outline-none ${e && "cursor-not-allowed"}`
+});
+export {
+  t as styles
+};

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

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+
+export type TextareaProps = {
+    /**
+     * The variable to store typed in text
+     */
+    value: string;
+    /**
+     * placeholder
+     */
+    placeholder?: string;
+    /**
+     * inital amount of rows wants for the textarea
+     */
+    rows?: number;
+    /**
+     * The inital amount of columns wanted for the textarea
+     */
+    cols?: number;
+    /**
+     * the hint test that is at the bottom of the component
+     */
+    helperText?: string;
+    /**
+     * variable to determine error state
+     */
+    error?: boolean;
+    /**
+     * variable to determine warning state
+     */
+    warning?: boolean;
+    /**
+     * variable to determine disabled state
+     */
+    disabled?: boolean;
+    /**
+     * the handle change to determine the action of when a value is typed into the textarea
+     */
+    onChange: (value: string) => void;
+    /**
+     * The label that is placed at the top of the component
+     */
+    label?: string;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * optional?: autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,91 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import A, { useState as I } from "react";
+import { Icons as j } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { styles as F } from "./styles.js";
+import { c as f } from "../../../../index-fN7hCOo3.js";
+import { Typography as p } from "../../../styles/typography/typography.js";
+import { styleMap as H } from "../../../styles/typography/style.js";
+import { getLabelColor as R, getBorderClasses as _, getHelperTextColor as b } from "../utils-for-forms/state-functions.js";
+const J = A.forwardRef(
+  ({
+    value: d,
+    placeholder: x,
+    rows: h = 6,
+    cols: C = 50,
+    helperText: c,
+    error: t = !1,
+    warning: a = !1,
+    disabled: e = !1,
+    label: u,
+    onChange: v,
+    onBlur: r,
+    autoFocus: y = !1
+  }, T) => {
+    const [i, m] = I(!1), o = F(e), S = R(i, a, t, e), n = b(a, t, e), g = _(i, a, t, e);
+    return /* @__PURE__ */ l("div", { className: o.container, children: [
+      /* @__PURE__ */ s(
+        p,
+        {
+          swStyle: 3,
+          "data-testid": "labelTextarea",
+          color: S,
+          children: u
+        }
+      ),
+      /* @__PURE__ */ l("div", { className: f(o.subContainer), children: [
+        /* @__PURE__ */ s(
+          "textarea",
+          {
+            autoFocus: y,
+            ref: T,
+            onFocus: () => {
+              m(!0);
+            },
+            onBlur: () => {
+              m(!1), r == null || r();
+            },
+            "data-testid": "textarea",
+            disabled: !!e,
+            onChange: (N) => {
+              !e && v(N.target.value);
+            },
+            className: f(
+              g,
+              o.textarea,
+              H[5]
+            ),
+            value: d,
+            placeholder: x,
+            rows: h,
+            cols: C
+          }
+        ),
+        c && /* @__PURE__ */ l("div", { className: o.helperContainer, children: [
+          (t || a) && /* @__PURE__ */ s(
+            j,
+            {
+              disabled: !0,
+              icon: t ? "AlertSmall" : "WarningSmall",
+              color: n,
+              id: "IconHintTextarea"
+            }
+          ),
+          /* @__PURE__ */ s(
+            p,
+            {
+              "data-testid": "hintTextarea",
+              color: n,
+              children: c,
+              swStyle: 1
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+export {
+  J as Textarea
+};

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

@@ -0,0 +1,2 @@
+export { Textfield } from './textfield';
+export type { TextfieldProps } from './textfield';

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

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

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

@@ -0,0 +1,4 @@
+export declare const textFieldContainer = "h-[4rem] flex items-center self-stretch  gap-md";
+export declare const iconSize = "h-[2rem] w-[2rem]";
+export declare const helperTextContainer = "flex items-center self-stretch gap-xs";
+export declare const textFieldMessageEditor = "flex h-[4rem] px-5 items-center space-x-2.5 self-stretch border-t border-transparent border-bcolor-subdued text-xl font-medium [&_path]:fill-surface-active";

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

@@ -0,0 +1,7 @@
+const e = "h-[4rem] flex items-center self-stretch  gap-md", t = "h-[2rem] w-[2rem]", r = "flex items-center self-stretch gap-xs", s = "flex h-[4rem] px-5 items-center space-x-2.5 self-stretch border-t border-transparent border-bcolor-subdued text-xl font-medium [&_path]:fill-surface-active";
+export {
+  r as helperTextContainer,
+  t as iconSize,
+  e as textFieldContainer,
+  s as textFieldMessageEditor
+};