flikkui 0.1.0-beta.11

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

@@ -0,0 +1,79 @@
+/**
+ * Animation variants for AvatarGroup hover effects
+ * Creates a creative sliding and focus effect where hovered avatars scale up
+ * while non-hovered avatars slide closer together and fade slightly
+ */
+var getAvatarGroupVariants = function (direction, shouldReduceMotion, enableAnimations) {
+    if (shouldReduceMotion === void 0) { shouldReduceMotion = false; }
+    if (enableAnimations === void 0) { enableAnimations = true; }
+    if (shouldReduceMotion || !enableAnimations) {
+        return {
+            initial: { scale: 1, opacity: 1, zIndex: 10 },
+            hover: { scale: 1, zIndex: 10 }, // Keep same z-index when animations disabled
+            notHovered: { scale: 1, opacity: 1, zIndex: 10 },
+            default: { scale: 1, opacity: 1, zIndex: 10 }
+        };
+    }
+    return {
+        initial: {
+            scale: 1,
+            opacity: 1,
+            x: 0,
+            filter: "blur(0px)",
+            zIndex: 10
+        },
+        hover: {
+            scale: 1.05,
+            opacity: 1,
+            x: 0,
+            filter: "blur(0px)",
+            zIndex: 20,
+            transition: {
+                type: "spring",
+                stiffness: 400,
+                damping: 25,
+                duration: 0.2
+            }
+        },
+        notHovered: {
+            scale: 0.95,
+            //   opacity: 0.4,
+            //   x: direction === "row" ? -8 : 8, // Slide towards the center
+            filter: "blur(0px) saturate(0) brightness(1.15)",
+            zIndex: 5,
+            transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                duration: 0.3
+            }
+        },
+        default: {
+            scale: 1,
+            opacity: 1,
+            x: 0,
+            filter: "blur(0px)",
+            zIndex: 10,
+            transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                duration: 0.3
+            }
+        }
+    };
+};
+/**
+ * Determines which animation state to use based on hover index
+ */
+var getAnimationState = function (currentIndex, hoveredIndex, enableAnimations) {
+    if (!enableAnimations)
+        return "default";
+    if (hoveredIndex === currentIndex)
+        return "hover";
+    if (hoveredIndex !== null && hoveredIndex !== currentIndex)
+        return "notHovered";
+    return "default";
+};
+
+export { getAnimationState, getAvatarGroupVariants };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AvatarGroupProps } from "./AvatarGroup.types";
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,67 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useMemo } from 'react';
+import { Avatar } from '../Avatar/Avatar.js';
+import { cn } from '../../../utils/cn.js';
+import { avatarGroupTheme } from './AvatarGroup.theme.js';
+import { getAnimationState, getAvatarGroupVariants } from './AvatarGroup.animations.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var AvatarGroup = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.avatars, avatars = _b === void 0 ? [] : _b, _c = _a.max, max = _c === void 0 ? 5 : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.spacing, spacing = _e === void 0 ? "normal" : _e, _f = _a.direction, direction = _f === void 0 ? "row" : _f, overflowIndicator = _a.overflowIndicator, className = _a.className, _g = _a.ariaLabel, ariaLabel = _g === void 0 ? "Group of users" : _g, _h = _a.shouldAnimate, shouldAnimate = _h === void 0 ? true : _h, props = __rest(_a, ["avatars", "max", "size", "spacing", "direction", "overflowIndicator", "className", "ariaLabel", "shouldAnimate"]);
+    var _j = useState(null), hoveredIndex = _j[0], setHoveredIndex = _j[1];
+    var shouldReduceMotion = useReducedMotion();
+    var enableAnimations = shouldAnimate && !shouldReduceMotion;
+    // Memoize expensive calculations to prevent unnecessary re-renders
+    var memoizedData = useMemo(function () {
+        var visibleAvatars = avatars.slice(0, max);
+        var overflowCount = avatars.length > max ? avatars.length - max : 0;
+        var spacingClass = avatarGroupTheme.spacingStyles[spacing];
+        var spacingHoverClass = enableAnimations ? avatarGroupTheme.spacingHoverStyles[spacing] : '';
+        var directionClass = direction === "row-reverse" ? "flex-row-reverse" : "flex-row";
+        var totalPeople = avatars.length;
+        var groupDescription = avatars
+            .map(function (avatar) { return avatar.alt || "User"; })
+            .join(", ");
+        return {
+            visibleAvatars: visibleAvatars,
+            overflowCount: overflowCount,
+            spacingClass: spacingClass,
+            spacingHoverClass: spacingHoverClass,
+            directionClass: directionClass,
+            totalPeople: totalPeople,
+            groupDescription: groupDescription
+        };
+    }, [avatars, max, spacing, direction, enableAnimations]);
+    var visibleAvatars = memoizedData.visibleAvatars, overflowCount = memoizedData.overflowCount, spacingClass = memoizedData.spacingClass, spacingHoverClass = memoizedData.spacingHoverClass, directionClass = memoizedData.directionClass, totalPeople = memoizedData.totalPeople, groupDescription = memoizedData.groupDescription;
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className // User overrides take precedence
+        ), role: "group", "aria-label": ariaLabel, "aria-description": "Contains ".concat(totalPeople, " users: ").concat(groupDescription), "data-size": size, "data-spacing": spacing, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: function () { return enableAnimations && setHoveredIndex(null); } }, props),
+        visibleAvatars.map(function (avatarProps, index) {
+            // Create contextual label for individual avatars in a group
+            var position = index + 1;
+            var contextLabel = avatarProps.contextualLabel ||
+                " (".concat(position, " of ").concat(totalPeople, ")");
+            var MotionDiv = enableAnimations ? motion.div : "div";
+            var motionProps = enableAnimations ? {
+                variants: getAvatarGroupVariants(direction, shouldReduceMotion, enableAnimations),
+                animate: getAnimationState(index, hoveredIndex, enableAnimations),
+                onHoverStart: function () { return setHoveredIndex(index); },
+                whileHover: "hover"
+            } : {};
+            return (React__default.createElement(MotionDiv, __assign({ key: index, className: cn(
+                // First avatar doesn't need negative margin
+                index > 0 ? spacingClass : "z-10", 
+                // Apply hover z-index only when animations enabled
+                index > 0 && spacingHoverClass), "data-position": position, "data-index": index }, motionProps),
+                React__default.createElement(Avatar, __assign({ size: size }, avatarProps, { contextualLabel: contextLabel, 
+                    // Ensure that groupPosition is not passed to avoid conflicts
+                    groupPosition: undefined }))));
+        }),
+        overflowCount > 0 && (React__default.createElement("div", { className: cn(spacingClass, enableAnimations && "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount }, overflowIndicator ? (overflowIndicator(overflowCount)) : (React__default.createElement(Avatar, { size: size, alt: "+".concat(overflowCount, " more"), fallback: React__default.createElement("span", null,
+                "+",
+                overflowCount), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": "+ ".concat(overflowCount, " more users") }))))));
+});
+// Set display name for dev tools and Storybook
+AvatarGroup.displayName = "AvatarGroup";
+
+export { AvatarGroup };

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

@@ -0,0 +1,15 @@
+import { AvatarGroupSpacing } from './AvatarGroup.types';
+/**
+ * Internal theme structure for the AvatarGroup component
+ */
+interface AvatarGroupTheme {
+    baseStyle: string;
+    spacingStyles: Record<AvatarGroupSpacing, string>;
+    spacingHoverStyles: Record<AvatarGroupSpacing, string>;
+    overflowAvatarStyle: string;
+}
+/**
+ * Default theme for the AvatarGroup component
+ */
+export declare const avatarGroupTheme: AvatarGroupTheme;
+export {};

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

@@ -0,0 +1,23 @@
+/**
+ * Default theme for the AvatarGroup component
+ */
+var avatarGroupTheme = {
+    // Base styles for the avatar group
+    baseStyle: 'flex items-start',
+    // Spacing options - separated from hover effects
+    spacingStyles: {
+        tight: '-ml-5 z-10',
+        normal: '-ml-3 z-10',
+        loose: '-ml-2 z-10',
+    },
+    // Hover z-index effects - applied separately when animations enabled
+    spacingHoverStyles: {
+        tight: 'hover:z-20',
+        normal: 'hover:z-20',
+        loose: 'hover:z-20',
+    },
+    // Overflow avatar styles
+    overflowAvatarStyle: 'bg-neutral-100 text-neutral-800 font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200',
+};
+
+export { avatarGroupTheme };

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import type { AvatarProps } from '../Avatar/Avatar.types';
+export type AvatarGroupSpacing = 'tight' | 'normal' | 'loose';
+export type AvatarGroupDirection = 'row' | 'row-reverse';
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of avatar props to render in the group
+     */
+    avatars: AvatarProps[];
+    /**
+     * Maximum number of avatars to display before showing a count
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Size for all avatars in the group
+     * @default "md"
+     */
+    size?: AvatarProps["size"];
+    /**
+     * Amount of overlap between avatars (higher value = more overlap)
+     * @default "normal"
+     */
+    spacing?: AvatarGroupSpacing;
+    /**
+     * Direction of the avatar stack
+     * @default "row"
+     */
+    direction?: AvatarGroupDirection;
+    /**
+     * Custom renderer for the overflow avatar
+     */
+    overflowIndicator?: (overflowCount: number) => ReactNode;
+    /**
+     * ARIA label for the avatar group for accessibility
+     * @default "Group of users"
+     */
+    ariaLabel?: string;
+    /**
+     * Enable motion animations for hover effects
+     * @default true
+     */
+    shouldAnimate?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { AvatarGroup } from './AvatarGroup';
+export type { AvatarGroupProps, AvatarGroupSpacing, AvatarGroupDirection } from './AvatarGroup.types';

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

@@ -0,0 +1,8 @@
+import { Variants } from "motion/react";
+export declare const badgeVariants: Variants;
+export declare const dotVariants: Variants;
+export declare const dismissButtonVariants: Variants;
+export declare const dismissVariants: Variants;
+export declare const animationTiming: {
+    dismissDelay: number;
+};

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

@@ -0,0 +1,109 @@
+// Main badge variants with optimized transitions
+var badgeVariants = {
+    initial: {
+        opacity: 1,
+        scale: 1,
+    },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            mass: 1,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.2,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 25,
+            mass: 0.8,
+            duration: 0.3,
+        },
+    },
+};
+// Dot variants
+var dotVariants = {
+    initial: {
+        opacity: 0,
+        scale: 0,
+    },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+            duration: 0.15,
+            ease: "easeIn",
+        },
+    },
+};
+// Dismiss button variants - optimized for performance
+var dismissButtonVariants = {
+    initial: {
+        opacity: 0.5,
+    },
+    hover: {
+        opacity: 1,
+        transition: { duration: 0.15, ease: "easeOut" },
+    },
+    tap: {
+        scale: 0.95,
+        transition: { duration: 0.1, ease: "easeOut" },
+    },
+};
+// Optimized dismiss animation sequence
+// This uses Framer Motion's built-in sequencing capabilities
+var dismissVariants = {
+    initial: {
+        opacity: 0,
+        scale: 0.8,
+    },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+            mass: 1,
+        },
+    },
+    // First stage of exit - slight pop
+    exit: {
+        opacity: 0,
+        scale: 0.2,
+        transition: {
+            opacity: {
+                duration: 0.3,
+                ease: "easeOut",
+            },
+            scale: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                // Add a slight delay to create the pop effect
+                delay: 0.05,
+            },
+            duration: 0.4,
+        },
+    },
+};
+// Animation timing constants (in ms)
+var animationTiming = {
+    dismissDelay: 400, // Total animation duration
+};
+
+export { animationTiming, badgeVariants, dismissButtonVariants, dismissVariants, dotVariants };

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { BadgeProps } from "./Badge.types";
+/**
+ * Badge component for displaying status, labels, or counters.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Badge variant="primary" size="md" pill>New Feature</Badge>
+ * <Badge variant="success" withDot>Ready</Badge>
+ * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
+ * ```
+ */
+export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,164 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
+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';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+// Helper to determine whether we should animate (Storybook can disable animations globally)
+var getShouldAnimate = function () {
+    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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Badge variant="primary" size="md" pill>New Feature</Badge>
+ * <Badge variant="success" withDot>Ready</Badge>
+ * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
+ * ```
+ */
+var Badge = React__default.memo(React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var children = _a.children, _m = _a.variant, variant = _m === void 0 ? "filled" : _m, _o = _a.color, color = _o === void 0 ? "primary" : _o, _p = _a.size, size = _p === void 0 ? "md" : _p, _q = _a.pill, pill = _q === void 0 ? false : _q, _r = _a.withDot, withDot = _r === void 0 ? false : _r, iconStart = _a.iconStart, avatar = _a.avatar, _s = _a.dismissible, dismissible = _s === void 0 ? false : _s, onDismiss = _a.onDismiss, _t = _a.selectable, selectable = _t === void 0 ? false : _t, _u = _a.selected, selected = _u === void 0 ? false : _u, onSelect = _a.onSelect, _v = _a.disabled, disabled = _v === void 0 ? false : _v, maxWidth = _a.maxWidth, className = _a.className, _w = _a.theme, customTheme = _w === void 0 ? {} : _w, onClick = _a.onClick, props = __rest(_a, ["children", "variant", "color", "size", "pill", "withDot", "iconStart", "avatar", "dismissible", "onDismiss", "selectable", "selected", "onSelect", "disabled", "maxWidth", "className", "theme", "onClick"]);
+    // State management
+    var _x = useState(true), isVisible = _x[0], setIsVisible = _x[1];
+    var _y = useState(selected), isSelected = _y[0], setIsSelected = _y[1];
+    var shouldAnimate = useMemo(getShouldAnimate, []);
+    // Sync internal state with controlled prop
+    useEffect(function () {
+        setIsSelected(selected);
+    }, [selected]);
+    // Development-only warnings
+    if (process.env.NODE_ENV !== "production") {
+        if (dismissible && !onDismiss) {
+            console.warn("[Badge]: onDismiss prop is required when dismissible is true");
+        }
+        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
+    var handleDismiss = useCallback(function (e) {
+        e.stopPropagation();
+        setIsVisible(false);
+        // Delay the onDismiss call until after the animation
+        setTimeout(function () {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e);
+        }, animationTiming.dismissDelay);
+    }, [onDismiss]);
+    // Handle badge click (for selectable badges)
+    var handleClick = useCallback(function (e) {
+        if (disabled)
+            return;
+        if (selectable) {
+            var 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]);
+    // Merge default theme with custom theme overrides
+    var theme = __assign(__assign(__assign({}, badgeTheme), customTheme), { variants: __assign(__assign({}, badgeTheme.variants), customTheme.variants), colors: __assign(__assign({}, badgeTheme.colors), customTheme.colors), sizes: __assign(__assign({}, badgeTheme.sizes), customTheme.sizes), pillSizes: __assign(__assign({}, badgeTheme.pillSizes), customTheme.pillSizes), iconSizes: __assign(__assign({}, badgeTheme.iconSizes), customTheme.iconSizes), avatarSizes: __assign(__assign({}, badgeTheme.avatarSizes), customTheme.avatarSizes), dismissButtonSizes: __assign(__assign({}, badgeTheme.dismissButtonSizes), customTheme.dismissButtonSizes), dismissIconSizes: __assign(__assign({}, badgeTheme.dismissIconSizes), customTheme.dismissIconSizes), dotColors: __assign(__assign({}, badgeTheme.dotColors), customTheme.dotColors), states: __assign(__assign({}, badgeTheme.states), customTheme.states) });
+    // Get styles from theme
+    var variantStyles = ((_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant]) || "";
+    var colorStyles = ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c[color]) || "";
+    var sizeStyle = ((_d = theme.sizes) === null || _d === void 0 ? void 0 : _d[size]) || "";
+    var shapeStyle = pill
+        ? "rounded-full"
+        : "rounded-[var(--badge-rounded)]";
+    var dotColorStyle = ((_e = theme.dotColors) === null || _e === void 0 ? void 0 : _e[color]) || "";
+    // Build base styles with all states
+    var isInteractive = selectable || dismissible;
+    var baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_f = theme.pillSizes) === null || _f === void 0 ? void 0 : _f[size]), isInteractive && 'cursor-pointer', disabled && ((_g = theme.states) === null || _g === void 0 ? void 0 : _g.disabled), className);
+    // Create data attributes for styling hooks
+    var dataAttributes = {
+        "data-variant": variant,
+        "data-color": color,
+        "data-size": size,
+        "data-state": isVisible ? "visible" : "hidden",
+        "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)
+    var renderLeftContent = function () {
+        var _a, _b;
+        if (avatar) {
+            // Apply negative margin for overlap effect (scales with badge size)
+            var 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
+                }[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
+                }[size];
+            return (React__default.createElement(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") }));
+        }
+        if (iconStart) {
+            return (React__default.createElement("span", { className: cn("flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true" }, iconStart));
+        }
+        if (withDot) {
+            if (shouldAnimate) {
+                return (React__default.createElement(motion.span, { className: cn("badge-dot rounded-full shrink-0 size-1.5", dotColorStyle), variants: dotVariants, "aria-hidden": "true" }));
+            }
+            return (React__default.createElement("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
+        var _z = props; _z.initial; _z.animate; _z.exit; _z.variants; _z.whileHover; _z.whileTap; _z.layout; _z.transition; _z.style; _z.onUpdate; var restHtmlProps = __rest(_z, ["initial", "animate", "exit", "variants", "whileHover", "whileTap", "layout", "transition", "style", "onUpdate"]);
+        // Non-animated render for Storybook or reduced-motion environments
+        return isVisible ? (React__default.createElement("span", __assign({ 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),
+            renderLeftContent(),
+            React__default.createElement("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+                    ? {
+                        maxWidth: typeof maxWidth === "number"
+                            ? "".concat(maxWidth, "px")
+                            : maxWidth,
+                    }
+                    : undefined }, children),
+            dismissible && (React__default.createElement("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_h = theme.dismissButtonSizes) === null || _h === void 0 ? void 0 : _h[size]), "aria-label": "Dismiss", disabled: disabled },
+                React__default.createElement(ForwardRef, { className: cn("badge-dismiss-icon", (_j = theme.dismissIconSizes) === null || _j === void 0 ? void 0 : _j[size]), "aria-hidden": "true" }))))) : null;
+    }
+    return (React__default.createElement(AnimatePresence, { mode: "wait" }, isVisible && (React__default.createElement(motion.span, __assign({ 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),
+        renderLeftContent(),
+        React__default.createElement("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+                ? {
+                    maxWidth: typeof maxWidth === "number"
+                        ? "".concat(maxWidth, "px")
+                        : maxWidth,
+                }
+                : undefined }, children),
+        dismissible && (React__default.createElement(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_k = theme.dismissButtonSizes) === null || _k === void 0 ? void 0 : _k[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap" },
+            React__default.createElement(ForwardRef, { className: cn("badge-dismiss-icon", (_l = theme.dismissIconSizes) === null || _l === void 0 ? void 0 : _l[size]), "aria-hidden": "true" })))))));
+}));
+Badge.displayName = "Badge";
+
+export { Badge };

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

@@ -0,0 +1,6 @@
+import { BadgeTheme } from './Badge.types';
+/**
+ * Default theme configuration for Badge component
+ * Separates visual variants from semantic colors following new convention
+ */
+export declare const badgeTheme: BadgeTheme;

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

@@ -0,0 +1,93 @@
+/**
+ * Default theme configuration for Badge component
+ * Separates visual variants from semantic colors following new convention
+ */
+var badgeTheme = {
+    // Base styles applied to all badges
+    baseStyle: 'inline-flex items-center font-medium select-none whitespace-nowrap transition-all duration-300 h-fit glass-effect',
+    // Visual style variants (appearance treatment)
+    variants: {
+        filled: 'ring-1 data-[selected=true]:text-white data-[selected=true]:ring-offset-1',
+        outline: '!bg-transparent border-1 data-[selected=true]:text-white',
+        ghost: 'ring-transparent data-[selected=true]:text-white',
+    },
+    // Semantic colors (intent-based styling with variant support)
+    colors: {
+        // Neutral - dark filled, gray outline/ghost
+        neutral: 'data-[variant=filled]:!from-[var(--color-neutral-900)] data-[variant=filled]:!via-[var(--color-neutral-700)] data-[variant=filled]:!to-[var(--color-neutral-700)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-border)] ' +
+            'data-[variant=outline]:text-[var(--color-text-primary)] data-[variant=outline]:border-[var(--color-border)] ' +
+            'data-[variant=ghost]:bg-[var(--color-neutral-100)] data-[variant=ghost]:text-[var(--color-text-primary)] data-[variant=ghost]:ring-transparent ' +
+            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-text-primary)] data-[selected=true]:ring-[var(--color-border)]/40',
+        // Primary - solid primary filled
+        primary: 'data-[variant=filled]:!from-[var(--color-primary)] data-[variant=filled]:!via-[var(--color-primary-600)] data-[variant=filled]:!to-[var(--color-primary-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-primary)] ' +
+            'data-[variant=outline]:text-[var(--color-primary)] data-[variant=outline]:border-[var(--color-primary)] ' +
+            'data-[variant=ghost]:bg-[var(--color-primary-50)] data-[variant=ghost]:text-[var(--color-primary-700)] data-[variant=ghost]:ring-transparent ' +
+            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:ring-[var(--color-primary)]/40',
+        // Success - solid success filled
+        success: 'data-[variant=filled]:!from-[var(--color-success)] data-[variant=filled]:!via-[var(--color-success-600)] data-[variant=filled]:!to-[var(--color-success-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-success)] ' +
+            'data-[variant=outline]:text-[var(--color-success)] data-[variant=outline]:border-[var(--color-success)] ' +
+            'data-[variant=ghost]:bg-[var(--color-success-50)] data-[variant=ghost]:text-[var(--color-success-700)] data-[variant=ghost]:ring-transparent ' +
+            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-success)] data-[selected=true]:ring-[var(--color-success)]/40',
+        // Warning - solid warning filled
+        warning: 'data-[variant=filled]:!from-[var(--color-warning)] data-[variant=filled]:!via-[var(--color-warning-600)] data-[variant=filled]:!to-[var(--color-warning-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-warning)] ' +
+            'data-[variant=outline]:text-[var(--color-warning)] data-[variant=outline]:border-[var(--color-warning)] ' +
+            'data-[variant=ghost]:bg-[var(--color-warning-50)] data-[variant=ghost]:text-[var(--color-warning-700)] data-[variant=ghost]:ring-transparent ' +
+            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-warning)] data-[selected=true]:ring-[var(--color-warning)]/40',
+        // Danger - solid danger filled
+        danger: 'data-[variant=filled]:!from-[var(--color-danger)] data-[variant=filled]:!via-[var(--color-danger-600)] data-[variant=filled]:!to-[var(--color-danger-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-danger)] ' +
+            'data-[variant=outline]:text-[var(--color-danger)] data-[variant=outline]:border-[var(--color-danger)] ' +
+            'data-[variant=ghost]:bg-[var(--color-danger-50)] data-[variant=ghost]:text-[var(--color-danger-600)] data-[variant=ghost]:ring-transparent ' +
+            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-danger)] data-[selected=true]:ring-[var(--color-danger)]/40',
+    },
+    // Flat size structure (no nested objects)
+    sizes: {
+        sm: 'text-xs px-2 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',
+    },
+    // Additional padding for pill shape
+    pillSizes: {
+        sm: 'px-2',
+        md: 'px-2.5',
+        lg: 'px-3',
+    },
+    // Icon sizes
+    iconSizes: {
+        sm: 'size-3',
+        md: 'size-3.5',
+        lg: 'size-4',
+    },
+    // Avatar sizes (base sizes without negative margin)
+    avatarSizes: {
+        sm: 'size-4',
+        md: 'size-4',
+        lg: 'size-5',
+    },
+    // Dismiss button container sizes
+    dismissButtonSizes: {
+        sm: 'size-3.5',
+        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
+    dotColors: {
+        neutral: 'bg-[var(--color-text-primary)]',
+        primary: 'bg-[var(--color-primary-700)]',
+        success: 'bg-[var(--color-success-700)]',
+        warning: 'bg-[var(--color-warning-700)]',
+        danger: 'bg-[var(--color-danger-600)]',
+    },
+    // State styles
+    states: {
+        disabled: 'opacity-50 cursor-not-allowed pointer-events-none',
+        hover: 'data-[selectable=true]:cursor-pointer',
+    },
+};
+
+export { badgeTheme };