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

package/dist/components/charts/utils/animation-utils.js

@@ -144,21 +144,6 @@ const CROSSHAIR_FOLLOW_TRANSITION = {
     duration: 0.2,
     ease: "easeOut",
 };
-/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
-const TOOLTIP_ENTER_TRANSITION = {
-    type: "spring",
-    stiffness: 400,
-    damping: 30,
-    opacity: { duration: 0.15 },
-    scale: { duration: 0.15 },
-};
-/** Tooltip pop-out. */
-const TOOLTIP_EXIT_TRANSITION = {
-    type: "spring",
-    stiffness: 300,
-    damping: 25,
-    duration: 0.15,
-};
 /** Circular-chart segment hover dim/lift (opacity fade + scale pop). */
 const SEGMENT_HOVER_TRANSITION = {
     scale: { duration: 0.2 },
@@ -182,9 +167,6 @@ const BAR_GROUP_STAGGER = 0.05;
 const BAR_STACK_CATEGORY_DELAY = 0.25;
 /** Shared BarRenderer stacked-mode per-segment stagger. */
 const BAR_STACK_SEGMENT_STAGGER = 0.12;
-/** ScatterPlot per-point stagger + grow duration. */
-const SCATTER_POINT_STAGGER = 0.01;
-const SCATTER_POINT_DURATION = 0.3;
 /** Marker pop-in spring (line/area dots). */
 const DOT_SPRING = { type: "spring", stiffness: 260, damping: 20 };
 /** Bar grow spring (grouped bars / stacked columns). */
@@ -258,5 +240,23 @@ function stackedSegmentTransition(delay, hasAnimated) {
         },
     };
 }
+/* ── Heatmap ───────────────────────────────────────────────────────────────
+ * Cells fade in along the (row + col) diagonal. Deterministic on purpose: the
+ * delay used to come from Math.random(), which mismatched between the server
+ * and client renders and made every snapshot non-reproducible. */
+/** Heatmap cell fade-in duration (seconds). */
+const HEATMAP_CELL_FADE_DURATION = 0.35;
+/** Per-diagonal stagger for the heatmap cell entrance (seconds). */
+const HEATMAP_CELL_STAGGER = 0.02;
+/** Cap on the entrance stagger, so a large grid still settles quickly (seconds). */
+const HEATMAP_CELL_MAX_DELAY = 0.3;
+/** Deterministic entrance delay for the cell at (row, col). */
+function heatmapCellDelay(row, col) {
+    return Math.min((row + col) * HEATMAP_CELL_STAGGER, HEATMAP_CELL_MAX_DELAY);
+}
+/** Cell hover scale-up (`whileHover`). */
+const HEATMAP_CELL_HOVER_TRANSITION = { duration: 0.15, ease: "easeOut" };
+/** Cell press scale-down (`whileTap`). */
+const HEATMAP_CELL_TAP_TRANSITION = { duration: 0.1, ease: "easeOut" };
 
-export { BAR_GROUP_STAGGER, BAR_SPRING, BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, CARTESIAN_ENTRANCE_DURATION, CIRCULAR_CHART_ANIMATIONS, CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION, DOT_SPRING, HALO_FADE_TRANSITION, LINE_DOT_STAGGER, RING_FADE_TRANSITION, RISE_FROM_BASELINE, SCALE_FROM_CENTER, SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER, SEGMENT_HOVER_TRANSITION, SPRING_PRESETS, TOOLTIP_ENTER_TRANSITION, TOOLTIP_EXIT_TRANSITION, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, riseTransition, stackedSegmentTransition };
+export { BAR_GROUP_STAGGER, BAR_SPRING, BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, CARTESIAN_ENTRANCE_DURATION, CIRCULAR_CHART_ANIMATIONS, CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION, DOT_SPRING, HALO_FADE_TRANSITION, HEATMAP_CELL_FADE_DURATION, HEATMAP_CELL_HOVER_TRANSITION, HEATMAP_CELL_MAX_DELAY, HEATMAP_CELL_STAGGER, HEATMAP_CELL_TAP_TRANSITION, LINE_DOT_STAGGER, RING_FADE_TRANSITION, RISE_FROM_BASELINE, SCALE_FROM_CENTER, SEGMENT_HOVER_TRANSITION, SPRING_PRESETS, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, heatmapCellDelay, riseTransition, stackedSegmentTransition };

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

@@ -8,7 +8,7 @@ const accordionTheme = {
     // Item styles for stacked variant (shared borders, no spacing)
     itemStyleStacked: "bg-[var(--color-surface)] border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)
-    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] text-sm",
+    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-[var(--motion-duration-base)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] text-sm",
     // Body styles (shared across variants)
     bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden text-sm",
     // Body inner wrapper styles

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

@@ -1,9 +1,16 @@
 import { Variants } from "motion/react";
 /**
- * Alert entrance/exit animation variants
- * Entrance: slide down from -12px + fade in
- * Exit: fade out + collapse height
- * Uses library spring presets for a premium feel
+ * Alert dismiss animation variants.
+ *
+ * `visible` is the RESTING state, not an entrance — Alert mounts with
+ * `initial={false}` so it paints straight into `visible` and never plays these
+ * on mount. Only the `visible -> hidden` direction runs, when the alert is
+ * dismissed: fade + slide out while collapsing height/padding/margin so
+ * surrounding content closes the gap smoothly.
+ *
+ * `hidden` therefore keeps its full collapse geometry (that IS the dismiss),
+ * and `visible` keeps `y`/`opacity` so the collapse has somewhere to travel
+ * from. Uses library spring presets for a premium feel.
  */
 export declare const alertVariants: Variants;
 /**

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

@@ -4,10 +4,17 @@ import '../../../theme/SurfaceContext.js';
 import { springs } from '../../../theme/animations.js';
 
 /**
- * Alert entrance/exit animation variants
- * Entrance: slide down from -12px + fade in
- * Exit: fade out + collapse height
- * Uses library spring presets for a premium feel
+ * Alert dismiss animation variants.
+ *
+ * `visible` is the RESTING state, not an entrance — Alert mounts with
+ * `initial={false}` so it paints straight into `visible` and never plays these
+ * on mount. Only the `visible -> hidden` direction runs, when the alert is
+ * dismissed: fade + slide out while collapsing height/padding/margin so
+ * surrounding content closes the gap smoothly.
+ *
+ * `hidden` therefore keeps its full collapse geometry (that IS the dismiss),
+ * and `visible` keeps `y`/`opacity` so the collapse has somewhere to travel
+ * from. Uses library spring presets for a premium feel.
  */
 const alertVariants = {
     hidden: {

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

@@ -36,7 +36,15 @@ const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, d
             return null;
         }
         if (React__default.isValidElement(icon)) {
-            return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: icon }));
+            // A custom icon gets the SAME size + semantic color the default icon
+            // gets, applied as defaults so a consumer className still wins (§4).
+            // Without this the element inherited neither: Phosphor icons default to
+            // `1em`, so a custom icon rendered at the root's `text-sm` (14px) inside
+            // this 24px box, in the ambient text color rather than the intent color.
+            const customIcon = icon;
+            return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: React__default.cloneElement(customIcon, {
+                    className: cn("w-6 h-6", iconColor, customIcon.props.className),
+                }) }));
         }
         const IconComponent = defaultIcons[color];
         return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
@@ -47,7 +55,13 @@ const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, d
                         : title), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })
                         : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(X, { className: "size-4", weight: "bold" }) }))] }));
-    const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, initial: "hidden", animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
+    const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, 
+        // No mount animation. An Alert is page content, not a transient
+        // notification (that's Toast) — it is usually present at first paint, so
+        // animating `hidden -> visible` on mount meant every page load played an
+        // expand. `initial={false}` starts at the `visible` variant and animates
+        // only on a later state change, which is what the collapse below needs.
+        initial: false, animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
             if (definition === "hidden" && isDismissing) {
                 onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
             }

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

@@ -6,7 +6,7 @@ import { semanticTextColors } from '../../../utils/colorUtils.js';
  */
 const alertTheme = {
     // Base styles applied to all alerts
-    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
+    baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-surface)]/80",
     // Icon color styles per color
     iconColors: semanticTextColors,
     // State styles

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

@@ -28,9 +28,11 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"
     dismissible?: boolean;
     /**
      * Custom icon for the alert
-     * - Provide custom icon: overrides the default variant icon
+     * - Provide custom icon: overrides the default color icon. It inherits the
+     *   default icon's size and semantic color; pass a `className` on the element
+     *   to override either (e.g. `icon={<Fire className="size-5 text-purple-500" />}`).
      * - Set to null: hides icon completely
-     * - Leave undefined: shows default variant icon
+     * - Leave undefined: shows default color icon
      */
     icon?: ReactNode | null;
     /** Whether to show the default icon for the variant */

package/dist/components/core/AlertDialog/AlertDialog.js

@@ -15,7 +15,7 @@ import { useModalContext } from '../Modal/ModalContext.js';
  */
 function AlertDialogSubtitle({ children }) {
     const { subtitleId } = useModalContext();
-    return (jsx("div", { id: subtitleId, className: "text-[var(--color-text-secondary)] text-base", children: children }));
+    return (jsx("div", { id: subtitleId, className: "text-[var(--color-text-secondary)] text-sm", children: children }));
 }
 const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -24,7 +24,7 @@ const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) =>
     const triggerElement = isValidElement(trigger)
         ? cloneElement(trigger, { onClick: handleOpen })
         : null;
-    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx(AlertDialogSubtitle, { children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
+    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-[var(--modal-radius)] p-3 mb-[var(--modal-py)] w-fit border border-[var(--color-border-secondary)]", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx(AlertDialogSubtitle, { children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pt-6 pb-[var(--modal-py)]", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";
 

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

@@ -5,7 +5,7 @@ const avatarTheme = {
     // 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-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    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

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,7 +1,8 @@
 "use client";
-import { PRESS_TRANSITION, HOVER_TRANSITION } from '../shared/interaction.animations.js';
-
-// 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,
@@ -10,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
@@ -44,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: HOVER_TRANSITION,
-    },
-    tap: {
-        scale: 0.95,
-        transition: PRESS_TRANSITION,
-    },
-};
-// 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 { X } from '@phosphor-icons/react';
+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 = () => {
@@ -146,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(X, { 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(X, { className: cn("badge-dismiss-icon", (_q = theme.dismissSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true", weight: "bold" }) }))] })) }));
+    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

@@ -8,7 +8,7 @@ const badgeTheme = {
     // 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-300 h-fit w-fit tracking-tight font-medium border",
+    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
@@ -75,6 +75,13 @@ const badgeTheme = {
         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: {
@@ -91,12 +98,6 @@ 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: {
         mono: "bg-current",
@@ -105,11 +106,6 @@ const badgeTheme = {
         warning: "bg-current",
         danger: "bg-current",
     },
-    // 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

@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent } from "react";
+import React, { ReactNode } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
 import type { MeshPaletteName } from "../../effects/MeshGradient";
 export type BadgeVariant = "filled" | "outline" | "soft";
@@ -25,6 +25,10 @@ export interface BadgeTheme {
      * Styles for each badge size (flat structure)
      */
     sizes: Record<BadgeSize, string>;
+    /**
+     * Corner radius for each badge size (ignored when `pill` is set)
+     */
+    radiusSizes: Record<BadgeSize, string>;
     /**
      * Additional padding for pill-shaped badges
      */
@@ -37,21 +41,10 @@ export interface BadgeTheme {
      * Avatar sizes for each badge size
      */
     avatarSizes: Record<BadgeSize, string>;
-    /**
-     * Dismiss icon sizes (button sizes itself from icon + padding)
-     */
-    dismissSizes: 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
@@ -61,15 +54,11 @@ export interface BadgeThemeOverrides {
     variants?: Partial<Record<BadgeVariant, string>>;
     variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
+    radiusSizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
-    dismissSizes?: Partial<Record<BadgeSize, string>>;
     dotColors?: Partial<Record<BadgeColor, string>>;
-    states?: Partial<{
-        disabled: string;
-        hover: string;
-    }>;
 }
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "inputMode"> {
     /**
@@ -77,8 +66,18 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
      */
     children: ReactNode;
     /**
-     * The visual style variant of the badge (filled, outline, soft)
-     * @default 'filled'
+     * The visual style variant of the badge.
+     *
+     * `soft` is the default because a badge is a STATUS/METADATA label, not an
+     * action — a tinted chip is the idiom, and a full-strength fill overstates a
+     * label sitting next to real controls. Pick a non-default deliberately:
+     * - `filled`  — on imagery/gradients, or a genuine emphasis flag ("NEW")
+     * - `outline` — quiet keyword tags; in practice only reads well at `color="mono"`
+     *
+     * (Button defaults to `filled` — an action SHOULD be the loudest thing. Same
+     * vocabulary, opposite default, on purpose. See CLAUDE.md §8.)
+     *
+     * @default 'soft'
      */
     variant?: BadgeVariant;
     /**
@@ -127,21 +126,6 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
         /** Raw gradient color override; wins over `gradientVariant`. */
         gradientColors?: string[];
     };
-    /**
-     * 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 disabled
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * Maximum width before truncating the label
      * Accepts CSS width value (e.g., '100px', '10rem') or number (pixels)