@flikk/ui 1.0.0-beta.11 → 1.0.0-beta.12

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

@@ -52,9 +52,17 @@ const FeedItem = React__default.forwardRef(({ variant = "default", title, timest
         switch (variant) {
             case "default":
             case "icon":
-                return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && jsxs("span", { className: theme.titleStyle, children: [title, " "] }), children] }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+                return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && (typeof title === 'string'
+                                    ? jsxs("span", { className: theme.titleStyle, children: [title, " "] })
+                                    : title), children] }), timestamp && (typeof timestamp === 'string'
+                            ? jsx("p", { className: theme.timestampStyle, children: timestamp })
+                            : timestamp)] }));
             case "avatar":
-                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+                return (jsxs("div", { className: theme.contentStyle, children: [title && (typeof title === 'string'
+                            ? jsx("p", { className: cn(theme.titleStyle, "text-base"), children: title })
+                            : title), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && (typeof timestamp === 'string'
+                            ? jsx("p", { className: theme.timestampStyle, children: timestamp })
+                            : timestamp)] }));
             case "comment-input": {
                 const handleSubmit = () => {
                     const trimmed = inputValue.trim();

package/dist/components/data-display/Feed/Feed.types.d.ts

@@ -36,18 +36,18 @@ export interface FeedThemeOverrides {
     commentInputWrapperStyle?: string;
     commentInputFooterStyle?: string;
 }
-export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FeedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     children: ReactNode;
     theme?: FeedThemeOverrides;
     className?: string;
 }
-export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit"> {
+export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit" | "title"> {
     /** Visual variant of the feed item */
     variant?: FeedItemVariant;
     /** Name/label of the entity that performed the action */
-    title?: string;
+    title?: ReactNode;
     /** Timestamp label (e.g. "6d ago") */
-    timestamp?: string;
+    timestamp?: ReactNode;
     /** Icon element for the "icon" variant indicator */
     icon?: ReactNode;
     /** Avatar configuration for avatar/comment-input variants */

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

@@ -11,7 +11,7 @@ const GanttTaskContextMenu = ({ task, children, }) => {
     if (readonly || (!onTaskUpdate && !onTaskDuplicate && !onTaskDelete)) {
         return jsx(Fragment, { children: children });
     }
-    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Content, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubContent, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
+    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Body, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubBody, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
 };
 
 export { GanttTaskContextMenu };

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

@@ -32,7 +32,7 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
     }, [progress, barCount]);
     const barSize = kpiTheme.barSizes[size];
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] }))] }), formattedTrend && trendDirection && (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] }))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (typeof label === 'string' ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : label)] }), formattedTrend && trendDirection && (typeof formattedTrend === 'string' ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] })) : formattedTrend)] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                     const isFilled = i < filledBars;
                     const fadeDistance = filledBars - i;
                     const fillOpacity = isFilled && fadeDistance <= 3
@@ -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-sm" : "text-base"), children: subtitle }))] }));
+                }) })), subtitle && (typeof subtitle === 'string' ? (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle })) : subtitle)] }));
 });
 KPI.displayName = "KPI";
 

package/dist/components/data-display/KPI/KPI.types.d.ts

@@ -38,7 +38,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Label describing the metric (e.g. "Fund raised", "Total Revenue")
      */
-    label?: string;
+    label?: ReactNode;
     /**
      * Percentage change value (e.g. 20, -5.3). Determines trend direction & color.
      */
@@ -46,7 +46,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Custom trend label override (default: auto-formats as "+20%" or "-5.3%")
      */
-    trendLabel?: string;
+    trendLabel?: ReactNode;
     /**
      * Progress value from 0-100. Controls how many bars are filled.
      */
@@ -59,7 +59,7 @@ export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     /**
      * Subtitle text below the bars (e.g. "Compared to last month")
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Icon to display before the label.
      */

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

@@ -11,9 +11,9 @@ 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-base 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: [typeof label === 'string' ? (jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label })) : label, jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (typeof trendValue === 'string' ? (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 }))] }) }));
+                                                : "text-[var(--color-danger)]"), children: [trendIcon, " ", trendValue] })) : trendValue)] }), subtitle && (typeof subtitle === 'string' ? (jsx("div", { className: cn(metricTheme.subtitleStyle, sizeStyles.subtitle), children: subtitle })) : subtitle)] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
 });
 Metric.displayName = "Metric";
 

package/dist/components/data-display/Metric/Metric.types.d.ts

@@ -12,16 +12,16 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Label describing the metric
      */
-    label: string;
+    label: React.ReactNode;
     /**
      * Optional subtitle or secondary text
      */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /**
      * Trend value to display (e.g., "+10.34%", "-5.2%")
      * Also acts as boolean - if provided, trend badge is shown
      */
-    trendValue?: string;
+    trendValue?: React.ReactNode;
     /**
      * Trend direction - determines icon and color
      * @default 'up'

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
 import { Cog6ToothIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../core/Button/Button.js';
 import 'react';
@@ -17,7 +18,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-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" }) })] }) })] }));
+    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.Body, { 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

@@ -8,6 +8,7 @@ import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
 import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 
@@ -206,7 +207,7 @@ 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-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"
+    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.Body, { 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-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"

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

@@ -57,7 +57,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
                                 ref(node);
                             else if (ref)
                                 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 }))] }))] }));
+                        }, 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 && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

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

@@ -21,8 +21,8 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElemen
     checked?: boolean;
     indeterminate?: boolean;
     onChange?: (checked: boolean, value: string) => void;
-    label?: string;
-    description?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
     state?: CheckboxState;
     size?: CheckboxSize;
     className?: string;
@@ -38,9 +38,9 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldS
     size?: CheckboxSize;
     state?: CheckboxState;
     orientation?: CheckboxGroupOrientation;
-    label?: string;
-    description?: string;
-    error?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
     required?: boolean;
     className?: string;
 }

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

@@ -32,8 +32,8 @@ const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defau
         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 }))] }) }));
+    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 && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : (label)), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })) : (description)), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error })) : (error))] }) }));
 });
 CheckboxGroup.displayName = "Checkbox.Group";
 

package/dist/components/forms/ColorPicker/ColorPicker.d.ts

@@ -14,7 +14,7 @@ export declare const useColorPicker: () => ColorPickerContextValue;
  */
 export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> & {
     Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
-    Content: React.FC<import("./ColorPicker.types").ColorPickerContentProps>;
+    Body: React.FC<import("./ColorPicker.types").ColorPickerBodyProps>;
     Canvas: React.FC<{
         className?: string;
     }>;

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

@@ -4,7 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { colorPickerTheme } from './ColorPicker.theme.js';
 import { ColorPicker2DCanvas } from './ColorPicker2DCanvas.js';
-import { ColorPickerContent } from './ColorPickerContent.js';
+import { ColorPickerBody } from './ColorPickerBody.js';
 import { ColorPickerEyeDropper } from './ColorPickerEyeDropper.js';
 import { ColorPickerFormatSelector } from './ColorPickerFormatSelector.js';
 import { ColorPickerInput } from './ColorPickerInput.js';
@@ -161,7 +161,7 @@ ColorPickerRoot.displayName = 'ColorPicker';
  */
 const ColorPicker = Object.assign(ColorPickerRoot, {
     Trigger: ColorPickerTrigger,
-    Content: ColorPickerContent,
+    Body: ColorPickerBody,
     Canvas: ColorPicker2DCanvas,
     Swatch: ColorPickerSwatch,
     Sliders: ColorPickerSliders,

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

@@ -149,9 +149,9 @@ export interface ColorPickerTriggerProps extends Omit<React.InputHTMLAttributes<
     className?: string;
 }
 /**
- * ColorPickerContent props
+ * ColorPickerBody props
  */
-export interface ColorPickerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ColorPickerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     className?: string;
     /**

package/dist/components/forms/ColorPicker/ColorPickerBody.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerBodyProps } from './ColorPicker.types';
+/**
+ * ColorPickerBody - Popover content wrapper following Dropdown/Select patterns
+ * Uses portal rendering and useSelectPortal for positioning
+ */
+export declare const ColorPickerBody: React.FC<ColorPickerBodyProps>;

package/dist/components/forms/ColorPicker/{ColorPickerContent.js → ColorPickerBody.js}

@@ -10,16 +10,16 @@ import { ColorPickerContext } from './ColorPicker.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**
- * ColorPickerContent - Popover content wrapper following Dropdown/Select patterns
+ * ColorPickerBody - Popover content wrapper following Dropdown/Select patterns
  * Uses portal rendering and useSelectPortal for positioning
  */
-const ColorPickerContent = ({ children, className, portal = true, animation = true, ...rest }) => {
+const ColorPickerBody = ({ children, className, portal = true, animation = true, ...rest }) => {
     const context = useContext(ColorPickerContext);
     const contentRef = useRef(null);
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
     if (!context) {
-        throw new Error('ColorPickerContent must be used within a ColorPicker');
+        throw new Error('ColorPicker.Body must be used within a ColorPicker');
     }
     const { isOpen, setIsOpen, theme, triggerRef, placement, offset } = context;
     // Use positioning hook (same as Dropdown/Select)
@@ -70,6 +70,6 @@ const ColorPickerContent = ({ children, className, portal = true, animation = tr
         ? createPortal(content, document.body)
         : content;
 };
-ColorPickerContent.displayName = 'ColorPickerContent';
+ColorPickerBody.displayName = 'ColorPicker.Body';
 
-export { ColorPickerContent };
+export { ColorPickerBody };

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

@@ -4,7 +4,7 @@
  */
 export { ColorPicker, useColorPicker, ColorPickerContext } from './ColorPicker';
 export { ColorPickerTrigger } from './ColorPickerTrigger';
-export { ColorPickerContent } from './ColorPickerContent';
+export { ColorPickerBody } from './ColorPickerBody';
 export { ColorPicker2DCanvas } from './ColorPicker2DCanvas';
 export { ColorPickerSwatch } from './ColorPickerSwatch';
 export { ColorPickerSliders } from './ColorPickerSliders';
@@ -12,6 +12,6 @@ export { ColorPickerInput } from './ColorPickerInput';
 export { ColorPickerFormatSelector } from './ColorPickerFormatSelector';
 export { ColorPickerEyeDropper } from './ColorPickerEyeDropper';
 export { ColorPickerPresets } from './ColorPickerPresets';
-export type { ColorPickerProps, ColorPickerTriggerProps, ColorPickerContentProps, ColorPickerSwatchProps, ColorPickerSlidersProps, ColorPickerInputProps, ColorPickerFormatSelectorProps, ColorPickerEyeDropperProps, ColorPickerPresetsProps, ColorPickerContextValue, ColorPickerTheme, ColorPickerThemeOverrides, ColorFormat, ColorPickerSize, ColorPickerState, } from './ColorPicker.types';
+export type { ColorPickerProps, ColorPickerTriggerProps, ColorPickerBodyProps, ColorPickerSwatchProps, ColorPickerSlidersProps, ColorPickerInputProps, ColorPickerFormatSelectorProps, ColorPickerEyeDropperProps, ColorPickerPresetsProps, ColorPickerContextValue, ColorPickerTheme, ColorPickerThemeOverrides, ColorFormat, ColorPickerSize, ColorPickerState, } from './ColorPicker.types';
 export type { RGB, RGBA, HSL, HSLA, HSV, HSVA } from './colorUtils';
 export { hexToRgb, rgbToHex, rgbToHsl, hslToRgb, rgbToHsv, hsvToRgb, validateHex, validateRgb, parseColor, formatHex, formatRgb, formatHsl, } from './colorUtils';

package/dist/components/forms/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { DatePickerProps, DatePickerState, DatePickerSize, DateRange, DatePickerMode, DatePickerTheme } from "./DatePicker.types";
 import { DatePickerTrigger } from "./DatePickerTrigger";
-import { DatePickerContent } from "./DatePickerContent";
+import { DatePickerBody } from "./DatePickerBody";
 import { DatePickerPresets } from "./DatePickerPresets";
 interface DatePickerContextType {
     mode: DatePickerMode;
@@ -16,6 +16,10 @@ interface DatePickerContextType {
     selectTodayByDefault?: boolean;
     weekdays?: string[];
     months?: string[];
+    yearRange?: {
+        start: number;
+        end: number;
+    };
     handleDateSelect: (date: Date) => void;
     handleRangeSelect?: (range: DateRange) => void;
     size: DatePickerSize;
@@ -31,8 +35,8 @@ export declare const DatePickerContext: React.Context<DatePickerContextType | un
 declare const DatePickerComponent: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 declare const DatePickerWithCompounds: typeof DatePickerComponent & {
     Trigger: typeof DatePickerTrigger;
-    Content: typeof DatePickerContent;
+    Body: typeof DatePickerBody;
     Presets: typeof DatePickerPresets;
 };
-export { DatePickerTrigger, DatePickerContent, DatePickerPresets, DatePickerWithCompounds as DatePicker, };
+export { DatePickerTrigger, DatePickerBody, DatePickerPresets, DatePickerWithCompounds as DatePicker, };
 export { DatePickerWithCompounds };

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

@@ -3,7 +3,7 @@ import React__default, { createContext, useState, useRef, useEffect, useCallback
 import { datePickerTheme } from './DatePicker.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { DatePickerTrigger } from './DatePickerTrigger.js';
-import { DatePickerContent } from './DatePickerContent.js';
+import { DatePickerBody } from './DatePickerBody.js';
 import { DatePickerPresets } from './DatePickerPresets.js';
 import { cn } from '../../../utils/cn.js';
 import { formatDateCustom } from '../../../utils/dateUtils.js';
@@ -43,7 +43,7 @@ const formatDateRange = (range, formatString, options) => {
 /**
  * Main DatePicker Component - follows Select pattern exactly
  */
-const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "single", size = "md", state = "default", value, defaultValue, placeholder = "Select date...", disabled = false, required = false, label, helperText, onChange, onFocus, onBlur, minDate, maxDate, isDateDisabled, showToday = true, selectTodayByDefault = false, weekdays, months, dateFormat, formatString, presets, className = "", wrapperClassName = "", portal = true, placement = "bottom-start", offset = 4, children, }, ref) => {
+const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "single", size = "md", state = "default", value, defaultValue, placeholder = "Select date...", disabled = false, required = false, label, helperText, onChange, onFocus, onBlur, minDate, maxDate, isDateDisabled, showToday = true, selectTodayByDefault = false, weekdays, months, dateFormat, formatString, yearRange, presets, className = "", wrapperClassName = "", portal = true, placement = "bottom-start", offset = 4, children, }, ref) => {
     var _a, _b;
     // Merge theme with defaults
     const theme = { ...datePickerTheme };
@@ -112,6 +112,7 @@ const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "singl
             selectTodayByDefault,
             weekdays,
             months,
+            yearRange,
             handleDateSelect,
             handleRangeSelect,
             size,
@@ -119,7 +120,7 @@ const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "singl
             theme,
             triggerRef,
             contentRef,
-        }), [mode, isOpen, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, size, state, theme]), children: jsxs("div", { ref: ref, className: cn(containerStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: datePickerId, required: required, children: label })), jsx(DatePickerTrigger, { id: datePickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn("block truncate", selectedValue ? theme.valueTextStyle : theme.placeholderTextStyle), children: displayValue }) }), jsx(DatePickerContent, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, children: children }), helperText && (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })), name && mode === "single" && selectedValue instanceof Date && (jsx("input", { type: "hidden", name: name, value: selectedValue.toISOString() })), name &&
+        }), [mode, isOpen, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, yearRange, handleDateSelect, handleRangeSelect, size, state, theme]), children: jsxs("div", { ref: ref, className: cn(containerStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: datePickerId, required: required, children: label })), jsx(DatePickerTrigger, { id: datePickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn("block truncate", selectedValue ? theme.valueTextStyle : theme.placeholderTextStyle), children: displayValue }) }), jsx(DatePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, children: children }), helperText && (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })), name && mode === "single" && selectedValue instanceof Date && (jsx("input", { type: "hidden", name: name, value: selectedValue.toISOString() })), name &&
                     mode === "range" &&
                     selectedValue &&
                     typeof selectedValue === "object" &&
@@ -130,7 +131,7 @@ DatePickerComponent.displayName = "DatePicker";
 const DatePickerWithCompounds = DatePickerComponent;
 // Attach compound components
 DatePickerWithCompounds.Trigger = DatePickerTrigger;
-DatePickerWithCompounds.Content = DatePickerContent;
+DatePickerWithCompounds.Body = DatePickerBody;
 DatePickerWithCompounds.Presets = DatePickerPresets;
 
-export { DatePickerWithCompounds as DatePicker, DatePickerContent, DatePickerContext, DatePickerPresets, DatePickerTrigger, DatePickerWithCompounds };
+export { DatePickerWithCompounds as DatePicker, DatePickerBody, DatePickerContext, DatePickerPresets, DatePickerTrigger, DatePickerWithCompounds };

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

@@ -26,10 +26,10 @@ const datePickerTheme = {
     triggerFocusStates: formsBaseTheme.focusStates,
     iconEndStyle: formsBaseTheme.iconStyles.right,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
-    // Dropdown content - with dark mode support
-    contentStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed " +
+    // Dropdown body - with dark mode support
+    bodyStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed " +
         "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    contentWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
+    bodyWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
         "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
     // Presets sidebar - with dark mode support
     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] " +

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

@@ -76,6 +76,11 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     dateFormat?: Intl.DateTimeFormatOptions;
     /** Custom format string for date display (e.g., 'DD MMM YYYY', 'DD/MM/YYYY') - takes precedence over dateFormat */
     formatString?: string;
+    /** Year range for the year dropdown (default: current year back to 100 years) */
+    yearRange?: {
+        start: number;
+        end: number;
+    };
     /** Auto-select today's date when calendar opens without a value (default: false) */
     selectTodayByDefault?: boolean;
     /** Additional class name for trigger button */
@@ -107,9 +112,9 @@ export interface DatePickerTriggerProps {
     children?: React.ReactNode;
 }
 /**
- * DatePicker content props
+ * DatePicker body props (calendar dropdown content)
  */
-export interface DatePickerContentProps {
+export interface DatePickerBodyProps {
     isOpen?: boolean;
     className?: string;
     onClose?: () => void;
@@ -135,8 +140,8 @@ export interface DatePickerTheme {
     triggerFocusStates: Record<DatePickerState, string>;
     iconEndStyle: string;
     iconEndPadding: string;
-    contentStyle: string;
-    contentWithPresetsStyle: string;
+    bodyStyle: string;
+    bodyWithPresetsStyle: string;
     presetsContainerStyle: string;
     presetButtonStyle: string;
     helperTextStyle: string;

package/dist/components/forms/DatePicker/DatePickerBody.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DatePickerBodyProps } from "./DatePicker.types";
+/**
+ * DatePicker Body Component - contains the Calendar and optional Presets
+ * Uses portal positioning like Select component
+ */
+export declare const DatePickerBody: React.FC<DatePickerBodyProps>;

package/dist/components/forms/DatePicker/{DatePickerContent.js → DatePickerBody.js}

@@ -43,15 +43,15 @@ const useDarkMode = () => {
     return isDark;
 };
 /**
- * DatePicker Content Component - contains the Calendar and optional Presets
+ * DatePicker Body Component - contains the Calendar and optional Presets
  * Uses portal positioning like Select component
  */
-const DatePickerContent = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, children, }) => {
+const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, children, }) => {
     const context = useContext(DatePickerContext);
     if (!context) {
-        throw new Error("DatePickerContent must be used within a DatePicker");
+        throw new Error("DatePickerBody must be used within a DatePicker");
     }
-    const { mode, theme, triggerRef, contentRef, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, } = context;
+    const { mode, theme, triggerRef, contentRef, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, yearRange, } = context;
     // Determine if we should show presets
     const showPresets = mode === "range" && presets && presets.length > 0;
     // Detect dark mode for portal content
@@ -193,7 +193,7 @@ const DatePickerContent = ({ isOpen, className, onClose, portal = true, placemen
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [isOpen, onClose]);
-    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.contentWithPresetsStyle : theme.contentStyle, className), style: {
+    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.bodyWithPresetsStyle : theme.bodyStyle, className), style: {
                 ...cssVariables,
                 ...(portal
                     ? {
@@ -206,24 +206,25 @@ const DatePickerContent = ({ isOpen, className, onClose, portal = true, placemen
                     // Dual calendar for range mode
                     jsxs(Fragment, { children: [jsx("div", { className: "flex justify-between items-start gap-6 p-4", children: children || (jsxs(Fragment, { children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
                                                     setTempRange(value); // Update temp state only
-                                                }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" }) }), jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) }), jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
                                                     setTempRange(value); // Update temp state only
                                                 }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
                                                     // Adjust left calendar when right calendar changes
                                                     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-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" })] })] })] })) : (
+                                                }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, 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);
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
-                            }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" })) })) })] })) }));
+                            }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" })) })) })] })) }));
     // Use portal if enabled and client-side - wrap with dark class for dark mode support
     if (portal && isClient) {
         return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
     }
     return contentElement;
 };
+DatePickerBody.displayName = "DatePicker.Body";
 
-export { DatePickerContent };
+export { DatePickerBody };

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

@@ -1,3 +1,3 @@
-export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets } from './DatePicker';
-export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker.types';
+export { DatePicker, DatePickerTrigger, DatePickerBody, DatePickerPresets } from './DatePicker';
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerBodyProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker.types';
 export { datePickerTheme } from './DatePicker.theme';