@flikk/ui 1.0.0-beta.1

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
+const 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
+const 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
+const 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
+const 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)
+const 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,207 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
+import { 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Badge variant="primary" size="md" pill>New Feature</Badge>
+ * <Badge variant="success" withDot>Ready</Badge>
+ * <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;
+    // 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) {
+            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
+    const handleDismiss = useCallback((e) => {
+        e.stopPropagation();
+        setIsVisible(false);
+        // Delay the onDismiss call until after the animation
+        setTimeout(() => {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e);
+        }, animationTiming.dismissDelay);
+    }, [onDismiss]);
+    // Handle badge click (for selectable badges)
+    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]);
+    // Merge default theme with custom theme overrides
+    const theme = {
+        ...badgeTheme,
+        ...customTheme,
+        variants: {
+            ...badgeTheme.variants,
+            ...customTheme.variants,
+        },
+        variantColors: {
+            filled: {
+                ...(_a = badgeTheme.variantColors) === null || _a === void 0 ? void 0 : _a.filled,
+                ...(_b = customTheme.variantColors) === null || _b === void 0 ? void 0 : _b.filled,
+            },
+            outline: {
+                ...(_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,
+            },
+        },
+        sizes: {
+            ...badgeTheme.sizes,
+            ...customTheme.sizes,
+        },
+        pillSizes: {
+            ...badgeTheme.pillSizes,
+            ...customTheme.pillSizes,
+        },
+        iconSizes: {
+            ...badgeTheme.iconSizes,
+            ...customTheme.iconSizes,
+        },
+        avatarSizes: {
+            ...badgeTheme.avatarSizes,
+            ...customTheme.avatarSizes,
+        },
+        dismissButtonSizes: {
+            ...badgeTheme.dismissButtonSizes,
+            ...customTheme.dismissButtonSizes,
+        },
+        dismissIconSizes: {
+            ...badgeTheme.dismissIconSizes,
+            ...customTheme.dismissIconSizes,
+        },
+        dotColors: {
+            ...badgeTheme.dotColors,
+            ...customTheme.dotColors,
+        },
+        states: {
+            ...badgeTheme.states,
+            ...customTheme.states,
+        },
+    };
+    // Get styles from theme
+    const variantStyles = ((_g = theme.variants) === null || _g === void 0 ? void 0 : _g[variant]) || "";
+    const colorStyles = ((_j = (_h = theme.variantColors) === null || _h === void 0 ? void 0 : _h[variant]) === null || _j === void 0 ? void 0 : _j[color]) || "";
+    const sizeStyle = ((_k = theme.sizes) === null || _k === void 0 ? void 0 : _k[size]) || "";
+    const shapeStyle = pill
+        ? "rounded-full"
+        : "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 && ((_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,
+        "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)
+    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
+                    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 (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") }));
+        }
+        if (iconStart) {
+            return (jsx("span", { className: cn("flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
+        }
+        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("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
+                        ? {
+                            maxWidth: typeof maxWidth === "number"
+                                ? `${maxWidth}px`
+                                : maxWidth,
+                        }
+                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_p = theme.dismissButtonSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissIconSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true" }) }))] })) : null;
+    }
+    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
+                        ? {
+                            maxWidth: typeof maxWidth === "number"
+                                ? `${maxWidth}px`
+                                : maxWidth,
+                        }
+                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_r = theme.dismissButtonSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_s = theme.dismissIconSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-hidden": "true" }) }))] })) }));
+}));
+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
+ * Uses variant-first color organization for reliable dark mode and className overrides
+ */
+export declare const badgeTheme: BadgeTheme;

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

@@ -0,0 +1,107 @@
+/**
+ * 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 font-semibold select-none whitespace-nowrap transition-all duration-300 h-fit",
+    // Visual style variants (structure only, no colors)
+    variants: {
+        filled: "",
+        outline: "bg-transparent border",
+        ghost: "ring-transparent border-0",
+    },
+    // Color styles organized PER VARIANT
+    // This structure enables reliable dark: variants and className overrides
+    variantColors: {
+        // Filled variant - solid backgrounds with ring glow
+        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)]",
+        },
+        // Outline variant - transparent bg with colored border
+        outline: {
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " + "",
+            primary: "text-[var(--color-primary)] border-[var(--color-border)] " +
+                "dark:text-[var(--color-primary-400)]",
+            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)]",
+        },
+        // Ghost variant - subtle background tints
+        ghost: {
+            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
+                "dark:bg-[var(--color-neutral-900)] dark:text-[var(--color-text-primary)]",
+            primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
+                "dark:bg-[var(--color-primary-600)]/30 dark:text-[var(--color-primary-400)]",
+            success: "bg-[var(--color-success-100)] text-[var(--color-success-600)] " +
+                "dark:bg-[var(--color-success-600)]/30 dark:text-[var(--color-success-400)]",
+            warning: "bg-[var(--color-warning-100)] text-[var(--color-warning-600)] " +
+                "dark:bg-[var(--color-warning-600)]/30 dark:text-[var(--color-warning-400)]",
+            danger: "bg-[var(--color-danger-100)] text-[var(--color-danger-600)] " +
+                "dark:bg-[var(--color-danger-600)]/30 dark:text-[var(--color-danger-400)]",
+        },
+    },
+    // Flat size structure (no nested objects)
+    sizes: {
+        sm: "text-xs px-1.5 py-0.5 gap-1",
+        md: "text-sm px-2 py-0.5 gap-1",
+        lg: "text-sm px-2.5 py-1 gap-1",
+    },
+    // 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 (simple, no dark mode needed - inherits from parent)
+    dotColors: {
+        neutral: "bg-[var(--color-text-primary)]",
+        primary: "bg-[var(--color-primary-50)] dark:bg-[var(--color-primary-300)]",
+        success: "bg-[var(--color-success-50)] dark:bg-[var(--color-success-300)]",
+        warning: "bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-300)]",
+        danger: "bg-[var(--color-danger-50)] dark:bg-[var(--color-danger-300)]",
+    },
+    // State styles
+    states: {
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
+        hover: "cursor-pointer",
+    },
+};
+
+export { badgeTheme };

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

@@ -0,0 +1,174 @@
+import { ReactNode, MouseEvent } from "react";
+import { HTMLMotionProps } from "motion/react";
+export type BadgeVariant = "filled" | "outline" | "ghost";
+export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type BadgeSize = "sm" | "md" | "lg";
+/**
+ * Theme configuration for Badge component
+ */
+export interface BadgeTheme {
+    /**
+     * Base styles applied to all badge variants
+     */
+    baseStyle: string;
+    /**
+     * Styles for each badge variant (visual appearance)
+     */
+    variants: Record<BadgeVariant, string>;
+    /**
+     * Styles for each badge variant-color combination
+     * Organized as variantColors[variant][color] for reliable dark mode and className overrides
+     */
+    variantColors: Record<BadgeVariant, Record<BadgeColor, string>>;
+    /**
+     * Styles for each badge size (flat structure)
+     */
+    sizes: Record<BadgeSize, string>;
+    /**
+     * Additional padding for pill-shaped badges
+     */
+    pillSizes: Record<BadgeSize, string>;
+    /**
+     * Icon sizes for each badge size
+     */
+    iconSizes: Record<BadgeSize, string>;
+    /**
+     * Avatar sizes for each badge size
+     */
+    avatarSizes: Record<BadgeSize, string>;
+    /**
+     * Dismiss button sizes for each badge size
+     */
+    dismissButtonSizes: Record<BadgeSize, string>;
+    /**
+     * Dismiss icon sizes for each badge size
+     */
+    dismissIconSizes: Record<BadgeSize, string>;
+    /**
+     * Color styles for dot indicators
+     */
+    dotColors: Record<BadgeColor, string>;
+    /**
+     * State styles (disabled, hover, selected)
+     */
+    states: {
+        disabled: string;
+        hover: string;
+    };
+}
+/**
+ * Theme overrides for Badge component
+ */
+export interface BadgeThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<BadgeVariant, string>>;
+    variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
+    sizes?: Partial<Record<BadgeSize, string>>;
+    pillSizes?: Partial<Record<BadgeSize, string>>;
+    iconSizes?: Partial<Record<BadgeSize, string>>;
+    avatarSizes?: Partial<Record<BadgeSize, string>>;
+    dismissButtonSizes?: Partial<Record<BadgeSize, string>>;
+    dismissIconSizes?: Partial<Record<BadgeSize, string>>;
+    dotColors?: Partial<Record<BadgeColor, string>>;
+    states?: Partial<{
+        disabled: string;
+        hover: string;
+    }>;
+}
+export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "inputMode" | "autoCapitalize" | "autoCorrect" | "autoComplete"> {
+    /**
+     * The content to be displayed inside the badge
+     */
+    children: ReactNode;
+    /**
+     * The visual style variant of the badge (filled, outline, soft)
+     * @default 'filled'
+     */
+    variant?: BadgeVariant;
+    /**
+     * The semantic color of the badge (primary, success, danger, etc.)
+     * @default 'default'
+     */
+    color?: BadgeColor;
+    /**
+     * The size of the badge
+     * @default 'md'
+     */
+    size?: BadgeSize;
+    /**
+     * Whether the badge is pill-shaped (fully rounded)
+     * @default false
+     */
+    pill?: boolean;
+    /**
+     * Whether the badge has a dot indicator
+     * Note: Icon and avatar take precedence over dot
+     * @default false
+     */
+    withDot?: boolean;
+    /**
+     * Icon element at the start (before content)
+     * Note: Avatar takes precedence over icon
+     */
+    iconStart?: ReactNode;
+    /**
+     * Avatar configuration (mutually exclusive with icon)
+     * Takes precedence over icon and dot
+     */
+    avatar?: {
+        src?: string;
+        alt: string;
+        fallback?: ReactNode;
+        initialsCount?: number;
+    };
+    /**
+     * Whether the badge is dismissible (shows close button)
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when close button is clicked
+     * 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
+     */
+    disabled?: boolean;
+    /**
+     * Maximum width before truncating the label
+     * Accepts CSS width value (e.g., '100px', '10rem') or number (pixels)
+     */
+    maxWidth?: string | number;
+    /**
+     * Custom class name for the badge
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: BadgeThemeOverrides;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize, BadgeThemeOverrides } from './Badge.types';

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

@@ -0,0 +1,16 @@
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+/**
+ * Breadcrumbs component for displaying navigation hierarchy
+ *
+ * Features:
+ * - Smart collapse with ellipsis when items exceed maxItems
+ * - Customizable separators
+ * - Dropdown menu for collapsed items with keyboard navigation
+ * - shadcn-style className overrides
+ * - Full accessibility support with ARIA semantics
+ */
+declare const Breadcrumbs: {
+    ({ items, separator, maxItems, variant, className, theme: themeOverrides, showIcons, ...props }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Breadcrumbs };