@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

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

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
+import React__default, { useState, useMemo, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
+import { UserIcon } from '@heroicons/react/16/solid';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
@@ -31,16 +32,11 @@ const getShouldAnimate = () => {
  * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
  * ```
  */
-const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, selectable = false, selected = false, onSelect, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, darkMode = false, ...props }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, darkMode = false, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     // State management
     const [isVisible, setIsVisible] = useState(true);
-    const [isSelected, setIsSelected] = useState(selected);
     const shouldAnimate = useMemo(getShouldAnimate, []);
-    // Sync internal state with controlled prop
-    useEffect(() => {
-        setIsSelected(selected);
-    }, [selected]);
     // Development-only warnings
     if (process.env.NODE_ENV !== "production") {
         if (dismissible && !onDismiss) {
@@ -49,9 +45,6 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         if (avatar && iconStart) {
             console.warn("[Badge]: Both avatar and iconStart provided. Avatar takes precedence.");
         }
-        if (selectable && !onSelect && selected === undefined) {
-            console.warn("[Badge]: selectable is true but no onSelect callback or selected prop provided. Component will work in uncontrolled mode.");
-        }
     }
     // Handle dismiss button click
     const handleDismiss = useCallback((e) => {
@@ -62,17 +55,12 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(e);
         }, animationTiming.dismissDelay);
     }, [onDismiss]);
-    // Handle badge click (for selectable badges)
+    // Handle badge click
     const handleClick = useCallback((e) => {
         if (disabled)
             return;
-        if (selectable) {
-            const newSelected = !isSelected;
-            setIsSelected(newSelected);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelected);
-        }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }, [selectable, isSelected, onSelect, onClick, disabled]);
+    }, [onClick, disabled]);
     // Merge default theme with custom theme overrides
     const theme = {
         ...badgeTheme,
@@ -90,9 +78,9 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                 ...(_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,
+            soft: {
+                ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.soft,
+                ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.soft,
             },
         },
         sizes: {
@@ -103,10 +91,6 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.pillSizes,
             ...customTheme.pillSizes,
         },
-        radiusSizes: {
-            ...badgeTheme.radiusSizes,
-            ...customTheme.radiusSizes,
-        },
         iconSizes: {
             ...badgeTheme.iconSizes,
             ...customTheme.iconSizes,
@@ -115,13 +99,9 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.avatarSizes,
             ...customTheme.avatarSizes,
         },
-        dismissButtonSizes: {
-            ...badgeTheme.dismissButtonSizes,
-            ...customTheme.dismissButtonSizes,
-        },
-        dismissIconSizes: {
-            ...badgeTheme.dismissIconSizes,
-            ...customTheme.dismissIconSizes,
+        dismissSizes: {
+            ...badgeTheme.dismissSizes,
+            ...customTheme.dismissSizes,
         },
         dotColors: {
             ...badgeTheme.dotColors,
@@ -138,11 +118,11 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     const sizeStyle = ((_k = theme.sizes) === null || _k === void 0 ? void 0 : _k[size]) || "";
     const shapeStyle = pill
         ? "rounded-full"
-        : ((_l = theme.radiusSizes) === null || _l === void 0 ? void 0 : _l[size]) || "rounded-[var(--badge-radius)]";
-    const dotColorStyle = ((_m = theme.dotColors) === null || _m === void 0 ? void 0 : _m[color]) || "";
+        : "rounded-[var(--badge-radius)]";
+    const dotColorStyle = ((_l = theme.dotColors) === null || _l === void 0 ? void 0 : _l[color]) || "";
     // Build base styles with all states
-    const isInteractive = selectable || dismissible;
-    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_o = theme.pillSizes) === null || _o === void 0 ? void 0 : _o[size]), isInteractive && "cursor-pointer", disabled && ((_p = theme.states) === null || _p === void 0 ? void 0 : _p.disabled), darkMode && "dark", className);
+    const isInteractive = dismissible;
+    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_m = theme.pillSizes) === null || _m === void 0 ? void 0 : _m[size]), isInteractive && "cursor-pointer", disabled && ((_o = theme.states) === null || _o === void 0 ? void 0 : _o.disabled), darkMode && "dark", className);
     // Create data attributes for styling hooks
     const dataAttributes = {
         "data-variant": variant,
@@ -152,59 +132,55 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         "data-pill": pill ? "true" : "false",
         "data-with-dot": withDot ? "true" : "false",
         "data-dismissible": dismissible ? "true" : "false",
-        "data-selected": isSelected ? "true" : "false",
-        "data-selectable": selectable ? "true" : "false",
         "data-disabled": disabled ? "true" : "false",
         "data-interactive": isInteractive ? "true" : "false",
     };
     // Render left content (priority: avatar → iconStart → dot)
     const renderLeftContent = () => {
-        var _a, _b;
+        var _a, _b, _c;
         if (avatar) {
             // Apply negative margin for overlap effect (scales with badge size)
             const avatarMargin = pill
                 ? {
-                    xs: "-ml-1",
                     sm: "-ml-1.5",
                     md: "-ml-1.5",
                 }[size]
                 : {
-                    xs: "-ml-1",
                     sm: "-ml-1.5",
                     md: "-ml-1",
                 }[size];
-            return (jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn((_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, "border-0", pill ? "rounded-full" : "rounded-md ring-0") }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden", (_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, pill ? "rounded-full" : "rounded-md"), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: (_b = avatar.fallback) !== null && _b !== void 0 ? _b : jsx(UserIcon, { className: "size-2.5" }), initialsCount: avatar.initialsCount, size: "xs", className: cn("!size-full border-0", pill ? "rounded-full" : "rounded-md ring-0") }) }));
         }
         if (iconStart) {
-            return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0", (_c = theme.iconSizes) === null || _c === void 0 ? void 0 : _c[size]), "aria-hidden": "true", children: iconStart }));
         }
         if (withDot) {
             if (shouldAnimate) {
-                return (jsx(motion.span, { className: cn("badge-dot rounded-full shrink-0 size-1.5", dotColorStyle), variants: dotVariants, "aria-hidden": "true" }));
+                return (jsx(motion.span, { className: cn("badge-dot rounded-full shrink-0 size-1.5 ring-2 ring-current/20", dotColorStyle), variants: dotVariants, "aria-hidden": "true" }));
             }
             return (jsx("span", { className: cn("badge-dot rounded-full shrink-0 size-1.5", dotColorStyle), "aria-hidden": "true" }));
         }
         return null;
     };
     if (!shouldAnimate) {
-        // Strip motion-only props to satisfy HTMLAttributes typings
-        const { initial: _initial, animate: _animate, exit: _exit, variants: _variants, whileHover: _whileHover, whileTap: _whileTap, layout: _layout, transition: _transition, style: _motionStyle, onUpdate: _onUpdate, ...restHtmlProps } = props;
+        // Spread props directly — Badge only receives HTMLSpanElement attributes
+        const restHtmlProps = props;
         // Non-animated render for Storybook or reduced-motion environments
-        return isVisible ? (jsxs("span", { ref: ref, className: baseStyles, onClick: handleClick, role: selectable ? "button" : undefined, tabIndex: selectable && !disabled ? 0 : undefined, "aria-pressed": selectable ? isSelected : undefined, "aria-disabled": disabled || undefined, ...dataAttributes, ...restHtmlProps, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+        return isVisible ? (jsxs("span", { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, ...dataAttributes, ...restHtmlProps, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
                         ? {
                             maxWidth: typeof maxWidth === "number"
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_q = theme.dismissButtonSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_r = theme.dismissIconSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-hidden": "true" }) }))] })) : null;
+                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_p = theme.dismissSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-hidden": "true" }) }))] })) : null;
     }
-    return (jsx(AnimatePresence, { mode: "wait", children: isVisible && (jsxs(motion.span, { ref: ref, className: baseStyles, onClick: handleClick, role: selectable ? "button" : undefined, tabIndex: selectable && !disabled ? 0 : undefined, "aria-pressed": selectable ? isSelected : undefined, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", whileTap: selectable && !disabled ? { scale: 0.98 } : undefined, ...dataAttributes, ...props, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
+    return (jsx(AnimatePresence, { mode: "wait", children: isVisible && (jsxs(motion.span, { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", ...dataAttributes, ...props, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
                         ? {
                             maxWidth: typeof maxWidth === "number"
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_s = theme.dismissButtonSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_t = theme.dismissIconSizes) === null || _t === void 0 ? void 0 : _t[size]), "aria-hidden": "true" }) }))] })) }));
+                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: "badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true", strokeWidth: 2 }) }))] })) }));
 }));
 Badge.displayName = "Badge";
 

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

@@ -1,39 +1,38 @@
-import { semanticBgColors } from '../../../utils/colorUtils.js';
-
 /**
  * Default theme configuration for Badge component
  * Uses variant-first color organization for reliable dark mode and className overrides
  */
 const badgeTheme = {
     // Base styles applied to all badges
-    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit",
+    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit w-fit tracking-tight font-semibold border",
     // Visual style variants (structure only, no colors)
+    // All variants get `border` via baseStyle for consistent box sizing
     variants: {
-        filled: "",
-        outline: "bg-transparent border",
-        ghost: "ring-transparent border-0",
+        filled: "border-transparent",
+        outline: "bg-transparent",
+        soft: "",
     },
     // Color styles organized PER VARIANT
     // This structure enables reliable dark: variants and className overrides
     variantColors: {
-        // Filled variant - solid backgrounds with ring glow
+        // Filled variant - solid backgrounds, no visible border
         filled: {
-            neutral: "bg-[var(--color-neutral-900)] text-white ring-[var(--color-border)] " +
-                "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
-            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-[var(--color-primary-400)] " +
-                "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
-            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] ring-[var(--color-secondary-400)] " +
-                "dark:bg-[var(--color-secondary-600)] dark:ring-[var(--color-secondary-500)]",
-            success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] ring-[var(--color-success-300)] " +
-                "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
-            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] ring-[var(--color-warning-300)] " +
-                "dark:bg-[var(--color-warning-600)] dark:ring-[var(--color-warning-400)]",
-            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] ring-[var(--color-danger-400)] " +
-                "dark:bg-[var(--color-danger-600)] dark:ring-[var(--color-danger-400)]",
+            neutral: "bg-[var(--color-neutral-900)] text-white " +
+                "dark:bg-[var(--color-neutral-700)]",
+            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] " +
+                "dark:bg-[var(--color-primary-600)]",
+            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] " +
+                "dark:bg-[var(--color-secondary-600)]",
+            success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] " +
+                "dark:bg-[var(--color-success-600)]",
+            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] " +
+                "dark:bg-[var(--color-warning-600)]",
+            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] " +
+                "dark:bg-[var(--color-danger-600)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-secondary)] border-[var(--color-border)] " + "",
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " + "",
             primary: "text-[var(--color-primary)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-primary-400)]",
             secondary: "text-[var(--color-secondary)] border-[var(--color-border)] " +
@@ -45,68 +44,55 @@ const badgeTheme = {
             danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-danger-400)]",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
-                "dark:bg-[var(--color-neutral-900)]  ",
-            primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
-                "dark:bg-[var(--color-primary-600)]/30 dark:text-[var(--color-primary-400)]",
-            secondary: "bg-[var(--color-secondary-100)] text-[var(--color-secondary-700)] " +
-                "dark:bg-[var(--color-secondary-600)]/30 dark:text-[var(--color-secondary-400)]",
-            success: "bg-[var(--color-success-100)] text-[var(--color-success-600)] " +
-                "dark:bg-[var(--color-success-600)]/30 dark:text-[var(--color-success-400)]",
-            warning: "bg-[var(--color-warning-100)] text-[var(--color-warning-600)] " +
-                "dark:bg-[var(--color-warning-600)]/30 dark:text-[var(--color-warning-400)]",
-            danger: "bg-[var(--color-danger-100)] text-[var(--color-danger-600)] " +
-                "dark:bg-[var(--color-danger-600)]/30 dark:text-[var(--color-danger-400)]",
+        // Soft variant - subtle background tints (Preline-style: 800 text, 500/20 dark bg)
+        soft: {
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-text-primary)]/10 " +
+                "dark:bg-[var(--color-neutral-900)]",
+            primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-800)] border-[var(--color-primary-800)]/20 " +
+                "dark:bg-[var(--color-primary-500)]/20 dark:text-[var(--color-primary-300)]",
+            secondary: "bg-[var(--color-secondary-100)] text-[var(--color-secondary-800)] border-[var(--color-secondary-800)]/10 " +
+                "dark:bg-[var(--color-secondary-500)]/20 dark:text-[var(--color-secondary-400)]",
+            success: "bg-[var(--color-success-100)] text-[var(--color-success-800)] border-[var(--color-success-800)]/20 " +
+                "dark:bg-[var(--color-success-500)]/20 dark:text-[var(--color-success-400)]",
+            warning: "bg-[var(--color-warning-100)] text-[var(--color-warning-800)] border-[var(--color-warning-800)]/20 " +
+                "dark:bg-[var(--color-warning-500)]/20 dark:text-[var(--color-warning-400)]",
+            danger: "bg-[var(--color-danger-100)] text-[var(--color-danger-800)] border-[var(--color-danger-800)]/20 " +
+                "dark:bg-[var(--color-danger-500)]/20 dark:text-[var(--color-danger-400)]",
         },
     },
     // Flat size structure (no nested objects)
     sizes: {
-        xs: "text-xs px-1 py-0 gap-1 font-medium",
-        sm: "text-sm px-1.5 py-0 gap-1 font-medium",
-        md: "text-sm px-2 py-0.25 gap-1 font-semibold",
-    },
-    // Border radius per size (using CSS variable)
-    radiusSizes: {
-        xs: "rounded-[calc(var(--badge-radius)*0.5)]",
-        sm: "rounded-[calc(var(--badge-radius)*0.75)]",
-        md: "rounded-[var(--badge-radius)]",
+        sm: "text-sm px-1.5 py-0.25 gap-1",
+        md: "text-base px-2 py-0.25 gap-1",
     },
     // Additional padding for pill shape
     pillSizes: {
-        xs: "px-1.5",
         sm: "px-2",
         md: "px-2.5",
     },
-    // Icon sizes
+    // Icon sizes — applies to wrapper span; [&>svg] selector ensures SVG scales to fit
     iconSizes: {
-        xs: "size-2.5",
-        sm: "size-3",
-        md: "size-3.5",
+        sm: "size-3.5 [&>svg]:size-3.5",
+        md: "size-4 [&>svg]:size-4",
     },
     // Avatar sizes (base sizes without negative margin)
     avatarSizes: {
-        xs: "size-3.5",
         sm: "size-4",
-        md: "size-4",
+        md: "size-5",
     },
-    // Dismiss button container sizes
-    dismissButtonSizes: {
-        xs: "size-3",
-        sm: "size-3.5",
+    // Dismiss icon sizes (button sizes itself from icon + padding)
+    dismissSizes: {
+        sm: "size-3",
         md: "size-4",
     },
-    // Dismiss icon sizes (inside button)
-    dismissIconSizes: {
-        xs: "size-2",
-        sm: "size-2.5",
-        md: "size-3",
-    },
-    // Dot indicator colors (simple, no dark mode needed - inherits from parent)
+    // Dot inherits text color via currentColor — works across all variants/colors
     dotColors: {
-        ...semanticBgColors,
-        neutral: "bg-[var(--color-text-secondary)]",
+        neutral: "bg-current",
+        primary: "bg-current",
+        secondary: "bg-current",
+        success: "bg-current",
+        warning: "bg-current",
+        danger: "bg-current",
     },
     // State styles
     states: {

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

@@ -1,8 +1,8 @@
 import React, { ReactNode, MouseEvent } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
-export type BadgeVariant = "filled" | "outline" | "ghost";
+export type BadgeVariant = "filled" | "outline" | "soft";
 export type BadgeColor = SemanticColor;
-export type BadgeSize = "xs" | "sm" | "md";
+export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -28,10 +28,6 @@ export interface BadgeTheme {
      * Additional padding for pill-shaped badges
      */
     pillSizes: Record<BadgeSize, string>;
-    /**
-     * Border radius per badge size
-     */
-    radiusSizes: Record<BadgeSize, string>;
     /**
      * Icon sizes for each badge size
      */
@@ -41,13 +37,9 @@ export interface BadgeTheme {
      */
     avatarSizes: Record<BadgeSize, string>;
     /**
-     * Dismiss button sizes for each badge size
-     */
-    dismissButtonSizes: Record<BadgeSize, string>;
-    /**
-     * Dismiss icon sizes for each badge size
+     * Dismiss icon sizes (button sizes itself from icon + padding)
      */
-    dismissIconSizes: Record<BadgeSize, string>;
+    dismissSizes: Record<BadgeSize, string>;
     /**
      * Color styles for dot indicators
      */
@@ -69,18 +61,16 @@ export interface BadgeThemeOverrides {
     variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
-    radiusSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
-    dismissButtonSizes?: Partial<Record<BadgeSize, string>>;
-    dismissIconSizes?: 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>, "onSelect" | "inputMode"> {
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "inputMode"> {
     /**
      * The content to be displayed inside the badge
      */
@@ -136,20 +126,6 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
      * 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

package/dist/components/core/Button/Button.js

@@ -18,7 +18,7 @@ const BUTTON_TAP_ANIMATION = {
         },
     },
 };
-const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, ...restProps }, ref) => {
+const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
@@ -104,7 +104,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 node;
         }
     }, [buttonRef]);
-    return (jsxs(motion.button, { ...restProps /* React drag events conflict with motion drag events */, ...animationProps, ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
+    return (jsxs(motion.button, { ...restProps, ...animationProps, ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "link" &&
                 resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
                 ripples.map((ripple) => {

package/dist/components/core/Button/Button.ripple.js

@@ -120,7 +120,7 @@ function getRippleColorClass(variant, color) {
     if (variant === "filled") {
         return "bg-white/30";
     }
-    // For outline/ghost buttons, use color-matched ripple
+    // For outline/soft buttons, use color-matched ripple
     switch (color) {
         case "primary":
             return "bg-[var(--color-primary)]/20";

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

@@ -9,7 +9,7 @@ export interface ButtonTheme {
     variantColors: {
         filled: Record<ButtonColor, string>;
         outline: Record<ButtonColor, string>;
-        ghost: Record<ButtonColor, string>;
+        soft: Record<ButtonColor, string>;
         link: Record<ButtonColor, string>;
     };
     sizes: Record<ButtonSize, {

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

@@ -8,7 +8,7 @@ const buttonTheme = {
     variantStyles: {
         filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
-        ghost: "border-transparent",
+        soft: "border-transparent",
         link: "bg-transparent border-transparent",
     },
     // Color styles organized BY VARIANT for reliable dark: prefixes
@@ -66,8 +66,8 @@ const buttonTheme = {
                 "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
                 "dark:hover:bg-[var(--color-danger-900)]/30",
         },
-        // Ghost variant - subtle background tints
-        ghost: {
+        // Soft variant - subtle background tints
+        soft: {
             neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
                 "hover:bg-[var(--color-neutral-200)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
@@ -124,9 +124,9 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "font-semibold p-0 text-sm h-fit",
+            link: "font-semibold p-0 text-base h-fit",
         },
         md: {
             default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",

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

@@ -51,6 +51,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     darkMode?: boolean;
 }
 export type ButtonColor = SemanticColor;
-export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
+export type ButtonVariant = "filled" | "outline" | "soft" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "error" | "loading";

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

@@ -4,15 +4,15 @@
 const buttonGroupTheme = {
     // Base styles for the button group container with child button styling
     baseStyle: "inline-flex items-stretch " +
-        // Horizontal orientation - direct button children
-        "[&>button:first-child]:rounded-r-none " +
-        "[&>button:last-child]:rounded-l-none " +
+        // Horizontal orientation - direct button children (skip only-child)
+        "[&>button:first-child:not(:only-child)]:rounded-r-none " +
+        "[&>button:last-child:not(:only-child)]:rounded-l-none " +
         "[&>button:not(:first-child):not(:last-child)]:rounded-none " +
         "[&>button:not(:first-child)]:-ml-px " +
         "[&>button]:relative [&>button]:focus:z-10 [&>button]:hover:z-10 " +
-        // Horizontal orientation - nested button children (e.g., in Dropdown)
-        "[&>*:first-child>button]:rounded-r-none " +
-        "[&>*:last-child>button]:rounded-l-none " +
+        // Horizontal orientation - nested button children (skip only-child)
+        "[&>*:first-child:not(:only-child)>button]:rounded-r-none " +
+        "[&>*:last-child:not(:only-child)>button]:rounded-l-none " +
         "[&>*:not(:first-child):not(:last-child)>button]:rounded-none " +
         "[&>*:not(:first-child)>button]:-ml-px " +
         "[&>*>button]:relative [&>*>button]:focus:z-10 [&>*>button]:hover:z-10 " +

package/dist/components/core/ButtonGroup/ButtonGroupText.js

@@ -6,11 +6,9 @@ import { cn } from '../../../utils/cn.js';
 const ButtonGroupText = React__default.forwardRef(({ children, className = "", asChild = false, ...props }, ref) => {
     // If asChild is true, clone the child element with our styles
     if (asChild && React__default.isValidElement(children)) {
-        const childProps = children.props;
         return React__default.cloneElement(children, {
-            ...childProps,
             ref,
-            className: cn(buttonGroupTheme.textStyles, childProps.className, className),
+            className: cn(buttonGroupTheme.textStyles, children.props.className, className),
         });
     }
     // Otherwise, render as a div

package/dist/components/core/Calendar/Calendar.js

@@ -112,7 +112,7 @@ const generateCalendarDays = (year, month, selectedValue, mode = 'single', today
     }
     return days;
 };
-const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, className, ...props }, ref) => {
+const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, showOtherMonthDays = true, className, ...props }, ref) => {
     // Determine initial view date from value/defaultValue
     const getInitialViewDate = () => {
         if (value) {
@@ -371,10 +371,36 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             }
         }
     }, [minDate, maxDate, customIsDateDisabled, currentMonth, currentYear, onViewDateChange, mode, value, onChange, selectedValue, rangeSelectionState]);
-    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
+    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day, index) => {
                     var _a;
                     const dayNumber = day.date.getDate();
-                    return (jsxs(motion.button, { type: "button", onClick: () => handleDateSelect(day.date), disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }, day.date.toISOString()));
+                    const isInStrip = day.isRangeStart || day.isRangeEnd || day.isInRange;
+                    // Determine range position for strip rounding
+                    let rangePos;
+                    if (isInStrip) {
+                        const isRowStart = index % 7 === 0;
+                        const isRowEnd = index % 7 === 6;
+                        const nextDay = calendarDays[index + 1];
+                        const prevDay = calendarDays[index - 1];
+                        const nextVisible = nextDay && (nextDay.isCurrentMonth || showOtherMonthDays);
+                        const prevVisible = prevDay && (prevDay.isCurrentMonth || showOtherMonthDays);
+                        const nextInStrip = nextVisible && (nextDay.isInRange || nextDay.isRangeEnd);
+                        const prevInStrip = prevVisible && (prevDay.isInRange || prevDay.isRangeStart);
+                        const effectiveStart = day.isRangeStart || isRowStart || !prevInStrip;
+                        const effectiveEnd = day.isRangeEnd || isRowEnd || !nextInStrip;
+                        if (effectiveStart && effectiveEnd)
+                            rangePos = "single";
+                        else if (effectiveStart)
+                            rangePos = "start";
+                        else if (effectiveEnd)
+                            rangePos = "end";
+                        else
+                            rangePos = "middle";
+                    }
+                    if (!day.isCurrentMonth && !showOtherMonthDays) {
+                        return jsx("div", {}, day.date.toISOString());
+                    }
+                    return (jsx("div", { className: cn("flex items-center justify-center", isInStrip && calendarTheme.rangeCellStyle), "data-range-pos": rangePos, children: jsxs(motion.button, { type: "button", onClick: () => handleDateSelect(day.date), disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }) }, day.date.toISOString()));
                 }) })] }));
 });
 Calendar.displayName = "Calendar";