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

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/Mention/Mention.js

@@ -551,7 +551,7 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
                 return (jsx("span", { "data-segment": "text", children: seg.text || (i === 0 ? "" : "") }, `text-${i}`));
             }
             return (jsx(Tag, { size: mentionTagSize, removable: false, avatar: seg.data.avatar
-                    ? { src: seg.data.avatar, alt: seg.data.label }
+                    ? { src: seg.data.avatar, name: seg.data.label }
                     : undefined, contentEditable: false, className: cn(theme.mentionTagStyle, i === selectedMentionIndex &&
                     "ring-2 ring-[var(--color-primary)] ring-offset-1", mentionTagClassName), [MENTION_ATTR]: seg.data.id,
                 "data-mention-label": seg.data.label,
@@ -579,7 +579,7 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
         return (jsxs("div", { role: "option", "aria-selected": isHighlighted, "data-suggestion-index": index, className: cn(theme.suggestionStyle, isHighlighted && theme.suggestionHighlightedStyle), onMouseEnter: () => setHighlightedIndex(index), onMouseDown: (e) => {
                 e.preventDefault();
                 insertMention(suggestion);
-            }, children: [jsx(Avatar, { src: suggestion.avatar, alt: suggestion.label, size: "xs", className: "ring-0 border-0" }), jsxs("div", { className: "flex flex-col min-w-0", children: [jsx("span", { className: theme.suggestionLabelStyle, children: suggestion.label }), suggestion.description && (jsx("span", { className: theme.suggestionDescriptionStyle, children: suggestion.description }))] })] }, suggestion.id));
+            }, children: [jsx(Avatar, { src: suggestion.avatar, name: suggestion.label, size: "xs", className: "ring-0 border-0" }), jsxs("div", { className: "flex flex-col min-w-0", children: [jsx("span", { className: theme.suggestionLabelStyle, children: suggestion.label }), suggestion.description && (jsx("span", { className: theme.suggestionDescriptionStyle, children: suggestion.description }))] })] }, suggestion.id));
     };
     // -----------------------------------------------------------------------
     // Dropdown portal content

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/TimePicker/TimePickerContent.js

@@ -6,85 +6,8 @@ import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePicker.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
-import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Dropdown/Dropdown.js';
-import '../../core/Dropdown/DropdownTrigger.js';
-import '../../core/Dropdown/DropdownMenu.js';
-import '../../core/Dropdown/DropdownItem.js';
-import '../../core/Dropdown/DropdownSection.js';
-import '../../core/Dropdown/DropdownSeparator.js';
-import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Loader/Loader.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsContent.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/SocialIcon/SocialIcon.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { Button } from '../../core/Button/Button.js';
 
 /**
  * Hook to detect dark mode state from document

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

@@ -24,84 +24,6 @@ import 'clsx';
 import 'tailwind-merge';
 import 'motion/react';
 import 'react-dom';
-import '../core/Accordion/Accordion.js';
-import '../core/AlertDialog/AlertDialog.js';
-import '../core/AspectRatio/AspectRatio.js';
-import '../core/Avatar/Avatar.js';
-import '../core/AvatarGroup/AvatarGroup.js';
-import '../core/Badge/Badge.js';
-import '../core/Breadcrumbs/Breadcrumbs.js';
-import '../core/Breadcrumbs/Breadcrumbs.theme.js';
-import '../core/Button/Button.js';
-import '../core/ButtonGroup/ButtonGroup.js';
-import '../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../core/ButtonGroup/ButtonGroupText.js';
-import '../core/Calendar/Calendar.js';
-import '../core/Calendar/CalendarMini/CalendarMini.js';
-import '../core/Card/Card.js';
-import '../core/CardStack/CardStack.js';
-import '../core/Carousel/Carousel.js';
-import '../core/CommandPalette/CommandPalette.js';
-import '../core/Separator/Separator.js';
-import '../core/Drawer/Drawer.js';
-import '../core/Dropdown/Dropdown.js';
-import '../core/Dropdown/DropdownTrigger.js';
-import '../core/Dropdown/DropdownMenu.js';
-import '../core/Dropdown/DropdownItem.js';
-import '../core/Dropdown/DropdownSection.js';
-import '../core/Dropdown/DropdownSeparator.js';
-import '../core/Dropdown/Dropdown.theme.js';
-import '../core/Kbd/Kbd.js';
-import '../core/MenuItem/MenuItem.js';
-import '../core/Link/Link.js';
-import '../core/Loader/Loader.js';
-import '../core/Modal/Modal.js';
-import '../core/ModalStack/ModalStack.js';
-import '../core/PageHeading/PageHeading.js';
-import '../core/Pagination/Pagination.js';
-import '../core/Popover/Popover.js';
-import '../core/Popover/PopoverContext.js';
-import '../core/Progress/Progress.js';
-import '../core/Rating/Rating.js';
-import '../core/ScrollArea/ScrollArea.js';
-import '../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../core/Segmented/Segmented.js';
-import '../core/Skeleton/Skeleton.js';
-import '../core/SlidingNumber/SlidingNumber.js';
-import '../core/Tabs/Tabs.js';
-import '../core/Tabs/TabsList.js';
-import '../core/Tabs/TabsTrigger.js';
-import '../core/Tabs/TabsContent.js';
-import '../core/Tabs/TabsContext.js';
-import '../core/Tooltip/Tooltip.js';
-import '../core/Tooltip/Tooltip.animations.js';
-import '../core/Tree/Tree.js';
-import '../core/Tag/Tag.js';
-import '../core/Alert/Alert.js';
-import '../core/Toast/Toast.js';
-import '../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../core/Spinner/Spinner.js';
-import '../core/Message/Message.js';
-import '../core/Message/TypeWriter.js';
-import '../core/Empty/Empty.js';
-import '../core/Masonry/Masonry.js';
-import '../core/DragDrop/DragDrop.js';
-import '../core/Sortable/Sortable.js';
-import '../core/NavItem/NavItem.js';
-import '../core/Sidebar/Sidebar.js';
-import '../core/Sidebar/SidebarHeader.js';
-import '../core/Sidebar/SidebarContent.js';
-import '../core/Sidebar/SidebarFooter.js';
-import '../core/Sidebar/SidebarNav.js';
-import '../core/Sidebar/SidebarNavGroup.js';
-import '../core/Sidebar/SidebarToggle.js';
-import '../core/Sidebar/SidebarContext.js';
-import '../core/OfflineIndicator/OfflineIndicator.js';
-import '../core/ContextMenu/ContextMenu.js';
-import '../core/ContextMenu/ContextMenu.theme.js';
-import '../core/Pill/Pill.js';
-import '../core/SocialIcon/SocialIcon.js';
 import './TimePicker/WheelColumn.js';
 export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
 export { Slider } from './Slider/Slider.js';
@@ -127,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';
@@ -145,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",
 };
 

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

@@ -1,54 +1,36 @@
 import React from "react";
 export interface FormLayoutTheme {
     root: string;
-    header: string;
-    headerTitle: string;
-    headerSubtitle: string;
-    body: string;
     section: string;
     sectionSidebar: string;
     sectionTitle: string;
-    sectionDescription: string;
+    sectionSubtitle: string;
     sectionAction: string;
     sectionContent: string;
+    sectionContentFull: string;
     footer: string;
 }
 export interface FormLayoutThemeOverrides {
     root?: string;
-    header?: string;
-    headerTitle?: string;
-    headerSubtitle?: string;
-    body?: string;
     section?: string;
     sectionSidebar?: string;
     sectionTitle?: string;
-    sectionDescription?: string;
+    sectionSubtitle?: string;
     sectionAction?: string;
     sectionContent?: string;
+    sectionContentFull?: string;
     footer?: string;
 }
 export interface FormLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Theme overrides for the root container. */
     theme?: FormLayoutThemeOverrides;
 }
-export interface FormLayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Header title text. */
-    title: string;
+export interface FormLayoutSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Optional section title. If omitted along with subtitle and action, the sidebar column is hidden. */
+    title?: string;
     /** Optional subtitle displayed below the title. */
     subtitle?: string;
-    /** Optional action element rendered on the right side of the header. */
-    action?: React.ReactNode;
-    /** Theme overrides for the header. */
-    theme?: FormLayoutThemeOverrides;
-}
-export interface FormLayoutBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-export interface FormLayoutSectionProps extends React.HTMLAttributes<HTMLElement> {
-    /** Section title text. */
-    title: string;
-    /** Optional description displayed below the title. */
-    description?: string;
-    /** Optional action element rendered below the description. */
+    /** Optional action element rendered below the subtitle. */
     action?: React.ReactNode;
     /** Additional className applied to the content area. */
     contentClassName?: string;

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

@@ -3,9 +3,10 @@ import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 
-const FormLayoutSection = React__default.forwardRef(({ title, description, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
+const FormLayoutSection = React__default.forwardRef(({ title, subtitle, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
     const theme = { ...formLayoutTheme, ...customTheme };
-    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [jsxs("div", { className: theme.sectionSidebar, children: [jsx("div", { className: theme.sectionTitle, children: title }), description && (jsx("div", { className: theme.sectionDescription, children: description })), action && jsx("div", { className: theme.sectionAction, children: action })] }), jsx("div", { className: cn(theme.sectionContent, contentClassName), children: children })] }));
+    const hasSidebar = !!(title || subtitle || action);
+    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [hasSidebar && (jsxs("div", { className: theme.sectionSidebar, children: [title && jsx("div", { className: theme.sectionTitle, children: title }), subtitle && (jsx("div", { className: theme.sectionSubtitle, children: subtitle })), action && jsx("div", { className: theme.sectionAction, children: action })] })), jsx("div", { className: cn(hasSidebar ? theme.sectionContent : theme.sectionContentFull, contentClassName), children: children })] }));
 });
 FormLayoutSection.displayName = "FormLayout.Section";
 

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

@@ -1,3 +1,3 @@
 export { FormLayout } from "./FormLayout";
-export type { FormLayoutProps, FormLayoutHeaderProps, FormLayoutBodyProps, FormLayoutSectionProps, FormLayoutFooterProps, FormLayoutTheme, FormLayoutThemeOverrides, } from "./FormLayout.types";
+export type { FormLayoutProps, FormLayoutSectionProps, FormLayoutFooterProps, FormLayoutTheme, FormLayoutThemeOverrides, } from "./FormLayout.types";
 export { formLayoutTheme } from "./FormLayout.theme";