@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/components/text-field/text-input.js

@@ -1,7 +1,3 @@
-import SvgCheck from "../../vendor/@material-design-icons/svg/outlined/check.js";
-import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
-import SvgContentCopy from "../../vendor/@material-design-icons/svg/outlined/content_copy.js";
-import SvgErrorOutline from "../../vendor/@material-design-icons/svg/outlined/error_outline.js";
 import { lengthTone } from "../../lib/text-length.js";
 import { Button } from "../button/button.js";
 import { Field } from "../field/field.js";
@@ -13,12 +9,19 @@ import { focusControlOnRim } from "../field/rim-focus.js";
 import { TextInputContext, useTextInputContext } from "./text-input-context.js";
 import text_field_module_default from "./text-field.module.js";
 import { c } from "react/compiler-runtime";
-import { useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 import { Input } from "@base-ui/react/input";
 // src/components/text-field/text-input.tsx
 var COPIED_FEEDBACK_MS = 2e3;
+/**
+* The field frame around a text input, holding its value and projecting its
+* state onto every part.
+*
+* @example
+* <TextInput.Root value={value} onValueChange={setValue} optionalLabel="optional">…</TextInput.Root>
+*/
 var TextInputRoot = (t0) => {
 	const $ = c(41);
 	const { value, onValueChange, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending: t1, maxLength, state, className, children } = t0;
@@ -157,6 +160,12 @@ var TextInputRoot = (t0) => {
 	} else t15 = $[40];
 	return t15;
 };
+/**
+* The bordered box holding the control and its inlays.
+*
+* @example
+* <TextInput.Group><TextInput.Input /></TextInput.Group>
+*/
 var TextInputGroup = (t0) => {
 	const $ = c(15);
 	let children;
@@ -207,6 +216,12 @@ var TextInputGroup = (t0) => {
 	} else t3 = $[14];
 	return t3;
 };
+/**
+* A strip of inlays along the bottom edge of the group.
+*
+* @example
+* <TextInput.Bar><TextInput.Counter /></TextInput.Bar>
+*/
 var TextInputBar = (t0) => {
 	const $ = c(8);
 	let className;
@@ -238,6 +253,12 @@ var TextInputBar = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/**
+* A slot beside the control inside the group, such as an icon.
+*
+* @example
+* <TextInput.Inlay aria-hidden="true"><SearchIcon /></TextInput.Inlay>
+*/
 var TextInputInlay = (t0) => {
 	const $ = c(8);
 	let className;
@@ -269,6 +290,12 @@ var TextInputInlay = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/**
+* Static text beside the control, such as a unit. Decoration only.
+*
+* @example
+* <TextInput.Affix>kg</TextInput.Affix>
+*/
 var TextInputAffix = (t0) => {
 	const $ = c(8);
 	let className;
@@ -301,6 +328,12 @@ var TextInputAffix = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/**
+* The bare control, bound to `Root`'s value.
+*
+* @example
+* <TextInput.Input type="email" />
+*/
 var TextInputInput = (t0) => {
 	const $ = c(18);
 	let className;
@@ -362,9 +395,15 @@ var TextInputInput = (t0) => {
 	} else t7 = $[17];
 	return t7;
 };
+/**
+* The icon-only button that empties the control, shown once it holds a value.
+*
+* @example
+* <TextInput.Clear label="Clear"><CloseIcon /></TextInput.Clear>
+*/
 var TextInputClear = (t0) => {
-	const $ = c(9);
-	const { label, className } = t0;
+	const $ = c(10);
+	const { label, className, children } = t0;
 	const { value, setValue, state, focusControl } = useTextInputContext();
 	if (value === "" || state.disabled === true || state.readonly === true) return null;
 	let t1;
@@ -384,28 +423,24 @@ var TextInputClear = (t0) => {
 		$[4] = t2;
 	} else t2 = $[4];
 	let t3;
-	if ($[5] !== label || $[6] !== t1 || $[7] !== t2) {
+	if ($[5] !== children || $[6] !== label || $[7] !== t1 || $[8] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Button, {
 			iconOnly: true,
-			icon: SvgClose,
+			icon: children,
 			label,
 			variant: "tertiary",
 			size: "sm",
 			className: t1,
 			onClick: t2
 		});
-		$[5] = label;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[5] = children;
+		$[6] = label;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
 	return t3;
 };
-var COPY_ICON = {
-	idle: SvgContentCopy,
-	copied: SvgCheck,
-	failed: SvgErrorOutline
-};
 /**
 * Writes text to the clipboard, rejecting where there is no clipboard as well
 * as where the browser refuses.
@@ -414,9 +449,16 @@ var COPY_ICON = {
 * void writeClipboard("NL91ABNA0417164300").catch(selectByHand);
 */
 var writeClipboard = async (text) => navigator.clipboard.writeText(text);
+/**
+* The icon-only button that copies the value to the clipboard, shown once it
+* holds one, and announces whether the copy landed.
+*
+* @example
+* <TextInput.Copy label="Copy" copiedLabel="Copied" failedLabel="Copy failed, text selected"><CopyIcon /></TextInput.Copy>
+*/
 var TextInputCopy = (t0) => {
-	const $ = c(21);
-	const { label, copiedLabel, failedLabel, className } = t0;
+	const $ = c(25);
+	const { label, copiedLabel, failedLabel, copiedIcon, failedIcon, className, children } = t0;
 	const { value, state, selectControl } = useTextInputContext();
 	const [outcome, setOutcome] = useState("idle");
 	if (value === "" || state.disabled === true) return null;
@@ -442,66 +484,135 @@ var TextInputCopy = (t0) => {
 		$[4] = t2;
 	} else t2 = $[4];
 	const labels = t2;
-	const t3 = COPY_ICON[outcome];
-	const t4 = labels[outcome];
-	const t5 = outcome === "failed" ? "danger" : "brand";
-	let t6;
-	if ($[5] !== className) {
-		t6 = clsx(text_field_module_default.action, className);
-		$[5] = className;
-		$[6] = t6;
-	} else t6 = $[6];
-	let t7;
-	if ($[7] !== selectControl || $[8] !== value) {
-		t7 = () => {
+	const t3 = copiedIcon ?? children;
+	const t4 = failedIcon ?? children;
+	let t5;
+	if ($[5] !== children || $[6] !== t3 || $[7] !== t4) {
+		t5 = {
+			idle: children,
+			copied: t3,
+			failed: t4
+		};
+		$[5] = children;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	const t6 = t5[outcome];
+	const t7 = labels[outcome];
+	const t8 = outcome === "failed" ? "danger" : "brand";
+	let t9;
+	if ($[9] !== className) {
+		t9 = clsx(text_field_module_default.action, className);
+		$[9] = className;
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[11] !== selectControl || $[12] !== value) {
+		t10 = () => {
 			writeClipboard(value).then(() => settle("copied"), () => {
 				selectControl();
 				settle("failed");
 			});
 		};
-		$[7] = selectControl;
-		$[8] = value;
-		$[9] = t7;
-	} else t7 = $[9];
-	let t8;
-	if ($[10] !== t3 || $[11] !== t4 || $[12] !== t5 || $[13] !== t6 || $[14] !== t7) {
-		t8 = /* @__PURE__ */ jsx(Button, {
+		$[11] = selectControl;
+		$[12] = value;
+		$[13] = t10;
+	} else t10 = $[13];
+	let t11;
+	if ($[14] !== t10 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Button, {
 			iconOnly: true,
-			icon: t3,
-			label: t4,
-			tone: t5,
+			icon: t6,
+			label: t7,
+			tone: t8,
 			variant: "tertiary",
 			size: "sm",
-			className: t6,
-			onClick: t7
+			className: t9,
+			onClick: t10
 		});
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-		$[13] = t6;
-		$[14] = t7;
-		$[15] = t8;
-	} else t8 = $[15];
-	const t9 = outcome === "idle" ? "" : labels[outcome];
-	let t10;
-	if ($[16] !== t9) {
-		t10 = /* @__PURE__ */ jsx("span", {
+		$[14] = t10;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t11;
+	} else t11 = $[19];
+	const t12 = outcome === "idle" ? "" : labels[outcome];
+	let t13;
+	if ($[20] !== t12) {
+		t13 = /* @__PURE__ */ jsx("span", {
 			role: "status",
 			className: text_field_module_default.copyStatus,
-			children: t9
+			children: t12
 		});
-		$[16] = t9;
-		$[17] = t10;
-	} else t10 = $[17];
-	let t11;
-	if ($[18] !== t10 || $[19] !== t8) {
-		t11 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t8, t10] });
-		$[18] = t10;
-		$[19] = t8;
-		$[20] = t11;
-	} else t11 = $[20];
-	return t11;
+		$[20] = t12;
+		$[21] = t13;
+	} else t13 = $[21];
+	let t14;
+	if ($[22] !== t11 || $[23] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t13] });
+		$[22] = t11;
+		$[23] = t13;
+		$[24] = t14;
+	} else t14 = $[24];
+	return t14;
 };
+/**
+* The icon-only toggle that shows a concealed value, such as a password, as
+* text. The caller switches the `Input`'s `type` with `revealed`.
+*
+* @example
+* <TextInput.Reveal revealed={revealed} onRevealedChange={setRevealed} label="Show password"><VisibilityIcon /></TextInput.Reveal>
+*/
+var TextInputReveal = (t0) => {
+	const $ = c(12);
+	const { revealed, onRevealedChange, label, className, children } = t0;
+	const { state } = useTextInputContext();
+	const t1 = state.disabled;
+	let t2;
+	if ($[0] !== className) {
+		t2 = clsx(text_field_module_default.action, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== onRevealedChange || $[3] !== revealed) {
+		t3 = () => onRevealedChange(!revealed);
+		$[2] = onRevealedChange;
+		$[3] = revealed;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== children || $[6] !== label || $[7] !== revealed || $[8] !== state.disabled || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Button, {
+			iconOnly: true,
+			icon: children,
+			label,
+			variant: "tertiary",
+			size: "sm",
+			"aria-pressed": revealed,
+			disabled: t1,
+			className: t2,
+			onClick: t3
+		});
+		$[5] = children;
+		$[6] = label;
+		$[7] = revealed;
+		$[8] = state.disabled;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+/**
+* The value's length against `Root`'s `maxLength`, toned as it nears the limit.
+* Renders nothing without a `maxLength`.
+*
+* @example
+* <TextInput.Counter />
+*/
 var TextInputCounter = (t0) => {
 	const $ = c(14);
 	let className;
@@ -565,7 +676,9 @@ var TextInputCounter = (t0) => {
 * 	<TextInput.Label>Email</TextInput.Label>
 * 	<TextInput.Group>
 * 		<TextInput.Input type="email" />
-* 		<TextInput.Clear label="Clear" />
+* 		<TextInput.Clear label="Clear">
+* 			<CloseIcon />
+* 		</TextInput.Clear>
 * 	</TextInput.Group>
 * 	<TextInput.Error />
 * </TextInput.Root>
@@ -580,6 +693,7 @@ var TextInput = {
 	Input: TextInputInput,
 	Clear: TextInputClear,
 	Copy: TextInputCopy,
+	Reveal: TextInputReveal,
 	Counter: TextInputCounter,
 	Pending: InputPending,
 	Description: Field.Description,

package/dist/components/textarea-field/textarea.js

@@ -4,8 +4,8 @@ import text_field_module_default from "../text-field/text-field.module.js";
 import { useAutosize } from "./use-autosize.js";
 import textarea_field_module_default from "./textarea-field.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/textarea-field/textarea.tsx
 var MIN_ROWS = 2;
 /**

package/dist/components/time-field/time-input.d.ts

@@ -4,6 +4,12 @@ import { type TimeFieldProps as AriaTimeFieldProps } from "react-aria-components
 import { TemporalFrame, TemporalGroup, TemporalInput, TemporalSegment, type TemporalStateProps } from "../../lib/calendar/temporal.tsx";
 import { Field } from "../field/index.ts";
 export type TimeInputRootProps = AriaTimeFieldProps<Time> & TemporalStateProps;
+/**
+ * A react-aria `TimeField` holding the value.
+ *
+ * @example
+ * <TimeInput.Root aria-labelledby={labelId}>…</TimeInput.Root>
+ */
 declare const TimeInputRoot: ({ state, ...props }: TimeInputRootProps) => ReactNode;
 /** The parts of a time input. */
 export type TimeInputParts = Readonly<{

package/dist/components/time-field/time-input.js

@@ -5,6 +5,12 @@ import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { TimeField } from "react-aria-components";
 // src/components/time-field/time-input.tsx
+/**
+* A react-aria `TimeField` holding the value.
+*
+* @example
+* <TimeInput.Root aria-labelledby={labelId}>…</TimeInput.Root>
+*/
 var TimeInputRoot = (t0) => {
 	const $ = c(10);
 	let props;

package/dist/components/time-zone-provider/time-zone-provider.js

@@ -1,7 +1,7 @@
 import { useRequiredContext } from "../../lib/use-required-context.js";
 import { c } from "react/compiler-runtime";
-import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
 // src/components/time-zone-provider/time-zone-provider.tsx
 var TimeZoneContext = createContext(void 0);
 /**

package/dist/components/toast/index.js

@@ -1,3 +1,3 @@
 import { toast, toastManager } from "./toast.js";
-import { ToastProvider } from "./toast-provider.js";
-export { ToastProvider, toast, toastManager };
+import { Toast, ToastProvider } from "./toast-provider.js";
+export { Toast, ToastProvider, toast, toastManager };

package/dist/components/toast/toast-provider.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._viewport_r09x9_3 {
+  ._viewport_x67qw_3 {
     position: fixed;
     inset-block: auto var(--toast-viewport-inset, var(--sys-unit-16));
     inset-inline: auto var(--toast-viewport-inset, var(--sys-unit-16));
@@ -9,16 +9,20 @@
     gap: var(--sys-unit-8);
     inline-size: var(--toast-width, min(24rem, 100vw - 2rem));
   }
-  ._viewport_r09x9_3 {
+  ._viewport_x67qw_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._viewport_r09x9_3:focus-visible {
+  ._viewport_x67qw_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._toast_r09x9_19 {
+  ._toast_x67qw_19 {
     --_toast-fg: var(--sys-color-text);
     --_toast-bg: var(--sys-color-surface-overlay-high);
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    row-gap: var(--sys-unit-6);
     box-sizing: border-box;
     border-radius: var(--toast-radius, var(--sys-radius-md));
     background: var(--toast-bg, var(--_toast-bg));
@@ -28,72 +32,72 @@
     font: var(--sys-font-body-medium);
   }
   @media not (prefers-reduced-motion) {
-    ._toast_r09x9_19 {
+    ._toast_x67qw_19 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-emphasized);
     }
   }
-  ._toast_r09x9_19[data-starting-style], ._toast_r09x9_19[data-ending-style] {
+  ._toast_x67qw_19[data-starting-style], ._toast_x67qw_19[data-ending-style] {
     opacity: 0;
     scale: 0.8;
   }
-  ._toast_r09x9_19[data-tone=success] {
+  ._toast_x67qw_19[data-tone=success] {
     --_toast-fg: var(--sys-color-success-fg);
     --_toast-bg: var(--sys-color-success-bg);
   }
-  ._toast_r09x9_19[data-tone=error] {
+  ._toast_x67qw_19[data-tone=error] {
     --_toast-fg: var(--sys-color-error-fg);
     --_toast-bg: var(--sys-color-error-bg);
   }
-  ._toast_r09x9_19[data-tone=warning] {
+  ._toast_x67qw_19[data-tone=warning] {
     --_toast-fg: var(--sys-color-warning-fg);
     --_toast-bg: var(--sys-color-warning-bg);
   }
-  ._toast_r09x9_19[data-tone=info] {
+  ._toast_x67qw_19[data-tone=info] {
     --_toast-fg: var(--sys-color-info-fg);
     --_toast-bg: var(--sys-color-info-bg);
   }
-  ._content_r09x9_55 {
-    display: flex;
-    flex-direction: column;
-    gap: var(--sys-unit-6);
+  ._icon_x67qw_59 {
+    display: inline-flex;
+    flex-shrink: 0;
+    grid-area: 1/1;
+    margin-inline-end: var(--sys-unit-4);
+    font-size: var(--toast-icon-size, 1.2em);
   }
-  ._header_r09x9_60 {
-    display: flex;
-    align-items: center;
-    gap: var(--sys-unit-6);
+  ._icon_x67qw_59 > svg {
+    inline-size: 1em;
+    block-size: 1em;
+    fill: currentcolor;
   }
-  ._headingMain_r09x9_65 {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    gap: var(--sys-unit-4);
+  ._title_x67qw_71 {
+    grid-area: 1/2;
     min-inline-size: 0;
-  }
-  ._title_r09x9_72 {
     font: var(--sys-font-label-medium);
   }
-  ._description_r09x9_75 {
+  ._close_x67qw_76 {
+    --btn-fg: var(--toast-fg, var(--_toast-fg));
+    grid-area: 1/3;
+    margin-inline-start: var(--sys-unit-6);
+  }
+  ._description_x67qw_81 {
+    grid-column: 1/-1;
     font: var(--sys-font-body-medium);
     text-wrap: pretty;
   }
-  ._actions_r09x9_79 {
+  ._actions_x67qw_86 {
     display: flex;
+    grid-column: 1/-1;
     gap: var(--sys-unit-4);
     margin-block-start: var(--sys-unit-2);
   }
-  ._closeButton_r09x9_84 {
-    --btn-fg: var(--toast-fg, var(--_toast-fg));
-    flex-shrink: 0;
-  }
-  ._action_r09x9_79[data-variant=primary] {
+  ._actions_x67qw_86 > [data-variant=primary] {
     --btn-bg: var(--toast-fg, var(--_toast-fg));
     --btn-fg: var(--toast-bg, var(--_toast-bg));
   }
-  ._action_r09x9_79[data-variant=secondary] {
+  ._actions_x67qw_86 > [data-variant=secondary] {
     --btn-bg: var(--sys-color-surface-overlay-high);
     --btn-fg: var(--toast-fg, var(--_toast-fg));
   }
-  ._action_r09x9_79[data-variant=tertiary] {
+  ._actions_x67qw_86 > [data-variant=tertiary] {
     --btn-fg: var(--toast-fg, var(--_toast-fg));
   }
 }

package/dist/components/toast/toast-provider.d.ts

@@ -1,9 +1,70 @@
-import { type ReactNode } from "react";
+import { Toast as BaseToast, type ToastRootToastObject } from "@base-ui/react/toast";
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import { type ToastData } from "./toast.ts";
+/** One toast in the viewport, as `ToastProvider` hands it to `renderToast`. */
+export type ToastObject = ToastRootToastObject<ToastData>;
+export type ToastRootProps = Omit<BaseToast.Root.Props, "toast" | "className"> & Readonly<{
+    /** The toast this frame shows, as `renderToast` received it. */
+    toast: ToastObject;
+    className?: string;
+}>;
+/** A toast's frame, in its tone: a dialog that holds the other parts. */
+declare const Root: ({ toast, className, ...props }: ToastRootProps) => ReactNode;
+export type ToastIconProps = ComponentPropsWithRef<"span">;
+/** The caller's glyph before the title, sized and coloured by the toast. Renders nothing without children. */
+declare const Icon: ({ className, children, ...props }: ToastIconProps) => ReactNode;
+export type ToastTitleProps = Omit<BaseToast.Title.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+/** The toast's heading, which names its dialog. */
+declare const Title: ({ className, ...props }: ToastTitleProps) => ReactNode;
+export type ToastDescriptionProps = Omit<BaseToast.Description.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+/** The text under the title, which describes its dialog. */
+declare const Description: ({ className, ...props }: ToastDescriptionProps) => ReactNode;
+export type ToastActionsProps = ComponentPropsWithRef<"div">;
+/** The row of buttons under the text, re-coloured for the toast's tone. */
+declare const Actions: ({ className, ...props }: ToastActionsProps) => ReactNode;
+export type ToastCloseProps = Readonly<{
+    /** Accessible name, such as "Close", surfaced as the tooltip hint and the `aria-label`. */
+    label: string;
+    /** The close glyph. */
+    children: ReactNode;
+    className?: string;
+}>;
+/** The icon-only button that closes the toast, named for every input. */
+declare const Close: ({ label, children, className, }: ToastCloseProps) => ReactNode;
+/** The parts of a toast, for `ToastProvider`'s `renderToast`. */
+export type ToastParts = Readonly<{
+    Root: typeof Root;
+    Icon: typeof Icon;
+    Title: typeof Title;
+    Description: typeof Description;
+    Actions: typeof Actions;
+    Close: typeof Close;
+}>;
+/**
+ * The parts of one toast: the `Root` frame in its tone, the `Icon`, `Title`,
+ * `Description` and `Actions`, and the `Close` button.
+ *
+ * @example
+ * <Toast.Root toast={toast}>
+ * 	<Toast.Title>{toast.data?.body}</Toast.Title>
+ * 	<Toast.Close label="Close"><CloseIcon /></Toast.Close>
+ * </Toast.Root>
+ */
+export declare const Toast: ToastParts;
 export type ToastProviderProps = Readonly<{
     /** Accessible name of each toast's close button, also its tooltip. */
     closeLabel: string;
+    /** The close button's glyph. */
+    closeIcon: ReactNode;
     /** Accessible name of the region the toasts appear in, reached with F6. */
     viewportLabel: string;
+    /** Draws each toast from the `Toast` parts, in place of the default. */
+    renderToast?: (toast: ToastObject) => ReactNode;
+    /** The app, which the viewport renders beside. */
     children: ReactNode;
 }>;
 /**
@@ -11,8 +72,9 @@ export type ToastProviderProps = Readonly<{
  * {@link toastManager} to base-ui and renders the viewport alongside the app.
  *
  * @example
- * <ToastProvider closeLabel="Close" viewportLabel="Notifications">
+ * <ToastProvider closeLabel="Close" closeIcon={<CloseIcon />} viewportLabel="Notifications">
  *   <App />
  * </ToastProvider>
  */
-export declare const ToastProvider: ({ closeLabel, viewportLabel, children, }: ToastProviderProps) => ReactNode;
+export declare const ToastProvider: ({ closeLabel, closeIcon, viewportLabel, renderToast, children, }: ToastProviderProps) => ReactNode;
+export {};