@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -65,7 +65,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
     });
     // Early return for invalid data
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
                         "Unable to render chart due to data validation errors" })] }));
     }
     // Early return for empty data
@@ -282,7 +282,7 @@ 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-xs 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), ...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)

package/dist/components/charts/shared/ChartErrorBoundary/ChartErrorBoundary.js

@@ -39,7 +39,7 @@ class ChartErrorBoundary extends Component {
                 return this.props.fallback;
             }
             // Default error UI
-            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-sm font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-sm text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-xs", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
+            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-base font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-base text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-sm text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-sm font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-sm", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-sm bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
         }
         return this.props.children;
     }

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -11,7 +11,7 @@ const ChartLegendContent = ({ payload = [], nameKey = 'name', className, ...prop
     return (jsx("div", { className: `flex flex-wrap gap-4 ${className || ''}`, ...props, children: payload.map((entry, index) => {
             const name = entry[nameKey] || entry.dataKey || `Series ${index + 1}`;
             const color = entry.color || '#8884d8';
-            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-sm text-gray-600", children: name })] }, index));
+            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-base text-gray-600", children: name })] }, index));
         }) }));
 };
 

package/dist/components/charts/shared/ChartText/ChartText.js

@@ -11,7 +11,7 @@ const ChartText = ({ children, textAnchor = "start", dominantBaseline = "auto",
     const theme = chartTextTheme;
     // Truncate text if needed
     const truncateText = (text, maxWidth) => {
-        // Rough estimate: 6px per character for text-sm
+        // Rough estimate: 6px per character for text-base
         if (!maxWidth || text.length <= maxWidth / 6) {
             return text;
         }

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

@@ -3,7 +3,7 @@
  * Uses fixed Tailwind styling for consistency across charts
  */
 const chartTextTheme = {
-    baseStyle: "transition-all duration-200 text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
+    baseStyle: "transition-all duration-200 text-sm  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
 };
 
 export { chartTextTheme };

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

@@ -5,14 +5,14 @@
  */
 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",
-    contentStyle: "whitespace-nowrap text-sm",
+    contentStyle: "whitespace-nowrap text-base",
     multiSeriesContainerStyle: "text-left",
-    categoryStyle: "text-xs font-semibold mb-1 text-[var(--color-text-primary)]",
+    categoryStyle: "text-sm font-semibold mb-1 text-[var(--color-text-primary)]",
     seriesContainerStyle: "space-y-0.5",
     seriesRowStyle: "flex items-center justify-between gap-3",
     dotStyle: "size-2 rounded-[calc(var(--radius-base)*0.75)]",
-    labelStyle: "text-xs opacity-90 text-[var(--color-text-secondary)]",
-    valueStyle: "text-xs font-semibold text-[var(--color-text-primary)]",
+    labelStyle: "text-sm opacity-90 text-[var(--color-text-secondary)]",
+    valueStyle: "text-sm font-semibold text-[var(--color-text-primary)]",
 };
 
 export { chartTooltipTheme };

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

@@ -1,8 +1,13 @@
-import { Variants } from 'motion/react';
+import type { Variants } from 'motion/react';
 /**
  * Accordion animation variants for smooth, staggered open/close transitions
  */
 export declare const accordionAnimations: Variants;
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+export declare const createTriggerIconVariants: (rotation: number) => Variants;
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */

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

@@ -19,6 +19,20 @@ const accordionAnimations = {
         }
     }
 };
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+const createTriggerIconVariants = (rotation) => ({
+    closed: {
+        rotate: 0,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+    open: {
+        rotate: rotation,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+});
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */
@@ -42,4 +56,4 @@ const accordionContentAnimations = {
     }
 };
 
-export { accordionAnimations, accordionContentAnimations };
+export { accordionAnimations, accordionContentAnimations, createTriggerIconVariants };

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

@@ -1,16 +1,16 @@
 const accordionTheme = {
     // Base container styles for separated variant (default)
-    baseStyle: "w-full max-w-xl",
+    baseStyle: "w-full",
     // Base container styles for stacked variant (unified card)
-    baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
+    baseStyleStacked: "w-full border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
     // Item styles for separated variant (individual cards with spacing)
-    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0",
     // Item styles for stacked variant (shared borders, no spacing)
     itemStyleStacked: "bg-white 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 justify-between 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)] [&[data-state=open]>svg]:rotate-180 cursor-pointer focus:outline-none transition-all flex justify-between",
+    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)]",
     // Content styles (shared across variants)
-    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px] accordion-content overflow-hidden",
+    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden",
     // Content inner wrapper styles
     contentInnerStyle: "p-4 pb-2.5 pt-0",
 };

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

@@ -54,6 +54,7 @@ export interface AccordionContextValue {
         baseStyle: string;
         triggerStyle: string;
         contentStyle: string;
+        contentInnerStyle: string;
     };
 }
 /**
@@ -89,6 +90,29 @@ export interface AccordionItemContextValue {
 export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
     className?: string;
+    /**
+     * Optional leading icon rendered before children
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Indicator icon rendered after children. Defaults to PlusIcon.
+     * Set to `null` to hide the indicator entirely.
+     */
+    iconEnd?: React.ReactNode | null;
+    /**
+     * Rotation degrees applied to iconStart when open.
+     * Default: 0 (static, no rotation). Use 45 for a plus-to-X effect.
+     */
+    iconStartRotation?: number;
+    /**
+     * Rotation degrees applied to iconEnd when open.
+     * Default: 45 (for PlusIcon). Use 180 for chevrons, 90 for right-arrows, 0 for none.
+     */
+    iconEndRotation?: number;
+    /**
+     * @deprecated Use `iconEndRotation` instead. Alias for `iconEndRotation`.
+     */
+    iconRotation?: number;
 }
 /**
  * Content props
@@ -105,6 +129,7 @@ export interface AccordionThemeOverrides {
     baseStyleStacked?: string;
     triggerStyle?: string;
     contentStyle?: string;
+    contentInnerStyle?: string;
     itemStyle?: string;
     itemStyleStacked?: string;
 }

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

@@ -14,7 +14,7 @@ const AccordionContent = React__default.forwardRef(({ children, className, ...re
     const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
     // Filter out conflicting props to avoid type issues
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, onTransitionEnd, onTransitionStart, ...safeProps } = rest;
-    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.contentStyle, className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: "p-4 pt-0", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
+    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: theme === null || theme === void 0 ? void 0 : theme.contentStyle, "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: cn(theme === null || theme === void 0 ? void 0 : theme.contentInnerStyle, className), variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
 });
 AccordionContent.displayName = "AccordionContent";
 

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

@@ -1,18 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 import { motion } from 'motion/react';
 import { PlusIcon } from '@heroicons/react/24/outline';
+import { createTriggerIconVariants } from './Accordion.animations.js';
 
-const AccordionTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const AccordionTrigger = React__default.forwardRef(({ children, className, iconStart, iconEnd, iconStartRotation = 0, iconEndRotation, iconRotation, ...props }, ref) => {
+    var _a;
     const { theme } = useAccordionContext();
     const { isOpen, toggle, triggerId, contentId } = useAccordionItemContext();
-    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [children, jsx(motion.div, { animate: { rotate: isOpen ? 45 : 0 }, transition: {
-                    duration: 0.2,
-                    ease: [0.4, 0.0, 0.2, 1]
-                }, className: "flex items-center justify-center", children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) })] }));
+    const resolvedEndRotation = (_a = iconEndRotation !== null && iconEndRotation !== void 0 ? iconEndRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
+    const renderIcon = iconEnd === null
+        ? null
+        : iconEnd !== undefined
+            ? iconEnd
+            : jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
+    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [iconStart && (iconStartRotation !== 0 ? (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(iconStartRotation), className: "flex items-center justify-center shrink-0", children: iconStart })) : (jsx("span", { className: "flex items-center justify-center shrink-0", children: iconStart }))), children, renderIcon && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedEndRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: renderIcon }))] }));
 });
 AccordionTrigger.displayName = "AccordionTrigger";
 

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

@@ -8,11 +8,12 @@ import { Button } from '../Button/Button.js';
 const defaultIcons = {
     neutral: BellIcon,
     primary: InformationCircleIcon,
+    secondary: InformationCircleIcon,
     success: CheckCircleIcon,
     warning: ExclamationTriangleIcon,
     danger: XCircleIcon,
 };
-const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, description, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
+const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
     var _a;
     const iconColor = (_a = alertTheme.iconColors[color]) !== null && _a !== void 0 ? _a : alertTheme.iconColors.primary;
     const showDismiss = dismissible === true || (dismissible !== false && !!onDismiss);
@@ -32,7 +33,7 @@ const Alert = React__default.forwardRef(({ variant = "default", color = "primary
         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) }) }));
     };
-    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })), description && (jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: description })), 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: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
+    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })), subtitle && (jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: 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: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: alertNode });
     }

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

@@ -1,23 +1,19 @@
+import { semanticTextColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Alert component
  * Uses flat color organization matching Badge pattern
  */
 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-base border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
     // Visual style variants (structure only, no colors)
     variants: {
         default: "",
         glass: "glass-effect",
     },
     // Icon color styles per color
-    iconColors: {
-        neutral: "text-[var(--color-text-primary)]",
-        primary: "text-[var(--color-primary)]",
-        success: "text-[var(--color-success)]",
-        warning: "text-[var(--color-warning)]",
-        danger: "text-[var(--color-danger)]",
-    },
+    iconColors: semanticTextColors,
     // State styles
     states: {
         dismissible: "pr-10",

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

@@ -1,8 +1,9 @@
 import { HTMLAttributes, ReactNode } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 /**
  * Alert semantic colors (intent)
  */
-export type AlertColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type AlertColor = SemanticColor;
 /**
  * Alert visual variant
  */
@@ -29,8 +30,8 @@ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     color?: AlertColor;
     /** The main title/message of the alert */
     title?: string;
-    /** Additional description text */
-    description?: string;
+    /** Additional subtitle text */
+    subtitle?: string;
     /** Whether the alert can be dismissed */
     dismissible?: boolean;
     /**

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

@@ -1,5 +1,5 @@
 import { AlertDialogProps } from "./AlertDialog.types";
 export declare const AlertDialog: {
-    ({ trigger, icon, title, description, footer, className, }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, icon, title, subtitle, footer, className, }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -3,14 +3,14 @@ import { useState, isValidElement, cloneElement } from 'react';
 import { Modal } from '../Modal/Modal.js';
 import { cn } from '../../../utils/cn.js';
 
-const AlertDialog = ({ trigger, icon, title, description, footer, className, }) => {
+const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleOpen = () => setIsOpen(true);
     const handleClose = () => setIsOpen(false);
     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: false, 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("div", { className: "text-[var(--color-text-secondary)] text-sm", children: description }) }), 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: false, 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("div", { className: "text-[var(--color-text-secondary)] text-base", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";
 

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

@@ -6,8 +6,8 @@ export interface AlertDialogProps {
     icon?: React.ReactNode;
     /** The title of the dialog. */
     title: React.ReactNode;
-    /** The main content/description of the dialog. */
-    description: React.ReactNode;
+    /** The main content/subtitle of the dialog. */
+    subtitle: React.ReactNode;
     /**
      * A render prop for the footer, which receives a `close` function.
      * Use this to render action buttons.

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

@@ -6,11 +6,11 @@ const avatarTheme = {
     baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-semibold tracking-tighter rounded-[var(--avatar-radius)] ring-2 ring-[var(--color-primary)]/10 border border-[var(--border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 glass-effect",
     // Size variants using CSS variables
     sizes: {
-        xs: "size-[var(--avatar-size-xs)] text-[var(--avatar-text-xs)]",
-        sm: "size-[var(--avatar-size-sm)] text-[var(--avatar-text-sm)]",
-        md: "size-[var(--avatar-size-md)] text-[var(--avatar-text-md)]",
-        lg: "size-[var(--avatar-size-lg)] text-[var(--avatar-text-lg)]",
-        xl: "size-[var(--avatar-size-xl)] text-[var(--avatar-text-xl)]",
+        xs: "size-[var(--avatar-size-xs)] text-xs",
+        sm: "size-[var(--avatar-size-sm)] text-sm",
+        md: "size-[var(--avatar-size-md)] text-md",
+        lg: "size-[var(--avatar-size-lg)] text-lg",
+        xl: "size-[var(--avatar-size-xl)] text-xl",
     },
     // Status indicator styles
     statuses: {

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

@@ -11,7 +11,7 @@ const avatarGroupTheme = {
         loose: "-ml-2 z-10",
     },
     // Overflow avatar styles
-    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-sm flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
+    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-base flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
 };
 
 export { avatarGroupTheme };

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

@@ -11,4 +11,4 @@ import { BadgeProps } from "./Badge.types";
  * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
  * ```
  */
-export declare const Badge: React.NamedExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Badge: React.NamedExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -32,7 +32,7 @@ const getShouldAnimate = () => {
  * ```
  */
 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     // State management
     const [isVisible, setIsVisible] = useState(true);
     const [isSelected, setIsSelected] = useState(selected);
@@ -103,6 +103,10 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
             ...badgeTheme.pillSizes,
             ...customTheme.pillSizes,
         },
+        radiusSizes: {
+            ...badgeTheme.radiusSizes,
+            ...customTheme.radiusSizes,
+        },
         iconSizes: {
             ...badgeTheme.iconSizes,
             ...customTheme.iconSizes,
@@ -134,11 +138,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"
-        : "rounded-[var(--badge-radius)]";
-    const dotColorStyle = ((_l = theme.dotColors) === null || _l === void 0 ? void 0 : _l[color]) || "";
+        : ((_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]) || "";
     // Build base styles with all states
     const isInteractive = selectable || dismissible;
-    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_m = theme.pillSizes) === null || _m === void 0 ? void 0 : _m[size]), isInteractive && "cursor-pointer", disabled && ((_o = theme.states) === null || _o === void 0 ? void 0 : _o.disabled), darkMode && "dark", className);
+    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);
     // Create data attributes for styling hooks
     const dataAttributes = {
         "data-variant": variant,
@@ -162,17 +166,15 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                 ? {
                     sm: "-ml-1.5", // Small pill: minimal overlap
                     md: "-ml-1.5", // Medium pill: moderate overlap
-                    lg: "-ml-2", // Large pill: more overlap
                 }[size]
                 : {
                     sm: "-ml-1.5", // Small default: minimal overlap
                     md: "-ml-1", // Medium default: less overlap (has border ring)
-                    lg: "-ml-1.5", // Large default: moderate overlap
                 }[size];
             return (jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn((_a = theme.avatarSizes) === null || _a === void 0 ? void 0 : _a[size], avatarMargin, "border-0", pill ? "rounded-full" : "rounded-md ring-0") }));
         }
         if (iconStart) {
-            return (jsx("span", { className: cn("flex-shrink-0", (_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]), "aria-hidden": "true", children: iconStart }));
+            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 }));
         }
         if (withDot) {
             if (shouldAnimate) {
@@ -192,7 +194,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_p = theme.dismissButtonSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-label": "Dismiss", disabled: disabled, children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissIconSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true" }) }))] })) : null;
+                        : 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;
     }
     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
                         ? {
@@ -200,7 +202,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                                 ? `${maxWidth}px`
                                 : maxWidth,
                         }
-                        : undefined, children: children }), dismissible && (jsx(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_r = theme.dismissButtonSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap", children: jsx(XMarkIcon, { className: cn("badge-dismiss-icon", (_s = theme.dismissIconSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-hidden": "true" }) }))] })) }));
+                        : 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" }) }))] })) }));
 }));
 Badge.displayName = "Badge";
 

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

@@ -1,3 +1,5 @@
+import { semanticBgColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Badge component
  * Uses variant-first color organization for reliable dark mode and className overrides
@@ -18,20 +20,24 @@ const badgeTheme = {
         filled: {
             neutral: "bg-[var(--color-neutral-900)] text-white ring-[var(--color-border)] " +
                 "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
-            primary: "bg-[var(--color-primary)] text-white ring-[var(--color-primary-400)] " +
+            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)]",
-            success: "bg-[var(--color-success-600)] text-white ring-[var(--color-success-300)] " +
+            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-white ring-[var(--color-warning-300)] " +
+            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-white ring-[var(--color-danger-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)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
-            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " + "",
+            neutral: "text-[var(--color-text-secondary)] 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)] " +
+                "dark:text-[var(--color-secondary-400)]",
             success: "text-[var(--color-success)] border-[var(--color-border)] " +
                 "dark:text-[var(--color-success-400)]",
             warning: "text-[var(--color-warning)] border-[var(--color-border)] " +
@@ -41,10 +47,12 @@ const badgeTheme = {
         },
         // Ghost variant - subtle background tints
         ghost: {
-            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)] " +
-                "dark:bg-[var(--color-neutral-900)] dark:text-[var(--color-text-primary)]",
+            neutral: "bg-[var(--color-neutral-200)] text-[var(--color-text-secondary)] " +
+                "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)] " +
@@ -55,47 +63,43 @@ const badgeTheme = {
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: "text-xs px-1.5 py-0.5 gap-1",
-        md: "text-sm px-2 py-0.5 gap-1",
-        lg: "text-sm px-2.5 py-1 gap-1",
+        sm: "text-sm px-1.5 py-0.5 gap-1",
+        md: "text-base px-2 py-0.5 gap-1",
+    },
+    // Border radius per size (using CSS variable)
+    radiusSizes: {
+        sm: "rounded-[calc(var(--badge-radius)*0.75)]",
+        md: "rounded-[var(--badge-radius)]",
     },
     // Additional padding for pill shape
     pillSizes: {
         sm: "px-2",
         md: "px-2.5",
-        lg: "px-3",
     },
     // Icon sizes
     iconSizes: {
         sm: "size-3",
         md: "size-3.5",
-        lg: "size-4",
     },
     // Avatar sizes (base sizes without negative margin)
     avatarSizes: {
         sm: "size-4",
         md: "size-4",
-        lg: "size-5",
     },
     // Dismiss button container sizes
     dismissButtonSizes: {
         sm: "size-3.5",
         md: "size-4",
-        lg: "size-4.5",
     },
     // Dismiss icon sizes (inside button)
     dismissIconSizes: {
         sm: "size-2.5",
         md: "size-3",
-        lg: "size-3.5",
     },
     // Dot indicator colors (simple, no dark mode needed - inherits from parent)
     dotColors: {
-        neutral: "bg-[var(--color-text-primary)]",
-        primary: "bg-[var(--color-primary-50)] dark:bg-[var(--color-primary-300)]",
-        success: "bg-[var(--color-success-50)] dark:bg-[var(--color-success-300)]",
-        warning: "bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-300)]",
-        danger: "bg-[var(--color-danger-50)] dark:bg-[var(--color-danger-300)]",
+        ...semanticBgColors,
+        neutral: "bg-[var(--color-text-secondary)]",
     },
     // State styles
     states: {