@temp-spotwork/ui 1.8.1 → 1.8.3

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/filter/segmented-control/segmented-control.d.ts

@@ -1,6 +1,10 @@
 export type SegmentedControlOption = {
     id: string;
     label: string;
+    /**
+     * Optional count/status badge rendered after the label (design-system Badge)
+     */
+    badgeText?: string;
 };
 export type SegmentedControlProps = {
     /**

package/dist/components/molecules/filter/segmented-control/segmented-control.js

@@ -1,36 +1,46 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Typography as i } from "../../../styles/typography/typography.js";
-import { getStyles as p, getContainerStyles as f } from "./styles.js";
-import { t as n } from "../../../../bundle-mjs-BjFsLjkg.js";
-function C({
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { Typography as d } from "../../../styles/typography/typography.js";
+import { getStyles as g, getContainerStyles as u } from "./styles.js";
+import { t as i } from "../../../../bundle-mjs-BjFsLjkg.js";
+import { Badge as v } from "../../../atoms/badge/badge.js";
+function w({
   segments: a,
-  handleClick: l,
-  inline: o = !1,
-  activeSegment: t
+  handleClick: m,
+  inline: s = !1,
+  activeSegment: c
 }) {
-  const s = p(o);
-  return /* @__PURE__ */ e(
+  const n = g(s);
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: n(
-        s.container,
-        s.segmentsBorder
+      className: i(
+        n.container,
+        n.segmentsBorder
       ),
-      children: a.map(({ id: r, label: c }) => {
-        const m = f(o, r === t);
-        return /* @__PURE__ */ e(
+      children: a.map(({ id: r, label: l, badgeText: e }) => {
+        const t = r === c, f = u(s, t);
+        return /* @__PURE__ */ p(
           "div",
           {
-            className: n("cursor-pointer", m.container),
-            onClick: () => l(r),
-            children: /* @__PURE__ */ e(
-              i,
-              {
-                children: c,
-                color: r === t ? "active" : "default",
-                swStyle: 1
-              }
-            )
+            className: i("cursor-pointer", f.container),
+            onClick: () => m(r),
+            children: [
+              /* @__PURE__ */ o(
+                d,
+                {
+                  children: l,
+                  color: t ? "active" : "default",
+                  swStyle: 1
+                }
+              ),
+              e != null && e !== "" && /* @__PURE__ */ o(
+                v,
+                {
+                  text: e,
+                  color: t ? "affirmativeInverted" : "affirmative"
+                }
+              )
+            ]
           },
           r
         );
@@ -39,5 +49,5 @@ function C({
   );
 }
 export {
-  C as SegmentedControl
+  w as SegmentedControl
 };

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';