@mastra/playground-ui 56.0.0-alpha.9 → 56.0.0

package/dist/components/Steps.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const spinner = require('../spinner-cX-ypfV2.cjs');
+const spinner = require('../spinner-CqP-NaB2.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function getStatusIcon(status) {
   switch (status) {
@@ -22,7 +22,7 @@ function getStatusIcon(status) {
 }
 
 function PendingRing() {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "text-neutral2", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "text-placeholder", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
     "circle",
     {
       cx: "12",
@@ -57,14 +57,13 @@ function StepStatusMarker({ status, variant }) {
         "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
         primitives_transitions.transitions.colors,
         primitives_transitions.transitions.transform,
-        primitives_transitions.transitions.shadow,
         {
           "[&>svg]:text-notice-success-fg": status === "success",
           "[&>svg]:text-notice-destructive-fg": status === "failed",
-          "border border-dashed border-neutral2": status === "pending",
+          "border border-dashed border-placeholder": status === "pending",
           "[&>svg]:size-4": status !== "running",
-          "bg-accent1Dark shadow-glow-accent1": status === "success",
-          "bg-accent2Dark shadow-glow-accent2": status === "failed",
+          "bg-accent1Dark": status === "success",
+          "bg-accent2Dark": status === "failed",
           "scale-110": status === "success" || status === "failed"
         }
       ),
@@ -81,7 +80,7 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
         primitives_transitions.transitions.colors,
         {
           "border border-transparent": variant === "default",
-          "border-dashed border-neutral2 bg-surface3": isActive && variant === "default"
+          "border-dashed border-placeholder bg-card": isActive && variant === "default"
         }
       ),
       children: [
@@ -89,9 +88,9 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
           /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: utils_cn.cn("flex min-w-6 justify-end text-ui-md", primitives_transitions.transitions.colors, {
-                "text-neutral5": isActive || step.status === "success",
-                "text-neutral3": !isActive && step.status !== "success"
+              className: utils_cn.cn("flex min-w-6 justify-end text-body", primitives_transitions.transitions.colors, {
+                "text-foreground": isActive || step.status === "success",
+                "text-muted-foreground": !isActive && step.status !== "success"
               }),
               children: [
                 position,
@@ -103,14 +102,14 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
             /* @__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"
+                className: utils_cn.cn("text-body", primitives_transitions.transitions.colors, {
+                  "text-foreground": isActive || step.status === "success",
+                  "text-muted-foreground": !isActive && step.status !== "success"
                 }),
                 children: step.title
               }
             ),
-            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: utils_cn.cn("-mt-0.5 text-ui-md text-neutral2", { truncate: variant === "plain" }), children: step.description })
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: utils_cn.cn("-mt-0.5 text-body text-placeholder", { truncate: variant === "plain" }), children: step.description })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(StepStatusMarker, { status: step.status, variant })
@@ -138,14 +137,13 @@ function ProcessStepProgressBar({ steps }) {
             "div",
             {
               className: utils_cn.cn(
-                "absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none",
+                "absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-fill text-column text-muted-foreground motion-reduce:transition-none",
                 primitives_transitions.transitions.colors,
                 primitives_transitions.transitions.transform,
-                primitives_transitions.transitions.shadow,
                 {
-                  "border border-dashed border-neutral2": step.status === "pending",
-                  "bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110": step.status === "success",
-                  "bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110": step.status === "failed"
+                  "border border-dashed border-placeholder": step.status === "pending",
+                  "bg-accent1Dark text-notice-success-fg scale-110": step.status === "success",
+                  "bg-accent2Dark text-notice-destructive-fg scale-110": step.status === "failed"
                 }
               ),
               children: step.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {}) : idx + 1
@@ -155,7 +153,7 @@ function ProcessStepProgressBar({ steps }) {
         step.id
       );
     }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("text-center text-ui-sm text-neutral3", primitives_transitions.transitions.colors), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("text-center text-caption text-muted-foreground", primitives_transitions.transitions.colors), children: [
       completedSteps,
       " of ",
       totalSteps,

package/dist/components/Steps.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.cjs.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 size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\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\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-neutral2\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        transitions.shadow,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-neutral2': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark shadow-glow-accent1': status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\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            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\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 key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\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 w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg 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-center text-ui-sm text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Spinner","CheckIcon","XIcon","cn","transitions","jsxs"],"mappings":";;;;;;;;;;AAGO,SAAS,cAAc,MAAA,EAAgB;AAC5C,EAAA,QAAQ,MAAA;AAAQ,IACd,KAAK,SAAA;AACH,MAAA,uBAAOA,cAAA,CAACC,eAAA,EAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,eAAW,IAAA,EAAC,CAAA;AAAA,IACxC,KAAK,SAAA;AACH,MAAA,uBAAOD,cAAA,CAACE,qBAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,IAChC,KAAK,QAAA;AACH,MAAA,uBAAOF,cAAA,CAACG,iBAAA,EAAA,EAAM,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,IAC5B;AACE,MAAA,OAAO,IAAA;AAAA;AAEb;;ACNA,SAAS,WAAA,GAAc;AACrB,EAAA,sCACG,KAAA,EAAA,EAAI,OAAA,EAAQ,aAAY,SAAA,EAAU,eAAA,EAAgB,eAAW,IAAA,EAC5D,QAAA,kBAAAH,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,IAAA;AAAA,MACH,EAAA,EAAG,IAAA;AAAA,MACH,CAAA,EAAE,KAAA;AAAA,MACF,UAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAK,MAAA;AAAA,MACL,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAc,OAAA;AAAA,MACd,eAAA,EAAgB;AAAA;AAAA,GAClB,EACF,CAAA;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,MAAA,EAAQ,OAAA,EAAQ,EAA4D;AACtG,EAAA,IAAI,YAAY,OAAA,EAAS;AACvB,IAAA,uBACEA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWI,WAAA,CAAG,oEAAA,EAAsEC,kCAAA,CAAY,MAAA,EAAQ;AAAA,UACtG,0BAA0B,MAAA,KAAW,SAAA;AAAA,UACrC,0BAA0B,MAAA,KAAW;AAAA,SACtC,CAAA;AAAA,QAEA,qBAAW,SAAA,mBAAYL,cAAA,CAAC,WAAA,EAAA,EAAY,CAAA,GAAK,cAAc,MAAM;AAAA;AAAA,KAChE;AAAA,EAEJ;AAEA,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWI,WAAA;AAAA,QACT,gGAAA;AAAA,QACAC,kCAAA,CAAY,MAAA;AAAA,QACZA,kCAAA,CAAY,SAAA;AAAA,QACZA,kCAAA,CAAY,MAAA;AAAA,QACZ;AAAA,UACE,kCAAkC,MAAA,KAAW,SAAA;AAAA,UAC7C,sCAAsC,MAAA,KAAW,QAAA;AAAA,UACjD,wCAAwC,MAAA,KAAW,SAAA;AAAA,UACnD,kBAAkB,MAAA,KAAW,SAAA;AAAA,UAC7B,sCAAsC,MAAA,KAAW,SAAA;AAAA,UACjD,sCAAsC,MAAA,KAAW,QAAA;AAAA,UACjD,WAAA,EAAa,MAAA,KAAW,SAAA,IAAa,MAAA,KAAW;AAAA;AAClD,OACF;AAAA,MAEC,wBAAc,MAAM;AAAA;AAAA,GACvB;AAEJ;AAWO,SAAS,oBAAoB,EAAE,IAAA,EAAM,UAAU,QAAA,EAAU,OAAA,GAAU,WAAU,EAA6B;AAC/G,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWF,WAAA;AAAA,QACT,oFAAA;AAAA,QACAC,kCAAA,CAAY,MAAA;AAAA,QACZ;AAAA,UACE,6BAA6B,OAAA,KAAY,SAAA;AAAA,UACzC,2CAAA,EAA6C,YAAY,OAAA,KAAY;AAAA;AACvE,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yCAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWF,WAAA,CAAG,qCAAA,EAAuCC,kCAAA,CAAY,MAAA,EAAQ;AAAA,gBACvE,eAAA,EAAiB,QAAA,IAAY,IAAA,CAAK,MAAA,KAAW,SAAA;AAAA,gBAC7C,eAAA,EAAiB,CAAC,QAAA,IAAY,IAAA,CAAK,MAAA,KAAW;AAAA,eAC/C,CAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gBAAA,QAAA;AAAA,gBAAS;AAAA;AAAA;AAAA,WACZ;AAAA,0BACAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,EAAA;AAAA,4BAAAN,cAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAWI,WAAA,CAAG,YAAA,EAAcC,kCAAA,CAAY,MAAA,EAAQ;AAAA,kBAC9C,eAAA,EAAiB,QAAA,IAAY,IAAA,CAAK,MAAA,KAAW,SAAA;AAAA,kBAC7C,eAAA,EAAiB,CAAC,QAAA,IAAY,IAAA,CAAK,MAAA,KAAW;AAAA,iBAC/C,CAAA;AAAA,gBAEA,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,aACR;AAAA,YACC,IAAA,CAAK,WAAA,oBACJL,cAAA,CAAC,GAAA,EAAA,EAAE,WAAWI,WAAA,CAAG,kCAAA,EAAoC,EAAE,QAAA,EAAU,OAAA,KAAY,OAAA,EAAS,CAAA,EACnF,eAAK,WAAA,EACR;AAAA,WAAA,EAEJ;AAAA,SAAA,EACF,CAAA;AAAA,wBACAJ,cAAA,CAAC,gBAAA,EAAA,EAAiB,MAAA,EAAQ,IAAA,CAAK,QAAQ,OAAA,EAAkB;AAAA;AAAA;AAAA,GAC3D;AAEJ;;ACtGO,SAAS,gBAAgB,EAAE,WAAA,EAAa,QAAQ,EAAC,EAAG,WAAU,EAAyB;AAC5F,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWI,WAAA,CAAG,SAAS,GACzB,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAmB,GAAA,qBAC7BJ,cAAA,CAAC,uBAAkC,IAAA,EAAY,QAAA,EAAU,WAAA,EAAa,EAAA,KAAO,IAAA,CAAK,EAAA,EAAI,QAAA,EAAU,GAAA,GAAM,CAAA,EAAA,EAA5E,IAAA,CAAK,EAA0E,CAC1G,CAAA,EACH,CAAA;AAEJ;;ACTO,SAAS,sBAAA,CAAuB,EAAE,KAAA,EAAM,EAAgC;AAC7E,EAAA,MAAM,aAAa,KAAA,CAAM,MAAA;AACzB,EAAA,MAAM,iBAAiB,KAAA,CAAM,MAAA,CAAO,UAAQ,IAAA,CAAK,MAAA,KAAW,SAAS,CAAA,CAAE,MAAA;AAEvE,EAAA,uBACEM,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0DAAA,EACb,QAAA,EAAA;AAAA,oBAAAN,cAAA,CAAC,SAAI,SAAA,EAAU,yCAAA,EACZ,gBAAM,GAAA,CAAI,CAAC,MAAmB,GAAA,KAAgB;AAC7C,MAAA,uBACEA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAWI,WAAA,CAAG,4CAAA,EAA8CC,kCAAA,CAAY,MAAA,EAAQ;AAAA,YAC9E,gBAAA,EAAkB,KAAK,MAAA,KAAW,SAAA,IAAa,QAAQ,GAAA,GAAM,CAAC,GAAG,MAAA,KAAW;AAAA,WAC7E,CAAA;AAAA,UAED,QAAA,kBAAAL,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWI,WAAA;AAAA,gBACT,qLAAA;AAAA,gBACAC,kCAAA,CAAY,MAAA;AAAA,gBACZA,kCAAA,CAAY,SAAA;AAAA,gBACZA,kCAAA,CAAY,MAAA;AAAA,gBACZ;AAAA,kBACE,sCAAA,EAAwC,KAAK,MAAA,KAAW,SAAA;AAAA,kBACxD,qEAAA,EAAuE,KAAK,MAAA,KAAW,SAAA;AAAA,kBACvF,yEAAA,EAA2E,KAAK,MAAA,KAAW;AAAA;AAC7F,eACF;AAAA,cAEC,eAAK,MAAA,KAAW,SAAA,mBAAYL,cAAA,CAACC,eAAA,EAAA,EAAQ,IAAK,GAAA,GAAM;AAAA;AAAA;AACnD,SAAA;AAAA,QAnBK,IAAA,CAAK;AAAA,OAoBZ;AAAA,IAEJ,CAAC,CAAA,EACH,CAAA;AAAA,oCACC,KAAA,EAAA,EAAI,SAAA,EAAWG,YAAG,sCAAA,EAAwCC,kCAAA,CAAY,MAAM,CAAA,EAC1E,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MAAe,MAAA;AAAA,MAAK,UAAA;AAAA,MAAW;AAAA,KAAA,EAClC;AAAA,GAAA,EACF,CAAA;AAEJ;;;;;;;"}
+{"version":3,"file":"Steps.cjs.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 size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\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\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-placeholder\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-placeholder': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark': status === 'success',\n          'bg-accent2Dark': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-placeholder bg-card': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-body', transitions.colors, {\n            'text-foreground': isActive || step.status === 'success',\n            'text-muted-foreground': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-body', transitions.colors, {\n              'text-foreground': isActive || step.status === 'success',\n              'text-muted-foreground': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-body text-placeholder', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\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 key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\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 w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-fill text-column text-muted-foreground motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  {\n                    'border border-dashed border-placeholder': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg 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-center text-caption text-muted-foreground', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Spinner","CheckIcon","XIcon","cn","transitions","jsxs"],"mappings":"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"}

package/dist/components/Steps.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { XIcon, CheckIcon } from 'lucide-react';
-import { S as Spinner } from '../spinner-SvnJqdcS.js';
+import { S as Spinner } from '../spinner-D2C2DYw8.js';
 import { transitions } from '../primitives/transitions.es.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 function getStatusIcon(status) {
   switch (status) {
@@ -18,7 +18,7 @@ function getStatusIcon(status) {
 }
 
 function PendingRing() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "text-neutral2", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "text-placeholder", "aria-hidden": true, children: /* @__PURE__ */ jsx(
     "circle",
     {
       cx: "12",
@@ -53,14 +53,13 @@ function StepStatusMarker({ status, variant }) {
         "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
         transitions.colors,
         transitions.transform,
-        transitions.shadow,
         {
           "[&>svg]:text-notice-success-fg": status === "success",
           "[&>svg]:text-notice-destructive-fg": status === "failed",
-          "border border-dashed border-neutral2": status === "pending",
+          "border border-dashed border-placeholder": status === "pending",
           "[&>svg]:size-4": status !== "running",
-          "bg-accent1Dark shadow-glow-accent1": status === "success",
-          "bg-accent2Dark shadow-glow-accent2": status === "failed",
+          "bg-accent1Dark": status === "success",
+          "bg-accent2Dark": status === "failed",
           "scale-110": status === "success" || status === "failed"
         }
       ),
@@ -77,7 +76,7 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
         transitions.colors,
         {
           "border border-transparent": variant === "default",
-          "border-dashed border-neutral2 bg-surface3": isActive && variant === "default"
+          "border-dashed border-placeholder bg-card": isActive && variant === "default"
         }
       ),
       children: [
@@ -85,9 +84,9 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
           /* @__PURE__ */ jsxs(
             "span",
             {
-              className: cn("flex min-w-6 justify-end text-ui-md", transitions.colors, {
-                "text-neutral5": isActive || step.status === "success",
-                "text-neutral3": !isActive && step.status !== "success"
+              className: cn("flex min-w-6 justify-end text-body", transitions.colors, {
+                "text-foreground": isActive || step.status === "success",
+                "text-muted-foreground": !isActive && step.status !== "success"
               }),
               children: [
                 position,
@@ -99,14 +98,14 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
             /* @__PURE__ */ jsx(
               "h4",
               {
-                className: cn("text-ui-md", transitions.colors, {
-                  "text-neutral5": isActive || step.status === "success",
-                  "text-neutral3": !isActive && step.status !== "success"
+                className: cn("text-body", transitions.colors, {
+                  "text-foreground": isActive || step.status === "success",
+                  "text-muted-foreground": !isActive && step.status !== "success"
                 }),
                 children: step.title
               }
             ),
-            step.description && /* @__PURE__ */ jsx("p", { className: cn("-mt-0.5 text-ui-md text-neutral2", { truncate: variant === "plain" }), children: step.description })
+            step.description && /* @__PURE__ */ jsx("p", { className: cn("-mt-0.5 text-body text-placeholder", { truncate: variant === "plain" }), children: step.description })
           ] })
         ] }),
         /* @__PURE__ */ jsx(StepStatusMarker, { status: step.status, variant })
@@ -134,14 +133,13 @@ function ProcessStepProgressBar({ steps }) {
             "div",
             {
               className: cn(
-                "absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none",
+                "absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-fill text-column text-muted-foreground motion-reduce:transition-none",
                 transitions.colors,
                 transitions.transform,
-                transitions.shadow,
                 {
-                  "border border-dashed border-neutral2": step.status === "pending",
-                  "bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110": step.status === "success",
-                  "bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110": step.status === "failed"
+                  "border border-dashed border-placeholder": step.status === "pending",
+                  "bg-accent1Dark text-notice-success-fg scale-110": step.status === "success",
+                  "bg-accent2Dark text-notice-destructive-fg scale-110": step.status === "failed"
                 }
               ),
               children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {}) : idx + 1
@@ -151,7 +149,7 @@ function ProcessStepProgressBar({ steps }) {
         step.id
       );
     }) }),
-    /* @__PURE__ */ jsxs("div", { className: cn("text-center text-ui-sm text-neutral3", transitions.colors), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("text-center text-caption text-muted-foreground", transitions.colors), children: [
       completedSteps,
       " of ",
       totalSteps,

package/dist/components/Steps.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.es.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 size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\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\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-neutral2\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        transitions.shadow,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-neutral2': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark shadow-glow-accent1': status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\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            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\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 key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\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 w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg 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-center text-ui-sm text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Steps.es.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 size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\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\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-placeholder\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-placeholder': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark': status === 'success',\n          'bg-accent2Dark': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-placeholder bg-card': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-body', transitions.colors, {\n            'text-foreground': isActive || step.status === 'success',\n            'text-muted-foreground': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-body', transitions.colors, {\n              'text-foreground': isActive || step.status === 'success',\n              'text-muted-foreground': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-body text-placeholder', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\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 key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\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 w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-fill text-column text-muted-foreground motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  {\n                    'border border-dashed border-placeholder': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg 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-center text-caption text-muted-foreground', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Switch.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const _switch = require('../switch-CkEdGkeB.cjs');
+const _switch = require('../switch-6125Oajw.cjs');
 
 
 

package/dist/components/Switch.es.js

@@ -1,2 +1,2 @@
-export { S as Switch } from '../switch-CkHq0TIf.js';
+export { S as Switch } from '../switch-CE9jTpUG.js';
 //# sourceMappingURL=Switch.es.js.map

package/dist/components/Table.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
-const Txt = require('../Txt-C7rZCmrg.cjs');
+const Txt = require('../Txt-B4-2nLaI.cjs');
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -16,14 +16,14 @@ const Table = ({ className, children, size = "default", style }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("table", { className: utils_cn.cn("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: utils_cn.cn("h-table-header border-b border-border1 bg-surface2/80", className), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: utils_cn.cn("h-table-header border-b border-border bg-card", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
       className: utils_cn.cn(
-        "h-full text-left text-ui-xs font-medium tracking-wide whitespace-nowrap text-neutral2 uppercase first:pl-3 last:pr-3",
+        "h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3",
         className
       ),
       ...props,
@@ -60,13 +60,13 @@ const Row = React.forwardRef(
       "tr",
       {
         className: utils_cn.cn(
-          "border-b border-border1",
+          "border-b border-border",
           // Smooth hover transition
           "transition-colors duration-normal ease-out-custom",
-          "hover:bg-surface3",
+          "hover:bg-fill-subtle",
           // Focus state
-          "focus:bg-surface3 focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
-          selected && "bg-surface4",
+          "focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
+          selected && "bg-fill-hover",
           onClick && "cursor-pointer",
           className
         ),
@@ -98,25 +98,25 @@ const formatDateCell = (date) => {
 };
 
 const Cell = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: utils_cn.cn("text-neutral5 first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex size-full shrink-0 items-center"), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: utils_cn.cn("text-foreground first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex size-full shrink-0 items-center"), children }) });
 };
 const TxtCell = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className, children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-smd", className: "w-full truncate", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className, children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", className: "w-full truncate", children }) });
 };
 const DateTimeCell = ({ dateTime, ...props }) => {
   const { day, time } = formatDateCell(dateTime);
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-sm", className: "text-neutral3", children: day }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children: day }),
     " ",
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-md", children: time })
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body", children: time })
   ] }) });
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3.5", children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "lg", className: "text-neutral5", children: icon }),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "lg", className: "text-foreground", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-md", className: "text-neutral6", children: name }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-xs", className: "max-w-dropdown-max-height text-neutral3 w-full truncate pt-1", children: description })
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body", tone: "ink", children: name }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", className: "w-full max-w-75 truncate pt-1", children: description })
     ] }),
     meta
   ] }) });

package/dist/components/Table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border1 bg-surface2/80', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-ui-xs font-medium tracking-wide whitespace-nowrap text-neutral2 uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border1',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-surface3',\n          // Focus state\n          'focus:bg-surface3 focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-surface4',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-neutral5 first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"ui-smd\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"ui-sm\" className=\"text-neutral3\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"ui-md\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-neutral5\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"ui-md\" className=\"text-neutral6\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"ui-xs\" className=\"max-w-dropdown-max-height text-neutral3 w-full truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":["jsx","cn","forwardRef","useRef","useEffect","Txt","jsxs","Icon","useState","useCallback"],"mappings":"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"}
+{"version":3,"file":"Table.cjs.js","sources":["../../src/ds/components/Table/Table.tsx","../../src/ds/components/Table/utils.ts","../../src/ds/components/Table/Cells.tsx","../../src/ds/components/Table/use-table-keyboard-navigation.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, ThHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TableProps {\n  className?: string;\n  children: ReactNode;\n  size?: 'default' | 'small';\n  style?: CSSProperties;\n}\n\nconst rowSize = {\n  default: '[&>tbody>tr]:h-table-row',\n  small: '[&>tbody>tr]:h-table-row-small',\n};\n\nexport const Table = ({ className, children, size = 'default', style }: TableProps) => {\n  return (\n    <table className={cn('w-full', rowSize[size], className)} style={style}>\n      {children}\n    </table>\n  );\n};\n\nexport interface TheadProps {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Thead = ({ className, children }: TheadProps) => {\n  return (\n    <thead>\n      <tr className={cn('h-table-header border-b border-border bg-card', className)}>{children}</tr>\n    </thead>\n  );\n};\n\nexport interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport const Th = ({ className, children, ...props }: ThProps) => {\n  return (\n    <th\n      className={cn(\n        'h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n};\n\nexport interface TbodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n  children: ReactNode;\n}\n\nexport const Tbody = ({ className, children, ...props }: TbodyProps) => {\n  return (\n    <tbody className={cn('', className)} {...props}>\n      {children}\n    </tbody>\n  );\n};\n\nexport interface RowProps {\n  className?: string;\n  children: ReactNode;\n  selected?: boolean;\n  style?: CSSProperties;\n  onClick?: () => void;\n  tabIndex?: number;\n  /** When true, row receives focus and scrolls into view */\n  isActive?: boolean;\n}\n\nexport const Row = forwardRef<HTMLTableRowElement, RowProps>(\n  ({ className, children, selected = false, style, onClick, isActive = false, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n\n    // Merge forwarded ref with internal ref\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else {\n        ref.current = internalRef.current;\n      }\n    }, [ref]);\n\n    // Focus and scroll into view when active\n    useEffect(() => {\n      if (isActive && internalRef.current) {\n        internalRef.current.focus();\n        internalRef.current.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isActive]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n      if (event.key === 'Enter' && onClick) {\n        onClick();\n      }\n    };\n\n    return (\n      <tr\n        className={cn(\n          'border-b border-border',\n          // Smooth hover transition\n          'transition-colors duration-normal ease-out-custom',\n          'hover:bg-fill-subtle',\n          // Focus state\n          'focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset',\n          selected && 'bg-fill-hover',\n          onClick && 'cursor-pointer',\n          className,\n        )}\n        style={style}\n        onClick={onClick}\n        ref={internalRef}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        data-active={isActive || undefined}\n        {...props}\n      >\n        {children}\n      </tr>\n    );\n  },\n);\n","export const formatDateCell = (date: Date) => {\n  // Format the month as a short text representation\n  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date).toUpperCase();\n  const day = date.getDate();\n\n  const formattedDay = `${month} ${day}`;\n\n  const time = new Intl.DateTimeFormat('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false, // Use 24-hour format\n  }).format(date);\n\n  return { day: formattedDay, time };\n};\n","import React from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { Txt } from '../Txt';\nimport { formatDateCell } from './utils';\nimport { cn } from '@/lib/utils';\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const Cell = ({ className, children, ...props }: CellProps) => {\n  return (\n    <td className={cn('text-foreground first:pl-3 last:pr-3', className)} {...props}>\n      <div className={cn('flex size-full shrink-0 items-center')}>{children}</div>\n    </td>\n  );\n};\n\nexport const TxtCell = ({ className, children }: CellProps) => {\n  return (\n    <Cell className={className}>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"w-full truncate\">\n        {children}\n      </Txt>\n    </Cell>\n  );\n};\n\nexport interface DateTimeCellProps extends Omit<CellProps, 'children'> {\n  dateTime: Date;\n}\n\nexport const DateTimeCell = ({ dateTime, ...props }: DateTimeCellProps) => {\n  const { day, time } = formatDateCell(dateTime);\n\n  return (\n    <Cell {...props}>\n      <div className=\"shrink-0\">\n        <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n          {day}\n        </Txt>{' '}\n        <Txt as=\"span\" variant=\"body\">\n          {time}\n        </Txt>\n      </div>\n    </Cell>\n  );\n};\n\nexport interface EntryCellProps extends Omit<CellProps, 'children'> {\n  name: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n\nexport const EntryCell = ({ name, description, icon, meta, ...props }: EntryCellProps) => {\n  return (\n    <Cell {...props}>\n      <div className=\"flex items-center gap-3.5\">\n        {icon && (\n          <Icon size=\"lg\" className=\"text-foreground\">\n            {icon}\n          </Icon>\n        )}\n\n        <div className=\"flex flex-col gap-0\">\n          <Txt as=\"span\" variant=\"body\" tone=\"ink\">\n            {name}\n          </Txt>\n          {description && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"w-full max-w-75 truncate pt-1\">\n              {description}\n            </Txt>\n          )}\n        </div>\n        {meta}\n      </div>\n    </Cell>\n  );\n};\n","import { useState, useCallback, useEffect } from 'react';\n\nexport interface UseTableKeyboardNavigationOptions {\n  /** Number of items in the list */\n  itemCount: number;\n  /** Initial active index (-1 = none) */\n  initialIndex?: number;\n  /** Wrap around at boundaries */\n  wrap?: boolean;\n  /** Callback when Enter pressed on active row */\n  onSelect?: (index: number) => void;\n  /** When true, registers keyboard handlers globally on the document */\n  global?: boolean;\n}\n\nexport interface UseTableKeyboardNavigationReturn {\n  /** Currently active index (-1 if none) */\n  activeIndex: number;\n  /** Set active index programmatically */\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n  /** Returns props to spread on the Tbody element. Returns null when global is true. */\n  getKeyboardProps: () => { onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number } | null;\n}\n\nexport function useTableKeyboardNavigation({\n  itemCount,\n  initialIndex = -1,\n  wrap = false,\n  onSelect,\n  global = false,\n}: UseTableKeyboardNavigationOptions): UseTableKeyboardNavigationReturn {\n  const [activeIndex, setActiveIndex] = useState(initialIndex);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent | React.KeyboardEvent) => {\n      // No-op for empty list\n      if (itemCount === 0) return;\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return 0;\n            if (prev >= itemCount - 1) {\n              return wrap ? 0 : itemCount - 1;\n            }\n            return prev + 1;\n          });\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          setActiveIndex(prev => {\n            if (prev === -1) return itemCount - 1;\n            if (prev <= 0) {\n              return wrap ? itemCount - 1 : 0;\n            }\n            return prev - 1;\n          });\n          break;\n        }\n        case 'Home': {\n          e.preventDefault();\n          setActiveIndex(0);\n          break;\n        }\n        case 'End': {\n          e.preventDefault();\n          setActiveIndex(itemCount - 1);\n          break;\n        }\n        case 'Enter': {\n          if (activeIndex >= 0 && onSelect) {\n            e.preventDefault();\n            onSelect(activeIndex);\n          }\n          break;\n        }\n      }\n    },\n    [itemCount, wrap, activeIndex, onSelect],\n  );\n\n  // Register global keyboard handlers when global option is enabled\n  useEffect(() => {\n    if (!global) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [global, handleKeyDown]);\n\n  const getKeyboardProps = useCallback(() => {\n    if (global) return null;\n    return { onKeyDown: handleKeyDown as (e: React.KeyboardEvent) => void, tabIndex: 0 };\n  }, [global, handleKeyDown]);\n\n  return {\n    activeIndex,\n    setActiveIndex,\n    getKeyboardProps,\n  };\n}\n"],"names":["jsx","cn","forwardRef","useRef","useEffect","Txt","jsxs","Icon","useState","useCallback"],"mappings":"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"}

package/dist/components/Table.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect, useState, useCallback } from 'react';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 import { Icon } from '../icons/Icon.es.js';
-import { T as Txt } from '../Txt-hyo2FKuO.js';
+import { T as Txt } from '../Txt-DTh3Pa_a.js';
 
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
@@ -12,14 +12,14 @@ const Table = ({ className, children, size = "default", style }) => {
   return /* @__PURE__ */ jsx("table", { className: cn("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: cn("h-table-header border-b border-border1 bg-surface2/80", className), children }) });
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: cn("h-table-header border-b border-border bg-card", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsx(
     "th",
     {
       className: cn(
-        "h-full text-left text-ui-xs font-medium tracking-wide whitespace-nowrap text-neutral2 uppercase first:pl-3 last:pr-3",
+        "h-full text-left text-meta tracking-wide whitespace-nowrap text-placeholder uppercase first:pl-3 last:pr-3",
         className
       ),
       ...props,
@@ -56,13 +56,13 @@ const Row = forwardRef(
       "tr",
       {
         className: cn(
-          "border-b border-border1",
+          "border-b border-border",
           // Smooth hover transition
           "transition-colors duration-normal ease-out-custom",
-          "hover:bg-surface3",
+          "hover:bg-fill-subtle",
           // Focus state
-          "focus:bg-surface3 focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
-          selected && "bg-surface4",
+          "focus:bg-fill-subtle focus:ring-1 focus:ring-accent1/50 focus:outline-hidden focus:ring-inset",
+          selected && "bg-fill-hover",
           onClick && "cursor-pointer",
           className
         ),
@@ -94,25 +94,25 @@ const formatDateCell = (date) => {
 };
 
 const Cell = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsx("td", { className: cn("text-neutral5 first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("flex size-full shrink-0 items-center"), children }) });
+  return /* @__PURE__ */ jsx("td", { className: cn("text-foreground first:pl-3 last:pr-3", className), ...props, children: /* @__PURE__ */ jsx("div", { className: cn("flex size-full shrink-0 items-center"), children }) });
 };
 const TxtCell = ({ className, children }) => {
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-smd", className: "w-full truncate", children }) });
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", className: "w-full truncate", children }) });
 };
 const DateTimeCell = ({ dateTime, ...props }) => {
   const { day, time } = formatDateCell(dateTime);
   return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-neutral3", children: day }),
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", children: day }),
     " ",
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", children: time })
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", children: time })
   ] }) });
 };
 const EntryCell = ({ name, description, icon, meta, ...props }) => {
   return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5", children: [
-    icon && /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-neutral5", children: icon }),
+    icon && /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-foreground", children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-neutral6", children: name }),
-      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "max-w-dropdown-max-height text-neutral3 w-full truncate pt-1", children: description })
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", tone: "ink", children: name }),
+      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "w-full max-w-75 truncate pt-1", children: description })
     ] }),
     meta
   ] }) });