@central-ui/react 0.2.0 → 0.4.0

package/dist/components/textarea/index.js

@@ -3,7 +3,7 @@ import { Input as BaseInput } from '@base-ui/react/input';
 import { LoaderCircle } from "../../utils/icons.js";
 import { useRef } from 'react';
 import { useForwardClickToInput } from "../../utils/useForwardClickToInput.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";
 /**
@@ -60,7 +60,7 @@ export function Root({ children, id, validation, value, defaultValue, onValueCha
             validation: readValidation(validation),
         }, children: children }));
 }
-export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
+export function Textarea({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
     const context = useInputContext();
     const inputRef = useRef(null);
     // Resetting the internal value when the surrounding html form resets, since the control is always controlled by Root's value
@@ -90,58 +90,58 @@ export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableSt
             if (!details.isCanceled && !context.controlled)
                 context.setValueInternalState(nextValue);
         }, "data-component": "textarea-textarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const TextareaGroup = /* @__PURE__ */ forwardRef(function TextareaGroup({ disableStyle, className, onClick, ...props }, ref) {
+}
+export function TextareaGroup({ disableStyle, className, onClick, ref, ...props }) {
     const attributes = usePartAttributes();
     const forwardClick = useForwardClickToInput('textarea', onClick);
     return (_jsx("div", { ...attributes, ...props, ref: ref, onClick: forwardClick, "data-component": "textarea-textareagroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+}
+export function Container({ disableStyle, className, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "textarea-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export function Label({ disableStyle, className, id, ref, ...props }) {
     const context = useInputContext();
     const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
     return (_jsx("label", { ...attributes, ...props, id: labelId, ref: ref, htmlFor: context.inputId, "data-component": "textarea-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+}
+export function Description({ disableStyle, className, id, ref, ...props }) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, id: messageId, ref: ref, "data-component": "textarea-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 = useInputContext();
     const content = validationMessageContent(context.validation, 'error', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "alert", component: "textarea-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 = useInputContext();
     const content = validationMessageContent(context.validation, 'success', children);
     if (content === undefined)
         return null;
     return _jsx(Message, { ...props, ref: ref, role: "status", component: "textarea-success", children: content });
-});
+}
 // The shared body of Error and Success, mounted only while they show, so only visible messages describe the textarea
-const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
+function Message({ disableStyle, className, id, component, ref, ...props }) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
-});
-export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+}
+export function Addon({ disableStyle, className, variant = 'normal', ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx("div", { ...attributes, ...props, ref: ref, "data-variant": variant, "data-component": "textarea-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-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": "textarea-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function AddonIcon({ disableStyle, children, className, ...props }) {
     const attributes = usePartAttributes();
@@ -157,16 +157,16 @@ export function AddonIcon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-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 = useInputContext();
     const attributes = usePartAttributes();
     return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "textarea-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+export function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ref, ...props }) {
     const attributes = usePartAttributes();
     return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "textarea-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const InputContext = /* @__PURE__ */ createContext(null);
 function useInputContext() {
     const context = useContext(InputContext);

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

@@ -2,7 +2,7 @@ import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Toast as BaseToast } from '@base-ui/react/toast';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
-export type ProviderProps = Omit<BaseToast.Provider.Props, 'toastManager'> & Pick<BaseToast.Viewport.Props, 'style'> & {
+export type ProviderProps = Omit<BaseToast.Provider.Props, 'toastManager' | 'render'> & Pick<BaseToast.Viewport.Props, 'style'> & {
     className?: string;
 };
 /**
@@ -64,10 +64,10 @@ export declare function Root({ tone, children, }: {
     tone?: 'neutral' | 'success' | 'error';
     children: ReactNode;
 }): import("react").JSX.Element;
-export type ToastProps = Omit<BaseToast.Root.Props, 'toast' | 'className'> & {
+export type ToastProps = Omit<BaseToast.Root.Props, 'toast' | 'className' | 'render'> & {
     className?: string;
 } & StyleProps;
-export declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Toast({ disableStyle, className, style, children, ref, ...props }: ToastProps): 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 function Icon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
@@ -75,20 +75,20 @@ export declare function Icon({ disableStyle, children, className, ...props }: (O
         'data-tone'?: string;
     }>;
 }) & StyleProps): import("react").FunctionComponentElement<any>;
-export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastTitleProps, "className"> & {
+export declare function Title({ disableStyle, className, ref, ...props }: (Omit<BaseToast.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").ToastDescriptionProps, "className"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ref, ...props }: (Omit<BaseToast.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". It is already named "Dismiss notification" for screen readers. Pass asChild to give dismissing behavior to your own button instead, like a "Dismiss" Button, which then names itself. */
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastCloseProps, "className" | "render"> & {
+export declare function CloseButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseToast.Close.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps): import("react").JSX.Element;
 /** Runs the toast's action. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes but none of this part's styling. */
-export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastActionProps, "className" | "render"> & {
+export declare function ActionButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseToast.Action.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 function CloseButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */

package/dist/components/toast/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Toast as BaseToast } from '@base-ui/react/toast';
 import { CircleCheck, Info, TriangleAlert, X } from "../../utils/icons.js";
-import { cloneElement, createContext, forwardRef, useContext, useEffect, useState, } from 'react';
+import { cloneElement, createContext, useContext, useEffect, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
  * Mount Provider once before calling Show. Show receives the notification composition; do not render Toast directly outside it. Icon follows Root tone automatically. For urgent priority, supply title/description in Show options so the live region can announce them.
@@ -74,7 +74,7 @@ export function Show(render, options) {
 export function Root({ tone = 'neutral', children, }) {
     return _jsx(ToneContext.Provider, { value: tone, children: children });
 }
-export const Toast = /* @__PURE__ */ forwardRef(function Toast({ disableStyle, className, style, children, ...props }, ref) {
+export function Toast({ disableStyle, className, style, children, ref, ...props }) {
     const notification = useNotificationContext();
     const tone = useContext(ToneContext);
     return (_jsx(BaseToast.Root, { ...props, ref: ref, toast: notification, "data-tone": tone, "data-component": "toast-toast", "data-style-disabled": disableStyle ? '' : undefined, className: className, style: (state) => {
@@ -115,7 +115,7 @@ export const Toast = /* @__PURE__ */ forwardRef(function Toast({ disableStyle, c
                 ...(typeof style === 'function' ? style(state) : style),
             };
         }, children: _jsx(BaseToast.Content, { "data-component": "toast-toast-1", children: children }) }));
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function Icon({ disableStyle, children, className, ...props }) {
     const tone = useContext(ToneContext);
@@ -141,24 +141,24 @@ export function Icon({ disableStyle, children, className, ...props }) {
         strokeWidth: props.strokeWidth ?? icon.props.strokeWidth ?? 1.8,
     });
 }
-export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+export function Title({ disableStyle, className, ref, ...props }) {
     return (_jsx(BaseToast.Title, { ...props, ref: ref, "data-component": "toast-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(BaseToast.Description, { ...props, ref: ref, "data-component": "toast-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 /** Icon-only: put just a CloseButtonIcon inside, never text like "Close". It is already named "Dismiss notification" for screen readers. Pass asChild to give dismissing behavior to your own button instead, like a "Dismiss" Button, which then names itself. */
-export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ asChild, disableStyle, children, ...props }, ref) {
+export function CloseButton({ asChild, disableStyle, children, ref, ...props }) {
     // Naming the icon-only button for screen readers, while the consumer's own button names itself
     const ariaLabel = asChild ? undefined : 'Dismiss notification';
     const rendering = asChildRendering({ asChild, children, component: 'toast-closebutton', disableStyle });
     return _jsx(BaseToast.Close, { "aria-label": ariaLabel, ...props, ref: ref, ...rendering });
-});
+}
 /** Runs the toast's action. Pass asChild to give this behavior to your own button instead; it keeps the state data attributes but none of this part's styling. */
-export const ActionButton = /* @__PURE__ */ forwardRef(function ActionButton({ asChild, disableStyle, children, ...props }, ref) {
+export function ActionButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'toast-actionbutton', disableStyle });
     return _jsx(BaseToast.Action, { ...props, ref: ref, ...rendering });
-});
+}
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
     const tone = useContext(ToneContext);

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

@@ -23,18 +23,18 @@ import type { SVGIconProps } from '../../types/Icon.ts';
  *   )
  * }
  */
-export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<BaseToggle.Props<string>, "className"> & {
+export declare function Root({ children, className, disableStyle, size, pressed, defaultPressed, onPressedChange, disabled, ref, ...props }: Omit<BaseToggle.Props, 'className'> & {
     className?: string;
     /** Choose the shared size for the visible parts in this composition. */
-    size?: ButtonProps["size"];
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    size?: ButtonProps['size'];
+} & StyleProps): import("react").JSX.Element;
 /** Render beside InactiveIcon inside Root. It automatically appears only while pressed; supply the decorative icon without another visibility condition. */
-export declare const ActiveIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function ActiveIcon({ ref, ...props }: SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+} & StyleProps): import("react").JSX.Element | null;
 /** Render beside ActiveIcon inside Root. It automatically appears only while unpressed; supply the decorative icon without another visibility condition. */
-export declare const InactiveIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
+export declare function InactiveIcon({ ref, ...props }: SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<SVGIconProps>;
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+} & StyleProps): import("react").JSX.Element | null;

package/dist/components/toggle/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
-import { cloneElement, createContext, forwardRef, useContext, useState, } from 'react';
+import { cloneElement, createContext, useContext, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
  * Root is the interactive toggle button. ActiveIcon and InactiveIcon switch automatically with pressed state; do not conditionally render them yourself.
@@ -22,30 +22,30 @@ import { twMerge } from 'tailwind-merge';
  *   )
  * }
  */
-export const Root = /* @__PURE__ */ forwardRef(function Root({ children, className, disableStyle, size = 'medium', pressed, defaultPressed = false, onPressedChange, disabled = false, ...props }, ref) {
+export function Root({ children, className, disableStyle, size = 'medium', pressed, defaultPressed = false, onPressedChange, disabled = false, ref, ...props }) {
     const [pressedInternalState, setPressedInternalState] = useState(defaultPressed);
     return (_jsx(BaseToggle, { ...props, ref: ref, pressed: pressed, defaultPressed: defaultPressed, disabled: disabled, "data-size": size, "data-component": "toggle-root", "data-style-disabled": disableStyle ? '' : undefined, onPressedChange: (next, details) => {
             onPressedChange?.(next, details);
             if (!details.isCanceled)
                 setPressedInternalState(next);
         }, className: className, children: _jsx(ToggleContext.Provider, { value: { pressed: pressed ?? pressedInternalState, disabled, size }, children: children }) }));
-});
+}
 /** Render beside InactiveIcon inside Root. It automatically appears only while pressed; supply the decorative icon without another visibility condition. */
-export const ActiveIcon = /* @__PURE__ */ forwardRef(function ActiveIcon(props, ref) {
+export function ActiveIcon({ ref, ...props }) {
     const context = useToggleContext();
     if (!context.pressed)
         return null;
     return _jsx(StateIcon, { ...props, ref: ref, component: "toggle-activeicon" });
-});
+}
 /** Render beside ActiveIcon inside Root. It automatically appears only while unpressed; supply the decorative icon without another visibility condition. */
-export const InactiveIcon = /* @__PURE__ */ forwardRef(function InactiveIcon(props, ref) {
+export function InactiveIcon({ ref, ...props }) {
     const context = useToggleContext();
     if (context.pressed)
         return null;
     return _jsx(StateIcon, { ...props, ref: ref, component: "toggle-inactiveicon" });
-});
+}
 // The shared body of ActiveIcon and InactiveIcon: decorates the supplied icon with the toggle's state
-const StateIcon = /* @__PURE__ */ forwardRef(function StateIcon({ disableStyle, children, className, component, ...props }, ref) {
+function StateIcon({ disableStyle, children, className, component, ref, ...props }) {
     const context = useToggleContext();
     return cloneElement(children, {
         ...props,
@@ -61,7 +61,7 @@ const StateIcon = /* @__PURE__ */ forwardRef(function StateIcon({ disableStyle,
         },
         className: twMerge(children.props.className, className),
     });
-});
+}
 const ToggleContext = /* @__PURE__ */ createContext(null);
 function useToggleContext() {
     const context = useContext(ToggleContext);

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

@@ -1,7 +1,7 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
-import type { ComponentPropsWithRef } from 'react';
+import type { ComponentProps, ComponentPropsWithRef } from 'react';
 /**
  * OpenButton renders its own trigger button; pass asChild to make your own target element the trigger instead. Keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
  *
@@ -30,13 +30,13 @@ import type { ComponentPropsWithRef } from 'react';
  */
 export declare function Root<Payload = unknown>(props: BaseTooltip.Root.Props<Payload>): import("react").JSX.Element;
 /** Opens the tooltip on hover or focus. Pass asChild to give this behavior to your own element, like your app's Button. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseTooltip.Trigger.Props<unknown>, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseTooltip.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseTooltip.Popup>, 'className'> & {
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseTooltip.Popup>, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseTooltip.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseTooltip.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & StyleProps;
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
-export declare const PopupText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function PopupText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+export declare function Arrow({ disableStyle, className, style, ref, ...props }: Omit<ComponentProps<'svg'>, 'children' | 'dangerouslySetInnerHTML'> & StyleProps): import("react").JSX.Element;

package/dist/components/tooltip/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
-import { forwardRef } from 'react';
 /**
  * OpenButton renders its own trigger button; pass asChild to make your own target element the trigger instead. Keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
  *
@@ -32,10 +31,10 @@ export function Root(props) {
     return _jsx(BaseTooltip.Root, { ...props });
 }
 /** Opens the tooltip on hover or focus. 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: 'tooltip-openbutton', disableStyle });
     return _jsx(BaseTooltip.Trigger, { ...props, ref: ref, ...rendering });
-});
+}
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side = 'top', sideOffset = 8, align = 'start', alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }) {
     const baseStyle = {
@@ -46,9 +45,9 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
 }
-export const PopupText = /* @__PURE__ */ forwardRef(function PopupText({ disableStyle, className, ...props }, ref) {
+export function PopupText({ disableStyle, className, ref, ...props }) {
     return (_jsx("span", { ...props, ref: ref, "data-component": "tooltip-popuptext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+}
+export function Arrow({ disableStyle, className, style, ref, ...props }) {
     return (_jsxs(BaseTooltip.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "tooltip-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": "tooltip-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": "tooltip-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": "tooltip-arrow-3" })] }));
-});
+}

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

@@ -38,7 +38,7 @@ import type { ComponentProps, ReactElement, ReactNode, SVGProps } from 'react';
  *             <Tour.Description>Narrow the results.</Tour.Description>
  *           </Tour.Content>
  *           <Tour.Progress />
- *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.PreviousButton>Back</Tour.PreviousButton>
  *           <Tour.NextButton>Next</Tour.NextButton>
  *           <Tour.DoneButton>Done</Tour.DoneButton>
  *         </Tour.Popup>
@@ -133,7 +133,7 @@ export declare function Progress({ disableStyle, className, children, ...props }
 }): import("react").JSX.Element;
 type ButtonProps = ComponentProps<'button'> & AsChildProps & StyleProps;
 /** Goes back one step, styled like a secondary Button. Not rendered on the first step, where there's nothing to go back to. Pass asChild to give this behavior to your own button instead. */
-export declare function BackButton(props: ButtonProps): import("react").JSX.Element | null;
+export declare function PreviousButton(props: ButtonProps): import("react").JSX.Element | null;
 /** Goes to the next step, styled like a primary Button. Not rendered on the last step; DoneButton takes its place there. Pass asChild to give this behavior to your own button instead. */
 export declare function NextButton(props: ButtonProps): import("react").JSX.Element | null;
 /** Finishes the tour, styled like a primary Button. Rendered only on the last step, in NextButton's place. Pass asChild to give this behavior to your own button instead. */

package/dist/components/tour/index.js

@@ -40,7 +40,7 @@ import { twMerge } from 'tailwind-merge';
  *             <Tour.Description>Narrow the results.</Tour.Description>
  *           </Tour.Content>
  *           <Tour.Progress />
- *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.PreviousButton>Back</Tour.PreviousButton>
  *           <Tour.NextButton>Next</Tour.NextButton>
  *           <Tour.DoneButton>Done</Tour.DoneButton>
  *         </Tour.Popup>
@@ -230,11 +230,11 @@ function TourButton({ asChild, joyrideProps, part, defaultClassName, disableStyl
     return (_jsx("button", { type: "button", ...behaviorProps, ...asChildStyleAttributes({ asChild, component: `tour-${part}`, disableStyle }), className: twMerge(!disableStyle && defaultClassName, className), children: children }));
 }
 /** Goes back one step, styled like a secondary Button. Not rendered on the first step, where there's nothing to go back to. Pass asChild to give this behavior to your own button instead. */
-export function BackButton(props) {
-    const step = useStep('BackButton');
+export function PreviousButton(props) {
+    const step = useStep('PreviousButton');
     if (step.joyride.index === 0)
         return null;
-    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.backProps, part: "backbutton", defaultClassName: `${buttonBase} ${secondaryButton}` }));
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.backProps, part: "previousbutton", defaultClassName: `${buttonBase} ${secondaryButton}` }));
 }
 /** Goes to the next step, styled like a primary Button. Not rendered on the last step; DoneButton takes its place there. Pass asChild to give this behavior to your own button instead. */
 export function NextButton(props) {
@@ -276,5 +276,6 @@ export function CloseButtonIcon({ disableStyle, children, className, ...props })
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(!disableStyle && 'h-4 w-fit shrink-0 text-inherit', children?.props.className, className),
+        strokeWidth: props.strokeWidth ?? children?.props.strokeWidth ?? 2,
     });
 }

package/dist/index.d.ts

@@ -30,8 +30,10 @@ export * as Badge from './components/badge/index.tsx';
 export * as Breadcrumb from './components/breadcrumb/index.tsx';
 export * as Button from './components/button/index.tsx';
 export * as Card from './components/card/index.tsx';
+export * as Carousel from './components/carousel/index.tsx';
 export * as Divider from './components/divider/index.tsx';
 export * as Empty from './components/empty/index.tsx';
+export * as Exception from './components/exception/index.tsx';
 export * as Form from './components/form/index.tsx';
 export * as Metric from './components/metric/index.tsx';
 export * as Page from './components/page/index.tsx';

package/dist/index.js

@@ -30,8 +30,10 @@ export * as Badge from "./components/badge/index.js";
 export * as Breadcrumb from "./components/breadcrumb/index.js";
 export * as Button from "./components/button/index.js";
 export * as Card from "./components/card/index.js";
+export * as Carousel from "./components/carousel/index.js";
 export * as Divider from "./components/divider/index.js";
 export * as Empty from "./components/empty/index.js";
+export * as Exception from "./components/exception/index.js";
 export * as Form from "./components/form/index.js";
 export * as Metric from "./components/metric/index.js";
 export * as Page from "./components/page/index.js";

package/dist/utils/icons.d.ts

@@ -1,24 +1,93 @@
 import type { SVGIconProps } from '../types/Icon.ts';
-export declare const ArrowLeft: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const CalendarDays: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Check: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const ChevronDown: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const ChevronLeft: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const ChevronRight: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const ChevronUp: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const ChevronsUpDown: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const CircleAlert: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const CircleCheck: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Eye: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const EyeOff: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const File: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const FolderOpen: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const GripVertical: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Info: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const LoaderCircle: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Minus: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Star: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Text: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const TriangleAlert: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const Upload: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export declare const X: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowLeft: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CalendarDays: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Check: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronDown: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronLeft: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronRight: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronUp: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronsUpDown: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CircleAlert: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CircleCheck: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Eye: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const EyeOff: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const File: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const FolderOpen: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const GripVertical: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Info: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const LoaderCircle: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Minus: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Star: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Text: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const TriangleAlert: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Upload: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const X: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/utils/icons.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef } from 'react';
+import { createElement } from 'react';
 /** Builds a Lucide-compatible icon from its SVG elements, so the package ships only the icons it uses instead of the whole lucide-react catalog. Icon shapes are copied from lucide-react v1.57.0 (ISC license, https://lucide.dev). */
 function createIcon(name, iconNode) {
-    const Icon = forwardRef(function Icon({ size = 24, width, height, color = 'currentColor', strokeWidth = 2, absoluteStrokeWidth, nonScalingStroke, className, children, ...props }, ref) {
+    function Icon({ size = 24, width, height, color = 'currentColor', strokeWidth = 2, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }) {
         // Keeping the stroke the same visual thickness at any size, when asked
         const iconStrokeWidth = absoluteStrokeWidth
             ? (Number(strokeWidth) * 24) / Number(width ?? size)
@@ -17,7 +17,7 @@ function createIcon(name, iconNode) {
                     vectorEffect: nonScalingStroke ? 'non-scaling-stroke' : undefined,
                     ...attributes,
                 })), children] }));
-    });
+    }
     Icon.displayName = name.replace(/(^|-)(\w)/g, (_match, _dash, letter) => letter.toUpperCase());
     return Icon;
 }