@flikk/ui 1.0.0-beta.21 → 1.0.0-beta.23

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.js

@@ -1,14 +1,48 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import { StopIcon } from '@heroicons/react/24/solid';
-import { promptInputTheme } from './PromptInput.theme.js';
-import { VoiceRecorder } from './VoiceRecorder.js';
-import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
+import '../../forms/Input/Input.js';
+import '../../forms/Input/Input.theme.js';
+import '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
 import { Textarea } from '../../forms/Textarea/Textarea.js';
 import '../../forms/Textarea/Textarea.theme.js';
+import '../../forms/FormLabel/FormLabel.js';
+import '../../forms/Radio/Radio.js';
+import '../../forms/Checkbox/Checkbox.js';
+import '../../forms/Switch/Switch.js';
+import '../../forms/DatePicker/DatePicker.js';
+import '../../forms/DatePicker/DatePicker.theme.js';
+import '../../forms/DateRangePicker/DateRangePicker.js';
+import '../../forms/DateRangePicker/DateRangePicker.theme.js';
+import '../../forms/FileUpload/FileUpload.js';
+import '../../forms/FileUpload/FileUploadProgress.js';
+import '../../forms/TimePicker/TimePicker.js';
+import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import 'react-dom';
+import '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/AspectRatio/AspectRatio.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
+import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/Carousel/CarouselBody.js';
+import '../../core/CommandPalette/CommandPalette.js';
+import '../../core/Separator/Separator.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Drawer/DrawerBody.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
 import '../../core/Dropdown/DropdownMenu.js';
@@ -16,7 +50,105 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
-import { Button } from '../../core/Button/Button.js';
+import '../../core/Kbd/Kbd.js';
+import '../../core/MenuItem/MenuItem.js';
+import '../../core/Link/Link.js';
+import '../../core/Modal/Modal.js';
+import '../../core/ModalStack/ModalStack.js';
+import '../../core/PageHeading/PageHeading.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
+import '../../core/Progress/Progress.js';
+import '../../core/Rating/Rating.js';
+import '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsBody.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import { StopIcon } from '@heroicons/react/24/solid';
+import '../../core/Spinner/Spinner.js';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Message/MessageBody.js';
+import '@heroicons/react/16/solid';
+import '../../core/Empty/Empty.js';
+import '../../core/Masonry/Masonry.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarMobileTrigger.js';
+import '../../core/Sidebar/SidebarUserProfile.js';
+import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarContext.js';
+import '../../core/OfflineIndicator/OfflineIndicator.js';
+import '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import '../../core/Pill/Pill.js';
+import '../../core/Icon/Icon.js';
+import '../../forms/TimePicker/WheelColumn.js';
+import '../../forms/TimePicker/TimePicker.theme.js';
+import '../../forms/Slider/Slider.js';
+import '../../forms/Slider/Slider.theme.js';
+import '../../forms/Signature/Signature.js';
+import '../../forms/Signature/Signature.theme.js';
+import '../../forms/RichTextEditor/RichTextEditor.js';
+import '../../forms/RichTextEditor/RichTextEditor.theme.js';
+import '../../forms/InputOTP/InputOTP.js';
+import '../../forms/InputOTP/InputOTP.theme.js';
+import '../../forms/InputCreditCard/InputCreditCard.js';
+import '../../forms/InputCreditCard/InputCreditCard.theme.js';
+import '../../forms/InputAddress/InputAddress.js';
+import '../../forms/InputAddress/InputAddress.theme.js';
+import '../../forms/InputDate/InputDate.js';
+import '../../forms/InputCounter/InputCounter.js';
+import '../../forms/InputTag/InputTag.js';
+import '../../forms/InputTag/InputTag.theme.js';
+import '../../forms/Combobox/Combobox.js';
+import '../../forms/Combobox/Combobox.theme.js';
+import '../../forms/ColorPicker/ColorPicker.js';
+import '../../forms/ColorPicker/ColorPickerContext.js';
+import '../../forms/ColorPicker/ColorPickerTrigger.js';
+import '../../forms/ColorPicker/ColorPickerBody.js';
+import '../../forms/ColorPicker/ColorPicker2DCanvas.js';
+import '../../forms/ColorPicker/ColorPickerSwatch.js';
+import '../../forms/ColorPicker/ColorPickerSliders.js';
+import '../../forms/ColorPicker/ColorPickerInput.js';
+import '../../forms/ColorPicker/ColorPickerFormatSelector.js';
+import '../../forms/ColorPicker/ColorPickerEyeDropper.js';
+import '../../forms/ColorPicker/ColorPickerPresets.js';
+import '../../forms/ColorPicker/ColorPickerSavedColors.js';
+import '../../forms/ColorPicker/ColorPickerHeader.js';
+import '../../forms/ColorPicker/ColorPickerGradient.js';
+import '../../forms/ColorPicker/ColorPickerImage.js';
+import '../../forms/SelectableCard/SelectableCard.js';
+import '../../forms/Mention/Mention.js';
+import '../../forms/Mention/Mention.theme.js';
+import '../../forms/CronInput/CronInput.js';
+import '../../forms/CronInput/CronInput.theme.js';
+import { promptInputTheme } from './PromptInput.theme.js';
+import { VoiceRecorder } from './VoiceRecorder.js';
+import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
 
 /**
  * Default model options for the model selector

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/PromptInput/VoiceRecorder.js

@@ -3,7 +3,91 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { motion } from 'motion/react';
 import { PlayIcon, PauseIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
+import '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/AspectRatio/AspectRatio.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/Carousel/CarouselBody.js';
+import '../../core/CommandPalette/CommandPalette.js';
+import '../../core/Separator/Separator.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Drawer/DrawerBody.js';
+import '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/Kbd/Kbd.js';
+import '../../core/MenuItem/MenuItem.js';
+import '../../core/Link/Link.js';
+import '../../core/Modal/Modal.js';
+import '../../core/ModalStack/ModalStack.js';
+import '../../core/PageHeading/PageHeading.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
+import '../../core/Progress/Progress.js';
+import '../../core/Rating/Rating.js';
+import '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsBody.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import '@heroicons/react/24/solid';
+import '../../core/Spinner/Spinner.js';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Message/MessageBody.js';
+import '@heroicons/react/16/solid';
+import '../../core/Empty/Empty.js';
+import '../../core/Masonry/Masonry.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarMobileTrigger.js';
+import '../../core/Sidebar/SidebarUserProfile.js';
+import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarContext.js';
+import '../../core/OfflineIndicator/OfflineIndicator.js';
+import '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import '../../core/Pill/Pill.js';
+import '../../core/Icon/Icon.js';
 
 /**
  * Format seconds into MM:SS display

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",
 };