@stasho/ds 0.1.1 → 0.2.0

package/src/components/combobox/combobox.tsx

@@ -8,12 +8,17 @@ import { cn } from "@ac/lib/cn";
 const triggerVariants = cva(
   [
     "inline-flex items-center justify-between",
-    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
-    "border-0 rounded-full",
-    "focus-visible:outline-none focus-visible:ring-3",
-    "focus-visible:ring-primary-500",
-    "disabled:opacity-50 disabled:pointer-events-none",
-    "ring-0 transition-colors",
+    "w-full font-sans text-foreground",
+    "bg-background dark:bg-surface",
+    "border border-edge rounded-none",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none",
+    "focus-visible:border-accent-700 dark:focus-visible:border-accent",
+    "disabled:bg-muted dark:disabled:bg-background",
+    "disabled:border-edge/50",
+    "disabled:text-foreground/30",
+    "disabled:cursor-not-allowed",
+    "transition-colors",
   ].join(" "),
   {
     variants: {
@@ -82,8 +87,10 @@ const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
           aria-invalid={error || undefined}
           className={cn(
             triggerVariants({ size }),
-            error && "border-3 border-error-400 hover:border-error-500",
-            !selectedLabel && "text-muted-foreground",
+            error &&
+              "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
+            !selectedLabel &&
+              (disabled ? "text-muted-foreground/50" : "text-muted-foreground"),
             className,
           )}
           {...rest}
@@ -105,8 +112,8 @@ const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
           <Popover.Content
             className={cn(
               "z-50 w-[var(--radix-popover-trigger-width)]",
-              "overflow-hidden rounded-2xl",
-              "bg-surface border border-edge shadow-brand",
+              "overflow-hidden rounded-none",
+              "bg-popover-bg border border-popover-border shadow",
             )}
             sideOffset={4}
             align="start"
@@ -134,12 +141,12 @@ const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
                       setOpen(false);
                     }}
                     className={cn(
-                      "relative flex items-center rounded-xl px-4 py-2",
+                      "relative flex items-center rounded-none px-4 py-2",
                       "text-sm text-foreground cursor-pointer select-none",
                       "outline-none",
                       "data-[selected=true]:bg-muted",
-                      "data-[disabled=true]:opacity-50",
-                      "data-[disabled=true]:pointer-events-none",
+                      "data-[disabled=true]:text-foreground/30",
+                      "data-[disabled=true]:cursor-not-allowed",
                     )}
                   >
                     <span className="flex-1">{option.label}</span>

package/src/components/copyable-text/copyable-text.tsx

@@ -98,7 +98,7 @@ const CopyableText = forwardRef<HTMLSpanElement, CopyableTextProps>(
         ref={ref}
         className={cn(
           copyableTextVariants({ size }),
-          href && "text-primary-500 dark:text-primary-300",
+          href && "text-accent-500 dark:text-accent",
           className,
         )}
         {...rest}
@@ -125,7 +125,7 @@ const CopyableText = forwardRef<HTMLSpanElement, CopyableTextProps>(
             onClick={handleCopy}
             className={cn(
               "relative inline-flex items-center justify-center",
-              "rounded-md cursor-pointer",
+              "rounded-none cursor-pointer",
               "hover:bg-foreground/10 transition-colors",
               btnCn,
             )}
@@ -170,7 +170,7 @@ const CopyableText = forwardRef<HTMLSpanElement, CopyableTextProps>(
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
             className={cn(
-              "inline-flex items-center justify-center rounded-md",
+              "inline-flex items-center justify-center rounded-none",
               "text-muted-foreground hover:text-foreground",
               "hover:bg-foreground/10 transition-colors",
               btnCn,

package/src/components/dialog/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            "relative w-full max-w-md rounded-md bg-surface p-6 shadow-brand-lg",
+            "relative w-full max-w-md rounded-xl bg-surface p-6",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             "motion-reduce:animate-none",
@@ -56,10 +56,9 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
           {locked ? null : (
             <DialogPrimitive.Close
               className={cn(
-                "absolute top-4 right-4 rounded-sm",
+                "absolute top-4 right-4 rounded-none",
                 "text-muted-foreground transition-colors hover:text-foreground",
-                "focus-visible:outline-none focus-visible:ring-2",
-                "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+                "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
               )}
               aria-label="Close"
             >

package/src/components/form-field/form-field.tsx

@@ -47,14 +47,14 @@ function FormField({
       >
         {label}
         {required && (
-          <span className="text-error-600 ml-0.5" aria-hidden="true">
+          <span className="text-error ml-0.5" aria-hidden="true">
             *
           </span>
         )}
       </label>
       {child}
       {error ? (
-        <p id={messageId} role="alert" className="text-xs text-error-600">
+        <p id={messageId} role="alert" className="text-xs text-error">
           {error}
         </p>
       ) : helperText ? (

package/src/components/input/input.tsx

@@ -4,13 +4,18 @@ import { cn } from "@ac/lib/cn";
 
 const inputVariants = cva(
   [
-    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
-    "border-0 rounded-full",
+    "w-full font-sans text-foreground",
+    "bg-background dark:bg-surface",
+    "border border-edge rounded-none",
     "placeholder:text-muted-foreground",
-    "focus-visible:outline-none focus-visible:ring-3",
-    "focus-visible:ring-primary-500",
-    "disabled:opacity-50 disabled:pointer-events-none",
-    "ring-0 transition-colors",
+    "focus-visible:outline-none",
+    "focus-visible:border-accent-700 dark:focus-visible:border-accent",
+    "disabled:bg-muted dark:disabled:bg-background",
+    "disabled:border-edge/50",
+    "disabled:text-foreground/30",
+    "disabled:placeholder:text-muted-foreground/50",
+    "disabled:cursor-not-allowed",
+    "transition-colors",
   ].join(" "),
   {
     variants: {
@@ -37,7 +42,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         className={cn(
           inputVariants({ size }),
-          error && "border-3 border-error-400 hover:border-error-500",
+          error &&
+            "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
           className,
         )}
         aria-invalid={error || undefined}

package/src/components/multi-select/multi-select.tsx

@@ -8,12 +8,17 @@ import { cn } from "@ac/lib/cn";
 const triggerVariants = cva(
   [
     "inline-flex items-center gap-1.5",
-    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
-    "border-0 rounded-2xl",
-    "focus-visible:outline-none focus-visible:ring-3",
-    "focus-visible:ring-primary-500",
-    "aria-disabled:opacity-50 aria-disabled:pointer-events-none",
-    "ring-0 transition-colors",
+    "w-full font-sans text-foreground",
+    "bg-background dark:bg-surface",
+    "border border-edge rounded-none",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none",
+    "focus-visible:border-accent-700 dark:focus-visible:border-accent",
+    "aria-disabled:bg-muted dark:aria-disabled:bg-background",
+    "aria-disabled:border-edge/50",
+    "aria-disabled:text-foreground/30",
+    "aria-disabled:cursor-not-allowed",
+    "transition-colors",
   ].join(" "),
   {
     variants: {
@@ -30,7 +35,7 @@ const triggerVariants = cva(
 
 const tagVariants = cva(
   [
-    "inline-flex items-center gap-1 rounded-full bg-muted",
+    "inline-flex items-center gap-1 rounded-[2px] bg-muted",
     "text-foreground max-w-32 select-none",
   ].join(" "),
   {
@@ -137,8 +142,11 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
               triggerVariants({ size }),
               "cursor-pointer",
               error &&
-                "border-3 border-error-400 hover:border-error-500",
-              !hasSelection && "text-muted-foreground",
+                "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
+              !hasSelection &&
+                (disabled
+                  ? "text-muted-foreground/50"
+                  : "text-muted-foreground"),
               className,
             )}
             {...rest}
@@ -157,7 +165,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
                       aria-label={`Remove ${opt.label}`}
                       onClick={(e) => removeTag(e, opt.value)}
                       className={cn(
-                        "shrink-0 rounded-full",
+                        "shrink-0 rounded-[2px]",
                         "hover:bg-foreground/10 transition-colors",
                         size === "sm" ? "size-3.5" : "size-4",
                       )}
@@ -187,7 +195,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
                 aria-label="Clear all"
                 onClick={clearAll}
                 className={cn(
-                  "shrink-0 rounded-full",
+                  "shrink-0 rounded-[2px]",
                   "text-muted-foreground",
                   "hover:text-foreground transition-colors",
                   size === "sm" ? "size-4" : "size-5",
@@ -224,8 +232,8 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
           <Popover.Content
             className={cn(
               "z-50 w-[var(--radix-popover-trigger-width)]",
-              "overflow-hidden rounded-2xl",
-              "bg-surface border border-edge shadow-brand",
+              "overflow-hidden rounded-none",
+              "bg-popover-bg border border-popover-border shadow",
             )}
             sideOffset={4}
             align="start"
@@ -260,22 +268,22 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
                       onSelect={() => toggle(option.value)}
                       className={cn(
                         "relative flex items-center gap-2",
-                        "rounded-xl px-3 py-2",
+                        "rounded-none px-3 py-2",
                         "text-sm text-foreground",
                         "cursor-pointer select-none",
                         "outline-none",
                         "data-[selected=true]:bg-muted",
-                        "data-[disabled=true]:opacity-50",
-                        "data-[disabled=true]:pointer-events-none",
+                        "data-[disabled=true]:text-foreground/30",
+                        "data-[disabled=true]:cursor-not-allowed",
                       )}
                     >
                       <span
                         className={cn(
                           "flex size-4 shrink-0 items-center",
                           "justify-center",
-                          "rounded border-2 transition-colors",
+                          "rounded-none border transition-colors",
                           selected
-                            ? "border-primary bg-primary text-primary-foreground"
+                            ? "border-accent bg-accent text-accent-foreground"
                             : "border-edge bg-surface",
                         )}
                         aria-hidden="true"

package/src/components/pagination/pagination.tsx

@@ -80,28 +80,26 @@ type PaginationProps = Omit<HTMLAttributes<HTMLElement>, "onChange"> & {
 
 const NAV_BUTTON = [
   "inline-flex items-center justify-center",
-  "size-8 rounded-full",
-  "text-primary-600 dark:text-primary-400",
-  "hover:bg-primary-100 dark:hover:bg-primary-200/10",
+  "size-8 rounded-none",
+  "text-foreground/60 hover:text-accent-500 dark:hover:text-accent",
   "transition-colors cursor-pointer",
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
 ].join(" ");
 
-const NAV_DISABLED = "opacity-50 pointer-events-none";
+const NAV_DISABLED = "text-foreground/30 cursor-not-allowed";
 
 const PAGE_BUTTON = [
   "inline-flex items-center justify-center",
-  "size-8 rounded-full",
-  "font-heading font-bold text-lg",
-  "text-primary-600 dark:text-primary-400",
-  "hover:bg-primary-100 dark:hover:bg-primary-200/10",
+  "size-[26px] rounded-none",
+  "font-mono text-sm",
+  "text-foreground/60 hover:text-accent-500 dark:hover:text-accent",
   "transition-colors cursor-pointer",
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
 ].join(" ");
 
 const PAGE_ACTIVE = [
-  "bg-primary-400 text-white dark:bg-primary-600 dark:text-white",
-  "hover:bg-primary-400 dark:hover:bg-primary-600",
+  "bg-accent/15 text-accent-500 dark:text-accent",
+  "hover:text-accent-500 dark:hover:text-accent",
 ].join(" ");
 
 const Pagination = forwardRef<HTMLElement, PaginationProps>(
@@ -164,7 +162,7 @@ const Pagination = forwardRef<HTMLElement, PaginationProps>(
           item === "ellipsis" ? (
             <span
               key={i}
-              className="inline-flex items-center justify-center size-8 font-heading font-bold text-lg text-primary-600 dark:text-primary-400 select-none"
+              className="inline-flex items-center justify-center size-[26px] font-mono text-sm text-foreground/40 select-none"
               aria-hidden="true"
             >
               {"\u2026"}

package/src/components/progress-bar/progress-bar.tsx

@@ -13,7 +13,11 @@ import { cn } from "@ac/lib/cn";
 /* ── Variants ──────────────────────────────────── */
 
 const progressBarVariants = cva(
-  "relative rounded-full bg-surface overflow-hidden",
+  [
+    "relative rounded-full overflow-hidden",
+    "bg-muted dark:bg-neutral-900",
+    "shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
+  ].join(" "),
   {
     variants: {
       size: {
@@ -89,7 +93,7 @@ const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
           data-fill=""
           data-indeterminate={indeterminate ? "" : undefined}
           className={cn(
-            "h-full rounded-full bg-primary",
+            "h-full rounded-full bg-accent",
             indeterminate
               ? "animate-progress-indeterminate"
               : "transition-all",

package/src/components/radio-group/radio-group.tsx

@@ -5,21 +5,26 @@ import { cn } from "@ac/lib/cn";
 
 const radioItemVariants = cva(
   [
-    "peer shrink-0 rounded-full bg-surface",
-    "border-3 border-edge",
+    "peer shrink-0 rounded-full",
+    "bg-background dark:bg-surface",
+    "border border-edge",
     "hover:border-edge-hover",
-    "focus-visible:outline-none focus-visible:ring-3",
-    "focus-visible:ring-primary-500",
-    "disabled:opacity-50 disabled:pointer-events-none",
-    "data-[state=checked]:border-primary",
+    "focus-visible:outline-none",
+    "focus-visible:border-accent-700 dark:focus-visible:border-accent",
+    "disabled:bg-muted dark:disabled:bg-background",
+    "disabled:border-edge/50",
+    "disabled:cursor-not-allowed",
+    "disabled:[&_span]:bg-foreground/30",
+    "disabled:data-[state=checked]:border-edge/50",
+    "data-[state=checked]:border-accent",
     "transition-colors",
   ].join(" "),
   {
     variants: {
       size: {
-        xs: "size-4",
-        sm: "size-5",
-        md: "size-6",
+        xs: "size-3.5",
+        sm: "size-4",
+        md: "size-5",
       },
     },
     defaultVariants: {
@@ -70,7 +75,7 @@ const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
             "transition-[clip-path] duration-200 ease-in-out motion-reduce:transition-none",
           )}
         >
-          <span className="block size-[80%] rounded-full bg-primary" />
+          <span className="block size-[80%] rounded-full bg-accent" />
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
     );

package/src/components/select/select.tsx

@@ -7,13 +7,19 @@ import { cn } from "@ac/lib/cn";
 const triggerVariants = cva(
   [
     "inline-flex items-center justify-between",
-    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
-    "border-0 rounded-full",
-    "focus-visible:outline-none focus-visible:ring-3",
-    "focus-visible:ring-primary-500",
-    "disabled:opacity-50 disabled:pointer-events-none",
-    "ring-0 transition-colors",
+    "w-full font-sans text-foreground",
+    "bg-background dark:bg-surface",
+    "border border-edge rounded-none",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none",
+    "focus-visible:border-accent-700 dark:focus-visible:border-accent",
+    "disabled:bg-muted dark:disabled:bg-background",
+    "disabled:border-edge/50",
+    "disabled:text-foreground/30",
+    "disabled:cursor-not-allowed",
+    "transition-colors",
     "data-[placeholder]:text-muted-foreground",
+    "disabled:data-[placeholder]:text-muted-foreground/50",
   ].join(" "),
   {
     variants: {
@@ -70,7 +76,8 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
           aria-invalid={error || undefined}
           className={cn(
             triggerVariants({ size }),
-            error && "border-3 border-error-400 hover:border-error-500",
+            error &&
+              "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
             className,
           )}
         >
@@ -82,8 +89,8 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={cn(
-              "z-50 overflow-hidden rounded-2xl",
-              "bg-surface border border-edge shadow-brand",
+              "z-50 overflow-hidden rounded-none",
+              "bg-popover-bg border border-popover-border shadow",
             )}
             position="popper"
             sideOffset={4}
@@ -95,12 +102,12 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
                   value={option.value}
                   disabled={option.disabled ?? false}
                   className={cn(
-                    "relative flex items-center rounded-xl px-4 py-2",
+                    "relative flex items-center rounded-none px-4 py-2",
                     "text-sm text-foreground cursor-pointer select-none",
                     "outline-none",
                     "data-[highlighted]:bg-muted",
-                    "data-[disabled]:opacity-50",
-                    "data-[disabled]:pointer-events-none",
+                    "data-[disabled]:text-foreground/30",
+                    "data-[disabled]:cursor-not-allowed",
                   )}
                 >
                   <SelectPrimitive.ItemText>

package/src/components/slider/slider.tsx

@@ -6,7 +6,8 @@ import { cn } from "@ac/lib/cn";
 const trackVariants = cva(
   [
     "relative w-full grow overflow-hidden rounded-full",
-    "bg-neutral-200 dark:bg-base-700",
+    "bg-muted dark:bg-neutral-900",
+    "shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
   ].join(" "),
   {
     variants: {
@@ -23,17 +24,22 @@ const trackVariants = cva(
 
 const thumbVariants = cva(
   [
-    "block rounded-full bg-white",
-    "border-2 border-primary-500",
-    "focus-visible:outline-none focus-visible:ring-3",
-    "focus-visible:ring-primary-500",
-    "disabled:pointer-events-none",
+    "block rounded-full bg-background",
+    "border-[1.5px] border-accent",
+    "transition-[background-color,box-shadow] motion-reduce:transition-none",
+    "hover:bg-accent",
+    "hover:shadow-[0_0_6px_var(--accent),0_0_12px_rgba(0,225,250,0.5)]",
+    "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
+    "focus-visible:shadow-[0_0_6px_var(--accent),0_0_12px_rgba(0,225,250,0.5)]",
+    "data-[disabled]:bg-background data-[disabled]:border-foreground/30",
+    "data-[disabled]:hover:bg-background",
+    "data-[disabled]:shadow-none data-[disabled]:cursor-not-allowed",
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "size-4",
-        md: "size-5",
+        sm: "size-3",
+        md: "size-3.5",
       },
     },
     defaultVariants: {
@@ -80,7 +86,7 @@ const Slider = forwardRef<
         {...(disabled ? { disabled: true } : {})}
         className={cn(
           "relative flex w-full touch-none select-none items-center",
-          disabled && "opacity-50 pointer-events-none",
+          disabled && "cursor-not-allowed",
           className,
         )}
         onValueChange={(val) => {
@@ -91,25 +97,25 @@ const Slider = forwardRef<
         onPointerLeave={() => setHovering(false)}
         {...rootProps}
       >
-        <SliderPrimitive.Track
-          className={cn(
-            trackVariants({ size }),
-            error && "ring-2 ring-error-400",
-          )}
-        >
-          <SliderPrimitive.Range className="absolute h-full bg-primary-500 rounded-full" />
+        <SliderPrimitive.Track className={cn(trackVariants({ size }))}>
+          <SliderPrimitive.Range className="absolute h-full bg-accent data-[disabled]:bg-foreground/30 rounded-full" />
         </SliderPrimitive.Track>
         {displayValue.map((val, i) => (
           <SliderPrimitive.Thumb
             key={i}
-            className={cn(thumbVariants({ size }), "relative")}
+            className={cn(
+              thumbVariants({ size }),
+              "relative",
+              error &&
+                "border-error hover:bg-error hover:shadow-[0_0_6px_var(--error),0_0_12px_rgba(255,61,0,0.5)] focus-visible:shadow-[0_0_6px_var(--error),0_0_12px_rgba(255,61,0,0.5)] focus-visible:outline-error",
+            )}
           >
             {showTooltip && hovering && (
               <span
                 className={cn(
                   "absolute bottom-full left-1/2 -translate-x-1/2 mb-2",
-                  "rounded-md bg-neutral-900 dark:bg-base-700 px-2 py-1",
-                  "text-xs text-white whitespace-nowrap pointer-events-none",
+                  "rounded-none bg-popover-bg border border-popover-border px-2 py-1",
+                  "text-xs text-foreground whitespace-nowrap pointer-events-none",
                 )}
               >
                 {val}

package/src/components/stepper/stepper.tsx

@@ -6,6 +6,7 @@ import {
   useContext,
   type HTMLAttributes,
 } from "react";
+import { Check } from "@phosphor-icons/react";
 import { cn } from "@ac/lib/cn";
 
 /* ── Stepper context (orientation) ─────────────── */
@@ -114,23 +115,22 @@ const StepperIndicator = forwardRef<HTMLDivElement, StepperIndicatorProps>(
         ref={ref}
         data-state={state}
         className={cn(
-          "relative flex size-8 items-center justify-center rounded-full",
-          "font-heading text-sm font-bold",
-          "border-2 border-edge text-muted-foreground",
-          "data-[state=active]:border-primary-500 data-[state=active]:bg-primary-500 data-[state=active]:text-white",
-          "data-[state=completed]:border-primary-500 data-[state=completed]:bg-primary-500 data-[state=completed]:text-white",
-          "transition-all duration-300 motion-reduce:transition-colors",
+          "relative flex size-8 items-center justify-center rounded-[2px]",
+          "font-sans text-sm font-semibold",
+          "border border-edge text-foreground/45 bg-transparent",
+          "data-[state=active]:border-accent data-[state=active]:text-accent-500 dark:data-[state=active]:text-accent",
+          "data-[state=active]:shadow-[0_0_6px_rgba(0,225,250,0.5),0_0_14px_rgba(0,225,250,0.3)]",
+          "data-[state=completed]:border-accent data-[state=completed]:bg-accent data-[state=completed]:text-neutral-950",
+          "transition-all duration-200 motion-reduce:transition-colors",
           className,
         )}
         {...rest}
       >
-        {state === "active" && (
-          <>
-            <span className="absolute -inset-1 rounded-full border-2 border-primary-400/35 animate-[ring-wave_2.4s_ease-in-out_infinite] motion-reduce:animate-none" />
-            <span className="absolute -inset-1.5 rounded-full border border-primary-300/25 animate-[ring-wave_2.4s_ease-in-out_-1.2s_infinite] motion-reduce:animate-none" />
-          </>
+        {state === "completed" ? (
+          <Check weight="bold" className="size-4" aria-hidden="true" />
+        ) : (
+          children
         )}
-        {children}
       </div>
     );
   },
@@ -186,19 +186,23 @@ StepperDescription.displayName = "StepperDescription";
 
 /* ── StepperConnector (li, visual line) ────────── */
 
-type StepperConnectorProps = HTMLAttributes<HTMLLIElement>;
+type StepperConnectorProps = HTMLAttributes<HTMLLIElement> & {
+  /** Mark the connector as filled (cyan) — used between two consecutive completed steps. */
+  completed?: boolean;
+};
 
 const StepperConnector = forwardRef<HTMLLIElement, StepperConnectorProps>(
-  ({ className, ...rest }, ref) => {
+  ({ className, completed, ...rest }, ref) => {
     const { orientation } = useStepperContext();
     return (
       <li
         ref={ref}
         aria-hidden="true"
         data-orientation={orientation}
+        data-completed={completed ? "" : undefined}
         className={cn(
-          "relative overflow-hidden rounded-full bg-edge/50 flex-1",
-          orientation === "horizontal" ? "h-1" : "w-1",
+          "relative overflow-hidden flex-1 bg-edge data-[completed]:bg-accent transition-colors",
+          orientation === "horizontal" ? "h-px" : "w-px",
           className,
         )}
         {...rest}