@stasho/ds 0.1.1 → 0.3.0

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}

package/src/components/switch/switch.tsx

@@ -6,21 +6,23 @@ import { cn } from "@ac/lib/cn";
 const switchVariants = cva(
   [
     "peer inline-flex shrink-0 cursor-pointer",
-    "items-center rounded-full",
-    "border-3 border-edge bg-muted",
-    "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]:bg-primary data-[state=checked]:border-primary",
+    "items-center rounded-[2px]",
+    "border border-edge 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)]",
+    "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
+    "disabled:bg-muted dark:disabled:bg-background",
+    "disabled:border-edge/50 disabled:shadow-none",
+    "disabled:cursor-not-allowed",
+    "disabled:data-[state=checked]:border-edge/50",
+    "data-[state=checked]:border-accent/30",
     "transition-colors",
   ].join(" "),
   {
     variants: {
       size: {
-        xs: "h-5 w-9",
-        sm: "h-[26px] w-12",
-        md: "h-8 w-[60px]",
+        xs: "h-4 w-7",
+        sm: "h-5 w-9",
+        md: "h-6 w-11",
       },
     },
     defaultVariants: {
@@ -31,16 +33,21 @@ const switchVariants = cva(
 
 const thumbVariants = cva(
   [
-    "pointer-events-none block rounded-full bg-white",
-    "shadow-sm transition-transform motion-reduce:transition-none",
+    "pointer-events-none block rounded-[2px]",
+    "bg-edge data-[state=checked]:bg-accent",
+    "transition-all motion-reduce:transition-none",
     "data-[state=unchecked]:translate-x-0.5",
+    "group-hover/sw:data-[state=checked]:shadow-[0_0_5px_var(--accent),0_0_10px_rgba(0,225,250,0.6)]",
+    "group-focus-visible/sw:data-[state=checked]:shadow-[0_0_5px_var(--accent),0_0_10px_rgba(0,225,250,0.6)]",
+    "group-disabled/sw:bg-foreground/30 group-disabled/sw:data-[state=checked]:bg-foreground/30",
+    "group-disabled/sw:shadow-none",
   ].join(" "),
   {
     variants: {
       size: {
-        xs: "size-3 data-[state=checked]:translate-x-[18px]",
-        sm: "size-[18px] data-[state=checked]:translate-x-[24px]",
-        md: "size-6 data-[state=checked]:translate-x-[30px]",
+        xs: "size-3 data-[state=checked]:translate-x-[12px]",
+        sm: "size-4 data-[state=checked]:translate-x-[16px]",
+        md: "size-5 data-[state=checked]:translate-x-[20px]",
       },
     },
     defaultVariants: {
@@ -60,7 +67,7 @@ const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
     return (
       <SwitchPrimitive.Root
         ref={ref}
-        className={cn(switchVariants({ size }), className)}
+        className={cn("group/sw", switchVariants({ size }), className)}
         {...rest}
       >
         <SwitchPrimitive.Thumb className={thumbVariants({ size })} />

package/src/components/table/table.tsx

@@ -165,7 +165,7 @@ export function Table<T>({
               <th
                 key={col.header}
                 className={cn(
-                  "px-4 py-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground",
+                  "px-4 py-3 font-mono font-normal uppercase tracking-widest text-[11px] text-muted-foreground",
                   alignClass[col.align ?? "left"],
                   col.sortable && "cursor-pointer select-none",
                 )}
@@ -221,11 +221,11 @@ export function Table<T>({
                 className={cn(
                   "border-b border-edge transition-all",
                   activeKey === keyExtractor(row)
-                    ? "bg-primary-600/10 shadow-[inset_3px_0_0_var(--color-primary-500)]"
+                    ? "bg-accent/15 shadow-[inset_3px_0_0_var(--accent)]"
                     : "even:bg-muted/30",
                   "hover:bg-muted/50",
                   onRowClick &&
-                    "cursor-pointer hover:shadow-[inset_3px_0_0_var(--color-primary-500)]",
+                    "cursor-pointer hover:shadow-[inset_3px_0_0_var(--accent)]",
                 )}
                 aria-current={
                   activeKey === keyExtractor(row) ? "true" : undefined

package/src/components/tabs/tabs.tsx

@@ -201,25 +201,22 @@ const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
           aria-label="More tabs"
           className={cn(
             "inline-flex items-center justify-center shrink-0",
-            "font-heading font-bold",
-            hasActiveHidden && isPill
-              ? "text-white"
-              : hasActiveHidden
-                ? "text-primary-600 dark:text-primary-400"
-                : "text-muted-foreground",
+            "font-sans font-semibold",
+            hasActiveHidden
+              ? "text-accent-500 dark:text-accent"
+              : "text-muted-foreground",
             "transition-colors duration-200",
-            "hover:text-primary-600 dark:hover:text-primary-400",
-            "focus-visible:outline-none focus-visible:ring-2",
-            "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+            "hover:text-accent-500 dark:hover:text-accent",
+            "focus-visible:outline-2 focus-visible:outline-accent-500 dark:focus-visible:outline-accent focus-visible:outline-offset-2",
             "motion-reduce:transition-none",
             isPill
               ? cn(
-                  "relative z-10 rounded-full",
+                  "relative z-10 rounded-[2px]",
                   isSmall ? "px-2 py-0.5 text-xs" : "px-3 py-1.5 text-sm",
                 )
               : isSmall
                 ? "px-3 py-1.5 text-sm"
-                : "px-4 py-3 text-lg",
+                : "px-4 py-3 text-sm",
             !visible && "invisible",
           )}
         >
@@ -230,7 +227,7 @@ const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
         <DropdownMenu.Content
           className={cn(
             "z-50 min-w-[8rem]",
-            "rounded-md bg-surface border border-edge shadow-brand",
+            "rounded-none bg-popover-bg border border-popover-border shadow",
             "p-1",
             "motion-reduce:transition-none",
           )}
@@ -255,13 +252,13 @@ const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
                 });
               }}
               className={cn(
-                "flex w-full items-center rounded-sm px-3 py-2",
+                "flex w-full items-center rounded-none px-3 py-2",
                 "text-sm text-foreground cursor-pointer select-none",
                 "outline-none",
                 "hover:bg-muted focus-visible:bg-muted",
-                "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+                "data-[disabled]:text-foreground/30 data-[disabled]:cursor-not-allowed",
                 tab.triggerEl.dataset["state"] === "active" &&
-                  "text-primary-600 dark:text-primary-400 font-bold",
+                  "text-accent-500 dark:text-accent font-semibold",
               )}
             >
               {tab.label}
@@ -363,13 +360,11 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
           "group relative flex",
           isPill
             ? [
-                "rounded-full bg-muted",
+                "rounded-[2px] bg-muted border border-edge",
                 isSmall ? "p-0.5" : "p-1",
                 !isCollapse && "inline-flex",
               ]
-            : isSmall
-              ? "border-b-2 border-edge/40"
-              : "border-b-4 border-edge/40",
+            : "border-b border-edge/40",
           className,
         )}
         {...rest}
@@ -392,15 +387,14 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
             isPill
               ? [
                   isSmall ? "inset-y-0.5" : "inset-y-1",
-                  "rounded-full bg-primary-600 dark:bg-primary-500",
+                  "rounded-[2px] bg-accent/15",
                   ready ? "opacity-100" : "opacity-0",
                   ready
                     ? "transition-[transform,width,opacity] duration-200 ease-out"
                     : "",
                 ]
               : [
-                  isSmall ? "-bottom-0.5 h-0.5" : "-bottom-1 h-1",
-                  "bg-primary-600 dark:bg-primary-400",
+                  "-bottom-px h-px bg-accent-500 dark:bg-accent",
                   ready
                     ? "transition-[transform,width] duration-200 ease-out"
                     : "",
@@ -427,31 +421,28 @@ const TabsTrigger = forwardRef<
     className={cn(
       [
         "inline-flex items-center gap-2 px-4 py-3",
-        "font-heading font-bold text-lg",
+        "font-sans font-semibold text-sm",
         "text-foreground",
         "transition-[color,transform] duration-200 ease-out",
-        "hover:text-primary-600 dark:hover:text-primary-400",
-        "data-[state=active]:text-primary-600",
-        "dark:data-[state=active]:text-primary-400",
+        "hover:text-accent-500 dark:hover:text-accent",
+        "data-[state=active]:text-accent-500 dark:data-[state=active]:text-accent",
         "data-[state=active]:-translate-y-0.5",
-        "disabled:opacity-20 disabled:pointer-events-none",
-        "focus-visible:outline-none focus-visible:ring-2",
-        "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+        "disabled:text-foreground/30 disabled:cursor-not-allowed",
+        "focus-visible:outline-2 focus-visible:outline-accent-500 dark:focus-visible:outline-accent focus-visible:outline-offset-2",
         "motion-reduce:transition-none",
         // Small size overrides (underline)
         "group-data-[size=sm]:px-3 group-data-[size=sm]:py-1.5",
         "group-data-[size=sm]:text-sm group-data-[size=sm]:gap-1.5",
         // Pill variant overrides (via group data attribute on TabsList)
         "group-data-[variant=pill]:relative group-data-[variant=pill]:z-10",
-        "group-data-[variant=pill]:rounded-full",
+        "group-data-[variant=pill]:rounded-[2px]",
         "group-data-[variant=pill]:px-5 group-data-[variant=pill]:py-1.5",
         "group-data-[variant=pill]:text-sm",
         "group-data-[variant=pill]:text-muted-foreground",
         "group-data-[variant=pill]:translate-y-0",
-        "group-data-[variant=pill]:hover:text-foreground",
-        "group-data-[variant=pill]:data-[state=active]:text-white",
+        "group-data-[variant=pill]:hover:text-accent-500 dark:group-data-[variant=pill]:hover:text-accent",
+        "group-data-[variant=pill]:data-[state=active]:text-accent-500 dark:group-data-[variant=pill]:data-[state=active]:text-accent",
         "group-data-[variant=pill]:data-[state=active]:translate-y-0",
-        "group-data-[variant=pill]:focus-visible:ring-offset-0",
         // Small pill overrides (compound group selector)
         "group-[[data-variant=pill][data-size=sm]]:px-3",
         "group-[[data-variant=pill][data-size=sm]]:py-1",

package/src/components/textarea/textarea.tsx

@@ -4,13 +4,18 @@ import { cn } from "@ac/lib/cn";
 
 const textareaVariants = cva(
   [
-    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
-    "border-0 rounded-2xl",
+    "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 resize-y 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",
+    "resize-y transition-colors",
   ].join(" "),
   {
     variants: {
@@ -41,7 +46,8 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         rows={rows}
         className={cn(
           textareaVariants({ 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/tooltip/tooltip.tsx

@@ -16,8 +16,8 @@ const TooltipContent = forwardRef<
       sideOffset={sideOffset}
       className={cn(
         [
-          "z-50 rounded-lg bg-neutral-900 dark:bg-base-800 px-3 py-1.5",
-          "text-sm text-white shadow-brand-sm",
+          "z-50 rounded-none bg-popover-bg border border-popover-border px-3 py-1.5",
+          "text-sm text-foreground shadow-sm",
           "animate-in fade-in-0 zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
           "data-[state=closed]:zoom-out-95",

package/src/components/ui/skeleton.tsx

@@ -9,7 +9,7 @@ const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
       <div
         ref={ref}
         aria-hidden="true"
-        className={cn("animate-pulse motion-reduce:animate-none rounded-md bg-muted", className)}
+        className={cn("animate-pulse motion-reduce:animate-none rounded-none bg-muted", className)}
         {...rest}
       />
     );