@stasho/ds 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",
@@ -45,6 +45,7 @@
     "./selectable-card": "./src/components/selectable-card/selectable-card.tsx",
     "./ui/skeleton": "./src/components/ui/skeleton.tsx",
     "./multi-select": "./src/components/multi-select/multi-select.tsx",
+    "./number-input": "./src/components/number-input/number-input.tsx",
     "./pagination": "./src/components/pagination/pagination.tsx",
     "./copyable-text": "./src/components/copyable-text/copyable-text.tsx",
     "./dialog": "./src/components/dialog/dialog.tsx",

package/src/components/alert/alert.tsx

@@ -28,6 +28,18 @@ const VARIANT_BG_CLASS: Record<AlertVariant, string> = {
   success: "alert-bg-success",
 };
 
+// Mirrors the root's `duration-200` exit transition; the fallback timer below
+// resolves a dismissal whose `transitionend` never arrives.
+const EXIT_DURATION_MS = 200;
+const EXIT_FALLBACK_MS = EXIT_DURATION_MS + 50;
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true
+  );
+}
+
 const alertVariants = cva(
   [
     "relative overflow-hidden rounded-sm border",
@@ -99,6 +111,8 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
     const [isDismissing, setIsDismissing] = useState(false);
     const [progressActive, setProgressActive] = useState(false);
     const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
+    const fallbackRef = useRef<ReturnType<typeof setTimeout>>(null);
+    const dismissedRef = useRef(false);
     const resolvedVariant: AlertVariant = variant ?? "warning";
 
     const label = VARIANT_LABELS[resolvedVariant];
@@ -110,24 +124,38 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
         setProgressActive(true);
       });
 
-      timerRef.current = setTimeout(() => {
-        setIsDismissing(true);
-      }, dismissAfter);
+      timerRef.current = setTimeout(startDismiss, dismissAfter);
 
       return () => {
         if (timerRef.current) clearTimeout(timerRef.current);
       };
     }, [dismissAfter, onDismiss]);
 
-    function handleDismiss() {
+    useEffect(() => {
+      return () => {
+        if (fallbackRef.current) clearTimeout(fallbackRef.current);
+      };
+    }, []);
+
+    function finishDismiss() {
+      if (dismissedRef.current) return;
+      dismissedRef.current = true;
+      if (fallbackRef.current) clearTimeout(fallbackRef.current);
+      onDismiss?.();
+    }
+
+    function startDismiss() {
       if (timerRef.current) clearTimeout(timerRef.current);
       setIsDismissing(true);
+      if (prefersReducedMotion()) {
+        finishDismiss();
+        return;
+      }
+      fallbackRef.current = setTimeout(finishDismiss, EXIT_FALLBACK_MS);
     }
 
     function handleTransitionEnd() {
-      if (isDismissing && onDismiss) {
-        onDismiss();
-      }
+      if (isDismissing) finishDismiss();
     }
 
     return (
@@ -168,7 +196,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
         {onDismiss ? (
           <button
             type="button"
-            onClick={handleDismiss}
+            onClick={startDismiss}
             className={cn(
               "absolute top-2 right-2 cursor-pointer",
               labelVariants({ variant }),

package/src/components/button/button.tsx

@@ -89,7 +89,7 @@ const buttonVariants = cva(
           // dark (overrides): white chrome — outline is neutral, NOT accent (supersedes the outline half of Decision #82)
           "dark:text-white dark:border-white/40",
           "dark:hover:border-white",
-          "dark:disabled:text-white/30 dark:disabled:border-white/10 dark:disabled:bg-transparent",
+          "dark:disabled:text-white/30 dark:disabled:border-white/10 dark:disabled:bg-neutral-900",
         ].join(" "),
         ghost: [
           // light (base): foreground text, surface hover

package/src/components/combobox/combobox.tsx

@@ -4,20 +4,22 @@ import { Command } from "cmdk";
 import { cva, type VariantProps } from "class-variance-authority";
 import { CaretDown, Check } from "@phosphor-icons/react";
 import { cn } from "@ac/lib/cn";
+import {
+  fieldChassis,
+  fieldDisabled,
+  fieldError,
+  fieldFocus,
+  fieldTriggerHover,
+} from "@ac/lib/field-chassis";
 
 const triggerVariants = cva(
   [
     "inline-flex items-center justify-between",
     "w-full font-sans text-foreground",
-    "bg-background dark:bg-surface",
-    "border border-edge rounded-sm",
-    "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",
+    fieldChassis,
+    fieldTriggerHover,
+    fieldFocus,
+    fieldDisabled,
     "transition-colors",
   ].join(" "),
   {
@@ -87,8 +89,7 @@ const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
           aria-invalid={error || undefined}
           className={cn(
             triggerVariants({ size }),
-            error &&
-              "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
+            error && fieldError,
             !selectedLabel &&
               (disabled ? "text-muted-foreground/50" : "text-muted-foreground"),
             className,

package/src/components/input/input.tsx

@@ -1,20 +1,21 @@
 import { forwardRef, type InputHTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@ac/lib/cn";
+import {
+  fieldChassis,
+  fieldDisabled,
+  fieldError,
+  fieldFocus,
+} from "@ac/lib/field-chassis";
 
 const inputVariants = cva(
   [
     "w-full font-sans text-foreground",
-    "bg-background dark:bg-surface",
-    "border border-edge rounded-sm",
+    fieldChassis,
     "placeholder:text-muted-foreground",
-    "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",
+    fieldFocus,
+    fieldDisabled,
     "disabled:placeholder:text-muted-foreground/50",
-    "disabled:cursor-not-allowed",
     "transition-colors",
   ].join(" "),
   {
@@ -42,8 +43,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         className={cn(
           inputVariants({ size }),
-          error &&
-            "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
+          error && fieldError,
           className,
         )}
         aria-invalid={error || undefined}

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

@@ -4,16 +4,24 @@ import { Command } from "cmdk";
 import { cva, type VariantProps } from "class-variance-authority";
 import { CaretDown, Check, X } from "@phosphor-icons/react";
 import { cn } from "@ac/lib/cn";
+import {
+  fieldChassis,
+  fieldError,
+  fieldFocus,
+  fieldTriggerHover,
+} from "@ac/lib/field-chassis";
 
 const triggerVariants = cva(
   [
     "inline-flex items-center gap-1.5",
     "w-full font-sans text-foreground",
-    "bg-background dark:bg-surface",
-    "border border-edge rounded-sm",
-    "hover:border-edge-hover",
-    "focus-visible:outline-none",
-    "focus-visible:border-accent-700 dark:focus-visible:border-accent",
+    fieldChassis,
+    fieldTriggerHover,
+    fieldFocus,
+    // MultiSelect's trigger is a role="button" div, not a native disabled
+    // control — it uses aria-disabled: instead of the shared fieldDisabled
+    // (disabled:) constant. Kept component-side; see docs/ARCHITECTURE.md
+    // § Shared Chassis Constants (`field-chassis.ts`).
     "aria-disabled:bg-muted dark:aria-disabled:bg-background",
     "aria-disabled:border-edge/50",
     "aria-disabled:text-foreground/30",
@@ -141,8 +149,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
             className={cn(
               triggerVariants({ size }),
               "cursor-pointer",
-              error &&
-                "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
+              error && fieldError,
               !hasSelection &&
                 (disabled
                   ? "text-muted-foreground/50"

package/src/components/number-input/number-input.tsx

@@ -0,0 +1,103 @@
+import { forwardRef, useRef, type InputHTMLAttributes } from "react";
+import { CaretDown, CaretUp } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+import { fieldChassis } from "@ac/lib/field-chassis";
+
+type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+  size?: "sm" | "md";
+  error?: boolean;
+};
+
+const sizeClasses = {
+  sm: "py-1.5 pl-4 text-sm",
+  md: "py-2 pl-5 text-base",
+};
+
+const stepButtonClasses =
+  "flex items-center justify-center cursor-pointer transition-colors text-foreground/60 hover:text-accent disabled:text-foreground/30 disabled:cursor-not-allowed disabled:hover:text-foreground/30";
+
+const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  ({ size = "md", error = false, disabled = false, className, ...rest }, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const setRefs = (node: HTMLInputElement | null) => {
+      inputRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
+    const step = (direction: "up" | "down") => {
+      const input = inputRef.current;
+      if (!input || disabled) return;
+      if (direction === "up") {
+        input.stepUp();
+      } else {
+        input.stepDown();
+      }
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex w-full items-center font-sans text-foreground",
+          fieldChassis,
+          "transition-colors",
+          "focus-within:border-accent-700 dark:focus-within:border-accent",
+          disabled &&
+            "bg-muted dark:bg-background border-edge/50 cursor-not-allowed",
+          error && [
+            "border-error",
+            "focus-within:border-error dark:focus-within:border-error",
+          ],
+          sizeClasses[size],
+          className,
+        )}
+      >
+        <input
+          ref={setRefs}
+          disabled={disabled}
+          className={cn(
+            "w-full bg-transparent focus-visible:outline-none",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+            "placeholder:text-muted-foreground",
+            "disabled:placeholder:text-muted-foreground/50",
+            disabled && "text-foreground/30 cursor-not-allowed",
+          )}
+          aria-invalid={error || undefined}
+          {...rest}
+          type="number"
+        />
+        <div className="flex flex-col pr-1 -my-0.5">
+          <button
+            type="button"
+            tabIndex={-1}
+            disabled={disabled}
+            aria-label="Increase value"
+            className={stepButtonClasses}
+            onClick={() => step("up")}
+          >
+            <CaretUp weight="bold" className="size-3" />
+          </button>
+          <button
+            type="button"
+            tabIndex={-1}
+            disabled={disabled}
+            aria-label="Decrease value"
+            className={stepButtonClasses}
+            onClick={() => step("down")}
+          >
+            <CaretDown weight="bold" className="size-3" />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+NumberInput.displayName = "NumberInput";
+
+export { NumberInput, type NumberInputProps };

package/src/components/select/select.tsx

@@ -3,20 +3,22 @@ import { Select as SelectPrimitive } from "radix-ui";
 import { cva, type VariantProps } from "class-variance-authority";
 import { CaretDown, Check } from "@phosphor-icons/react";
 import { cn } from "@ac/lib/cn";
+import {
+  fieldChassis,
+  fieldDisabled,
+  fieldError,
+  fieldFocus,
+  fieldTriggerHover,
+} from "@ac/lib/field-chassis";
 
 const triggerVariants = cva(
   [
     "inline-flex items-center justify-between",
     "w-full font-sans text-foreground",
-    "bg-background dark:bg-surface",
-    "border border-edge rounded-sm",
-    "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",
+    fieldChassis,
+    fieldTriggerHover,
+    fieldFocus,
+    fieldDisabled,
     "transition-colors",
     "data-[placeholder]:text-muted-foreground",
     "disabled:data-[placeholder]:text-muted-foreground/50",
@@ -76,8 +78,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
           aria-invalid={error || undefined}
           className={cn(
             triggerVariants({ size }),
-            error &&
-              "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
+            error && fieldError,
             className,
           )}
         >

package/src/components/textarea/textarea.tsx

@@ -1,20 +1,21 @@
 import { forwardRef, type TextareaHTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@ac/lib/cn";
+import {
+  fieldChassis,
+  fieldDisabled,
+  fieldError,
+  fieldFocus,
+} from "@ac/lib/field-chassis";
 
 const textareaVariants = cva(
   [
     "w-full font-sans text-foreground",
-    "bg-background dark:bg-surface",
-    "border border-edge rounded-sm",
+    fieldChassis,
     "placeholder:text-muted-foreground",
-    "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",
+    fieldFocus,
+    fieldDisabled,
     "disabled:placeholder:text-muted-foreground/50",
-    "disabled:cursor-not-allowed",
     "resize-y transition-colors",
   ].join(" "),
   {
@@ -46,8 +47,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         rows={rows}
         className={cn(
           textareaVariants({ size }),
-          error &&
-            "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
+          error && fieldError,
           className,
         )}
         aria-invalid={error || undefined}

package/src/lib/field-chassis.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared "flat slot" chassis classes for form controls (Input, Textarea, and
+ * the Select / Combobox / MultiSelect triggers). Extracted from the subsets
+ * that are genuinely identical across those five components — see
+ * docs/SKIN-PRINCIPLES.md for the underlying rules these encode.
+ *
+ * Not every component consumes every constant; some classes stay
+ * component-side because they diverge (e.g. MultiSelect is a `role="button"`
+ * div and uses `aria-disabled:` instead of `disabled:`, so it does not
+ * consume `fieldDisabled`).
+ */
+
+/** Rest-state surface: fill + hairline border + radius floor. */
+export const fieldChassis =
+  "bg-background dark:bg-surface border border-edge rounded-sm";
+
+/** Cyan hairline focus pair. */
+export const fieldFocus =
+  "focus-visible:outline-none focus-visible:border-accent-700 dark:focus-visible:border-accent";
+
+/**
+ * Flat-sink disabled cluster for controls using the native `disabled:`
+ * pseudo-class (Input, Textarea, Select, Combobox).
+ */
+export const fieldDisabled =
+  "disabled:bg-muted dark:disabled:bg-background disabled:border-edge/50 disabled:text-foreground/30 disabled:cursor-not-allowed";
+
+/** Error rail applied on top of the chassis when a control is invalid. */
+export const fieldError =
+  "border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error";
+
+/** Dropdown-trigger hover cue (Select, Combobox, MultiSelect only). */
+export const fieldTriggerHover = "hover:border-edge-hover";