@central-ui/react 0.3.0 → 0.5.0

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,
     });
-});
+}

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

@@ -1,7 +1,7 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import type { SVGIconProps } from '../../types/Icon.ts';
 /**
  * Choose swipeDirection on Root and keep trigger and Popup in that Root. Popup already includes its portal. Provider and Indent parts are for an optional indented-background composition, not required for a basic drawer.
@@ -47,44 +47,44 @@ export declare function Root<Payload = unknown>({ swipeDirection, ...props }: Ba
 /** Optional: use around IndentBackground, Indent and drawers when app indentation is needed. */
 export declare const Provider: typeof BaseDrawer.Provider;
 /** Optional: background layer for app indentation; use with Indent inside Provider. */
-export declare const IndentBackground: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerIndentBackgroundProps, "className"> & {
+export declare function IndentBackground({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.IndentBackground.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Optional: wraps the app content when indentation is needed; use inside Provider. */
-export declare const Indent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerIndentProps, "className"> & {
+export declare function Indent({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.Indent.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Optional: a custom swipe-to-open area outside Popup but inside Root. Unpainted by default; style its size and position at the call site. */
-export declare const SwipeArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerSwipeAreaProps, "className"> & {
+export declare function SwipeArea({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.SwipeArea.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Opens the drawer. Pass asChild to give this behavior to your own element, like your app's Button. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseDrawer.Trigger.Props<unknown>, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseDrawer.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopupProps = Omit<BaseDrawer.Popup.Props, 'className'> & {
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<BaseDrawer.Popup.Props, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseDrawer.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 declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DrawerBackdropProps, "className"> & {
+export declare function Popup({ disableStyle, container, keepMounted, className, style, ref, ...props }: PopupProps): import("react").JSX.Element;
+export declare function Backdrop({ disableStyle, container, keepMounted, className, ref, ...props }: (Omit<BaseDrawer.Backdrop.Props, 'className' | 'render'> & {
     className?: string;
-} & Pick<import("@base-ui/react").DrawerPortalProps, "keepMounted" | "container"> & StyleProps, "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").DrawerTitleProps, "className"> & {
+} & Pick<BaseDrawer.Portal.Props, 'container' | 'keepMounted'>) & StyleProps): 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<BaseDrawer.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").DrawerDescriptionProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: (Omit<BaseDrawer.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 drawer". 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").DrawerCloseProps, "className" | "render"> & {
+export declare function CloseButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseDrawer.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/drawer/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
-import { cloneElement, forwardRef } from 'react';
+import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { X } from "../../utils/icons.js";
 /**
@@ -50,24 +50,24 @@ export function Root({ swipeDirection = 'right', ...props }) {
 /** Optional: use around IndentBackground, Indent and drawers when app indentation is needed. */
 export const Provider = BaseDrawer.Provider;
 /** Optional: background layer for app indentation; use with Indent inside Provider. */
-export const IndentBackground = /* @__PURE__ */ forwardRef(function IndentBackground({ disableStyle, className, ...props }, ref) {
+export function IndentBackground({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.IndentBackground, { ...props, ref: ref, "data-component": "drawer-indentbackground", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional: wraps the app content when indentation is needed; use inside Provider. */
-export const Indent = /* @__PURE__ */ forwardRef(function Indent({ disableStyle, className, ...props }, ref) {
+export function Indent({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.Indent, { ...props, ref: ref, "data-component": "drawer-indent", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Optional: a custom swipe-to-open area outside Popup but inside Root. Unpainted by default; style its size and position at the call site. */
-export const SwipeArea = /* @__PURE__ */ forwardRef(function SwipeArea({ disableStyle, className, ...props }, ref) {
+export function SwipeArea({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseDrawer.SwipeArea, { ...props, ref: ref, "data-component": "drawer-swipearea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Opens the drawer. Pass asChild to give this behavior to your own element, 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: 'drawer-openbutton', disableStyle });
     return _jsx(BaseDrawer.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 }) {
     return (_jsx(BaseDrawer.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseDrawer.Viewport, { children: _jsx(BaseDrawer.Popup, { ...props, ref: ref, "data-component": "drawer-popup", "data-style-disabled": disableStyle ? '' : undefined, className: className, style: (state) => {
                     const vertical = state.swipeDirection === 'up' || state.swipeDirection === 'down';
                     // Sliding in and out from the side it swipes towards, otherwise following the finger (and the snap point, vertically)
@@ -96,32 +96,32 @@ export const Popup = /* @__PURE__ */ forwardRef(function Popup({ disableStyle, c
                         ...(typeof style === 'function' ? style(state) : 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(BaseDrawer.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseDrawer.Backdrop, { ...props, ref: ref, "data-component": "drawer-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": "drawer-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": "drawer-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": "drawer-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(BaseDrawer.Title, { ...props, ref: ref, "data-component": "drawer-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(BaseDrawer.Description, { ...props, ref: ref, "data-component": "drawer-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 drawer". 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: 'drawer-closebutton', disableStyle });
     return _jsx(BaseDrawer.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,
@@ -131,5 +131,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,
     });
-});
+}

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

@@ -1,5 +1,5 @@
 import type { StyleProps } from '../../types/Style.ts';
-import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
 type Tone = 'neutral' | 'critical';
 /**
  * Explains why something can't be shown, like a page that doesn't exist or a section the user isn't allowed to see. It isn't an error, just a normal state of the app.
@@ -68,19 +68,31 @@ export declare function Root({ tone, children, }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 /** Centers the panel and fills its container's height. */
-export declare const Surface: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & StyleProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Surface({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+} & StyleProps): import("react").JSX.Element;
+export declare function Body({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 /** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
-export declare const Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & StyleProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & StyleProps & import("react").RefAttributes<HTMLParagraphElement>>;
-export declare const Image: import("react").ForwardRefExoticComponent<ImgHTMLAttributes<HTMLImageElement> & StyleProps & import("react").RefAttributes<HTMLImageElement>>;
+export declare function Title({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+    ref?: Ref<HTMLHeadingElement>;
+} & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+    ref?: Ref<HTMLParagraphElement>;
+} & StyleProps): import("react").JSX.Element;
+export declare function Image({ disableStyle, className, ref, ...props }: ImgHTMLAttributes<HTMLImageElement> & {
+    ref?: Ref<HTMLImageElement>;
+} & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export declare const Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children"> & {
+export declare function Icon({ disableStyle, children, className, ref, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
-    children: ReactElement<ComponentProps<"svg">>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    children: ReactElement<ComponentProps<'svg'>>;
+}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
 /** Takes your own buttons, like a primary "Go to dashboard"; it creates no actions itself. */
-export declare const ActionsList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & StyleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ActionsList({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+} & StyleProps): import("react").JSX.Element;
 /** A small footnote below the actions, like "Still stuck? Contact support" with a link. */
-export declare const HelpText: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & StyleProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare function HelpText({ disableStyle, className, ref, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+    ref?: Ref<HTMLParagraphElement>;
+} & StyleProps): import("react").JSX.Element;
 export {};

package/dist/components/exception/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, createContext, forwardRef, useContext } from 'react';
+import { cloneElement, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 const ToneContext = /* @__PURE__ */ createContext(null);
 /**
@@ -62,29 +62,29 @@ export function Root({ tone = 'neutral', children, }) {
     return _jsx(ToneContext.Provider, { value: tone, children: children });
 }
 /** Centers the panel and fills its container's height. */
-export const Surface = /* @__PURE__ */ forwardRef(function Surface({ disableStyle, className, ...props }, ref) {
+export function Surface({ disableStyle, className, ref, ...props }) {
     const tone = useTone('Surface');
     return (_jsx("div", { ...props, ref: ref, "data-component": "exception-surface", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
-});
-export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+}
+export function Body({ disableStyle, className, ref, ...props }) {
     const tone = useTone('Body');
     return (_jsx("div", { ...props, ref: ref, "data-component": "exception-body", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
-});
+}
 /** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
-export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+export function Title({ disableStyle, className, ref, ...props }) {
     const tone = useTone('Title');
     return (_jsx("h2", { ...props, ref: ref, "data-component": "exception-title", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+}
+export function Description({ disableStyle, className, ref, ...props }) {
     const tone = useTone('Description');
     return (_jsx("p", { ...props, ref: ref, "data-component": "exception-description", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
-});
-export const Image = /* @__PURE__ */ forwardRef(function Image({ disableStyle, className, ...props }, ref) {
+}
+export function Image({ disableStyle, className, ref, ...props }) {
     const tone = useTone('Image');
     return (_jsx("img", { alt: "", ...props, ref: ref, "data-component": "exception-image", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
-});
+}
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, children, className, ...props }, ref) {
+export function Icon({ disableStyle, children, className, ref, ...props }) {
     const tone = useTone('Icon');
     return cloneElement(children, {
         ...props,
@@ -97,17 +97,17 @@ export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, chi
         className: twMerge(children.props.className, className),
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
     });
-});
+}
 /** Takes your own buttons, like a primary "Go to dashboard"; it creates no actions itself. */
-export const ActionsList = /* @__PURE__ */ forwardRef(function ActionsList({ disableStyle, className, ...props }, ref) {
+export function ActionsList({ disableStyle, className, ref, ...props }) {
     const tone = useTone('ActionsList');
     return (_jsx("div", { ...props, ref: ref, "data-component": "exception-actionslist", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
-});
+}
 /** A small footnote below the actions, like "Still stuck? Contact support" with a link. */
-export const HelpText = /* @__PURE__ */ forwardRef(function HelpText({ disableStyle, className, ...props }, ref) {
+export function HelpText({ disableStyle, className, ref, ...props }) {
     const tone = useTone('HelpText');
     return (_jsx("p", { ...props, ref: ref, "data-component": "exception-helptext", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
-});
+}
 function useTone(part) {
     const tone = useContext(ToneContext);
     if (!tone)

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

@@ -48,8 +48,8 @@ import type { ComponentProps, ReactElement, ReactNode } from 'react';
  */
 export declare function Root({ children, ...props }: Omit<ArkFileUpload.RootProps, 'asChild'>): 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 }: ArkFileUpload.LabelProps & StyleProps): import("react").JSX.Element;
-export declare function Dropzone({ disableStyle, children, className, ...props }: ArkFileUpload.DropzoneProps & StyleProps): import("react").JSX.Element;
+export declare function Label({ disableStyle, className, ...props }: Omit<ArkFileUpload.LabelProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function Dropzone({ disableStyle, children, className, ...props }: Omit<ArkFileUpload.DropzoneProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Opens the file picker. Pass asChild to give this behavior to your own button, like an "Upload" Button; it keeps the state data attributes but none of this part's styling. */
 export declare function PickerButton({ asChild, disableStyle, ...props }: ArkFileUpload.TriggerProps & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
@@ -70,16 +70,16 @@ export declare function FileList({ disableStyle, children, className, style, onC
         errors: FileUploadFileRejection['errors'];
     }) => ReactNode;
 }) & StyleProps): import("react").JSX.Element;
-export declare function File({ disableStyle, status, className, children, ...props }: (ArkFileUpload.ItemProps & {
+export declare function File({ disableStyle, status, className, children, ...props }: (Omit<ArkFileUpload.ItemProps, 'asChild'> & {
     /** Pass the status from the FileList entry so rejected files get the matching error/removal behavior. */
     status: 'accepted' | 'rejected';
 }) & StyleProps): import("react").JSX.Element;
 /** Reads the surrounding File automatically. Omit children to keep the supplied text; override only for custom presentation. */
 export declare function FileErrorText({ disableStyle, children, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
-export declare function FilePreview({ disableStyle, className, ...props }: ArkFileUpload.ItemPreviewProps & StyleProps): import("react").JSX.Element;
-export declare function FilePreviewImage({ disableStyle, className, ...props }: ArkFileUpload.ItemPreviewImageProps & StyleProps): import("react").JSX.Element;
+export declare function FilePreview({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemPreviewProps, 'asChild'> & StyleProps): import("react").JSX.Element;
+export declare function FilePreviewImage({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemPreviewImageProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Chooses image preview versus fallback from the file type automatically. Supply fallback content for non-image files; do not add a second file-type condition. */
-export declare function FileThumbnail({ disableStyle, children, className, ...props }: Omit<ArkFileUpload.ItemPreviewProps, 'type' | 'children'> & {
+export declare function FileThumbnail({ disableStyle, children, className, ...props }: Omit<ArkFileUpload.ItemPreviewProps, 'asChild' | 'type' | 'children'> & {
     children?: ReactNode;
 } & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
@@ -88,9 +88,9 @@ export declare function FileThumbnailIcon({ disableStyle, children, className, .
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
 /** Reads the surrounding File automatically. Omit children to keep the supplied text; override only for custom presentation. */
-export declare function FileName({ disableStyle, className, ...props }: ArkFileUpload.ItemNameProps & StyleProps): import("react").JSX.Element;
+export declare function FileName({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemNameProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Reads the surrounding File automatically. Omit children to keep the supplied text; override only for custom presentation. */
-export declare function FileSize({ disableStyle, className, ...props }: ArkFileUpload.ItemSizeTextProps & StyleProps): import("react").JSX.Element;
+export declare function FileSize({ disableStyle, className, ...props }: Omit<ArkFileUpload.ItemSizeTextProps, 'asChild'> & StyleProps): import("react").JSX.Element;
 /** Removes the surrounding file automatically, including rejected entries. No extra removal click handler needed. */
 export declare function FileRemoveButton({ disableStyle, children, className, ...props }: (Omit<ArkFileUpload.ItemDeleteTriggerProps, 'asChild' | 'children'> & {
     children?: ReactNode;