@central-ui/react 0.2.0 → 0.4.0

package/dist/components/combobox/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 import { Check, ChevronsUpDown, LoaderCircle, X } from "../../utils/icons.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState } from 'react';
+import { cloneElement, createContext, useContext, useEffect, useId, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
@@ -181,23 +181,20 @@ export function Root({ children, id, validation, defaultOpen = false, onOpenChan
             }, children: children }) }));
 }
 /** Use for the standard stacked layout, or omit when supplying your own layout. */
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+export function Container({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "combobox-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+export function Label({ disableStyle, className, ref, ...props }) {
     const context = useComboboxContext();
     const attributes = usePartAttributes();
     return (_jsx("label", { ...attributes, ...props, ref: ref, htmlFor: context.inputId, "data-component": "combobox-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Search input with built-in filtering and selected-label display. Its id is managed by Root. Inside ChipsList, the preset automatically uses the compact chip-input sizing. */
-export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+export function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useComboboxContext();
     const inChips = useContext(ChipsContext);
     return (_jsx(BaseCombobox.Input, { "aria-invalid": context.validation.state === 'error' || undefined, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ...props, ref: ref, id: context.inputId, "data-component": "combobox-input", "data-style-disabled": disableStyle ? '' : undefined, "data-in-chips": inChips ? '' : undefined, className: className }));
-});
-function ChipsListInner({ disableStyle, children, className, ...props }, ref) {
-    return (_jsx(BaseCombobox.Value, { children: (selected) => (_jsx(ChipsContext.Provider, { value: true, children: _jsx(BaseCombobox.Chips, { ...props, ref: ref, "data-slot": "chips-list", "data-component": "combobox-chipslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? children(selected) : children }) })) }));
 }
 /**
  * Selected-item chips inside InputGroup for multiple selection.
@@ -225,13 +222,15 @@ function ChipsListInner({ disableStyle, children, className, ...props }, ref) {
  *   </Combobox.ChipsList>
  * </Combobox.InputGroup>
  */
-export const ChipsList = /* @__PURE__ */ forwardRef(ChipsListInner);
+export function ChipsList({ disableStyle, children, className, ref, ...props }) {
+    return (_jsx(BaseCombobox.Value, { children: (selected) => (_jsx(ChipsContext.Provider, { value: true, children: _jsx(BaseCombobox.Chips, { ...props, ref: ref, "data-slot": "chips-list", "data-component": "combobox-chipslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? children(selected) : children }) })) }));
+}
 /** Reads Base UI selection without rendering its own element. Use its children callback only when you need a custom selection display; Input already displays the selected label automatically. */
 export const Value = BaseCombobox.Value;
 /** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
-export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ disableStyle, className, ...props }, ref) {
+export function ScrollArea({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.List, { ...props, ref: ref, "data-component": "combobox-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Required groups container inside ScrollArea. A children callback receives each automatically filtered group; do not filter or map the original groups again. Manually annotate group with Combobox.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
 export function GroupsList({ disableStyle, children, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "combobox-groupslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? (_jsx(BaseCombobox.Collection, { children: children })) : (children) }));
@@ -259,15 +258,15 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     : { ...baseStyle, ...style } }) }) }));
 }
 /** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
-export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+export function Arrow({ disableStyle, className, style, ref, ...props }) {
     return (_jsxs(BaseCombobox.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "combobox-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "combobox-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "combobox-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "combobox-arrow-3" })] }));
-});
+}
 /** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
-export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, variant = 'normal', className, ...props }, ref) {
+export function Addon({ disableStyle, variant = 'normal', className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-variant": variant, "data-component": "combobox-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
-export const AddonIcon = /* @__PURE__ */ forwardRef(function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ...props }, ref) {
+export function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ref, ...props }) {
     const attributes = usePartAttributes();
     return cloneElement(children, {
         ...attributes,
@@ -279,112 +278,121 @@ export const AddonIcon = /* @__PURE__ */ forwardRef(function AddonIcon({ disable
         'data-style-disabled': disableStyle ? '' : undefined,
         className: twMerge(children.props.className, className),
     });
-});
+}
 /** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
-export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+export function AddonButton({ disableStyle, className, disabled, type = 'button', ref, ...props }) {
     const context = useComboboxContext();
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "combobox-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Input control wrapper. Place Input (or ChipsList containing Input) and optional Addon controls inside. Root validation controls its preset validation border. */
-export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, ...props }, ref) {
+export function InputGroup({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx(BaseCombobox.InputGroup, { "data-validation": attributes['data-validation'], ...props, ref: ref, "data-component": "combobox-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Displays one selected item inside ChipsList. Keep chips in selected-item order so Base UI can remove the matching item. Supply the item label and an optional removal control. */
-export const Chip = /* @__PURE__ */ forwardRef(function Chip({ disableStyle, className, ...props }, ref) {
+export function Chip({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.Chip, { ...props, ref: ref, "data-component": "combobox-chip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Removes the surrounding Chip from selection automatically; no onClick handler needed. Supply its content, normally ChipRemoveButtonIcon, and an accessible label. */
-export const ChipRemoveButton = /* @__PURE__ */ forwardRef(function ChipRemoveButton({ disableStyle, className, ...props }, ref) {
+export function ChipRemoveButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.ChipRemove, { ...props, ref: ref, "data-component": "combobox-chipremovebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
-export const AddonOpenButton = /* @__PURE__ */ forwardRef(function AddonOpenButton({ disableStyle, className, ...props }, ref) {
+export function AddonOpenButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.Trigger, { ...props, ref: ref, "data-component": "combobox-addonopenbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Clears the selection automatically; no click handler needed. Supply its content, normally AddonClearButtonIcon, and an accessible label. */
-export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearButton({ disableStyle, className, ...props }, ref) {
+export function AddonClearButton({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.Clear, { ...props, ref: ref, "data-component": "combobox-addonclearbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
-export const GroupLabel = /* @__PURE__ */ forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
+export function GroupLabel({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.GroupLabel, { ...props, ref: ref, "data-component": "combobox-grouplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Required empty-results message inside Popup, before optional Loading and ScrollArea. Keep mounted statically: Base UI renders its children only when no items match. Do not manually toggle, hide, or conditionally mount it. */
-export const Empty = /* @__PURE__ */ forwardRef(function Empty({ disableStyle, className, ...props }, ref) {
+export function Empty({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.Empty, { ...props, ref: ref, "data-component": "combobox-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
-export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
+export function Separator({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.Separator, { ...props, ref: ref, "data-component": "combobox-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
-export const ItemText = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
+export function ItemText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "combobox-itemtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional decorative text inside Addon. Supply the text as children. */
-export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+export function AddonText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "combobox-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
-export const EmptyText = /* @__PURE__ */ forwardRef(function EmptyText({ disableStyle, className, ...props }, ref) {
+export function EmptyText({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "combobox-emptytext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional supporting text. Supply its content; it describes the input to screen readers automatically. */
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+export function Description({ disableStyle, className, id, ref, ...props }) {
     const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "combobox-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+export function Error({ children, ref, ...props }) {
     const context = useComboboxContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "combobox-error", children: content });
-});
+}
 /** 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 const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+export function Success({ children, ref, ...props }) {
     const context = useComboboxContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "combobox-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the input
-const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+function Message({ disableStyle, className, id, component, ref, ...props }) {
     const describedById = useDescribedById(id);
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
-/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
-export const AddonOpenButtonIcon = /* @__PURE__ */ forwardRef(function AddonOpenButtonIcon(props, ref) {
+}
+/** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export function AddonOpenButtonIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronsUpDown, component: "combobox-addonopenbuttonicon" });
-});
-/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
-export const AddonClearButtonIcon = /* @__PURE__ */ forwardRef(function AddonClearButtonIcon(props, ref) {
+}
+/** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export function AddonClearButtonIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "combobox-addonclearbuttonicon" });
-});
-/** Built-in decorative removal icon. Place inside ChipRemoveButton; no children needed. Defaults to strokeWidth 1.5. */
-export const ChipRemoveButtonIcon = /* @__PURE__ */ forwardRef(function ChipRemoveButtonIcon(props, ref) {
+}
+/** Built-in decorative removal icon. Place inside ChipRemoveButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export function ChipRemoveButtonIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "combobox-chipremovebuttonicon" });
-});
+}
 /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
-export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon(props, ref) {
+export function AddonLoadingIcon({ ref, ...props }) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: LoaderCircle, component: "combobox-addonloadingicon" });
-});
+}
 // The shared body of the built-in decorative icons above, which only differ by their icon and component name
-const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth = 1.5, icon: Icon, component, ...props }, ref) {
+function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ref, ...props }) {
     const attributes = usePartAttributes();
-    return _jsx(Icon, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
+    return cloneElement(children ?? _jsx(Icon, {}), {
+        ...attributes,
+        'aria-hidden': true,
+        ...props,
+        ref,
+        strokeWidth: strokeWidth ?? children?.props.strokeWidth ?? 1.5,
+        'data-component': component,
+        'data-style-disabled': disableStyle ? '' : undefined,
+        className: twMerge(children?.props.className, className),
+    });
+}
 /** Required selection indicator inside Item. Visibility is automatic and a checkmark is supplied: no children or selection condition needed. Pass children only to replace the built-in checkmark. */
-export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, keepMounted, ...props }, ref) {
+export function ItemIndicator({ disableStyle, children, keepMounted, ref, ...props }) {
     const iconProps = {
         'aria-hidden': true,
         strokeWidth: 2,
@@ -394,19 +402,19 @@ export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({
         'data-style-disabled': disableStyle ? '' : undefined,
     };
     return (_jsx(BaseCombobox.ItemIndicator, { keepMounted: keepMounted, children: null, render: cloneElement(children ?? _jsx(Check, {}), iconProps) }));
-});
+}
 /** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
-export const Loading = /* @__PURE__ */ forwardRef(function Loading({ disableStyle, className, ...props }, ref) {
+export function Loading({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseCombobox.Status, { ...props, ref: ref, "data-component": "combobox-loading", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
-export const LoadingText = /* @__PURE__ */ forwardRef(function LoadingText({ disableStyle, className, ...props }, ref) {
+export function LoadingText({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "combobox-loadingtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
-export const LoadingIcon = /* @__PURE__ */ forwardRef(function LoadingIcon({ disableStyle, className, strokeWidth = 2, ...props }, ref) {
+export function LoadingIcon({ disableStyle, className, strokeWidth = 2, ref, ...props }) {
     return (_jsx(LoaderCircle, { "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "combobox-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const ComboboxContext = /* @__PURE__ */ createContext(null);
 // Telling Input it sits inside ChipsList, so the preset uses the compact chip-input sizing
 const ChipsContext = /* @__PURE__ */ createContext(false);

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

@@ -15,7 +15,7 @@ import type { ListBoxProps, ListBoxItemProps } from 'react-aria-components/ListB
 import { Text } from 'react-aria-components/Text';
 import { FieldError } from 'react-aria-components/FieldError';
 import type { CalendarDate } from '@internationalized/date';
-import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { ComponentProps, ReactElement, ReactNode, Ref } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 import type { Validation } from '../../types/Validation.ts';
 import type { ValidationMessageChildren } from '../../utils/Validation.ts';
@@ -53,6 +53,7 @@ type SharedRootProps = {
      * Omit it to keep only the picker's own validation, like a required or out-of-range date.
      */
     validation?: Validation;
+    ref?: Ref<HTMLDivElement>;
 };
 type SingleRootProps = Pick<DatePickerProps<CalendarDate>, CoreKeys | 'name' | 'autoComplete'> & SharedRootProps & {
     /** Use range for a start/end selection; single is the default. Choose the corresponding field composition. */
@@ -158,7 +159,7 @@ export type RootProps = SingleRootProps | RangeRootProps;
  *   }
  * </DatePicker.PresetsList>
  */
-export declare const Root: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Root({ ref, ...props }: RootProps): import("react").JSX.Element;
 export declare function Container({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function Label({ disableStyle, className, ...props }: Omit<ComponentProps<typeof AriaLabel>, 'htmlFor' | 'slot' | 'render'> & StyleProps): import("react").JSX.Element;
 export declare function InputGroup({ disableStyle, className, ...props }: (Omit<ComponentProps<typeof AriaGroup>, 'className' | 'style' | 'render' | 'slot' | 'isDisabled' | 'isReadOnly' | 'isInvalid'> & {
@@ -219,12 +220,10 @@ export declare function OpenButtonIcon({ disableStyle, children, className, ...p
 export type PopupProps = Omit<PopoverProps, 'className' | 'style' | 'render' | 'slot' | 'trigger' | 'isOpen' | 'defaultOpen' | 'onOpenChange'> & {
     className?: string;
     style?: ComponentProps<'div'>['style'];
+    ref?: Ref<HTMLElement>;
 } & StyleProps;
 /** 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 declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopoverProps, "className" | "slot" | "style" | "render" | "onOpenChange" | "defaultOpen" | "isOpen" | "trigger"> & {
-    className?: string;
-    style?: ComponentProps<"div">["style"];
-} & StyleProps & import("react").RefAttributes<HTMLElement>>;
+export declare function Popup({ disableStyle, ref, ...props }: PopupProps): import("react").JSX.Element;
 export type CalendarConfiguration = Omit<CalendarProps<CalendarDate>, 'children' | 'render' | 'className' | 'style' | 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | 'focusedValue' | 'defaultFocusedValue' | 'onFocusChange' | 'selectionMode' | 'pageBehavior' | 'slot' | 'isDisabled' | 'isReadOnly' | 'isInvalid' | 'firstDayOfWeek' | 'createCalendar' | 'visibleDuration'> & {
     /** Choose how many months to show. TablesList calls its children once for each month. */
     visibleDuration?: Pick<NonNullable<CalendarProps<CalendarDate>['visibleDuration']>, 'months'>;
@@ -253,12 +252,12 @@ export declare function Item({ disableStyle, value, className, textValue, ...pro
     className?: string;
     style?: ComponentProps<'div'>['style'];
 }) & StyleProps): import("react").JSX.Element;
-export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<Omit<import("react-aria-components/DatePicker").TextProps & import("react").RefAttributes<HTMLElement>, "slot" | "render"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare function ItemText({ disableStyle, className, ref, ...props }: Omit<ComponentProps<typeof Text>, 'slot' | 'render'> & StyleProps): import("react").JSX.Element;
 /** 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 declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & {
+export declare function ItemIndicator({ disableStyle, children, ref, ...props }: Omit<SVGIconProps, 'children'> & {
     /** Optional replacement SVG icon. It receives this indicator's props and ref. */
     children?: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+} & StyleProps): import("react").FunctionComponentElement<any> | null;
 export declare function Actions({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function ViewDateValue({ disableStyle, className, level, ...props }: (Omit<ComponentProps<'h2'>, 'children'> & Pick<ComponentProps<typeof Heading>, 'level'>) & StyleProps): import("react").JSX.Element;
 export declare function PreviousButton({ disableStyle, className, isDisabled, ...props }: StyledButtonProps & StyleProps): import("react").JSX.Element;

package/dist/components/datepicker/index.js

@@ -21,17 +21,17 @@ import { parseDate, toCalendarDate, toCalendar, GregorianCalendar, } from '@inte
 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 { cloneElement, createContext, useContext, Fragment, useState, useMemo, } from 'react';
 import { CalendarDays, Check, ChevronLeft, ChevronRight, LoaderCircle, } from "../../utils/icons.js";
 import { twMerge } from 'tailwind-merge';
 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) {
+function SinglePicker({ mode, locale, validation, presets, value, defaultValue, minValue, maxValue, placeholderValue, onValueChange, disabled, readOnly, required, open, isDateUnavailable, ref, ...props }) {
     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, validation, presets, value, defaultValue, minValue, maxValue, placeholderValue, onValueChange, disabled, readOnly, required, open, isDateUnavailable, ...props }, ref) {
+}
+function RangePicker({ mode, locale, validation, presets, value, defaultValue, minValue, maxValue, placeholderValue, onValueChange, disabled, readOnly, required, open, isDateUnavailable, ref, ...props }) {
     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
@@ -41,7 +41,7 @@ const RangePicker = /* @__PURE__ */ forwardRef(function RangePicker({ mode, loca
             }
             : null), isDateUnavailable: isDateUnavailable &&
             ((date, anchor) => isDateUnavailable(toGregorianDateString(date), anchor ? toGregorianDateString(anchor) : null)) }));
-});
+}
 function Picker({ pickerRef, ...props }) {
     if (props.mode === 'range')
         return _jsx(RangePicker, { ...props, ref: pickerRef });
@@ -123,7 +123,7 @@ function Picker({ pickerRef, ...props }) {
  *   }
  * </DatePicker.PresetsList>
  */
-export const Root = /* @__PURE__ */ forwardRef(function Root(props, ref) {
+export function Root({ ref, ...props }) {
     const [buttonAnchor, setButtonAnchor] = useState(null);
     const buttonAnchorRef = useMemo(() => ({ current: buttonAnchor }), [buttonAnchor]);
     return (_jsx(I18nProvider, { locale: props.locale ?? 'en-US', children: _jsx(ConfigurationContext.Provider, { value: {
@@ -135,7 +135,7 @@ export const Root = /* @__PURE__ */ forwardRef(function Root(props, ref) {
                 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 }));
 }
@@ -273,14 +273,14 @@ 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 = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, ...props }, ref) {
+export function Popup({ disableStyle, ref, ...props }) {
     // The Popover supplies dialog semantics itself. Merge DatePicker's generated dialog
     // id/labeling onto that same element instead of adding another Dialog wrapper.
     const context = useContext(ConfigurationContext);
     const [mergedProps, mergedRef] = useContextProps(props, ref, DialogContext);
     const { className, style, placement = 'bottom end', offset = 5, ...rest } = mergedProps;
     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 }));
 }
@@ -341,11 +341,11 @@ export function Item({ disableStyle, value, className, textValue, ...props }) {
             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 = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
+export function ItemText({ disableStyle, className, ref, ...props }) {
     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 = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, ...props }, ref) {
+export function ItemIndicator({ disableStyle, children, ref, ...props }) {
     // 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);
@@ -362,7 +362,7 @@ export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({
         'data-style-disabled': disableStyle ? '' : undefined,
     };
     return cloneElement(children ?? _jsx(Check, {}), iconProps);
-});
+}
 export function Actions({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "datepicker-actions", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }

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

@@ -1,6 +1,6 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 /**
@@ -43,33 +43,33 @@ import type { AsChildProps } from '../../utils/asChild.ts';
  */
 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"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseDialog.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopupProps = Omit<BaseDialog.Popup.Props, 'className'> & {
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<BaseDialog.Popup.Props, 'className' | 'render'> & {
     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<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export type BackdropProps = Omit<BaseDialog.Backdrop.Props, 'className'> & {
+export declare function Popup({ disableStyle, container, keepMounted, className, style, ref, ...props }: PopupProps): import("react").JSX.Element;
+export type BackdropProps = Omit<BaseDialog.Backdrop.Props, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseDialog.Portal.Props, 'container' | 'keepMounted'> & StyleProps;
-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>>;
-export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogTitleProps, "className"> & {
+export declare function Backdrop({ disableStyle, container, keepMounted, className, ref, ...props }: BackdropProps): import("react").JSX.Element;
+export declare function Header({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Body({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Footer({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Title({ disableStyle, className, ref, ...props }: (Omit<BaseDialog.Title.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AlertDialogDescriptionProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: (Omit<BaseDialog.Description.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** 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"> & {
+export declare function CloseButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseDialog.Close.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps): import("react").JSX.Element;
 /** 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 & {
+export declare function CloseButtonIcon({ disableStyle, children, className, ref, ...props }: (SVGIconProps & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}) & StyleProps): import("react").FunctionComponentElement<any>;

package/dist/components/dialog/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
-import { cloneElement, forwardRef } from 'react';
+import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { X } from "../../utils/icons.js";
 import { asChildRendering } from "../../utils/asChild.js";
@@ -46,12 +46,12 @@ 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) {
+export function OpenButton({ asChild, disableStyle, children, ref, ...props }) {
     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) {
+export function Popup({ disableStyle, container, keepMounted, className, style, ref, ...props }) {
     const baseStyle = {
         position: 'fixed',
         top: '50%',
@@ -62,32 +62,32 @@ export const Popup = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, c
     return (_jsx(BaseDialog.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseDialog.Viewport, { children: _jsx(BaseDialog.Popup, { ...props, ref: ref, "data-component": "dialog-popup", "data-style-disabled": disableStyle ? '' : undefined, className: className, style: typeof style === 'function'
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
-});
-export const Backdrop = /* @__PURE__ */ forwardRef(function Backdrop({ disableStyle, container, keepMounted, className, ...props }, ref) {
+}
+export function Backdrop({ disableStyle, container, keepMounted, className, ref, ...props }) {
     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 = /* @__PURE__ */ forwardRef(function Header({ disableStyle, className, ...props }, ref) {
+}
+export function Header({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "dialog-header", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+}
+export function Body({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "dialog-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Footer = /* @__PURE__ */ forwardRef(function Footer({ disableStyle, className, ...props }, ref) {
+}
+export function Footer({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "dialog-footer", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+}
+export function Title({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDialog.Title, { ...props, ref: ref, "data-component": "dialog-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+}
+export function Description({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDialog.Description, { ...props, ref: ref, "data-component": "dialog-description", "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) {
+export function CloseButton({ asChild, disableStyle, children, ref, ...props }) {
     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) {
+export function CloseButtonIcon({ disableStyle, children, className, ref, ...props }) {
     return cloneElement(children ?? _jsx(X, {}), {
         ...props,
         ref,
@@ -97,5 +97,6 @@ export const CloseButtonIcon = /* @__PURE__ */ forwardRef(function CloseButtonIc
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(children?.props.className, className),
+        strokeWidth: props.strokeWidth ?? children?.props.strokeWidth ?? 2,
     });
-});
+}