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

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

@@ -1,19 +1,75 @@
 const avatarTheme = {
-    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",
-        sm: "size-[var(--avatar-size-sm)] text-xs",
-        md: "size-[var(--avatar-size-md)] text-sm",
-        lg: "size-[var(--avatar-size-lg)] text-sm",
-        xl: "size-[var(--avatar-size-xl)] text-sm",
+    // `isolate` is load-bearing, not decoration: the circle's contents raise
+    // themselves above the gradient with `z-10`, and a `relative` box with
+    // `z-index: auto` does NOT create a stacking context — so that z-10 escaped
+    // into the WRAPPER's context and painted over the sibling status dot, which
+    // sits at `z-index: auto`. Isolating keeps the circle's internal layering
+    // internal, so the dot and badge stack by DOM order as intended.
+    baseStyle: "relative isolate 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-[var(--motion-duration-base)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    // One geometry class for EVERY size. The px value arrives through the
+    // `--avatar-size` custom property, which Avatar sets inline: a token maps to
+    // its `--avatar-size-*` var, a number to `${n}px`. It has to travel as a
+    // variable rather than a generated `size-[30px]` class because per-value
+    // classes can't be interpolated — Tailwind only ships what it finds in this
+    // library's source, so an interpolated class would resolve to nothing.
+    sizeStyle: "size-[var(--avatar-size)]",
+    // The circle's own glyph (initials) — distinct from `textSizes`, which sizes
+    // the adjacent title/subtitle block.
+    glyphSizes: {
+        xs: "text-xs",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+        xl: "text-sm",
     },
     statuses: {
         online: "bg-[var(--color-success)]",
-        offline: "bg-[var(--color-text-muted)]",
+        // NOT `--color-text-muted`: the text tokens are alpha derivations of
+        // `--color-text-primary` (57% opaque in light, 50% in dark), so using one
+        // as a FILL let the avatar photo show straight through the dot.
+        //
+        // A ramp rung rather than `--color-mono` (the §3 filled-neutral role) is a
+        // deliberate, measured exception — see CLAUDE.md §8. `--color-mono` is
+        // mono-900/200, tuned to carry `-contrast` TEXT; a status dot carries none,
+        // and at that weight the least-active state out-shouts the active ones.
+        // mono-500 is the only rung clearing WCAG 1.4.11's 3:1 against the dot's
+        // adjacent colour (its `--color-background` ring) in BOTH modes — 4.54
+        // light, 3.78 dark — which also puts it in the same band as its siblings
+        // (success 3.52, danger 4.57). One value, no `dark:` variant needed.
+        offline: "bg-[var(--color-mono-500)]",
         busy: "bg-[var(--color-danger)]",
         away: "bg-[var(--color-warning)]",
         none: "",
     },
+    // Placement, shared by every size. The avatar is a circle
+    // (`--avatar-radius: 50%`), so anchoring the dot to the bounding-box corner
+    // strands it outside the arc — the corner sits ~41% further from the centre
+    // than the edge does. The 45° point of a circle is `r(1 − 1/√2)` ≈ 14.6% of
+    // the diameter in from each edge; the half-translates then centre the dot on
+    // it, so it reads as attached at EVERY size, including arbitrary numeric ones
+    // (a px inset per rung can only ever be right for that rung's exact diameter).
+    statusPositionStyle: "left-[14.6%] bottom-[14.6%] -translate-x-1/2 translate-y-1/2",
+    // Dot AND ring ramp together, because what the eye reads is the badge's total
+    // footprint — and the ring used to be a flat 2px at every rung, making it
+    // proportionally 3.3× heavier on xs than on xl. Dot tracks ~20% of the
+    // diameter, ring ~5%, so the footprint stays near 30% across the ladder
+    // (was 42%→25%). xs is the one deliberate outlier at 33%: 20% of 24px is
+    // under 5px, which stops reading as a status colour at all, so the dot holds
+    // a 6px legibility floor there rather than scaling honestly.
+    statusSizes: {
+        xs: "size-1.5 ring-1",
+        sm: "size-1.5 ring-[1.5px]",
+        md: "size-2 ring-2",
+        lg: "size-2.5 ring-2",
+        xl: "size-3 ring-[3px]",
+    },
+    verifiedSizes: {
+        xs: "size-2.5 -right-0.5 -bottom-0.5",
+        sm: "size-3.5 -right-0.5 -bottom-0.5",
+        md: "size-4 -right-0.5 -bottom-0.5",
+        lg: "size-5 -right-0.5 -bottom-0.5",
+        xl: "size-5 -right-0.5 -bottom-0.5",
+    },
     titleStyle: "font-medium leading-tight text-[var(--color-text-primary)] truncate",
     subtitleStyle: "leading-tight text-[var(--color-text-muted)] truncate",
     textSizes: {

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

@@ -1,6 +1,13 @@
 import { ReactNode } from "react";
 import type { MeshPaletteName } from "../../effects/MeshGradient";
-export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | number;
+/** The named rungs of the avatar size ladder (px values live in `theme.css`). */
+export type AvatarSizeToken = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * A named rung, or an exact pixel size. A number sizes the circle precisely
+ * (`size={30}` → 30px) while its decorations — glyph, status dot, verified
+ * badge, text gap — snap to the nearest rung.
+ */
+export type AvatarSize = AvatarSizeToken | number;
 export type AvatarStatus = "online" | "offline" | "busy" | "away" | "none";
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -14,7 +21,11 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     name?: string | null;
     /**
-     * The size of the avatar
+     * The size of the avatar — a named rung (`"md"`) or an exact pixel size
+     * (`30`). Prefer this over a `className="size-[30px]"` override: the shipped
+     * stylesheet only contains the classes used by this library's own source, so
+     * an arbitrary size utility resolves to nothing for consumers who don't run
+     * Tailwind themselves.
      * @default "md"
      */
     size?: AvatarSize;

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

@@ -1,2 +1,2 @@
 export { Avatar } from './Avatar';
-export type { AvatarProps, AvatarSize, AvatarStatus, } from './Avatar.types';
+export type { AvatarProps, AvatarSize, AvatarSizeToken, AvatarStatus, } from './Avatar.types';

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

@@ -7,7 +7,7 @@ import { cn } from '../../../utils/cn.js';
 import { avatarGroupTheme } from './AvatarGroup.theme.js';
 import { getAnimationState, getAvatarGroupVariants } from './AvatarGroup.animations.js';
 
-const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "md", spacing = "normal", direction = "row", overflowIndicator, className, ariaLabel = "Group of users", shouldAnimate = true, ...props }, ref) => {
+const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "md", direction = "row", overflowIndicator, className, ariaLabel = "Group of users", shouldAnimate = true, ...props }, ref) => {
     const [hoveredIndex, setHoveredIndex] = useState(null);
     const shouldReduceMotion = useReducedMotion();
     const enableAnimations = shouldAnimate && !shouldReduceMotion;
@@ -15,7 +15,6 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
     const memoizedData = useMemo(() => {
         const visibleAvatars = avatars.slice(0, max);
         const overflowCount = avatars.length > max ? avatars.length - max : 0;
-        const spacingClass = avatarGroupTheme.spacingStyles[spacing];
         const directionClass = direction === "row-reverse" ? "flex-row-reverse" : "flex-row";
         const totalPeople = avatars.length;
         const groupDescription = avatars
@@ -24,14 +23,13 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
         return {
             visibleAvatars,
             overflowCount,
-            spacingClass,
             directionClass,
             totalPeople,
             groupDescription,
         };
-    }, [avatars, max, spacing, direction]);
-    const { visibleAvatars, overflowCount, spacingClass, directionClass, totalPeople, groupDescription, } = memoizedData;
-    return (jsxs("div", { ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className), role: "group", "aria-label": ariaLabel, "aria-description": `Contains ${totalPeople} users: ${groupDescription}`, "data-size": size, "data-spacing": spacing, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: () => enableAnimations && setHoveredIndex(null), ...props, children: [visibleAvatars.map((avatarProps, index) => {
+    }, [avatars, max, direction]);
+    const { visibleAvatars, overflowCount, directionClass, totalPeople, groupDescription, } = memoizedData;
+    return (jsxs("div", { ref: ref, className: cn(avatarGroupTheme.baseStyle, directionClass, className), role: "group", "aria-label": ariaLabel, "aria-description": `Contains ${totalPeople} users: ${groupDescription}`, "data-size": size, "data-direction": direction, "data-total": totalPeople, "data-visible": visibleAvatars.length, "data-overflow": overflowCount > 0 ? "true" : "false", onMouseLeave: () => enableAnimations && setHoveredIndex(null), ...props, children: [visibleAvatars.map((avatarProps, index) => {
                 // Create contextual label for individual avatars in a group
                 const position = index + 1;
                 const contextLabel = avatarProps.contextualLabel || ` (${position} of ${totalPeople})`;
@@ -50,10 +48,10 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
                     // inflating the row and dropping the self-centered overflow chip.
                     "flex", 
                     // First avatar doesn't need negative margin
-                    index > 0 ? spacingClass : "z-10"), "data-position": position, "data-index": index, ...motionProps, children: jsx(Avatar, { size: size, ...avatarProps, contextualLabel: contextLabel, 
+                    index > 0 ? avatarGroupTheme.spacingStyle : "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("flex", spacingClass), "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("flex", avatarGroupTheme.spacingStyle), "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.d.ts

@@ -1,10 +1,9 @@
-import { AvatarGroupSpacing } from "./AvatarGroup.types";
 /**
  * Internal theme structure for the AvatarGroup component
  */
 interface AvatarGroupTheme {
     baseStyle: string;
-    spacingStyles: Record<AvatarGroupSpacing, string>;
+    spacingStyle: string;
     overflowAvatarStyle: string;
 }
 /**

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

@@ -6,12 +6,8 @@ const avatarGroupTheme = {
     baseStyle: "flex items-center",
     // NOTE: items-center only works because Avatar's wrapper no longer leaves a
     // baseline descender below the circle (Avatar.tsx wrapper is inline-flex).
-    // Spacing options - separated from hover effects
-    spacingStyles: {
-        tight: "-ml-5 z-10",
-        normal: "-ml-3 z-10",
-        loose: "-ml-2 z-10",
-    },
+    // Overlap between stacked avatars — override per call site with className.
+    spacingStyle: "-ml-3 z-10",
     // Overflow avatar styles
     overflowAvatarStyle: "bg-[var(--color-surface)]/60 backdrop-blur-sm text-[var(--color-text-secondary)] font-bold tracking-tight text-[10px] flex items-center justify-center size-6",
 };

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

@@ -1,6 +1,5 @@
 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> {
     /**
@@ -17,11 +16,6 @@ export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
      * @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"

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

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

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

@@ -1,8 +1,3 @@
 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

@@ -1,5 +1,8 @@
 "use client";
-// Main badge variants with optimized transitions
+// Badge is a static label — it does not animate in or out. This variant set
+// exists so the root `motion.span` can PROPAGATE `initial`/`animate` down to the
+// dot (motion cascades variant names to motion children). Removing it would stop
+// the dot animating. Keep the values inert.
 const badgeVariants = {
     initial: {
         opacity: 1,
@@ -8,23 +11,6 @@ const badgeVariants = {
     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
@@ -42,69 +28,6 @@ const dotVariants = {
             damping: 30,
         },
     },
-    exit: {
-        opacity: 0,
-        scale: 0,
-        transition: {
-            duration: 0.15,
-            ease: "easeIn",
-        },
-    },
-};
-// Dismiss button variants - optimized for performance
-const dismissButtonVariants = {
-    initial: {
-        opacity: 0.75,
-    },
-    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 };
+export { badgeVariants, dotVariants };

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

@@ -1,14 +1,17 @@
 import React from "react";
 import { BadgeProps } from "./Badge.types";
 /**
- * Badge component for displaying status, labels, or counters.
+ * Badge — a non-interactive status/metadata label.
+ *
+ * 🔴 Badge is deliberately a PURE LABEL: no dismiss, no disabled, no blessed
+ * click target. For a removable chip use `Tag`; for a selectable filter chip use
+ * `Pill`; for anything that performs an action use `Button`. See CLAUDE.md §8b.
  *
  * @component
  * @example
  * ```tsx
- * <Badge variant="primary" size="md" pill>New Feature</Badge>
- * <Badge variant="success" withDot>Ready</Badge>
- * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
+ * <Badge color="primary" size="md" pill>New Feature</Badge>
+ * <Badge color="success" withDot>Ready</Badge>
  * ```
  */
 export declare const Badge: React.NamedExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,55 +1,37 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useCallback } from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
-import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
+import { badgeVariants, dotVariants } from './Badge.animations.js';
 import { badgeTheme } from './Badge.theme.js';
 
 /**
- * Badge component for displaying status, labels, or counters.
+ * Badge — a non-interactive status/metadata label.
+ *
+ * 🔴 Badge is deliberately a PURE LABEL: no dismiss, no disabled, no blessed
+ * click target. For a removable chip use `Tag`; for a selectable filter chip use
+ * `Pill`; for anything that performs an action use `Button`. See CLAUDE.md §8b.
  *
  * @component
  * @example
  * ```tsx
- * <Badge variant="primary" size="md" pill>New Feature</Badge>
- * <Badge variant="success" withDot>Ready</Badge>
- * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
+ * <Badge color="primary" size="md" pill>New Feature</Badge>
+ * <Badge color="success" withDot>Ready</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, 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 Badge = React__default.memo(React__default.forwardRef(({ children, variant = "soft", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, maxWidth, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     // useReducedMotion is SSR-safe (returns null on server, actual value after hydration)
     const prefersReducedMotion = useReducedMotion();
     const shouldAnimate = !prefersReducedMotion;
     // Development-only warnings
     if (process.env.NODE_ENV !== "production") {
-        if (dismissible && !onDismiss) {
-            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.");
         }
     }
-    // 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
-    const handleClick = useCallback((e) => {
-        if (disabled)
-            return;
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }, [onClick, disabled]);
     // Merge default theme with custom theme overrides
     const theme = {
         ...badgeTheme,
@@ -76,6 +58,10 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.sizes,
             ...customTheme.sizes,
         },
+        radiusSizes: {
+            ...badgeTheme.radiusSizes,
+            ...customTheme.radiusSizes,
+        },
         pillSizes: {
             ...badgeTheme.pillSizes,
             ...customTheme.pillSizes,
@@ -88,18 +74,10 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.avatarSizes,
             ...customTheme.avatarSizes,
         },
-        dismissSizes: {
-            ...badgeTheme.dismissSizes,
-            ...customTheme.dismissSizes,
-        },
         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]) || "";
@@ -107,22 +85,16 @@ 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"
-        : "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 = 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);
+        : ((_l = theme.radiusSizes) === null || _l === void 0 ? void 0 : _l[size]) || "";
+    const dotColorStyle = ((_m = theme.dotColors) === null || _m === void 0 ? void 0 : _m[color]) || "";
+    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_o = theme.pillSizes) === null || _o === void 0 ? void 0 : _o[size]), 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-disabled": disabled ? "true" : "false",
-        "data-interactive": isInteractive ? "true" : "false",
     };
     // Render left content (priority: avatar → iconStart → dot)
     const renderLeftContent = () => {
@@ -131,7 +103,12 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden [&_div]:!size-full", (_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], pill ? "rounded-full -ml-2" : "rounded-full -ml-0"), children: jsx(Avatar, { src: avatar.src, name: avatar.name, gradient: avatar.gradient, gradientVariant: avatar.gradientVariant, gradientColors: avatar.gradientColors, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: cn("!size-full border-0", pill ? "rounded-full" : "rounded-md ring-0") }) }));
         }
         if (iconStart) {
-            return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0 -ml-1", (_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", 
+                // Optical tuck into the cap curve — pill only (it has the extra
+                // pillSizes padding to absorb it). On a regular badge the base
+                // px-1 padding is 4px, so -ml-1 left the icon ~1px from the
+                // border. Mirrors the avatar path's pill/non-pill conditional.
+                pill ? "-ml-1" : "-ml-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
         }
         if (withDot) {
             if (shouldAnimate) {
@@ -141,25 +118,16 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         }
         return null;
     };
+    const content = (jsxs(Fragment, { children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+                    ? {
+                        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+                    }
+                    : undefined, children: children })] }));
     if (!shouldAnimate) {
         // Spread props directly — Badge only receives HTMLSpanElement attributes
-        const restHtmlProps = props;
-        // Non-animated render for reduced-motion environments
-        return isVisible ? (jsxs("span", { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, ...dataAttributes, ...restHtmlProps, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
-                        ? {
-                            maxWidth: typeof maxWidth === "number"
-                                ? `${maxWidth}px`
-                                : maxWidth,
-                        }
-                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -mr-0.5 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_p = theme.dismissSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-hidden": "true" }) }))] })) : null;
+        return (jsx("span", { ref: ref, className: baseStyles, ...dataAttributes, ...props, children: content }));
     }
-    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: "badge-dismiss-btn -mr-0.5 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true", strokeWidth: 2 }) }))] })) }));
+    return (jsx(motion.span, { ref: ref, className: baseStyles, variants: badgeVariants, initial: "initial", animate: "animate", ...dataAttributes, ...props, children: content }));
 }));
 Badge.displayName = "Badge";
 

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

@@ -3,8 +3,12 @@
  * 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 w-fit tracking-tight font-medium border",
+    // Base styles applied to all badges.
+    // No `leading-*` here: `sizes` applies `text-xs` AFTER this string, and tailwind-merge
+    // treats font-size as owning line-height, so any leading class here is silently dropped.
+    // The badge therefore uses the `text-xs` ramp line-height (16px) → 22px tall.
+    // To change it, put the leading class in `sizes`, after `text-xs`.
+    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-[var(--motion-duration-slow)] h-fit w-fit tracking-tight font-medium border",
     // Visual style variants (structure only, no colors)
     // All variants keep the 1px `border` from baseStyle so every variant is the
     // SAME height (variant must never change size). `filled` and `soft` make that
@@ -22,8 +26,8 @@ const badgeTheme = {
     variantColors: {
         // Filled variant - solid backgrounds, no visible border
         filled: {
-            neutral: "bg-[var(--color-neutral-900)] text-white " +
-                "dark:bg-[var(--color-neutral-700)]",
+            mono: "bg-[var(--color-mono-900)] text-white " +
+                "dark:bg-[var(--color-mono-700)]",
             // Background drives from the themed base var (mode-aware) so the
             // auto-derived -contrast text always matches. Do NOT pin a fixed step
             // (e.g. dark:bg-primary-600) — that decouples the fill from -contrast and
@@ -39,7 +43,7 @@ const badgeTheme = {
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " + "",
+            mono: "text-[var(--color-text-primary)] border-[var(--color-border-secondary)] " + "",
             primary: "text-[var(--color-primary)] border-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-400)] dark:border-[var(--color-primary-400)]",
             success: "text-[var(--color-success)] border-[var(--color-success-600)] " +
@@ -52,8 +56,8 @@ const badgeTheme = {
         // Soft variant - subtle background tints, NO visible border (the transparent
         // 1px border from `variants.soft` only reserves height; the fill shows through it).
         soft: {
-            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] " +
-                "dark:bg-[var(--color-neutral-900)]",
+            mono: "bg-[var(--color-mono-100)] text-[var(--color-text-primary)] " +
+                "dark:bg-[var(--color-mono-900)]",
             primary: "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] " +
                 "dark:bg-[var(--color-primary-400)]/20 dark:text-[var(--color-primary-300)]",
             success: "bg-[var(--color-success-100)]/70 text-[var(--color-success-700)] " +
@@ -64,16 +68,25 @@ const badgeTheme = {
                 "dark:bg-[var(--color-danger-400)]/20 dark:text-[var(--color-danger-400)]",
         },
     },
-    // Flat size structure (no nested objects)
+    // Flat size structure (no nested objects).
+    // Paddings are tokenised (--badge-px-*/--badge-py-*) so a theme can grow the
+    // chip tier — defaults are px-1/px-1.5 + py-0/py-0.5. See theme.css.
     sizes: {
-        sm: "text-xs px-1 py-0.25 gap-1",
-        md: "text-xs px-1.5 py-0.25 gap-1",
+        sm: "text-xs px-[var(--badge-px-sm)] py-[var(--badge-py-sm)] gap-1",
+        md: "text-xs px-[var(--badge-px-md)] py-[var(--badge-py-md)] gap-1",
+    },
+    // Corner radius per size. NOT one shared value: the curve starts `radius` in
+    // from the edge while text starts `px + border` in, so the tighter box is the
+    // one whose glyphs land inside the curve. See theme.css for the full note.
+    radiusSizes: {
+        sm: "rounded-[var(--badge-radius-sm)]",
+        md: "rounded-[var(--badge-radius-md)]",
     },
     // Additional padding for pill shape — must clear the rounded-full cap radius
     // (≈ height/2), otherwise content sits inside the curve and hugs the edge.
     pillSizes: {
-        sm: "px-2",
-        md: "px-2.5",
+        sm: "px-[var(--badge-pill-px-sm)]",
+        md: "px-[var(--badge-pill-px-md)]",
     },
     // Icon sizes — applies to wrapper span; [&>svg] selector ensures SVG scales to fit
     iconSizes: {
@@ -85,25 +98,14 @@ const badgeTheme = {
         sm: "size-4",
         md: "size-5",
     },
-    // Dismiss icon sizes — match the text-xs cap (both badge sizes use text-xs) so
-    // the dismiss button never grows taller than the text and stretches the badge.
-    dismissSizes: {
-        sm: "size-3",
-        md: "size-3",
-    },
     // Dot inherits text color via currentColor — works across all variants/colors
     dotColors: {
-        neutral: "bg-current",
+        mono: "bg-current",
         primary: "bg-current",
         success: "bg-current",
         warning: "bg-current",
         danger: "bg-current",
     },
-    // State styles
-    states: {
-        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
-        hover: "cursor-pointer",
-    },
 };
 
 export { badgeTheme };