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

package/dist/components/data-display/GanttChart/GanttMilestone.js

@@ -13,7 +13,7 @@ const GanttMilestone = React__default.memo(({ task, group, top, }) => {
     const left = offset * dayWidth + dayWidth / 2;
     const size = 14;
     const barColor = (_a = task.color) !== null && _a !== void 0 ? _a : group.color;
-    const tooltipContent = (jsxs("div", { className: "text-xs space-y-1", children: [jsx("div", { className: "font-semibold", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 text-[var(--color-text-placeholder)]", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsx("div", { children: formatDateShort(task.endDate) })] }));
+    const tooltipContent = (jsxs("div", { className: "text-sm space-y-1", children: [jsx("div", { className: "font-semibold", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 text-[var(--color-text-placeholder)]", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsx("div", { children: formatDateShort(task.endDate) })] }));
     const handleClick = (e) => {
         onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
     };
@@ -33,7 +33,7 @@ const GanttMilestone = React__default.memo(({ task, group, top, }) => {
                             border: "2px solid var(--color-background, white)",
                             transform: "rotate(45deg)",
                             boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
-                        } }), jsx("span", { className: "absolute text-xs font-medium whitespace-nowrap pointer-events-none", style: {
+                        } }), jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
                             left: size + 4,
                             top: size / 2,
                             transform: "translateY(-50%)",

package/dist/components/data-display/GanttChart/GanttTableGroupRow.js

@@ -14,7 +14,7 @@ const GanttTableGroupRow = React__default.memo(({ row, }) => {
                 e.preventDefault();
                 toggleGroup(row.group.id);
             }
-        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-xs text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-background-tertiary)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
+        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-background-tertiary)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
                     e.stopPropagation();
                     onTaskAdd(row.group.id);
                 }, children: jsx(PlusIcon, { className: "size-4" }) }))] }));

package/dist/components/data-display/GanttChart/GanttTaskBar.js

@@ -162,7 +162,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
         onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
     };
     // ----- Tooltip -----
-    const tooltipContent = (jsxs("div", { className: "text-xs space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-sm", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
+    const tooltipContent = (jsxs("div", { className: "text-sm space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-base", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
                                 width: `${task.progress}%`,
                                 backgroundColor: barColor,
                             } }) })] }), task.assignee && (jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" }), jsx("span", { children: task.assignee.name })] })), isBehindSchedule && (jsxs("div", { className: "text-[var(--color-warning)] text-[10px]", children: ["Behind schedule (expected ", expectedProgress, "%)"] }))] }));
@@ -195,7 +195,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
                                     } }), isBehindSchedule && (jsx("div", { className: "absolute top-0 bottom-0 w-px", style: {
                                         left: `${expectedProgress}%`,
                                         borderLeft: "2px dashed rgba(255,255,255,0.5)",
-                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-xs text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-xs font-medium whitespace-nowrap pointer-events-none", style: {
+                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
                                 left: visualWidth + 6,
                                 top: barHeight / 2,
                                 transform: "translateY(-50%)",

package/dist/components/data-display/KPI/KPI.js

@@ -43,7 +43,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
                                 ease: "easeOut",
                                 delay: i * 0.03,
                             } })) }, i));
-                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-xs" : "text-sm"), children: subtitle }))] }));
+                }) })), subtitle && (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle }))] }));
 });
 KPI.displayName = "KPI";
 

package/dist/components/data-display/KPI/KPI.theme.js

@@ -3,23 +3,23 @@ import { semanticBgColors } from '../../../utils/colorUtils.js';
 const kpiTheme = {
     baseStyle: "flex flex-col gap-3",
     valueSizes: {
-        sm: "text-xl font-bold text-[var(--color-text-primary)]",
+        sm: "text-2xl font-bold text-[var(--color-text-primary)]",
         md: "text-3xl font-bold text-[var(--color-text-primary)]",
         lg: "text-4xl font-bold text-[var(--color-text-primary)]",
     },
     labelStyle: "text-[var(--color-text-muted)]",
     labelSizes: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
     },
     trendPositive: "text-[var(--color-success)]",
     trendNegative: "text-[var(--color-danger)]",
     trendNeutral: "text-[var(--color-text-muted)]",
     trendSizes: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
     },
     barFilledColors: {
         ...semanticBgColors,

package/dist/components/data-display/Metric/Metric.js

@@ -11,7 +11,7 @@ const Metric = React__default.forwardRef(({ value, label, subtitle, trendValue,
     const variantStyles = metricTheme.variants[variant];
     const variantColorStyles = metricTheme.variantColors[variant] || "";
     const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
-    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-sm font-medium", trendDirection === "up"
+    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: cn("flex items-center w-fit gap-1 text-base font-medium", trendDirection === "up"
                                                 ? "text-[var(--color-success)]"
                                                 : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] }))] }), subtitle && (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
 });

package/dist/components/data-display/Metric/Metric.theme.js

@@ -51,25 +51,25 @@ const metricTheme = {
             container: "", // Padding moved to content section
             contentPadding: "p-3",
             iconContainer: "size-10",
-            label: "text-xs",
-            value: "text-xl",
-            subtitle: "text-xs mt-1",
+            label: "text-sm",
+            value: "text-2xl",
+            subtitle: "text-sm mt-1",
         },
         md: {
             container: "", // Padding moved to content section
             contentPadding: "p-4",
             iconContainer: "size-14",
-            label: "text-sm",
+            label: "text-base",
             value: "text-2xl",
-            subtitle: "text-xs mt-0.5",
+            subtitle: "text-sm mt-0.5",
         },
         lg: {
             container: "", // Padding moved to content section
             contentPadding: "p-5",
             iconContainer: "size-16",
-            label: "text-base",
+            label: "text-lg",
             value: "text-3xl",
-            subtitle: "text-sm mt-1",
+            subtitle: "text-base mt-1",
         },
     },
     // Common element styles

package/dist/components/data-display/Table/Table.theme.js

@@ -3,7 +3,7 @@ const tableTheme = {
     // Uses border-separate so sticky cells keep their borders (border-collapse
     // paints borders on the table grid, which sticky cells float above)
     // Light: white background | Dark: neutral-900 background
-    baseStyle: "w-full border-separate border-spacing-0 text-sm " + "",
+    baseStyle: "w-full border-separate border-spacing-0 text-base " + "",
     // Variant styles
     // Each variant gets dark mode border colors and alternate row colors
     variants: {
@@ -23,7 +23,7 @@ const tableTheme = {
     // Header styles
     // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
     headerStyle: "text-left font-semibold sticky top-0 border-b first:pl-4 last:pr-4 " +
-        "text-[var(--color-text-secondary)]/80 text-sm border-[var(--color-border)] ",
+        "text-[var(--color-text-secondary)]/80 text-base border-[var(--color-border)] ",
     // Cell styles — borders on cells (not rows) so sticky columns keep them
     // Light: primary text | Dark: neutral-300 text
     cellStyle: "border-b border-b-[var(--color-border)] first:pl-4 last:pr-4 " +
@@ -46,7 +46,7 @@ const tableTheme = {
         "dark:shadow-[var(--color-neutral-900)]/50",
     // Utility controls - Column manager button
     // Light: white bg with light border | Dark: neutral-800 bg with neutral-600 border
-    columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-sm font-medium " +
+    columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-base font-medium " +
         "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 " +
         "dark:focus:ring-offset-[var(--color-neutral-900)] " +
         "bg-white border border-[var(--color-neutral-300)] text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] " +

package/dist/components/data-display/Table/TableActionsMenu.js

@@ -17,7 +17,7 @@ const TableActionsMenu = ({ actions, row, onClose, className, }) => {
             var _a;
             const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
             const Icon = action.icon;
-            return (jsxs("button", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
+            return (jsxs("button", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-base font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
                     ? "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)] focus:bg-[var(--color-danger-50)]"
                     : "text-[var(--color-text-primary)]", isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent"), role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
         }) }));

package/dist/components/data-display/Table/TableColumnManager.js

@@ -16,7 +16,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Content, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-xs uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Content, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

package/dist/components/data-display/Table/TableFilter.js

@@ -23,7 +23,7 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
     if (isBetweenOperator(filter.operator)) {
         const betweenValue = Array.isArray(filter.value) ? filter.value : ["", ""];
         const inputType = filterType === "date" ? "date" : "number";
-        return (jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [jsx(Input, { value: (_a = betweenValue[0]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onValueChange([e.target.value, betweenValue[1]]), placeholder: "Min", size: "sm", type: inputType, className: "flex-1 min-w-0" }), jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "\u2013" }), jsx(Input, { value: (_b = betweenValue[1]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onValueChange([betweenValue[0], e.target.value]), placeholder: "Max", size: "sm", type: inputType, className: "flex-1 min-w-0" })] }));
+        return (jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [jsx(Input, { value: (_a = betweenValue[0]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onValueChange([e.target.value, betweenValue[1]]), placeholder: "Min", size: "sm", type: inputType, className: "flex-1 min-w-0" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "\u2013" }), jsx(Input, { value: (_b = betweenValue[1]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onValueChange([betweenValue[0], e.target.value]), placeholder: "Max", size: "sm", type: inputType, className: "flex-1 min-w-0" })] }));
     }
     // Select filter type
     if (filterType === "select" && (column === null || column === void 0 ? void 0 : column.filterOptions)) {
@@ -206,9 +206,9 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return true;
         return f.value != null && f.value !== "";
     }).length;
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
-                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "or"
+                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
                                                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("or"), children: "OR" })] }))] }), jsx("div", { className: "-m-1 p-1 space-y-2 max-h-[300px] overflow-y-auto", children: activeFilters.map((filter) => {
                                 const selectedColumn = getSelectedColumn(filter.columnId);

package/dist/components/data-display/Table/TableHeader.js

@@ -48,7 +48,7 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                     }, row: {}, rowId: "", isHeader: true, theme: theme, children: jsx("div", { className: "flex items-center gap-2", children: selectable && selectionType === 'checkbox' && (jsx(Checkbox, { id: "table-select-all", name: "table-select-all", value: "select-all", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, "aria-label": "Select all rows" })) }) })), columns.map((column, index) => {
                     const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                     const isSortable = column.sortable && onSortChange;
-                    return (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-xs", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
+                    return (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
                 })] }) }));
 }
 const TableHeader = TableHeaderComponent;

package/dist/components/data-display/Table/TablePagination.js

@@ -18,7 +18,7 @@ const TablePagination = React__default.forwardRef(({ currentPage, totalItems, pa
         label: option.toString(),
         value: option,
     }));
-    return (jsxs("div", { ref: ref, className: cn("flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 px-4 py-3 border-t border-[var(--color-border)] bg-[var(--color-background)]", className), children: [jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (value) => onPageSizeChange(value), options: pageSizeSelectOptions, size: "sm", className: "w-20" })] })), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: totalItems > 0 ? (jsxs(Fragment, { children: ["Showing ", startItem.toLocaleString(), " to ", endItem.toLocaleString(), " of", " ", totalItems.toLocaleString(), " results"] })) : ("No results") })] }), totalPages > 1 && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, showPrevNext: true, showFirstLast: false, siblingCount: 1 }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 px-4 py-3 border-t border-[var(--color-border)] bg-[var(--color-background)]", className), children: [jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-base text-[var(--color-text-muted)]", children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (value) => onPageSizeChange(value), options: pageSizeSelectOptions, size: "sm", className: "w-20" })] })), jsx("div", { className: "text-base text-[var(--color-text-muted)]", children: totalItems > 0 ? (jsxs(Fragment, { children: ["Showing ", startItem.toLocaleString(), " to ", endItem.toLocaleString(), " of", " ", totalItems.toLocaleString(), " results"] })) : ("No results") })] }), totalPages > 1 && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, showPrevNext: true, showFirstLast: false, siblingCount: 1 }))] }));
 });
 TablePagination.displayName = "Table.Pagination";
 

package/dist/components/data-display/Table/TableSelectionHeader.js

@@ -11,7 +11,7 @@ import 'react';
 const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkActions = [], onClearSelection, className, }) => {
     if (selectedCount === 0)
         return null;
-    return (jsxs("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-background-secondary)] z-10", className), children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-[var(--color-text-muted)] text-sm border-r border-[var(--color-border)] pr-3", children: selectedCount === totalCount
+    return (jsxs("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-background-secondary)] z-10", className), children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-[var(--color-text-muted)] text-base border-r border-[var(--color-border)] pr-3", children: selectedCount === totalCount
                             ? `All ${selectedCount} selected`
                             : `${selectedCount} selected` }), bulkActions.length > 0 && (jsx("div", { className: "flex items-center gap-2", children: bulkActions.map((action) => {
                             return (jsx(Button, { color: "neutral", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm", children: action.label }, action.id));

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -312,7 +312,7 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
     // Determine content based on variant
     const renderContent = () => {
         if (variant === 'user') {
-            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, alt: name || 'User', size: "xs" }), name && (jsx("span", { className: "text-white text-xs font-medium whitespace-nowrap", children: name }))] }));
+            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, alt: name || 'User', size: "xs" }), name && (jsx("span", { className: "text-white text-sm font-medium whitespace-nowrap", children: name }))] }));
         }
         return children;
     };

package/dist/components/effects/CustomCursor/CustomCursor.theme.js

@@ -6,7 +6,7 @@ const customCursorTheme = {
     baseStyle: "pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]",
     cursorStyle: "transition-transform duration-150",
     cursorFollowVariants: {
-        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
+        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-base text-[var(--color-text-primary)]",
         user: "flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl",
     },
     cursorFollowColors: {

package/dist/components/effects/StickyScroll/StickyScroll.js

@@ -108,7 +108,7 @@ const StickyScroll = React__default.forwardRef(({ sections, contentPosition = 'l
                 sectionRefs.current[index] = el;
             }, className: "flex min-h-[60vh] flex-col justify-center py-16 lg:py-24", children: [jsx("h3", { className: cn('text-2xl font-semibold transition-colors duration-300 lg:text-3xl', index === activeIndex
                         ? 'text-[var(--color-text-primary)]'
-                        : 'text-[var(--color-text-muted)]'), children: section.title }), jsx("p", { className: cn('mt-4 max-w-lg text-base leading-relaxed transition-colors duration-300 lg:text-lg', index === activeIndex
+                        : 'text-[var(--color-text-muted)]'), children: section.title }), jsx("p", { className: cn('mt-4 max-w-lg text-lg leading-relaxed transition-colors duration-300 lg:text-xl', index === activeIndex
                         ? 'text-[var(--color-text-secondary)]'
                         : 'text-[var(--color-text-placeholder)]'), children: section.description })] }, section.id))) }));
     /* -------------------------------------------------------------- */

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -30,7 +30,7 @@ const checkboxTheme = {
         "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
         "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
     // Description text - light and dark
-    descriptionStyle: "text-sm mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
+    descriptionStyle: "text-base mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",
@@ -38,8 +38,8 @@ const checkboxTheme = {
     // Group styles
     groupStyle: "flex flex-col gap-1.5",
     groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
-    groupDescriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
-    groupErrorStyle: "text-sm text-[var(--color-danger)] mt-1.5",
+    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
     groupItemsStyle: "flex flex-col gap-3",
 };
 

package/dist/components/forms/ColorPicker/ColorPicker.js

@@ -152,7 +152,7 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         getFormattedValue,
         onChange,
     ]);
-    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (jsx(FormLabel, { htmlFor: "color-picker", required: required, state: state, children: label })), children, helperText && (jsx("div", { className: cn('mt-1.5 text-xs text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
+    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (jsx(FormLabel, { htmlFor: "color-picker", required: required, state: state, children: label })), children, helperText && (jsx("div", { className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
 });
 ColorPickerRoot.displayName = 'ColorPicker';
 /**

package/dist/components/forms/ColorPicker/ColorPicker.theme.js

@@ -9,7 +9,7 @@ const colorPickerTheme = {
     // Content matches Dropdown menu style
     contentStyle: 'min-w-[min(280px,calc(100vw-2rem))] max-w-[320px] rounded-xl border border-[var(--color-border)] bg-white shadow-real-xl p-3 focus:outline-none',
     sliderContainerStyle: 'space-y-2',
-    sliderLabelStyle: 'flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]',
+    sliderLabelStyle: 'flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]',
     inputContainerStyle: 'flex items-center gap-2',
     formatSelectorStyle: 'flex-shrink-0',
     presetGridStyle: 'mt-3 grid grid-cols-6 sm:grid-cols-8 gap-1.5',

package/dist/components/forms/ColorPicker/ColorPickerInput.js

@@ -45,7 +45,7 @@ const ColorPickerInput = ({ className, ...props }) => {
     };
     // Render different input types based on format
     if (format === "hex") {
-        return (jsx("div", { className: cn(theme.inputContainerStyle, className), ...props, children: jsx(Input, { type: "text", size: "sm", value: inputValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, state: isInvalid ? "invalid" : "default", placeholder: "#000000", className: "flex-1 text-sm font-mono", "aria-label": "Hex color value" }) }));
+        return (jsx("div", { className: cn(theme.inputContainerStyle, className), ...props, children: jsx(Input, { type: "text", size: "sm", value: inputValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, state: isInvalid ? "invalid" : "default", placeholder: "#000000", className: "flex-1 text-base font-mono", "aria-label": "Hex color value" }) }));
     }
     if (format === "rgb") {
         const rgb = hslToRgb(color.h, color.s, color.l);
@@ -56,21 +56,21 @@ const ColorPickerInput = ({ className, ...props }) => {
                             if (parsed)
                                 setColor(parsed);
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Red", placeholder: "R" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.g, onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Red", placeholder: "R" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.g, onChange: (e) => {
                         const newG = parseInt(e.target.value, 10);
                         if (!isNaN(newG) && newG >= 0 && newG <= 255) {
                             const parsed = parseColor(`rgb(${rgb.r}, ${newG}, ${rgb.b})`);
                             if (parsed)
                                 setColor(parsed);
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Green", placeholder: "G" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.b, onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Green", placeholder: "G" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.b, onChange: (e) => {
                         const newB = parseInt(e.target.value, 10);
                         if (!isNaN(newB) && newB >= 0 && newB <= 255) {
                             const parsed = parseColor(`rgb(${rgb.r}, ${rgb.g}, ${newB})`);
                             if (parsed)
                                 setColor(parsed);
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Blue", placeholder: "B" })] }));
+                    }, className: "flex-1 text-base", "aria-label": "Blue", placeholder: "B" })] }));
     }
     if (format === "hsl") {
         return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 360, value: Math.round(color.h), onChange: (e) => {
@@ -78,17 +78,17 @@ const ColorPickerInput = ({ className, ...props }) => {
                         if (!isNaN(newH) && newH >= 0 && newH <= 360) {
                             setColor({ ...color, h: newH });
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Hue", placeholder: "H" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.s), onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Hue", placeholder: "H" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.s), onChange: (e) => {
                         const newS = parseInt(e.target.value, 10);
                         if (!isNaN(newS) && newS >= 0 && newS <= 100) {
                             setColor({ ...color, s: newS });
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Saturation", placeholder: "S" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.l), onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Saturation", placeholder: "S" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.l), onChange: (e) => {
                         const newL = parseInt(e.target.value, 10);
                         if (!isNaN(newL) && newL >= 0 && newL <= 100) {
                             setColor({ ...color, l: newL });
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Lightness", placeholder: "L" })] }));
+                    }, className: "flex-1 text-base", "aria-label": "Lightness", placeholder: "L" })] }));
     }
     return null;
 };

package/dist/components/forms/CronInput/CronInput.js

@@ -100,7 +100,7 @@ const CronInput = React__default.forwardRef(({ value: controlledValue, defaultVa
     }, [handleRawInputBlur]);
     const showVisual = mode === "visual" || (mode === "both" && activeMode === "visual");
     const showRaw = mode === "raw" || (mode === "both" && activeMode === "raw");
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), role: "group", "aria-label": label || "Cron expression builder", ...props, children: [label && (jsx(FormLabel, { htmlFor: `${generatedId}-cron`, state: disabled ? "disabled" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "visual" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "visual", children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Visual"] }), jsxs("button", { type: "button", onClick: () => setActiveMode("raw"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "raw" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "raw", children: [jsx(ClockIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Cron"] })] })), showPresets && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Presets" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: CRON_PRESETS.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.value), disabled: disabled, className: cn(theme.presetButtonStyle, activePreset === preset.value && theme.presetButtonActiveStyle), title: preset.description, "aria-pressed": activePreset === preset.value, children: preset.label }, preset.value))) })] })), showVisual && (jsxs("div", { className: theme.builderStyle, children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: disabled, size: size })] })), showRaw && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Cron Expression" }), jsx("input", { type: "text", value: rawInput, onChange: handleRawInputChange, onBlur: handleRawInputBlur, onKeyDown: handleRawKeyDown, disabled: disabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size]), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": !validateCron(rawInput), spellCheck: false, autoComplete: "off" }), !validateCron(rawInput) && rawInput !== cronValue && (jsx("div", { className: cn(theme.errorStyle, "mt-1"), children: "Invalid cron expression. Format: minute hour day month weekday" }))] })), showVisual && !showRaw && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: cn(theme.fieldLabelStyle, "shrink-0"), children: "Expression:" }), jsx("code", { className: cn("font-mono text-xs px-2 py-1 rounded-[var(--form-radius)]", "bg-[var(--color-background-secondary)] text-[var(--color-text-primary)]", "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-200)]"), children: cronValue })] })), showDescription && isValid && (jsxs("div", { className: theme.descriptionStyle, children: [jsx(ClockIcon, { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }), jsx("span", { children: description })] })), showNextRuns && isValid && nextRuns.length > 0 && (jsxs("div", { className: theme.nextRunsStyle, children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1"), children: "Next runs" }), nextRuns.map((date, index) => (jsxs("div", { className: theme.nextRunItemStyle, children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }), jsx("span", { children: formatNextRun(date) })] }, index)))] }))] }));
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), role: "group", "aria-label": label || "Cron expression builder", ...props, children: [label && (jsx(FormLabel, { htmlFor: `${generatedId}-cron`, state: disabled ? "disabled" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "visual" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "visual", children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Visual"] }), jsxs("button", { type: "button", onClick: () => setActiveMode("raw"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "raw" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "raw", children: [jsx(ClockIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Cron"] })] })), showPresets && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Presets" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: CRON_PRESETS.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.value), disabled: disabled, className: cn(theme.presetButtonStyle, activePreset === preset.value && theme.presetButtonActiveStyle), title: preset.description, "aria-pressed": activePreset === preset.value, children: preset.label }, preset.value))) })] })), showVisual && (jsxs("div", { className: theme.builderStyle, children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: disabled, size: size })] })), showRaw && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Cron Expression" }), jsx("input", { type: "text", value: rawInput, onChange: handleRawInputChange, onBlur: handleRawInputBlur, onKeyDown: handleRawKeyDown, disabled: disabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size]), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": !validateCron(rawInput), spellCheck: false, autoComplete: "off" }), !validateCron(rawInput) && rawInput !== cronValue && (jsx("div", { className: cn(theme.errorStyle, "mt-1"), children: "Invalid cron expression. Format: minute hour day month weekday" }))] })), showVisual && !showRaw && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: cn(theme.fieldLabelStyle, "shrink-0"), children: "Expression:" }), jsx("code", { className: cn("font-mono text-sm px-2 py-1 rounded-[var(--form-radius)]", "bg-[var(--color-background-secondary)] text-[var(--color-text-primary)]", "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-200)]"), children: cronValue })] })), showDescription && isValid && (jsxs("div", { className: theme.descriptionStyle, children: [jsx(ClockIcon, { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }), jsx("span", { children: description })] })), showNextRuns && isValid && nextRuns.length > 0 && (jsxs("div", { className: theme.nextRunsStyle, children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1"), children: "Next runs" }), nextRuns.map((date, index) => (jsxs("div", { className: theme.nextRunItemStyle, children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }), jsx("span", { children: formatNextRun(date) })] }, index)))] }))] }));
 });
 CronInput.displayName = "CronInput";
 

package/dist/components/forms/CronInput/CronInput.theme.js

@@ -8,13 +8,13 @@ const cronInputTheme = {
     // Outer wrapper
     baseStyle: "relative w-full flex flex-col gap-3",
     // Label
-    labelStyle: "text-sm font-medium text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    labelStyle: "text-base font-medium text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
     // Visual builder grid
     builderStyle: "grid grid-cols-5 gap-2",
     // Individual field group
     fieldGroupStyle: "flex flex-col gap-1",
     // Field label
-    fieldLabelStyle: "text-xs font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
+    fieldLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
     // Select dropdown
     fieldSelectStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
         "bg-white text-[var(--color-text-primary)] cursor-pointer transition-all " +
@@ -45,7 +45,7 @@ const cronInputTheme = {
         lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
     },
     // Mode toggle button
-    modeToggleStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] px-3 py-1.5 text-xs font-medium " +
+    modeToggleStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] px-3 py-1.5 text-sm font-medium " +
         "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
         "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
         "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
@@ -56,7 +56,7 @@ const cronInputTheme = {
         "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)] " +
         "dark:hover:bg-[var(--color-primary-500)]/15",
     // Preset button
-    presetButtonStyle: "inline-flex items-center rounded-[var(--form-radius)] px-2.5 py-1 text-xs font-medium " +
+    presetButtonStyle: "inline-flex items-center rounded-[var(--form-radius)] px-2.5 py-1 text-sm font-medium " +
         "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
         "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
         "hover:text-[var(--color-text-primary)] " +
@@ -67,18 +67,18 @@ const cronInputTheme = {
         "hover:bg-[var(--color-primary-100)] " +
         "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)]",
     // Human-readable description
-    descriptionStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)] " +
+    descriptionStyle: "flex items-center gap-2 text-base text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-400)]",
     // Next runs container
     nextRunsStyle: "flex flex-col gap-1",
     // Individual next run item
-    nextRunItemStyle: "flex items-center gap-2 text-xs text-[var(--color-text-muted)] " +
+    nextRunItemStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-400)]",
     // Section heading
-    sectionHeadingStyle: "text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
+    sectionHeadingStyle: "text-sm font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
         "dark:text-[var(--color-neutral-400)]",
     // Validation error
-    errorStyle: "text-xs text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
+    errorStyle: "text-sm text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
 };
 
 export { cronInputTheme };

package/dist/components/forms/DatePicker/DatePicker.theme.js

@@ -35,7 +35,7 @@ const datePickerTheme = {
     presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
         "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
     // Preset button - with dark mode support
-    presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
+    presetButtonStyle: "w-full text-left px-3 py-2 text-base rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
         "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +

package/dist/components/forms/DatePicker/DatePickerContent.js

@@ -213,7 +213,7 @@ const DatePickerContent = ({ isOpen, className, onClose, portal = true, placemen
                                                     const adjustedLeft = new Date(newDate);
                                                     adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
                                                     setLeftCalendarDate(adjustedLeft);
-                                                }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
+                                                }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: [jsx("div", { className: "text-base text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
                     // Single calendar for single mode
                     jsx("div", { className: "flex-1 p-4", children: children || (jsx(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
                                 handleDateSelect(value);

package/dist/components/forms/FileUpload/FileUpload.js

@@ -198,10 +198,10 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
                         e.preventDefault();
                         handleClick();
                     }
-                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-xs text-[var(--color-text-muted)] mt-1", children: description }))] }) }), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
+                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-base font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1", children: description }))] }) }), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
                     const previewUrl = previewUrls.get(file);
                     const isImage = file.type.startsWith("image/");
-                    return (jsxs("div", { className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsxs("div", { className: theme.previewFileStyle, children: [jsx(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-xs", children: file.name }), jsx("span", { className: "text-xs text-[var(--color-text-placeholder)] mt-1", children: formatFileSize(file.size) })] })), jsx(Button, { variant: "filled", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {
+                    return (jsxs("div", { className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsxs("div", { className: theme.previewFileStyle, children: [jsx(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-sm", children: file.name }), jsx("span", { className: "text-sm text-[var(--color-text-placeholder)] mt-1", children: formatFileSize(file.size) })] })), jsx(Button, { variant: "filled", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {
                                     e.stopPropagation();
                                     handleRemoveFile(file);
                                 }, "aria-label": `Remove ${file.name}`, className: cn(theme.removeButtonStyle, "rounded-full !p-0 size-6"), children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) })] }, `${file.name}-${index}`));

package/dist/components/forms/FileUpload/FileUpload.theme.js

@@ -16,11 +16,11 @@ const fileUploadTheme = {
     // Upload icon
     iconStyle: "size-8 text-[var(--color-text-placeholder)]",
     // Main text
-    textStyle: "text-sm font-medium text-[var(--color-text-primary)]",
+    textStyle: "text-base font-medium text-[var(--color-text-primary)]",
     // Helper text
-    helperTextStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    helperTextStyle: "text-base text-[var(--color-text-muted)] mt-1",
     // Description below dropzone
-    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-1",
+    descriptionStyle: "text-sm text-[var(--color-text-muted)] mt-1",
     // Preview container
     previewContainerStyle: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4",
     // Individual preview item
@@ -28,7 +28,7 @@ const fileUploadTheme = {
     // Preview image
     previewImageStyle: "w-full h-32 object-cover",
     // Preview file (non-image)
-    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-sm text-[var(--color-text-secondary)] text-center break-all",
+    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-base text-[var(--color-text-secondary)] text-center break-all",
     // Remove button
     removeButtonStyle: "absolute top-1 right-1  -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
 };

package/dist/components/forms/FormLabel/FormLabel.theme.js

@@ -3,7 +3,7 @@
  */
 const formLabelTheme = {
     // Base styles for the label element
-    baseStyle: "block text-sm/6 font-medium mb-2",
+    baseStyle: "block text-base/6 font-medium mb-2",
     // State variants - using design tokens from global.scss
     stateStyles: {
         default: "text-[var(--color-text-primary)]",