@central-ui/react 0.1.2 → 0.2.0

package/dist/components/datepicker/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
@@ -21,15 +22,19 @@ 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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),
@@ -121,14 +126,15 @@ function Picker({ pickerRef, ...props }) {
 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 }));
@@ -148,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,
@@ -163,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,
@@ -213,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,
@@ -225,57 +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-placeholder": children == null &&
-            (mode === 'range'
-                ? !range?.value.start || !range.value.end
-                : !single?.value)
-            ? ''
-            : undefined, "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,
         ...{
@@ -290,10 +276,10 @@ export function OpenButtonIcon({ disableStyle, children = _jsx(CalendarDays, {})
 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 }));
@@ -303,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') {
@@ -337,18 +324,18 @@ 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 ||
@@ -397,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,
         ...{
@@ -429,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,
         ...{
@@ -452,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 = /* @__PURE__ */ 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,
@@ -508,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')
@@ -527,4 +510,3 @@ function parseDateRange(value) {
         end: parseDateString(value.end),
     };
 }
-//# sourceMappingURL=index.js.map

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

@@ -2,8 +2,9 @@ import type { StyleProps } from '../../types/Style.ts';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import type { ReactElement } from '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 { SVGIconProps } from '../../types/Icon.ts';
  * 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 { SVGIconProps } from '../../types/Icon.ts';
  *         </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 { SVGIconProps } from '../../types/Icon.ts';
  *   }
  * </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<SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     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,14 +42,13 @@ 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, container, keepMounted, className, style, ...props }, ref) {
@@ -83,8 +81,10 @@ export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, c
 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 = /* @__PURE__ */ 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 = /* @__PURE__ */ forwardRef(function CloseButtonIcon({ disableStyle, children, className, ...props }, ref) {
@@ -99,4 +99,3 @@ export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIc
         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