npm - @mastra/playground-ui - Versions diffs - 68.0.0 → 69.0.0-alpha.0 - Mend

@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1784) hide show

package/dist/components/Skeleton.cjs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_primitives_shimmer = require("../primitives/shimmer.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/Skeleton/skeleton.tsx
 function Skeleton({ className, style, ...props }) {

package/dist/components/Skeleton.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { useShimmerDelay } from "../primitives/shimmer.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/Skeleton/skeleton.tsx
 function Skeleton({ className, style, ...props }) {

package/dist/components/Spinner.cjs.js CHANGED Viewed

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_spinner = require("../spinner-C8ZxiA5C.cjs");
+const require_spinner = require("../spinner-oS6q4pwx.cjs");
 exports.Spinner = require_spinner.Spinner;

package/dist/components/Spinner.es.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { t as Spinner } from "../spinner-~~CnLgLj9R~~.js";
1	+ export { t as Spinner } from "../spinner-B9ykw74u.js";

package/dist/components/StatusIndicators.cjs.js CHANGED Viewed

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_tooltip = require("../tooltip-BiRLT3Th.cjs");
+const require_popover = require("../popover-D9AfJmla.cjs");
+const require_tooltip = require("../tooltip-BsExuMO8.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
-const require_popover = require("../popover-BJqa6Hz6.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/StatusIndicators/status-dot-styles.ts

package/dist/components/StatusIndicators.es.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { t as cn } from "../utils-DQx8TpNT.js";
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-HzcLyGtV.js";
+import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../popover-BpMi52Tb.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-DJcze2VZ.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { focusRing } from "../primitives/transitions.es.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
-import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../popover-CzHvTPk2.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/StatusIndicators/status-dot-styles.ts

package/dist/components/Steps.cjs.js CHANGED Viewed

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
+const require_spinner = require("../spinner-oS6q4pwx.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
-const require_spinner = require("../spinner-C8ZxiA5C.cjs");
+const require_utils = require("../utils-uDc1ofX1.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/ds/components/Steps/shared.tsx
@@ -134,9 +135,78 @@ function ProcessStepProgressBar({ steps }) {
 		})]
 	});
 }
+// src/ds/components/Steps/steps-context.ts
+var StepsHeadingContext = (0, react.createContext)(3);
+// src/ds/components/Steps/step.tsx
+function Step({ title, description, action, done, className, children }) {
+	const headingLevel = (0, react.useContext)(StepsHeadingContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: require_utils.cn("group/step grid grid-cols-[1.5rem_minmax(0,1fr)] gap-x-4 [counter-increment:ds-step]", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_utils.cn("flex size-6 shrink-0 items-center justify-center rounded-full", require_primitives_transitions.transitions.colors, done ? "bg-success-indicator/18 text-success-indicator" : "bg-fill text-foreground"),
+				children: done ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
+					className: "size-3.5",
+					"aria-label": "Done"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					as: "span",
+					variant: "caption",
+					className: "font-medium before:content-[counter(ds-step)]",
+					"aria-hidden": true
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: "w-px flex-1 bg-border group-last/step:hidden"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-col gap-3 pb-8 group-last/step:pb-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-h-6 flex-wrap items-center justify-between gap-x-6 gap-y-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: headingLevel === 2 ? "h2" : "h3",
+						variant: "label",
+						className: "text-pretty",
+						children: title
+					}), action != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex shrink-0 items-center gap-2",
+						children: action
+					}) : null]
+				}), description != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					as: "p",
+					variant: "body-sm",
+					tone: "muted",
+					className: "max-w-[70ch] text-pretty",
+					children: description
+				}) : null]
+			}), children]
+		})]
+	});
+}
+// src/ds/components/Steps/steps-root.tsx
+/**
+* A numbered vertical rail for setup guides, like the steps in docs: a marker per step, a line to
+* the next one, and the step's content to the right without a card around it. Steps number
+* themselves in render order, so a caller can render them conditionally or compose them from
+* several components without breaking the sequence.
+*/
+function StepsRoot({ headingLevel = 3, className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsHeadingContext.Provider, {
+		value: headingLevel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+			className: require_utils.cn("flex flex-col [counter-reset:ds-step]", className),
+			children
+		})
+	});
+}
+// src/ds/components/Steps/steps.tsx
+var Steps = Object.assign(StepsRoot, { Step });
 exports.ProcessStepList = ProcessStepList;
 exports.ProcessStepListItem = ProcessStepListItem;
 exports.ProcessStepProgressBar = ProcessStepProgressBar;
+exports.Steps = Steps;
 exports.getStatusIcon = getStatusIcon;
 //# sourceMappingURL=Steps.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Steps.cjs.js","names":["Spinner","CheckIcon","XIcon","cn","transitions","Txt","cn","cn","transitions","Spinner"],"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 { Txt } from '@/ds/components/Txt';\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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': 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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': status === 'failed',\n 'border border-dashed border-placeholder': status === 'pending',\n '[&>svg]:size-4': status !== 'running',\n 'bg-success-subtle': status === 'success',\n 'bg-destructive-subtle': 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 const stepTone = isActive \|\| step.status === 'success' ? 'ink' : 'muted';\n\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 <Txt as=\"span\" tone={stepTone} className={cn('flex min-w-6 justify-end', transitions.colors)}>\n {position}.\n </Txt>\n <div className=\"min-w-0\">\n <Txt as=\"h4\" tone={stepTone} className={transitions.colors}>\n {step.title}\n </Txt>\n {step.description && (\n <Txt tone=\"faint\" className={cn('-mt-0.5', { truncate: variant === 'plain' })}>\n {step.description}\n </Txt>\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-success-subtle': 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 'scale-110 bg-success-subtle text-success-subtle-foreground': step.status === 'success',\n 'scale-110 bg-destructive-subtle text-destructive-subtle-foreground': 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"],"mappings":"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"}
1	+ {"version":3,"file":"Steps.cjs.js","names":["Spinner","CheckIcon","XIcon","cn","transitions","Txt","cn","cn","transitions","Spinner","createContext","useContext","cn","transitions","CheckIcon","Txt","cn"],"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","../../src/ds/components/Steps/steps-context.ts","../../src/ds/components/Steps/step.tsx","../../src/ds/components/Steps/steps-root.tsx","../../src/ds/components/Steps/steps.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 { Txt } from '@/ds/components/Txt';\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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': 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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': status === 'failed',\n 'border border-dashed border-placeholder': status === 'pending',\n '[&>svg]:size-4': status !== 'running',\n 'bg-success-subtle': status === 'success',\n 'bg-destructive-subtle': 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 const stepTone = isActive \|\| step.status === 'success' ? 'ink' : 'muted';\n\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 <Txt as=\"span\" tone={stepTone} className={cn('flex min-w-6 justify-end', transitions.colors)}>\n {position}.\n </Txt>\n <div className=\"min-w-0\">\n <Txt as=\"h4\" tone={stepTone} className={transitions.colors}>\n {step.title}\n </Txt>\n {step.description && (\n <Txt tone=\"faint\" className={cn('-mt-0.5', { truncate: variant === 'plain' })}>\n {step.description}\n </Txt>\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-success-subtle': 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 'scale-110 bg-success-subtle text-success-subtle-foreground': step.status === 'success',\n 'scale-110 bg-destructive-subtle text-destructive-subtle-foreground': 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","import { createContext } from 'react';\n\nexport type StepsHeadingLevel = 2 \| 3;\n\nexport const StepsHeadingContext = createContext<StepsHeadingLevel>(3);\n","import { CheckIcon } from 'lucide-react';\nimport { useContext } from 'react';\nimport type { ReactNode } from 'react';\nimport { StepsHeadingContext } from './steps-context';\nimport { Txt } from '@/ds/components/Txt';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type StepProps = {\n title: ReactNode;\n /* One or two lines under the title. /\n description?: ReactNode;\n /* Sits at the end of the title row: a docs link, a toggle. /\n action?: ReactNode;\n /* Swaps the number for a check. /\n done?: boolean;\n className?: string;\n children?: ReactNode;\n};\n\nexport function Step({ title, description, action, done, className, children }: StepProps) {\n const headingLevel = useContext(StepsHeadingContext);\n\n return (\n <li\n className={cn('group/step grid grid-cols-[1.5rem_minmax(0,1fr)] gap-x-4 [counter-increment:ds-step]', className)}\n >\n <div className=\"flex flex-col items-center\">\n <span\n className={cn(\n 'flex size-6 shrink-0 items-center justify-center rounded-full',\n transitions.colors,\n done ? 'bg-success-indicator/18 text-success-indicator' : 'bg-fill text-foreground',\n )}\n >\n {done ? (\n <CheckIcon className=\"size-3.5\" aria-label=\"Done\" />\n ) : (\n <Txt as=\"span\" variant=\"caption\" className=\"font-medium before:content-[counter(ds-step)]\" aria-hidden />\n )}\n </span>\n <span aria-hidden className=\"w-px flex-1 bg-border group-last/step:hidden\" />\n </div>\n\n <div className=\"flex min-w-0 flex-col gap-3 pb-8 group-last/step:pb-0\">\n <div className=\"flex flex-col gap-1\">\n {/ As tall as the marker, so a one-line title centers on it. /}\n <div className=\"flex min-h-6 flex-wrap items-center justify-between gap-x-6 gap-y-2\">\n <Txt as={headingLevel === 2 ? 'h2' : 'h3'} variant=\"label\" className=\"text-pretty\">\n {title}\n </Txt>\n {action != null ? <div className=\"flex shrink-0 items-center gap-2\">{action}</div> : null}\n </div>\n {description != null ? (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\" className=\"max-w-[70ch] text-pretty\">\n {description}\n </Txt>\n ) : null}\n </div>\n {children}\n </div>\n </li>\n );\n}\n","import type { ReactNode } from 'react';\nimport { StepsHeadingContext } from './steps-context';\nimport type { StepsHeadingLevel } from './steps-context';\nimport { cn } from '@/lib/utils';\n\nexport type StepsProps = {\n /\n Heading level for every step title. Pick the one that continues the page's outline: a page\n * whose last heading is the `h1` title wants 2.\n /\n headingLevel?: StepsHeadingLevel;\n className?: string;\n children: ReactNode;\n};\n\n/\n A numbered vertical rail for setup guides, like the steps in docs: a marker per step, a line to\n * the next one, and the step's content to the right without a card around it. Steps number\n * themselves in render order, so a caller can render them conditionally or compose them from\n * several components without breaking the sequence.\n */\nexport function StepsRoot({ headingLevel = 3, className, children }: StepsProps) {\n return (\n <StepsHeadingContext.Provider value={headingLevel}>\n <ol className={cn('flex flex-col [counter-reset:ds-step]', className)}>{children}</ol>\n </StepsHeadingContext.Provider>\n );\n}\n","import { Step } from './step';\nimport { StepsRoot } from './steps-root';\n\nexport { type StepsProps } from './steps-root';\nexport { type StepProps } from './step';\n\n// eslint-disable-next-line react-refresh/only-export-components -- the compound's parts live in their own files\nexport const Steps = Object.assign(StepsRoot, { Step });\n"],"mappings":"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"}

package/dist/components/Steps.es.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
+import { t as Spinner } from "../spinner-B9ykw74u.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { transitions } from "../primitives/transitions.es.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
-import { t as Spinner } from "../spinner-CnLgLj9R.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
+import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, XIcon } from "lucide-react";
 // src/ds/components/Steps/shared.tsx
@@ -133,6 +134,74 @@ function ProcessStepProgressBar({ steps }) {
 		})]
 	});
 }
-export { ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, getStatusIcon };
+// src/ds/components/Steps/steps-context.ts
+var StepsHeadingContext = createContext(3);
+// src/ds/components/Steps/step.tsx
+function Step({ title, description, action, done, className, children }) {
+	const headingLevel = useContext(StepsHeadingContext);
+	return /* @__PURE__ */ jsxs("li", {
+		className: cn("group/step grid grid-cols-[1.5rem_minmax(0,1fr)] gap-x-4 [counter-increment:ds-step]", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("flex size-6 shrink-0 items-center justify-center rounded-full", transitions.colors, done ? "bg-success-indicator/18 text-success-indicator" : "bg-fill text-foreground"),
+				children: done ? /* @__PURE__ */ jsx(CheckIcon, {
+					className: "size-3.5",
+					"aria-label": "Done"
+				}) : /* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "caption",
+					className: "font-medium before:content-[counter(ds-step)]",
+					"aria-hidden": true
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "w-px flex-1 bg-border group-last/step:hidden"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-3 pb-8 group-last/step:pb-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-6 flex-wrap items-center justify-between gap-x-6 gap-y-2",
+					children: [/* @__PURE__ */ jsx(Txt, {
+						as: headingLevel === 2 ? "h2" : "h3",
+						variant: "label",
+						className: "text-pretty",
+						children: title
+					}), action != null ? /* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 items-center gap-2",
+						children: action
+					}) : null]
+				}), description != null ? /* @__PURE__ */ jsx(Txt, {
+					as: "p",
+					variant: "body-sm",
+					tone: "muted",
+					className: "max-w-[70ch] text-pretty",
+					children: description
+				}) : null]
+			}), children]
+		})]
+	});
+}
+// src/ds/components/Steps/steps-root.tsx
+/**
+* A numbered vertical rail for setup guides, like the steps in docs: a marker per step, a line to
+* the next one, and the step's content to the right without a card around it. Steps number
+* themselves in render order, so a caller can render them conditionally or compose them from
+* several components without breaking the sequence.
+*/
+function StepsRoot({ headingLevel = 3, className, children }) {
+	return /* @__PURE__ */ jsx(StepsHeadingContext.Provider, {
+		value: headingLevel,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: cn("flex flex-col [counter-reset:ds-step]", className),
+			children
+		})
+	});
+}
+// src/ds/components/Steps/steps.tsx
+var Steps = Object.assign(StepsRoot, { Step });
+export { ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, Steps, getStatusIcon };
 //# sourceMappingURL=Steps.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Steps.es.js","names":[],"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 { Txt } from '@/ds/components/Txt';\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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': 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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': status === 'failed',\n 'border border-dashed border-placeholder': status === 'pending',\n '[&>svg]:size-4': status !== 'running',\n 'bg-success-subtle': status === 'success',\n 'bg-destructive-subtle': 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 const stepTone = isActive \|\| step.status === 'success' ? 'ink' : 'muted';\n\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 <Txt as=\"span\" tone={stepTone} className={cn('flex min-w-6 justify-end', transitions.colors)}>\n {position}.\n </Txt>\n <div className=\"min-w-0\">\n <Txt as=\"h4\" tone={stepTone} className={transitions.colors}>\n {step.title}\n </Txt>\n {step.description && (\n <Txt tone=\"faint\" className={cn('-mt-0.5', { truncate: variant === 'plain' })}>\n {step.description}\n </Txt>\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-success-subtle': 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 'scale-110 bg-success-subtle text-success-subtle-foreground': step.status === 'success',\n 'scale-110 bg-destructive-subtle text-destructive-subtle-foreground': 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"],"mappings":"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"}
1	+ {"version":3,"file":"Steps.es.js","names":[],"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","../../src/ds/components/Steps/steps-context.ts","../../src/ds/components/Steps/step.tsx","../../src/ds/components/Steps/steps-root.tsx","../../src/ds/components/Steps/steps.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 { Txt } from '@/ds/components/Txt';\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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': 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-success-indicator': status === 'success',\n '[&>svg]:text-destructive-foreground': status === 'failed',\n 'border border-dashed border-placeholder': status === 'pending',\n '[&>svg]:size-4': status !== 'running',\n 'bg-success-subtle': status === 'success',\n 'bg-destructive-subtle': 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 const stepTone = isActive \|\| step.status === 'success' ? 'ink' : 'muted';\n\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 <Txt as=\"span\" tone={stepTone} className={cn('flex min-w-6 justify-end', transitions.colors)}>\n {position}.\n </Txt>\n <div className=\"min-w-0\">\n <Txt as=\"h4\" tone={stepTone} className={transitions.colors}>\n {step.title}\n </Txt>\n {step.description && (\n <Txt tone=\"faint\" className={cn('-mt-0.5', { truncate: variant === 'plain' })}>\n {step.description}\n </Txt>\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-success-subtle': 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 'scale-110 bg-success-subtle text-success-subtle-foreground': step.status === 'success',\n 'scale-110 bg-destructive-subtle text-destructive-subtle-foreground': 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","import { createContext } from 'react';\n\nexport type StepsHeadingLevel = 2 \| 3;\n\nexport const StepsHeadingContext = createContext<StepsHeadingLevel>(3);\n","import { CheckIcon } from 'lucide-react';\nimport { useContext } from 'react';\nimport type { ReactNode } from 'react';\nimport { StepsHeadingContext } from './steps-context';\nimport { Txt } from '@/ds/components/Txt';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type StepProps = {\n title: ReactNode;\n /* One or two lines under the title. /\n description?: ReactNode;\n /* Sits at the end of the title row: a docs link, a toggle. /\n action?: ReactNode;\n /* Swaps the number for a check. /\n done?: boolean;\n className?: string;\n children?: ReactNode;\n};\n\nexport function Step({ title, description, action, done, className, children }: StepProps) {\n const headingLevel = useContext(StepsHeadingContext);\n\n return (\n <li\n className={cn('group/step grid grid-cols-[1.5rem_minmax(0,1fr)] gap-x-4 [counter-increment:ds-step]', className)}\n >\n <div className=\"flex flex-col items-center\">\n <span\n className={cn(\n 'flex size-6 shrink-0 items-center justify-center rounded-full',\n transitions.colors,\n done ? 'bg-success-indicator/18 text-success-indicator' : 'bg-fill text-foreground',\n )}\n >\n {done ? (\n <CheckIcon className=\"size-3.5\" aria-label=\"Done\" />\n ) : (\n <Txt as=\"span\" variant=\"caption\" className=\"font-medium before:content-[counter(ds-step)]\" aria-hidden />\n )}\n </span>\n <span aria-hidden className=\"w-px flex-1 bg-border group-last/step:hidden\" />\n </div>\n\n <div className=\"flex min-w-0 flex-col gap-3 pb-8 group-last/step:pb-0\">\n <div className=\"flex flex-col gap-1\">\n {/ As tall as the marker, so a one-line title centers on it. /}\n <div className=\"flex min-h-6 flex-wrap items-center justify-between gap-x-6 gap-y-2\">\n <Txt as={headingLevel === 2 ? 'h2' : 'h3'} variant=\"label\" className=\"text-pretty\">\n {title}\n </Txt>\n {action != null ? <div className=\"flex shrink-0 items-center gap-2\">{action}</div> : null}\n </div>\n {description != null ? (\n <Txt as=\"p\" variant=\"body-sm\" tone=\"muted\" className=\"max-w-[70ch] text-pretty\">\n {description}\n </Txt>\n ) : null}\n </div>\n {children}\n </div>\n </li>\n );\n}\n","import type { ReactNode } from 'react';\nimport { StepsHeadingContext } from './steps-context';\nimport type { StepsHeadingLevel } from './steps-context';\nimport { cn } from '@/lib/utils';\n\nexport type StepsProps = {\n /\n Heading level for every step title. Pick the one that continues the page's outline: a page\n * whose last heading is the `h1` title wants 2.\n /\n headingLevel?: StepsHeadingLevel;\n className?: string;\n children: ReactNode;\n};\n\n/\n A numbered vertical rail for setup guides, like the steps in docs: a marker per step, a line to\n * the next one, and the step's content to the right without a card around it. Steps number\n * themselves in render order, so a caller can render them conditionally or compose them from\n * several components without breaking the sequence.\n */\nexport function StepsRoot({ headingLevel = 3, className, children }: StepsProps) {\n return (\n <StepsHeadingContext.Provider value={headingLevel}>\n <ol className={cn('flex flex-col [counter-reset:ds-step]', className)}>{children}</ol>\n </StepsHeadingContext.Provider>\n );\n}\n","import { Step } from './step';\nimport { StepsRoot } from './steps-root';\n\nexport { type StepsProps } from './steps-root';\nexport { type StepProps } from './step';\n\n// eslint-disable-next-line react-refresh/only-export-components -- the compound's parts live in their own files\nexport const Steps = Object.assign(StepsRoot, { Step });\n"],"mappings":"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"}

package/dist/components/Switch.cjs.js CHANGED Viewed

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require('../Switch.css');const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_primitives_transitions = require("../primitives/transitions.cjs.js");
 const require_field_control_aria = require("../field-control-aria-Dw0_ObOU.cjs");
+const require_primitives_transitions = require("../primitives/transitions.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/Switch.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { focusRingOffset } from "../primitives/transitions.es.js";
 import { n as keepOwnAccessibleName } from "../field-control-aria-BaRSUUMR.js";
+import { focusRingOffset } from "../primitives/transitions.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";

package/dist/components/Table.cjs.js CHANGED Viewed

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
+const require_icons_Icon = require("../icons/Icon.cjs.js");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_utils_date_format = require("../utils/date-format.cjs.js");
-const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
-const require_icons_Icon = require("../icons/Icon.cjs.js");
-const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
 const require_table_pagination = require("../table-pagination-lBp5luHp.cjs");
+const require_primitives_transitions = require("../primitives/transitions.cjs.js");
+const require_primitives_raised_surface = require("../primitives/raised-surface.cjs.js");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/Table.es.js CHANGED Viewed

@@ -1,10 +1,10 @@
+import { Icon } from "../icons/Icon.es.js";
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { t as cn } from "../utils-DQx8TpNT.js";
 import { formatDate } from "../utils/date-format.es.js";
-import { raisedSurfaceStyle } from "../primitives/raised-surface.es.js";
-import { Icon } from "../icons/Icon.es.js";
-import { controlStateColorTransition, focusRingOffset } from "../primitives/transitions.es.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
 import { t as TablePagination } from "../table-pagination-S7ksCNCo.js";
+import { controlStateColorTransition, focusRingOffset } from "../primitives/transitions.es.js";
+import { raisedSurfaceStyle } from "../primitives/raised-surface.es.js";
 import { createContext, forwardRef, use, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";

package/dist/components/Tabs.cjs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tabs_tab = require("../tabs-tab-DGwfHVDr.cjs");
-const require_tabs_content = require("../tabs-content-CmXe5ML0.cjs");
+const require_tabs_tab = require("../tabs-tab-CANh2eAD.cjs");
+const require_tabs_content = require("../tabs-content-BACwMrMG.cjs");
 exports.Tab = require_tabs_tab.Tab;
 exports.TabContent = require_tabs_content.TabContent;
 exports.TabList = require_tabs_tab.TabList;

package/dist/components/Tabs.es.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { n as Tabs, r as TabList, t as Tab } from "../tabs-tab-CYTZevdV.js";
-import { t as TabContent } from "../tabs-content-D__B9hd-.js";
+import { n as Tabs, r as TabList, t as Tab } from "../tabs-tab-BHs639jL.js";
+import { t as TabContent } from "../tabs-content-DwU_eA-a.js";
 export { Tab, TabContent, TabList, Tabs };

package/dist/components/Text.cjs.js CHANGED Viewed

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Txt = require("../Txt-_00wWxTd.cjs");
 const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_utils_id = require("../utils/id.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/Text/text-and-icon.tsx
 function TextAndIcon({ children, className }) {

package/dist/components/Text.es.js CHANGED Viewed

@@ -1,6 +1,6 @@
+import { t as Txt } from "../Txt-5efBsb2p.js";
 import { t as cn } from "../utils-DQx8TpNT.js";
 import { getShortId } from "../utils/id.es.js";
-import { t as Txt } from "../Txt-BM6TVV_c.js";
 import { jsx } from "react/jsx-runtime";
 // src/ds/components/Text/text-and-icon.tsx
 function TextAndIcon({ children, className }) {

package/dist/components/Textarea.cjs.js CHANGED Viewed

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_dist = require("../dist-ClDKPtVq.cjs");
 const require_primitives_form_element = require("../primitives/form-element.cjs.js");
-const require_primitives_transitions = require("../primitives/transitions.cjs.js");
 const require_primitives_textarea_control = require("../primitives/textarea-control.cjs.js");
+const require_primitives_transitions = require("../primitives/transitions.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/Textarea.es.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { t as cva } from "../dist-BhWtUEhi.js";
 import { deprecatedErrorAria, fieldErrorRim, inputSurfaceAndFocusStyle, resolveFieldVariant, sharedFormElementDisabledStyle, unstyledFormElementStyle } from "../primitives/form-element.es.js";
-import { controlStateColorTransition } from "../primitives/transitions.es.js";
 import { TextareaControl } from "../primitives/textarea-control.es.js";
+import { controlStateColorTransition } from "../primitives/transitions.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 // src/ds/components/Textarea/textarea.tsx

package/dist/components/ThinkingLevel.cjs.js CHANGED Viewed

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_tooltip = require("../tooltip-BiRLT3Th.cjs");
 const require_primitives_transitions = require("../primitives/transitions.cjs.js");
-const require_Txt = require("../Txt-BnoSqxKE.cjs");
-const require_popover = require("../popover-BJqa6Hz6.cjs");
+const require_utils = require("../utils-uDc1ofX1.cjs");
+const require_Txt = require("../Txt-_00wWxTd.cjs");
+const require_popover = require("../popover-D9AfJmla.cjs");
+const require_tooltip = require("../tooltip-BsExuMO8.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/ThinkingLevel/use-thinking-level-stop.ts
@@ -192,7 +192,7 @@ function ThinkingLevelPicker({ options, value, label, unavailableReason, descrip
 		reason: unavailableReason
 	});
 	const levelLabel = options.find((option) => option.value === value)?.label ?? value;
-	const triggerLabel = origin ? `${label}: ${levelLabel} · ${origin}` : `${label}: ${levelLabel}`;
+	const triggerLabel = origin ? `${label}: ${levelLabel} (${origin})` : `${label}: ${levelLabel}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, {
 		variant: "ghost",
 		size: "sm",