@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -1,8 +1,8 @@
-import { ReactNode, MouseEvent } from "react";
-import { HTMLMotionProps } from "motion/react";
+import React, { ReactNode, MouseEvent } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type BadgeVariant = "filled" | "outline" | "ghost";
-export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
-export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeColor = SemanticColor;
+export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -28,6 +28,10 @@ export interface BadgeTheme {
      * Additional padding for pill-shaped badges
      */
     pillSizes: Record<BadgeSize, string>;
+    /**
+     * Border radius per badge size
+     */
+    radiusSizes: Record<BadgeSize, string>;
     /**
      * Icon sizes for each badge size
      */
@@ -65,6 +69,7 @@ export interface BadgeThemeOverrides {
     variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
+    radiusSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
     dismissButtonSizes?: Partial<Record<BadgeSize, string>>;
@@ -75,7 +80,7 @@ export interface BadgeThemeOverrides {
         hover: string;
     }>;
 }
-export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "inputMode" | "autoCapitalize" | "autoCorrect" | "autoComplete"> {
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onSelect" | "inputMode"> {
     /**
      * The content to be displayed inside the badge
      */

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

@@ -43,7 +43,7 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
     const renderItem = (item, index, isLast) => {
         const isCurrentPage = isLast || !item.href;
         const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), item.label] }));
-        return (jsx("span", { className: "flex items-center text-sm", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
+        return (jsx("span", { className: "flex items-center text-base", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
     };
     // Render separator
     const renderSeparator = (index) => {

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,5 +1,5 @@
 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';
@@ -18,7 +18,7 @@ const BUTTON_TAP_ANIMATION = {
         },
     },
 };
-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) => {
+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, disabled: disabledProp, "aria-label": ariaLabelProp, ...restProps }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
@@ -33,18 +33,18 @@ 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 isDisabled = state === "disabled" || state === "loading" || !!disabledProp;
     const isError = state === "error";
     // 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) {
@@ -62,7 +62,6 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     }, [
         onClick,
         isDisabled,
-        props.disabled,
         enableRipple,
         shouldReduceMotion,
         createRipple,
@@ -71,7 +70,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     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 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
+    const stateClasses = isDisabled
         ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || ""
         : isError
             ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.error) || ""
@@ -80,7 +79,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 : "";
     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
         ? {}
@@ -92,26 +91,30 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     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) => {
+    // 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 &&
+    }, [buttonRef]);
+    return (jsxs(motion.button, { ...restProps /* React drag events conflict with motion drag events */, ...animationProps, 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, onClick: handleClick, 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 &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 bg-gradient-to-b from-white/25 to-transparent 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 &&
                 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,4 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 /**
  * Custom hook for managing ripple effects on button clicks
@@ -21,6 +21,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 +51,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 +84,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 +99,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,
@@ -124,8 +132,6 @@ function getRippleColorClass(variant, color) {
             return "bg-[var(--color-danger)]/20";
         case "neutral":
             return "bg-[var(--color-neutral-500)]/20";
-        case "muted":
-            return "bg-[var(--color-text-muted)]/20";
         default:
             return "bg-[var(--color-primary)]/20";
     }
@@ -133,7 +139,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 +166,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,7 +3,7 @@ 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: {
@@ -24,4 +24,3 @@ interface ButtonTheme {
  * Default theme for the Button component
  */
 export declare const buttonTheme: ButtonTheme;
-export {};

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

@@ -6,7 +6,7 @@ const buttonTheme = {
     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",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
-        filled: "border",
+        filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
         ghost: "border-transparent",
         link: "bg-transparent border-transparent",
@@ -15,56 +15,53 @@ const buttonTheme = {
     variantColors: {
         // Filled variant - solid backgrounds
         filled: {
-            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
-                "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
-                "dark:hover:bg-[var(--color-neutral-600)]",
-            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 " +
+            neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
+                "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)]",
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "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 " +
+                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)]",
+            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] border-[var(--color-secondary)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-contrast)] dark:bg-[var(--color-secondary-600)] dark:border-[var(--color-secondary-600)]",
+            success: "bg-[var(--color-success)] text-[var(--color-success-contrast)] border-[var(--color-success)] " +
                 "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 " +
+                "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)]",
+            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] border-[var(--color-warning)] " +
                 "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:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)]",
+            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border-[var(--color-danger)] " +
                 "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)] " +
+                "hover:bg-[var(--color-neutral-100)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
-                "dark:hover:bg-[var(--color-neutral-800)]",
+                "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 " +
+                "hover:bg-[var(--color-primary-50)] " +
                 "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",
+            secondary: "text-[var(--color-secondary-600)] border-[var(--color-secondary-600)] " +
+                "hover:bg-[var(--color-secondary-50)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)] dark:border-[var(--color-secondary-400)] " +
+                "dark:hover:bg-[var(--color-secondary-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 " +
+                "hover:bg-[var(--color-success-50)] " +
                 "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 " +
+                "hover:bg-[var(--color-warning-50)] " +
                 "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 " +
+                "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:hover:bg-[var(--color-danger-900)]/30",
@@ -72,39 +69,47 @@ const buttonTheme = {
         // 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)] " +
+                "hover:bg-[var(--color-neutral-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)]",
             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",
+            secondary: "text-[var(--color-secondary-600)] bg-[var(--color-secondary)]/10 " +
+                "hover:bg-[var(--color-secondary-50)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)] dark:bg-[var(--color-secondary-900)]/30 " +
+                "dark:hover:bg-[var(--color-secondary-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 " +
+                "hover:bg-[var(--color-success-50)] " +
                 "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 " +
+                "hover:bg-[var(--color-warning-50)] " +
                 "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 " +
+                "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-primary)] underline-offset-4 hover:underline " +
+            neutral: "text-[var(--color-text-secondary)] underline-offset-4 hover:underline hover:text-[var(--color-text-primary)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:text-[var(--color-text-primary)]",
             primary: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)]",
+            secondary: "text-[var(--color-secondary-600)] underline-offset-4 hover:underline " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-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)]",
@@ -119,19 +124,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-base h-fit",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-base h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-base h-fit",
+            link: "p-0 text-lg h-fit",
         },
     },
     // State styles

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 import { RippleEffectType } from "./Button.ripple";
+import { SemanticColor } from "../../../utils/colorUtils";
 /**
  * Button component props
  * @property {ButtonColor} color - The semantic color/intent of the button
@@ -14,7 +14,7 @@ import { RippleEffectType } from "./Button.ripple";
  * @property {string} rippleClassName - Custom class name for ripple styling
  * @property {number} rippleScale - Scale multiplier for ripple expansion (default: 10)
  */
-export interface ButtonProps extends HTMLMotionProps<"button"> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** The semantic color/intent of the button */
     color?: ButtonColor;
     /** The visual style variant of the button */
@@ -50,7 +50,7 @@ export interface ButtonProps extends HTMLMotionProps<"button"> {
      */
     darkMode?: boolean;
 }
-export type ButtonColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type ButtonColor = SemanticColor;
 export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "error" | "loading";

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

@@ -1,2 +1,4 @@
 export { Button } from './Button';
 export * from './Button.types';
+export { useRipple, getRippleColorClass, getRippleAnimation } from './Button.ripple';
+export type { RippleEffectType, RippleConfig, Ripple } from './Button.ripple';

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

@@ -44,7 +44,7 @@ const buttonGroupTheme = {
         vertical: "h-px self-stretch",
     },
     // Text styles for ButtonGroupText component
-    textStyles: "px-3 py-2 text-sm text-[var(--color-text-primary)] flex items-center",
+    textStyles: "px-3 py-2 text-base text-[var(--color-text-primary)] flex items-center",
 };
 
 export { buttonGroupTheme };

package/dist/components/core/Calendar/Calendar.js

@@ -371,7 +371,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             }
         }
     }, [minDate, maxDate, customIsDateDisabled, currentMonth, currentYear, onViewDateChange, mode, value, onChange, selectedValue, rangeSelectionState]);
-    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-sm font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-sm font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
+    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
                     var _a;
                     const dayNumber = day.date.getDate();
                     return (jsxs(motion.button, { type: "button", onClick: () => handleDateSelect(day.date), disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }, day.date.toISOString()));

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

@@ -3,9 +3,9 @@
  * Uses design tokens and data-[state=*] selectors
  */
 const calendarTheme = {
-    baseStyle: "select-none w-full max-w-fit bg-white dark:bg-[var(--color-neutral-900)]",
+    baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
     headerStyle: "flex items-center justify-between mb-4",
-    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
+    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
         "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)]",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",
     navButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] border-0 bg-transparent " +
@@ -16,7 +16,7 @@ const calendarTheme = {
         "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-800)] " +
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     weekdaysStyle: "grid grid-cols-7 mb-2",
-    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)] " +
+    weekdayStyle: "flex items-center justify-center h-8 text-sm font-medium text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
     daysGridStyle: "grid grid-cols-7 gap-0.5",
     dayButtonStyle: "relative flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
@@ -26,7 +26,7 @@ const calendarTheme = {
         // Hover state
         "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
         // Selected state
-        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white " +
+        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-[var(--color-primary-contrast)] " +
         "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
         // Today indicator
         "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
@@ -38,16 +38,16 @@ const calendarTheme = {
         "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
         "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
         // Range mode states
-        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white " +
-        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white " +
+        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-[var(--color-primary-contrast)] " +
+        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-[var(--color-primary-contrast)] " +
         "data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)] " +
         "dark:data-[in-range=true]:bg-[var(--color-primary-900)]/50 dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
         // Focus offset for dark mode
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     dayButtonSizes: {
-        sm: "size-8 text-sm",
-        md: "size-10 text-sm",
-        lg: "size-12 text-base",
+        sm: "size-8 text-base",
+        md: "size-10 text-base",
+        lg: "size-12 text-lg",
     },
 };
 

package/dist/components/core/Calendar/CalendarMini/CalendarMini.js

@@ -242,7 +242,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                                 day: "numeric",
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
-                                            }), children: [jsx("div", { className: "text-sm font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
+                                            }), children: [jsx("div", { className: "text-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
                                     }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";

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

@@ -1,8 +1,8 @@
 import { CardComponent } from './Card.types';
 import { CardHeader } from './CardHeader';
 import { CardTitle } from './CardTitle';
-import { CardDescription } from './CardDescription';
+import { CardSubtitle } from './CardSubtitle';
 import { CardContent } from './CardContent';
 import { CardFooter } from './CardFooter';
-export { CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export { CardHeader, CardTitle, CardSubtitle, CardContent, CardFooter };
 export declare const Card: CardComponent;