@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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,
@@ -112,7 +120,7 @@ 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";
@@ -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,12 +3,13 @@ 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>;
     };
@@ -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,108 +3,141 @@
  */
 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-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",
+        soft: "border-transparent",
+        ghost: "bg-transparent border-transparent",
         link: "bg-transparent border-transparent",
     },
     // Color styles organized BY VARIANT for reliable dark: prefixes
     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",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
+        // Soft variant - subtle background tints
+        soft: {
             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",
         },
+        // Ghost variant - transparent bg, subtle hover, full padding
+        ghost: {
+            neutral: "text-[var(--color-text-primary)] " +
+                "hover:bg-[var(--color-neutral-100)] " +
+                "focus-visible:outline-[var(--color-text-secondary)] " +
+                "dark:text-[var(--color-text-primary)] dark:hover:bg-[var(--color-neutral-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)] dark:hover:bg-[var(--color-primary-900)]/30",
+            secondary: "text-[var(--color-secondary-600)] " +
+                "hover:bg-[var(--color-secondary-50)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)] dark:hover:bg-[var(--color-secondary-900)]/30",
+            success: "text-[var(--color-success-600)] " +
+                "hover:bg-[var(--color-success-50)] " +
+                "focus-visible:outline-[var(--color-success-600)] " +
+                "dark:text-[var(--color-success-300)] dark:hover:bg-[var(--color-success-900)]/30",
+            warning: "text-[var(--color-warning-600)] " +
+                "hover:bg-[var(--color-warning-50)] " +
+                "focus-visible:outline-[var(--color-warning-600)] " +
+                "dark:text-[var(--color-warning-300)] dark:hover:bg-[var(--color-warning-900)]/30",
+            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:hover:bg-[var(--color-danger-900)]/30",
+        },
         // 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 +152,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: "font-semibold 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: "font-semibold 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: "font-semibold 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: "font-semibold 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: "font-semibold 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: "font-semibold 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 ButtonVariant = "filled" | "outline" | "ghost" | "link";
+export type ButtonColor = SemanticColor;
+export type ButtonVariant = "filled" | "outline" | "soft" | "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

@@ -4,15 +4,15 @@
 const buttonGroupTheme = {
     // Base styles for the button group container with child button styling
     baseStyle: "inline-flex items-stretch " +
-        // Horizontal orientation - direct button children
-        "[&>button:first-child]:rounded-r-none " +
-        "[&>button:last-child]:rounded-l-none " +
+        // Horizontal orientation - direct button children (skip only-child)
+        "[&>button:first-child:not(:only-child)]:rounded-r-none " +
+        "[&>button:last-child:not(:only-child)]:rounded-l-none " +
         "[&>button:not(:first-child):not(:last-child)]:rounded-none " +
         "[&>button:not(:first-child)]:-ml-px " +
         "[&>button]:relative [&>button]:focus:z-10 [&>button]:hover:z-10 " +
-        // Horizontal orientation - nested button children (e.g., in Dropdown)
-        "[&>*:first-child>button]:rounded-r-none " +
-        "[&>*:last-child>button]:rounded-l-none " +
+        // Horizontal orientation - nested button children (skip only-child)
+        "[&>*:first-child:not(:only-child)>button]:rounded-r-none " +
+        "[&>*:last-child:not(:only-child)>button]:rounded-l-none " +
         "[&>*:not(:first-child):not(:last-child)>button]:rounded-none " +
         "[&>*:not(:first-child)>button]:-ml-px " +
         "[&>*>button]:relative [&>*>button]:focus:z-10 [&>*>button]:hover:z-10 " +
@@ -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/ButtonGroup/ButtonGroupText.js

@@ -6,11 +6,9 @@ import { cn } from '../../../utils/cn.js';
 const ButtonGroupText = React__default.forwardRef(({ children, className = "", asChild = false, ...props }, ref) => {
     // If asChild is true, clone the child element with our styles
     if (asChild && React__default.isValidElement(children)) {
-        const childProps = children.props;
         return React__default.cloneElement(children, {
-            ...childProps,
             ref,
-            className: cn(buttonGroupTheme.textStyles, childProps.className, className),
+            className: cn(buttonGroupTheme.textStyles, children.props.className, className),
         });
     }
     // Otherwise, render as a div

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

@@ -112,7 +112,7 @@ const generateCalendarDays = (year, month, selectedValue, mode = 'single', today
     }
     return days;
 };
-const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, className, ...props }, ref) => {
+const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, showOtherMonthDays = true, className, ...props }, ref) => {
     // Determine initial view date from value/defaultValue
     const getInitialViewDate = () => {
         if (value) {
@@ -224,8 +224,8 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
     // Generate year options - filter based on minDate/maxDate
     const currentDate = new Date();
     const defaultYearRange = {
-        start: currentDate.getFullYear() - 50,
-        end: currentDate.getFullYear() + 50,
+        start: currentDate.getFullYear() - 100,
+        end: currentDate.getFullYear() + 10,
     };
     const actualYearRange = yearRange || defaultYearRange;
     const yearOptions = useMemo(() => {
@@ -236,10 +236,10 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             startYear = Math.max(startYear, minDate.getFullYear());
         }
         if (maxDate) {
-            endYear = Math.min(endYear, maxDate.getFullYear());
+            endYear = Math.max(endYear, maxDate.getFullYear());
         }
         const options = [];
-        for (let year = startYear; year <= endYear; year++) {
+        for (let year = endYear; year >= startYear; year--) {
             options.push({
                 id: year,
                 value: year.toString(),
@@ -371,10 +371,36 @@ 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, index) => {
                     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()));
+                    const isInStrip = day.isRangeStart || day.isRangeEnd || day.isInRange;
+                    // Determine range position for strip rounding
+                    let rangePos;
+                    if (isInStrip) {
+                        const isRowStart = index % 7 === 0;
+                        const isRowEnd = index % 7 === 6;
+                        const nextDay = calendarDays[index + 1];
+                        const prevDay = calendarDays[index - 1];
+                        const nextVisible = nextDay && (nextDay.isCurrentMonth || showOtherMonthDays);
+                        const prevVisible = prevDay && (prevDay.isCurrentMonth || showOtherMonthDays);
+                        const nextInStrip = nextVisible && (nextDay.isInRange || nextDay.isRangeEnd);
+                        const prevInStrip = prevVisible && (prevDay.isInRange || prevDay.isRangeStart);
+                        const effectiveStart = day.isRangeStart || isRowStart || !prevInStrip;
+                        const effectiveEnd = day.isRangeEnd || isRowEnd || !nextInStrip;
+                        if (effectiveStart && effectiveEnd)
+                            rangePos = "single";
+                        else if (effectiveStart)
+                            rangePos = "start";
+                        else if (effectiveEnd)
+                            rangePos = "end";
+                        else
+                            rangePos = "middle";
+                    }
+                    if (!day.isCurrentMonth && !showOtherMonthDays) {
+                        return jsx("div", {}, day.date.toISOString());
+                    }
+                    return (jsx("div", { className: cn("flex items-center justify-center", isInStrip && calendarTheme.rangeCellStyle), "data-range-pos": rangePos, children: 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()));
                 }) })] }));
 });
 Calendar.displayName = "Calendar";

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

@@ -3,10 +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 " +
-        "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)]",
+    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] " + "",
     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 " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] " +
@@ -16,17 +15,22 @@ 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 " +
+    daysGridStyle: "grid grid-cols-7 gap-y-0.5 gap-x-0",
+    rangeCellStyle: "bg-[var(--color-primary-50)]/70 " +
+        "data-[range-pos=start]:rounded-l-full " +
+        "data-[range-pos=end]:rounded-r-full " +
+        "data-[range-pos=single]:rounded-full " +
+        "dark:bg-[var(--color-primary-900)]/50",
+    dayButtonStyle: "relative z-10 flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
         "transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         // Base text color
         "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)] " +
         // 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)] " +
@@ -37,17 +41,17 @@ const calendarTheme = {
         // Other month state
         "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-[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)] " +
+        // Range mode states (strip background handled by wrapper cell)
+        "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]:text-[var(--color-text-primary)] " +
+        "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/Calendar.types.d.ts

@@ -70,7 +70,7 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     enableMonthDropdown?: boolean;
     /** Whether to enable year dropdown instead of navigation arrows (default: true) */
     enableYearDropdown?: boolean;
-    /** Year range for dropdown selection (default: ±50 years from current) */
+    /** Year range for dropdown selection (default: 100 years past to 10 years future from current year) */
     yearRange?: {
         start: number;
         end: number;
@@ -83,6 +83,8 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     onNavigatePrev?: (() => void) | null;
     /** Custom next navigation handler (null to hide right arrow) */
     onNavigateNext?: (() => void) | null;
+    /** Whether to show days from adjacent months (default: true) */
+    showOtherMonthDays?: boolean;
     /** Additional class name for the container */
     className?: string;
 }
@@ -119,6 +121,7 @@ export interface CalendarTheme {
     weekdaysStyle: string;
     weekdayStyle: string;
     daysGridStyle: string;
+    rangeCellStyle: string;
     dayButtonStyle: string;
     dayButtonSizes?: Record<CalendarSize, string>;
 }