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

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

@@ -1,25 +1,13 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
+import React__default, { useState, useCallback } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
 import { badgeTheme } from './Badge.theme.js';
 
-// Helper to determine whether we should animate (Storybook can disable animations globally)
-const getShouldAnimate = () => {
-    if (typeof window === "undefined")
-        return true;
-    if (window.__STORYBOOK_DISABLE_ANIMATIONS__)
-        return false;
-    try {
-        return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    }
-    catch (_a) {
-        return true;
-    }
-};
 /**
  * Badge component for displaying status, labels, or counters.
  *
@@ -31,16 +19,13 @@ 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, _t;
+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]);
+    // useReducedMotion is SSR-safe (returns null on server, actual value after hydration)
+    const prefersReducedMotion = useReducedMotion();
+    const shouldAnimate = !prefersReducedMotion;
     // Development-only warnings
     if (process.env.NODE_ENV !== "production") {
         if (dismissible && !onDismiss) {
@@ -49,9 +34,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 +44,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 +67,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: {
@@ -103,10 +80,6 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.pillSizes,
             ...customTheme.pillSizes,
         },
-        radiusSizes: {
-            ...badgeTheme.radiusSizes,
-            ...customTheme.radiusSizes,
-        },
         iconSizes: {
             ...badgeTheme.iconSizes,
             ...customTheme.iconSizes,
@@ -115,13 +88,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,
@@ -138,11 +107,11 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     const sizeStyle = ((_k = theme.sizes) === null || _k === void 0 ? void 0 : _k[size]) || "";
     const shapeStyle = pill
         ? "rounded-full"
-        : ((_l = theme.radiusSizes) === null || _l === void 0 ? void 0 : _l[size]) || "rounded-[var(--badge-radius)]";
-    const dotColorStyle = ((_m = theme.dotColors) === null || _m === void 0 ? void 0 : _m[color]) || "";
+        : "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 baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_o = theme.pillSizes) === null || _o === void 0 ? void 0 : _o[size]), isInteractive && "cursor-pointer", disabled && ((_p = theme.states) === null || _p === void 0 ? void 0 : _p.disabled), darkMode && "dark", className);
+    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 = {
         "data-variant": variant,
@@ -152,8 +121,6 @@ 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",
     };
@@ -161,48 +128,38 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     const renderLeftContent = () => {
         var _a, _b;
         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
-                }[size]
-                : {
-                    sm: "-ml-1.5", // Small default: minimal overlap
-                    md: "-ml-1", // Medium default: less overlap (has border ring)
-                }[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 [&_div]:!size-full", (_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], pill ? "rounded-full -ml-2" : "rounded-full -ml-0"), children: jsx(Avatar, { src: avatar.src, name: avatar.name, gradient: avatar.gradient, gradientVariant: avatar.gradientVariant, gradientColors: avatar.gradientColors, fallback: avatar.fallback, 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("inline-flex items-center justify-center 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 -ml-1", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[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;
-        // 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
+        // Spread props directly — Badge only receives HTMLSpanElement attributes
+        const restHtmlProps = props;
+        // Non-animated render for reduced-motion environments
+        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", (_q = theme.dismissButtonSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_r = theme.dismissIconSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-hidden": "true" }) }))] })) : null;
+                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -mr-0.5 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", (_s = theme.dismissButtonSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_t = theme.dismissIconSizes) === null || _t === void 0 ? void 0 : _t[size]), "aria-hidden": "true" }) }))] })) }));
+                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -mr-0.5 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,97 +4,100 @@
  */
 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-medium border",
     // Visual style variants (structure only, no colors)
+    // All variants keep the 1px `border` from baseStyle so every variant is the
+    // SAME height (variant must never change size). `filled` and `soft` make that
+    // border TRANSPARENT — the fill shows through it (bg is painted under the
+    // border), so they read as borderless while still occupying the 1px box.
+    // Only `outline` has a visible border. Do NOT use `border-none` — it drops the
+    // border box and makes the variant 2px shorter than the others.
     variants: {
-        filled: "",
-        outline: "bg-transparent border",
-        ghost: "ring-transparent border-0",
+        filled: "border-transparent",
+        outline: "bg-transparent",
+        soft: "border-transparent",
     },
     // 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)]",
+            // Background drives from the themed base var (mode-aware) so the
+            // auto-derived -contrast text always matches. Do NOT pin a fixed step
+            // (e.g. dark:bg-primary-600) — that decouples the fill from -contrast and
+            // breaks readability when a theme sets the dark base to a light step
+            // (e.g. a monochrome theme flips dark primary to near-white). See CLAUDE §3.
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)]",
+            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-secondary)] border-[var(--color-border)] " + "",
-            primary: "text-[var(--color-primary)] border-[var(--color-border)] " +
-                "dark:text-[var(--color-primary-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)] " +
-                "dark:text-[var(--color-warning-400)]",
-            danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
-                "dark:text-[var(--color-danger-400)]",
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " + "",
+            primary: "text-[var(--color-primary)] border-[var(--color-primary-600)] " +
+                "dark:text-[var(--color-primary-400)] dark:border-[var(--color-primary-400)]",
+            success: "text-[var(--color-success)] border-[var(--color-success-600)] " +
+                "dark:text-[var(--color-success-400)] dark:border-[var(--color-success-400)]",
+            warning: "text-[var(--color-warning)] border-[var(--color-warning-600)] " +
+                "dark:text-[var(--color-warning-400)] dark:border-[var(--color-warning-400)]",
+            danger: "text-[var(--color-danger)] border-[var(--color-danger-600)] " +
+                "dark:text-[var(--color-danger-400)] dark:border-[var(--color-danger-400)]",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-secondary)] " +
-                "dark:bg-[var(--color-neutral-900)]  ",
-            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, NO visible border (the transparent
+        // 1px border from `variants.soft` only reserves height; the fill shows through it).
+        soft: {
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] " +
+                "dark:bg-[var(--color-neutral-900)]",
+            primary: "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] " +
+                "dark:bg-[var(--color-primary-400)]/20 dark:text-[var(--color-primary-300)]",
+            success: "bg-[var(--color-success-100)]/70 text-[var(--color-success-700)] " +
+                "dark:bg-[var(--color-success-400)]/20 dark:text-[var(--color-success-400)]",
+            warning: "bg-[var(--color-warning-50)] text-[var(--color-warning-700)] " +
+                "dark:bg-[var(--color-warning-400)]/20 dark:text-[var(--color-warning-400)]",
+            danger: "bg-[var(--color-danger-50)] text-[var(--color-danger-700)] " +
+                "dark:bg-[var(--color-danger-400)]/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",
+        sm: "text-xs px-1 py-0.25 gap-1",
+        md: "text-xs px-1.5 py-0.25 gap-1",
     },
-    // Border radius per size (using CSS variable)
-    radiusSizes: {
-        sm: "rounded-[calc(var(--badge-radius)*0.75)]",
-        md: "rounded-[var(--badge-radius)]",
-    },
-    // Additional padding for pill shape
+    // Additional padding for pill shape — must clear the rounded-full cap radius
+    // (≈ height/2), otherwise content sits inside the curve and hugs the edge.
     pillSizes: {
         sm: "px-2",
         md: "px-2.5",
     },
-    // Icon sizes
+    // Icon sizes — applies to wrapper span; [&>svg] selector ensures SVG scales to fit
     iconSizes: {
-        sm: "size-3",
-        md: "size-3.5",
+        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",
+        md: "size-5",
     },
-    // Dismiss button container sizes
-    dismissButtonSizes: {
-        sm: "size-3.5",
-        md: "size-4",
-    },
-    // Dismiss icon sizes (inside button)
-    dismissIconSizes: {
-        sm: "size-2.5",
+    // Dismiss icon sizes — match the text-xs cap (both badge sizes use text-xs) so
+    // the dismiss button never grows taller than the text and stretches the badge.
+    dismissSizes: {
+        sm: "size-3",
         md: "size-3",
     },
-    // 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-secondary)]",
-        primary: "bg-[var(--color-primary)]",
-        success: "bg-[var(--color-success)]",
-        warning: "bg-[var(--color-warning)]",
-        danger: "bg-[var(--color-danger)]",
+        neutral: "bg-current",
+        primary: "bg-current",
+        success: "bg-current",
+        warning: "bg-current",
+        danger: "bg-current",
     },
     // State styles
     states: {

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

@@ -1,7 +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";
+import React, { ReactNode, MouseEvent } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
+import type { MeshPaletteName } from "../../effects/MeshGradient";
+export type BadgeVariant = "filled" | "outline" | "soft";
+export type BadgeColor = SemanticColor;
 export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
@@ -28,10 +29,6 @@ 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
      */
@@ -41,13 +38,9 @@ export interface BadgeTheme {
      */
     avatarSizes: Record<BadgeSize, string>;
     /**
-     * Dismiss button sizes for each badge size
-     */
-    dismissButtonSizes: Record<BadgeSize, string>;
-    /**
-     * Dismiss icon sizes for each badge size
+     * Dismiss icon sizes (button sizes itself from icon + padding)
      */
-    dismissIconSizes: Record<BadgeSize, string>;
+    dismissSizes: Record<BadgeSize, string>;
     /**
      * Color styles for dot indicators
      */
@@ -69,18 +62,16 @@ 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>>;
-    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
      */
@@ -92,7 +83,7 @@ export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "
     variant?: BadgeVariant;
     /**
      * The semantic color of the badge (primary, success, danger, etc.)
-     * @default 'default'
+     * @default 'primary'
      */
     color?: BadgeColor;
     /**
@@ -122,9 +113,19 @@ export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "
      */
     avatar?: {
         src?: string;
-        alt: string;
+        name: string;
         fallback?: ReactNode;
         initialsCount?: number;
+        /**
+         * Render a deterministic mesh-gradient as the avatar background (initials
+         * overlay on top). Pass `true` to seed from `name`, or a string seed.
+         * Useful for imageless person chips.
+         */
+        gradient?: boolean | string;
+        /** Curated gradient palette (overridden by `gradientColors`). */
+        gradientVariant?: MeshPaletteName;
+        /** Raw gradient color override; wins over `gradientVariant`. */
+        gradientColors?: string[];
     };
     /**
      * Whether the badge is dismissible (shows close button)
@@ -136,20 +137,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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -39,18 +40,22 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
         return { visibleItems, hiddenItems };
     };
     const { visibleItems, hiddenItems } = getVisibleItems();
-    // Render individual breadcrumb item
+    // Render the inner content of a breadcrumb item (icon + label)
+    const renderItemContent = (item) => (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] }));
+    // Render individual breadcrumb item wrapped in its own <li>
     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}`));
+        // aria-current="page" must identify a single current page: only the
+        // last crumb qualifies, regardless of whether an earlier crumb has an href.
+        const isCurrentPage = isLast;
+        // An earlier crumb without an href still isn't the current page — render
+        // it as plain (non-interactive, non-current) text rather than a dead link.
+        const isPlainText = !isCurrentPage && !item.href;
+        return (jsxs("li", { className: "flex items-center", children: [isCurrentPage ? (jsx("span", { className: cn("flex items-center text-sm", theme.current), "aria-current": "page", children: renderItemContent(item) })) : isPlainText ? (jsx("span", { className: cn("flex items-center text-sm", theme.current), children: renderItemContent(item) })) : (jsx("a", { href: item.href, className: cn("flex items-center text-sm", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: renderItemContent(item) })), !isLast && (jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }))] }, `breadcrumb-${index}`));
     };
-    // Render separator
-    const renderSeparator = (index) => {
-        return (jsx("span", { className: cn("flex items-center", theme.separator), "aria-hidden": "true", children: SeparatorComponent }, `separator-${index}`));
-    };
-    // Render ellipsis with dropdown
-    const renderEllipsis = () => {
+    // Render ellipsis with dropdown wrapped in its own <li>
+    const renderEllipsis = (separatorIndex) => {
         if (hiddenItems.length === 0)
             return null;
         const handleEllipsisAction = (itemKey) => {
@@ -60,27 +65,24 @@ 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("li", { className: "flex items-center", children: [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}`))) })] }), jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }, `separator-${separatorIndex}`)] }, "ellipsis"));
     };
-    // Build the breadcrumb elements
+    // Build the breadcrumb <li> elements
     const breadcrumbElements = [];
     let separatorIndex = 0; // Unique separator counter
     if (shouldCollapse) {
-        // Add first item
+        // Add first item (not last, so it will include a separator)
         breadcrumbElements.push(renderItem(visibleItems[0], 0, false));
-        breadcrumbElements.push(renderSeparator(separatorIndex++));
-        // Add ellipsis
-        breadcrumbElements.push(renderEllipsis());
-        breadcrumbElements.push(renderSeparator(separatorIndex++));
+        // Add ellipsis (includes its own trailing separator)
+        breadcrumbElements.push(renderEllipsis(separatorIndex++));
         // Add last two items
         const lastTwoItems = visibleItems.slice(1);
         lastTwoItems.forEach((item, index) => {
             const actualIndex = index + 1;
-            const isLast = actualIndex === lastTwoItems.length;
+            const isLast = index === lastTwoItems.length - 1;
             breadcrumbElements.push(renderItem(item, actualIndex, isLast));
-            if (!isLast) {
-                breadcrumbElements.push(renderSeparator(separatorIndex++));
-            }
         });
     }
     else {
@@ -88,12 +90,9 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
         visibleItems.forEach((item, index) => {
             const isLast = index === visibleItems.length - 1;
             breadcrumbElements.push(renderItem(item, index, isLast));
-            if (!isLast) {
-                breadcrumbElements.push(renderSeparator(separatorIndex++));
-            }
         });
     }
-    return (jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), ...props, children: jsx("ol", { className: "flex items-center gap-1", children: jsx("li", { className: "contents", children: breadcrumbElements }) }) }));
+    return (jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), ...props, children: jsx("ol", { className: "flex items-center gap-1 flex-wrap", children: breadcrumbElements }) }));
 };
 Breadcrumbs.displayName = "Breadcrumbs";
 

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

@@ -10,7 +10,7 @@ const breadcrumbsTheme = {
     link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
     current: "text-[var(--color-text-primary)] font-medium",
     separator: "text-[var(--color-text-muted)] select-none",
-    ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
+    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-surface-hover)]",
 };
 /**
  * Variant styles for different breadcrumb appearances
@@ -21,7 +21,7 @@ const breadcrumbsVariants = {
         link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 font-normal",
         current: "text-[var(--color-text-secondary)] font-normal",
         separator: "text-[var(--color-border)]",
-        ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
+        ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
     },
 };
 /**

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 };