@temp-spotwork/ui 1.7.8 → 1.8.0

package/dist/components/atoms/form/dropdown-item/dropdown-item.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { LabelValuePair } from '../form-types';
 
 export type SpotterDropdownOption = LabelValuePair & {
@@ -6,9 +7,9 @@ export type SpotterDropdownOption = LabelValuePair & {
      */
     image?: string;
     /**
-     * Optional secondary line (e.g. email, role, location).
+     * Optional secondary line (e.g. email, role, location) or custom React node.
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
 };
 export type DropdownItemProps = {
     /**
@@ -28,9 +29,9 @@ export type DropdownItemProps = {
      */
     textView?: string;
     /**
-     * Optional secondary line displayed below the name.
+     * Optional secondary line displayed below the name, or a custom React node.
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Optional classes for the container.
      */

package/dist/components/atoms/form/dropdown-item/dropdown-item.js

@@ -1,45 +1,45 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { t as c } from "../../../../bundle-mjs-BjFsLjkg.js";
 import { Avatar as p } from "../../avatar/avatar.js";
 import { Typography as s } from "../../../styles/typography/typography.js";
-import { getStyles as u } from "./styles.js";
+import { getStyles as f } from "./styles.js";
 function n({
-  avatarId: e,
-  name: t,
+  avatarId: r,
+  name: e,
   image: l,
-  textView: m,
-  subtitle: i,
-  className: d
+  textView: d,
+  subtitle: a,
+  className: m
 }) {
-  const a = u();
-  return /* @__PURE__ */ o("div", { className: c(a.container, d), "data-testid": "dropdown-item", children: [
-    /* @__PURE__ */ r(
+  const i = f();
+  return /* @__PURE__ */ o("div", { className: c(i.container, m), "data-testid": "dropdown-item", children: [
+    /* @__PURE__ */ t(
       p,
       {
-        id: e,
+        id: r,
         variant: "circular",
         image: l,
-        textView: m ?? t,
+        textView: d ?? e,
         size: 3.5
       }
     ),
-    /* @__PURE__ */ o("div", { className: a.textContainer, children: [
-      /* @__PURE__ */ r(s, { swStyle: 5, color: "default", className: a.name, children: t }),
-      i && /* @__PURE__ */ r(s, { swStyle: 6, color: "subdued", className: a.subtitle, children: i })
+    /* @__PURE__ */ o("div", { className: i.textContainer, children: [
+      /* @__PURE__ */ t(s, { swStyle: 5, color: "default", className: i.name, children: e }),
+      a != null && a !== "" && (typeof a == "string" ? /* @__PURE__ */ t(s, { swStyle: 6, color: "subdued", className: i.subtitle, children: a }) : /* @__PURE__ */ t("div", { className: i.subtitle, children: a }))
     ] })
   ] });
 }
-function h(e) {
-  if (typeof e == "string")
-    return /* @__PURE__ */ r(n, { avatarId: e, name: e });
-  const t = e;
-  return /* @__PURE__ */ r(
+function h(r) {
+  if (typeof r == "string")
+    return /* @__PURE__ */ t(n, { avatarId: r, name: r });
+  const e = r;
+  return /* @__PURE__ */ t(
     n,
     {
-      avatarId: t.value,
-      name: t.label,
-      image: t.image,
-      subtitle: t.subtitle
+      avatarId: e.value,
+      name: e.label,
+      image: e.image,
+      subtitle: e.subtitle
     }
   );
 }

package/dist/components/atoms/form/dropdown-item/dropdown-item.stories.d.ts

@@ -7,5 +7,8 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithoutImage: Story;
 export declare const WithoutSubtitle: Story;
+export declare const WithTextSubtitle: Story;
+export declare const WithChipsSubtitle: Story;
+export declare const SubtitleVariants: Story;
 export declare const WithDropdownSearch: Story;
 export declare const WithTypeahead: Story;

package/dist/components/atoms/form/dropdown-item/dropdown-item.stories.js

@@ -1,9 +1,11 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useState as o } from "react";
-import { DropdownItem as l, renderSpotterDropdownOption as a } from "./dropdown-item.js";
-import { DropdownSearch as p } from "../dropdown-search/dropdown-search.js";
-import { Typeahead as c } from "../typeahead/typeahead.js";
-const s = [
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { a as c } from "../../../../index-CSucbNlF.js";
+import { useState as s } from "react";
+import { DropdownItem as o, renderSpotterDropdownOption as i } from "./dropdown-item.js";
+import { Chips as l } from "../chips/chips.js";
+import { DropdownSearch as d } from "../dropdown-search/dropdown-search.js";
+import { Typeahead as m } from "../typeahead/typeahead.js";
+const n = [
   {
     label: "Sarah Johnson",
     value: "spotter-1",
@@ -26,24 +28,27 @@ const s = [
     value: "spotter-4",
     image: "https://i.pravatar.cc/150?u=spotter-4"
   }
-], g = {
+], x = {
   title: "@spotwork-ui/atoms/form/DropdownItem",
-  component: l,
+  component: o,
   parameters: {
     layout: "centered",
     docs: {
       description: {
-        component: "A reusable dropdown row for spotter search results. Displays an avatar, name, and optional subtitle using design tokens."
+        component: "A reusable dropdown row for spotter search results. Displays an avatar, name, and optional subtitle. The subtitle accepts plain text or any React node (e.g. Typography, Chips)."
       }
     }
   },
   tags: ["autodocs"],
+  decorators: [
+    (t) => /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(t, {}) })
+  ],
   argTypes: {
     name: { control: "text" },
     subtitle: { control: "text" },
     image: { control: "text" }
   }
-}, n = {
+}, a = {
   args: {
     avatarId: "spotter-1",
     name: "Sarah Johnson",
@@ -53,57 +58,113 @@ const s = [
   decorators: [
     (t) => /* @__PURE__ */ e("div", { className: "w-[32rem] border border-bcolor-subdued rounded", children: /* @__PURE__ */ e("div", { className: "min-h-[4rem] w-full flex items-center border-b border-bcolor-subdued py-[0.75rem] px-[1rem]", children: /* @__PURE__ */ e(t, {}) }) })
   ]
-}, w = {
+}, T = {
   args: {
     avatarId: "spotter-3",
     name: "Emily Rodriguez",
     subtitle: "Calgary, AB"
   },
-  decorators: n.decorators
-}, y = {
+  decorators: a.decorators
+}, C = {
   args: {
     avatarId: "spotter-4",
     name: "James Wilson",
     image: "https://i.pravatar.cc/150?u=spotter-4"
   },
-  decorators: n.decorators
-}, i = () => {
-  const [t, r] = o("");
+  decorators: a.decorators
+}, N = {
+  args: {
+    avatarId: "spotter-1",
+    name: "Sarah Johnson",
+    image: "https://i.pravatar.cc/150?u=spotter-1",
+    subtitle: "Toronto, ON"
+  },
+  decorators: a.decorators
+}, I = {
+  args: {
+    avatarId: "spotter-2",
+    name: "Michael Chen",
+    image: "https://i.pravatar.cc/150?u=spotter-2",
+    subtitle: /* @__PURE__ */ e(
+      l,
+      {
+        id: "spotter-2-ready-to-work",
+        chipText: "Ready to Work",
+        color: "paidBackup",
+        variant: "pill"
+      }
+    )
+  },
+  decorators: a.decorators
+}, W = {
+  render: () => /* @__PURE__ */ p("div", { className: "w-[32rem] border border-bcolor-subdued rounded", children: [
+    /* @__PURE__ */ e("div", { className: "min-h-[4rem] w-full flex items-center border-b border-bcolor-subdued py-[0.75rem] px-[1rem]", children: /* @__PURE__ */ e(
+      o,
+      {
+        avatarId: "spotter-1",
+        name: "Sarah Johnson",
+        image: "https://i.pravatar.cc/150?u=spotter-1",
+        subtitle: "Toronto, ON"
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "min-h-[4rem] w-full flex items-center py-[0.75rem] px-[1rem]", children: /* @__PURE__ */ e(
+      o,
+      {
+        avatarId: "spotter-2",
+        name: "Michael Chen",
+        image: "https://i.pravatar.cc/150?u=spotter-2",
+        subtitle: /* @__PURE__ */ e(
+          l,
+          {
+            id: "spotter-2-ready-to-work",
+            chipText: "Ready to Work",
+            color: "paidBackup",
+            variant: "pill"
+          }
+        )
+      }
+    ) })
+  ] })
+}, u = () => {
+  const [t, r] = s("");
   return /* @__PURE__ */ e("div", { className: "w-[36rem]", children: /* @__PURE__ */ e(
-    p,
+    d,
     {
       label: "Search spotters",
       placeholder: "Search by name...",
-      options: s,
+      options: n,
       value: t,
       selectValue: r,
-      renderOption: a
+      renderOption: i
     }
   ) });
-}, S = {
-  render: () => /* @__PURE__ */ e(i, {})
-}, d = () => {
-  const [t, r] = o("");
+}, D = {
+  render: () => /* @__PURE__ */ e(u, {})
+}, h = () => {
+  const [t, r] = s("");
   return /* @__PURE__ */ e("div", { className: "w-[36rem]", children: /* @__PURE__ */ e(
-    c,
+    m,
     {
       label: "Search spotters",
       placeholder: "Search by name...",
-      options: s,
+      options: n,
       value: t,
       onChange: r,
       selectValue: r,
-      renderOption: a
+      renderOption: i
     }
   ) });
-}, f = {
-  render: () => /* @__PURE__ */ e(d, {})
+}, O = {
+  render: () => /* @__PURE__ */ e(h, {})
 };
 export {
-  n as Default,
-  S as WithDropdownSearch,
-  f as WithTypeahead,
-  w as WithoutImage,
-  y as WithoutSubtitle,
-  g as default
+  a as Default,
+  W as SubtitleVariants,
+  I as WithChipsSubtitle,
+  D as WithDropdownSearch,
+  N as WithTextSubtitle,
+  O as WithTypeahead,
+  T as WithoutImage,
+  C as WithoutSubtitle,
+  x as default
 };

package/dist/components/molecules/dataviz/progress-bar/ProgressBar.stories.d.ts

@@ -11,3 +11,4 @@ export declare const WithLabelColorAlert: Story;
 export declare const WithLabelColorWarning: Story;
 export declare const WithLabelColorActive: Story;
 export declare const WithTotalCount: Story;
+export declare const WithTextClassName: Story;

package/dist/components/molecules/dataviz/progress-bar/ProgressBar.stories.js

@@ -1,9 +1,13 @@
-import { ProgressBar as o } from "./progress-bar.js";
+import t from "react";
+import { ProgressBar as e } from "./progress-bar.js";
 import "../../../styles/colors/colors.js";
-import { glyphColorsKeys as t } from "../../../styles/colors/colormap.js";
-const s = {
+import { glyphColorsKeys as l } from "../../../styles/colors/colormap.js";
+const n = {
   title: "@spotwork-ui/ProgresBar",
-  component: o,
+  component: e,
+  decorators: [
+    (o) => t.createElement("div", { style: { width: 100 } }, t.createElement(o))
+  ],
   parameters: {
     layout: "centered"
   },
@@ -11,7 +15,7 @@ const s = {
   argTypes: {
     labelColor: {
       control: "select",
-      options: t,
+      options: l,
       description: 'Custom color for the label. Defaults to "subdued" if not provided.'
     },
     progress: {
@@ -27,47 +31,47 @@ const s = {
       control: "text"
     }
   }
-}, a = {
+}, c = {
   args: {
     progress: 50,
     total: 100,
     text: "Filled"
   }
-}, n = {
+}, g = {
   args: {
     progress: 75,
     total: 100,
     text: "Filled"
   }
-}, i = {
+}, p = {
   args: {
     progress: 80,
     total: 100,
     text: "Filled",
     labelColor: "success"
   }
-}, c = {
+}, u = {
   args: {
     progress: 30,
     total: 100,
     text: "Filled",
     labelColor: "alert"
   }
-}, g = {
+}, C = {
   args: {
     progress: 60,
     total: 100,
     text: "Filled",
     labelColor: "warning"
   }
-}, p = {
+}, d = {
   args: {
     progress: 90,
     total: 100,
     text: "Filled",
     labelColor: "active"
   }
-}, u = {
+}, m = {
   args: {
     progress: 75,
     total: 100,
@@ -75,14 +79,24 @@ const s = {
     hasTotalCount: !0,
     labelColor: "active"
   }
+}, b = {
+  args: {
+    progress: 75,
+    total: 100,
+    text: "",
+    hasTotalCount: !0,
+    labelColor: "active",
+    textClassName: "flex justify-center items-center"
+  }
 };
 export {
-  a as Default,
-  p as WithLabelColorActive,
-  c as WithLabelColorAlert,
-  i as WithLabelColorSuccess,
-  g as WithLabelColorWarning,
-  u as WithTotalCount,
-  n as WithoutLabelColor,
-  s as default
+  c as Default,
+  d as WithLabelColorActive,
+  u as WithLabelColorAlert,
+  p as WithLabelColorSuccess,
+  C as WithLabelColorWarning,
+  b as WithTextClassName,
+  m as WithTotalCount,
+  g as WithoutLabelColor,
+  n as default
 };

package/dist/components/molecules/dataviz/progress-bar/progress-bar.d.ts

@@ -30,5 +30,9 @@ export type ProgressBarProps = {
      * Custom class name for the component
      */
     className?: string;
+    /**
+     * Custom class name for the text label
+     */
+    textClassName?: string;
 };
-export declare function ProgressBar({ progress, total, hasTotalCount, text, swStyle, labelColor, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ progress, total, hasTotalCount, text, swStyle, labelColor, className, textClassName, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dataviz/progress-bar/progress-bar.js

@@ -1,41 +1,42 @@
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-import { Typography as h } from "../../../styles/typography/typography.js";
+import { jsx as d, jsxs as t } from "react/jsx-runtime";
+import { Typography as b } from "../../../styles/typography/typography.js";
 import "../../../styles/colors/colors.js";
-import { surface as b, crusta as B, sun as v, apple as y } from "../../../styles/colors/colormap.js";
+import { surface as B, crusta as v, sun as y, apple as N } from "../../../styles/colors/colormap.js";
 import { getStyles as $ } from "./styles.js";
 import { t as o } from "../../../../bundle-mjs-BjFsLjkg.js";
-function P({
+function W({
   progress: e,
   total: r,
-  hasTotalCount: n = !1,
-  text: l = "Filled",
+  hasTotalCount: l = !1,
+  text: n = "Filled",
   swStyle: m = 1,
   labelColor: u,
-  className: p
+  className: p,
+  textClassName: f
 }) {
-  const s = e && r > 0 ? e / r * 100 : 0, i = 100 - s, f = s <= 33.99 ? b.badge : s <= 66.99 ? B[400] : s <= 99.99 ? v[400] : y[600], g = (n ? `${e > r ? r : e}/${r}` : `${e > r ? r : e}`) + " " + l, t = u ?? "subdued", d = $();
-  return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ c("div", { className: o(d.container, p), children: [
-    /* @__PURE__ */ a(h, { swStyle: m, color: t, children: g }),
-    /* @__PURE__ */ c("div", { className: d.chartBox, children: [
-      /* @__PURE__ */ a(
+  const s = e && r > 0 ? e / r * 100 : 0, i = 100 - s, g = s <= 33.99 ? B.badge : s <= 66.99 ? v[400] : s <= 99.99 ? y[400] : N[600], h = (l ? `${e > r ? r : e}/${r}` : `${e > r ? r : e}`) + " " + n, c = u ?? "subdued", a = $();
+  return /* @__PURE__ */ d("div", { children: /* @__PURE__ */ t("div", { className: o(a.container, p), children: [
+    /* @__PURE__ */ d(b, { swStyle: m, className: f, color: c, children: h }),
+    /* @__PURE__ */ t("div", { className: a.chartBox, children: [
+      /* @__PURE__ */ d(
         "div",
         {
           "data-testid": "progress-bar",
-          style: { width: `${s}%`, background: f },
+          style: { width: `${s}%`, background: g },
           className: o(
-            d.progressBar,
+            a.progressBar,
             s >= 100 ? "rounded-r-[0.3rem] rounded-l-[0.3rem]" : "rounded-l-[0.3rem]"
           )
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ d(
         "div",
         {
           "data-testid": "unfilled-progress-bar",
           style: { width: `${i}%` },
           className: o(
-            d.progressBar,
-            t === "active" ? "bg-progressBar-trackActive" : "bg-progressBar-trackDefault",
+            a.progressBar,
+            c === "active" ? "bg-progressBar-trackActive" : "bg-progressBar-trackDefault",
             i >= 100 ? "rounded-[0.3rem]" : "rounded-r-[0.3rem]"
           )
         }
@@ -44,5 +45,5 @@ function P({
   ] }) });
 }
 export {
-  P as ProgressBar
+  W as ProgressBar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.7.8",
+  "version": "1.8.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",