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

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,13 +6,14 @@ 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: {
         neutral: "bg-[var(--color-background-secondary)]",
         dark: "bg-[var(--color-text-primary)]",
         primary: "bg-[var(--color-primary)]",
+        secondary: "bg-[var(--color-secondary)]",
         success: "bg-[var(--color-success)]",
         warning: "bg-[var(--color-warning)]",
         danger: "bg-[var(--color-danger)]",
@@ -26,6 +27,7 @@ const customCursorTheme = {
         neutral: "text-[var(--color-background-secondary)]",
         dark: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)]",
+        secondary: "text-[var(--color-secondary)]",
         success: "text-[var(--color-success)]",
         warning: "text-[var(--color-warning)]",
         danger: "text-[var(--color-danger)]",

package/dist/components/effects/CustomCursor/CustomCursor.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { SpringOptions } from 'motion/react';
+import { SemanticColor } from '../../../utils/colorUtils';
 /**
  * Alignment positions for CustomCursorFollow relative to the main cursor
  */
@@ -11,7 +12,7 @@ export type CustomCursorSize = 'sm' | 'md' | 'lg';
 /**
  * Color variants for the custom cursor
  */
-export type CustomCursorColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export type CustomCursorColor = SemanticColor | 'dark';
 /**
  * Visual variants for the custom cursor
  */

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.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { CheckboxProps } from "./Checkbox.types";
-/**
- * Checkbox component for selecting one or more options
- */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> & {
+    Group: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+};

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

@@ -1,31 +1,52 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useId, useState, useRef, useEffect } from 'react';
 import { checkboxTheme } from './Checkbox.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
+import { useCheckboxGroupContext } from './CheckboxContext.js';
+import { CheckboxGroup } from './CheckboxGroup.js';
 
 /**
  * Checkbox component for selecting one or more options
  */
-const Checkbox = React__default.forwardRef(({ id, name, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state = "default", size = "md", className, ...restProps }, ref) => {
+const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
+    var _a, _b, _c, _d;
+    const autoId = useId();
+    const groupContext = useCheckboxGroupContext();
+    // Resolve props from group context or individual props
+    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
+    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
+    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
+    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
+    const isDisabled = state === "disabled";
+    // Determine checked state
+    const isInGroup = groupContext !== undefined;
     const [internalChecked, setInternalChecked] = useState(false);
+    let isChecked;
+    if (isInGroup) {
+        isChecked = groupContext.value.includes(value);
+    }
+    else if (controlledChecked !== undefined) {
+        isChecked = controlledChecked;
+    }
+    else {
+        isChecked = internalChecked;
+    }
     const inputRef = useRef(null);
-    // Determine if component is controlled or uncontrolled
-    const isControlled = controlledChecked !== undefined;
-    const isChecked = isControlled ? controlledChecked : internalChecked;
     // Set indeterminate property on the input element
     useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    // Derive state flags
-    const isDisabled = state === "disabled";
     const handleChange = (e) => {
         if (isDisabled)
             return;
-        if (!isControlled) {
+        if (isInGroup) {
+            groupContext.onChange(value, e.target.checked);
+        }
+        else if (controlledChecked === undefined) {
             setInternalChecked(e.target.checked);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
@@ -38,6 +59,9 @@ const Checkbox = React__default.forwardRef(({ id, name, value, checked: controll
                                 ref.current = node;
                         }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })), description && (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description }))] }))] }));
 });
-Checkbox.displayName = "Checkbox";
+CheckboxComponent.displayName = "Checkbox";
+const Checkbox = Object.assign(CheckboxComponent, {
+    Group: CheckboxGroup,
+});
 
 export { Checkbox };

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

@@ -30,11 +30,17 @@ 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",
     },
+    // Group styles
+    groupStyle: "flex flex-col gap-1.5",
+    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
+    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",
 };
 
 export { checkboxTheme };

package/dist/components/forms/Checkbox/Checkbox.types.d.ts

@@ -7,12 +7,16 @@ export type CheckboxState = 'default' | 'disabled';
  * Size variants for the checkbox component
  */
 export type CheckboxSize = 'sm' | 'md';
+/**
+ * Orientation for Checkbox.Group layout
+ */
+export type CheckboxGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Checkbox component props
  */
 export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    id: string;
-    name: string;
+    id?: string;
+    name?: string;
     value: string;
     checked?: boolean;
     indeterminate?: boolean;
@@ -23,6 +27,23 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElemen
     size?: CheckboxSize;
     className?: string;
 }
+/**
+ * Checkbox.Group component props
+ */
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    name?: string;
+    size?: CheckboxSize;
+    state?: CheckboxState;
+    orientation?: CheckboxGroupOrientation;
+    label?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Checkbox theme configuration
  */
@@ -32,4 +53,9 @@ export interface CheckboxTheme {
     inputStyle: string;
     descriptionStyle: string;
     sizes: Record<CheckboxSize, string>;
+    groupStyle?: string;
+    groupHorizontalStyle?: string;
+    groupDescriptionStyle?: string;
+    groupErrorStyle?: string;
+    groupItemsStyle?: string;
 }

package/dist/components/forms/Checkbox/CheckboxContext.d.ts

@@ -0,0 +1,14 @@
+import type { CheckboxSize, CheckboxState } from "./Checkbox.types";
+export interface CheckboxGroupContextValue {
+    name: string;
+    value: string[];
+    onChange: (itemValue: string, checked: boolean) => void;
+    size: CheckboxSize;
+    state: CheckboxState;
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;
+/**
+ * Returns the group context, or undefined when used outside a Checkbox.Group.
+ * This allows standalone Checkbox usage without a Group wrapper.
+ */
+export declare function useCheckboxGroupContext(): CheckboxGroupContextValue | undefined;

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const CheckboxGroupContext = createContext(undefined);
+/**
+ * Returns the group context, or undefined when used outside a Checkbox.Group.
+ * This allows standalone Checkbox usage without a Group wrapper.
+ */
+function useCheckboxGroupContext() {
+    return useContext(CheckboxGroupContext);
+}
+
+export { CheckboxGroupContext, useCheckboxGroupContext };

package/dist/components/forms/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { CheckboxGroupProps } from "./Checkbox.types";
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useState, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { checkboxTheme } from './Checkbox.theme.js';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
+import { CheckboxGroupContext } from './CheckboxContext.js';
+
+const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+    const autoId = useId();
+    const groupName = name !== null && name !== void 0 ? name : `checkbox-group-${autoId}`;
+    const labelId = `${autoId}-label`;
+    const descriptionId = `${autoId}-desc`;
+    const errorId = `${autoId}-error`;
+    // Controlled vs uncontrolled
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const handleChange = (itemValue, checked) => {
+        const next = checked
+            ? [...currentValue, itemValue]
+            : currentValue.filter((v) => v !== itemValue);
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const contextValue = useMemo(() => ({
+        name: groupName,
+        value: currentValue,
+        onChange: handleChange,
+        size,
+        state,
+    }), [groupName, currentValue, size, state]);
+    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })), description && (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), error && (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error }))] }) }));
+});
+CheckboxGroup.displayName = "Checkbox.Group";
+
+export { CheckboxGroup };

package/dist/components/forms/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export { Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckboxSize, CheckboxState } from './Checkbox.types';
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation } from './Checkbox.types';
 export { checkboxTheme } from './Checkbox.theme';

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)]",

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

@@ -88,7 +88,7 @@ const inputTheme = {
     // Password strength indicator with design tokens
     passwordStrengthIndicator: {
         containerStyle: "flex items-center gap-1",
-        labelStyle: "text-xs font-semibold mr-1",
+        labelStyle: "text-sm font-semibold mr-1",
         dotStyle: "size-1.5 rounded-full",
         dotActiveStyle: "bg-current",
         dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",