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

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';

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

@@ -275,14 +275,14 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         numberValue !== undefined &&
         typeof min === "number" &&
         numberValue <= min;
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })) : (jsxs("div", { className: "flex justify-between items-center", children: [label, showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] }))), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
                                         iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
                                         setIsFocused(true);
                                         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                                     }, onBlur: (e) => {
                                         setIsFocused(false);
                                         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Input.displayName = "Input";
 

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

@@ -27,10 +27,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * supports masked input types: 'creditCard', 'expiryDate', 'phone', 'ssn', 'currency'
      */
     type?: InputType;
-    /** Optional label text for the input */
-    label?: string;
-    /** Optional helper text displayed below the input */
-    helperText?: string;
+    /** Optional label for the input — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Optional helper text below the input — pass a string for default styling, or a ReactNode for full control */
+    helperText?: React.ReactNode;
     /** Icon to display before the input (small decorative) */
     iconStart?: React.ReactNode;
     /** Icon to display after the input (small decorative) */

package/dist/components/forms/Radio/Radio.js

@@ -34,7 +34,7 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const inputProps = isControlled
         ? { checked }
         : { defaultChecked };
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2.5 top-0.25" : "size-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: radioTheme.descriptionStyle, children: description }))] }))] }));
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2.5 top-0.25" : "size-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: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
 });
 RadioComponent.displayName = "Radio";
 const Radio = Object.assign(RadioComponent, { Group: RadioGroup });

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

@@ -20,8 +20,8 @@ export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>,
     value: string | number;
     checked?: boolean;
     onChange?: (checked: boolean, value: string | number) => void;
-    label?: string;
-    description?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
     state?: RadioState;
     size?: RadioSize;
     className?: string;
@@ -37,9 +37,9 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetE
     size?: RadioSize;
     state?: RadioState;
     orientation?: RadioGroupOrientation;
-    label?: string;
-    description?: string;
-    error?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
     required?: boolean;
     className?: string;
 }

package/dist/components/forms/Radio/RadioGroup.js

@@ -29,7 +29,7 @@ const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultV
         state,
     }), [groupName, currentValue, size, state]);
     const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
-    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "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", radioTheme.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: radioTheme.groupDescriptionStyle, children: description })), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), error && (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: error }))] }) }));
+    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "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", radioTheme.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: radioTheme.groupDescriptionStyle, children: description })) : description), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: error })) : error)] }) }));
 });
 RadioGroup.displayName = "Radio.Group";
 

package/dist/components/forms/Select/Select.js

@@ -439,7 +439,7 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
     // Generate a unique ID if not provided
     const generatedId = React__default.useId();
     const selectId = id || generatedId;
-    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: selectId, required: required, children: label })), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
+    return (jsx(SelectProvider, { selectState: selectState, size: size, componentState: state, theme: themeOverrides, searchable: searchable, enableTypeahead: enableTypeahead, children: jsxs("div", { ref: ref, className: cn("relative", containerStyle, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: selectId, required: required, children: label })) : (label)), jsx(SelectButton, { id: selectId, disabled: disabled, isOpen: isOpen, state: state, size: size, iconStart: iconStart, iconEnd: iconEnd || defaultChevronIcon, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn(multiple && selectedValues.length > 0
                             ? "flex min-w-0"
                             : "block truncate", (multiple ? selectedValues.length > 0 : selectedOption)
                             ? theme.valueTextStyle
@@ -450,7 +450,7 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
                                 ? isValueSelected(option.value)
                                 : option.value === selectedValue;
                             return (jsx(SelectOption, { value: option.value, isSelected: isSelected, disabled: option.disabled || false, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(PlusIcon, { className: "size-4 shrink-0" }), jsx("span", { className: "block truncate", children: option.label })] })) : multiple ? (jsxs(Fragment, { children: [jsx("span", { className: "block truncate", children: option.label }), isSelected && (jsx("span", { className: theme.checkIconStyle, children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2 }) }))] })) : (jsx("span", { className: "block truncate", children: option.label })) }, option.id));
-                        }) }), helperText && (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
+                        }) }), helperText && (typeof helperText === 'string' ? (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })) : (helperText)), name && (jsx("input", { type: "hidden", name: name, value: selectedValue !== undefined ? String(selectedValue) : "" }))] }) }));
 };
 const Select = React__default.forwardRef(SelectInner);
 Select.displayName = "Select";

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

@@ -46,10 +46,10 @@ export interface SelectProps<T = any> extends SelectBaseProps {
     required?: boolean;
     /** Array of options to display */
     options: SelectOption<T>[];
-    /** Label text for the select */
-    label?: string;
-    /** Helper text displayed below the select */
-    helperText?: string;
+    /** Label for the select — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Helper text below the select — pass a string for default styling, or a ReactNode for full control */
+    helperText?: React.ReactNode;
     /** Enable multi-select mode — value becomes T[] and chips are rendered in trigger */
     multiple?: boolean;
     /** Maximum number of chips to display before showing "+N more" (default: 3) */

package/dist/components/forms/Switch/Switch.js

@@ -34,7 +34,7 @@ const Switch = React__default.forwardRef(({ id, checked: controlledChecked, onCh
         }
     };
     // Label and description content
-    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label && (jsx(FormLabel, { htmlFor: id, state: state, children: label })), description && (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description }))] })) : null;
+    const labelContent = label || description ? (jsxs("div", { className: "flex grow flex-col", children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: id, state: state, children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description), children: description })) : (description))] })) : null;
     // Build data attributes for state-based styling
     const trackDataState = isDisabled
         ? "disabled"

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

@@ -16,10 +16,10 @@ export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     checked?: boolean;
     /** Function called when the switch state changes */
     onChange?: (checked: boolean) => void;
-    /** Label text for the switch */
-    label?: string;
-    /** Optional description text */
-    description?: string;
+    /** Label for the switch — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Optional description — pass a string for default styling, or a ReactNode for full control */
+    description?: React.ReactNode;
     /** The state of the switch (default, disabled, invalid) */
     state?: SwitchState;
     /** Position of the label relative to the switch */

package/dist/components/forms/Textarea/Textarea.js

@@ -37,7 +37,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
     const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
     const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (typeof label === 'string' ? (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })) : (label)), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
                                 var _a;
                                 setIsFocused(true);
                                 (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -45,7 +45,7 @@ const Textarea = React__default.forwardRef(({ size = "md", state = "default", cl
                                 var _a;
                                 setIsFocused(false);
                                 (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                            }, ...props }) }) }) }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+                            }, ...props }) }) }) }), helperText && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Textarea.displayName = "Textarea";
 

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

@@ -11,10 +11,10 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     size?: TextareaSize;
     /** The state of the textarea (default, disabled, invalid) */
     state?: TextareaState;
-    /** Optional label text for the textarea */
-    label?: string;
-    /** Optional helper text displayed below the textarea */
-    helperText?: string;
+    /** Optional label for the textarea — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Optional helper text below the textarea — pass a string for default styling, or a ReactNode for full control */
+    helperText?: React.ReactNode;
     /** Additional class name for the textarea */
     className?: string;
     /** Additional class name for the label */

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

@@ -19,8 +19,8 @@ export { checkboxTheme } from "./Checkbox";
 export { Switch } from "./Switch";
 export type { SwitchProps, SwitchThemeOverrides } from "./Switch";
 export { switchTheme } from "./Switch";
-export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets, } from "./DatePicker";
-export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
+export { DatePicker, DatePickerTrigger, DatePickerBody, DatePickerPresets, } from "./DatePicker";
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerBodyProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
 export { datePickerTheme } from "./DatePicker";
 export { FileUpload } from "./FileUpload";
 export type { FileUploadProps, FileUploadThemeOverrides, UploadedFile, } from "./FileUpload";

package/dist/components/forms/index.js

@@ -49,7 +49,7 @@ export { Combobox } from './Combobox/Combobox.js';
 export { comboboxTheme } from './Combobox/Combobox.theme.js';
 export { ColorPicker, ColorPickerContext, useColorPicker } from './ColorPicker/ColorPicker.js';
 export { ColorPickerTrigger } from './ColorPicker/ColorPickerTrigger.js';
-export { ColorPickerContent } from './ColorPicker/ColorPickerContent.js';
+export { ColorPickerBody } from './ColorPicker/ColorPickerBody.js';
 export { ColorPicker2DCanvas } from './ColorPicker/ColorPicker2DCanvas.js';
 export { ColorPickerSwatch } from './ColorPicker/ColorPickerSwatch.js';
 export { ColorPickerSliders } from './ColorPicker/ColorPickerSliders.js';
@@ -67,6 +67,6 @@ export { mentionTheme } from './Mention/Mention.theme.js';
 export { CronInput } from './CronInput/CronInput.js';
 export { cronInputTheme } from './CronInput/CronInput.theme.js';
 export { CRON_PRESETS, cronToDescription, fieldsToCron, formatNextRun, getNextRuns, parseCron, validateCron } from './CronInput/CronInput.utils.js';
-export { DatePickerContent } from './DatePicker/DatePickerContent.js';
+export { DatePickerBody } from './DatePicker/DatePickerBody.js';
 export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';
 export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';

package/dist/components/layout/FormLayout/FormLayout.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
 import type { FormLayoutProps } from "./FormLayout.types";
 export declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
-    Body: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutBodyProps & React.RefAttributes<HTMLDivElement>>;
     Section: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutSectionProps & React.RefAttributes<HTMLElement>>;
     Footer: React.ForwardRefExoticComponent<import("./FormLayout.types").FormLayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/layout/FormLayout/FormLayout.js

@@ -1,20 +1,26 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
-import { FormLayoutHeader } from './FormLayoutHeader.js';
-import { FormLayoutBody } from './FormLayoutBody.js';
 import { FormLayoutSection } from './FormLayoutSection.js';
 import { FormLayoutFooter } from './FormLayoutFooter.js';
+import { Separator } from '../../core/Separator/Separator.js';
 
+const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
 const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
     const theme = { ...formLayoutTheme, ...customTheme };
-    return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: children }));
+    // Inject <Separator /> between any adjacent children, unless one of them is Footer
+    // (Footer already has border-t, so no separator needed before it)
+    const childArray = React__default.Children.toArray(children).filter(Boolean);
+    const rendered = childArray.map((child, index) => {
+        const prev = childArray[index - 1];
+        const needsSeparator = index > 0 && !isFooter(child) && !isFooter(prev);
+        return (jsxs(React__default.Fragment, { children: [needsSeparator && jsx(Separator, {}), child] }, index));
+    });
+    return (jsx("div", { ref: ref, className: cn(theme.root, className), ...props, children: rendered }));
 });
 FormLayoutRoot.displayName = "FormLayout";
 const FormLayout = Object.assign(FormLayoutRoot, {
-    Header: FormLayoutHeader,
-    Body: FormLayoutBody,
     Section: FormLayoutSection,
     Footer: FormLayoutFooter,
 });

package/dist/components/layout/FormLayout/FormLayout.theme.js

@@ -1,15 +1,12 @@
 const formLayoutTheme = {
     root: "flex flex-col gap-6",
-    header: "border-b border-[var(--color-border)] pb-6",
-    headerTitle: "text-lg font-semibold text-[var(--color-text-primary)]",
-    headerSubtitle: "text-lg text-[var(--color-text-muted)]",
-    body: "flex flex-col gap-6",
     section: "grid grid-cols-1 md:grid-cols-6 gap-6 md:gap-10",
     sectionSidebar: "col-span-full md:col-span-2",
     sectionTitle: "text-lg font-semibold text-[var(--color-text-primary)]",
-    sectionDescription: "text-base text-[var(--color-text-muted)] mt-1",
+    sectionSubtitle: "text-base text-[var(--color-text-muted)] mt-1",
     sectionAction: "mt-4",
     sectionContent: "col-span-full md:col-span-4 grid grid-cols-1 sm:grid-cols-2 gap-4",
+    sectionContentFull: "col-span-full grid grid-cols-1 sm:grid-cols-2 gap-4",
     footer: "flex flex-col-reverse sm:flex-row sm:justify-between items-center gap-3 border-t border-[var(--color-border)] pt-3",
 };