@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -5,12 +5,14 @@ import { cn } from '../../../utils/cn.js';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { useChartAccessibility } from '../hooks/useChartAccessibility.js';
 import { useChartValidation } from '../hooks/useChartValidation.js';
+import { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { ChartErrorBoundary } from '../shared/ChartErrorBoundary/ChartErrorBoundary.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { STACKED_BAR_CHART_DEFAULTS } from './StackedBarChart.types.js';
+import { X_AXIS_MARGIN } from '../types/chart.types.js';
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 
 // Pure helper functions moved to module level to avoid recreation per render
@@ -45,7 +47,7 @@ stackOffset = STACKED_BAR_CHART_DEFAULTS.stackOffset,
 // Animation props
 showAnimation = STACKED_BAR_CHART_DEFAULTS.showAnimation, 
 // Base props
-className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", children, ...props }) => {
+className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFAULTS.enableKeyboardNavigation, showValidationWarnings = process.env.NODE_ENV === "development", width, height, children, ...props }) => {
     var _a;
     // Animation state
     const shouldReduceMotion = useReducedMotion();
@@ -73,7 +75,19 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         return (jsx("div", { className: cn("chart-container flex items-center justify-center text-[var(--color-text-muted)]", className), role: "img", "aria-label": "Empty stacked bar chart", ...props, children: jsx("span", { children: "No data available" }) }));
     }
     // Color palette using CSS variables
-    const getSeriesFillColor = (index) => {
+    const getSeriesFillColor = (index, key) => {
+        var _a;
+        if (key && config && ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color)) {
+            const customColor = config[key].color;
+            if (!customColor.startsWith("var(") &&
+                !customColor.startsWith("#") &&
+                !customColor.startsWith("rgb") &&
+                !customColor.startsWith("hsl") &&
+                customColor.includes("-")) {
+                return `var(--color-${customColor})`;
+            }
+            return customColor;
+        }
         const colorVars = [
             "var(--color-primary)",
             "var(--color-primary-400)",
@@ -85,7 +99,9 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         return colorVars[index % colorVars.length];
     };
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    // `measured` gates bar mount so motion captures geometry in the real
+    // coordinate space, not the 600×400 fallback (cold-load below-baseline bug).
+    const { dimensions, measured } = useChartDimensions(containerRef);
     const [hoveredCategory, setHoveredCategory] = useState(null);
     const isMobile = typeof window !== "undefined" &&
         ("ontouchstart" in window || navigator.maxTouchPoints > 0);
@@ -101,31 +117,11 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         description,
         enableKeyboardNavigation,
     });
-    // Measure container dimensions
-    useEffect(() => {
-        const updateDimensions = () => {
-            if (containerRef.current) {
-                const { width, height } = containerRef.current.getBoundingClientRect();
-                setDimensions({
-                    width: width || 600,
-                    height: height || 400,
-                });
-            }
-        };
-        updateDimensions();
-        const resizeObserver = new ResizeObserver(updateDimensions);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
     // Calculate dimensions
     const margin = useMemo(() => ({
         top: 15,
         right: showYAxis ? 20 : 0,
-        bottom: showXAxis ? 20 : 0,
+        bottom: showXAxis ? X_AXIS_MARGIN : 0,
         left: showYAxis ? 60 : 0,
     }), [showYAxis, showXAxis]);
     const innerWidth = Math.max(0, dimensions.width - margin.left - margin.right);
@@ -190,7 +186,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
         const isFocused = isKeyboardMode && focusedElementIndex === categoryIndex;
         const range = maxValue - minValue;
         return (jsx("g", { children: dataKeys.map((key, keyIndex) => {
-                var _a, _b;
+                var _a;
                 const stackData = (_a = getStackedValues[key]) === null || _a === void 0 ? void 0 : _a[categoryIndex];
                 if (!stackData)
                     return null;
@@ -218,7 +214,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                 const pathD = isTopSegment
                     ? createRoundedTopBarPath(x, barY, barWidth, barHeight, barRadius)
                     : createRectPath(x, barY, barWidth, barHeight);
-                const fillColor = ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(keyIndex);
+                const fillColor = getSeriesFillColor(keyIndex, key);
                 const delay = categoryIndex * BAR_STAGGER;
                 return (jsx(motion.path, { d: pathD, initial: showAnimation && !shouldReduceMotion
                         ? { scaleY: 0, opacity: 0 }
@@ -242,7 +238,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                         setHoveredCategory(categoryIndex);
                         // Create tooltip content with all series
                         const series = dataKeys.map((dataKey, idx) => {
-                            var _a, _b;
+                            var _a;
                             const rawValue = item[dataKey];
                             const value = typeof rawValue === "number" && isFinite(rawValue)
                                 ? rawValue
@@ -251,7 +247,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                                 key: dataKey,
                                 label: ((_a = config[dataKey]) === null || _a === void 0 ? void 0 : _a.label) || dataKey,
                                 value,
-                                color: ((_b = config[dataKey]) === null || _b === void 0 ? void 0 : _b.color) || getSeriesFillColor(idx),
+                                color: getSeriesFillColor(idx, dataKey),
                             };
                         });
                         // Calculate total
@@ -282,16 +278,20 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                     } }, key));
             }) }, categoryIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), style: {
+                width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+                height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+            }, ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                                 if (stackOffset === "expand")
                                     return `${value}%`;
                                 if (Math.abs(value) >= 1000)
                                     return `${(value / 1000).toFixed(0)}k`;
                                 return value.toString();
-                            } }), jsx("g", { className: "chart-bars", children: sanitizedData.map((item, index) => {
-                                const x = margin.left + index * (barWidth + categoryGap);
-                                return renderStackedBar(item, index, x);
-                            }) }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
+                            } }), jsx("g", { className: "chart-bars", children: measured &&
+                                sanitizedData.map((item, index) => {
+                                    const x = margin.left + index * (barWidth + categoryGap);
+                                    return renderStackedBar(item, index, x);
+                                }) }), jsx(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })] }), jsx(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
                         ? { x: tooltipData.x, y: tooltipData.y }
                         : { x: 0, y: 0 } }), children] }) }));
 };

package/dist/components/charts/StackedBarChart/StackedBarChart.types.d.ts

@@ -18,7 +18,7 @@ export declare const STACKED_BAR_CHART_DEFAULTS: {
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
-    readonly dotRadius: 4;
+    readonly dotRadius: 3;
     readonly cellRadius: 4;
     readonly radius: 20;
     readonly strokeWidth: 2;
@@ -26,7 +26,7 @@ export declare const STACKED_BAR_CHART_DEFAULTS: {
     readonly curveType: import("..").CurveType;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
-    readonly showDots: true;
+    readonly showDots: false;
     readonly stacked: false;
     readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;

package/dist/components/charts/hooks/index.d.ts

@@ -4,3 +4,5 @@ export { useTooltipPosition } from './useTooltipPosition';
 export { useChartValidation, useChartDataValidation, useChartValidationProduction } from './useChartValidation';
 export { useChartScales } from './useChartScales';
 export type { UseChartScalesOptions, UseChartScalesReturn, ChartScales } from './useChartScales';
+export { useChartDimensions } from './useChartDimensions';
+export type { ChartDimensions, UseChartDimensionsReturn } from './useChartDimensions';

package/dist/components/charts/hooks/useChartDimensions.d.ts

@@ -0,0 +1,29 @@
+export interface ChartDimensions {
+    width: number;
+    height: number;
+}
+export interface UseChartDimensionsReturn {
+    /** Current container size. Starts at the fallback, corrected on measurement. */
+    dimensions: ChartDimensions;
+    /**
+     * `true` once the container has been measured with real (>0) width AND height.
+     *
+     * 🔴 Gate mount-animated SVG geometry (scaleY bars, scale-in dots, clip-sweep
+     * reveals) on this flag. Charts seed `dimensions` with a 600×400 fallback and
+     * only learn their true size after the ResizeObserver fires. `motion` elements
+     * capture their initial geometry and transform-origin at mount, so if they
+     * mount in the fallback coordinate space the entrance animation plays from the
+     * wrong place (e.g. bars rising from below the x-axis on cold load). Mounting
+     * the animated layer only when `measured` guarantees motion captures geometry
+     * in the final coordinate space. The measurement runs in a layout effect, so
+     * the corrected size lands synchronously before paint — no fallback frame is
+     * ever shown.
+     */
+    measured: boolean;
+}
+/**
+ * Measures a chart's container element and reports a `measured` flag once a real
+ * size is known. Replaces the per-chart inline ResizeObserver block so every
+ * Cartesian chart shares one correct implementation (see `measured` docs above).
+ */
+export declare function useChartDimensions(containerRef: React.RefObject<HTMLElement | HTMLDivElement | null>, fallback?: ChartDimensions): UseChartDimensionsReturn;

package/dist/components/charts/hooks/useChartDimensions.js

@@ -0,0 +1,42 @@
+import { useState, useEffect, useLayoutEffect } from 'react';
+
+// SSR-safe layout effect — charts only render meaningfully on the client, but
+// guarding avoids React's useLayoutEffect-on-server warning.
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const FALLBACK = { width: 600, height: 400 };
+/**
+ * Measures a chart's container element and reports a `measured` flag once a real
+ * size is known. Replaces the per-chart inline ResizeObserver block so every
+ * Cartesian chart shares one correct implementation (see `measured` docs above).
+ */
+function useChartDimensions(containerRef, fallback = FALLBACK) {
+    const [dimensions, setDimensions] = useState(fallback);
+    const [measured, setMeasured] = useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const updateDimensions = () => {
+            if (containerRef.current) {
+                const { width, height } = containerRef.current.getBoundingClientRect();
+                setDimensions({
+                    width: width || fallback.width,
+                    height: height || fallback.height,
+                });
+                if (width > 0 && height > 0) {
+                    setMeasured(true);
+                }
+            }
+        };
+        updateDimensions();
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+        // fallback is read inside but is a stable default; ref identity is constant.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [containerRef]);
+    return { dimensions, measured };
+}
+
+export { useChartDimensions };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.theme.js

@@ -4,7 +4,7 @@
  * Follows the established theming pattern with CSS variables
  */
 const chartTooltipTheme = {
-    baseStyle: "fixed z-50 text-[var(--color-text-primary)] rounded-[var(--tooltip-radius)] px-3 py-2 shadow-lg pointer-events-none glass-effect",
+    baseStyle: "fixed z-[99] text-[var(--color-text-primary)] rounded-[var(--tooltip-radius)] px-3 py-2 shadow-real-lg pointer-events-none bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg outline outline-[var(--color-border)]",
     contentStyle: "whitespace-nowrap text-sm",
     multiSeriesContainerStyle: "text-left",
     categoryStyle: "text-xs font-semibold mb-1 text-[var(--color-text-primary)]",

package/dist/components/charts/types/chart.types.d.ts

@@ -37,12 +37,19 @@ export interface ChartThemeOverrides {
         colors: string[];
     }>>;
 }
+/**
+ * Shared bottom margin (px) reserved for the X-axis across all Cartesian charts
+ * (Area/Line/Bar/StackedBar). A single source of truth so their plot baselines
+ * always align when placed side by side. Sized to fit one row of axis labels
+ * (XAxis tickLength 6 + tickPadding 12 + label height).
+ */
+export declare const X_AXIS_MARGIN = 28;
 export declare const CHART_DEFAULTS: {
     readonly showGrid: true;
     readonly showXAxis: true;
     readonly showYAxis: true;
     readonly barRadius: 32;
-    readonly dotRadius: 4;
+    readonly dotRadius: 3;
     readonly cellRadius: 4;
     readonly radius: 20;
     readonly strokeWidth: 2;
@@ -52,7 +59,7 @@ export declare const CHART_DEFAULTS: {
     readonly curveType: CurveType;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
-    readonly showDots: true;
+    readonly showDots: false;
     readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
     readonly variant: ChartVariant;
@@ -63,6 +70,8 @@ export interface BaseChartProps {
     config: ChartConfig;
     className?: string;
     children?: ReactNode;
+    width?: string | number;
+    height?: string | number;
     title?: string;
     description?: string;
     enableKeyboardNavigation?: boolean;

package/dist/components/charts/types/chart.types.js

@@ -1,3 +1,10 @@
+/**
+ * Shared bottom margin (px) reserved for the X-axis across all Cartesian charts
+ * (Area/Line/Bar/StackedBar). A single source of truth so their plot baselines
+ * always align when placed side by side. Sized to fit one row of axis labels
+ * (XAxis tickLength 6 + tickPadding 12 + label height).
+ */
+const X_AXIS_MARGIN = 28;
 // Standardized Chart Defaults
 const CHART_DEFAULTS = {
     // Display options
@@ -6,7 +13,7 @@ const CHART_DEFAULTS = {
     showYAxis: true,
     // Visual properties
     barRadius: 32, // For bar corners (rounded top)
-    dotRadius: 4, // For line/area dot markers
+    dotRadius: 3, // For line/area dot markers
     cellRadius: 4, // For heatmap cells
     radius: 20, // @deprecated Use barRadius, dotRadius, or cellRadius instead
     strokeWidth: 2,
@@ -17,7 +24,7 @@ const CHART_DEFAULTS = {
     curveType: 'monotone',
     fillOpacity: 0.3,
     showStroke: true,
-    showDots: true,
+    showDots: false,
     // Bar specific
     orientation: 'vertical',
     // Layout
@@ -28,4 +35,4 @@ const CHART_DEFAULTS = {
     enableKeyboardNavigation: true,
 };
 
-export { CHART_DEFAULTS };
+export { CHART_DEFAULTS, X_AXIS_MARGIN };

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

@@ -94,7 +94,11 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
     const avatarWithTooltip = showTooltip && resolvedName ? (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarCircle })) : (avatarCircle);
     // If no text section, render just the avatar
     if (!hasTextSection) {
-        return (jsx("div", { ref: ref, role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: avatarWithTooltip }));
+        return (jsx("div", { ref: ref, 
+            // inline-flex so the inline-flex circle is a flex child, not inline-level
+            // content — a plain block wrapper leaves a ~5px baseline descender below
+            // the circle, inflating the box and misaligning AvatarGroup's overflow chip.
+            className: "inline-flex", role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: avatarWithTooltip }));
     }
     // Render avatar with text section
     return (jsxs("div", { ref: ref, className: cn("inline-flex items-center", avatarTheme.gapSizes[size]), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [avatarWithTooltip, jsxs("div", { className: "min-w-0", children: [resolvedTitle && (jsx("div", { className: cn(avatarTheme.titleStyle, avatarTheme.textSizes[size]), children: resolvedTitle })), subtitle && (jsx("div", { className: cn(avatarTheme.subtitleStyle, avatarTheme.textSizes[size]), children: subtitle }))] })] }));

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

@@ -44,11 +44,15 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
                     }
                     : {};
                 return (jsx(MotionDiv, { className: cn(
+                    // flex (not the default block) so the inline-flex Avatar is a flex
+                    // child — a block wrapper would leave a baseline descender below it,
+                    // 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, 
                         // Ensure that groupPosition is not passed to avoid conflicts
                         groupPosition: undefined }) }, index));
-            }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, "self-center"), "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", 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` })) }))] }));
 });
 // Set display name for dev tools and Storybook
 AvatarGroup.displayName = "AvatarGroup";

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

@@ -3,7 +3,9 @@
  */
 const avatarGroupTheme = {
     // Base styles for the avatar group
-    baseStyle: "flex items-start",
+    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",
@@ -11,7 +13,7 @@ const avatarGroupTheme = {
         loose: "-ml-2 z-10",
     },
     // Overflow avatar styles
-    overflowAvatarStyle: "bg-[var(--color-surface)] text-[var(--color-text-secondary)] font-semibold text-xs flex items-center justify-center size-7",
+    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",
 };
 
 export { avatarGroupTheme };

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

@@ -128,7 +128,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     const renderLeftContent = () => {
         var _a, _b, _c;
         if (avatar) {
-            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-1.5"), 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") }) }));
+            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, 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 -ml-1", (_c = theme.iconSizes) === null || _c === void 0 ? void 0 : _c[size]), "aria-hidden": "true", children: iconStart }));

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

@@ -4,13 +4,13 @@
  */
 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-semibold border",
+    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit w-fit tracking-tight font-medium border",
     // Visual style variants (structure only, no colors)
     // All variants get `border` via baseStyle for consistent box sizing
     variants: {
         filled: "border-transparent",
         outline: "bg-transparent",
-        soft: "",
+        soft: "border-none",
     },
     // Color styles organized PER VARIANT
     // This structure enables reliable dark: variants and className overrides
@@ -48,24 +48,25 @@ const badgeTheme = {
         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)]",
+            primary: "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] border-[var(--color-primary)]/20 " +
+                "dark:bg-[var(--color-primary-400)]/20 dark:text-[var(--color-primary-300)]",
+            secondary: "bg-[var(--color-secondary-50)] text-[var(--color-secondary-700)] border-[var(--color-secondary)]/10 " +
+                "dark:bg-[var(--color-secondary-400)]/20 dark:text-[var(--color-secondary-400)]",
+            success: "bg-[var(--color-success-100)]/70 text-[var(--color-success-700)] border-[var(--color-success)]/20 " +
+                "dark:bg-[var(--color-success-400)]/20 dark:text-[var(--color-success-400)]",
+            warning: "bg-[var(--color-warning-50)] text-[var(--color-warning-700)] border-[var(--color-warning)]/20 " +
+                "dark:bg-[var(--color-warning-400)]/20 dark:text-[var(--color-warning-400)]",
+            danger: "bg-[var(--color-danger-50)] text-[var(--color-danger-700)] border-[var(--color-danger)]/20 " +
+                "dark:bg-[var(--color-danger-400)]/20 dark:text-[var(--color-danger-400)]",
         },
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: "text-xs px-1.5 py-0.25 gap-1",
-        md: "text-sm px-2 py-0.25 gap-1",
+        sm: "text-xs px-1 py-0.25 gap-1",
+        md: "text-xs px-1.5 py-0.25 gap-1",
     },
-    // Additional padding for pill shape
+    // 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",

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

@@ -107,7 +107,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
     return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, 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 !== "ghost" &&
-                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 blur-[0.75px]" })), 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 &&
+                resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/50 rounded-t-[calc(var(--button-radius)-1.25px)] blur-[0.25px]" })), 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) => {
                     const animation = getRippleAnimation(effect, ripple, rippleScale);
                     return (jsx(motion.span, { initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||

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

@@ -3,10 +3,10 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
-        filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
+        filled: "border border-black/25 hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
         soft: "border-transparent",
         ghost: "bg-transparent border-transparent",
@@ -21,7 +21,7 @@ const buttonTheme = {
                 "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)]",
             primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)]",
+                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary)] dark:border-[var(--color-primary-600)]",
             secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] border-[var(--color-secondary)] " +
                 "focus-visible:outline-[var(--color-secondary-600)] " +
                 "dark:text-[var(--color-secondary-contrast)] dark:bg-[var(--color-secondary-600)] dark:border-[var(--color-secondary-600)]",

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

@@ -3,7 +3,7 @@
  * Uses design tokens and data-[state=*] selectors
  */
 const calendarTheme = {
-    baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
+    baseStyle: "select-none w-full",
     headerStyle: "flex items-center justify-between mb-4",
     titleStyle: "text-sm font-semibold text-[var(--color-text-primary)] " + "",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",

package/dist/components/core/Card/Card.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
@@ -8,12 +8,16 @@ import { CardSubtitle } from './CardSubtitle.js';
 import { CardBody } from './CardBody.js';
 import { CardFooter } from './CardFooter.js';
 
-const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, title, subtitle, actions, footer, ...props }, ref) => {
     const theme = useMemo(() => ({
         ...cardTheme,
         ...customTheme,
     }), [customTheme]);
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: children }));
+    const hasHeader = Boolean(title || subtitle || actions);
+    // Slot-prop mode: any header/footer slot composes Header/Body/Footer for us.
+    // Otherwise children render raw — the compound API path, unchanged.
+    const managed = hasHeader || Boolean(footer);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: managed ? (jsxs(Fragment, { children: [hasHeader && (jsxs(CardHeader, { className: actions ? "flex-row items-start justify-between gap-4" : undefined, children: [(title || subtitle) && (jsxs("div", { className: "flex flex-col", children: [title && jsx(CardTitle, { children: title }), subtitle && jsx(CardSubtitle, { children: subtitle })] })), actions && (jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions }))] })), children != null && jsx(CardBody, { children: children }), footer && jsx(CardFooter, { children: footer })] })) : (children) }));
 });
 CardRoot.displayName = 'Card';
 // Create compound component with proper typing

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

@@ -1,8 +1,8 @@
 const cardTheme = {
-    baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)]",
-    headerStyle: "flex flex-col p-6",
+    baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-[var(--color-surface)] border-0 border-[var(--color-border)]",
+    headerStyle: "flex flex-col p-6 items-start",
     titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1.5",
+    subtitleStyle: "text-sm text-[var(--color-text-secondary)] mt-2",
     bodyStyle: "p-6 pt-0 first:pt-6",
     footerStyle: "flex items-center p-6 pt-0 first:pt-6",
 };

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

@@ -15,11 +15,36 @@ export interface CardThemeOverrides {
     bodyStyle?: string;
     footerStyle?: string;
 }
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /**
-     * The content to be displayed inside the card
+     * The content to be displayed inside the card. In slot-prop mode (any of
+     * `title`/`subtitle`/`actions`/`footer` set) children render inside an
+     * auto `Card.Body`; otherwise they render raw (compound mode).
      */
     children?: ReactNode;
+    /**
+     * Header title (serializable slot-prop). Renders `Card.Header` + `Card.Title`
+     * internally. Mirrors `Section`. Omit and use the compound `Card.Header`
+     * parts for full control.
+     */
+    title?: ReactNode;
+    /**
+     * Header subtitle (serializable slot-prop). Renders `Card.Subtitle`.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Header-end controls — buttons, links, Segmented, a kebab menu, etc.
+     * Right-aligned next to the title. Holds `ReactNode`, so it is NOT part of
+     * the generative schema (app-code / hand-authored only), like `Section`'s.
+     * For a card whose primary control is a full Tabs bar, compose `Tabs` in the
+     * body instead of overloading this slot.
+     */
+    actions?: ReactNode;
+    /**
+     * Footer content (serializable slot-prop). Renders `Card.Footer`. Holds
+     * `ReactNode`, so it is excluded from the generative schema like `actions`.
+     */
+    footer?: ReactNode;
     /**
      * Custom class name for the card
      */

package/dist/components/core/CommandPalette/CommandItem.js

@@ -1,8 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
+import { MenuItem } from '../MenuItem/MenuItem.js';
 import { Kbd } from '../Kbd/Kbd.js';
-import { commandPaletteTheme } from './CommandPalette.theme.js';
 
 /**
  * Map string shortcuts to KbdKey types
@@ -100,7 +99,7 @@ const Shortcut = ({ keys }) => {
  * />
  * ```
  */
-const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, theme = commandPaletteTheme, }) => {
+const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, }) => {
     const handleClick = () => {
         if (!command.disabled) {
             onSelect(command);
@@ -126,7 +125,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), role: "option", "aria-selected": isHighlighted, "aria-disabled": command.disabled || false, onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
+    return (jsx(MenuItem, { role: "option", selected: isHighlighted, disabled: command.disabled, startContent: finalContentStart, subtitle: command.subtitle, endContent: renderContentEnd(), onActivate: handleClick, onMouseEnter: handleMouseEnter, "aria-selected": isHighlighted, "data-command-index": index, "data-highlighted": isHighlighted, className: className, children: command.label }));
 };
 
 export { CommandItem };