@temp-spotwork/ui 1.4.3

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

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+import { LabelValuePair } from '../form-types';
+
+export type MultiselectProps = {
+    /**
+     * Variable of type string array that allows the user to save the selected options into an array that will be pass through an on submit function.
+     */
+    options: string[] | LabelValuePair[];
+    /**
+     * Variable of type number that allows the developer to set the max amount of options the end-user is allowed to select.
+     */
+    warningLimit?: number;
+    /**
+     * Variable of type number that allows the developer to set the max amount of options the end-user is allowed to select.
+     */
+    errorLimit?: number;
+    /**
+     * Variable of type string that allows the developer to communicate with the end user on any set rules of the multi-select in the given scenario.
+     */
+    label?: string;
+    /**
+     * the hint test that is at the bottom of the component
+     */
+    helperText?: string;
+    /**
+     * Variable of type string that allows the user to set an initial set of selected values.
+     */
+    value: string[];
+    /**
+     * Variable of type boolean that triggers error state.
+     */
+    error?: boolean;
+    /**
+     * Variable of type boolean that triggers warning state.
+     */
+    warning?: boolean;
+    /**
+     * variable to determine disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Function that allows the parent to update its own state based on selected options.
+     */
+    onChange: React.Dispatch<React.SetStateAction<string[]>>;
+    /**
+     * ref to the input of textfield
+     */
+    typeaheadInputRef?: React.LegacyRef<HTMLInputElement> | undefined;
+    /**
+     * pass onBlur func
+     */
+    onBlur?: () => void;
+    /**
+     * list of required or disabled options that can't be changed
+     *
+     */
+    required?: string[];
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare function Multiselect({ options, warningLimit, errorLimit, label, helperText, value, error, warning, disabled, onChange, typeaheadInputRef, onBlur, required, autoFocus, }: MultiselectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,109 @@
+import { jsxs as O, jsx as t } from "react/jsx-runtime";
+import { useState as v, useRef as $ } from "react";
+import { Typeahead as z } from "../typeahead/typeahead.js";
+import { Chips as L } from "../chips/chips.js";
+import { Typography as D } from "../../../styles/typography/typography.js";
+import { getBorderClasses as E, getLabelColor as G, getHelperTextColor as J } from "../utils-for-forms/state-functions.js";
+import { c as K } from "../../../../index-fN7hCOo3.js";
+import { FormHelperText as P } from "../form-helper-text/form-helper-text.js";
+function ee({
+  options: N,
+  warningLimit: b = 1e3,
+  errorLimit: B = 1e3,
+  label: d,
+  helperText: h,
+  value: s,
+  error: c = !1,
+  warning: a = !1,
+  disabled: r = !1,
+  onChange: p,
+  typeaheadInputRef: R,
+  onBlur: u,
+  required: f,
+  autoFocus: j = !1
+}) {
+  const [C, x] = v(!1), g = $(s), [y, S] = v(""), w = (e) => {
+    s.includes(e) ? p(s.filter((m) => m !== e)) : p([...s, e]);
+  }, A = (e) => {
+    S(e);
+  }, l = (e) => typeof e == "string" ? e : e.value, o = (e) => typeof e == "string" ? e : e.label, T = N.filter(
+    (e) => o(e).toLowerCase().includes(y.toLowerCase())
+  ), F = g.current.map((e) => T.find((m) => l(m) === e)).filter(Boolean), H = T.filter(
+    (e) => !g.current.includes(l(e))
+  ), I = [...F, ...H], n = s.length, V = G(C, a, c, r), k = J(a, c, r), M = E(C, a, c, r);
+  let i;
+  return c || n >= B ? i = "alert" : a || n >= b ? i = "warning" : n > 0 && (i = "affirmative"), /* @__PURE__ */ O(
+    "div",
+    {
+      className: K("w-full "),
+      onFocus: () => {
+        x(!0);
+      },
+      onBlur: () => {
+        x(!1), u && u();
+      },
+      children: [
+        d && /* @__PURE__ */ t(D, { color: V, swStyle: 3, children: d }),
+        /* @__PURE__ */ O(
+          "div",
+          {
+            className: `flex w-full p-4 flex-col items-start gap-4 max-h-[24rem] self-stretch ${M} bg-surface-default`,
+            children: [
+              /* @__PURE__ */ t(
+                z,
+                {
+                  autoFocus: j,
+                  inputRef: R,
+                  value: y,
+                  onChange: A,
+                  placeholder: "Search...",
+                  endIconClick: () => {
+                    S("");
+                  }
+                }
+              ),
+              /* @__PURE__ */ t("div", { className: "flex flex-wrap overflow-y-auto min-w-0 w-full", children: I.map((e) => /* @__PURE__ */ t(
+                "div",
+                {
+                  className: "min-w-0 max-w-full p-1 my-1",
+                  children: f != null && f.includes(l(e)) ? /* @__PURE__ */ t(
+                    L,
+                    {
+                      chipText: o(e),
+                      setChipSelected: () => w(l(e)),
+                      chipSelected: s.includes(l(e)),
+                      color: "disabled",
+                      id: l(e)
+                    }
+                  ) : /* @__PURE__ */ t(
+                    L,
+                    {
+                      chipText: o(e),
+                      setChipSelected: () => w(l(e)),
+                      chipSelected: s.includes(l(e)),
+                      color: i,
+                      id: l(e)
+                    }
+                  )
+                },
+                l(e)
+              )) })
+            ]
+          }
+        ),
+        h && /* @__PURE__ */ t(
+          P,
+          {
+            helperText: h,
+            warning: a,
+            error: c,
+            helperTextAndIconColor: k
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ee as Multiselect
+};

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

@@ -0,0 +1,2 @@
+export { Navigation } from './navigation';
+export type { NavigationProps } from './navigation';

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

@@ -0,0 +1,4 @@
+import { Navigation as i } from "./navigation.js";
+export {
+  i as Navigation
+};

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

@@ -0,0 +1,19 @@
+export type NavigationProps = {
+    /**
+     * Each type has different style, and "pending" status disable on-click
+     */
+    type: 'pending' | 'inProgress' | 'complete';
+    /**
+     * Action that happens when you click the button
+     */
+    onClick?: (id: string) => void;
+    /**
+     * Text in the item
+     */
+    label: string;
+    /**
+     * Small text in the corner on top of title
+     */
+    subLabel: string;
+};
+export declare function Navigation({ type, onClick, label, subLabel, }: NavigationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Typography as i } from "../../../styles/typography/typography.js";
+import { c as o } from "../../../../index-fN7hCOo3.js";
+import { subLabelClass as l, titleClass as a, container as t, pendingBorder as m, activeBorder as p } from "./styles.js";
+function v({
+  type: e,
+  onClick: s,
+  label: n,
+  subLabel: d
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: o(
+        t,
+        e === "pending" ? m : `${p} cursor-pointer`
+      ),
+      onClick: () => s && e !== "pending" && s(d),
+      children: [
+        /* @__PURE__ */ r("div", { className: o(l), children: /* @__PURE__ */ r(i, { color: "subdued", swStyle: 1, children: d }) }),
+        /* @__PURE__ */ r("div", { className: o(a), children: e === "pending" ? /* @__PURE__ */ r(i, { color: "subdued", swStyle: 7, children: n }) : /* @__PURE__ */ r(
+          i,
+          {
+            swStyle: 7,
+            color: e === "inProgress" ? "active" : "default",
+            children: n
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  v as Navigation
+};

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

@@ -0,0 +1,5 @@
+export declare const container = "flex flex-col justify-center";
+export declare const pendingBorder = "border-b-[0.25rem] border-bcolor-default";
+export declare const activeBorder = "border-b-[0.25rem] border-bcolor-active";
+export declare const subLabelClass = "mb-1 mt-4";
+export declare const titleClass = "mb-5";

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

@@ -0,0 +1,8 @@
+const e = "flex flex-col justify-center", r = "border-b-[0.25rem] border-bcolor-default", o = "border-b-[0.25rem] border-bcolor-active", t = "mb-1 mt-4", b = "mb-5";
+export {
+  o as activeBorder,
+  e as container,
+  r as pendingBorder,
+  t as subLabelClass,
+  b as titleClass
+};

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

@@ -0,0 +1,2 @@
+export { Radiobutton } from './radiobutton';
+export type { RadiobuttonProps } from './radiobutton';

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

@@ -0,0 +1,4 @@
+import { Radiobutton as r } from "./radiobutton.js";
+export {
+  r as Radiobutton
+};

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

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+
+export type RadiobuttonProps = {
+    /**
+     * Label associated with the radio button.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Value associated with the radio button
+     */
+    value: string;
+    /**
+     * Hint text
+     **/
+    helperText?: string;
+    /**
+     * Handle Change
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Option checked or not
+     */
+    checked?: boolean;
+    /**
+     * variable to determine error state
+     */
+    error?: boolean;
+    /**
+     * variable to determine warning state
+     */
+    warning?: boolean;
+    /**
+     * is the button disabled
+     */
+    disabled?: boolean;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare function Radiobutton({ label, value, checked, helperText, onChange, error, warning, disabled, autoFocus, }: RadiobuttonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,82 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import u, { useId as b } from "react";
+import { Typography as g } from "../../../styles/typography/typography.js";
+import { getHelperTextColor as x } from "../utils-for-forms/state-functions.js";
+import { t as n } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { FormHelperText as y } from "../form-helper-text/form-helper-text.js";
+function N({
+  label: t,
+  value: l,
+  checked: r = !1,
+  helperText: m,
+  onChange: d,
+  error: s = !1,
+  warning: a = !1,
+  disabled: e = !1,
+  autoFocus: f = !1
+}) {
+  const i = b(), p = x(a, s, e);
+  return (
+    // outer div for the entire container
+    /* @__PURE__ */ c("div", { className: "flex items-start gap-md", children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          className: n(
+            "w-[2.5rem] h-[2.5rem]flex justify-center items-center gap-sm"
+          ),
+          children: /* @__PURE__ */ o(
+            "div",
+            {
+              onClick: () => !e && d && d(l),
+              "data-testid": `radiobutton-${l}`,
+              className: n(
+                "w-[2.1rem] h-[2.1rem] flex justify-center items-center gap-md rounded-[1.2rem] border-[0.1rem]",
+                "bg-[#FFF] border-[0.1rem] border-[#888] cursor-pointer",
+                r && "bg-glyph-active cursor-pointer border-none",
+                a && r && "border-none bg-surface-warningInverted",
+                a && !r && "border-bcolor-warning",
+                s && r && "border-none  bg-surface-alertInverted",
+                s && !r && "border-bcolor-alert ",
+                e && !r && "bg-surface-disabled cursor-not-allowed",
+                e && r && "bg-surface-disabledActive border-none cursor-not-allowed"
+              ),
+              children: /* @__PURE__ */ o(
+                "input",
+                {
+                  autoFocus: f,
+                  "data-testid": `checkbox-${i}`,
+                  "aria-selected": r,
+                  id: i,
+                  type: "radio",
+                  value: l,
+                  className: n(
+                    "checkbox appearance-none rounded-[1.2rem] w-[0.9rem] h-[0.9rem]",
+                    "bg-[#FFF] cursor-pointer",
+                    e && !r && "bg-surface-disabled cursor-not-allowed",
+                    e && r && "bg-glyph-disabled cursor-not-allowed"
+                  )
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: n("flex flex-col justify-start items-start"), children: [
+        t && /* @__PURE__ */ o("label", { htmlFor: i, children: u.isValidElement(t) ? t : /* @__PURE__ */ o(g, { swStyle: 5, children: t }) }),
+        m && /* @__PURE__ */ o(
+          y,
+          {
+            helperText: m,
+            warning: a,
+            error: s,
+            helperTextAndIconColor: p
+          }
+        )
+      ] })
+    ] })
+  );
+}
+export {
+  N as Radiobutton
+};

package/dist/components/atoms/form/recurrence-week/RecurrenceWeek.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as MetaType, StoryObj } from '@storybook/react';
+import { RecurrenceWeek } from './recurrence-week';
+
+declare const Meta: MetaType<typeof RecurrenceWeek>;
+export default Meta;
+type Story = StoryObj<typeof RecurrenceWeek>;
+export declare const Basic: Story;

package/dist/components/atoms/form/recurrence-week/RecurrenceWeek.stories.js

@@ -0,0 +1,37 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { RecurrenceWeek as c } from "./recurrence-week.js";
+const u = {
+  component: c,
+  decorators: [
+    (e, { args: r }) => {
+      const [s, a] = t([
+        !1,
+        !1,
+        !1,
+        !1,
+        !1,
+        !1,
+        !1
+      ]);
+      return /* @__PURE__ */ f(
+        e,
+        {
+          args: {
+            ...r,
+            recurrence: s,
+            setRecurrence: a
+          }
+        }
+      );
+    }
+  ]
+}, m = {
+  args: {
+    warningRecurrence: [!1, !1, !1, !0, !1, !1, !1]
+  }
+};
+export {
+  m as Basic,
+  u as default
+};

package/dist/components/atoms/form/recurrence-week/index.d.ts

@@ -0,0 +1,2 @@
+export { RecurrenceWeek } from './recurrence-week';
+export type { RecurrenceWeekProps, Recurrence } from './recurrence-week';

package/dist/components/atoms/form/recurrence-week/index.js

@@ -0,0 +1,4 @@
+import { RecurrenceWeek as c } from "./recurrence-week.js";
+export {
+  c as RecurrenceWeek
+};

package/dist/components/atoms/form/recurrence-week/recurrence-week.d.ts

@@ -0,0 +1,32 @@
+export type Recurrence = [
+    boolean,
+    boolean,
+    boolean,
+    boolean,
+    boolean,
+    boolean,
+    boolean
+];
+export type RecurrenceWeekProps = {
+    /**
+     *  array of days
+     */
+    recurrence: Recurrence;
+    /**
+     *  change state
+     */
+    setRecurrence?: React.Dispatch<React.SetStateAction<Recurrence>>;
+    /**
+     *  warning state
+     */
+    warningRecurrence?: Recurrence;
+    /**
+     *  disabled state
+     */
+    disabled?: boolean;
+    /**
+     * localization
+     */
+    locale?: string;
+};
+export declare function RecurrenceWeek({ recurrence, setRecurrence, warningRecurrence, disabled, locale, }: RecurrenceWeekProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/form/recurrence-week/recurrence-week.js

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import { RecurrenceDay as u } from "../../daybubble/recurrence-day/recurrence-day.js";
+function g({
+  recurrence: t,
+  setRecurrence: n,
+  warningRecurrence: i,
+  disabled: a,
+  locale: m
+}) {
+  const f = (r, o) => {
+    if (n) {
+      const e = [...t];
+      e[r] = !o, n(e);
+    }
+  }, l = (r) => {
+    if (i && i[r] === !0)
+      return !0;
+  };
+  return /* @__PURE__ */ c("div", { className: "shrink-0 grow-0 flex gap-md", children: t.map((r, o) => /* @__PURE__ */ c(
+    u,
+    {
+      day: o,
+      active: r,
+      onClick: n ? () => f(o, r) : void 0,
+      disabled: a,
+      warning: l(o),
+      locale: m
+    },
+    o
+  )) });
+}
+export {
+  g as RecurrenceWeek
+};

package/dist/components/atoms/form/stepper/Stepper.stories.d.ts

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

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

@@ -0,0 +1,30 @@
+import { f as e } from "../../../../index-DfdAzObv.js";
+import { Stepper as o } from "./stepper.js";
+const a = {
+  title: "@spotwork-ui/Stepper",
+  component: o,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    onChange: e(),
+    value: { control: "number" },
+    helperText: { control: "text" },
+    error: { control: "boolean" },
+    warning: { control: "boolean" },
+    disabled: { control: "boolean" }
+  }
+}, l = {
+  args: {
+    value: 1,
+    label: "Stepper",
+    error: !1,
+    warning: !1,
+    disabled: !1
+  }
+};
+export {
+  l as Primary,
+  a as default
+};

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

@@ -0,0 +1,2 @@
+export { Stepper } from './stepper';
+export type { StepperProps } from './stepper';

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

@@ -0,0 +1,4 @@
+import { Stepper as r } from "./stepper.js";
+export {
+  r as Stepper
+};

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

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+
+export type StepperProps = {
+    /**
+     * Trigger error state.
+     */
+    error?: boolean;
+    /**
+     * Trigger warning state.
+     */
+    warning?: boolean;
+    /**
+     * Display helper text.
+     */
+    helperText?: string;
+    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?: React.Dispatch<React.SetStateAction<number>>;
+    /**
+     * Set value for controlled components
+     */
+    value?: number;
+    /**
+     * value change step
+     */
+    step?: number;
+    /**
+     * Pass onFocus
+     */
+    onFocus?: () => void;
+    /**
+     * Pass onBlur
+     */
+    onBlur?: () => void;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLInputElement>>;