@temp-spotwork/ui 1.8.0 → 1.8.2

package/dist/components/molecules/alert/alert.js

@@ -4,7 +4,7 @@ import "../../styles/tailwind-config/index.js";
 import { Typography as G } from "../../styles/typography/typography.js";
 import "../../styles/colors/colors.js";
 import "../../styles/colors/colormap.js";
-import { t as s } from "../../../bundle-mjs-BjFsLjkg.js";
+import { t as p } from "../../../bundle-mjs-BjFsLjkg.js";
 import { Icons as H } from "../../atoms/icons/icons.js";
 import "../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../atoms/icons/iconsSVGs/Small/Profile.js";
@@ -25,12 +25,13 @@ import "../../atoms/form/timeselect/timeselect.js";
 import { Button as b } from "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
+import "../dataviz/marker-progress-bar/marker-progress-bar.js";
 import "../../../react-spring_web.modern-CKwWSQke.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../purify.es-Bxiq5T7l.js";
 import "../../../card-Cc2Qkiqr.js";
-function tr({
-  children: p,
+function ir({
+  children: s,
   width: c,
   open: d,
   title: t,
@@ -65,11 +66,11 @@ function tr({
                   // Calculate max height based on whether action buttons are present
                   maxHeight: o ? `calc(100vh - ${15 + 6.1 + 7.6}rem)` : `calc(100vh - ${15 + 6.1}rem)`
                 },
-                className: s("overflow-auto", n && "p-xl", !o && "rounded-b-xl"),
-                children: p
+                className: p("overflow-auto", n && "p-xl", !o && "rounded-b-xl"),
+                children: s
               }
             ),
-            o && /* @__PURE__ */ r("div", { className: s("flex justify-center p-xl", f && "border-t border-bcolor-subdued"), children: l && /* @__PURE__ */ r("div", { className: "flex gap-xl", children: l.map((a) => /* @__PURE__ */ r(b, { size: "large", ...a }, a.text)) }) })
+            o && /* @__PURE__ */ r("div", { className: p("flex justify-center p-xl", f && "border-t border-bcolor-subdued"), children: l && /* @__PURE__ */ r("div", { className: "flex gap-xl", children: l.map((a) => /* @__PURE__ */ r(b, { size: "large", ...a }, a.text)) }) })
           ] })
         ]
       }
@@ -77,5 +78,5 @@ function tr({
   ] }) });
 }
 export {
-  tr as Alert
+  ir as Alert
 };

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

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MarkerProgressBar } from '.';
+
+declare const meta: Meta<typeof MarkerProgressBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Not started — gray track, pin at origin */
+export declare const Subdued: Story;
+/** On the way — green fill to marker (~43% on 215px track in Figma) */
+export declare const Success: Story;
+export declare const Complete: Story;
+/** Running late — orange fill */
+export declare const Warning: Story;
+/** Off course — was closer (70%), now regressed (37%) with stripe (Figma) */
+export declare const AlertWithRegression: Story;
+/** Location off — gray track only */
+export declare const Disabled: Story;

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

@@ -0,0 +1,68 @@
+import r from "react";
+import { MarkerProgressBar as e } from "./marker-progress-bar.js";
+const a = {
+  title: "@spotwork-ui/MarkerProgressBar",
+  component: e,
+  decorators: [
+    (s) => r.createElement("div", { style: { width: 215 } }, r.createElement(s))
+  ],
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    progress: {
+      control: { type: "range", min: 0, max: 100, step: 1 }
+    },
+    bestProgress: {
+      control: { type: "range", min: 0, max: 100, step: 1 }
+    },
+    color: {
+      control: "select",
+      options: ["subdued", "disabled", "success", "warning", "alert"]
+    },
+    icon: {
+      control: "text"
+    }
+  }
+}, c = {
+  args: {
+    progress: 0,
+    color: "subdued"
+  }
+}, n = {
+  args: {
+    progress: 43,
+    color: "success"
+  }
+}, l = {
+  args: {
+    progress: 100,
+    color: "success"
+  }
+}, g = {
+  args: {
+    progress: 43,
+    color: "warning"
+  }
+}, p = {
+  args: {
+    progress: 37,
+    bestProgress: 70,
+    color: "alert"
+  }
+}, d = {
+  args: {
+    progress: 0,
+    color: "disabled"
+  }
+};
+export {
+  p as AlertWithRegression,
+  l as Complete,
+  d as Disabled,
+  c as Subdued,
+  n as Success,
+  g as Warning,
+  a as default
+};

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

@@ -0,0 +1,2 @@
+export { MarkerProgressBar } from './marker-progress-bar';
+export type { MarkerProgressBarProps, MarkerProgressBarColor } from './marker-progress-bar';

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

@@ -0,0 +1,4 @@
+import { MarkerProgressBar as o } from "./marker-progress-bar.js";
+export {
+  o as MarkerProgressBar
+};

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

@@ -0,0 +1,31 @@
+import { SvgKey } from '../../../atoms/icons/iconMap';
+
+/** Semantic track + marker colors from the design system. */
+export type MarkerProgressBarColor = 'subdued' | 'disabled' | 'success' | 'warning' | 'alert';
+export type MarkerProgressBarProps = {
+    /**
+     * Current marker position along the track, from 0 to 100.
+     */
+    progress: number;
+    /**
+     * Track fill + marker chip color.
+     * - subdued / disabled → gray track only
+     * - success / warning / alert → colored fill + matching marker chip
+     */
+    color: MarkerProgressBarColor;
+    /**
+     * Best (closest-to-destination) progress previously reached.
+     * When greater than `progress`, a diagonal regression stripe is drawn
+     * between the current marker and this peak (Figma Frame 812316).
+     */
+    bestProgress?: number;
+    /**
+     * Icon inside the marker. Defaults to outline map pin (Figma).
+     */
+    icon?: SvgKey;
+    /**
+     * Optional class name on the root container.
+     */
+    className?: string;
+};
+export declare function MarkerProgressBar({ progress, color, bestProgress, icon, className, }: MarkerProgressBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,97 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { t as f } from "../../../../bundle-mjs-BjFsLjkg.js";
+import { svgs as h } from "../../../atoms/icons/iconMap.js";
+import "../../../styles/colors/colors.js";
+import { glyph as o, surface as l } from "../../../styles/colors/colormap.js";
+import { getRegressionStripeBackground as N, getStyles as k } from "./styles.js";
+const w = {
+  subdued: l.disabled,
+  disabled: l.disabled,
+  success: l.success,
+  warning: l.warning,
+  alert: l.alert
+}, C = {
+  subdued: "subdued",
+  disabled: "disabled",
+  success: "success",
+  warning: "warning",
+  alert: "alert"
+}, M = {
+  success: o.success,
+  warning: o.warning,
+  alert: o.alert
+};
+function g(a) {
+  return Number.isNaN(a) ? 0 : Math.min(100, Math.max(0, a));
+}
+function R({ icon: a, strokeColor: t }) {
+  const n = h[a];
+  return /* @__PURE__ */ e("div", { className: k().markerIconSlot, children: /* @__PURE__ */ e(n, { fill: t, hover: void 0, active: void 0 }) });
+}
+function L({
+  progress: a,
+  color: t,
+  bestProgress: n,
+  icon: p = "MapPinOutlineSmall",
+  className: v
+}) {
+  const s = k(), r = g(a), i = n !== void 0 ? g(n) : void 0, c = i !== void 0 && i > r + 0.01, d = M[t], m = c ? i : r, b = o[C[t]];
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: f(s.root, v),
+      "data-testid": "marker-progress-bar",
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": r,
+      ...c ? { "aria-valuetext": `Current ${r}%, best ${i}%` } : {},
+      children: [
+        /* @__PURE__ */ u("div", { className: s.trackLayer, children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "data-testid": "marker-progress-bar-track",
+              className: s.trackBackground
+            }
+          ),
+          d && m > 0 ? /* @__PURE__ */ e(
+            "div",
+            {
+              "data-testid": "marker-progress-bar-fill",
+              className: s.trackFill,
+              style: { width: `${m}%`, background: d }
+            }
+          ) : null,
+          c && d ? /* @__PURE__ */ e(
+            "div",
+            {
+              "data-testid": "marker-progress-bar-regression",
+              className: s.regressionStripe,
+              style: {
+                left: `${r}%`,
+                width: `${i - r}%`,
+                background: N()
+              }
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            "data-testid": "marker-progress-bar-marker",
+            className: s.marker,
+            style: {
+              left: `clamp(1rem, ${r}%, calc(100% - 1rem))`,
+              background: w[t]
+            },
+            children: /* @__PURE__ */ e(R, { icon: p, strokeColor: b })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  L as MarkerProgressBar
+};

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

@@ -0,0 +1,11 @@
+export declare const getStyles: () => {
+    /** Room for marker chip centered on 5px track (Figma 31063:30317). */
+    root: string;
+    trackLayer: string;
+    trackBackground: string;
+    trackFill: string;
+    regressionStripe: string;
+    marker: string;
+    markerIconSlot: string;
+};
+export declare function getRegressionStripeBackground(): string;

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

@@ -0,0 +1,25 @@
+import "../../../styles/colors/colors.js";
+import { woodsmoke as e } from "../../../styles/colors/colormap.js";
+const o = () => ({
+  /** Room for marker chip centered on 5px track (Figma 31063:30317). */
+  root: "relative w-full h-[2rem]",
+  trackLayer: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-[0.5rem]",
+  trackBackground: "absolute inset-0 rounded bg-progressBar-trackDefault",
+  trackFill: "absolute left-0 top-0 h-full rounded",
+  regressionStripe: "absolute top-0 h-full rounded overflow-hidden",
+  marker: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-[2rem] rounded-full flex items-center justify-center p-xxs",
+  markerIconSlot: "size-[1.5rem] shrink-0 flex items-center justify-center [&>svg]:size-[1.5rem]"
+});
+function s() {
+  return `repeating-linear-gradient(
+    -45deg,
+    ${e[600]} 0,
+    ${e[600]} 4px,
+    ${e[0]} 4px,
+    ${e[0]} 5px
+  )`;
+}
+export {
+  s as getRegressionStripeBackground,
+  o as getStyles
+};

package/dist/components/molecules/dialog/dialog.js

@@ -25,12 +25,13 @@ import "../../atoms/form/timeselect/timeselect.js";
 import { Button as d } from "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
+import "../dataviz/marker-progress-bar/marker-progress-bar.js";
 import "../../../react-spring_web.modern-CKwWSQke.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../purify.es-Bxiq5T7l.js";
 import "../../../card-Cc2Qkiqr.js";
 import { useUIElementSize as n } from "./use-ui-element-size.js";
-function dr({
+function nr({
   children: f,
   width: h,
   open: x,
@@ -102,5 +103,5 @@ function dr({
   ] }) });
 }
 export {
-  dr as Dialog
+  nr as Dialog
 };

package/dist/components/molecules/drawer/drawer.js

@@ -25,27 +25,28 @@ import "../../atoms/form/timeselect/timeselect.js";
 import { Button as L } from "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
+import "../dataviz/marker-progress-bar/marker-progress-bar.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../purify.es-Bxiq5T7l.js";
 import "../../../card-Cc2Qkiqr.js";
-function Nr({
+function br({
   children: N,
   actionBox: b,
   title: l,
   open: o,
   setOpen: e,
   width: a,
-  transitionDuration: c = 500,
+  transitionDuration: m = 500,
   hasOverlayBg: C = !1,
   metadata: d,
   subheading: f,
   buttonProps: u,
   enableWidthTransition: p = !1,
-  preserveScrollPosition: m = !0,
+  preserveScrollPosition: c = !0,
   scrollBehavior: D = "auto",
   enableScroll: s = !0
 }) {
-  const [n, T] = I(c), i = y(null), h = y(0), R = X(
+  const [n, T] = I(m), i = y(null), h = y(0), R = X(
     () => ({
       from: { opacity: 0, transform: `translateX(${a})` },
       enter: { opacity: 1, transform: "translateX(0%)" },
@@ -57,17 +58,17 @@ function Nr({
     [a, n]
   ), B = E(o, R);
   v(() => {
-    T(c);
-  }, [c]);
+    T(m);
+  }, [m]);
   const _ = F({
     width: o ? a : 0,
     config: { duration: n }
   });
   v(() => {
-    o && m && s && i.current && (i.current.scrollTop = h.current);
-  }, [o, m, s]);
+    o && c && s && i.current && (i.current.scrollTop = h.current);
+  }, [o, c, s]);
   const $ = () => {
-    m && s && i.current && (h.current = i.current.scrollTop), e == null || e(!1);
+    c && s && i.current && (h.current = i.current.scrollTop), e == null || e(!1);
   };
   return /* @__PURE__ */ r(M, { open: o, onOpenChange: e, children: /* @__PURE__ */ r(q, { children: B(
     (x, j) => j ? /* @__PURE__ */ t(k, { children: [
@@ -125,5 +126,5 @@ function Nr({
   ) }) });
 }
 export {
-  Nr as Drawer
+  br as Drawer
 };

package/dist/components/molecules/snackbar/Snackbar.stories.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import { useState as l } from "react";
-import { S as r, P as c, V as d } from "../../../snackbar-B9zd5z5s.js";
+import { S as r, P as c, V as d } from "../../../snackbar-CLpxASgP.js";
 import { Button as h } from "../button/button.js";
 const w = {
   title: "@spotwork-ui/Snackbar",

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

@@ -1,4 +1,4 @@
-import { S as o } from "../../../snackbar-B9zd5z5s.js";
+import { S as o } from "../../../snackbar-CLpxASgP.js";
 export {
   o as Snackbar
 };

package/dist/components/molecules/snackbar/snackbar.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { S as F } from "../../../snackbar-B9zd5z5s.js";
+import { S as G } from "../../../snackbar-CLpxASgP.js";
 import "../../styles/tailwind-config/index.js";
 import "../../styles/typography/typography.js";
 import "../../styles/colors/colors.js";
@@ -24,11 +24,12 @@ import "../../atoms/form/timeselect/timeselect.js";
 import "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
+import "../dataviz/marker-progress-bar/marker-progress-bar.js";
 import "../../../react-spring_web.modern-CKwWSQke.js";
 import "../form/radiogroup/radiogroup.js";
 import "../../../purify.es-Bxiq5T7l.js";
 import "../../../card-Cc2Qkiqr.js";
 import "./styles.js";
 export {
-  F as Snackbar
+  G as Snackbar
 };

package/dist/main.d.ts

@@ -74,6 +74,8 @@ export { DonutChart } from './components/molecules/dataviz/donut-chart';
 export { DotMatrix } from './components/molecules/dataviz/dot-matrix';
 export { ProgressBar } from './components/molecules/dataviz/progress-bar';
 export type { ProgressBarProps } from './components/molecules/dataviz/progress-bar';
+export { MarkerProgressBar } from './components/molecules/dataviz/marker-progress-bar';
+export type { MarkerProgressBarProps, MarkerProgressBarColor, } from './components/molecules/dataviz/marker-progress-bar';
 export { SingleStackedBar } from './components/molecules/dataviz/single-stacked-bar';
 export type { SingleStackedBarProps } from './components/molecules/dataviz/single-stacked-bar';
 export * from './components/molecules/dataviz/legend';