@central-ui/react 0.1.2 → 0.3.0

package/dist/components/textlink/index.js

@@ -2,6 +2,9 @@ import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
  * Adds preset styling to one link child without rendering a wrapper or handling navigation.
+ * Use it for a link presented as text, like "Read the guide" or "Create account" inside a
+ * sentence. To make a whole item clickable (a card, a list row), use your router's bare Link
+ * directly instead, without TextLink.
  * Pass a native anchor or your router's Link; put the destination and navigation props
  * on that child. Custom link components must forward className, style, and data-*
  * attributes to their anchor. Supply one element, not text, a fragment, or a list.
@@ -31,6 +34,7 @@ import { twMerge } from 'tailwind-merge';
 export default function TextLink({ disableStyle, children, className, style, ...props }) {
     return cloneElement(children, {
         ...props,
+        // Spread from an object so the data-* keys pass the element props' excess property check
         ...{
             'data-component': 'textlink-textlink',
             'data-style-disabled': disableStyle ? '' : undefined,
@@ -39,4 +43,3 @@ export default function TextLink({ disableStyle, children, className, style, ...
         style: { ...children.props.style, ...style },
     });
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,5 @@
 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'> & {
@@ -66,9 +67,7 @@ export declare function Root({ tone, children, }: {
 export type ToastProps = Omit<BaseToast.Root.Props, 'toast' | 'className'> & {
     className?: string;
 } & StyleProps;
-export declare const Toast: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastRootProps, "className" | "toast"> & {
-    className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** 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. */
@@ -82,18 +81,14 @@ export declare const Title: import("react").ForwardRefExoticComponent<Omit<Omit<
 export declare const Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastDescriptionProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const CloseHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastCloseProps, "children" | "className" | "render"> & {
-    className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastCloseProps, "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 declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastCloseProps, "className" | "render"> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const ActionButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ToastActionProps, "className"> & {
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** 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"> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function CloseButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
@@ -108,4 +103,3 @@ type NotificationData = {
     [key: string]: unknown;
 };
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/toast/index.js

@@ -1,6 +1,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 'lucide-react';
+import { CircleCheck, Info, TriangleAlert, X } from "../../utils/icons.js";
 import { cloneElement, createContext, forwardRef, useContext, useEffect, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
@@ -77,36 +78,28 @@ export const Toast = /* @__PURE__ */ forwardRef(function Toast({ disableStyle, c
     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) => {
-            // Base UI measures heights and provides offsets; the legacy stack adds a 16px gap.
-            const offsetY = state.expanded
-                ? 'calc(-1 * (var(--toast-offset-y, 0px) + var(--toast-index) * 16px))'
-                : 'calc(var(--toast-index) * -16px)';
             const starting = state.transitionStatus === 'starting';
             const ending = state.transitionStatus === 'ending';
-            const horizontalExit = ending &&
-                (state.swipeDirection === 'left' || state.swipeDirection === 'right');
-            const x = horizontalExit
-                ? 'calc(var(--toast-swipe-movement-x, 0px) + ' +
-                    (state.swipeDirection === 'left' ? '-150%' : '150%') +
-                    ')'
-                : 'var(--toast-swipe-movement-x, 0px)';
-            const y = starting
-                ? '150%'
-                : ending && !horizontalExit
-                    ? 'calc(var(--toast-swipe-movement-y, 0px) + ' +
-                        (state.swipeDirection === 'up' ? '-150%' : '150%') +
-                        ')'
-                    : 'calc(' + offsetY + ' + var(--toast-swipe-movement-y, 0px))';
+            const horizontalExit = ending && (state.swipeDirection === 'left' || state.swipeDirection === 'right');
+            // Following the finger horizontally, and leaving off-screen on the swiped side
+            const x = (() => {
+                if (!horizontalExit)
+                    return 'var(--toast-swipe-movement-x, 0px)';
+                return `calc(var(--toast-swipe-movement-x, 0px) + ${state.swipeDirection === 'left' ? '-150%' : '150%'})`;
+            })();
+            // Entering from below, leaving off-screen vertically, or else stacking: Base UI measures heights and provides offsets, and the legacy stack adds a 16px gap
+            const y = (() => {
+                if (starting)
+                    return '150%';
+                if (ending && !horizontalExit)
+                    return `calc(var(--toast-swipe-movement-y, 0px) + ${state.swipeDirection === 'up' ? '-150%' : '150%'})`;
+                const offsetY = state.expanded ? 'calc(-1 * (var(--toast-offset-y, 0px) + var(--toast-index) * 16px))' : 'calc(var(--toast-index) * -16px)';
+                return `calc(${offsetY} + var(--toast-swipe-movement-y, 0px))`;
+            })();
+            // Collapsed toasts behind the front one shrink a little each
+            const scale = state.expanded ? '1' : 'max(0, calc(1 - var(--toast-index) * 0.05))';
             return {
-                transform: 'translateX(' +
-                    x +
-                    ') translateY(' +
-                    y +
-                    ') scale(' +
-                    (state.expanded
-                        ? '1'
-                        : 'max(0, calc(1 - var(--toast-index) * 0.05))') +
-                    ')',
+                transform: `translateX(${x}) translateY(${y}) scale(${scale})`,
                 transformOrigin: 'bottom center',
                 zIndex: 'calc(1000 - var(--toast-index))',
                 height: state.expanded
@@ -126,10 +119,17 @@ export const Toast = /* @__PURE__ */ forwardRef(function Toast({ disableStyle, c
 /** 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);
-    const icon = children ??
-        (tone === 'success' ? (_jsx(CircleCheck, {})) : tone === 'error' ? (_jsx(TriangleAlert, {})) : (_jsx(Info, {})));
+    // Choosing the tone's default icon, unless one is supplied
+    const icon = (() => {
+        if (children)
+            return children;
+        if (tone === 'success')
+            return _jsx(CircleCheck, {});
+        if (tone === 'error')
+            return _jsx(TriangleAlert, {});
+        return _jsx(Info, {});
+    })();
     return cloneElement(icon, {
-        ...icon.props,
         ...props,
         'aria-hidden': true,
         'data-tone': tone,
@@ -147,21 +147,22 @@ export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, c
 export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseToast.Description, { ...props, ref: ref, "data-component": "toast-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const CloseHandler = /* @__PURE__ */ forwardRef(function CloseHandler({ children, ...props }, ref) {
-    return (_jsx(BaseToast.Close, { ...props, ref: ref, render: children, className: props.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) {
+    // 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 });
 });
-export const CloseButton = /* @__PURE__ */ forwardRef(function CloseButton({ disableStyle, className, ...props }, ref) {
-    return (_jsx(BaseToast.Close, { "aria-label": "Dismiss notification", ...props, ref: ref, "data-component": "toast-closebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const ActionButton = /* @__PURE__ */ forwardRef(function ActionButton({ disableStyle, className, ...props }, ref) {
-    return (_jsx(BaseToast.Action, { ...props, ref: ref, "data-component": "toast-actionbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** 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) {
+    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);
     return cloneElement(children, {
-        ...children.props,
         ...props,
         'aria-hidden': true,
         'data-tone': tone,
@@ -175,8 +176,10 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
 }
 // Private: every callback-rendered composition receives the native object required by Toast.Root.
 function Notifications({ className, style, }) {
-    const { toasts } = BaseToast.useToastManager();
-    const visible = toasts.filter((notification) => !notification.limited && notification.transitionStatus !== 'ending');
+    const toastManager = BaseToast.useToastManager();
+    const visible = toastManager.toasts.filter((notification) => !notification.limited && notification.transitionStatus !== 'ending');
+    // The stack's 16px gaps between the visible toasts
+    const gaps = Math.max(0, visible.length - 1) * 16;
     return (_jsx(BaseToast.Portal, { children: _jsx(BaseToast.Viewport, { className: className, style: (state) => ({
                 position: 'fixed',
                 bottom: 24,
@@ -184,13 +187,11 @@ function Notifications({ className, style, }) {
                 transform: 'translateX(-50%)',
                 width: 'min(400px, calc(100vw - 48px))',
                 zIndex: 1000,
-                height: state.expanded
-                    ? visible.reduce((total, notification) => total + (notification.height ?? 0), 0) +
-                        Math.max(0, visible.length - 1) * 16
-                    : (visible[0]?.height ?? 0) + Math.max(0, visible.length - 1) * 16,
+                // Expanded, the viewport fits every visible toast, otherwise only the front one
+                height: (state.expanded ? visible.reduce((total, notification) => total + (notification.height ?? 0), 0) : (visible[0]?.height ?? 0)) + gaps,
                 pointerEvents: visible.length ? 'auto' : 'none',
                 ...(typeof style === 'function' ? style(state) : style),
-            }), children: toasts.map((notification) => (_jsx(NotificationContext.Provider, { value: notification, children: notification.data.render() }, notification.id))) }) }));
+            }), children: toastManager.toasts.map((notification) => (_jsx(NotificationContext.Provider, { value: notification, children: notification.data.render() }, notification.id))) }) }));
 }
 let activeManager;
 const NotificationContext = 
@@ -202,4 +203,3 @@ function useNotificationContext() {
         throw new Error('Toast.Toast must be rendered by Toast.Show');
     return notification;
 }
-//# sourceMappingURL=index.js.map

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

@@ -38,4 +38,3 @@ export declare const InactiveIcon: import("react").ForwardRefExoticComponent<Omi
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle/index.js

@@ -31,38 +31,32 @@ export const Root = /* @__PURE__ */ forwardRef(function Root({ children, classNa
         }, 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({ disableStyle, children, className, ...props }, ref) {
-    const { pressed, disabled, size } = useToggleContext();
-    if (!pressed)
+export const ActiveIcon = /* @__PURE__ */ forwardRef(function ActiveIcon(props, ref) {
+    const context = useToggleContext();
+    if (!context.pressed)
         return null;
-    return cloneElement(children, {
-        ...props,
-        ref,
-        'aria-hidden': true,
-        'data-size': size,
-        'data-pressed': pressed ? '' : undefined,
-        'data-disabled': disabled ? '' : undefined,
-        ...{
-            'data-component': 'toggle-activeicon',
-            'data-style-disabled': disableStyle ? '' : undefined,
-        },
-        className: twMerge(children.props.className, className),
-    });
+    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({ disableStyle, children, className, ...props }, ref) {
-    const { pressed, disabled, size } = useToggleContext();
-    if (pressed)
+export const InactiveIcon = /* @__PURE__ */ forwardRef(function InactiveIcon(props, ref) {
+    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) {
+    const context = useToggleContext();
     return cloneElement(children, {
         ...props,
         ref,
         'aria-hidden': true,
-        'data-size': size,
-        'data-pressed': pressed ? '' : undefined,
-        'data-disabled': disabled ? '' : undefined,
+        'data-size': context.size,
+        'data-pressed': context.pressed ? '' : undefined,
+        'data-disabled': context.disabled ? '' : undefined,
+        // Spread from an object so the data-* keys pass the element props' excess property check
         ...{
-            'data-component': 'toggle-inactiveicon',
+            'data-component': component,
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(children.props.className, className),
@@ -75,4 +69,3 @@ function useToggleContext() {
         throw new Error('Toggle icons must be inside Toggle.Root');
     return context;
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,8 +1,9 @@
 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, ReactElement } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 /**
- * Wrap the target element with OpenHandler and keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
+ * 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.
  *
  * @example Complete composition
  * import { Button, Tooltip } from '@central-ui/react'
@@ -10,9 +11,9 @@ import type { ComponentPropsWithRef, ReactElement } from 'react';
  * function Example() {
  *   return (
  *     <Tooltip.Root>
- *       <Tooltip.OpenHandler>
+ *       <Tooltip.OpenButton asChild>
  *         <Button.default variant="secondary">Delivery information</Button.default>
- *       </Tooltip.OpenHandler>
+ *       </Tooltip.OpenButton>
  *       <Tooltip.Popup>
  *         <Tooltip.PopupText>Usually arrives within three days.</Tooltip.PopupText>
  *         <Tooltip.Arrow />
@@ -22,23 +23,20 @@ import type { ComponentPropsWithRef, ReactElement } from 'react';
  * }
  *
  * @example Place help below its target
- * // Keep the same OpenHandler and Root.
+ * // Keep the same OpenButton and Root.
  * ;<Tooltip.Popup side="bottom">
  *   <Tooltip.PopupText>Delivery details</Tooltip.PopupText>
  * </Tooltip.Popup>
  */
-export declare const Root: <Payload>(props: BaseTooltip.Root.Props<Payload>) => React.JSX.Element;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare const OpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<BaseTooltip.Trigger.Props<unknown>, "children" | "className" | "render"> & {
+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"> & {
     className?: string;
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseTooltip.Popup>, 'className'> & {
     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 & StyleProps): import("react").JSX.Element;
+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>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.js

@@ -1,8 +1,9 @@
 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';
 /**
- * Wrap the target element with OpenHandler and keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
+ * 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.
  *
  * @example Complete composition
  * import { Button, Tooltip } from '@central-ui/react'
@@ -10,9 +11,9 @@ import { forwardRef } from 'react';
  * function Example() {
  *   return (
  *     <Tooltip.Root>
- *       <Tooltip.OpenHandler>
+ *       <Tooltip.OpenButton asChild>
  *         <Button.default variant="secondary">Delivery information</Button.default>
- *       </Tooltip.OpenHandler>
+ *       </Tooltip.OpenButton>
  *       <Tooltip.Popup>
  *         <Tooltip.PopupText>Usually arrives within three days.</Tooltip.PopupText>
  *         <Tooltip.Arrow />
@@ -22,15 +23,18 @@ import { forwardRef } from 'react';
  * }
  *
  * @example Place help below its target
- * // Keep the same OpenHandler and Root.
+ * // Keep the same OpenButton and Root.
  * ;<Tooltip.Popup side="bottom">
  *   <Tooltip.PopupText>Delivery details</Tooltip.PopupText>
  * </Tooltip.Popup>
  */
-export const Root = BaseTooltip.Root;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export const OpenHandler = /* @__PURE__ */ forwardRef(function OpenHandler({ children, ...props }, ref) {
-    return _jsx(BaseTooltip.Trigger, { ...props, ref: ref, render: children });
+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) {
+    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 }) {
@@ -48,4 +52,3 @@ export const PopupText = /* @__PURE__ */ forwardRef(function PopupText({ disable
 export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
     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" })] }));
 });
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,154 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
+import type { Step as JoyrideStep } from 'react-joyride';
+import type { ComponentProps, ReactElement, ReactNode, SVGProps } from 'react';
+/**
+ * A guided tour that highlights elements one by one, each with a popup next to it.
+ * Root holds the steps (which element, in which order); Popup holds what every popup shows.
+ * Write the popup's frame and buttons once, and put what differs per step in a Content
+ * with the step's `value`, like Tabs.Content. Back/Next/Done/Skip/Close are styled buttons that show only when they can act.
+ *
+ * @example Complete composition, opened from a button
+ * import { Button, Tour } from '@central-ui/react'
+ *
+ * function Example() {
+ *   const [open, setOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button.default onClick={() => setOpen(true)}>Take the tour</Button.default>
+ *       <div id="search">…</div>
+ *       <div id="filters">…</div>
+ *
+ *       <Tour.Root
+ *         steps={[
+ *           { value: 'search', target: '#search' },
+ *           { value: 'filters', target: '#filters' },
+ *         ]}
+ *         open={open}
+ *         onOpenChange={setOpen}
+ *       >
+ *         <Tour.Popup>
+ *           <Tour.Content value="search">
+ *             <Tour.Title>Search</Tour.Title>
+ *             <Tour.Description>Find any order fast.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Content value="filters">
+ *             <Tour.Title>Filters</Tour.Title>
+ *             <Tour.Description>Narrow the results.</Tour.Description>
+ *           </Tour.Content>
+ *           <Tour.Progress />
+ *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.NextButton>Next</Tour.NextButton>
+ *           <Tour.DoneButton>Done</Tour.DoneButton>
+ *         </Tour.Popup>
+ *       </Tour.Root>
+ *     </>
+ *   )
+ * }
+ *
+ * @example Start on its own as soon as the page mounts, with no trigger button
+ * // Uncontrolled: defaultOpen starts the tour when Root mounts, and Root closes it itself.
+ * // Mount Root conditionally (e.g. only for users who haven't seen it) to show it once.
+ * ;<Tour.Root steps={steps} defaultOpen onOpenChange={(open) => { if (!open) markTourSeen() }}>
+ *   <Tour.Popup>…</Tour.Popup>
+ * </Tour.Root>
+ *
+ * @example Content only one step has, like a video
+ * // Anything inside a Content shows only on its step; anything outside shows on every step.
+ * ;<Tour.Content value="filters">
+ *   <Tour.Title>Filters</Tour.Title>
+ *   <video src="/filters.mp4" autoPlay muted />
+ * </Tour.Content>
+ *
+ * @example Let users click the highlighted element during a step
+ * ;<Tour.Root steps={[{ value: 'upload', target: '#upload', interactive: true }]}>
+ */
+export declare function Root(props: {
+    /**
+     * The tour's stops, in order. Each `value` pairs with the Content of the same value,
+     * and `target` is the element to highlight, as a CSS selector or an element.
+     * Set `interactive` to let users click the highlighted element during that step,
+     * e.g. a "try it now" step; otherwise clicks on it are blocked so a click can't navigate away mid-tour.
+     */
+    steps: readonly ({
+        value: string;
+        interactive?: boolean;
+    } & Pick<JoyrideStep, 'target'>)[];
+    /** Whether the tour is showing. Use with onOpenChange to start it from your own button. */
+    open?: boolean;
+    /**
+     * Whether the tour starts as soon as Root mounts, when `open` isn't controlled.
+     * Use it for tours that start on their own, like a first visit.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the tour starts or ends, including when it ends by Close, Skip, Done, or the Escape key. */
+    onOpenChange?: (open: boolean) => void;
+    /** The `value` of the step showing. Use with onStepChange to control the step yourself. */
+    step?: string;
+    /**
+     * The `value` of the step the tour starts on, when `step` isn't controlled.
+     * @default the first step's value
+     */
+    defaultStep?: string;
+    /** Called with the next step's `value` whenever the tour moves to another step. */
+    onStepChange?: (step: string) => void;
+    /** The Popup. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+type PopupPlacement = {
+    side: 'top' | 'bottom' | 'left' | 'right';
+    align: 'start' | 'center' | 'end';
+};
+/**
+ * The box next to the highlighted element, shown on every step. Write the shared frame and buttons here once.
+ * `side` and `align` are where it prefers to sit; Joyride flips it when that side has no room, so it never leaves the screen.
+ */
+export declare function Popup({ disableStyle, className, side, align, ...props }: ComponentProps<'div'> & StyleProps & {
+    /**
+     * The side of the highlighted element the popup prefers.
+     * @default 'bottom'
+     */
+    side?: PopupPlacement['side'];
+    /**
+     * How the popup lines up along that side.
+     * @default 'center'
+     */
+    align?: PopupPlacement['align'];
+}): import("react").JSX.Element;
+/** Shows its children only while its step is showing, like Tabs.Content. Put anything specific to one step here. */
+export declare function Content({ disableStyle, className, value, ...props }: ComponentProps<'div'> & StyleProps & {
+    /** The `value` of the step this content belongs to, matching one of Root's steps. */
+    value: string;
+}): import("react").JSX.Element | null;
+export declare function Title({ disableStyle, className, ...props }: ComponentProps<'h2'> & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
+/** Shows the position in the tour, like "2 of 5". Pass a function as children to word it differently, e.g. for another language. */
+export declare function Progress({ disableStyle, className, children, ...props }: Omit<ComponentProps<'p'>, 'children'> & StyleProps & {
+    children?: (progress: {
+        step: number;
+        total: number;
+    }) => ReactNode;
+}): 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;
+/** 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. */
+export declare function DoneButton(props: ButtonProps): import("react").JSX.Element | null;
+/** Ends the tour early, styled like a tertiary Button. Not rendered on the last step, where Done already ends it. Pass asChild to give this behavior to your own button instead. */
+export declare function SkipButton(props: ButtonProps): import("react").JSX.Element | null;
+/**
+ * Ends the tour from any step: the round ✕ in the popup's top-right corner, like Dialog's.
+ * Icon-only: put just a CloseButtonIcon inside, never text like "Close". It is already named for screen readers by Joyride.
+ * Pass asChild to give this behavior to your own button instead.
+ */
+export declare function CloseButton(props: ButtonProps): 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 }: SVGProps<SVGSVGElement> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child only to replace it. */
+    children?: ReactElement<SVGProps<SVGSVGElement>>;
+}): import("react").FunctionComponentElement<any>;
+export {};