@flikk/ui 1.0.0-beta.14 → 1.0.0-beta.16

package/dist/components/core/Alert/Alert.animations.js

@@ -0,0 +1,44 @@
+/**
+ * Alert entrance/exit animation variants
+ * Entrance: slide down from -8px + fade in
+ * Exit: fade out + collapse height
+ */
+const alertVariants = {
+    hidden: {
+        opacity: 0,
+        y: -8,
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginTop: 0,
+        marginBottom: 0,
+        overflow: "hidden",
+        transition: {
+            duration: 0.15,
+            ease: [0.4, 0, 1, 1],
+        },
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        height: "auto",
+        paddingTop: undefined,
+        paddingBottom: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        overflow: "visible",
+        transition: {
+            duration: 0.2,
+            ease: [0.4, 0, 0.2, 1],
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no slide or collapse
+ */
+const reducedMotionAlertVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+};
+
+export { alertVariants, reducedMotionAlertVariants };

package/dist/components/core/Alert/Alert.js

@@ -1,7 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React__default, { useState } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { alertTheme } from './Alert.theme.js';
+import { reducedMotionAlertVariants, alertVariants } from './Alert.animations.js';
 import { XMarkIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
 import { Button } from '../Button/Button.js';
 
@@ -15,10 +17,16 @@ const defaultIcons = {
 };
 const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
     var _a;
+    const shouldReduceMotion = useReducedMotion();
+    const [isDismissing, setIsDismissing] = useState(false);
     const iconColor = (_a = alertTheme.iconColors[color]) !== null && _a !== void 0 ? _a : alertTheme.iconColors.primary;
     const showDismiss = dismissible === true || (dismissible !== false && !!onDismiss);
     const handleDismiss = () => {
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        if (shouldReduceMotion) {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            return;
+        }
+        setIsDismissing(true);
     };
     const renderIconOrAvatar = () => {
         if (avatar) {
@@ -33,11 +41,16 @@ const Alert = React__default.forwardRef(({ variant = "default", color = "primary
         const IconComponent = defaultIcons[color];
         return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
     };
-    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
+    const alertContent = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
                         ? jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })
                         : title), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })
                         : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
+    const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, initial: "hidden", animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
+            if (definition === "hidden" && isDismissing) {
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            }
+        }, children: alertContent }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: alertNode });
     }

package/dist/components/core/Avatar/Avatar.js

@@ -6,7 +6,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { UserIcon } from '@heroicons/react/24/solid';
 
-const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, ...props }, ref) => {
+const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, title, subtitle, ...props }, ref) => {
     const [imageError, setImageError] = useState(false);
     const [retries, setRetries] = useState(0);
     const retryTimerRef = useRef(null);
@@ -86,13 +86,18 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
         : (resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar");
     // Determine appropriate ARIA role
     const ariaRole = role || (src ? undefined : "img");
-    // Avatar content to potentially wrap in tooltip
-    const avatarContent = (jsxs("div", { ref: ref, className: cn("relative inline-flex avatar-wrapper", groupPosition), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [jsx("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: "avatar-fallback", children: getFallbackContent() })) }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status }))] }));
-    // Conditionally wrap in tooltip
-    if (showTooltip && resolvedName) {
-        return (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarContent }));
+    const resolvedTitle = title !== null && title !== void 0 ? title : (subtitle ? resolvedName : undefined);
+    const hasTextSection = !!(resolvedTitle || subtitle);
+    // The avatar circle with status indicator
+    const avatarCircle = (jsxs("div", { className: cn("relative inline-flex avatar-wrapper shrink-0", groupPosition), children: [jsx("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: "avatar-fallback flex items-center justify-center size-full", children: getFallbackContent() })) }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status }))] }));
+    // Wrap circle in tooltip if needed
+    const avatarWithTooltip = showTooltip && resolvedName ? (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarCircle })) : (avatarCircle);
+    // If no text section, render just the avatar
+    if (!hasTextSection) {
+        return (jsx("div", { ref: ref, role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: avatarWithTooltip }));
     }
-    return avatarContent;
+    // Render avatar with text section
+    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center", avatarTheme.gapSizes[size]), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [avatarWithTooltip, jsxs("div", { className: "min-w-0", children: [resolvedTitle && (jsx("div", { className: cn(avatarTheme.titleStyle, avatarTheme.textSizes[size]), children: resolvedTitle })), subtitle && (jsx("div", { className: cn(avatarTheme.subtitleStyle, avatarTheme.textSizes[size]), children: subtitle }))] })] }));
 });
 // Set display name for dev tools and Storybook
 Avatar.displayName = "Avatar";

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

@@ -1,14 +1,12 @@
 import { AvatarSize, AvatarStatus } from "./Avatar.types";
-/**
- * Internal theme structure for the Avatar component
- */
 interface AvatarTheme {
     baseStyle: string;
     sizes: Record<AvatarSize, string>;
     statuses: Record<AvatarStatus, string>;
+    titleStyle: string;
+    subtitleStyle: string;
+    textSizes: Record<AvatarSize, string>;
+    gapSizes: Record<AvatarSize, string>;
 }
-/**
- * Default theme for the Avatar component
- */
 export declare const avatarTheme: AvatarTheme;
 export {};

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

@@ -1,25 +1,35 @@
-/**
- * Default theme for the Avatar component
- */
 const avatarTheme = {
-    // Base styles for the avatar element
-    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
-    // Size variants using CSS variables
+    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     sizes: {
-        xs: "size-[var(--avatar-size-xs)] text-xs",
+        xs: "size-[var(--avatar-size-xs)] text-sm",
         sm: "size-[var(--avatar-size-sm)] text-sm",
-        md: "size-[var(--avatar-size-md)] text-md",
-        lg: "size-[var(--avatar-size-lg)] text-lg",
-        xl: "size-[var(--avatar-size-xl)] text-xl",
+        md: "size-[var(--avatar-size-md)] text-base",
+        lg: "size-[var(--avatar-size-lg)] text-base",
+        xl: "size-[var(--avatar-size-xl)] text-base",
     },
-    // Status indicator styles
     statuses: {
         online: "bg-[var(--color-success)]",
-        offline: "bg-neutral-400",
+        offline: "bg-[var(--color-text-muted)]",
         busy: "bg-[var(--color-danger)]",
         away: "bg-[var(--color-warning)]",
         none: "",
     },
+    titleStyle: "font-medium leading-tight text-[var(--color-text-primary)] truncate",
+    subtitleStyle: "leading-tight text-[var(--color-text-muted)] truncate",
+    textSizes: {
+        xs: "text-sm",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-base",
+        xl: "text-base",
+    },
+    gapSizes: {
+        xs: "gap-1.5",
+        sm: "gap-2",
+        md: "gap-2.5",
+        lg: "gap-3",
+        xl: "gap-3",
+    },
 };
 
 export { avatarTheme };

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

@@ -67,4 +67,13 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default 2
      */
     initialsCount?: number;
+    /**
+     * Title text displayed next to the avatar.
+     * Defaults to `name` if not provided.
+     */
+    title?: string;
+    /**
+     * Subtitle text displayed below the title (e.g., email, role).
+     */
+    subtitle?: string;
 }

package/dist/components/core/AvatarGroup/AvatarGroup.animations.js

@@ -38,8 +38,8 @@ const getAvatarGroupVariants = (shouldReduceMotion = false, enableAnimations = t
         },
         notHovered: () => {
             return {
-                scale: 0.95,
-                y: 2,
+                scale: 1,
+                y: 0,
                 filter: "saturate(0)",
                 transition: {
                     type: "spring",

package/dist/components/core/AvatarGroup/AvatarGroup.js

@@ -48,8 +48,7 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
                     index > 0 ? spacingClass : "z-10"), "data-position": position, "data-index": index, ...motionProps, children: jsx(Avatar, { size: size, ...avatarProps, contextualLabel: contextLabel, 
                         // Ensure that groupPosition is not passed to avoid conflicts
                         groupPosition: undefined }) }, index));
-            }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, enableAnimations &&
-                    "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount, children: overflowIndicator ? (overflowIndicator(overflowCount)) : (jsx(Avatar, { size: size, name: `+${overflowCount} more`, fallback: jsxs("span", { children: ["+", overflowCount] }), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": `+ ${overflowCount} more users` })) }))] }));
+            }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, "self-center"), "data-overflow-count": overflowCount, children: overflowIndicator ? (overflowIndicator(overflowCount)) : (jsx(Avatar, { size: size, name: `+${overflowCount} more`, fallback: jsxs("span", { children: ["+", overflowCount] }), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": `+ ${overflowCount} more users` })) }))] }));
 });
 // Set display name for dev tools and Storybook
 AvatarGroup.displayName = "AvatarGroup";

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

@@ -11,7 +11,7 @@ const avatarGroupTheme = {
         loose: "-ml-2 z-10",
     },
     // Overflow avatar styles
-    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-base flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
+    overflowAvatarStyle: "bg-[var(--color-surface)] text-[var(--color-text-secondary)] font-semibold text-sm flex items-center justify-center size-7",
 };
 
 export { avatarGroupTheme };

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

@@ -53,7 +53,7 @@ const dotVariants = {
 // Dismiss button variants - optimized for performance
 const dismissButtonVariants = {
     initial: {
-        opacity: 0.5,
+        opacity: 0.75,
     },
     hover: {
         opacity: 1,

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, _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]);
     // 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,
@@ -103,10 +91,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 +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,
@@ -138,11 +118,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,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
                 ? {
-                    xs: "-ml-1",
                     sm: "-ml-1.5",
                     md: "-ml-1.5",
                 }[size]
                 : {
-                    xs: "-ml-1",
                     sm: "-ml-1.5",
                     md: "-ml-1",
                 }[size];
-            return (jsx(Avatar, { src: avatar.src, name: avatar.name, 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("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", (_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", (_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 -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", (_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 -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

@@ -1,39 +1,38 @@
-import { semanticBgColors } from '../../../utils/colorUtils.js';
-
 /**
  * Default theme configuration for Badge component
  * Uses variant-first color organization for reliable dark mode and className overrides
  */
 const badgeTheme = {
     // Base styles applied to all badges
-    baseStyle: "inline-flex items-center align-middle 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",
-        soft: "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-[var(--color-primary-contrast)] ring-[var(--color-primary-400)] " +
-                "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
-            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] ring-[var(--color-secondary-400)] " +
-                "dark:bg-[var(--color-secondary-600)] dark:ring-[var(--color-secondary-500)]",
-            success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] ring-[var(--color-success-300)] " +
-                "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
-            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] ring-[var(--color-warning-300)] " +
-                "dark:bg-[var(--color-warning-600)] dark:ring-[var(--color-warning-400)]",
-            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] 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-secondary)] border-[var(--color-border)] " + "",
+            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)] " +
@@ -45,68 +44,55 @@ const badgeTheme = {
             danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-danger-400)]",
         },
-        // Soft variant - subtle background tints
+        // Soft variant - subtle background tints (Preline-style: 800 text, 500/20 dark bg)
         soft: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
-                "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)]",
-            secondary: "bg-[var(--color-secondary-100)] text-[var(--color-secondary-700)] " +
-                "dark:bg-[var(--color-secondary-600)]/30 dark:text-[var(--color-secondary-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)]",
+            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: {
-        xs: "text-xs px-1 py-0 gap-1 font-semibold",
-        sm: "text-sm px-1.5 py-0 gap-1 font-semibold",
-        md: "text-sm px-2 py-0.25 gap-1 font-semibold",
-    },
-    // Border radius per size (using CSS variable)
-    radiusSizes: {
-        xs: "rounded-[calc(var(--badge-radius)*0.5)]",
-        sm: "rounded-[calc(var(--badge-radius)*0.75)]",
-        md: "rounded-[var(--badge-radius)]",
+        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: {
-        xs: "px-1.5",
         sm: "px-2",
         md: "px-2.5",
     },
-    // Icon sizes
+    // Icon sizes — applies to wrapper span; [&>svg] selector ensures SVG scales to fit
     iconSizes: {
-        xs: "size-2.5",
-        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: {
-        xs: "size-3.5",
         sm: "size-4",
-        md: "size-4",
+        md: "size-5",
     },
-    // Dismiss button container sizes
-    dismissButtonSizes: {
-        xs: "size-3",
-        sm: "size-3.5",
+    // Dismiss icon sizes (button sizes itself from icon + padding)
+    dismissSizes: {
+        sm: "size-3",
         md: "size-4",
     },
-    // Dismiss icon sizes (inside button)
-    dismissIconSizes: {
-        xs: "size-2",
-        sm: "size-2.5",
-        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: {
-        ...semanticBgColors,
-        neutral: "bg-[var(--color-text-secondary)]",
+        neutral: "bg-current",
+        primary: "bg-current",
+        secondary: "bg-current",
+        success: "bg-current",
+        warning: "bg-current",
+        danger: "bg-current",
     },
     // State styles
     states: {