@temp-spotwork/ui 1.4.3

package/dist/components/molecules/button/button.d.ts

@@ -0,0 +1,53 @@
+import { SvgKey } from '../../atoms/icons';
+
+export type ButtonProps = {
+    /**
+     * Variable of type string that allows the developer to set the text inside the atom.
+     */
+    text?: string;
+    /**
+     * Allows the developer to set the button to small or large
+     */
+    size?: 'small' | 'large';
+    /**
+     * Allows the developer to set the type of button.
+     */
+    type?: 'submit' | 'reset' | 'button';
+    /**
+     * Allows the developer to set the color of button.
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Allows the developer to set the color of button.
+     */
+    color?: 'affirmative' | 'destructive' | 'warning' | 'dark';
+    /**
+     * Allows the developer to set a leading icon.
+     */
+    leadingIcon?: SvgKey;
+    /**
+     * Allows the developer to set a trailing icon.
+     */
+    trailingIcon?: SvgKey;
+    /**
+     * Function to be executed when the button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Allows the developer to disable the button
+     */
+    disabled?: boolean;
+    /**
+     * optional: autoFocus
+     */
+    autoFocus?: boolean;
+    /**
+     * If true, the button will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the loading indicator is shown and the button becomes disabled.
+     */
+    loading?: boolean;
+};
+export declare function Button({ text, size, type, variant, color, leadingIcon, trailingIcon, onClick, disabled, autoFocus, fullWidth, loading, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/button/button.js

@@ -0,0 +1,91 @@
+import { jsxs as M, jsx as e } from "react/jsx-runtime";
+import { getButtonStyles as T, getButtonBoxStyles as W } from "./styles.js";
+import { Icons as w } from "../../atoms/icons/icons.js";
+import "../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { Typography as k } from "../../styles/typography/typography.js";
+import "../../styles/colors/colors.js";
+import { buttonGlyph as q } from "../../styles/colors/colormap.js";
+import { t as D } from "../../../bundle-mjs-CAy1p0fn.js";
+import { LoadingSpinner as E } from "./loading-spinner.js";
+function Z({
+  text: a,
+  size: r = "small",
+  type: b = "button",
+  variant: x = "primary",
+  color: v = "affirmative",
+  leadingIcon: n,
+  trailingIcon: m,
+  onClick: f,
+  disabled: s = !1,
+  autoFocus: B = !1,
+  fullWidth: N = !1,
+  loading: t = !1,
+  ...g
+}) {
+  const j = s || t ? "disabled" : "default", { baseStyles: p, hoverStyles: u, activeStyles: h, disabledStyles: y } = T(x, j, v), l = (c) => {
+    var C;
+    const o = c.find(
+      (i) => i.startsWith("text-")
+    );
+    if (!o) return "";
+    if (o.includes("#"))
+      return ((C = o.match(/#([0-9a-fA-F]{6})/)) == null ? void 0 : C[0]) || "";
+    {
+      const i = o.split("-");
+      return i.slice(2, i.length).join(".");
+    }
+  }, $ = l(p), A = l(u), F = l(h), G = l(y), d = s || t ? G : $ || A || F, H = r === "large" ? 5 : 1, L = r === "large" ? "4.5rem" : "3rem", S = d.split(".").reduce((c, o) => c && c[o], q);
+  return /* @__PURE__ */ M(
+    "button",
+    {
+      autoFocus: B,
+      type: b,
+      className: D(
+        N ? "w-full" : "w-min ",
+        W(r === "small"),
+        p,
+        u,
+        h,
+        y
+      ),
+      style: { height: L },
+      onClick: () => !s && !t && f && f(),
+      disabled: s || t,
+      ...g,
+      children: [
+        n && /* @__PURE__ */ e("div", { className: "flex-grow-0", children: /* @__PURE__ */ e(
+          w,
+          {
+            icon: n,
+            id: `${n}`,
+            disabled: !0,
+            cssColor: S
+          }
+        ) }),
+        a && /* @__PURE__ */ e(
+          k,
+          {
+            swStyle: H,
+            color: d,
+            children: a,
+            className: "whitespace-nowrap"
+          }
+        ),
+        t && /* @__PURE__ */ e(E, { size: r }),
+        m && !t && /* @__PURE__ */ e("div", { className: "flex-grow-0", children: /* @__PURE__ */ e(
+          w,
+          {
+            icon: m,
+            id: `${m}`,
+            disabled: !0,
+            cssColor: S
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Z as Button
+};

package/dist/components/molecules/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export type { ButtonProps } from './button';

package/dist/components/molecules/button/index.js

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

package/dist/components/molecules/button/loading-spinner.d.ts

@@ -0,0 +1,7 @@
+export type LoadingSpinnerProps = {
+    /**
+     * spinner size
+     */
+    size: 'small' | 'large';
+};
+export declare function LoadingSpinner({ size }: LoadingSpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/button/loading-spinner.js

@@ -0,0 +1,44 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { t as o } from "../../../bundle-mjs-CAy1p0fn.js";
+const s = {
+  small: "h-[2rem] w-[2rem]",
+  large: "h-[2.5rem] w-[2.5rem]"
+};
+function l({ size: e }) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: o(
+        "animate-spin text-buttonGlyph-disabled",
+        s[e]
+      ),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ r(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  l as LoadingSpinner
+};

package/dist/components/molecules/button/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const getButtonStyles: (type: `primary` | `secondary` | `tertiary`, state: `default` | `hover` | `active` | `disabled`, style: `affirmative` | `destructive` | `warning` | `dark`) => {
+    baseStyles: string[];
+    hoverStyles: string[];
+    activeStyles: string[];
+    disabledStyles: string[];
+};
+export declare const getButtonBoxStyles: (isSmall: boolean) => string;

package/dist/components/molecules/button/styles.js

@@ -0,0 +1,93 @@
+const d = (t, e, a) => {
+  const o = {
+    primary: {
+      affirmative: "bg-buttonSurface-primary-affirmative-default text-buttonGlyph-primary border-buttonBorder-secondary-affirmative-default",
+      destructive: "bg-buttonSurface-primary-destructive-default text-buttonGlyph-primary border-buttonBorder-secondary-destructive-default",
+      warning: "",
+      dark: ""
+    },
+    secondary: {
+      affirmative: "bg-buttonSurface-transparent text-buttonGlyph-secondary-affirmative-default border-[0.15rem] border-buttonBorder-secondary-affirmative-default",
+      destructive: "bg-buttonSurface-transparent text-buttonGlyph-secondary-destructive-default border-[0.15rem] border-buttonBorder-secondary-destructive-default",
+      warning: "bg-buttonSurface-transparent text-buttonGlyph-secondary-warning-default border-[0.15rem] border-buttonBorder-secondary-warning-default",
+      dark: ""
+    },
+    tertiary: {
+      affirmative: "bg-buttonSurface-transparent text-buttonGlyph-tertiary-affirmative-default border-buttonBorder-transparent",
+      destructive: "bg-buttonSurface-transparent text-buttonGlyph-tertiary-destructive-default border-buttonBorder-transparent",
+      warning: "bg-buttonSurface-transparent text-buttonGlyph-warning-default border-buttonBorder-transparent",
+      dark: "bg-buttonSurface-transparent text-buttonGlyph-dark-default border-buttonBorder-transparent"
+    }
+  }[t][a], i = e !== "disabled" ? {
+    primary: {
+      affirmative: "hover:bg-buttonSurface-primary-affirmative-hover",
+      destructive: "hover:bg-buttonSurface-primary-destructive-hover",
+      warning: "",
+      dark: ""
+    },
+    secondary: {
+      affirmative: "focus:bg-buttonSurface-secondary-affirmative-hover focus:border-buttonSurface-secondary-affirmative-hover hover:bg-buttonSurface-secondary-affirmative-hover hover:border-buttonSurface-secondary-affirmative-hover",
+      // set the same color for border as bg
+      destructive: "focus:bg-buttonSurface-secondary-destructive-hover focus:text-buttonGlyph-secondary-destructive-hover focus:border-buttonSurface-secondary-destructive-hover hover:bg-buttonSurface-secondary-destructive-hover hover:text-buttonGlyph-secondary-destructive-hover hover:border-buttonSurface-secondary-destructive-hover",
+      // set the same color for border as bg
+      warning: "focus:bg-buttonSurface-secondary-warning-hover focus:text-buttonGlyph-secondary-warning-hover focus:border-buttonSurface-secondary-warning-hover hover:bg-buttonSurface-secondary-warning-hover hover:text-buttonGlyph-secondary-warning-hover hover:border-buttonSurface-secondary-warning-hover",
+      // set the same color for border as bg
+      dark: ""
+    },
+    tertiary: {
+      affirmative: "focus:bg-buttonSurface-tertiary-affirmative-hover hover:bg-buttonSurface-tertiary-affirmative-hover",
+      destructive: "focus:bg-buttonSurface-tertiary-destructive-hover focus:text-buttonGlyph-tertiary-destructive-hover hover:bg-buttonSurface-tertiary-destructive-hover hover:text-buttonGlyph-tertiary-destructive-hover",
+      warning: "focus:bg-buttonSurface-tertiary-warning-hover hover:bg-buttonSurface-tertiary-warning-hover",
+      dark: "focus:bg-buttonSurface-tertiary-dark-hover hover:bg-buttonSurface-tertiary-dark-hover"
+    }
+  }[t][a] : "", n = e !== "disabled" ? {
+    primary: {
+      affirmative: "active:bg-buttonSurface-primary-affirmative-active",
+      destructive: "active:bg-buttonSurface-primary-destructive-active",
+      warning: "",
+      dark: ""
+    },
+    secondary: {
+      affirmative: "active:bg-buttonSurface-secondary-affirmative-active active:border-buttonBorder-secondary-affirmative-active",
+      // set the same color for border as bg
+      destructive: "active:bg-buttonSurface-secondary-destructive-active active:text-buttonGlyph-secondary-destructive-active active:border-buttonBorder-secondary-destructive-active",
+      // set the same color for border as bg
+      warning: "active:bg-buttonSurface-secondary-warning-active active:text-buttonGlyph-secondary-warning-active active:border-buttonBorder-secondary-warning-active",
+      // set the same color for border as bg
+      dark: ""
+    },
+    tertiary: {
+      affirmative: "active:bg-buttonSurface-tertiary-affirmative-active",
+      destructive: "active:bg-buttonSurface-tertiary-destructive-active active:text-buttonGlyph-tertiary-destructive-active",
+      warning: "active:bg-buttonSurface-tertiary-warning-active",
+      dark: "active:bg-buttonSurface-tertiary-dark-active"
+    }
+  }[t][a] : "";
+  let r = "";
+  if (e === "disabled")
+    switch (t) {
+      case "primary":
+        r = "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-buttonSurface-primary-disabled disabled:text-buttonGlyph-disabled disabled:border-buttonBorder-disabled";
+        break;
+      case "secondary":
+        r = "disabled:opacity-50 disabled:cursor-not-allowed disabled:text-buttonGlyph-disabled disabled:border-buttonBorder-2 disabled:border-buttonBorder-disabled disabled:bg-buttonSurface-transparent";
+        break;
+      case "tertiary":
+        r = "disabled:opacity-50 disabled:cursor-not-allowed disabled:text-buttonGlyph-disabled disabled:border-buttonBorder-transparent disabled:bg-buttonSurface-transparent";
+        break;
+    }
+  return {
+    baseStyles: o.split(" "),
+    hoverStyles: i.split(" "),
+    activeStyles: n.split(" "),
+    disabledStyles: r.split(" ")
+  };
+}, u = (t) => `flex items-center justify-center
+  ${t ? "rounded" : "rounded-xl"}
+  ${t ? " gap-xs" : "gap-md"}
+  ${t ? "py-xs px-md" : "py-md px-xxl "}
+  `;
+export {
+  u as getButtonBoxStyles,
+  d as getButtonStyles
+};

package/dist/components/molecules/card-content/notes-and-history/NotesAndHistory.stories.d.ts

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

package/dist/components/molecules/card-content/notes-and-history/NotesAndHistory.stories.js

@@ -0,0 +1,24 @@
+import { NotesAndHistory as t } from "./notes-and-history.js";
+const o = {
+  title: "@spotwork-ui/NotesAndHistory",
+  component: t,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: { control: "text" },
+    notes: {
+      table: {
+        note: "test",
+        type: "text"
+      }
+    }
+  }
+}, s = {
+  args: {}
+};
+export {
+  s as Primary,
+  o as default
+};

package/dist/components/molecules/card-content/notes-and-history/index.d.ts

@@ -0,0 +1,2 @@
+export { NotesAndHistory } from './notes-and-history';
+export type { NotesAndHistoryProps } from './notes-and-history';

package/dist/components/molecules/card-content/notes-and-history/index.js

@@ -0,0 +1,4 @@
+import { NotesAndHistory as t } from "./notes-and-history.js";
+export {
+  t as NotesAndHistory
+};

package/dist/components/molecules/card-content/notes-and-history/notes-and-history.d.ts

@@ -0,0 +1,15 @@
+import { NoteProps } from '../../../atoms/card-content/note';
+
+export type NotesAndHistoryProps = {
+    /**
+     * The title of the element.
+     */
+    title?: string;
+    /**
+     * The expanded content that is displayed when the chevron or card title is clicked.
+     */
+    notes: Array<NoteProps & {
+        actionType?: 'notes' | 'history';
+    }>;
+};
+export declare function NotesAndHistory({ title, notes }: NotesAndHistoryProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/card-content/notes-and-history/notes-and-history.js

@@ -0,0 +1,29 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import m from "react";
+import { Link as f } from "../../link/link.js";
+import { Note as p } from "../../../atoms/card-content/note/note.js";
+function v({ title: i, notes: r }) {
+  const [n, s] = m.useState(!1), a = () => {
+    let e = 0, t = 0;
+    return r.forEach((l) => {
+      l.actionType === "notes" ? e += 1 : t += 1;
+    }), e === 0 && t === 0 ? "Notes and History" : e === 0 ? "History" : t === 0 ? `${e} Note${e > 1 ? "s" : ""}` : `${e} Note${e > 1 ? "s" : ""} and History`;
+  }, d = () => {
+    s((e) => !e);
+  };
+  return /* @__PURE__ */ c("div", { className: "border-t border-bcolor-divider", children: [
+    /* @__PURE__ */ o("div", { className: "flex pt-md mb-xs cursor-pointer", id: "notesContainer", children: /* @__PURE__ */ o(
+      f,
+      {
+        text: i || a(),
+        startIcon: "NotesSmall",
+        onClick: d,
+        endIcon: `${n ? "ChevronDownSmall" : "ChevronRightSmall"}`
+      }
+    ) }),
+    n && /* @__PURE__ */ o("div", { children: r.map((e, t) => /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(p, { ...e }) }, `${t}` + Date.now())) })
+  ] });
+}
+export {
+  v as NotesAndHistory
+};

package/dist/components/molecules/collapsible-card/Collapsiblecard.stories.d.ts

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

package/dist/components/molecules/collapsible-card/Collapsiblecard.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../index-DfdAzObv.js";
+import { CollapsibleCard as r } from "./collapsible-card.js";
+const e = {
+  title: "@spotwork-ui/Collapsiblecard",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, l = {
+  args: {}
+};
+export {
+  l as Primary,
+  e as default
+};

package/dist/components/molecules/collapsible-card/collapsible-card.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { AvatarProps } from '../../atoms/avatar';
+import { ButtonProps } from '../button';
+import { ProgressBarProps } from '../dataviz/progress-bar';
+
+export type CollapsibleCardProps = {
+    /**
+     * switch value to true to open card
+     */
+    open: boolean;
+    /**
+     *  onClick event handler
+     */
+    setOpen: () => void;
+    /**
+     * The avatar to be displayed on the card (object).
+     */
+    avatar: AvatarProps;
+    /**
+     * The title of the card.
+     */
+    title: string;
+    /**
+     * An optional subtitle for the card.
+     */
+    subtitle?: string;
+    /**
+     * An array of buttons with type `Array<ButtonProps>`. (Array of objects)
+     */
+    buttonGroup?: Array<ButtonProps>;
+    /**
+     * additional content for header right side
+     */
+    additionalHeaderRightSideContent?: ReactNode;
+    /**
+     * The data visualization component to be rendered on the card.
+     */
+    dataViz?: ProgressBarProps;
+    /**
+     * The expanded content that is displayed when the chevron or card title is clicked.
+     */
+    expandedContent: ReactNode;
+};
+export declare function CollapsibleCard({ open, setOpen, avatar, title, subtitle, buttonGroup, dataViz, expandedContent, additionalHeaderRightSideContent, }: CollapsibleCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/collapsible-card/collapsible-card.js

@@ -0,0 +1,87 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Avatar as h } from "../../atoms/avatar/avatar.js";
+import { Icons as w } from "../../atoms/icons/icons.js";
+import "../../atoms/icons/iconsSVGs/Large/Profile.js";
+import "../../atoms/icons/iconsSVGs/Small/Profile.js";
+import { Button as x } from "../button/button.js";
+import { Typography as c } from "../../styles/typography/typography.js";
+import { ProgressBar as p } from "../dataviz/progress-bar/progress-bar.js";
+function b({
+  open: l,
+  setOpen: i,
+  avatar: d,
+  title: n,
+  subtitle: s,
+  buttonGroup: o,
+  dataViz: a,
+  expandedContent: f,
+  additionalHeaderRightSideContent: t
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "border border-bcolor-divider bg-surface-default  rounded-[1rem] p-[1.5rem] flex flex-col gap-[1.5rem] max-w-full",
+      children: [
+        /* @__PURE__ */ r("div", { className: "min-h-[5.5rem] flex justify-between gap-[2rem] ", children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "flex flex-row gap-[1rem] items-center cursor-pointer min-w-0 grow",
+              onClick: i,
+              children: [
+                /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, { ...d }) }),
+                /* @__PURE__ */ r("div", { className: "flex flex-col justify-between min-w-0", children: [
+                  /* @__PURE__ */ e(
+                    c,
+                    {
+                      swStyle: 8,
+                      children: n,
+                      color: "active",
+                      className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                    }
+                  ),
+                  s && !l && /* @__PURE__ */ e(
+                    c,
+                    {
+                      swStyle: 1,
+                      children: s,
+                      color: "subdued",
+                      className: "whitespace-nowrap overflow-hidden text-ellipsis"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "flex flex-row gap-[2rem] items-center flex-shrink-0", children: [
+            t,
+            !l && a && /* @__PURE__ */ e(
+              "div",
+              {
+                className: "w-[16rem] flex-shrink-0 cursor-pointer",
+                onClick: i,
+                children: /* @__PURE__ */ e(p, { hasTotalCount: !0, ...a })
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: "flex flex-row gap-[1rem]", children: [
+              o == null ? void 0 : o.map((m) => /* @__PURE__ */ e(x, { ...m }, m.text)),
+              /* @__PURE__ */ e(
+                w,
+                {
+                  id: l ? "ChevronUp" : "ChevronDown",
+                  icon: l ? "ChevronUp" : "ChevronDown",
+                  button: !0,
+                  handleClick: i
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        l && f
+      ]
+    }
+  );
+}
+export {
+  b as CollapsibleCard
+};

package/dist/components/molecules/collapsible-card/index.d.ts

@@ -0,0 +1,2 @@
+export { CollapsibleCard } from './collapsible-card';
+export type { CollapsibleCardProps } from './collapsible-card';

package/dist/components/molecules/collapsible-card/index.js

@@ -0,0 +1,4 @@
+import { CollapsibleCard as r } from "./collapsible-card.js";
+export {
+  r as CollapsibleCard
+};

package/dist/components/molecules/conversation/contact/coloring.d.ts

@@ -0,0 +1,6 @@
+export declare const coloring: {
+    blue: {
+        primary: string;
+    };
+};
+export declare const defaultColor = "default";

package/dist/components/molecules/conversation/contact/coloring.js

@@ -0,0 +1,7 @@
+const o = {
+  blue: { primary: "active" }
+}, t = "default";
+export {
+  o as coloring,
+  t as defaultColor
+};

package/dist/components/molecules/conversation/contact/contact.d.ts

@@ -0,0 +1,25 @@
+import { AvatarProps } from '../../../atoms/avatar';
+
+export type ContactProps = {
+    /**
+      Mandatory name of the contact
+    */
+    name: string;
+    /**
+    Mandatory contact avatar properties
+    */
+    avatarProps: Omit<AvatarProps, 'variant'>;
+    /**
+    Mandatory notification avatar properties
+    */
+    notification: number;
+    /**
+    Mandatory on click function for the component
+    */
+    onClick?: () => void;
+    /**
+    Mandatory online status of the contact
+    */
+    isOnline: boolean;
+};
+export declare function Contact({ name, avatarProps, notification, onClick, isOnline, }: ContactProps): import("react/jsx-runtime").JSX.Element;