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

package/dist/components/core/Badge/Badge.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
+import React__default, { useState, useMemo, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
+import { UserIcon } from '@heroicons/react/16/solid';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
@@ -31,16 +32,11 @@ const getShouldAnimate = () => {
  * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
  * ```
  */
-const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, selectable = false, selected = false, onSelect, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, darkMode = false, ...props }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, darkMode = false, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     // State management
     const [isVisible, setIsVisible] = useState(true);
-    const [isSelected, setIsSelected] = useState(selected);
     const shouldAnimate = useMemo(getShouldAnimate, []);
-    // Sync internal state with controlled prop
-    useEffect(() => {
-        setIsSelected(selected);
-    }, [selected]);
     // Development-only warnings
     if (process.env.NODE_ENV !== "production") {
         if (dismissible && !onDismiss) {
@@ -49,9 +45,6 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         if (avatar && iconStart) {
             console.warn("[Badge]: Both avatar and iconStart provided. Avatar takes precedence.");
         }
-        if (selectable && !onSelect && selected === undefined) {
-            console.warn("[Badge]: selectable is true but no onSelect callback or selected prop provided. Component will work in uncontrolled mode.");
-        }
     }
     // Handle dismiss button click
     const handleDismiss = useCallback((e) => {
@@ -62,17 +55,12 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e);
         }, animationTiming.dismissDelay);
     }, [onDismiss]);
-    // Handle badge click (for selectable badges)
+    // Handle badge click
     const handleClick = useCallback((e) => {
         if (disabled)
             return;
-        if (selectable) {
-            const newSelected = !isSelected;
-            setIsSelected(newSelected);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelected);
-        }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }, [selectable, isSelected, onSelect, onClick, disabled]);
+    }, [onClick, disabled]);
     // Merge default theme with custom theme overrides
     const theme = {
         ...badgeTheme,
@@ -90,9 +78,9 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                 ...(_c = badgeTheme.variantColors) === null || _c === void 0 ? void 0 : _c.outline,
                 ...(_d = customTheme.variantColors) === null || _d === void 0 ? void 0 : _d.outline,
             },
-            ghost: {
-                ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.ghost,
-                ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.ghost,
+            soft: {
+                ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.soft,
+                ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.soft,
             },
         },
         sizes: {
@@ -111,13 +99,9 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.avatarSizes,
             ...customTheme.avatarSizes,
         },
-        dismissButtonSizes: {
-            ...badgeTheme.dismissButtonSizes,
-            ...customTheme.dismissButtonSizes,
-        },
-        dismissIconSizes: {
-            ...badgeTheme.dismissIconSizes,
-            ...customTheme.dismissIconSizes,
+        dismissSizes: {
+            ...badgeTheme.dismissSizes,
+            ...customTheme.dismissSizes,
         },
         dotColors: {
             ...badgeTheme.dotColors,
@@ -137,7 +121,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         : "rounded-[var(--badge-radius)]";
     const dotColorStyle = ((_l = theme.dotColors) === null || _l === void 0 ? void 0 : _l[color]) || "";
     // Build base styles with all states
-    const isInteractive = selectable || dismissible;
+    const isInteractive = dismissible;
     const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_m = theme.pillSizes) === null || _m === void 0 ? void 0 : _m[size]), isInteractive && "cursor-pointer", disabled && ((_o = theme.states) === null || _o === void 0 ? void 0 : _o.disabled), darkMode && "dark", className);
     // Create data attributes for styling hooks
     const dataAttributes = {
@@ -148,59 +132,55 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         "data-pill": pill ? "true" : "false",
         "data-with-dot": withDot ? "true" : "false",
         "data-dismissible": dismissible ? "true" : "false",
-        "data-selected": isSelected ? "true" : "false",
-        "data-selectable": selectable ? "true" : "false",
         "data-disabled": disabled ? "true" : "false",
         "data-interactive": isInteractive ? "true" : "false",
     };
     // Render left content (priority: avatar → iconStart → dot)
     const renderLeftContent = () => {
-        var _a, _b;
+        var _a, _b, _c;
         if (avatar) {
             // Apply negative margin for overlap effect (scales with badge size)
             const avatarMargin = pill
                 ? {
-                    sm: "-ml-1.5", // Small pill: minimal overlap
-                    md: "-ml-1.5", // Medium pill: moderate overlap
-                    lg: "-ml-2", // Large pill: more overlap
+                    sm: "-ml-1.5",
+                    md: "-ml-1.5",
                 }[size]
                 : {
-                    sm: "-ml-1.5", // Small default: minimal overlap
-                    md: "-ml-1", // Medium default: less overlap (has border ring)
-                    lg: "-ml-1.5", // Large default: moderate overlap
+                    sm: "-ml-1.5",
+                    md: "-ml-1",
                 }[size];
-            return (jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn((_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, "border-0", pill ? "rounded-full" : "rounded-md ring-0") }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden", (_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, pill ? "rounded-full" : "rounded-md"), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: (_b = avatar.fallback) !== null && _b !== void 0 ? _b : jsx(UserIcon, { className: "size-2.5" }), initialsCount: avatar.initialsCount, size: "xs", className: cn("!size-full border-0", pill ? "rounded-full" : "rounded-md ring-0") }) }));
         }
         if (iconStart) {
-            return (jsx("span", { className: cn("flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0", (_c = theme.iconSizes) === null || _c === void 0 ? void 0 : _c[size]), "aria-hidden": "true", children: iconStart }));
         }
         if (withDot) {
             if (shouldAnimate) {
-                return (jsx(motion.span, { className: cn("badge-dot rounded-full shrink-0 size-1.5", dotColorStyle), variants: dotVariants, "aria-hidden": "true" }));
+                return (jsx(motion.span, { className: cn("badge-dot rounded-full shrink-0 size-1.5 ring-2 ring-current/20", dotColorStyle), variants: dotVariants, "aria-hidden": "true" }));
             }
             return (jsx("span", { className: cn("badge-dot rounded-full shrink-0 size-1.5", dotColorStyle), "aria-hidden": "true" }));
         }
         return null;
     };
     if (!shouldAnimate) {
-        // Strip motion-only props to satisfy HTMLAttributes typings
-        const { initial: _initial, animate: _animate, exit: _exit, variants: _variants, whileHover: _whileHover, whileTap: _whileTap, layout: _layout, transition: _transition, style: _motionStyle, onUpdate: _onUpdate, ...restHtmlProps } = props;
+        // Spread props directly — Badge only receives HTMLSpanElement attributes
+        const restHtmlProps = props;
         // Non-animated render for Storybook or reduced-motion environments
-        return isVisible ? (jsxs("span", { ref: ref, className: baseStyles, onClick: handleClick, role: selectable ? "button" : undefined, tabIndex: selectable && !disabled ? 0 : undefined, "aria-pressed": selectable ? isSelected : undefined, "aria-disabled": disabled || undefined, ...dataAttributes, ...restHtmlProps, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+        return isVisible ? (jsxs("span", { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, ...dataAttributes, ...restHtmlProps, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
                         ? {
                             maxWidth: typeof maxWidth === "number"
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_p = theme.dismissButtonSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissIconSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true" }) }))] })) : null;
+                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_p = theme.dismissSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-hidden": "true" }) }))] })) : null;
     }
-    return (jsx(AnimatePresence, { mode: "wait", children: isVisible && (jsxs(motion.span, { ref: ref, className: baseStyles, onClick: handleClick, role: selectable ? "button" : undefined, tabIndex: selectable && !disabled ? 0 : undefined, "aria-pressed": selectable ? isSelected : undefined, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", whileTap: selectable && !disabled ? { scale: 0.98 } : undefined, ...dataAttributes, ...props, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+    return (jsx(AnimatePresence, { mode: "wait", children: isVisible && (jsxs(motion.span, { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", ...dataAttributes, ...props, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
                         ? {
                             maxWidth: typeof maxWidth === "number"
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_r = theme.dismissButtonSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_s = theme.dismissIconSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-hidden": "true" }) }))] })) }));
+                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true", strokeWidth: 2 }) }))] })) }));
 }));
 Badge.displayName = "Badge";
 

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

@@ -4,34 +4,39 @@
  */
 const badgeTheme = {
     // Base styles applied to all badges
-    baseStyle: "inline-flex items-center font-semibold select-none whitespace-nowrap transition-all duration-300 h-fit",
+    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit w-fit tracking-tight font-semibold border",
     // Visual style variants (structure only, no colors)
+    // All variants get `border` via baseStyle for consistent box sizing
     variants: {
-        filled: "",
-        outline: "bg-transparent border",
-        ghost: "ring-transparent border-0",
+        filled: "border-transparent",
+        outline: "bg-transparent",
+        soft: "",
     },
     // Color styles organized PER VARIANT
     // This structure enables reliable dark: variants and className overrides
     variantColors: {
-        // Filled variant - solid backgrounds with ring glow
+        // Filled variant - solid backgrounds, no visible border
         filled: {
-            neutral: "bg-[var(--color-neutral-900)] text-white ring-[var(--color-border)] " +
-                "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
-            primary: "bg-[var(--color-primary)] text-white ring-[var(--color-primary-400)] " +
-                "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
-            success: "bg-[var(--color-success-600)] text-white ring-[var(--color-success-300)] " +
-                "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
-            warning: "bg-[var(--color-warning)] text-white ring-[var(--color-warning-300)] " +
-                "dark:bg-[var(--color-warning-600)] dark:ring-[var(--color-warning-400)]",
-            danger: "bg-[var(--color-danger)] text-white ring-[var(--color-danger-400)] " +
-                "dark:bg-[var(--color-danger-600)] dark:ring-[var(--color-danger-400)]",
+            neutral: "bg-[var(--color-neutral-900)] text-white " +
+                "dark:bg-[var(--color-neutral-700)]",
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] " +
+                "dark:bg-[var(--color-primary-600)]",
+            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] " +
+                "dark:bg-[var(--color-secondary-600)]",
+            success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] " +
+                "dark:bg-[var(--color-success-600)]",
+            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] " +
+                "dark:bg-[var(--color-warning-600)]",
+            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] " +
+                "dark:bg-[var(--color-danger-600)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
             neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " + "",
             primary: "text-[var(--color-primary)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-primary-400)]",
+            secondary: "text-[var(--color-secondary)] border-[var(--color-border)] " +
+                "dark:text-[var(--color-secondary-400)]",
             success: "text-[var(--color-success)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-success-400)]",
             warning: "text-[var(--color-warning)] border-[var(--color-border)] " +
@@ -39,63 +44,55 @@ const badgeTheme = {
             danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-danger-400)]",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
-                "dark:bg-[var(--color-neutral-900)] dark:text-[var(--color-text-primary)]",
-            primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
-                "dark:bg-[var(--color-primary-600)]/30 dark:text-[var(--color-primary-400)]",
-            success: "bg-[var(--color-success-100)] text-[var(--color-success-600)] " +
-                "dark:bg-[var(--color-success-600)]/30 dark:text-[var(--color-success-400)]",
-            warning: "bg-[var(--color-warning-100)] text-[var(--color-warning-600)] " +
-                "dark:bg-[var(--color-warning-600)]/30 dark:text-[var(--color-warning-400)]",
-            danger: "bg-[var(--color-danger-100)] text-[var(--color-danger-600)] " +
-                "dark:bg-[var(--color-danger-600)]/30 dark:text-[var(--color-danger-400)]",
+        // Soft variant - subtle background tints (Preline-style: 800 text, 500/20 dark bg)
+        soft: {
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-text-primary)]/10 " +
+                "dark:bg-[var(--color-neutral-900)]",
+            primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-800)] border-[var(--color-primary-800)]/20 " +
+                "dark:bg-[var(--color-primary-500)]/20 dark:text-[var(--color-primary-300)]",
+            secondary: "bg-[var(--color-secondary-100)] text-[var(--color-secondary-800)] border-[var(--color-secondary-800)]/10 " +
+                "dark:bg-[var(--color-secondary-500)]/20 dark:text-[var(--color-secondary-400)]",
+            success: "bg-[var(--color-success-100)] text-[var(--color-success-800)] border-[var(--color-success-800)]/20 " +
+                "dark:bg-[var(--color-success-500)]/20 dark:text-[var(--color-success-400)]",
+            warning: "bg-[var(--color-warning-100)] text-[var(--color-warning-800)] border-[var(--color-warning-800)]/20 " +
+                "dark:bg-[var(--color-warning-500)]/20 dark:text-[var(--color-warning-400)]",
+            danger: "bg-[var(--color-danger-100)] text-[var(--color-danger-800)] border-[var(--color-danger-800)]/20 " +
+                "dark:bg-[var(--color-danger-500)]/20 dark:text-[var(--color-danger-400)]",
         },
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: "text-xs px-1.5 py-0.5 gap-1",
-        md: "text-sm px-2 py-0.5 gap-1",
-        lg: "text-sm px-2.5 py-1 gap-1",
+        sm: "text-sm px-1.5 py-0.25 gap-1",
+        md: "text-base px-2 py-0.25 gap-1",
     },
     // Additional padding for pill shape
     pillSizes: {
         sm: "px-2",
         md: "px-2.5",
-        lg: "px-3",
     },
-    // Icon sizes
+    // Icon sizes — applies to wrapper span; [&>svg] selector ensures SVG scales to fit
     iconSizes: {
-        sm: "size-3",
-        md: "size-3.5",
-        lg: "size-4",
+        sm: "size-3.5 [&>svg]:size-3.5",
+        md: "size-4 [&>svg]:size-4",
     },
     // Avatar sizes (base sizes without negative margin)
     avatarSizes: {
         sm: "size-4",
-        md: "size-4",
-        lg: "size-5",
+        md: "size-5",
     },
-    // Dismiss button container sizes
-    dismissButtonSizes: {
-        sm: "size-3.5",
+    // Dismiss icon sizes (button sizes itself from icon + padding)
+    dismissSizes: {
+        sm: "size-3",
         md: "size-4",
-        lg: "size-4.5",
-    },
-    // Dismiss icon sizes (inside button)
-    dismissIconSizes: {
-        sm: "size-2.5",
-        md: "size-3",
-        lg: "size-3.5",
     },
-    // Dot indicator colors (simple, no dark mode needed - inherits from parent)
+    // Dot inherits text color via currentColor — works across all variants/colors
     dotColors: {
-        neutral: "bg-[var(--color-text-primary)]",
-        primary: "bg-[var(--color-primary-50)] dark:bg-[var(--color-primary-300)]",
-        success: "bg-[var(--color-success-50)] dark:bg-[var(--color-success-300)]",
-        warning: "bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-300)]",
-        danger: "bg-[var(--color-danger-50)] dark:bg-[var(--color-danger-300)]",
+        neutral: "bg-current",
+        primary: "bg-current",
+        secondary: "bg-current",
+        success: "bg-current",
+        warning: "bg-current",
+        danger: "bg-current",
     },
     // State styles
     states: {

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

@@ -1,8 +1,8 @@
-import { ReactNode, MouseEvent } from "react";
-import { HTMLMotionProps } from "motion/react";
-export type BadgeVariant = "filled" | "outline" | "ghost";
-export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
-export type BadgeSize = "sm" | "md" | "lg";
+import React, { ReactNode, MouseEvent } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
+export type BadgeVariant = "filled" | "outline" | "soft";
+export type BadgeColor = SemanticColor;
+export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -37,13 +37,9 @@ export interface BadgeTheme {
      */
     avatarSizes: Record<BadgeSize, string>;
     /**
-     * Dismiss button sizes for each badge size
+     * Dismiss icon sizes (button sizes itself from icon + padding)
      */
-    dismissButtonSizes: Record<BadgeSize, string>;
-    /**
-     * Dismiss icon sizes for each badge size
-     */
-    dismissIconSizes: Record<BadgeSize, string>;
+    dismissSizes: Record<BadgeSize, string>;
     /**
      * Color styles for dot indicators
      */
@@ -67,15 +63,14 @@ export interface BadgeThemeOverrides {
     pillSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
-    dismissButtonSizes?: Partial<Record<BadgeSize, string>>;
-    dismissIconSizes?: Partial<Record<BadgeSize, string>>;
+    dismissSizes?: Partial<Record<BadgeSize, string>>;
     dotColors?: Partial<Record<BadgeColor, string>>;
     states?: Partial<{
         disabled: string;
         hover: string;
     }>;
 }
-export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "inputMode" | "autoCapitalize" | "autoCorrect" | "autoComplete"> {
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "inputMode"> {
     /**
      * The content to be displayed inside the badge
      */
@@ -117,7 +112,7 @@ export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "
      */
     avatar?: {
         src?: string;
-        alt: string;
+        name: string;
         fallback?: ReactNode;
         initialsCount?: number;
     };
@@ -131,20 +126,6 @@ export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "
      * Required when dismissible is true
      */
     onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Whether the badge is selectable/toggleable
-     * @default false
-     */
-    selectable?: boolean;
-    /**
-     * Whether the badge is currently selected (controlled)
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * Callback when badge selection changes (for selectable badges)
-     */
-    onSelect?: (selected: boolean) => void;
     /**
      * Whether the badge is disabled
      * @default false

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

@@ -42,8 +42,10 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
     // Render individual breadcrumb item
     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}`));
+        const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), typeof item.label === 'string'
+                    ? jsx("span", { children: item.label })
+                    : item.label] }));
+        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": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: itemContent })) }, `breadcrumb-${index}`));
     };
     // Render separator
     const renderSeparator = (index) => {
@@ -60,7 +62,9 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
                 window.location.href = selectedItem.href;
             }
         };
-        return (jsxs(Dropdown, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8, children: [jsx(Dropdown.Trigger, { children: jsx("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs`, children: "..." }) }), jsx(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items", children: hiddenItems.map((item, index) => (jsx(Dropdown.Item, { itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart, children: item.label }, `hidden-${index}`))) })] }, "ellipsis"));
+        return (jsxs(Dropdown, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8, children: [jsx(Dropdown.Trigger, { children: jsx("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs`, children: "..." }) }), jsx(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items", children: hiddenItems.map((item, index) => (jsx(Dropdown.Item, { itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart, children: typeof item.label === 'string'
+                            ? jsx("span", { children: item.label })
+                            : item.label }, `hidden-${index}`))) })] }, "ellipsis"));
     };
     // Build the breadcrumb elements
     const breadcrumbElements = [];

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,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, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...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) {
@@ -59,19 +59,12 @@ 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 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 +73,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 +85,31 @@ 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, { type: "button", ...restProps, ...animationProps, ref: mergedRef, 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 !== "ghost" &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 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;