@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/core/Breadcrumbs/Breadcrumbs.theme.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { ChevronRightIcon } from '@heroicons/react/20/solid';
+import { CaretRight } from '@phosphor-icons/react';
 
 /**
  * Default theme configuration for Breadcrumbs component
@@ -10,7 +10,7 @@ const breadcrumbsTheme = {
     link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
     current: "text-[var(--color-text-primary)] font-medium",
     separator: "text-[var(--color-text-muted)] select-none",
-    ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
+    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-surface-hover)]",
 };
 /**
  * Variant styles for different breadcrumb appearances
@@ -21,12 +21,12 @@ const breadcrumbsVariants = {
         link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 font-normal",
         current: "text-[var(--color-text-secondary)] font-normal",
         separator: "text-[var(--color-border)]",
-        ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
+        ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
     },
 };
 /**
  * Default chevron separator element
  */
-const defaultSeparator = React__default.createElement(ChevronRightIcon, { className: "size-4" });
+const defaultSeparator = React__default.createElement(CaretRight, { className: "size-4" });
 
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator };

package/dist/components/core/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -4,7 +4,7 @@ import React from "react";
  */
 export interface BreadcrumbItem {
     /** The display text for the breadcrumb item */
-    label: string;
+    label: React.ReactNode;
     /** Optional href for navigation. If not provided, item is treated as current page */
     href?: string;
     /** Optional icon to display at the start (before the label) */

package/dist/components/core/Button/Button.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ButtonProps } from "./Button.types";
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/components/core/Button/Button.js

@@ -1,25 +1,17 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useCallback } from 'react';
+import React__default, { useCallback, useRef } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from './Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { Spinner } from '../Spinner/Spinner.js';
 import { useRipple, getRippleAnimation, getRippleColorClass } from './Button.ripple.js';
+import { createPressVariants } from '../shared/interaction.animations.js';
 
-// Button animation variants (module-level constant)
-const BUTTON_TAP_ANIMATION = {
-    tap: {
-        scale: 0.95,
-        transition: {
-            duration: 0.1,
-            type: "spring",
-            stiffness: 400,
-            damping: 10,
-        },
-    },
-};
-const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, ...props }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+// Shared press physics (module-level constant)
+const BUTTON_PRESS_VARIANTS = createPressVariants(0.97);
+const Button = React__default.forwardRef(({ children, iconStart, iconEnd, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
     // Initialize ripple hook
@@ -33,18 +25,17 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     const resolvedVariant = variant || "filled";
     // Derived state flags (direct computation - faster than useMemo)
     const isLoading = state === "loading";
-    const isDisabled = state === "disabled" || state === "loading";
-    const isError = state === "error";
+    const isDisabled = state === "disabled" || state === "loading" || !!disabledProp;
     // Dev-time a11y warning for iconOnly buttons without aria-label
     if (process.env.NODE_ENV !== "production") {
-        if (iconOnly && !props["aria-label"]) {
+        if (iconOnly && !ariaLabelProp) {
             // eslint-disable-next-line no-console
             console.warn("Button(iconOnly) requires 'aria-label' for accessibility.");
         }
     }
     // Safe onClick handler - respect both state="disabled" and disabled={true}
     const handleClick = useCallback((event) => {
-        if (isDisabled || props.disabled)
+        if (isDisabled)
             return;
         // Create ripple effect if enabled
         if (enableRipple && !shouldReduceMotion) {
@@ -59,59 +50,64 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 console.error("Error in button click handler:", error);
             }
         }
-    }, [
-        onClick,
-        isDisabled,
-        props.disabled,
-        enableRipple,
-        shouldReduceMotion,
-        createRipple,
-    ]);
+    }, [onClick, isDisabled, enableRipple, shouldReduceMotion, createRipple]);
     // Compute theme classes (direct computation - faster than useMemo)
-    const sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : resolvedVariant === "link" ? "link" : "default"]) || "";
+    const sizeClasses = ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[iconOnly ? "iconOnly" : "default"]) || "";
     const colorClasses = ((_c = buttonTheme.variantColors[resolvedVariant]) === null || _c === void 0 ? void 0 : _c[resolvedColor]) || "";
     const variantClasses = ((_d = buttonTheme.variantStyles) === null || _d === void 0 ? void 0 : _d[resolvedVariant]) || "";
-    const stateClasses = state === "disabled" || props.disabled
-        ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || ""
-        : isError
-            ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.error) || ""
-            : isLoading
-                ? ((_g = buttonTheme.states) === null || _g === void 0 ? void 0 : _g.loading) || ""
-                : "";
+    // Loading is checked before disabled so a loading button keeps its color
+    // (the disabled treatment would desaturate/dim the spinner — the PER bug).
+    const stateClasses = isLoading
+        ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.loading) || ""
+        : isDisabled
+            ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || ""
+            : "";
     const blockStyle = block ? buttonTheme.blockStyle : "";
     // Generate default aria-label for icon-only buttons if not provided (fallback only)
-    const ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
+    const ariaLabel = iconOnly && !ariaLabelProp ? "Button" : ariaLabelProp;
     // Determine animation props (user props will override due to spread order)
     const animationProps = shouldDisableAnimations
         ? {}
         : {
-            whileTap: !isDisabled ? "tap" : undefined,
-            variants: BUTTON_TAP_ANIMATION,
+            animate: "rest",
+            whileTap: !isDisabled ? "press" : undefined,
+            variants: BUTTON_PRESS_VARIANTS,
         };
-    // Spinner color - ensure contrast on filled buttons
-    const spinnerClassName = resolvedVariant === "filled" && color !== "neutral"
-        ? "border-t-white border-l-white"
-        : "";
-    // Merge refs - use ripple's buttonRef if ripple is enabled, otherwise use forwarded ref
-    const mergedRef = React__default.useCallback((node) => {
+    // Spinner inherits the button's text color (the `-contrast` token on filled
+    // variants, the semantic color on outline/soft/ghost) so it always contrasts
+    // across colors, dark mode, and brand overrides — no hardcoded white.
+    const spinnerClassName = "border-current border-t-transparent";
+    // Let an explicit consumer-provided `data-state` win over Button's own
+    // default. `data-state` isn't a typed prop, so a value the consumer
+    // passes (e.g. a toolbar button tracking active/inactive) flows through
+    // `restProps` untyped — read it out here and render `data-state` a
+    // single time below, instead of spreading `restProps` and then
+    // unconditionally overwriting it with `state`.
+    const consumerDataState = restProps["data-state"];
+    // Track the latest forwarded ref to avoid mergedRef recreation on inline callback refs
+    const forwardedRef = useRef(ref);
+    forwardedRef.current = ref;
+    // Merge refs - stable callback that won't cause DOM detach/attach cycles
+    const mergedRef = useCallback((node) => {
         // Set ripple's buttonRef
         if (buttonRef) {
             buttonRef.current = node;
         }
         // Set forwarded ref
-        if (typeof ref === "function") {
-            ref(node);
+        const fRef = forwardedRef.current;
+        if (typeof fRef === "function") {
+            fRef(node);
         }
-        else if (ref) {
-            ref.current =
+        else if (fRef) {
+            fRef.current =
                 node;
         }
-    }, [ref, buttonRef]);
-    return (jsxs(motion.button, { ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, "aria-describedby": undefined, onClick: handleClick, ...animationProps, ...props, children: [showReflection &&
-                resolvedVariant !== "link" &&
-                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 bg-gradient-to-b  border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
+    }, [buttonRef]);
+    return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": consumerDataState !== null && consumerDataState !== void 0 ? consumerDataState : state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
+                resolvedVariant !== "ghost" &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "pointer-events-none absolute inset-px border-t-[0.5px] border-white/50 rounded-[inherit] blur-[0.75px]" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsxs("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: [iconStart && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_g = buttonTheme.iconSizes) === null || _g === void 0 ? void 0 : _g[size]), "aria-hidden": "true", children: iconStart })), children, iconEnd && (jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", (_h = buttonTheme.iconSizes) === null || _h === void 0 ? void 0 : _h[size]), "aria-hidden": "true", children: iconEnd }))] }), enableRipple &&
                 ripples.map((ripple) => {
-                    const animation = getRippleAnimation(effect, ripple.layer || 1, rippleScale);
+                    const animation = getRippleAnimation(effect, ripple, rippleScale);
                     return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||
                             getRippleColorClass(resolvedVariant, resolvedColor)), style: {
                             top: ripple.y - 10,

package/dist/components/core/Button/Button.ripple.d.ts

@@ -12,6 +12,10 @@ export interface Ripple {
     x: number;
     y: number;
     layer?: number;
+    /** Pre-computed random scale factor for particle effect (0-1 range) */
+    randomScale?: number;
+    /** Pre-computed random duration offset for particle effect (0-1 range) */
+    randomDuration?: number;
 }
 export interface RippleConfig {
     /** Scale multiplier for ripple expansion (default: 10) */
@@ -53,7 +57,7 @@ export declare function getRippleColorClass(variant?: string, color?: string): s
 /**
  * Get animation properties for specific ripple effect and layer
  */
-export declare function getRippleAnimation(effect: RippleEffectType, layer: number, baseScale: number): {
+export declare function getRippleAnimation(effect: RippleEffectType, ripple: Ripple, baseScale: number): {
     initial: {
         scale: number;
         opacity: number;

package/dist/components/core/Button/Button.ripple.js

@@ -1,4 +1,5 @@
-import { useState, useRef, useCallback } from 'react';
+"use client";
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 /**
  * Custom hook for managing ripple effects on button clicks
@@ -21,6 +22,13 @@ function useRipple(config = {}) {
     const { scale = 10, duration = 600, effect = 'default' } = config;
     const [ripples, setRipples] = useState([]);
     const buttonRef = useRef(null);
+    const timeoutsRef = useRef([]);
+    // Cleanup all pending timeouts on unmount
+    useEffect(() => {
+        return () => {
+            timeoutsRef.current.forEach(clearTimeout);
+        };
+    }, []);
     const createRipple = useCallback((event) => {
         const button = buttonRef.current;
         if (!button)
@@ -44,12 +52,14 @@ function useRipple(config = {}) {
                 maxDuration = 800; // Longest layer duration
                 break;
             case 'particle':
-                // Multiple small ripples at random offsets
+                // Multiple small ripples at random offsets (random values stored for stable renders)
                 newRipples = Array.from({ length: 6 }, (_, i) => ({
                     id: baseId + i,
                     x: x + (Math.random() - 0.5) * 20,
                     y: y + (Math.random() - 0.5) * 20,
                     layer: i + 1,
+                    randomScale: Math.random(),
+                    randomDuration: Math.random(),
                 }));
                 maxDuration = 700;
                 break;
@@ -75,12 +85,11 @@ function useRipple(config = {}) {
                 newRipples = [{ id: baseId, x, y, layer: 1 }];
                 maxDuration = 800;
                 // Spawn echo ripples with delays
-                setTimeout(() => {
+                timeoutsRef.current.push(setTimeout(() => {
                     setRipples((prev) => [...prev, { id: baseId + 10, x, y, layer: 2 }]);
-                }, 100);
-                setTimeout(() => {
+                }, 100), setTimeout(() => {
                     setRipples((prev) => [...prev, { id: baseId + 20, x, y, layer: 3 }]);
-                }, 200);
+                }, 200));
                 break;
             case 'default':
             default:
@@ -91,9 +100,9 @@ function useRipple(config = {}) {
         }
         setRipples((prev) => [...prev, ...newRipples]);
         // Auto-remove all ripples after longest animation completes
-        setTimeout(() => {
+        timeoutsRef.current.push(setTimeout(() => {
             setRipples((prev) => prev.filter((r) => r.id < baseId || r.id > baseId + 30));
-        }, maxDuration);
+        }, maxDuration));
     }, [duration, effect]);
     return {
         ripples,
@@ -112,20 +121,14 @@ function getRippleColorClass(variant, color) {
     if (variant === "filled") {
         return "bg-white/30";
     }
-    // For outline/ghost buttons, use color-matched ripple
+    // For outline/soft buttons, use color-matched ripple
     switch (color) {
         case "primary":
             return "bg-[var(--color-primary)]/20";
-        case "success":
-            return "bg-[var(--color-success)]/20";
-        case "warning":
-            return "bg-[var(--color-warning)]/20";
         case "danger":
             return "bg-[var(--color-danger)]/20";
-        case "neutral":
-            return "bg-[var(--color-neutral-500)]/20";
-        case "muted":
-            return "bg-[var(--color-text-muted)]/20";
+        case "mono":
+            return "bg-[var(--color-mono-500)]/20";
         default:
             return "bg-[var(--color-primary)]/20";
     }
@@ -133,7 +136,9 @@ function getRippleColorClass(variant, color) {
 /**
  * Get animation properties for specific ripple effect and layer
  */
-function getRippleAnimation(effect, layer, baseScale) {
+function getRippleAnimation(effect, ripple, baseScale) {
+    var _a, _b, _c;
+    const layer = (_a = ripple.layer) !== null && _a !== void 0 ? _a : 1;
     switch (effect) {
         case 'aurora':
             // Triple layer with different speeds and opacities
@@ -158,15 +163,17 @@ function getRippleAnimation(effect, layer, baseScale) {
                     transition: { duration: 0.8, ease: "easeOut" },
                 };
             }
-        case 'particle':
-            // Random scales and staggered delays
-            const randomScale = baseScale * (0.7 + Math.random() * 0.6);
-            const randomDelay = layer * 0.025;
+        case 'particle': {
+            // Use pre-computed random values from ripple creation for stable renders
+            const particleScale = baseScale * (0.7 + ((_b = ripple.randomScale) !== null && _b !== void 0 ? _b : 0.5) * 0.6);
+            const particleDelay = layer * 0.025;
+            const particleDuration = 0.5 + ((_c = ripple.randomDuration) !== null && _c !== void 0 ? _c : 0.5) * 0.2;
             return {
                 initial: { scale: 0, opacity: 0.6 },
-                animate: { scale: randomScale, opacity: 0 },
-                transition: { duration: 0.5 + Math.random() * 0.2, ease: "easeOut", delay: randomDelay },
+                animate: { scale: particleScale, opacity: 0 },
+                transition: { duration: particleDuration, ease: "easeOut", delay: particleDelay },
             };
+        }
         case 'glass':
             if (layer === 1) {
                 // Outer expanding ring

package/dist/components/core/Button/Button.theme.d.ts

@@ -3,20 +3,21 @@ import { ButtonColor, ButtonVariant, ButtonSize, ButtonState } from "./Button.ty
  * Theme structure for the Button component using variant-first organization
  * This structure enables reliable dark: variants and className overrides
  */
-interface ButtonTheme {
+export interface ButtonTheme {
     baseStyle: string;
     variantStyles: Record<ButtonVariant, string>;
     variantColors: {
         filled: Record<ButtonColor, string>;
         outline: Record<ButtonColor, string>;
+        soft: Record<ButtonColor, string>;
         ghost: Record<ButtonColor, string>;
-        link: Record<ButtonColor, string>;
     };
     sizes: Record<ButtonSize, {
         default: string;
         iconOnly: string;
-        link: string;
     }>;
+    /** Wrapper sizing for the `iconStart`/`iconEnd` slots, per button size. */
+    iconSizes: Record<ButtonSize, string>;
     states: Partial<Record<ButtonState, string>>;
     blockStyle: string;
 }
@@ -24,4 +25,3 @@ interface ButtonTheme {
  * Default theme for the Button component
  */
 export declare const buttonTheme: ButtonTheme;
-export {};

package/dist/components/core/Button/Button.theme.js

@@ -3,142 +3,113 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-[color,background-color,border-color,box-shadow,filter,opacity] duration-150 ease-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
-        filled: "border",
+        filled: "border border-black/15 hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
-        ghost: "border-transparent",
-        link: "bg-transparent border-transparent",
+        soft: "border-transparent",
+        ghost: "bg-transparent border-transparent",
     },
     // Color styles organized BY VARIANT for reliable dark: prefixes
     variantColors: {
-        // Filled variant - solid backgrounds
+        // Filled variant - solid backgrounds.
+        // Border split: LIGHT edge is the universal `border-black/25` from
+        // variantStyles.filled (later in the stylesheet, it beats any light
+        // border-* set here — don't add one). DARK keeps color-matched
+        // `dark:border-*` per color (dark variants compile after black/25 and
+        // win; a black edge would be invisible on dark fills).
         filled: {
-            neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-800)] hover:ring-2 hover:ring-[var(--color-neutral-900)]/20 " +
-                "focus-visible:outline-[var(--color-neutral-800)] " +
-                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
-                "dark:hover:bg-[var(--color-neutral-300)]",
-            primary: "bg-[var(--color-primary)] text-white border-[var(--color-primary)] " +
-                "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
+            mono: "bg-[var(--color-mono)] text-[var(--color-mono-contrast)] " +
+                "focus-visible:outline-[var(--color-mono-800)] " +
+                "dark:border-[var(--color-mono)]",
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-white dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
-                "dark:hover:bg-[var(--color-primary-500)]",
-            success: "bg-[var(--color-success)] text-white border-[var(--color-success)] " +
-                "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
-                "focus-visible:outline-[var(--color-success-600)] " +
-                "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)] " +
-                "dark:hover:bg-[var(--color-success-600)]",
-            warning: "bg-[var(--color-warning)] text-white border-[var(--color-warning)] " +
-                "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
-                "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)] " +
-                "dark:hover:bg-[var(--color-warning-500)]",
-            danger: "bg-[var(--color-danger)] text-white border-[var(--color-danger)] " +
-                "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "dark:border-[var(--color-primary-600)]",
+            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
-                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)] " +
-                "dark:hover:bg-[var(--color-danger-500)]",
+                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-border)] " +
+            mono: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " +
+                "hover:bg-[var(--color-mono-100)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:hover:bg-[var(--color-background-secondary)]",
-            primary: "text-[var(--color-primary-600)] border-[var(--color-primary-600)] " +
-                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/30 " +
+            primary: "text-[var(--color-text-primary)] border-[var(--color-primary-600)]/30 " +
+                "hover:bg-[var(--color-primary-100)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-[var(--color-primary-300)] dark:border-[var(--color-primary-400)] " +
-                "dark:hover:bg-[var(--color-primary-900)]/30",
-            success: "text-[var(--color-success-600)] border-[var(--color-success-600)] " +
-                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/30 " +
-                "focus-visible:outline-[var(--color-success-600)] " +
-                "dark:text-[var(--color-success-300)] dark:border-[var(--color-success-400)] " +
-                "dark:hover:bg-[var(--color-success-900)]/30",
-            warning: "text-[var(--color-warning-600)] border-[var(--color-warning-600)] " +
-                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/30 " +
-                "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:text-[var(--color-warning-300)] dark:border-[var(--color-warning-400)] " +
-                "dark:hover:bg-[var(--color-warning-900)]/30",
-            danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)] " +
-                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/30 " +
+                "dark:border-[var(--color-primary-400)]/30 " +
+                "dark:hover:bg-[var(--color-primary)]/10",
+            danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)]/30 " +
+                "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
-                "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
+                "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)]/30 " +
                 "dark:hover:bg-[var(--color-danger-900)]/30",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
-            neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
-                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
+        // Soft variant - subtle background tints
+        soft: {
+            mono: "text-[var(--color-text-primary)] bg-[var(--color-mono-100)] " +
+                "hover:bg-[var(--color-mono-200)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-900)] " +
-                "dark:hover:bg-[var(--color-neutral-800)]",
+                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-mono-900)] " +
+                "dark:hover:bg-[var(--color-mono-800)]",
             primary: "text-[var(--color-primary-600)] bg-[var(--color-primary)]/10 " +
-                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/10 " +
+                "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)] dark:bg-[var(--color-primary-900)]/30 " +
-                "dark:hover:bg-[var(--color-primary-900)]/50",
-            success: "text-[var(--color-success-600)] bg-[var(--color-success)]/10 " +
-                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
-                "focus-visible:outline-[var(--color-success-600)] " +
-                "dark:text-[var(--color-success-300)] dark:bg-[var(--color-success-900)]/30 " +
-                "dark:hover:bg-[var(--color-success-900)]/50",
-            warning: "text-[var(--color-warning-600)] bg-[var(--color-warning)]/10 " +
-                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
-                "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:text-[var(--color-warning-300)] dark:bg-[var(--color-warning-900)]/30 " +
-                "dark:hover:bg-[var(--color-warning-900)]/50",
-            danger: "text-[var(--color-danger-600)] bg-[var(--color-danger)]/10 " +
-                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "dark:hover:bg-[var(--color-primary)]/10",
+            danger: "text-[var(--color-danger-500)] bg-[var(--color-danger)]/10 " +
+                "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
                 "dark:text-[var(--color-danger-300)] dark:bg-[var(--color-danger-900)]/30 " +
                 "dark:hover:bg-[var(--color-danger-900)]/50",
         },
-        // Link variant - text-only with per-color styles
-        link: {
-            neutral: "text-[var(--color-text-secondary)] underline-offset-4 hover:underline hover:text-[var(--color-text-primary)] " +
+        // Ghost variant - transparent bg, subtle hover, full padding
+        ghost: {
+            mono: "text-[var(--color-text-primary)] " +
+                "hover:bg-[var(--color-mono-100)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:text-[var(--color-text-primary)]",
-            primary: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +
+                "dark:text-[var(--color-text-primary)] dark:hover:bg-[var(--color-mono-800)]",
+            primary: "text-[var(--color-primary-600)] " +
+                "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-[var(--color-primary-300)]",
-            success: "text-[var(--color-success-600)] underline-offset-4 hover:underline " +
-                "focus-visible:outline-[var(--color-success-600)] " +
-                "dark:text-[var(--color-success-300)]",
-            warning: "text-[var(--color-warning-600)] underline-offset-4 hover:underline " +
-                "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:text-[var(--color-warning-300)]",
-            danger: "text-[var(--color-danger-600)] underline-offset-4 hover:underline " +
+                "dark:text-[var(--color-primary-200)] dark:hover:bg-[var(--color-primary)]/10",
+            danger: "text-[var(--color-danger-600)] " +
+                "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
-                "dark:text-[var(--color-danger-300)]",
+                "dark:text-[var(--color-danger-300)] dark:hover:bg-[var(--color-danger-900)]/30",
         },
     },
     // Size variants
     sizes: {
         sm: {
-            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
-            iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "p-0 text-sm h-fit",
+            // Tighten the corner radius at sm so a short button doesn't read as a pill
+            // (overrides baseStyle's rounded-[var(--button-radius)] via twMerge).
+            default: "font-medium min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-[length:var(--button-text-size-sm)]/[var(--button-line-height-sm)] rounded-[calc(var(--button-radius)*0.75)]",
+            iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)] rounded-[calc(var(--button-radius)*0.75)]",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            default: "font-medium min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-[length:var(--button-text-size-md)]/[var(--button-line-height-md)]",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-sm h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            default: "font-medium min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-[length:var(--button-text-size-lg)]/[var(--button-line-height-lg)]",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-base h-fit",
         },
     },
+    // Icon slot sizing. `[&>svg]:size-*` sizes the icon itself, so a caller passing a bare
+    // <SearchIcon /> with no className still lands at the right size — mirrors Badge's
+    // iconSizes. A caller's own className on the icon still wins.
+    iconSizes: {
+        sm: "size-3.5 [&>svg]:size-3.5",
+        md: "size-4 [&>svg]:size-4",
+        lg: "size-5 [&>svg]:size-5",
+    },
     // State styles
     states: {
-        disabled: "opacity-50 cursor-not-allowed pointer-events-none saturate-0",
-        error: "ring-2 ring-[var(--color-danger-500)]",
-        loading: "cursor-not-allowed",
-        // default state has no additional classes
+        disabled: "opacity-60 cursor-not-allowed pointer-events-none saturate-0",
+        loading: "cursor-wait pointer-events-none",
     },
     // Block style
     blockStyle: "w-full",