@mastra/playground-ui 37.0.1-alpha.2 → 37.1.0-alpha.4

package/dist/primitives/portal-container.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-container.es.js","sources":["../../src/ds/primitives/portal-container.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react';\n\n/** Anything Base UI's `*.Portal` `container` accepts. */\nexport type PortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | React.RefObject<HTMLElement | ShadowRoot | null>\n  | null\n  | undefined;\n\n// Why: modal SideDialog/Drawer traps focus+clicks inside its region. Popups portal to\n// document.body by default → land outside the trap → unclickable. SideDialog publishes a\n// node inside the trap; popups portal there instead.\n//\n// Sentinel is `undefined`, never `null`: Base UI reads container={undefined} as \"portal to\n// body\", but container={null} as \"not ready, render nothing\" — a leaked null opens the popup\n// in state but mounts it nowhere (the model-picker bug).\nconst PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);\n\nexport function PortalContainerProvider({\n  container,\n  children,\n}: {\n  container: HTMLElement | null;\n  children: React.ReactNode;\n}) {\n  // Accept null for callers; normalize so null never reaches a portal.\n  return <PortalContainerContext.Provider value={container ?? undefined}>{children}</PortalContainerContext.Provider>;\n}\n\n/** Resolve a popup's portal target: explicit `container` → provider → `undefined` (body). Never null. */\nexport function usePortalContainer(container?: PortalContainer): Exclude<PortalContainer, null> {\n  const fromContext = React.useContext(PortalContainerContext);\n  return container ?? fromContext ?? undefined;\n}\n"],"names":[],"mappings":";;;AAkBA,MAAM,sBAAA,GAAyB,KAAA,CAAM,aAAA,CAAuC,MAAS,CAAA;AAE9E,SAAS,uBAAA,CAAwB;AAAA,EACtC,SAAA;AAAA,EACA;AACF,CAAA,EAGG;AAED,EAAA,2BAAQ,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,KAAA,EAAO,SAAA,IAAa,QAAY,QAAA,EAAS,CAAA;AACnF;AAGO,SAAS,mBAAmB,SAAA,EAA6D;AAC9F,EAAA,MAAM,WAAA,GAAc,KAAA,CAAM,UAAA,CAAW,sBAAsB,CAAA;AAC3D,EAAA,OAAO,aAAa,WAAA,IAAe,MAAA;AACrC;;;;"}

package/dist/primitives/resize-handle-indicator.cjs.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const index = require('../index-C-Lt4Bx_.cjs');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+
+const indicatorVariants = index.cva(
+  "block pointer-events-none transition-all duration-150 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        line: "h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0",
+        pill: "h-10 w-0.5 rounded-full bg-surface5"
+      }
+    },
+    defaultVariants: {
+      variant: "line"
+    }
+  }
+);
+const ResizeHandleIndicator = ({ variant, className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: utils_cn.cn(indicatorVariants({ variant }), className) });
+
+exports.ResizeHandleIndicator = ResizeHandleIndicator;
+//# sourceMappingURL=resize-handle-indicator.cjs.js.map

package/dist/primitives/resize-handle-indicator.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handle-indicator.cjs.js","sources":["../../src/ds/primitives/resize-handle-indicator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\n// line: gradient hairline, fits a visible container edge.\n// pill: small floating pill, for handles with no container around.\nconst indicatorVariants = cva(\n  'block pointer-events-none transition-all duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        line: 'h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0',\n        pill: 'h-10 w-0.5 rounded-full bg-surface5',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n    },\n  },\n);\n\nexport type ResizeHandleIndicatorProps = VariantProps<typeof indicatorVariants> & {\n  className?: string;\n};\n\n// Shared visual for resize handles (sidebar, panel separators).\n// Consumers reveal/emphasize it via their own state variant classes.\nexport const ResizeHandleIndicator = ({ variant, className }: ResizeHandleIndicatorProps) => (\n  <span aria-hidden className={cn(indicatorVariants({ variant }), className)} />\n);\n"],"names":["cva","cn"],"mappings":";;;;;;;;AAMA,MAAM,iBAAA,GAAoBA,SAAA;AAAA,EACxB,8FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,qFAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAQO,MAAM,wBAAwB,CAAC,EAAE,SAAS,SAAA,EAAU,oCACxD,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAWC,YAAG,iBAAA,CAAkB,EAAE,SAAS,CAAA,EAAG,SAAS,CAAA,EAAG;;;;"}

package/dist/primitives/resize-handle-indicator.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/resize-handle-indicator'
+export {}

package/dist/primitives/resize-handle-indicator.es.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cva } from '../index-CSm06eOE.js';
+import { c as cn } from '../cn-BakJzhuv.js';
+
+const indicatorVariants = cva(
+  "block pointer-events-none transition-all duration-150 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        line: "h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0",
+        pill: "h-10 w-0.5 rounded-full bg-surface5"
+      }
+    },
+    defaultVariants: {
+      variant: "line"
+    }
+  }
+);
+const ResizeHandleIndicator = ({ variant, className }) => /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(indicatorVariants({ variant }), className) });
+
+export { ResizeHandleIndicator };
+//# sourceMappingURL=resize-handle-indicator.es.js.map

package/dist/primitives/resize-handle-indicator.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handle-indicator.es.js","sources":["../../src/ds/primitives/resize-handle-indicator.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\n// line: gradient hairline, fits a visible container edge.\n// pill: small floating pill, for handles with no container around.\nconst indicatorVariants = cva(\n  'block pointer-events-none transition-all duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        line: 'h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0',\n        pill: 'h-10 w-0.5 rounded-full bg-surface5',\n      },\n    },\n    defaultVariants: {\n      variant: 'line',\n    },\n  },\n);\n\nexport type ResizeHandleIndicatorProps = VariantProps<typeof indicatorVariants> & {\n  className?: string;\n};\n\n// Shared visual for resize handles (sidebar, panel separators).\n// Consumers reveal/emphasize it via their own state variant classes.\nexport const ResizeHandleIndicator = ({ variant, className }: ResizeHandleIndicatorProps) => (\n  <span aria-hidden className={cn(indicatorVariants({ variant }), className)} />\n);\n"],"names":[],"mappings":";;;;AAMA,MAAM,iBAAA,GAAoB,GAAA;AAAA,EACxB,8FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,qFAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAQO,MAAM,wBAAwB,CAAC,EAAE,SAAS,SAAA,EAAU,yBACxD,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,GAAG,iBAAA,CAAkB,EAAE,SAAS,CAAA,EAAG,SAAS,CAAA,EAAG;;;;"}

package/dist/primitives/transitions.cjs.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const transitions = {
+  // For color changes (background, text, border)
+  colors: "transition-colors duration-normal ease-out-custom",
+  // For transform changes (scale, translate, rotate)
+  transform: "transition-transform duration-normal ease-out-custom",
+  // For all property changes
+  all: "transition-all duration-normal ease-out-custom",
+  // For opacity changes
+  opacity: "transition-opacity duration-normal ease-out-custom",
+  // For shadow changes
+  shadow: "transition-shadow duration-normal ease-out-custom",
+  // For slower transitions (sidebar collapse, etc.)
+  allSlow: "transition-all duration-slow ease-out-custom"
+};
+const hoverEffects = {
+  // Subtle scale effect for buttons and cards
+  scale: "hover:scale-[1.02] active:scale-[0.98]",
+  // Even more subtle scale for active state only
+  scaleSubtle: "active:scale-[0.98]",
+  // Brightness increase
+  brightness: "hover:brightness-110",
+  // Background lift
+  lift: "hover:bg-surface4"
+};
+const focusRing = {
+  // Standard focus ring with glow
+  default: "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+  // Focus ring without glow
+  simple: "focus:outline-hidden focus:ring-1 focus:ring-accent1",
+  // Focus visible only (keyboard navigation)
+  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
+};
+
+exports.focusRing = focusRing;
+exports.hoverEffects = hoverEffects;
+exports.transitions = transitions;
+//# sourceMappingURL=transitions.cjs.js.map

package/dist/primitives/transitions.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.cjs.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Transition utility classes for consistent animations across components\n\n// Base transition presets (Tailwind classes)\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-surface4',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-accent1',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":";;;;AAGO,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,8EAAA;AAAA;AAAA,EAET,MAAA,EAAQ,sDAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;;;"}

package/dist/primitives/transitions.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/transitions'
+export {}

package/dist/primitives/transitions.es.js

@@ -0,0 +1,35 @@
+const transitions = {
+  // For color changes (background, text, border)
+  colors: "transition-colors duration-normal ease-out-custom",
+  // For transform changes (scale, translate, rotate)
+  transform: "transition-transform duration-normal ease-out-custom",
+  // For all property changes
+  all: "transition-all duration-normal ease-out-custom",
+  // For opacity changes
+  opacity: "transition-opacity duration-normal ease-out-custom",
+  // For shadow changes
+  shadow: "transition-shadow duration-normal ease-out-custom",
+  // For slower transitions (sidebar collapse, etc.)
+  allSlow: "transition-all duration-slow ease-out-custom"
+};
+const hoverEffects = {
+  // Subtle scale effect for buttons and cards
+  scale: "hover:scale-[1.02] active:scale-[0.98]",
+  // Even more subtle scale for active state only
+  scaleSubtle: "active:scale-[0.98]",
+  // Brightness increase
+  brightness: "hover:brightness-110",
+  // Background lift
+  lift: "hover:bg-surface4"
+};
+const focusRing = {
+  // Standard focus ring with glow
+  default: "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+  // Focus ring without glow
+  simple: "focus:outline-hidden focus:ring-1 focus:ring-accent1",
+  // Focus visible only (keyboard navigation)
+  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
+};
+
+export { focusRing, hoverEffects, transitions };
+//# sourceMappingURL=transitions.es.js.map

package/dist/primitives/transitions.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.es.js","sources":["../../src/ds/primitives/transitions.ts"],"sourcesContent":["// Transition utility classes for consistent animations across components\n\n// Base transition presets (Tailwind classes)\nexport const transitions = {\n  // For color changes (background, text, border)\n  colors: 'transition-colors duration-normal ease-out-custom',\n  // For transform changes (scale, translate, rotate)\n  transform: 'transition-transform duration-normal ease-out-custom',\n  // For all property changes\n  all: 'transition-all duration-normal ease-out-custom',\n  // For opacity changes\n  opacity: 'transition-opacity duration-normal ease-out-custom',\n  // For shadow changes\n  shadow: 'transition-shadow duration-normal ease-out-custom',\n  // For slower transitions (sidebar collapse, etc.)\n  allSlow: 'transition-all duration-slow ease-out-custom',\n} as const;\n\n// Interactive hover effects\nexport const hoverEffects = {\n  // Subtle scale effect for buttons and cards\n  scale: 'hover:scale-[1.02] active:scale-[0.98]',\n  // Even more subtle scale for active state only\n  scaleSubtle: 'active:scale-[0.98]',\n  // Brightness increase\n  brightness: 'hover:brightness-110',\n  // Background lift\n  lift: 'hover:bg-surface4',\n} as const;\n\n// Focus ring styles\nexport const focusRing = {\n  // Standard focus ring with glow\n  default: 'focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring',\n  // Focus ring without glow\n  simple: 'focus:outline-hidden focus:ring-1 focus:ring-accent1',\n  // Focus visible only (keyboard navigation)\n  visible:\n    'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring',\n} as const;\n\nexport type TransitionPreset = keyof typeof transitions;\nexport type HoverEffect = keyof typeof hoverEffects;\nexport type FocusRingStyle = keyof typeof focusRing;\n"],"names":[],"mappings":"AAGO,MAAM,WAAA,GAAc;AAAA;AAAA,EAEzB,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,SAAA,EAAW,sDAAA;AAAA;AAAA,EAEX,GAAA,EAAK,gDAAA;AAAA;AAAA,EAEL,OAAA,EAAS,oDAAA;AAAA;AAAA,EAET,MAAA,EAAQ,mDAAA;AAAA;AAAA,EAER,OAAA,EAAS;AACX;AAGO,MAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,KAAA,EAAO,wCAAA;AAAA;AAAA,EAEP,WAAA,EAAa,qBAAA;AAAA;AAAA,EAEb,UAAA,EAAY,sBAAA;AAAA;AAAA,EAEZ,IAAA,EAAM;AACR;AAGO,MAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,OAAA,EAAS,8EAAA;AAAA;AAAA,EAET,MAAA,EAAQ,sDAAA;AAAA;AAAA,EAER,OAAA,EACE;AACJ;;;;"}

package/dist/primitives/visually-hidden.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+
+
+
+Object.defineProperty(exports, "VisuallyHidden", {
+	enumerable: true,
+	get: () => reactVisuallyHidden.VisuallyHidden
+});
+//# sourceMappingURL=visually-hidden.cjs.js.map

package/dist/primitives/visually-hidden.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/primitives/visually-hidden.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/primitives/visually-hidden'
+export {}

package/dist/primitives/visually-hidden.es.js

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+//# sourceMappingURL=visually-hidden.es.js.map

package/dist/primitives/visually-hidden.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/process-step-progress-bar-CdsJhTYk.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XIcon, CheckIcon } from 'lucide-react';
+import { S as Spinner } from './spinner-CzdgR9lk.js';
+import { transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+function getStatusIcon(status) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsx(Spinner, {});
+    case "success":
+      return /* @__PURE__ */ jsx(CheckIcon, {});
+    case "failed":
+      return /* @__PURE__ */ jsx(XIcon, {});
+    default:
+      return null;
+  }
+}
+
+function ProcessStepListItem({ stepId, step, isActive, position }) {
+  const formatStepTitle = (stepId2) => {
+    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", transitions.all, {
+        "border border-dashed border-neutral2 bg-surface3": isActive
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn("text-ui-md min-w-6 flex justify-end", transitions.colors, {
+                "text-neutral5": isActive || step.status === "success",
+                "text-neutral3": !isActive && step.status !== "success"
+              }),
+              children: [
+                position,
+                "."
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "h4",
+              {
+                className: cn("text-ui-md", transitions.colors, {
+                  "text-neutral5": isActive || step.status === "success",
+                  "text-neutral3": !isActive && step.status !== "success"
+                }),
+                children: formatStepTitle(stepId)
+              }
+            ),
+            step.description && /* @__PURE__ */ jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", children: step.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center",
+              transitions.all,
+              {
+                "border border-neutral2 border-dashed": step.status === "pending",
+                "[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4": step.status !== "running",
+                "w-[1.75rem] h-[1.75rem]": step.status === "running",
+                "bg-accent1Dark shadow-glow-accent1": step.status === "success",
+                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
+                "scale-110": step.status === "success" || step.status === "failed"
+              }
+            ),
+            children: getStatusIcon(step.status)
+          }
+        )
+      ]
+    }
+  );
+}
+
+function ProcessStepList({ currentStep, steps = [], className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsx(
+    ProcessStepListItem,
+    {
+      stepId: step.id,
+      step,
+      isActive: currentStep?.id === step.id,
+      position: idx + 1
+    },
+    step.id
+  )) });
+}
+
+function ProcessStepProgressBar({ steps }) {
+  const totalSteps = steps.length;
+  const completedSteps = steps.filter((step) => step.status === "success").length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-center flex-col gap-4 content-center w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("flex justify-end items-center relative h-[2rem]", transitions.colors, {
+            "bg-accent1Dark": step.status === "success" && steps?.[idx - 1]?.status === "success"
+          }),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm",
+                transitions.all,
+                {
+                  "border border-neutral2 border-dashed": step.status === "pending",
+                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
+                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
+                }
+              ),
+              children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {}) : idx + 1
+            }
+          )
+        },
+        step.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("text-xs text-neutral3 text-center", transitions.colors), children: [
+      completedSteps,
+      " of ",
+      totalSteps,
+      " steps completed"
+    ] })
+  ] });
+}
+
+export { ProcessStepList as P, ProcessStepListItem as a, ProcessStepProgressBar as b, getStatusIcon as g };
+//# sourceMappingURL=process-step-progress-bar-CdsJhTYk.js.map

package/dist/process-step-progress-bar-CdsJhTYk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-step-progress-bar-CdsJhTYk.js","sources":["../src/ds/components/Steps/shared.tsx","../src/ds/components/Steps/process-step-list-item.tsx","../src/ds/components/Steps/process-step-list.tsx","../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner />;\n    case 'success':\n      return <CheckIcon />;\n    case 'failed':\n      return <XIcon />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListItemProps = {\n  stepId: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n};\n\nexport function ProcessStepListItem({ stepId, step, isActive, position }: ProcessStepListItemProps) {\n  // Always format the step ID as the title\n  const formatStepTitle = (stepId: string) => {\n    return stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, ' ');\n  };\n\n  return (\n    <div\n      className={cn('grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg', transitions.all, {\n        'border border-dashed border-neutral2 bg-surface3': isActive,\n      })}\n    >\n      <div className=\"grid grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('text-ui-md min-w-6 flex justify-end', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div>\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {formatStepTitle(stepId)}\n          </h4>\n          {step.description && <p className=\"text-ui-md text-neutral2 -mt-0.5\">{step.description}</p>}\n        </div>\n      </div>\n      <div\n        className={cn(\n          'w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center',\n          transitions.all,\n          {\n            'border border-neutral2 border-dashed': step.status === 'pending',\n            '[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4': step.status !== 'running',\n            'w-[1.75rem] h-[1.75rem]': step.status === 'running',\n            'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n            'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n            'scale-110': step.status === 'success' || step.status === 'failed',\n          },\n        )}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem\n          key={step.id}\n          stepId={step.id}\n          step={step}\n          isActive={currentStep?.id === step.id}\n          position={idx + 1}\n        />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex justify-center flex-col gap-4 content-center w-full\">\n      <div className=\"grid grid-cols-[0_repeat(9,1fr)] w-full\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('flex justify-end items-center relative h-[2rem]', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm',\n                  transitions.all,\n                  {\n                    'border border-neutral2 border-dashed': step.status === 'pending',\n                    '[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]': step.status !== 'running',\n                    'bg-accent1Dark text-white shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-white shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-xs text-neutral3 text-center', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["stepId"],"mappings":"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"}

package/dist/process-step-progress-bar-Cs7oK8-I.cjs

@@ -0,0 +1,141 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const spinner = require('./spinner-CbKwvEp3.cjs');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-vA5sWo9W.cjs');
+
+function getStatusIcon(status) {
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {});
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {});
+    case "failed":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {});
+    default:
+      return null;
+  }
+}
+
+function ProcessStepListItem({ stepId, step, isActive, position }) {
+  const formatStepTitle = (stepId2) => {
+    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn("grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg", primitives_transitions.transitions.all, {
+        "border border-dashed border-neutral2 bg-surface3": isActive
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: utils_cn.cn("text-ui-md min-w-6 flex justify-end", primitives_transitions.transitions.colors, {
+                "text-neutral5": isActive || step.status === "success",
+                "text-neutral3": !isActive && step.status !== "success"
+              }),
+              children: [
+                position,
+                "."
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                className: utils_cn.cn("text-ui-md", primitives_transitions.transitions.colors, {
+                  "text-neutral5": isActive || step.status === "success",
+                  "text-neutral3": !isActive && step.status !== "success"
+                }),
+                children: formatStepTitle(stepId)
+              }
+            ),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", children: step.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils_cn.cn(
+              "w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center",
+              primitives_transitions.transitions.all,
+              {
+                "border border-neutral2 border-dashed": step.status === "pending",
+                "[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4": step.status !== "running",
+                "w-[1.75rem] h-[1.75rem]": step.status === "running",
+                "bg-accent1Dark shadow-glow-accent1": step.status === "success",
+                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
+                "scale-110": step.status === "success" || step.status === "failed"
+              }
+            ),
+            children: getStatusIcon(step.status)
+          }
+        )
+      ]
+    }
+  );
+}
+
+function ProcessStepList({ currentStep, steps = [], className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    ProcessStepListItem,
+    {
+      stepId: step.id,
+      step,
+      isActive: currentStep?.id === step.id,
+      position: idx + 1
+    },
+    step.id
+  )) });
+}
+
+function ProcessStepProgressBar({ steps }) {
+  const totalSteps = steps.length;
+  const completedSteps = steps.filter((step) => step.status === "success").length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center flex-col gap-4 content-center w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[0_repeat(9,1fr)] w-full", children: steps.map((step, idx) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: utils_cn.cn("flex justify-end items-center relative h-[2rem]", primitives_transitions.transitions.colors, {
+            "bg-accent1Dark": step.status === "success" && steps?.[idx - 1]?.status === "success"
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils_cn.cn(
+                "w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm",
+                primitives_transitions.transitions.all,
+                {
+                  "border border-neutral2 border-dashed": step.status === "pending",
+                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
+                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
+                }
+              ),
+              children: step.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {}) : idx + 1
+            }
+          )
+        },
+        step.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("text-xs text-neutral3 text-center", primitives_transitions.transitions.colors), children: [
+      completedSteps,
+      " of ",
+      totalSteps,
+      " steps completed"
+    ] })
+  ] });
+}
+
+exports.ProcessStepList = ProcessStepList;
+exports.ProcessStepListItem = ProcessStepListItem;
+exports.ProcessStepProgressBar = ProcessStepProgressBar;
+exports.getStatusIcon = getStatusIcon;
+//# sourceMappingURL=process-step-progress-bar-Cs7oK8-I.cjs.map

package/dist/process-step-progress-bar-Cs7oK8-I.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-step-progress-bar-Cs7oK8-I.cjs","sources":["../src/ds/components/Steps/shared.tsx","../src/ds/components/Steps/process-step-list-item.tsx","../src/ds/components/Steps/process-step-list.tsx","../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner />;\n    case 'success':\n      return <CheckIcon />;\n    case 'failed':\n      return <XIcon />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListItemProps = {\n  stepId: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n};\n\nexport function ProcessStepListItem({ stepId, step, isActive, position }: ProcessStepListItemProps) {\n  // Always format the step ID as the title\n  const formatStepTitle = (stepId: string) => {\n    return stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, ' ');\n  };\n\n  return (\n    <div\n      className={cn('grid gap-6 grid-cols-[1fr_auto] py-3 px-4 rounded-lg', transitions.all, {\n        'border border-dashed border-neutral2 bg-surface3': isActive,\n      })}\n    >\n      <div className=\"grid grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('text-ui-md min-w-6 flex justify-end', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div>\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {formatStepTitle(stepId)}\n          </h4>\n          {step.description && <p className=\"text-ui-md text-neutral2 -mt-0.5\">{step.description}</p>}\n        </div>\n      </div>\n      <div\n        className={cn(\n          'w-[1.75rem] h-[1.75rem] rounded-full flex items-center justify-center self-center',\n          transitions.all,\n          {\n            'border border-neutral2 border-dashed': step.status === 'pending',\n            '[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4': step.status !== 'running',\n            'w-[1.75rem] h-[1.75rem]': step.status === 'running',\n            'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n            'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n            'scale-110': step.status === 'success' || step.status === 'failed',\n          },\n        )}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem\n          key={step.id}\n          stepId={step.id}\n          step={step}\n          isActive={currentStep?.id === step.id}\n          position={idx + 1}\n        />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex justify-center flex-col gap-4 content-center w-full\">\n      <div className=\"grid grid-cols-[0_repeat(9,1fr)] w-full\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('flex justify-end items-center relative h-[2rem]', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'w-[2rem] h-[2rem] rounded-full flex items-center justify-center self-center absolute right-0 translate-x-[50%] bg-surface3 z-10 text-neutral3 font-bold text-ui-sm',\n                  transitions.all,\n                  {\n                    'border border-neutral2 border-dashed': step.status === 'pending',\n                    '[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]': step.status !== 'running',\n                    'bg-accent1Dark text-white shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-white shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-xs text-neutral3 text-center', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["Spinner","CheckIcon","XIcon","stepId","jsxs","cn","transitions","jsx"],"mappings":"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"}