@flikk/ui 1.0.0-beta.7 → 1.0.0-beta.9

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
  */

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

@@ -10,7 +10,7 @@ const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) =>
     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: subtitle }) }), 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/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-sm",
+        sm: "size-[var(--avatar-size-sm)] text-base",
+        md: "size-[var(--avatar-size-md)] text-lg",
+        lg: "size-[var(--avatar-size-lg)] text-xl",
+        xl: "size-[var(--avatar-size-xl)] text-2xl",
     },
     // 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.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
@@ -20,6 +22,8 @@ const badgeTheme = {
                 "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
             primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-[var(--color-primary-400)] " +
                 "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
+            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] ring-[var(--color-secondary-400)] " +
+                "dark:bg-[var(--color-secondary-600)] dark:ring-[var(--color-secondary-500)]",
             success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] ring-[var(--color-success-300)] " +
                 "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
             warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] ring-[var(--color-warning-300)] " +
@@ -32,6 +36,8 @@ const badgeTheme = {
             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)] " +
@@ -45,6 +51,8 @@ const badgeTheme = {
                 "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,8 +63,8 @@ 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",
+        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: {
@@ -90,11 +98,8 @@ const badgeTheme = {
     },
     // Dot indicator colors (simple, no dark mode needed - inherits from parent)
     dotColors: {
+        ...semanticBgColors,
         neutral: "bg-[var(--color-text-secondary)]",
-        primary: "bg-[var(--color-primary)]",
-        success: "bg-[var(--color-success)]",
-        warning: "bg-[var(--color-warning)]",
-        danger: "bg-[var(--color-danger)]",
     },
     // State styles
     states: {

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

@@ -1,6 +1,7 @@
 import React, { ReactNode, MouseEvent } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 export type BadgeVariant = "filled" | "outline" | "ghost";
-export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type BadgeColor = SemanticColor;
 export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -43,7 +43,7 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
     const renderItem = (item, index, isLast) => {
         const isCurrentPage = isLast || !item.href;
         const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), item.label] }));
-        return (jsx("span", { className: "flex items-center text-sm", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
+        return (jsx("span", { className: "flex items-center text-base", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": `Navigate to ${item.label}`, children: itemContent })) }, `${item.label}-${index}`));
     };
     // Render separator
     const renderSeparator = (index) => {

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

@@ -6,7 +6,7 @@ const buttonTheme = {
     baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
-        filled: "border",
+        filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
         outline: "bg-transparent border",
         ghost: "border-transparent",
         link: "bg-transparent border-transparent",
@@ -16,54 +16,52 @@ const buttonTheme = {
         // Filled variant - solid backgrounds
         filled: {
             neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-800)] hover:ring-2 hover:ring-[var(--color-neutral-900)]/20 " +
                 "focus-visible:outline-[var(--color-neutral-800)] " +
-                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
-                "dark:hover:bg-[var(--color-neutral-300)]",
+                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)]",
             primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
-                "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
-                "dark:hover:bg-[var(--color-primary-500)]",
+                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)]",
+            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] border-[var(--color-secondary)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-contrast)] dark:bg-[var(--color-secondary-600)] dark:border-[var(--color-secondary-600)]",
             success: "bg-[var(--color-success)] text-[var(--color-success-contrast)] border-[var(--color-success)] " +
-                "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
                 "focus-visible:outline-[var(--color-success-600)] " +
-                "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)] " +
-                "dark:hover:bg-[var(--color-success-600)]",
+                "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)]",
             warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] border-[var(--color-warning)] " +
-                "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
                 "focus-visible:outline-[var(--color-warning-600)] " +
-                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)] " +
-                "dark:hover:bg-[var(--color-warning-500)]",
+                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)]",
             danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border-[var(--color-danger)] " +
-                "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
-                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)] " +
-                "dark:hover:bg-[var(--color-danger-500)]",
+                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)]",
         },
         // Outline variant - transparent bg with colored border
         outline: {
             neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-100)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:hover:bg-[var(--color-background-secondary)]",
             primary: "text-[var(--color-primary-600)] border-[var(--color-primary-600)] " +
-                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/30 " +
+                "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)] dark:border-[var(--color-primary-400)] " +
                 "dark:hover:bg-[var(--color-primary-900)]/30",
+            secondary: "text-[var(--color-secondary-600)] border-[var(--color-secondary-600)] " +
+                "hover:bg-[var(--color-secondary-50)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)] dark:border-[var(--color-secondary-400)] " +
+                "dark:hover:bg-[var(--color-secondary-900)]/30",
             success: "text-[var(--color-success-600)] border-[var(--color-success-600)] " +
-                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/30 " +
+                "hover:bg-[var(--color-success-50)] " +
                 "focus-visible:outline-[var(--color-success-600)] " +
                 "dark:text-[var(--color-success-300)] dark:border-[var(--color-success-400)] " +
                 "dark:hover:bg-[var(--color-success-900)]/30",
             warning: "text-[var(--color-warning-600)] border-[var(--color-warning-600)] " +
-                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/30 " +
+                "hover:bg-[var(--color-warning-50)] " +
                 "focus-visible:outline-[var(--color-warning-600)] " +
                 "dark:text-[var(--color-warning-300)] dark:border-[var(--color-warning-400)] " +
                 "dark:hover:bg-[var(--color-warning-900)]/30",
             danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)] " +
-                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/30 " +
+                "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
                 "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
                 "dark:hover:bg-[var(--color-danger-900)]/30",
@@ -71,27 +69,32 @@ const buttonTheme = {
         // Ghost variant - subtle background tints
         ghost: {
             neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
-                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-200)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-900)] " +
                 "dark:hover:bg-[var(--color-neutral-800)]",
             primary: "text-[var(--color-primary-600)] bg-[var(--color-primary)]/10 " +
-                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/10 " +
+                "hover:bg-[var(--color-primary-50)] " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)] dark:bg-[var(--color-primary-900)]/30 " +
                 "dark:hover:bg-[var(--color-primary-900)]/50",
+            secondary: "text-[var(--color-secondary-600)] bg-[var(--color-secondary)]/10 " +
+                "hover:bg-[var(--color-secondary-50)] " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)] dark:bg-[var(--color-secondary-900)]/30 " +
+                "dark:hover:bg-[var(--color-secondary-900)]/50",
             success: "text-[var(--color-success-600)] bg-[var(--color-success)]/10 " +
-                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
+                "hover:bg-[var(--color-success-50)] " +
                 "focus-visible:outline-[var(--color-success-600)] " +
                 "dark:text-[var(--color-success-300)] dark:bg-[var(--color-success-900)]/30 " +
                 "dark:hover:bg-[var(--color-success-900)]/50",
             warning: "text-[var(--color-warning-600)] bg-[var(--color-warning)]/10 " +
-                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
+                "hover:bg-[var(--color-warning-50)] " +
                 "focus-visible:outline-[var(--color-warning-600)] " +
                 "dark:text-[var(--color-warning-300)] dark:bg-[var(--color-warning-900)]/30 " +
                 "dark:hover:bg-[var(--color-warning-900)]/50",
             danger: "text-[var(--color-danger-600)] bg-[var(--color-danger)]/10 " +
-                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "hover:bg-[var(--color-danger-50)] " +
                 "focus-visible:outline-[var(--color-danger-600)] " +
                 "dark:text-[var(--color-danger-300)] dark:bg-[var(--color-danger-900)]/30 " +
                 "dark:hover:bg-[var(--color-danger-900)]/50",
@@ -104,6 +107,9 @@ const buttonTheme = {
             primary: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
                 "dark:text-[var(--color-primary-300)]",
+            secondary: "text-[var(--color-secondary-600)] underline-offset-4 hover:underline " +
+                "focus-visible:outline-[var(--color-secondary-600)] " +
+                "dark:text-[var(--color-secondary-300)]",
             success: "text-[var(--color-success-600)] underline-offset-4 hover:underline " +
                 "focus-visible:outline-[var(--color-success-600)] " +
                 "dark:text-[var(--color-success-300)]",
@@ -118,19 +124,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-base h-fit",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-sm",
+            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-sm h-fit",
+            link: "p-0 text-base h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-base",
+            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-base h-fit",
+            link: "p-0 text-lg h-fit",
         },
     },
     // State styles

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { RippleEffectType } from "./Button.ripple";
+import { SemanticColor } from "../../../utils/colorUtils";
 /**
  * Button component props
  * @property {ButtonColor} color - The semantic color/intent of the button
@@ -49,7 +50,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     darkMode?: boolean;
 }
-export type ButtonColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type ButtonColor = SemanticColor;
 export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonState = "default" | "disabled" | "error" | "loading";

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-sm text-[var(--color-text-primary)] flex items-center",
+    textStyles: "px-3 py-2 text-base text-[var(--color-text-primary)] flex items-center",
 };
 
 export { buttonGroupTheme };

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

@@ -371,7 +371,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             }
         }
     }, [minDate, maxDate, customIsDateDisabled, currentMonth, currentYear, onViewDateChange, mode, value, onChange, selectedValue, rangeSelectionState]);
-    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-sm font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-sm font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
+    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
                     var _a;
                     const dayNumber = day.date.getDate();
                     return (jsxs(motion.button, { type: "button", onClick: () => handleDateSelect(day.date), disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }, day.date.toISOString()));

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)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
+    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
         "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)]",
     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 " +
@@ -16,7 +16,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-xs font-medium text-[var(--color-text-muted)] " +
+    weekdayStyle: "flex items-center justify-center h-8 text-sm font-medium text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
     daysGridStyle: "grid grid-cols-7 gap-0.5",
     dayButtonStyle: "relative flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
@@ -45,9 +45,9 @@ const calendarTheme = {
         // Focus offset for dark mode
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     dayButtonSizes: {
-        sm: "size-8 text-sm",
-        md: "size-10 text-sm",
-        lg: "size-12 text-base",
+        sm: "size-8 text-base",
+        md: "size-10 text-base",
+        lg: "size-12 text-lg",
     },
 };
 

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

@@ -242,7 +242,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                                 day: "numeric",
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
-                                            }), children: [jsx("div", { className: "text-sm font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
+                                            }), children: [jsx("div", { className: "text-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
                                     }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";

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

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

@@ -126,7 +126,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-sm opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
+    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
 };
 
 export { CommandItem };

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-sm bg-transparent border-none outline-none " +
+    searchInput: "w-full px-0 py-0 text-base 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-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
+    groupLabel: "px-4 py-1 text-sm 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,7 +23,7 @@ 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-sm text-[var(--color-text-muted)] " +
+    emptyState: "px-4 py-12 text-center text-base text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
 };
 

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

@@ -13,10 +13,10 @@ const contextMenuTheme = {
     // Submenu trigger - based on Dropdown item style with chevron space
     subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-background-tertiary)] ` +
         "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
-    // Submenu content - similar to main menu but slightly smaller
+    // Submenu content - matches main dropdown menu style
     subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
-        "bg-[var(--color-background-secondary)] shadow-xl flex flex-col p-1 focus:outline-none " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
+        "bg-[var(--color-background)] shadow-real-xl flex flex-col p-1 focus:outline-none " +
+        "dark:bg-[var(--color-background-secondary)]",
     // Separator - horizontal divider
     separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
         "dark:bg-[var(--color-neutral-700)]",

package/dist/components/core/ContextMenu/ContextMenuItem.js

@@ -22,7 +22,7 @@ const ContextMenuItem = React__default.forwardRef(({ children, className, checke
     const resolvedStartContent = hasPrefix ? (jsxs(Fragment, { children: [checked && (jsx(CheckIcon, { className: theme.itemCheckedStyle, "aria-hidden": "true" })), startContent] })) : undefined;
     // Build end content: user's endContent OR shortcut display
     const resolvedEndContent = endContent ||
-        (shortcut ? (jsx("span", { className: "text-xs text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
+        (shortcut ? (jsx("span", { className: "text-sm text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
     return (jsx(MenuItem, { ref: ref, role: "menuitem", disabled: disabled, isDanger: isDanger, startContent: resolvedStartContent, endContent: resolvedEndContent, subtitle: subtitle, onActivate: handleActivate, "data-checked": checked, "aria-checked": checked ? "true" : undefined, className: cn(checked && "pl-8", className), theme: {
             baseStyle: theme.itemStyle,
             dangerStyle: theme.itemDangerStyle,

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

@@ -8,8 +8,8 @@ const drawerTheme = {
     content: "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-base font-semibold leading-6 text-[var(--color-text-primary)]",
-    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
+    subtitle: "text-base 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 border-t border-[var(--color-border)] shrink-0 " +
         "dark:border-[var(--color-neutral-700)]",

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-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
+    sectionTitleStyle: "px-2 py-1.5 text-sm 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-base font-semibold text-[var(--color-text-primary)]",
+    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)]",
     // Description text styles - customizable typography and colors
-    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
+    subtitleStyle: "text-base text-[var(--color-text-muted)]",
 };
 
 export { emptyTheme };

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

@@ -4,10 +4,10 @@
 const kbdTheme = {
     baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-[calc(var(--radius-base)*0.75)]  bg-neutral-100 border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
     sizes: {
-        sm: 'text-xs px-1 py-0.5 min-w-[1.25rem]',
-        md: 'text-sm px-1.5 py-0.5 min-w-[1.5rem]',
+        sm: 'text-sm px-1 py-0.5 min-w-[1.25rem]',
+        md: 'text-base px-1.5 py-0.5 min-w-[1.5rem]',
     },
-    separatorStyle: 'text-[var(--color-text-muted)] text-xs',
+    separatorStyle: 'text-[var(--color-text-muted)] text-sm',
 };
 
 export { kbdTheme };

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

@@ -14,7 +14,7 @@ const loaderTheme = {
     // Linear bar (foreground)
     linearBarStyle: "h-full rounded-full transition-all duration-300 ease-out",
     // Label text for linear variant
-    linearLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
+    linearLabelStyle: "text-base font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
     // Size variants for both circular and linear
     sizes: {
         sm: {

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

@@ -1,6 +1,6 @@
 const menuItemTheme = {
     // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-2.5 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
+    baseStyle: "relative flex items-center gap-2 px-2.5 py-1.5 text-base font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
         "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
         "data-[focused=true]:bg-[var(--color-background-secondary)] " +
         "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
@@ -19,7 +19,7 @@ const menuItemTheme = {
     focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     // Description text below the label
-    subtitleStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate",
 };
 
 export { menuItemTheme };

package/dist/components/core/Message/Message.js

@@ -98,7 +98,7 @@ const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, con
     const renderedContent = shouldAnimate ? (jsx(TypeWriter, { text: messageContent, speed: typingSpeed, enabled: true, className: "break-words" })) : (messageContent);
     // System messages render differently (centered, no avatar)
     if (variant === "system") {
-        return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-sm", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
+        return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-base", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
     }
     return (jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
 });

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

@@ -5,8 +5,8 @@
 const messageTheme = {
     // Shared base styles (apply to all variants)
     bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
-    containerBaseStyle: "flex items-start gap-3 h-fit text-sm",
-    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    containerBaseStyle: "flex items-start gap-3 h-fit text-base",
+    timestampStyle: "text-sm text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
     // Variant-specific modifiers (only differences)
     variants: {
         sender: {
@@ -29,14 +29,14 @@ const messageTheme = {
         system: {
             containerModifier: "justify-center", // Center alignment
             bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
-                "text-xs border-none " +
+                "text-sm border-none " +
                 // Dark mode
                 "",
             timestampModifier: "text-center",
         },
     },
     // Feature styles (streaming, actions)
-    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs " +
+    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-sm " +
         "dark:text-[var(--color-neutral-500)]",
     actionsContainerStyle: "flex items-start gap-3",
 };

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

@@ -8,8 +8,8 @@ const modalTheme = {
     },
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
-    title: "text-base leading-6 font-semibold text-[var(--color-text-primary)]",
-    subtitle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-lg leading-6 font-semibold text-[var(--color-text-primary)]",
+    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };

package/dist/components/core/NavItem/NavItem.js

@@ -104,7 +104,7 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
                     ? React__default.cloneElement(startContent, {
                         className: cn(iconClasses, startContent.props.className),
                     })
-                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
+                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
     // Wrap with link if href is provided
     if (href && !actualIsDisabled) {
         const LinkContent = (jsx("a", { href: href, className: "block group", children: content }));