@temp-spotwork/ui 1.4.3

package/dist/components/atoms/form/calendar/types.d.ts

@@ -0,0 +1,50 @@
+import { GlyphColor } from '../../../styles/colors';
+
+/**
+ * Represents a date in the calendar with optional metadata
+ * Used for both selected dates and date state management
+ */
+export type CalendarDate = {
+    /** The actual date value */
+    date: Date;
+    /** Optional color state for visual indication (warning, alert, etc.) */
+    color?: GlyphColor;
+    /** Whether this specific date is disabled regardless of min/max constraints */
+    isDisabled?: boolean;
+    /** Optional tooltip content to display on hover */
+    tooltip?: string | React.ReactNode;
+};
+/**
+ * Props for the main Calendar component
+ * Defines all configuration options and callbacks for calendar functionality
+ */
+export type CalendarProps = {
+    /** Optional header content to display above the calendar */
+    header?: React.ReactNode;
+    /** Array of currently selected dates with their metadata */
+    selectedDates?: CalendarDate[];
+    /** Callback triggered when date selection changes */
+    onDateChange?: (date: CalendarDate[]) => void;
+    /** Callback triggered when navigating to a different month */
+    onCurrentMonthChange?: (date: Date) => void;
+    /** The month currently being displayed (controls the calendar view) */
+    currentMonth?: Date;
+    /** Whether the entire calendar is disabled */
+    disabled?: boolean;
+    /** Function to override tooltip content for selected dates */
+    overrideTooltip?: (date: CalendarDate) => string | React.ReactNode;
+    /** Minimum date that can be selected */
+    minDate?: Date;
+    /** Maximum date that can be selected */
+    maxDate?: Date;
+    /**
+     * The timezone for all date operations
+     * Must be a valid timezone string (e.g., 'America/New_York', 'UTC')
+     * If not provided, will auto-detect the user's timezone
+     */
+    timezone?: string;
+    /** Additional CSS classes to apply to the calendar container */
+    className?: string;
+    /** Whether the calendar is in read-only mode (no selection allowed) */
+    readOnly?: boolean;
+};

package/dist/components/atoms/form/calendar/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+
+export type CheckboxProps = {
+    /**
+     * a variable containing a true or false state that is changed when the checkbox is clicked or unclicked
+     */
+    checked: boolean;
+    /**
+     * the handleChange that changes the checkboxOption state by taking the event of the checkbox and setting setstate action accordingly
+     */
+    onChange?: () => void;
+    /**
+     * a customizable string that is displayed as a label for the checkbox
+     */
+    label?: string | React.ReactNode;
+    /**
+     * a customizable string that is displayed as a hint for the checkbox
+     */
+    helperText?: string;
+    /**
+     * variable to determine error state
+     */
+    error?: boolean;
+    /**
+     * variable to determine warning state
+     */
+    warning?: boolean;
+    /**
+     * option disabled state
+     */
+    disabled?: boolean;
+    /**
+     * optional?: autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare function Checkbox({ label, onChange, checked, helperText, error, warning, disabled, autoFocus, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,67 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { C as f, a as b } from "../../../../index-DrfOymtc.js";
+import { Icons as p } from "../../icons/icons.js";
+import "../../icons/iconsSVGs/Large/Profile.js";
+import "../../icons/iconsSVGs/Small/Profile.js";
+import { Typography as u } from "../../../styles/typography/typography.js";
+import { FormHelperText as x } from "../form-helper-text/form-helper-text.js";
+import { getHelperTextColor as g } from "../utils-for-forms/state-functions.js";
+import h, { useId as v } from "react";
+import { t as C } from "../../../../bundle-mjs-CAy1p0fn.js";
+function _({
+  label: t,
+  onChange: i,
+  checked: e,
+  helperText: a,
+  error: l = !1,
+  warning: s = !1,
+  disabled: o = !1,
+  autoFocus: d = !1
+}) {
+  const n = v(), c = g(s, l, o);
+  return /* @__PURE__ */ m("div", { className: "flex items-start gap-md", children: [
+    /* @__PURE__ */ r("div", { className: "flex w-[2.5rem] h-[2.5rem] justify-center items-center gap-md", children: /* @__PURE__ */ r(
+      f,
+      {
+        disabled: o,
+        autoFocus: d,
+        checked: e,
+        onCheckedChange: i,
+        className: C(
+          "w-[2rem] h-[2rem] border rounded border-bcolor-default flex items-center justify-centers",
+          e && "border-none bg-surface-activeInverted",
+          s && e && "border-none bg-surface-warningInverted",
+          s && !e && "border-bcolor-warning",
+          l && e && "border-none  bg-surface-alertInverted",
+          l && !e && "border-bcolor-alert ",
+          o && e && "border-none bg-surface-disabledActive cursor-not-allowed",
+          o && !e && "border-bcolor-default bg-surface-disabled cursor-not-allowed"
+        ),
+        id: n,
+        children: /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+          p,
+          {
+            disabled: !0,
+            icon: "TickSmall",
+            color: o ? "disabled" : "overlay"
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
+      t && /* @__PURE__ */ r("label", { htmlFor: n, children: h.isValidElement(t) ? t : /* @__PURE__ */ r(u, { swStyle: 5, children: t }) }),
+      a && /* @__PURE__ */ r(
+        x,
+        {
+          helperText: a,
+          warning: s,
+          error: l,
+          helperTextAndIconColor: c
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  _ as Checkbox
+};

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';

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

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

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

@@ -0,0 +1,46 @@
+import { ColorVariants } from './styles';
+import { SvgKey } from '../../icons';
+
+export type ChipsProps = {
+    /**
+     *  chip id
+     */
+    id: string;
+    /**
+     *  chip state, works for largeActionable and smallActionable variants
+     */
+    chipSelected?: boolean;
+    /**
+     * return the element ID, works for largeActionable and smallActionable variants
+     */
+    setChipSelected?: (id: string) => void;
+    /**
+     * chip text
+     */
+    chipText: string;
+    /**
+     * hover text
+     */
+    hoverText?: string;
+    /**
+     * only for actionable chips
+     */
+    disabled?: boolean;
+    /**
+     *  chip color. In figma it is defined as Affirmative | Warning | Alert | Success | Disabled  correspondingly
+     */
+    color: ColorVariants;
+    /**
+     *  chip variant
+     */
+    variant?: 'largeActionable' | 'smallActionable' | 'largeReadOnly' | 'smallReadOnly' | 'pill' | 'largeActionablePill';
+    /**
+     *  you can define letter or our svg key, for example 'icons:Tick'
+     */
+    infoBubbleContent?: string | `icons:${SvgKey}`;
+    /**
+     * optional autoFocus
+     */
+    autoFocus?: boolean;
+};
+export declare function Chips({ id, chipText, hoverText, setChipSelected, chipSelected, disabled, color, variant, infoBubbleContent, autoFocus, }: ChipsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,177 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { colorVariants as A, badgeColorMapInverted as k, classesMap as O } from "./styles.js";
+import { Icons as x } from "../../icons/icons.js";
+import { svgs as b } from "../../icons/iconMap.js";
+import { c as w } from "../../../../index-fN7hCOo3.js";
+import { Typography as m } from "../../../styles/typography/typography.js";
+import { Badge as R } from "../../badge/badge.js";
+import { t as v } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Tooltip as j } from "../../tooltip/tooltip.js";
+function z({
+  id: l,
+  chipText: c,
+  hoverText: N,
+  setChipSelected: y,
+  chipSelected: e,
+  disabled: g = !1,
+  color: d,
+  variant: n = "largeActionable",
+  infoBubbleContent: r,
+  autoFocus: p = !1
+}) {
+  const $ = "default", u = () => {
+    y && y(l);
+  }, i = A[d], h = n === "smallReadOnly" ? d : k[d], a = O[n](i), s = typeof r == "string" && r.startsWith("icons:") && Object.keys(b).includes(r.split("icons:")[1]) ? /* @__PURE__ */ t(
+    x,
+    {
+      disabled: !0,
+      icon: r.split("icons:")[1],
+      color: i,
+      id: r.split("icons:")[1]
+    }
+  ) : r && typeof r == "string" ? /* @__PURE__ */ t(R, { text: r, color: h }) : null;
+  let o = null;
+  return n === "pill" && (o = /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": `pill-${l}`,
+      "aria-selected": e,
+      className: v(a.container, "h-[2rem]", "min-w-0", "max-w-full"),
+      children: /* @__PURE__ */ t(
+        m,
+        {
+          "data-testid": `chip-text-${l}`,
+          children: c,
+          color: i,
+          swStyle: 1,
+          className: "truncate w-full"
+        }
+      )
+    }
+  )), n === "largeReadOnly" && (o = /* @__PURE__ */ f(
+    "div",
+    {
+      "data-testid": `largeReadOnly-${l}`,
+      className: w(a.container, "min-w-0", "max-w-full", `${s ? "pl-xxs pr-md" : "px-md"} `),
+      children: [
+        s && /* @__PURE__ */ t("div", { "data-testid": `leading-icon-${l}`, children: s }),
+        /* @__PURE__ */ t(
+          m,
+          {
+            "data-testid": `chip-text-${l}`,
+            children: c,
+            swStyle: 3,
+            color: i,
+            className: "truncate w-full"
+          }
+        )
+      ]
+    }
+  )), n === "largeActionablePill" && (o = /* @__PURE__ */ f(
+    "button",
+    {
+      autoFocus: p,
+      type: "button",
+      "data-testid": `largeActionablePill-${l}`,
+      "aria-selected": e,
+      onClick: d === "disabled" ? () => {
+      } : u,
+      disabled: g,
+      className: w(
+        a.container,
+        "min-w-0",
+        "max-w-full",
+        `${s ? "pl-xxs pr-md" : "px-md"} `,
+        e ? a.containerSelected : a.containerUnselected
+      ),
+      children: [
+        s && /* @__PURE__ */ t("div", { "data-testid": `leading-icon-${l}`, children: s }),
+        /* @__PURE__ */ t(
+          m,
+          {
+            "data-testid": `chip-text-${l}`,
+            children: c,
+            swStyle: 3,
+            color: i,
+            className: "truncate w-full"
+          }
+        )
+      ]
+    }
+  )), n === "smallReadOnly" && (o = /* @__PURE__ */ f("div", { "data-testid": `smallReadOnly-${l}`, className: w(a.container, "min-w-0", "max-w-full"), children: [
+    s && /* @__PURE__ */ t("div", { "data-testid": `leading-icon-${l}`, children: s }),
+    /* @__PURE__ */ t(
+      m,
+      {
+        "data-testid": `chip-text-${l}`,
+        children: c,
+        swStyle: 1,
+        color: i,
+        className: "truncate w-full"
+      }
+    )
+  ] })), n === "smallActionable" && (o = /* @__PURE__ */ f(
+    "button",
+    {
+      autoFocus: p,
+      type: "button",
+      "data-testid": `smallActionable-${l}`,
+      "aria-selected": e,
+      onClick: d === "disabled" ? () => {
+      } : u,
+      disabled: g,
+      className: w(
+        a.container,
+        "min-w-0",
+        "max-w-full",
+        e ? a.containerSelected : a.containerUnselected
+      ),
+      children: [
+        e && s && /* @__PURE__ */ t("div", { "data-testid": `leading-icon-${l}`, children: s }),
+        /* @__PURE__ */ t(
+          m,
+          {
+            "data-testid": `chip-text-${l}`,
+            children: c,
+            swStyle: 3,
+            color: e ? i : $,
+            className: "truncate w-full"
+          }
+        )
+      ]
+    }
+  )), (n === "largeActionable" || n === void 0) && (o = /* @__PURE__ */ f(
+    "button",
+    {
+      autoFocus: p,
+      "data-testid": `largeActionable-${l}`,
+      type: "button",
+      "aria-selected": e,
+      onClick: d === "disabled" ? () => {
+      } : u,
+      disabled: g,
+      className: w(
+        a.container,
+        "min-w-0",
+        "max-w-full",
+        e ? a.containerSelected : a.containerUnselected
+      ),
+      children: [
+        e && /* @__PURE__ */ t(x, { disabled: !0, icon: "TickSmall", color: i }),
+        /* @__PURE__ */ t(
+          m,
+          {
+            "data-testid": `chip-text-${l}`,
+            children: c,
+            swStyle: 3,
+            color: e ? i : $,
+            className: "truncate w-full"
+          }
+        )
+      ]
+    }
+  )), /* @__PURE__ */ t(j, { trigger: o, content: N || c });
+}
+export {
+  z as Chips
+};

package/dist/components/atoms/form/chips/chips.stories.d.ts

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

package/dist/components/atoms/form/chips/chips.stories.js

@@ -0,0 +1,24 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { Chips as r } from "./chips.js";
+const a = {
+  title: "@spotwork-ui/chips",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, s = {
+  args: {
+    chipText: "some chips",
+    color: "affirmative",
+    chipSelected: !1
+  }
+};
+export {
+  s as Primary,
+  a as default
+};

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

@@ -0,0 +1,2 @@
+export { Chips } from './chips';
+export type { ChipsProps } from './chips';

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

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

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

@@ -0,0 +1,77 @@
+import { BadgeColorVariants } from '../../badge/badge';
+
+export declare const largeActionable: (secondary: string) => {
+    container: string;
+    containerSelected: string;
+    containerUnselected: string;
+};
+export declare const smallActionable: (secondary: string) => {
+    container: string;
+    containerSelected: string;
+    containerUnselected: string;
+};
+export declare const pill: (secondary: string) => {
+    container: string;
+    containerSelected: string;
+    containerUnselected: string;
+};
+export declare const largeReadOnly: (secondary: string) => {
+    container: string;
+    containerSelected: string;
+    containerUnselected: string;
+};
+export declare const largeActionablePill: (secondary: string) => {
+    container: string;
+    containerSelected: string;
+    containerUnselected: string;
+};
+export declare const smallReadOnly: () => {
+    container: string;
+    containerSelected: string;
+    containerUnselected: string;
+};
+export declare const classesMap: {
+    largeReadOnly: (secondary: string) => {
+        container: string;
+        containerSelected: string;
+        containerUnselected: string;
+    };
+    smallReadOnly: () => {
+        container: string;
+        containerSelected: string;
+        containerUnselected: string;
+    };
+    largeActionable: (secondary: string) => {
+        container: string;
+        containerSelected: string;
+        containerUnselected: string;
+    };
+    smallActionable: (secondary: string) => {
+        container: string;
+        containerSelected: string;
+        containerUnselected: string;
+    };
+    pill: (secondary: string) => {
+        container: string;
+        containerSelected: string;
+        containerUnselected: string;
+    };
+    largeActionablePill: (secondary: string) => {
+        container: string;
+        containerSelected: string;
+        containerUnselected: string;
+    };
+};
+export declare const colorVariants: {
+    affirmative: string;
+    success: string;
+    warning: string;
+    alert: string;
+    disabled: string;
+};
+export type ColorVariants = keyof typeof colorVariants;
+type BadgeColor = {
+    [key: string]: BadgeColorVariants;
+};
+export declare const badgeColorMapInverted: BadgeColor;
+export {};

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

@@ -0,0 +1,55 @@
+const n = (e) => ({
+  container: "w-max max-w-full h-[2.5 rem] border-[0.1rem] rounded-xs px-sm py-xxs inline-flex flex-row items-center gap-xs",
+  containerSelected: `bg-surface-${e} border-none`,
+  containerUnselected: "bg-surface-default border-bcolor-default"
+}), r = (e) => ({
+  container: "w-max max-w-full h-[2.5 rem] border-[0.1rem] rounded-xs flex flex-row items-center gap-xs",
+  containerSelected: `bg-surface-${e} border-none pr-sm pl-xs`,
+  containerUnselected: "bg-surface-default border-bcolor-default px-sm"
+}), a = (e) => ({
+  container: `w-max max-w-full h-[2.5rem] inline-flex rounded-xs px-xxs bg-surface-${e}`,
+  containerSelected: "",
+  containerUnselected: ""
+}), l = (e) => ({
+  container: `w-max max-w-full h-[2.5rem] rounded-xxl inline-flex flex-row items-center gap-xxs bg-surface-${e}`,
+  containerSelected: "",
+  containerUnselected: ""
+}), t = (e) => ({
+  container: `w-max max-w-full h-[2.5rem] rounded-xxl inline-flex flex-row items-center gap-xxs bg-surface-${e}`,
+  containerSelected: `bg-surface-${e} border-none`,
+  containerUnselected: `bg-surface-${e} border-none`
+}), c = () => ({
+  container: "w-max max-w-full h-[2.5rem] rounded-xxl inline-flex flex-row items-center gap-xxs bg-[transparent]",
+  containerSelected: "",
+  containerUnselected: ""
+}), s = {
+  largeReadOnly: l,
+  smallReadOnly: c,
+  largeActionable: n,
+  smallActionable: r,
+  pill: a,
+  largeActionablePill: t
+}, o = {
+  affirmative: "active",
+  success: "success",
+  warning: "warning",
+  alert: "alert",
+  disabled: "disabled"
+}, i = {
+  affirmative: "affirmativeInverted",
+  success: "successInverted",
+  warning: "warningInverted",
+  alert: "alertInverted",
+  disabled: "disabledInverted"
+};
+export {
+  i as badgeColorMapInverted,
+  s as classesMap,
+  o as colorVariants,
+  n as largeActionable,
+  t as largeActionablePill,
+  l as largeReadOnly,
+  a as pill,
+  r as smallActionable,
+  c as smallReadOnly
+};

package/dist/components/atoms/form/dateselect/date-calendar.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+
+export type DateCalendarProps = {
+    /**
+     * 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 date changes
+     */
+    onDateChange: (date: string) => void;
+    /**
+     * Callback to close the dropdown
+     */
+    onCloseDropdown: () => void;
+    /**
+     * The timezone of the date selector.
+     * Must be a valid timezone string.
+     */
+    timezone: string;
+};
+export declare const DateCalendar: React.FC<DateCalendarProps>;

package/dist/components/atoms/form/dateselect/date-calendar.js

@@ -0,0 +1,85 @@
+import { jsxs as Y, jsx as a } from "react/jsx-runtime";
+import { t as M } from "../../../../bundle-mjs-CAy1p0fn.js";
+import { Typography as p } from "../../../styles/typography/typography.js";
+import { m as e } from "../../../../index-CYyrKZeH.js";
+const T = ({
+  currentMonth: l,
+  value: i,
+  min: m,
+  max: c,
+  onDateChange: d,
+  onCloseDropdown: s,
+  timezone: t
+}) => {
+  const f = S({
+    start: e(l).startOf("month").format("YYYY-MM-DD"),
+    end: e(l).endOf("month").format("YYYY-MM-DD"),
+    interval: "days",
+    timezone: t
+  }), y = e.tz(f[0], t).startOf("day").get("day");
+  f.unshift(...new Array(y).fill(null));
+  const D = ["S", "M", "T", "W", "T", "F", "S"], w = () => /* @__PURE__ */ a("div", { className: "flex justify-center items-center gap-xl bg-surface-disabled rounded w-full h-[3rem]", children: D.map((r, n) => /* @__PURE__ */ a(
+    p,
+    {
+      swStyle: 1,
+      color: n === 0 || n === 6 ? "subdued" : "default",
+      children: r,
+      className: "min-w-[3rem] text-center"
+    },
+    r + n
+  )) }), b = e.tz(i, t), x = () => /* @__PURE__ */ a("div", { className: "flex flex-row flex-wrap gap-xl justify-start items-start", children: f.map((r, n) => {
+    if (r === null)
+      return /* @__PURE__ */ a("div", { className: "w-[3rem] h-[3rem]" }, `null-${n}`);
+    const o = e.tz(r, t), u = o.isBetween(
+      e.tz(m, t),
+      e.tz(c, t),
+      "day",
+      "[]"
+    ), h = o.isSame(b, "day"), g = o.isSame(
+      e().tz(t),
+      "day"
+    );
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        className: M(
+          "rounded w-[3rem] h-[3rem] ",
+          u ? "cursor-pointer hover:bg-surface-active" : "cursor-not-allowed ",
+          g && "border border-bcolor-subdued rounded",
+          h && "bg-surface-active  border-bcolor-active"
+        ),
+        onClick: (v) => {
+          v.stopPropagation(), u && (d(o.format("MM/DD/YYYY")), s());
+        },
+        children: /* @__PURE__ */ a(
+          p,
+          {
+            swStyle: 5,
+            color: u ? h ? "active" : "default" : "disabled",
+            children: o.format("D"),
+            className: "min-w-[3rem] min-h-[3rem] flex items-center justify-center"
+          }
+        )
+      },
+      r.getDate()
+    );
+  }) });
+  return /* @__PURE__ */ Y("div", { className: "flex flex-col justify-center items-center gap-md", children: [
+    w(),
+    x()
+  ] });
+};
+function S({
+  start: l,
+  end: i,
+  interval: m,
+  timezone: c
+}) {
+  const d = [], s = e.tz(l, c), t = e.tz(i, c);
+  for (; s.isSameOrBefore(t); )
+    d.push(s.toDate()), s.add(1, m);
+  return d;
+}
+export {
+  T as DateCalendar
+};