@flikk/ui 1.0.0-beta.20 → 1.0.0-beta.22

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -3,8 +3,8 @@ const codeBlockTheme = {
     header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
-    filename: "text-base font-medium text-[var(--color-text-secondary)] truncate",
-    languageLabel: "text-sm uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
+    filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
+    languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
     lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
     highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",

package/dist/components/ai/PromptInput/PromptInput.theme.js

@@ -1,12 +1,12 @@
 const promptInputTheme = {
     baseStyle: "rounded-[var(--card-radius)] border-[1px] border-[var(--color-border)] flex flex-col gap-2 shadow-real-md p-4 outline-2 outline-[var(--color-border)]/30 bg-white dark:bg-[var(--color-background-secondary)] ",
-    textareaStyle: "w-full bg-transparent text-base text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-200 ease-in-out",
+    textareaStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-200 ease-in-out",
     footerStyle: "flex justify-between items-end",
     actionsStyle: "flex gap-1",
     submitButtonStyle: "rounded-full",
     dropzoneStyle: "absolute inset-0 z-20 flex flex-col items-center justify-center gap-3 rounded-[var(--card-radius)] border-2 border-dashed border-[var(--color-primary)] bg-[var(--color-primary-200)]/80 backdrop-blur-sm dark:bg-[var(--color-primary-900)]/80",
-    dropzoneTitleStyle: "text-base font-medium text-[var(--color-primary)]",
-    dropzoneSubtitleStyle: "text-sm text-[var(--color-primary)]/70",
+    dropzoneTitleStyle: "text-sm font-medium text-[var(--color-primary)]",
+    dropzoneSubtitleStyle: "text-xs text-[var(--color-primary)]/70",
     dropzoneActionsStyle: "flex items-center gap-3 mt-1",
     voiceRecorderStyle: "",
     states: {

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -2,7 +2,7 @@ const promptSuggestionTheme = {
     baseStyle: "inline-flex items-center gap-2 py-1 px-3 rounded-[var(--card-radius)] " +
         "bg-[var(--color-surface)] " +
         "border border-[var(--color-border)] " +
-        "text-base text-[var(--color-text-primary)] " +
+        "text-sm text-[var(--color-text-primary)] " +
         "cursor-pointer transition-all duration-300 " +
         "hover:bg-[var(--color-background-secondary)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",

package/dist/components/ai/StreamingResponse/StreamingResponse.theme.js

@@ -1,9 +1,9 @@
 const streamingResponseTheme = {
     errorContainerStyle: "flex items-start gap-3 rounded-[var(--radius-base)] border border-[var(--color-danger-200)] bg-[var(--color-danger-50)] px-4 py-3",
-    errorTitleStyle: "text-base font-medium text-[var(--color-danger)]",
-    errorMessageStyle: "text-base text-[var(--color-text-secondary)] mt-1",
-    errorRetryButtonStyle: "mt-2 text-base font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
-    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-base",
+    errorTitleStyle: "text-sm font-medium text-[var(--color-danger)]",
+    errorMessageStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
+    errorRetryButtonStyle: "mt-2 text-sm font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
+    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-sm",
     loadingDotStyle: "w-1.5 h-1.5 rounded-full bg-current animate-pulse",
 };
 

package/dist/components/ai/TokenCounter/TokenCounter.theme.js

@@ -8,19 +8,19 @@ const tokenCounterTheme = {
     progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
     sizes: {
         sm: {
-            container: "text-sm",
+            container: "text-xs",
             icon: "size-3",
-            text: "text-sm",
+            text: "text-xs",
         },
         md: {
-            container: "text-base",
+            container: "text-sm",
             icon: "size-4",
-            text: "text-base",
+            text: "text-sm",
         },
         lg: {
-            container: "text-lg",
+            container: "text-base",
             icon: "size-5",
-            text: "text-lg",
+            text: "text-base",
         },
     },
 };

package/dist/components/charts/ActivityRings/ActivityRings.theme.js

@@ -18,8 +18,8 @@ const activityRingsTheme = {
         ],
     },
     centerText: {
-        label: "text-2xl font-semibold text-[var(--color-text-primary)]",
-        suffix: "text-base font-normal text-[var(--color-text-secondary)]/80",
+        label: "text-xl font-semibold text-[var(--color-text-primary)]",
+        suffix: "text-sm font-normal text-[var(--color-text-secondary)]/80",
     },
 };
 

package/dist/components/charts/DonutChart/DonutChart.theme.js

@@ -10,8 +10,8 @@ const donutChartTheme = {
     progress: "text-[var(--color-primary)] transition-all duration-300",
     // Text styling
     text: {
-        label: "text-2xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
-        subtitle: "text-base text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
+        label: "text-xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
+        subtitle: "text-sm text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
     },
     // Default color palette (CSS variables for dark mode support)
     // Note: These are resolved at runtime via getComputedStyle

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.theme.js

@@ -8,7 +8,7 @@ const multiSegmentDonutChartTheme = {
     track: "text-[var(--color-border)]",
     // Legend styling
     legend: {
-        container: "flex flex-col gap-2 text-base",
+        container: "flex flex-col gap-2 text-sm",
         item: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity",
         label: "text-[var(--color-text-primary)] font-medium",
         value: "text-[var(--color-text-secondary)] ml-auto",

package/dist/components/charts/Heatmap/Heatmap.theme.js

@@ -10,7 +10,7 @@ const heatmapTheme = {
     // Base cell styles (individual cells add opacity via inline styles)
     cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
     // Axis labels using CSS variables for dark mode support
-    axisLabelStyle: "text-sm text-[var(--color-text-secondary)] font-medium select-none",
+    axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
     // Legend using correct CSS variables
     legendStyle: "w-full space-y-1.5 mt-3",
 };

package/dist/components/charts/RadarChart/RadarChart.theme.js

@@ -13,11 +13,11 @@ const radarChartTheme = {
     // Axis spoke stroke color (gray-300 equivalent)
     axisColor: "#d1d5db",
     // Axis label classes (applied to <text> elements via className)
-    labelStyle: "text-sm fill-[#6b7280] select-none",
+    labelStyle: "text-xs fill-[#6b7280] select-none",
     // Legend container
     legendStyle: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2",
     // Individual legend item
-    legendItemStyle: "flex items-center gap-2 text-base",
+    legendItemStyle: "flex items-center gap-2 text-sm",
     // Colored dot in legend
     legendDotStyle: "w-2.5 h-2.5 rounded-full shrink-0",
     // Legend label text

package/dist/components/charts/ScatterPlot/ScatterPlot.theme.js

@@ -4,7 +4,7 @@
 const scatterPlotTheme = {
     containerStyle: 'relative inline-flex flex-col items-center w-full',
     svgStyle: 'overflow-visible',
-    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-base',
+    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
     // Grid styles
     gridLineStyle: 'stroke-[var(--color-border)]',
     // Axis styles
@@ -17,7 +17,7 @@ const scatterPlotTheme = {
     legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
     legendItemStyle: 'flex items-center gap-2',
     legendDotStyle: 'w-3 h-3 rounded-full',
-    legendLabelStyle: 'text-base text-[var(--color-text-secondary)]',
+    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
     // Default category colors using CSS variables
     colors: [
         'var(--color-primary)',

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-sm  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
+    baseStyle: "transition-all duration-200 text-xs  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-base",
+    contentStyle: "whitespace-nowrap text-sm",
     multiSeriesContainerStyle: "text-left",
-    categoryStyle: "text-sm font-semibold mb-1 text-[var(--color-text-primary)]",
+    categoryStyle: "text-xs 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-sm opacity-90 text-[var(--color-text-secondary)]",
-    valueStyle: "text-sm font-semibold text-[var(--color-text-primary)]",
+    labelStyle: "text-xs opacity-90 text-[var(--color-text-secondary)]",
+    valueStyle: "text-xs font-semibold text-[var(--color-text-primary)]",
 };
 
 export { chartTooltipTheme };

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

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

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

@@ -1,11 +1,11 @@
 const avatarTheme = {
     baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     sizes: {
-        xs: "size-[var(--avatar-size-xs)] text-sm",
-        sm: "size-[var(--avatar-size-sm)] text-sm",
-        md: "size-[var(--avatar-size-md)] text-base",
-        lg: "size-[var(--avatar-size-lg)] text-base",
-        xl: "size-[var(--avatar-size-xl)] text-base",
+        xs: "size-[var(--avatar-size-xs)] text-xs",
+        sm: "size-[var(--avatar-size-sm)] text-xs",
+        md: "size-[var(--avatar-size-md)] text-sm",
+        lg: "size-[var(--avatar-size-lg)] text-sm",
+        xl: "size-[var(--avatar-size-xl)] text-sm",
     },
     statuses: {
         online: "bg-[var(--color-success)]",
@@ -17,11 +17,11 @@ const avatarTheme = {
     titleStyle: "font-medium leading-tight text-[var(--color-text-primary)] truncate",
     subtitleStyle: "leading-tight text-[var(--color-text-muted)] truncate",
     textSizes: {
-        xs: "text-sm",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-base",
-        xl: "text-base",
+        xs: "text-xs",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+        xl: "text-sm",
     },
     gapSizes: {
         xs: "gap-1.5",

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-surface)] text-[var(--color-text-secondary)] font-semibold text-sm flex items-center justify-center size-7",
+    overflowAvatarStyle: "bg-[var(--color-surface)] text-[var(--color-text-secondary)] font-semibold text-xs flex items-center justify-center size-7",
 };
 
 export { avatarGroupTheme };

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

@@ -139,20 +139,10 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     const renderLeftContent = () => {
         var _a, _b, _c;
         if (avatar) {
-            // Apply negative margin for overlap effect (scales with badge size)
-            const avatarMargin = pill
-                ? {
-                    sm: "-ml-1.5",
-                    md: "-ml-1.5",
-                }[size]
-                : {
-                    sm: "-ml-1.5",
-                    md: "-ml-1",
-                }[size];
-            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") }) }));
+            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") }) }));
         }
         if (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 }));
+            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 }));
         }
         if (withDot) {
             if (shouldAnimate) {

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

@@ -62,8 +62,8 @@ const badgeTheme = {
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: "text-sm px-1.5 py-0.25 gap-1",
-        md: "text-base px-2 py-0.25 gap-1",
+        sm: "text-xs px-1.5 py-0.25 gap-1",
+        md: "text-sm px-2 py-0.25 gap-1",
     },
     // Additional padding for pill shape
     pillSizes: {

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

@@ -152,19 +152,19 @@ 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-base",
+            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "font-semibold p-0 text-base h-fit",
+            link: "font-semibold p-0 text-sm 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",
+            default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "font-semibold p-0 text-base h-fit",
+            link: "font-semibold p-0 text-sm h-fit",
         },
         lg: {
-            default: "font-semibold min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
+            default: "font-semibold min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "font-semibold p-0 text-lg h-fit",
+            link: "font-semibold p-0 text-base h-fit",
         },
     },
     // State styles

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

@@ -44,7 +44,7 @@ const buttonGroupTheme = {
         vertical: "h-px self-stretch",
     },
     // Text styles for ButtonGroupText component
-    textStyles: "px-3 py-2 text-base text-[var(--color-text-primary)] flex items-center",
+    textStyles: "px-3 py-2 text-sm text-[var(--color-text-primary)] flex items-center",
 };
 
 export { buttonGroupTheme };

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

@@ -5,7 +5,7 @@
 const calendarTheme = {
     baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
     headerStyle: "flex items-center justify-between mb-4",
-    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] " + "",
+    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",
     navButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] border-0 bg-transparent " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] " +
@@ -15,7 +15,7 @@ const calendarTheme = {
         "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-800)] " +
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     weekdaysStyle: "grid grid-cols-7 mb-2",
-    weekdayStyle: "flex items-center justify-center h-8 text-sm font-medium text-[var(--color-text-muted)] " +
+    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
     daysGridStyle: "grid grid-cols-7 gap-y-0.5 gap-x-0",
     rangeCellStyle: "bg-[var(--color-primary-50)]/70 " +
@@ -49,9 +49,9 @@ const calendarTheme = {
         // Focus offset for dark mode
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     dayButtonSizes: {
-        sm: "size-8 text-base",
-        md: "size-10 text-base",
-        lg: "size-12 text-lg",
+        sm: "size-8 text-sm",
+        md: "size-10 text-sm",
+        lg: "size-12 text-base",
     },
 };
 

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",
-    titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
-    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1.5",
+    titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1.5",
     bodyStyle: "p-6 pt-0 first:pt-6",
     footerStyle: "flex items-center p-6 pt-0 first:pt-6",
 };

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

@@ -8,12 +8,12 @@ const commandPaletteTheme = {
         // Dark mode
         "dark:ring-black/30",
     searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
-    searchInput: "w-full px-0 py-0 text-base bg-transparent border-none outline-none " +
+    searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "focus:outline-none focus:ring-0 " +
         // Dark mode
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
-    groupLabel: "px-4 py-1 text-sm font-semibold text-[var(--color-text-muted)]/50 uppercase " +
+    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
         "dark:text-[var(--color-neutral-500)]",
     commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
         "hover:bg-[var(--color-primary)] " +
@@ -23,9 +23,9 @@ const commandPaletteTheme = {
         // Dark mode - adjust hover state
         "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
         "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
-    emptyState: "px-4 py-12 text-center text-base text-[var(--color-text-muted)] " +
+    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
-    footer: "border-t border-[var(--color-border)] px-4 py-2 text-sm text-[var(--color-text-muted)]font-medium",
+    footer: "border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-muted)]font-medium",
 };
 
 export { commandPaletteTheme };

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

@@ -4,6 +4,7 @@
 const drawerOverlayAnimations = {
     initial: {
         opacity: 0,
+        willChange: "opacity",
     },
     animate: {
         opacity: 1,
@@ -26,7 +27,7 @@ const drawerOverlayAnimations = {
 const getDrawerContentAnimations = (position) => {
     const animations = {
         left: {
-            initial: { x: "-100%" },
+            initial: { x: "-100%", willChange: "transform" },
             animate: {
                 x: 0,
                 transition: {
@@ -45,7 +46,7 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         right: {
-            initial: { x: "100%" },
+            initial: { x: "100%", willChange: "transform" },
             animate: {
                 x: 0,
                 transition: {
@@ -64,7 +65,7 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         top: {
-            initial: { y: "-100%" },
+            initial: { y: "-100%", willChange: "transform" },
             animate: {
                 y: 0,
                 transition: {
@@ -83,7 +84,7 @@ const getDrawerContentAnimations = (position) => {
             },
         },
         bottom: {
-            initial: { y: "100%" },
+            initial: { y: "100%", willChange: "transform" },
             animate: {
                 y: 0,
                 transition: {

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

@@ -8,8 +8,8 @@ const drawerTheme = {
     inner: "h-full flex flex-col",
     header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
-    title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
-    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-base font-semibold leading-6 text-[var(--color-text-primary)]",
+    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-4",
     footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
         "",

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

@@ -9,7 +9,7 @@ const dropdownTheme = {
     itemDangerStyle: menuItemTheme.dangerStyle,
     itemFocusStyle: menuItemTheme.focusStyle,
     // Section title styling
-    sectionTitleStyle: "px-2 py-1.5 text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
+    sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
     // Separator between sections

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

@@ -5,9 +5,9 @@ const emptyTheme = {
     // Base container styles - customizable spacing, colors, and layout
     baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
     // Title text styles - customizable typography and colors
-    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)]",
+    titleStyle: "text-base font-semibold text-[var(--color-text-primary)]",
     // Description text styles - customizable typography and colors
-    subtitleStyle: "text-base text-[var(--color-text-muted)]",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
 };
 
 export { emptyTheme };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './Icon.types';
+export declare const Icon: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/Icon/Icon.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { iconTheme } from './Icon.theme.js';
+import { paymentMethods } from './data/paymentMethods.js';
+import { platforms } from './data/platforms.js';
+import { fileTypes } from './data/fileTypes.js';
+
+function renderPaymentIcon(icon, size, colorMode, className, theme, ref, props) {
+    var _a;
+    const method = paymentMethods[icon];
+    const dimensions = typeof size === 'number'
+        ? { width: size, height: Math.round(size * (2 / 3)) }
+        : ((_a = theme.paymentSizes[size]) !== null && _a !== void 0 ? _a : { width: 60, height: 40 });
+    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: method.viewBox, width: dimensions.width, height: dimensions.height, role: "img", "aria-label": `${method.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: method.shapes.map((shape, i) => {
+            if (shape.type === 'rect') {
+                const fill = colorMode === 'color' ? shape.fill : 'transparent';
+                const stroke = colorMode === 'color' ? shape.stroke : (shape.stroke ? 'currentColor' : undefined);
+                return (jsx("rect", { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx: shape.rx, fill: fill, stroke: stroke, strokeWidth: shape.strokeWidth }, i));
+            }
+            return (jsx("path", { d: shape.d, fill: colorMode === 'color' ? shape.fill : 'currentColor', fillRule: shape.fillRule, clipRule: shape.clipRule }, i));
+        }) }));
+}
+function renderSocialIcon(icon, size, colorMode, className, theme, ref, props) {
+    var _a;
+    const platform = platforms[icon];
+    const resolvedSize = typeof size === 'number' ? size : (_a = theme.squareSizes[size]) !== null && _a !== void 0 ? _a : 24;
+    const fill = colorMode === 'color' ? platform.brandColor : 'currentColor';
+    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: platform.viewBox, width: resolvedSize, height: resolvedSize, fill: fill, role: "img", "aria-label": `${platform.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: platform.shapes.map((shape, i) => {
+            var _a;
+            return (jsx("path", { d: shape.d, fill: colorMode === 'color' ? ((_a = shape.fill) !== null && _a !== void 0 ? _a : undefined) : undefined }, i));
+        }) }));
+}
+function renderFileTypeIcon(icon, size, colorMode, className, theme, ref, props) {
+    var _a;
+    const fileType = fileTypes[icon];
+    const resolvedSize = typeof size === 'number' ? size : (_a = theme.squareSizes[size]) !== null && _a !== void 0 ? _a : 24;
+    const strokeColor = colorMode === 'color' ? '#D5D7DA' : 'currentColor';
+    const strokeOpacity = colorMode === 'color' ? 1 : 0.3;
+    const badgeColor = colorMode === 'color' ? fileType.color : 'currentColor';
+    const labelText = fileType.label;
+    const badgeWidth = Math.round(labelText.length * 6 + 8);
+    const badgeX = 1;
+    const textX = badgeX + badgeWidth / 2;
+    return (jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40", width: resolvedSize, height: resolvedSize, fill: "none", role: "img", "aria-label": `${fileType.label} file`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: [jsx("path", { d: "M11 0.75H27C27.1212 0.75 27.2375 0.798088 27.3232 0.883789L38.1162 11.6768C38.2019 11.7625 38.25 11.8788 38.25 12V36C38.25 37.7949 36.7949 39.25 35 39.25H11C9.20507 39.25 7.75 37.7949 7.75 36V4C7.75 2.20507 9.20508 0.75 11 0.75Z", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("path", { d: "M27 0.5V8C27 10.2091 28.7909 12 31 12H38.5", stroke: strokeColor, strokeWidth: "1.5", opacity: strokeOpacity }), jsx("rect", { x: badgeX, y: 18, width: badgeWidth, height: 16, rx: 2, fill: badgeColor, opacity: colorMode === 'color' ? 1 : 0.15 }), jsx("text", { x: textX, y: 26, textAnchor: "middle", dominantBaseline: "central", fill: colorMode === 'color' ? 'white' : 'currentColor', fontSize: 9.5, fontWeight: 700, fontFamily: "Arial, Helvetica, sans-serif", letterSpacing: 0.3, children: labelText })] }));
+}
+const Icon = React__default.forwardRef(({ icon, size = 'md', colorMode = 'color', className, theme: customTheme, ...props }, ref) => {
+    const theme = {
+        ...iconTheme,
+        ...customTheme,
+        paymentSizes: { ...iconTheme.paymentSizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.paymentSizes },
+        squareSizes: { ...iconTheme.squareSizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.squareSizes },
+    };
+    if (icon in paymentMethods) {
+        return renderPaymentIcon(icon, size, colorMode, className, theme, ref, props);
+    }
+    if (icon in platforms) {
+        return renderSocialIcon(icon, size, colorMode, className, theme, ref, props);
+    }
+    if (icon in fileTypes) {
+        return renderFileTypeIcon(icon, size, colorMode, className, theme, ref, props);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn(`[Icon]: Unknown icon "${icon}".`);
+    }
+    return null;
+});
+Icon.displayName = 'Icon';
+
+export { Icon };

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

@@ -0,0 +1,2 @@
+import { IconTheme } from './Icon.types';
+export declare const iconTheme: IconTheme;

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

@@ -0,0 +1,19 @@
+const iconTheme = {
+    baseStyle: 'inline-block shrink-0',
+    paymentSizes: {
+        xs: { width: 36, height: 24 },
+        sm: { width: 48, height: 32 },
+        md: { width: 60, height: 40 },
+        lg: { width: 90, height: 60 },
+        xl: { width: 120, height: 80 },
+    },
+    squareSizes: {
+        xs: 16,
+        sm: 20,
+        md: 24,
+        lg: 32,
+        xl: 40,
+    },
+};
+
+export { iconTheme };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+export type PaymentIconName = 'visa' | 'mastercard' | 'amex' | 'applepay' | 'paypal';
+export type SocialIconName = 'github' | 'x' | 'linkedin' | 'instagram' | 'facebook' | 'youtube' | 'discord' | 'dribbble' | 'tiktok' | 'reddit' | 'twitch' | 'slack' | 'medium' | 'pinterest' | 'snapchat' | 'whatsapp' | 'telegram' | 'google' | 'apple';
+export type FileTypeName = 'pdf' | 'doc' | 'docx' | 'txt' | 'xls' | 'xlsx' | 'csv' | 'ppt' | 'mp3' | 'wav' | 'mp4' | 'mov' | 'jpg' | 'png' | 'svg' | 'gif' | 'zip' | 'rar';
+export type IconName = PaymentIconName | SocialIconName | FileTypeName;
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 'color' — uses brand/category colors. 'mono' — uses currentColor. */
+export type IconColorMode = 'color' | 'mono';
+export interface IconDimensions {
+    width: number;
+    height: number;
+}
+export interface IconTheme {
+    baseStyle: string;
+    /** Non-square dimensions for payment icons */
+    paymentSizes: Record<IconSize, IconDimensions>;
+    /** Square size (single number) for social and file-type icons */
+    squareSizes: Record<IconSize, number>;
+}
+export interface IconThemeOverrides {
+    baseStyle?: string;
+    paymentSizes?: Partial<Record<IconSize, IconDimensions>>;
+    squareSizes?: Partial<Record<IconSize, number>>;
+}
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+    icon: IconName;
+    /** Named size preset or custom pixel value. Payment icons scale at 3:2 ratio; others are square. */
+    size?: IconSize | number;
+    colorMode?: IconColorMode;
+    className?: string;
+    theme?: IconThemeOverrides;
+}

package/dist/components/core/{FileTypeIcon → Icon/data}/fileTypes.d.ts

@@ -1,4 +1,4 @@
-import { FileTypeName } from './FileTypeIcon.types';
+import { FileTypeName } from '../Icon.types';
 export interface FileTypeData {
     label: string;
     color: string;