@central-ui/react 0.1.1 → 0.2.0

package/dist/components/textarea/index.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input as BaseInput } from '@base-ui/react/input';
-import { LoaderCircle } from 'lucide-react';
+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 { twMerge } from 'tailwind-merge';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Keep value, name, and validation configuration on Root. Textarea is the editable control inside TextareaGroup. Optional Addon parts hold your supporting text or actions; they do not implement submission.
  *
@@ -39,12 +39,11 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   )
  * }
  */
-export function Root({ children, id, tone = 'neutral', value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, ...coreProps }) {
+export function Root({ children, id, validation, value, defaultValue, onValueChange, disabled = false, readOnly = false, required = false, ...coreProps }) {
     const generatedId = useId();
     const [valueInternalState, setValueInternalState] = useState(defaultValue ?? '');
-    const [connections, setConnections] = useState({
-        descriptionIds: [],
-    });
+    // Holding the ids of Description, Error and Success, so the control announces them to screen readers through aria-describedby
+    const [describedByIds, setDescribedByIds] = useState([]);
     return (_jsx(InputContext.Provider, { value: {
             inputId: id ?? generatedId,
             disabled,
@@ -56,24 +55,20 @@ export function Root({ children, id, tone = 'neutral', value, defaultValue, onVa
             controlled: value !== undefined,
             onValueChange,
             coreProps,
-            connections,
-            setConnections,
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            describedByIds,
+            setDescribedByIds,
+            validation: readValidation(validation),
+        }, children: children }));
 }
-export const Textarea = forwardRef(function Textarea({ disableStyle, className, onChange, 'aria-describedby': describedBy, ...props }, ref) {
+export const Textarea = /* @__PURE__ */ forwardRef(function Textarea({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
     const context = useInputContext();
-    const tone = useToneContext();
     const inputRef = useRef(null);
+    // Resetting the internal value when the surrounding html form resets, since the control is always controlled by Root's value
     useEffect(() => {
         const form = inputRef.current?.form;
         if (!form || context.controlled)
             return;
-        const reset = (event) => {
-            queueMicrotask(() => {
-                if (!event.defaultPrevented)
-                    context.setValueInternalState(context.defaultValue ?? '');
-            });
-        };
+        const reset = (event) => queueMicrotask(() => !event.defaultPrevented && context.setValueInternalState(context.defaultValue ?? ''));
         form.addEventListener('reset', reset);
         return () => form.removeEventListener('reset', reset);
     }, [
@@ -82,7 +77,7 @@ export const Textarea = forwardRef(function Textarea({ disableStyle, className,
         context.setValueInternalState,
         context.coreProps.form,
     ]);
-    return (_jsx(BaseInput, { ...context.coreProps, render: _jsx("textarea", { ...props, onChange: onChange }), id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.connections.descriptionIds]
+    return (_jsx(BaseInput, { ...context.coreProps, render: _jsx("textarea", { ...props }), id: context.inputId, disabled: context.disabled, readOnly: context.readOnly, required: context.required, value: context.value, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [describedBy, ...context.describedByIds]
             .filter(Boolean)
             .join(' ') || undefined, ref: (element) => {
             inputRef.current = element;
@@ -96,51 +91,54 @@ export const Textarea = forwardRef(function Textarea({ disableStyle, className,
                 context.setValueInternalState(nextValue);
         }, "data-component": "textarea-textarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const TextareaGroup = forwardRef(function TextareaGroup({ disableStyle, className, onClick, ...props }, ref) {
+export const TextareaGroup = /* @__PURE__ */ forwardRef(function TextareaGroup({ disableStyle, className, onClick, ...props }, ref) {
     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 = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     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 = forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, id, ...props }, ref) {
     const context = useInputContext();
     const labelId = id ?? context.inputId + '-label';
     const attributes = usePartAttributes();
-    useEffect(() => {
-        context.setConnections((current) => ({ ...current, labelId }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            labelId: current.labelId === labelId ? undefined : current.labelId,
-        }));
-    }, [labelId, context.setConnections]);
     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 = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
     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 }));
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    const attributes = usePartAttributes();
-    return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "textarea-error", "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) {
+    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 });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Success = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+/** 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) {
+    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) {
     const messageId = useMessageId(id);
     const attributes = usePartAttributes();
-    return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, id: messageId, ref: ref, "data-component": "textarea-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    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 = forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
+export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, className, variant = 'normal', ...props }, ref) {
     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 = forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
+export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
     const attributes = usePartAttributes();
     return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "textarea-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
@@ -159,17 +157,17 @@ export function AddonIcon({ disableStyle, children, className, ...props }) {
         className: twMerge(children.props.className, className),
     });
 }
-export const AddonButton = forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
+export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
     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 = forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
     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 = createContext(null);
+const InputContext = /* @__PURE__ */ createContext(null);
 function useInputContext() {
     const context = useContext(InputContext);
     if (!context)
@@ -178,28 +176,21 @@ function useInputContext() {
 }
 function usePartAttributes() {
     const context = useInputContext();
-    const tone = useToneContext();
     return {
         'data-disabled': context.disabled ? '' : undefined,
         'data-readonly': context.readOnly ? '' : undefined,
         'data-required': context.required ? '' : undefined,
-        'data-tone': tone,
+        ...validationAttributes(context.validation),
     };
 }
+// Registering a message part's id in the control's aria-describedby while the part is mounted
 function useMessageId(id) {
+    const context = useInputContext();
     const generatedId = useId();
     const messageId = id ?? generatedId;
-    const context = useInputContext();
     useEffect(() => {
-        context.setConnections((current) => ({
-            ...current,
-            descriptionIds: [...current.descriptionIds, messageId],
-        }));
-        return () => context.setConnections((current) => ({
-            ...current,
-            descriptionIds: current.descriptionIds.filter((id) => id !== messageId),
-        }));
-    }, [messageId, context.setConnections]);
+        context.setDescribedByIds((current) => [...current, messageId]);
+        return () => context.setDescribedByIds((current) => current.filter((currentId) => currentId !== messageId));
+    }, [messageId, context.setDescribedByIds]);
     return messageId;
 }
-//# sourceMappingURL=index.js.map

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

@@ -2,6 +2,9 @@ import type { StyleProps } from '../../types/Style.ts';
 import type { ComponentProps, HTMLAttributes, ReactElement } from 'react';
 /**
  * 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.
@@ -36,4 +39,3 @@ export default function TextLink({ disableStyle, children, className, style, ...
      */
     children: ReactElement<ComponentProps<'a'>>;
 }): ReactElement<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map

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';
 /**
@@ -73,41 +74,32 @@ export function Show(render, options) {
 export function Root({ tone = 'neutral', children, }) {
     return _jsx(ToneContext.Provider, { value: tone, children: children });
 }
-export const Toast = forwardRef(function Toast({ disableStyle, className, style, children, ...props }, ref) {
+export const Toast = /* @__PURE__ */ forwardRef(function Toast({ disableStyle, className, style, children, ...props }, ref) {
     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
@@ -127,10 +119,17 @@ export const Toast = forwardRef(function Toast({ disableStyle, className, style,
 /** 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,
@@ -142,27 +141,28 @@ export function Icon({ disableStyle, children, className, ...props }) {
         strokeWidth: props.strokeWidth ?? icon.props.strokeWidth ?? 1.8,
     });
 }
-export const Title = forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseToast.Title, { ...props, ref: ref, "data-component": "toast-title", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Description = forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+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 = 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 = 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 = 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,
@@ -176,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,
@@ -185,21 +187,19 @@ 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 = createContext(null);
-const ToneContext = createContext('neutral');
+const NotificationContext = 
+/* @__PURE__ */ createContext(null);
+const ToneContext = /* @__PURE__ */ createContext('neutral');
 function useNotificationContext() {
     const notification = useContext(NotificationContext);
     if (!notification)
         throw new Error('Toast.Toast must be rendered by Toast.Show');
     return notification;
 }
-//# sourceMappingURL=index.js.map

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

@@ -2,7 +2,7 @@ import type { StyleProps } from '../../types/Style.ts';
 import { Toggle as BaseToggle } from '@base-ui/react/toggle';
 import type { ReactElement } from 'react';
 import type { ButtonProps } from '../button/index.tsx';
-import type { LucideProps } from 'lucide-react';
+import type { SVGIconProps } from '../../types/Icon.ts';
 /**
  * Root is the interactive toggle button. ActiveIcon and InactiveIcon switch automatically with pressed state; do not conditionally render them yourself.
  *
@@ -29,13 +29,12 @@ export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<B
     size?: ButtonProps["size"];
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** 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<LucideProps & {
+export declare const ActiveIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
-    children: ReactElement<LucideProps>;
+    children: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** 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<LucideProps & {
+export declare const InactiveIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
-    children: ReactElement<LucideProps>;
+    children: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle/index.js

@@ -22,7 +22,7 @@ import { twMerge } from 'tailwind-merge';
  *   )
  * }
  */
-export const Root = forwardRef(function Root({ children, className, disableStyle, size = 'medium', pressed, defaultPressed = false, onPressedChange, disabled = false, ...props }, ref) {
+export const Root = /* @__PURE__ */ forwardRef(function Root({ children, className, disableStyle, size = 'medium', pressed, defaultPressed = false, onPressedChange, disabled = false, ...props }, ref) {
     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);
@@ -31,48 +31,41 @@ export const Root = forwardRef(function Root({ children, className, disableStyle
         }, 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 = 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 = 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),
     });
 });
-const ToggleContext = createContext(null);
+const ToggleContext = /* @__PURE__ */ createContext(null);
 function useToggleContext() {
     const context = useContext(ToggleContext);
     if (!context)
         throw new Error('Toggle icons must be inside Toggle.Root');
     return context;
 }
-//# sourceMappingURL=index.js.map