@central-ui/react 0.1.1 → 0.2.0

package/dist/components/datepicker/index.js

@@ -1,17 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, RangeCalendar as AriaRangeCalendar, DateRangePickerStateContext, RangeCalendarStateContext, Label as AriaLabel, Group as AriaGroup, DateInput as AriaDateInput, DateSegment as AriaDateSegment, Button as AriaButton, Popover as AriaPopover, Calendar as AriaCalendar, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, ListBox, ListBoxItem, SelectionIndicatorContext, useSlottedContext, Text, FieldError, I18nProvider, DatePickerStateContext, CalendarStateContext, DateFieldStateContext, DialogContext, useContextProps, } from 'react-aria-components';
+import { asChildStyleAttributes } from "../../utils/asChild.js";
+import { DatePicker as AriaDatePicker, DatePickerStateContext, } from 'react-aria-components/DatePicker';
+import { DateRangePicker as AriaDateRangePicker, DateRangePickerStateContext, } from 'react-aria-components/DateRangePicker';
+import { RangeCalendar as AriaRangeCalendar, RangeCalendarStateContext, } from 'react-aria-components/RangeCalendar';
+import { Label as AriaLabel } from 'react-aria-components/Label';
+import { Group as AriaGroup } from 'react-aria-components/Group';
+import { DateInput as AriaDateInput, DateSegment as AriaDateSegment, DateFieldStateContext, } from 'react-aria-components/DateField';
+import { Button as AriaButton } from 'react-aria-components/Button';
+import { Popover as AriaPopover } from 'react-aria-components/Popover';
+import { Calendar as AriaCalendar, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, CalendarStateContext, } from 'react-aria-components/Calendar';
+import { Heading } from 'react-aria-components/Heading';
+import { ListBox, ListBoxItem } from 'react-aria-components/ListBox';
+import { SelectionIndicatorContext } from 'react-aria-components/SelectionIndicator';
+import { useSlottedContext, useContextProps } from 'react-aria-components/slots';
+import { Text } from 'react-aria-components/Text';
+import { FieldError } from 'react-aria-components/FieldError';
+import { I18nProvider } from 'react-aria-components/I18nProvider';
+import { DialogContext } from 'react-aria-components/Dialog';
 import { parseDate, toCalendarDate, toCalendar, GregorianCalendar, } from '@internationalized/date';
-import { useLocale, useDateFormatter, mergeProps } from 'react-aria';
+import { useLocale } from 'react-aria/I18nProvider';
+import { useDateFormatter } from 'react-aria/useDateFormatter';
+import { mergeProps } from 'react-aria/mergeProps';
 import { cloneElement, createContext, forwardRef, useContext, Fragment, useState, useMemo, } from 'react';
-import { CalendarDays, Check, ChevronLeft, ChevronRight, LoaderCircle, } from 'lucide-react';
+import { CalendarDays, Check, ChevronLeft, ChevronRight, LoaderCircle, } from "../../utils/icons.js";
 import { twMerge } from 'tailwind-merge';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
-const SinglePicker = forwardRef(function SinglePicker({ mode, locale, tone, presets, value, defaultValue, minValue, maxValue, placeholderValue, onValueChange, disabled, readOnly, required, invalid, open, isDateUnavailable, ...props }, ref) {
-    return (_jsx(AriaDatePicker, { ...props, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, isOpen: open, ref: ref, style: { display: 'contents' }, granularity: "day", value: parseDateString(value), defaultValue: parseDateString(defaultValue), minValue: parseDateString(minValue), maxValue: parseDateString(maxValue), placeholderValue: parseDateString(placeholderValue), onChange: (date) => onValueChange?.(date ? toGregorianDateString(date) : null), isDateUnavailable: isDateUnavailable &&
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
+const SinglePicker = /* @__PURE__ */ forwardRef(function SinglePicker({ mode, locale, validation, presets, value, defaultValue, minValue, maxValue, placeholderValue, onValueChange, disabled, readOnly, required, open, isDateUnavailable, ...props }, ref) {
+    return (_jsx(AriaDatePicker, { ...props, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, 
+        // An error validation marks it invalid; otherwise Aria keeps running its own validation
+        isInvalid: readValidation(validation).state === 'error' || undefined, isOpen: open, ref: ref, style: { display: 'contents' }, granularity: "day", value: parseDateString(value), defaultValue: parseDateString(defaultValue), minValue: parseDateString(minValue), maxValue: parseDateString(maxValue), placeholderValue: parseDateString(placeholderValue), onChange: (date) => onValueChange?.(date ? toGregorianDateString(date) : null), isDateUnavailable: isDateUnavailable &&
             ((date) => isDateUnavailable(toGregorianDateString(date))) }));
 });
-const RangePicker = forwardRef(function RangePicker({ mode, locale, tone, presets, value, defaultValue, minValue, maxValue, placeholderValue, onValueChange, disabled, readOnly, required, invalid, open, isDateUnavailable, ...props }, ref) {
-    return (_jsx(AriaDateRangePicker, { ...props, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, isOpen: open, ref: ref, style: { display: 'contents' }, granularity: "day", value: parseDateRange(value), defaultValue: parseDateRange(defaultValue), minValue: parseDateString(minValue), maxValue: parseDateString(maxValue), placeholderValue: parseDateString(placeholderValue), onChange: (range) => onValueChange?.(range
+const RangePicker = /* @__PURE__ */ forwardRef(function RangePicker({ mode, locale, validation, presets, value, defaultValue, minValue, maxValue, placeholderValue, onValueChange, disabled, readOnly, required, open, isDateUnavailable, ...props }, ref) {
+    return (_jsx(AriaDateRangePicker, { ...props, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, 
+        // An error validation marks it invalid; otherwise Aria keeps running its own validation
+        isInvalid: readValidation(validation).state === 'error' || undefined, isOpen: open, ref: ref, style: { display: 'contents' }, granularity: "day", value: parseDateRange(value), defaultValue: parseDateRange(defaultValue), minValue: parseDateString(minValue), maxValue: parseDateString(maxValue), placeholderValue: parseDateString(placeholderValue), onChange: (range) => onValueChange?.(range
             ? {
                 start: toGregorianDateString(range.start),
                 end: toGregorianDateString(range.end),
@@ -100,17 +123,18 @@ function Picker({ pickerRef, ...props }) {
  *   }
  * </DatePicker.PresetsList>
  */
-export const Root = forwardRef(function Root(props, ref) {
+export const Root = /* @__PURE__ */ forwardRef(function Root(props, ref) {
     const [buttonAnchor, setButtonAnchor] = useState(null);
     const buttonAnchorRef = useMemo(() => ({ current: buttonAnchor }), [buttonAnchor]);
-    return (_jsx(I18nProvider, { locale: props.locale ?? 'en-US', children: _jsx(ToneProvider, { value: props.tone ?? 'neutral', children: _jsx(ConfigurationContext.Provider, { value: {
-                    mode: props.mode ?? 'single',
-                    presets: props.presets ?? [],
-                    buttonAnchorRef,
-                    setButtonAnchor,
-                    disabled: props.disabled ?? false,
-                    readOnly: props.readOnly ?? false,
-                }, children: _jsx(Picker, { ...props, pickerRef: ref }) }) }) }));
+    return (_jsx(I18nProvider, { locale: props.locale ?? 'en-US', children: _jsx(ConfigurationContext.Provider, { value: {
+                mode: props.mode ?? 'single',
+                presets: props.presets ?? [],
+                buttonAnchorRef,
+                setButtonAnchor,
+                disabled: props.disabled ?? false,
+                readOnly: props.readOnly ?? false,
+                validation: readValidation(props.validation),
+            }, children: _jsx(Picker, { ...props, pickerRef: ref }) }) }));
 });
 export function Container({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, ...usePartAttributes(), "data-component": "datepicker-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -130,7 +154,6 @@ export function AddonText({ disableStyle, className, ...props }) {
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function AddonIcon({ disableStyle, children, className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...usePartAttributes(),
         'aria-hidden': true,
@@ -145,7 +168,6 @@ export function AddonIcon({ disableStyle, children, className, ...props }) {
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function AddonLoadingIcon({ disableStyle, children = _jsx(LoaderCircle, {}), className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...usePartAttributes(),
         'aria-hidden': true,
@@ -195,7 +217,6 @@ export function AddonOpenButton({ disableStyle, className, isDisabled, ...props
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function AddonOpenButtonIcon({ disableStyle, children = _jsx(CalendarDays, {}), className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...usePartAttributes(),
         'aria-hidden': true,
@@ -207,52 +228,40 @@ export function AddonOpenButtonIcon({ disableStyle, children = _jsx(CalendarDays
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 2,
     });
 }
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function AddonOpenHandler({ children, isDisabled, ...props }) {
-    return (_jsx(AriaButton, { isDisabled: isDisabled || undefined, ...props, render: (buttonProps) => renderButtonChild(children, buttonProps) }));
-}
-export function OpenButton({ disableStyle, className, isDisabled, ...props }) {
-    const { setButtonAnchor } = useContext(ConfigurationContext);
-    return (_jsx(AriaGroup, { style: { display: 'contents' }, children: _jsx(AriaButton, { isDisabled: isDisabled || undefined, ...props, ref: setButtonAnchor, ...usePartAttributes(), "data-component": "datepicker-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
-}
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function OpenHandler({ children, isDisabled, ...props }) {
-    const { setButtonAnchor } = useContext(ConfigurationContext);
-    return (_jsx(AriaGroup, { style: { display: 'contents' }, children: _jsx(AriaButton, { isDisabled: isDisabled || undefined, ...props, ref: setButtonAnchor, render: (buttonProps) => renderButtonChild(children, buttonProps) }) }));
+/** Opens the calendar popup. Pass asChild to give this behavior to your own button, like a "Choose appointment" Button; it keeps the state data attributes but none of this part's styling. */
+export function OpenButton({ asChild, disableStyle, isDisabled, children, ...props }) {
+    const context = useContext(ConfigurationContext);
+    const partAttributes = usePartAttributes();
+    // Deciding what renders: the consumer's child as the element when asChild, otherwise this part's own button
+    const rendering = asChild
+        ? { render: (buttonProps) => renderButtonChild(children, buttonProps) }
+        : { children };
+    return (_jsx(AriaGroup, { style: { display: 'contents' }, children: _jsx(AriaButton, { isDisabled: isDisabled || undefined, ...props, ref: context.setButtonAnchor, ...partAttributes, ...asChildStyleAttributes({ asChild, component: 'datepicker-openbutton', disableStyle }), ...rendering }) }));
 }
 /** Formats the selected date or range automatically. Omit children for the usual display; supply children only to replace it. Placeholder appears before selection. */
 export function OpenButtonValue({ disableStyle, children, placeholder = 'Select date', className, ...props }) {
     const single = useContext(DatePickerStateContext);
     const range = useContext(DateRangePickerStateContext);
-    const { mode } = useContext(ConfigurationContext);
-    const { locale } = useLocale();
-    return (_jsx("span", { ...props, ...usePartAttributes(), "data-component": "datepicker-openbuttonvalue", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ??
+    const context = useContext(ConfigurationContext);
+    const i18n = useLocale();
+    // Whether no full date is selected yet, so the placeholder shows
+    const empty = context.mode === 'range' ? !range?.value.start || !range.value.end : !single?.value;
+    return (_jsx("span", { ...props, ...usePartAttributes(), "data-component": "datepicker-openbuttonvalue", "data-placeholder": children == null && empty ? '' : undefined, "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children ??
             (() => {
-                if (mode === 'range') {
-                    if (!range?.value.start || !range.value.end)
+                if (empty)
+                    return placeholder;
+                if (context.mode === 'range') {
+                    const formatted = range.formatValue(i18n.locale, { day: 'numeric', month: 'long', year: 'numeric' });
+                    if (!formatted)
                         return placeholder;
-                    const formatted = range.formatValue(locale, {
-                        day: 'numeric',
-                        month: 'long',
-                        year: 'numeric',
-                    });
-                    return formatted
-                        ? formatted.start + ' — ' + formatted.end
-                        : placeholder;
+                    return formatted.start + ' — ' + formatted.end;
                 }
-                return single?.value
-                    ? single.formatValue(locale, {
-                        day: 'numeric',
-                        month: 'long',
-                        year: 'numeric',
-                    })
-                    : placeholder;
+                return single.formatValue(i18n.locale, { day: 'numeric', month: 'long', year: 'numeric' });
             })() }));
 }
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function OpenButtonIcon({ disableStyle, children = _jsx(CalendarDays, {}), className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         'aria-hidden': true,
         ...{
@@ -264,13 +273,13 @@ export function OpenButtonIcon({ disableStyle, children = _jsx(CalendarDays, {})
     });
 }
 /** Use the same calendar composition for both trigger choices. Opening and focus management are handled by the picker; do not add your own popup visibility condition. */
-export const Popup = forwardRef(function Popup({ disableStyle, ...props }, ref) {
+export const Popup = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, ...props }, ref) {
     // The Popover supplies dialog semantics itself. Merge DatePicker's generated dialog
     // id/labeling onto that same element instead of adding another Dialog wrapper.
-    const { buttonAnchorRef } = useContext(ConfigurationContext);
+    const context = useContext(ConfigurationContext);
     const [mergedProps, mergedRef] = useContextProps(props, ref, DialogContext);
     const { className, style, placement = 'bottom end', offset = 5, ...rest } = mergedProps;
-    return (_jsx(AriaPopover, { ...(buttonAnchorRef?.current ? { triggerRef: buttonAnchorRef } : {}), ...rest, ref: mergedRef, placement: placement, offset: offset, style: { minWidth: 'var(--trigger-width)', ...style }, "data-component": "datepicker-popup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return (_jsx(AriaPopover, { ...(context.buttonAnchorRef?.current ? { triggerRef: context.buttonAnchorRef } : {}), ...rest, ref: mergedRef, placement: placement, offset: offset, style: { minWidth: 'var(--trigger-width)', ...style }, "data-component": "datepicker-popup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 function SingleCalendar({ disableStyle, className, focusedValue, defaultFocusedValue, onFocusChange, ...props }) {
     return (_jsx(AriaCalendar, { ...props, firstDayOfWeek: "mon", pageBehavior: "single", focusedValue: parseDateString(focusedValue), defaultFocusedValue: parseDateString(defaultFocusedValue), onFocusChange: onFocusChange && ((date) => onFocusChange(toGregorianDateString(date))), "data-component": "datepicker-calendar", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -280,32 +289,33 @@ function RangeCalendar({ disableStyle, className, focusedValue, defaultFocusedVa
 }
 /** Chooses the single-date or range calendar from Root mode automatically. Keep Actions and TablesList inside; do not render separate calendars for each mode. */
 export function Calendar(props) {
-    const { mode } = useContext(ConfigurationContext);
-    if (mode === 'range')
+    const context = useContext(ConfigurationContext);
+    if (context.mode === 'range')
         return _jsx(RangeCalendar, { ...props });
     return _jsx(SingleCalendar, { ...props });
 }
 /** Optional shortcut list. Its children callback receives all presets from Root once; map them to Item. Item handles applying the chosen value. */
 export function PresetsList({ disableStyle, className, children, ...props }) {
-    const { presets, mode } = useContext(ConfigurationContext);
+    const context = useContext(ConfigurationContext);
     const single = useContext(DatePickerStateContext);
     const range = useContext(DateRangePickerStateContext);
-    const selectedValue = mode === 'range'
-        ? range?.value.start && range.value.end
-            ? {
-                start: toGregorianDateString(range.value.start),
-                end: toGregorianDateString(range.value.end),
-            }
-            : null
-        : single?.value
-            ? toGregorianDateString(single.value)
-            : null;
-    const selectedPreset = presets.find((preset) => samePresetValue(preset.value, selectedValue));
+    // The current selection as a preset value, to highlight the preset matching it
+    const selectedValue = (() => {
+        if (context.mode === 'range') {
+            if (!range?.value.start || !range.value.end)
+                return null;
+            return { start: toGregorianDateString(range.value.start), end: toGregorianDateString(range.value.end) };
+        }
+        if (!single?.value)
+            return null;
+        return toGregorianDateString(single.value);
+    })();
+    const selectedPreset = context.presets.find((preset) => samePresetValue(preset.value, selectedValue));
     return (_jsx(ListBox, { "aria-label": "Presets", ...props, selectionMode: "single", disallowEmptySelection: true, selectedKeys: selectedPreset ? [selectedPreset.label] : [], onSelectionChange: (keys) => {
             if (keys === 'all')
                 return;
             const key = keys.values().next().value;
-            const preset = presets.find((preset) => preset.label === key);
+            const preset = context.presets.find((preset) => preset.label === key);
             if (!preset)
                 return;
             if (typeof preset.value === 'string') {
@@ -314,28 +324,28 @@ export function PresetsList({ disableStyle, className, children, ...props }) {
             else {
                 range.setDateRange(parseDateRange(preset.value));
             }
-        }, "data-component": "datepicker-presetslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children(presets) }));
+        }, "data-component": "datepicker-presetslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children(context.presets) }));
 }
 export function Item({ disableStyle, value, className, textValue, ...props }) {
     const calendar = useActiveCalendarState();
-    const { presets } = useContext(ConfigurationContext);
+    const context = useContext(ConfigurationContext);
     const dates = typeof value === 'string'
         ? [parseDateString(value)]
         : [parseDateString(value.start), parseDateString(value.end)];
     // Distinct presets may resolve to the same date (e.g. Today and First of this week).
     // Their labels identify options; their date values still control the actual picker.
     const label = textValue ??
-        presets.find((preset) => samePresetValue(preset.value, value))?.label;
+        context.presets.find((preset) => samePresetValue(preset.value, value))?.label;
     return (_jsx(ListBoxItem, { ...props, id: label ??
             (typeof value === 'string' ? value : value.start + '/' + value.end), textValue: label, isDisabled: calendar.isDisabled ||
             calendar.isReadOnly ||
             dates.some((date) => calendar.isInvalid(date) || calendar.isCellUnavailable(date)), "data-component": "datepicker-item", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-export const ItemText = forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
+export const ItemText = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
     return (_jsx(Text, { ...props, ref: ref, slot: "label", "data-component": "datepicker-itemtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
-export const ItemIndicator = forwardRef(function ItemIndicator({ disableStyle, children, ...props }, ref) {
+export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, ...props }, ref) {
     // ListBoxItem supplies this public Aria context, including for controlled selection.
     // Read visibility directly so no measured div or shared-element animation is needed.
     const selection = useSlottedContext(SelectionIndicatorContext);
@@ -374,19 +384,10 @@ export function PreviousButton({ disableStyle, className, isDisabled, ...props }
 export function NextButton({ disableStyle, className, isDisabled, ...props }) {
     return (_jsx(AriaButton, { isDisabled: isDisabled || undefined, ...props, slot: "next", "data-component": "datepicker-nextbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function PreviousHandler({ children, isDisabled, ...props }) {
-    return (_jsx(AriaButton, { isDisabled: isDisabled || undefined, ...props, slot: "previous", render: (buttonProps) => renderButtonChild(children, buttonProps) }));
-}
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function NextHandler({ children, isDisabled, ...props }) {
-    return (_jsx(AriaButton, { isDisabled: isDisabled || undefined, ...props, slot: "next", render: (buttonProps) => renderButtonChild(children, buttonProps) }));
-}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function PreviousButtonIcon({ disableStyle, children = _jsx(ChevronLeft, {}), className, ...props }) {
     const calendar = useActiveCalendarState();
     return cloneElement(children, {
-        ...children.props,
         ...props,
         'aria-hidden': true,
         ...{
@@ -406,7 +407,6 @@ export function PreviousButtonIcon({ disableStyle, children = _jsx(ChevronLeft,
 export function NextButtonIcon({ disableStyle, children = _jsx(ChevronRight, {}), className, ...props }) {
     const calendar = useActiveCalendarState();
     return cloneElement(children, {
-        ...children.props,
         ...props,
         'aria-hidden': true,
         ...{
@@ -429,29 +429,35 @@ export function TablesList({ disableStyle, className, children, ...props }) {
 }
 /** Renders weekday headings and day cells automatically. Pass the index from TablesList; do not map individual dates yourself. */
 export function Table({ disableStyle, index = 0, className, ...props }) {
-    const { mode } = useContext(ConfigurationContext);
-    return (_jsxs(CalendarGrid, { ...props, offset: { months: index }, "data-component": "datepicker-table", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { "data-component": "datepicker-table-1", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, "data-mode": mode, "data-component": "datepicker-table-2" })) })] }));
+    const context = useContext(ConfigurationContext);
+    return (_jsxs(CalendarGrid, { ...props, offset: { months: index }, "data-component": "datepicker-table", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { "data-component": "datepicker-table-1", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, "data-mode": context.mode, "data-component": "datepicker-table-2" })) })] }));
 }
 export function Description({ disableStyle, className, ...props }) {
     return (_jsx(Text, { ...props, ...usePartAttributes(), slot: "description", "data-component": "datepicker-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-/** Keep mounted to let the picker render its validation error automatically. Omit children for the native error text; override only for a custom message. */
-export function Error({ disableStyle, className, ...props }) {
-    return (_jsx(FieldError, { ...props, ...usePartAttributes(), "data-component": "datepicker-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** Keep mounted: it shows while the picker is invalid. With no children it shows Root's message from `['error', message]`, or else the picker's own validation text, like a required or out-of-range date. A function children formats Root's message, and other children replace it. */
+export function Error({ disableStyle, className, children, ...props }) {
+    const configuration = useContext(ConfigurationContext);
+    // Undefined lets FieldError show Aria's own validation text
+    const content = validationMessageContent(configuration.validation, 'error', children);
+    return (_jsx(FieldError, { ...props, ...usePartAttributes(), "data-component": "datepicker-error", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: content }));
 }
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export function Success({ disableStyle, className, ...props }) {
-    return (_jsx(Text, { role: "status", ...props, ...usePartAttributes(), slot: "description", "data-component": "datepicker-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
+export function Success({ disableStyle, className, children, ...props }) {
+    const configuration = useContext(ConfigurationContext);
+    const content = validationMessageContent(configuration.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return (_jsx(Text, { role: "status", ...props, ...usePartAttributes(), slot: "description", "data-component": "datepicker-success", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: content }));
 }
-const ConfigurationContext = createContext({ mode: 'single', presets: [], disabled: false, readOnly: false });
+const ConfigurationContext = /* @__PURE__ */ createContext({ mode: 'single', presets: [], disabled: false, readOnly: false, validation: readValidation() });
 function usePartAttributes() {
     const single = useContext(DatePickerStateContext);
     const range = useContext(DateRangePickerStateContext);
     const configuration = useContext(ConfigurationContext);
-    const tone = useToneContext();
     const state = configuration.mode === 'range' ? range : single;
     return {
-        'data-tone': tone,
+        ...validationAttributes(configuration.validation),
         'data-disabled': configuration.disabled || undefined,
         'data-readonly': configuration.readOnly || undefined,
         'data-open': state.isOpen || undefined,
@@ -485,8 +491,8 @@ function renderButtonChild(child, buttonProps) {
 function useActiveCalendarState() {
     const single = useContext(CalendarStateContext);
     const range = useContext(RangeCalendarStateContext);
-    const { mode } = useContext(ConfigurationContext);
-    return mode === 'range' ? range : single;
+    const context = useContext(ConfigurationContext);
+    return context.mode === 'range' ? range : single;
 }
 function samePresetValue(a, b) {
     if (typeof a === 'string')
@@ -504,4 +510,3 @@ function parseDateRange(value) {
         end: parseDateString(value.end),
     };
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,9 +1,10 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import type { ReactElement } from 'react';
-import type { LucideProps } from 'lucide-react';
+import type { SVGIconProps } from '../../types/Icon.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
 /**
- * OpenHandler and CloseHandler give behavior to your button children. Popup already includes its portal; do not add one. Use Title to name the dialog and Description when supporting text is needed. Header, Body, and Footer organize content.
+ * OpenButton and CloseButton render their own buttons; pass asChild to give their behavior to your own button instead. Popup already includes its portal; do not add one. Use Title to name the dialog and Description when supporting text is needed. Header, Body, and Footer organize content.
  *
  * @example Complete composition
  * import { Button, Dialog } from '@central-ui/react'
@@ -11,9 +12,7 @@ import type { LucideProps } from 'lucide-react';
  * function Example() {
  *   return (
  *     <Dialog.Root>
- *       <Dialog.OpenHandler>
- *         <Button.default variant="secondary">Account details</Button.default>
- *       </Dialog.OpenHandler>
+ *       <Dialog.OpenButton>Account details</Dialog.OpenButton>
  *       <Dialog.Backdrop />
  *       <Dialog.Popup>
  *         <Dialog.Header>
@@ -25,9 +24,9 @@ import type { LucideProps } from 'lucide-react';
  *         </Dialog.Header>
  *         <Dialog.Body>Your account is ready to use.</Dialog.Body>
  *         <Dialog.Footer>
- *           <Dialog.CloseHandler>
+ *           <Dialog.CloseButton asChild>
  *             <Button.default variant="primary">Done</Button.default>
- *           </Dialog.CloseHandler>
+ *           </Dialog.CloseButton>
  *         </Dialog.Footer>
  *       </Dialog.Popup>
  *     </Dialog.Root>
@@ -42,32 +41,20 @@ import type { LucideProps } from 'lucide-react';
  *   }
  * </Dialog.Root>
  */
-export declare const Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const OpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<BaseDialog.Trigger.Props<unknown>, "children" | "className" | "render"> & {
-    className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const CloseHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogCloseProps, "children" | "className" | "render"> & {
+export declare function Root<Payload = unknown>(props: BaseDialog.Root.Props<Payload>): import("react").JSX.Element;
+/** Opens the dialog. Pass asChild to give this behavior to your own button, like your app's Button. */
+export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseDialog.Trigger.Props<unknown>, "className" | "render"> & {
     className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopupProps = Omit<BaseDialog.Popup.Props, 'className'> & {
     className?: string;
 } & Pick<BaseDialog.Portal.Props, 'container' | 'keepMounted'> & StyleProps;
 /** Already includes the portal. Keep it in the matching Root and let the native open state control visibility. */
-export declare const Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogPopupProps, "className"> & {
-    className?: string;
-} & Pick<import("@base-ui/react").AlertDialogPortalProps, "keepMounted" | "container"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type BackdropProps = Omit<BaseDialog.Backdrop.Props, 'className'> & {
     className?: string;
 } & Pick<BaseDialog.Portal.Props, 'container' | 'keepMounted'> & StyleProps;
-export declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogBackdropProps, "className"> & {
-    className?: string;
-} & Pick<import("@base-ui/react").AlertDialogPortalProps, "keepMounted" | "container"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Footer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -77,12 +64,12 @@ export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogDescriptionProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogCloseProps, "className"> & {
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Close". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
+export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogCloseProps, "className" | "render"> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export declare const CloseButtonIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & {
+export declare const CloseButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
-    children?: ReactElement<LucideProps>;
+    children?: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/index.js

@@ -2,9 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { cloneElement, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { X } from 'lucide-react';
+import { X } from "../../utils/icons.js";
+import { asChildRendering } from "../../utils/asChild.js";
 /**
- * OpenHandler and CloseHandler give behavior to your button children. Popup already includes its portal; do not add one. Use Title to name the dialog and Description when supporting text is needed. Header, Body, and Footer organize content.
+ * OpenButton and CloseButton render their own buttons; pass asChild to give their behavior to your own button instead. Popup already includes its portal; do not add one. Use Title to name the dialog and Description when supporting text is needed. Header, Body, and Footer organize content.
  *
  * @example Complete composition
  * import { Button, Dialog } from '@central-ui/react'
@@ -12,9 +13,7 @@ import { X } from 'lucide-react';
  * function Example() {
  *   return (
  *     <Dialog.Root>
- *       <Dialog.OpenHandler>
- *         <Button.default variant="secondary">Account details</Button.default>
- *       </Dialog.OpenHandler>
+ *       <Dialog.OpenButton>Account details</Dialog.OpenButton>
  *       <Dialog.Backdrop />
  *       <Dialog.Popup>
  *         <Dialog.Header>
@@ -26,9 +25,9 @@ import { X } from 'lucide-react';
  *         </Dialog.Header>
  *         <Dialog.Body>Your account is ready to use.</Dialog.Body>
  *         <Dialog.Footer>
- *           <Dialog.CloseHandler>
+ *           <Dialog.CloseButton asChild>
  *             <Button.default variant="primary">Done</Button.default>
- *           </Dialog.CloseHandler>
+ *           </Dialog.CloseButton>
  *         </Dialog.Footer>
  *       </Dialog.Popup>
  *     </Dialog.Root>
@@ -43,17 +42,16 @@ import { X } from 'lucide-react';
  *   }
  * </Dialog.Root>
  */
-export const Root = BaseDialog.Root;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const OpenHandler = forwardRef(function OpenHandler({ children, ...props }, ref) {
-    return _jsx(BaseDialog.Trigger, { ...props, ref: ref, render: children });
-});
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const CloseHandler = forwardRef(function CloseHandler({ children, ...props }, ref) {
-    return _jsx(BaseDialog.Close, { ...props, ref: ref, render: children });
+export function Root(props) {
+    return _jsx(BaseDialog.Root, { ...props });
+}
+/** Opens the dialog. Pass asChild to give this behavior to your own button, like your app's Button. */
+export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+    const rendering = asChildRendering({ asChild, children, component: 'dialog-openbutton', disableStyle });
+    return _jsx(BaseDialog.Trigger, { ...props, ref: ref, ...rendering });
 });
 /** Already includes the portal. Keep it in the matching Root and let the native open state control visibility. */
-export const Popup = forwardRef(function Popup({ disableStyle, container, keepMounted, className, style, ...props }, ref) {
+export const Popup = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, container, keepMounted, className, style, ...props }, ref) {
     const baseStyle = {
         position: 'fixed',
         top: '50%',
@@ -65,29 +63,31 @@ export const Popup = forwardRef(function Popup({ disableStyle, container, keepMo
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
 });
-export const Backdrop = forwardRef(function Backdrop({ disableStyle, container, keepMounted, className, ...props }, ref) {
+export const Backdrop = /* @__PURE__ */ forwardRef(function Backdrop({ disableStyle, container, keepMounted, className, ...props }, ref) {
     return (_jsx(BaseDialog.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseDialog.Backdrop, { ...props, ref: ref, "data-component": "dialog-backdrop", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
 });
-export const Header = forwardRef(function Header({ disableStyle, className, ...props }, ref) {
+export const Header = /* @__PURE__ */ forwardRef(function Header({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "dialog-header", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Body = forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "dialog-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Footer = forwardRef(function Footer({ disableStyle, className, ...props }, ref) {
+export const Footer = /* @__PURE__ */ forwardRef(function Footer({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "dialog-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Title = forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseDialog.Title, { ...props, ref: ref, "data-component": "dialog-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Description = forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseDialog.Description, { ...props, ref: ref, "data-component": "dialog-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const CloseButton = forwardRef(function CloseButton({ disableStyle, className, ...props }, ref) {
-    return (_jsx(BaseDialog.Close, { ...props, ref: ref, "data-component": "dialog-closebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Close". Name it for screen readers with aria-label instead, e.g. aria-label="Close". Pass asChild to give closing behavior to your own button instead, like a "Done" Button. */
+export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ asChild, disableStyle, children, ...props }, ref) {
+    const rendering = asChildRendering({ asChild, children, component: 'dialog-closebutton', disableStyle });
+    return _jsx(BaseDialog.Close, { ...props, ref: ref, ...rendering });
 });
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
-export const CloseButtonIcon = forwardRef(function CloseButtonIcon({ disableStyle, children, className, ...props }, ref) {
+export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIcon({ disableStyle, children, className, ...props }, ref) {
     return cloneElement(children ?? _jsx(X, {}), {
         ...props,
         ref,
@@ -99,4 +99,3 @@ export const CloseButtonIcon = forwardRef(function CloseButtonIcon({ disableStyl
         className: twMerge(children?.props.className, className),
     });
 });
-//# sourceMappingURL=index.js.map

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

@@ -18,4 +18,3 @@ import type { HTMLAttributes } from 'react';
  */
 export default function Divider({ disableStyle, className, ...props }: HTMLAttributes<HTMLHRElement> & StyleProps): import("react").JSX.Element;
 export declare function Text({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/divider/index.js

@@ -21,4 +21,3 @@ export default function Divider({ disableStyle, className, ...props }) {
 export function Text({ disableStyle, className, ...props }) {
     return (_jsx("p", { "data-component": "divider-text", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map