@funstack/ui 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/switch/switch.mjs

@@ -5,6 +5,7 @@ import { dataAttr } from "../internal/data-attr.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
 //#region src/switch/switch.tsx
 /**
@@ -14,11 +15,22 @@ import { guardCheckableChange, useNativeChecked } from "../internal/use-native-c
 *
 * Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,
 * `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,
-* `data-disabled`. Event handlers are merged rather than owned: a `render` element's own
+* `data-disabled`; inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`,
+* `aria-describedby` (token-merged) and `data-invalid`, and `disabled` / `name` / `required`
+* default from the Field. Event handlers are merged rather than owned: a `render` element's own
 * `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls
 * `preventDefault()` cancels the change (nothing is dispatched).
 */
-function Switch({ checked, defaultChecked, checkedChangeAction, disabled = false, transition, className, style, render, ...rest }) {
+function Switch({ checked, defaultChecked, checkedChangeAction, disabled: disabledProp, transition, className, style, render, ...rest }) {
+	const field = useFieldControl({
+		labelable: true,
+		name: rest.name,
+		disabled: disabledProp,
+		required: rest.required,
+		id: rest.id,
+		component: "Switch"
+	});
+	const disabled = field.disabled;
 	const { optimistic, pending, dispatch, latestInFlight } = useControllableAction({
 		controlled: checked,
 		defaultValue: defaultChecked,
@@ -30,6 +42,7 @@ function Switch({ checked, defaultChecked, checkedChangeAction, disabled = false
 			prop: "checked"
 		}
 	});
+	useFieldValueChange(optimistic);
 	const inputRef = useNativeChecked({
 		type: "checkbox",
 		component: "Switch",
@@ -38,20 +51,23 @@ function Switch({ checked, defaultChecked, checkedChangeAction, disabled = false
 		latestInFlight,
 		onPlatformChange: (next, event) => dispatch(next, createActionDetails(event, { reason: "platform" }))
 	});
+	const state = {
+		checked: optimistic,
+		pending,
+		disabled
+	};
+	const ref = useMergedRef(inputRef, field.ref);
 	const element = useRender({
 		defaultElement: "input",
 		render,
-		state: {
-			checked: optimistic,
-			pending,
-			disabled
-		},
+		state,
 		className,
 		style,
 		children: void 0,
-		ref: inputRef,
+		ref,
 		props: rest,
 		libraryProps: {
+			...fieldInputProps(field),
 			type: "checkbox",
 			role: "switch",
 			checked: optimistic,

package/dist/switch/switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.mjs","names":[],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["\"use client\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useRender } from \"../internal/use-render.js\";\n\nexport interface SwitchState {\n  /** Optimistic checked state: what the user sees, including an in-flight change. */\n  readonly checked: boolean;\n  /** An action dispatched by this Switch is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `checkedChangeAction`. */\nexport interface SwitchCheckedChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user toggled the switch (click, Space, label click); `event` is the native\n   * `click` event. `\"platform\"`: the browser changed the value itself: a form reset (`event` is\n   * the `reset` event) or a click before hydration / Firefox form-state restoration found on\n   * mount (`event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SwitchProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"role\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"onChange\"\n  | \"aria-checked\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled checked state. `undefined` means uncontrolled. */\n  checked?: boolean;\n  /**\n   * Initial checked state in uncontrolled mode (default `false`). Also the value a form reset\n   * returns to: the latest prop value is mirrored into the input's `defaultChecked`.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Called with the next checked state on every change. Runs inside the Switch's transition; may\n   * be sync or async (also a Server Function). Rejections reach the nearest Error Boundary.\n   * Also called with `details.reason === \"platform\"` for a form reset or a pre-hydration click.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation). `details.event.preventDefault()` is not a veto and is\n   * unsupported here; use controlled mode to veto a change.\n   */\n  checkedChangeAction?: ChangeAction<boolean, SwitchCheckedChangeDetails>;\n  /** Renders a natively disabled input; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /** Submitted as the input's value when checked. Default `\"on\"` (platform). */\n  value?: string;\n  /**\n   * Forwarded as `default` to the Switch's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action, not the optimistic flip; animate the flip with CSS on `:checked`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, SwitchState>;\n  style?: StateValue<CSSProperties | undefined, SwitchState>;\n  /**\n   * Replace the rendered element (element form) or take over rendering (function form). Must keep\n   * an `<input type=\"checkbox\">`.\n   */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, SwitchState>;\n}\n\n/**\n * An on/off switch (WAI-ARIA \"Switch\" pattern, HTML checkbox input variant). Renders\n * `<input type=\"checkbox\" role=\"switch\">` whose DOM `checked` is the optimistic state; the input\n * carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.\n *\n * Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,\n * `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,\n * `data-disabled`. Event handlers are merged rather than owned: a `render` element's own\n * `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls\n * `preventDefault()` cancels the change (nothing is dispatched).\n */\nexport function Switch({\n  checked,\n  defaultChecked,\n  checkedChangeAction,\n  disabled = false,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: SwitchProps) {\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    boolean,\n    SwitchCheckedChangeDetails\n  >({\n    controlled: checked,\n    defaultValue: defaultChecked,\n    initialValue: false,\n    action: checkedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"switch\", next ? \"on\" : \"off\"),\n    warn: { component: \"Switch\", prop: \"checked\" },\n  });\n\n  const inputRef = useNativeChecked({\n    type: \"checkbox\",\n    component: \"Switch\",\n    checked: optimistic,\n    // Uncontrolled: the latest prop is the reset target. Controlled: React's mount-time value.\n    defaultChecked: checked === undefined ? (defaultChecked ?? false) : undefined,\n    latestInFlight,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  const state: SwitchState = { checked: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, SwitchState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref: inputRef,\n    // Pass-through layer: a `render` element's own props win over these.\n    props: rest,\n    // Library-controlled layer (owned keys, conventions 1.2).\n    libraryProps: {\n      type: \"checkbox\",\n      role: \"switch\",\n      // The DOM state is the optimistic state (conventions 3.2): react-dom restores a controlled\n      // input to its props after every event, and only the sync-lane optimistic value survives.\n      checked: optimistic,\n      defaultChecked: undefined,\n      \"aria-checked\": undefined,\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the input on its own.\n      disabled,\n      \"data-checked\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        // A natively disabled input fires no click; this covers `render` elements that do not\n        // honour `disabled`.\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        guardCheckableChange(\n          nativeEvent,\n          () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: \"activate\" })),\n          \"Switch\",\n        );\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Switch\", transition, element);\n}\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoGA,SAAgB,OAAO,EACrB,SACA,gBACA,qBACA,WAAW,OACX,YACA,WACA,OACA,QACA,GAAG,QACW;CACd,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,OAAO,KAAK;EACxE,MAAM;GAAE,WAAW;GAAU,MAAM;EAAU;CAC/C,CAAC;CAED,MAAM,WAAW,iBAAiB;EAChC,MAAM;EACN,WAAW;EACX,SAAS;EAET,gBAAgB,YAAY,KAAA,IAAa,kBAAkB,QAAS,KAAA;EACpE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAID,MAAM,UAAU,UAAuD;EACrE,gBAAgB;EAChB;EACA,OAAA;GAL2B,SAAS;GAAY;GAAS;EAKrD;EACJ;EACA;EACA,UAAU,KAAA;EACV,KAAK;EAEL,OAAO;EAEP,cAAc;GACZ,MAAM;GACN,MAAM;GAGN,SAAS;GACT,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAGhB;GACA,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAAyC;IAGlD,IAAI,UAAU;IACd,MAAM,cAAc,MAAM;IAC1B,qBACE,mBACM,SAAS,CAAC,YAAY,oBAAoB,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC,GACpF,QACF;GACF;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}
+{"version":3,"file":"switch.mjs","names":[],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["\"use client\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport {\n  fieldInputProps,\n  useFieldControl,\n  useFieldValueChange,\n  useMergedRef,\n} from \"../internal/use-field-control.js\";\nimport { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useRender } from \"../internal/use-render.js\";\n\nexport interface SwitchState {\n  /** Optimistic checked state: what the user sees, including an in-flight change. */\n  readonly checked: boolean;\n  /** An action dispatched by this Switch is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop (or the enclosing `Field.Root`'s). */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `checkedChangeAction`. */\nexport interface SwitchCheckedChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user toggled the switch (click, Space, label click); `event` is the native\n   * `click` event. `\"platform\"`: the browser changed the value itself: a form reset (`event` is\n   * the `reset` event) or a click before hydration / Firefox form-state restoration found on\n   * mount (`event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SwitchProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"role\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"onChange\"\n  | \"aria-checked\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled checked state. `undefined` means uncontrolled. */\n  checked?: boolean;\n  /**\n   * Initial checked state in uncontrolled mode (default `false`). Also the value a form reset\n   * returns to: the latest prop value is mirrored into the input's `defaultChecked`.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Called with the next checked state on every change. Runs inside the Switch's transition; may\n   * be sync or async (also a Server Function). Rejections reach the nearest Error Boundary.\n   * Also called with `details.reason === \"platform\"` for a form reset or a pre-hydration click.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation). `details.event.preventDefault()` is not a veto and is\n   * unsupported here; use controlled mode to veto a change.\n   */\n  checkedChangeAction?: ChangeAction<boolean, SwitchCheckedChangeDetails>;\n  /** Renders a natively disabled input; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /** Submitted as the input's value when checked. Default `\"on\"` (platform). */\n  value?: string;\n  /**\n   * Forwarded as `default` to the Switch's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action, not the optimistic flip; animate the flip with CSS on `:checked`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, SwitchState>;\n  style?: StateValue<CSSProperties | undefined, SwitchState>;\n  /**\n   * Replace the rendered element (element form) or take over rendering (function form). Must keep\n   * an `<input type=\"checkbox\">`.\n   */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, SwitchState>;\n}\n\n/**\n * An on/off switch (WAI-ARIA \"Switch\" pattern, HTML checkbox input variant). Renders\n * `<input type=\"checkbox\" role=\"switch\">` whose DOM `checked` is the optimistic state; the input\n * carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.\n *\n * Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,\n * `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,\n * `data-disabled`; inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`,\n * `aria-describedby` (token-merged) and `data-invalid`, and `disabled` / `name` / `required`\n * default from the Field. Event handlers are merged rather than owned: a `render` element's own\n * `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls\n * `preventDefault()` cancels the change (nothing is dispatched).\n */\nexport function Switch({\n  checked,\n  defaultChecked,\n  checkedChangeAction,\n  disabled: disabledProp,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: SwitchProps) {\n  // Inside a Field.Root (design/components/field-form.md 7.2) the Field owns the id and the ARIA\n  // wiring, and `name` / `required` / `disabled` default from it.\n  const field = useFieldControl({\n    labelable: true,\n    name: rest.name,\n    disabled: disabledProp,\n    required: rest.required,\n    id: rest.id,\n    component: \"Switch\",\n  });\n  const disabled = field.disabled;\n\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    boolean,\n    SwitchCheckedChangeDetails\n  >({\n    controlled: checked,\n    defaultValue: defaultChecked,\n    initialValue: false,\n    action: checkedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"switch\", next ? \"on\" : \"off\"),\n    warn: { component: \"Switch\", prop: \"checked\" },\n  });\n  // Inside a Field: a value React writes with no event (a rejected action rolling back, a\n  // controlled change) re-reads validity and `validate` after the commit.\n  useFieldValueChange(optimistic);\n\n  const inputRef = useNativeChecked({\n    type: \"checkbox\",\n    component: \"Switch\",\n    checked: optimistic,\n    // Uncontrolled: the latest prop is the reset target. Controlled: React's mount-time value.\n    defaultChecked: checked === undefined ? (defaultChecked ?? false) : undefined,\n    latestInFlight,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  const state: SwitchState = { checked: optimistic, pending, disabled };\n\n  const ref = useMergedRef<HTMLInputElement>(inputRef, field.ref);\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, SwitchState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref,\n    // Pass-through layer: a `render` element's own props win over these.\n    props: rest,\n    // Library-controlled layer (owned keys, conventions 1.2).\n    libraryProps: {\n      ...fieldInputProps(field),\n      type: \"checkbox\",\n      role: \"switch\",\n      // The DOM state is the optimistic state (conventions 3.2): react-dom restores a controlled\n      // input to its props after every event, and only the sync-lane optimistic value survives.\n      checked: optimistic,\n      defaultChecked: undefined,\n      \"aria-checked\": undefined,\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the input on its own.\n      disabled,\n      \"data-checked\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        // A natively disabled input fires no click; this covers `render` elements that do not\n        // honour `disabled`.\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        guardCheckableChange(\n          nativeEvent,\n          () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: \"activate\" })),\n          \"Switch\",\n        );\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Switch\", transition, element);\n}\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4GA,SAAgB,OAAO,EACrB,SACA,gBACA,qBACA,UAAU,cACV,YACA,WACA,OACA,QACA,GAAG,QACW;CAGd,MAAM,QAAQ,gBAAgB;EAC5B,WAAW;EACX,MAAM,KAAK;EACX,UAAU;EACV,UAAU,KAAK;EACf,IAAI,KAAK;EACT,WAAW;CACb,CAAC;CACD,MAAM,WAAW,MAAM;CAEvB,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,OAAO,KAAK;EACxE,MAAM;GAAE,WAAW;GAAU,MAAM;EAAU;CAC/C,CAAC;CAGD,oBAAoB,UAAU;CAE9B,MAAM,WAAW,iBAAiB;EAChC,MAAM;EACN,WAAW;EACX,SAAS;EAET,gBAAgB,YAAY,KAAA,IAAa,kBAAkB,QAAS,KAAA;EACpE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAED,MAAM,QAAqB;EAAE,SAAS;EAAY;EAAS;CAAS;CAEpE,MAAM,MAAM,aAA+B,UAAU,MAAM,GAAG;CAE9D,MAAM,UAAU,UAAuD;EACrE,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU,KAAA;EACV;EAEA,OAAO;EAEP,cAAc;GACZ,GAAG,gBAAgB,KAAK;GACxB,MAAM;GACN,MAAM;GAGN,SAAS;GACT,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAGhB;GACA,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAAyC;IAGlD,IAAI,UAAU;IACd,MAAM,cAAc,MAAM;IAC1B,qBACE,mBACM,SAAS,CAAC,YAAY,oBAAoB,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC,GACpF,QACF;GACF;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}

package/dist/tabs/tabs-root.mjs

@@ -7,7 +7,7 @@ import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { TabsContext } from "./tabs-context.mjs";
 import { tabId } from "./tabs-ids.mjs";
-import { useId, useRef } from "react";
+import { useId, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/tabs/tabs-root.tsx
 /** Looks up an element by id in the tree that contains `node` (document or shadow root). */
@@ -44,7 +44,7 @@ function TabsRoot({ value, defaultValue, valueChangeAction, orientation = "horiz
 		}
 	});
 	useDevWarning(value === void 0 && defaultValue === void 0, "Tabs.Root: neither `value` nor `defaultValue` was passed, so no tab is selected and no panel is shown. Pass `defaultValue`, or `defaultValue={null}` to start with no selection.");
-	const context = {
+	const context = useMemo(() => ({
 		rootId,
 		committed,
 		optimistic,
@@ -57,7 +57,17 @@ function TabsRoot({ value, defaultValue, valueChangeAction, orientation = "horiz
 			if (next === optimistic) return;
 			dispatch(next, createActionDetails(event, { reason }));
 		}
-	};
+	}), [
+		rootId,
+		committed,
+		optimistic,
+		pending,
+		orientation,
+		activationMode,
+		loop,
+		disabled,
+		dispatch
+	]);
 	const element = useRender({
 		defaultElement: "div",
 		render,

package/dist/tabs/tabs-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-root.mjs","names":[],"sources":["../../src/tabs/tabs-root.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { TabsContext } from \"./tabs-context.js\";\nimport type {\n  TabsActivationMode,\n  TabsChangeReason,\n  TabsContextValue,\n  TabsOrientation,\n} from \"./tabs-context.js\";\nimport { tabId } from \"./tabs-ids.js\";\n\nexport type { TabsActivationMode, TabsOrientation } from \"./tabs-context.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface TabsValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user selected the tab (click, Enter/Space, or focus in automatic mode).\n   * `\"platform\"`: the browser revealed a `keepMounted=\"until-found\"` panel through find-in-page or a\n   * text fragment (`details.event` is the `beforematch` event).\n   */\n  readonly reason: TabsChangeReason;\n}\n\nexport interface TabsRootState {\n  /** Optimistic selected value, or `null`. Content rendered from it must not suspend. */\n  readonly value: string | null;\n  /** An action dispatched through this Tabs is in flight. */\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n  readonly disabled: boolean;\n}\n\nexport interface TabsRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"className\" | \"style\" | \"children\" | \"defaultValue\"\n> {\n  /** Controlled selected value. `null` selects nothing; `undefined` means uncontrolled. */\n  value?: string | null;\n  /** Initial value in uncontrolled mode. Defaults to `null` (no panel shown). */\n  defaultValue?: string | null;\n  /**\n   * Runs inside the Root's transition whenever the user selects a tab. May be sync or async;\n   * rejections reach the nearest Error Boundary and roll the selection back.\n   *\n   * With `activationMode=\"automatic\"` every arrow key press calls it; prefer `\"manual\"` when the\n   * action awaits a server round trip. A `setState` placed after your own `await` is not a\n   * Transition update; wrap it in `startTransition` (React limitation).\n   */\n  valueChangeAction?: ChangeAction<string, TabsValueChangeDetails>;\n  /** Layout and arrow-key axis. Default `\"horizontal\"`. */\n  orientation?: TabsOrientation;\n  /**\n   * `\"automatic\"`: selection follows focus. `\"manual\"`: Enter, Space or click selects.\n   * Default `\"automatic\"`.\n   */\n  activationMode?: TabsActivationMode;\n  /** Whether arrow keys wrap from the last tab to the first. Default `true`. */\n  loop?: boolean;\n  /** Disables every Tab (focusable, never dispatches). */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, TabsRootState>;\n  style?: StateValue<CSSProperties | undefined, TabsRootState>;\n  children?: StateValue<ReactNode, TabsRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsRootState>;\n}\n\n/** Looks up an element by id in the tree that contains `node` (document or shadow root). */\nfunction findById(node: Node | null, id: string): Element | null {\n  const root = node?.getRootNode() ?? (typeof document === \"undefined\" ? null : document);\n  if (root !== null && \"getElementById\" in root) {\n    return (root as Document | ShadowRoot).getElementById(id);\n  }\n  return null;\n}\n\n/**\n * Owns the Tabs state (`value`), the transition, the ids and the context. Renders a `div` with\n * `data-pending` while a selection is in flight (including a suspending panel's wait).\n *\n * Owned keys (conventions 1.2): `data-pending`, `data-orientation`, `data-disabled`.\n */\nexport function TabsRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  orientation = \"horizontal\",\n  activationMode = \"automatic\",\n  loop = true,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsRootProps) {\n  const rootId = useId();\n  const rootRef = useRef<HTMLElement | null>(null);\n\n  const { committed, optimistic, pending, dispatch } = useControllableAction<\n    string | null,\n    TabsValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    // Only ever dispatched with a string: the Tabs UI cannot deselect.\n    action:\n      valueChangeAction === undefined\n        ? undefined\n        : (next, details) => valueChangeAction(next as string, details),\n    transitionTypes: (next, prev) => {\n      // Direction is relative to the committed tab (design 10.2), by DOM order of the two tabs.\n      if (next === null || prev === null || next === prev) return transitionTypes(\"tabs\");\n      const prevTab = findById(rootRef.current, tabId(rootId, prev));\n      const nextTab = findById(rootRef.current, tabId(rootId, next));\n      if (prevTab === null || nextTab === null) return transitionTypes(\"tabs\");\n      const following = prevTab.compareDocumentPosition(nextTab) & Node.DOCUMENT_POSITION_FOLLOWING;\n      return transitionTypes(\"tabs\", following ? \"next\" : \"prev\");\n    },\n    warn: { component: \"Tabs.Root\", prop: \"value\" },\n  });\n  // `null` is a legitimate default (no panel), but forgetting both props is the likelier cause\n  // of an empty Tabs (design open question 2, product owner decision).\n  useDevWarning(\n    value === undefined && defaultValue === undefined,\n    \"Tabs.Root: neither `value` nor `defaultValue` was passed, so no tab is selected and no \" +\n      \"panel is shown. Pass `defaultValue`, or `defaultValue={null}` to start with no selection.\",\n  );\n\n  const context: TabsContextValue = {\n    rootId,\n    committed,\n    optimistic,\n    pending,\n    orientation,\n    activationMode,\n    loop,\n    disabled,\n    select: (next, event, reason) => {\n      // No-op rule against the optimistic value (conventions 2.3 item 7, design section 9.4).\n      if (next === optimistic) return;\n      dispatch(next, createActionDetails(event, { reason }));\n    },\n  };\n\n  const state: TabsRootState = { value: optimistic, pending, orientation, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, TabsRootState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-pending\": dataAttr(pending),\n      \"data-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: rootRef,\n  });\n\n  return <TabsContext value={context}>{element}</TabsContext>;\n}\n\nTabsRoot.displayName = \"TabsRoot\";\n"],"mappings":";;;;;;;;;;;;;AA2EA,SAAS,SAAS,MAAmB,IAA4B;CAC/D,MAAM,OAAO,MAAM,YAAY,MAAM,OAAO,aAAa,cAAc,OAAO;CAC9E,IAAI,SAAS,QAAQ,oBAAoB,MACvC,OAAQ,KAA+B,eAAe,EAAE;CAE1D,OAAO;AACT;;;;;;;AAQA,SAAgB,SAAS,EACvB,OACA,cACA,mBACA,cAAc,cACd,iBAAiB,aACjB,OAAO,MACP,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACa;CAChB,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAA2B,IAAI;CAE/C,MAAM,EAAE,WAAW,YAAY,SAAS,aAAa,sBAGnD;EACA,YAAY;EACZ;EACA,cAAc;EAEd,QACE,sBAAsB,KAAA,IAClB,KAAA,KACC,MAAM,YAAY,kBAAkB,MAAgB,OAAO;EAClE,kBAAkB,MAAM,SAAS;GAE/B,IAAI,SAAS,QAAQ,SAAS,QAAQ,SAAS,MAAM,OAAO,gBAAgB,MAAM;GAClF,MAAM,UAAU,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,CAAC;GAC7D,MAAM,UAAU,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,CAAC;GAC7D,IAAI,YAAY,QAAQ,YAAY,MAAM,OAAO,gBAAgB,MAAM;GACvE,MAAM,YAAY,QAAQ,wBAAwB,OAAO,IAAI,KAAK;GAClE,OAAO,gBAAgB,QAAQ,YAAY,SAAS,MAAM;EAC5D;EACA,MAAM;GAAE,WAAW;GAAa,MAAM;EAAQ;CAChD,CAAC;CAGD,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,GACxC,kLAEF;CAEA,MAAM,UAA4B;EAChC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,MAAM,OAAO,WAAW;GAE/B,IAAI,SAAS,YAAY;GACzB,SAAS,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,CAAC;EACvD;CACF;CAIA,MAAM,UAAU,UAAuD;EACrE,gBAAgB;EAChB;EACA,OAAA;GAL6B,OAAO;GAAY;GAAS;GAAa;EAKlE;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,gBAAgB,SAAS,OAAO;GAChC,oBAAoB;GACpB,iBAAiB,SAAS,QAAQ;EACpC;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,aAAD;EAAa,OAAO;EAAU,UAAA;CAAqB,CAAA;AAC5D;AAEA,SAAS,cAAc"}
+{"version":3,"file":"tabs-root.mjs","names":[],"sources":["../../src/tabs/tabs-root.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useMemo, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { TabsContext } from \"./tabs-context.js\";\nimport type {\n  TabsActivationMode,\n  TabsChangeReason,\n  TabsContextValue,\n  TabsOrientation,\n} from \"./tabs-context.js\";\nimport { tabId } from \"./tabs-ids.js\";\n\nexport type { TabsActivationMode, TabsOrientation } from \"./tabs-context.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface TabsValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user selected the tab (click, Enter/Space, or focus in automatic mode).\n   * `\"platform\"`: the browser revealed a `keepMounted=\"until-found\"` panel through find-in-page or a\n   * text fragment (`details.event` is the `beforematch` event).\n   */\n  readonly reason: TabsChangeReason;\n}\n\nexport interface TabsRootState {\n  /** Optimistic selected value, or `null`. Content rendered from it must not suspend. */\n  readonly value: string | null;\n  /** An action dispatched through this Tabs is in flight. */\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n  readonly disabled: boolean;\n}\n\nexport interface TabsRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"className\" | \"style\" | \"children\" | \"defaultValue\"\n> {\n  /** Controlled selected value. `null` selects nothing; `undefined` means uncontrolled. */\n  value?: string | null;\n  /** Initial value in uncontrolled mode. Defaults to `null` (no panel shown). */\n  defaultValue?: string | null;\n  /**\n   * Runs inside the Root's transition whenever the user selects a tab. May be sync or async;\n   * rejections reach the nearest Error Boundary and roll the selection back.\n   *\n   * With `activationMode=\"automatic\"` every arrow key press calls it; prefer `\"manual\"` when the\n   * action awaits a server round trip. A `setState` placed after your own `await` is not a\n   * Transition update; wrap it in `startTransition` (React limitation).\n   */\n  valueChangeAction?: ChangeAction<string, TabsValueChangeDetails>;\n  /** Layout and arrow-key axis. Default `\"horizontal\"`. */\n  orientation?: TabsOrientation;\n  /**\n   * `\"automatic\"`: selection follows focus. `\"manual\"`: Enter, Space or click selects.\n   * Default `\"automatic\"`.\n   */\n  activationMode?: TabsActivationMode;\n  /** Whether arrow keys wrap from the last tab to the first. Default `true`. */\n  loop?: boolean;\n  /** Disables every Tab (focusable, never dispatches). */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, TabsRootState>;\n  style?: StateValue<CSSProperties | undefined, TabsRootState>;\n  children?: StateValue<ReactNode, TabsRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsRootState>;\n}\n\n/** Looks up an element by id in the tree that contains `node` (document or shadow root). */\nfunction findById(node: Node | null, id: string): Element | null {\n  const root = node?.getRootNode() ?? (typeof document === \"undefined\" ? null : document);\n  if (root !== null && \"getElementById\" in root) {\n    return (root as Document | ShadowRoot).getElementById(id);\n  }\n  return null;\n}\n\n/**\n * Owns the Tabs state (`value`), the transition, the ids and the context. Renders a `div` with\n * `data-pending` while a selection is in flight (including a suspending panel's wait).\n *\n * Owned keys (conventions 1.2): `data-pending`, `data-orientation`, `data-disabled`.\n */\nexport function TabsRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  orientation = \"horizontal\",\n  activationMode = \"automatic\",\n  loop = true,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsRootProps) {\n  const rootId = useId();\n  const rootRef = useRef<HTMLElement | null>(null);\n\n  const { committed, optimistic, pending, dispatch } = useControllableAction<\n    string | null,\n    TabsValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    // Only ever dispatched with a string: the Tabs UI cannot deselect.\n    action:\n      valueChangeAction === undefined\n        ? undefined\n        : (next, details) => valueChangeAction(next as string, details),\n    transitionTypes: (next, prev) => {\n      // Direction is relative to the committed tab (design 10.2), by DOM order of the two tabs.\n      if (next === null || prev === null || next === prev) return transitionTypes(\"tabs\");\n      const prevTab = findById(rootRef.current, tabId(rootId, prev));\n      const nextTab = findById(rootRef.current, tabId(rootId, next));\n      if (prevTab === null || nextTab === null) return transitionTypes(\"tabs\");\n      const following = prevTab.compareDocumentPosition(nextTab) & Node.DOCUMENT_POSITION_FOLLOWING;\n      return transitionTypes(\"tabs\", following ? \"next\" : \"prev\");\n    },\n    warn: { component: \"Tabs.Root\", prop: \"value\" },\n  });\n  // `null` is a legitimate default (no panel), but forgetting both props is the likelier cause\n  // of an empty Tabs (design open question 2, product owner decision).\n  useDevWarning(\n    value === undefined && defaultValue === undefined,\n    \"Tabs.Root: neither `value` nor `defaultValue` was passed, so no tab is selected and no \" +\n      \"panel is shown. Pass `defaultValue`, or `defaultValue={null}` to start with no selection.\",\n  );\n\n  // Memoised (#48): `dispatch` is stable, so this changes only with the state and the props below.\n  const context = useMemo<TabsContextValue>(\n    () => ({\n      rootId,\n      committed,\n      optimistic,\n      pending,\n      orientation,\n      activationMode,\n      loop,\n      disabled,\n      select: (next, event, reason) => {\n        // No-op rule against the optimistic value (conventions 2.3 item 7, design section 9.4).\n        if (next === optimistic) return;\n        dispatch(next, createActionDetails(event, { reason }));\n      },\n    }),\n    [rootId, committed, optimistic, pending, orientation, activationMode, loop, disabled, dispatch],\n  );\n\n  const state: TabsRootState = { value: optimistic, pending, orientation, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, TabsRootState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-pending\": dataAttr(pending),\n      \"data-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: rootRef,\n  });\n\n  return <TabsContext value={context}>{element}</TabsContext>;\n}\n\nTabsRoot.displayName = \"TabsRoot\";\n"],"mappings":";;;;;;;;;;;;;AA2EA,SAAS,SAAS,MAAmB,IAA4B;CAC/D,MAAM,OAAO,MAAM,YAAY,MAAM,OAAO,aAAa,cAAc,OAAO;CAC9E,IAAI,SAAS,QAAQ,oBAAoB,MACvC,OAAQ,KAA+B,eAAe,EAAE;CAE1D,OAAO;AACT;;;;;;;AAQA,SAAgB,SAAS,EACvB,OACA,cACA,mBACA,cAAc,cACd,iBAAiB,aACjB,OAAO,MACP,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACa;CAChB,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAA2B,IAAI;CAE/C,MAAM,EAAE,WAAW,YAAY,SAAS,aAAa,sBAGnD;EACA,YAAY;EACZ;EACA,cAAc;EAEd,QACE,sBAAsB,KAAA,IAClB,KAAA,KACC,MAAM,YAAY,kBAAkB,MAAgB,OAAO;EAClE,kBAAkB,MAAM,SAAS;GAE/B,IAAI,SAAS,QAAQ,SAAS,QAAQ,SAAS,MAAM,OAAO,gBAAgB,MAAM;GAClF,MAAM,UAAU,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,CAAC;GAC7D,MAAM,UAAU,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,CAAC;GAC7D,IAAI,YAAY,QAAQ,YAAY,MAAM,OAAO,gBAAgB,MAAM;GACvE,MAAM,YAAY,QAAQ,wBAAwB,OAAO,IAAI,KAAK;GAClE,OAAO,gBAAgB,QAAQ,YAAY,SAAS,MAAM;EAC5D;EACA,MAAM;GAAE,WAAW;GAAa,MAAM;EAAQ;CAChD,CAAC;CAGD,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,GACxC,kLAEF;CAGA,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,MAAM,OAAO,WAAW;GAE/B,IAAI,SAAS,YAAY;GACzB,SAAS,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,CAAC;EACvD;CACF,IACA;EAAC;EAAQ;EAAW;EAAY;EAAS;EAAa;EAAgB;EAAM;EAAU;CAAQ,CAChG;CAIA,MAAM,UAAU,UAAuD;EACrE,gBAAgB;EAChB;EACA,OAAA;GAL6B,OAAO;GAAY;GAAS;GAAa;EAKlE;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,gBAAgB,SAAS,OAAO;GAChC,oBAAoB;GACpB,iBAAiB,SAAS,QAAQ;EACpC;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,aAAD;EAAa,OAAO;EAAU,UAAA;CAAqB,CAAA;AAC5D;AAEA,SAAS,cAAc"}

package/dist/toast/index.d.mts

@@ -0,0 +1,25 @@
+import { ToastActionDetails, ToastActionOptions, ToastCloseDetails, ToastItem, ToastManager, ToastOptions, ToastPriority, ToastPromiseOptions, createToastManager, toast } from "./toast.mjs";
+import { ToastAction, ToastActionProps, ToastActionState } from "./toast-action.mjs";
+import { ToastClose, ToastCloseProps, ToastCloseState } from "./toast-close.mjs";
+import { ToastRoot, ToastRootProps, ToastRootState } from "./toast-root.mjs";
+import { ToastDescription, ToastDescriptionProps } from "./toast-description.mjs";
+import { ToastTitle, ToastTitleProps } from "./toast-title.mjs";
+import { ToastViewport, ToastViewportProps, ToastViewportState } from "./toast-viewport.mjs";
+//#region src/toast/index.d.ts
+/**
+ * Toast notifications. The queue's input is the `toast()` function (urgent: a toast shows at
+ * once, even while the action it reports on is pending); its output is `Toast.Viewport`
+ * (`section[popover=manual]`, rendered once) mapping `state.toasts` to `Toast.Root`
+ * (`div[role=dialog]`) > `Title`, `Description`, `Action` (an action prop, e.g. Undo), `Close`.
+ */
+export declare const Toast: {
+  readonly Viewport: typeof ToastViewport;
+  readonly Root: typeof ToastRoot;
+  readonly Title: typeof ToastTitle;
+  readonly Description: typeof ToastDescription;
+  readonly Action: typeof ToastAction;
+  readonly Close: typeof ToastClose;
+};
+//#endregion
+export { type ToastActionDetails, type ToastActionOptions, type ToastActionProps, type ToastActionState, type ToastCloseDetails, type ToastCloseProps, type ToastCloseState, type ToastDescriptionProps, type ToastItem, type ToastManager, type ToastOptions, type ToastPriority, type ToastPromiseOptions, type ToastRootProps, type ToastRootState, type ToastTitleProps, type ToastViewportProps, type ToastViewportState, createToastManager, toast };
+//# sourceMappingURL=index.d.mts.map

package/dist/toast/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/toast/index.ts"],"mappings":";;;;;;;;;;;;;;qBAaa;WACX,iBAAQ;WACR,aAAI;WACJ,cAAK;WACL,oBAAW;WACX,eAAM;WACN,cAAK"}

package/dist/toast/index.mjs

@@ -0,0 +1,26 @@
+import { ToastAction } from "./toast-action.mjs";
+import { ToastClose } from "./toast-close.mjs";
+import { ToastDescription } from "./toast-description.mjs";
+import { ToastRoot } from "./toast-root.mjs";
+import { ToastTitle } from "./toast-title.mjs";
+import { createToastManager, toast } from "./toast.mjs";
+import { ToastViewport } from "./toast-viewport.mjs";
+//#region src/toast/index.ts
+/**
+* Toast notifications. The queue's input is the `toast()` function (urgent: a toast shows at
+* once, even while the action it reports on is pending); its output is `Toast.Viewport`
+* (`section[popover=manual]`, rendered once) mapping `state.toasts` to `Toast.Root`
+* (`div[role=dialog]`) > `Title`, `Description`, `Action` (an action prop, e.g. Undo), `Close`.
+*/
+const Toast = {
+	Viewport: ToastViewport,
+	Root: ToastRoot,
+	Title: ToastTitle,
+	Description: ToastDescription,
+	Action: ToastAction,
+	Close: ToastClose
+};
+//#endregion
+export { Toast, createToastManager, toast };
+
+//# sourceMappingURL=index.mjs.map

package/dist/toast/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toast/index.ts"],"sourcesContent":["import { ToastAction } from \"./toast-action.js\";\nimport { ToastClose } from \"./toast-close.js\";\nimport { ToastDescription } from \"./toast-description.js\";\nimport { ToastRoot } from \"./toast-root.js\";\nimport { ToastTitle } from \"./toast-title.js\";\nimport { ToastViewport } from \"./toast-viewport.js\";\n\n/**\n * Toast notifications. The queue's input is the `toast()` function (urgent: a toast shows at\n * once, even while the action it reports on is pending); its output is `Toast.Viewport`\n * (`section[popover=manual]`, rendered once) mapping `state.toasts` to `Toast.Root`\n * (`div[role=dialog]`) > `Title`, `Description`, `Action` (an action prop, e.g. Undo), `Close`.\n */\nexport const Toast = {\n  Viewport: ToastViewport,\n  Root: ToastRoot,\n  Title: ToastTitle,\n  Description: ToastDescription,\n  Action: ToastAction,\n  Close: ToastClose,\n} as const;\n\nexport { toast, createToastManager } from \"./toast.js\";\nexport type {\n  ToastOptions,\n  ToastItem,\n  ToastPriority,\n  ToastActionOptions,\n  ToastActionDetails,\n  ToastCloseDetails,\n  ToastPromiseOptions,\n  ToastManager,\n} from \"./toast.js\";\nexport type { ToastViewportProps, ToastViewportState } from \"./toast-viewport.js\";\nexport type { ToastRootProps, ToastRootState } from \"./toast-root.js\";\nexport type { ToastTitleProps } from \"./toast-title.js\";\nexport type { ToastDescriptionProps } from \"./toast-description.js\";\nexport type { ToastActionProps, ToastActionState } from \"./toast-action.js\";\nexport type { ToastCloseProps, ToastCloseState } from \"./toast-close.js\";\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAa,QAAQ;CACnB,UAAU;CACV,MAAM;CACN,OAAO;CACP,aAAa;CACb,QAAQ;CACR,OAAO;AACT"}

package/dist/toast/toast-action.d.mts

@@ -0,0 +1,39 @@
+import { Action, RenderProp, StateValue } from "../internal/types.mjs";
+import { ToastActionDetails, ToastItem } from "./toast.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toast/toast-action.d.ts
+export interface ToastActionState {
+  /** This part's action is in flight. */
+  readonly pending: boolean;
+  readonly toast: ToastItem;
+}
+export interface ToastActionProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "className" | "style" | "children"> {
+  /**
+   * Runs in this part's own transition: `data-pending` on the Action and the Root, the toast's
+   * timer paused. When it resolves the toast closes with `reason: "activate"` (unless
+   * `closeOnSettle` is `false`); a rejection keeps the toast and reaches the nearest Error
+   * Boundary above the Viewport. A caught error counts as success and closes the toast: rethrow
+   * after `toast.update`, or use `closeOnSettle={false}`. Default: the toast's `action.action`.
+   */
+  action?: Action<[details: ToastActionDetails]>;
+  /** Close the toast when the action resolves. Default `true`. */
+  closeOnSettle?: boolean;
+  /** Default: the toast's `action.label`. */
+  children?: StateValue<ReactNode, ToastActionState>;
+  className?: StateValue<string | undefined, ToastActionState>;
+  style?: StateValue<CSSProperties | undefined, ToastActionState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, ToastActionState>;
+}
+/**
+ * The toast's action button (Undo, Retry, View): a `button type="button"` whose `action` runs as
+ * a transition. Renders nothing when neither the part nor the toast has an action. Never disabled
+ * while pending (a second click is a second dispatch, latest wins).
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `onClick`, `data-pending`.
+ */
+export declare function ToastAction({ action, closeOnSettle, children, className, style, render, ...rest }: ToastActionProps): ReactNode;
+export declare namespace ToastAction {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toast-action.d.mts.map

package/dist/toast/toast-action.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-action.d.mts","names":[],"sources":["../../src/toast/toast-action.tsx"],"mappings":";;;;iBAYiB;;WAEN;WACA,OAAO;;iBAGD,yBAAyB,KACxC;;;;;;;;EAUA,SAAS,QAAQ,SAAS;;EAE1B;;EAEA,WAAW,WAAW,WAAW;EACjC,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,SAAS,WAAW,iCAAiC;;;;;;;;;wBAUvC,cACd,QACA,eACA,UACA,WACA,OACA,WACG,QACF,mBAAgB;yBARH"}

package/dist/toast/toast-action.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton, useRender } from "../internal/use-render.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { useToastRootContext } from "./toast-context.mjs";
+import { useLayoutEffect, useState } from "react";
+//#region src/toast/toast-action.tsx
+/**
+* The toast's action button (Undo, Retry, View): a `button type="button"` whose `action` runs as
+* a transition. Renders nothing when neither the part nor the toast has an action. Never disabled
+* while pending (a second click is a second dispatch, latest wins).
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `onClick`, `data-pending`.
+*/
+function ToastAction({ action, closeOnSettle = true, children, className, style, render, ...rest }) {
+	const root = useToastRootContext("Toast.Action");
+	const { pending, run } = useActionTrigger();
+	const [token] = useState(() => ({}));
+	const effective = action ?? root.toast.action?.action;
+	const { setActionPending } = root;
+	useLayoutEffect(() => {
+		if (!pending) return;
+		setActionPending(token, true);
+		return () => setActionPending(token, false);
+	}, [
+		pending,
+		setActionPending,
+		token
+	]);
+	const state = {
+		pending,
+		toast: root.toast
+	};
+	const onClick = (event) => {
+		if (effective === void 0 || rest.disabled === true) return;
+		const native = event.nativeEvent;
+		const details = createActionDetails(native, { id: root.toast.id });
+		run(() => effective(details), () => {
+			if (closeOnSettle) root.close("activate", native);
+		});
+	};
+	const libraryProps = {
+		...rendersButton(render) && { type: "button" },
+		onClick,
+		"data-pending": dataAttr(pending)
+	};
+	const element = useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children: children ?? root.toast.action?.label,
+		props: rest,
+		libraryProps
+	});
+	return effective === void 0 ? null : element;
+}
+ToastAction.displayName = "ToastAction";
+//#endregion
+export { ToastAction };
+
+//# sourceMappingURL=toast-action.mjs.map

package/dist/toast/toast-action.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-action.mjs","names":[],"sources":["../../src/toast/toast-action.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, MouseEvent, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { Action, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport type { ToastActionDetails, ToastItem } from \"./toast.js\";\nimport { useToastRootContext } from \"./toast-context.js\";\n\nexport interface ToastActionState {\n  /** This part's action is in flight. */\n  readonly pending: boolean;\n  readonly toast: ToastItem;\n}\n\nexport interface ToastActionProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Runs in this part's own transition: `data-pending` on the Action and the Root, the toast's\n   * timer paused. When it resolves the toast closes with `reason: \"activate\"` (unless\n   * `closeOnSettle` is `false`); a rejection keeps the toast and reaches the nearest Error\n   * Boundary above the Viewport. A caught error counts as success and closes the toast: rethrow\n   * after `toast.update`, or use `closeOnSettle={false}`. Default: the toast's `action.action`.\n   */\n  action?: Action<[details: ToastActionDetails]>;\n  /** Close the toast when the action resolves. Default `true`. */\n  closeOnSettle?: boolean;\n  /** Default: the toast's `action.label`. */\n  children?: StateValue<ReactNode, ToastActionState>;\n  className?: StateValue<string | undefined, ToastActionState>;\n  style?: StateValue<CSSProperties | undefined, ToastActionState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToastActionState>;\n}\n\n/**\n * The toast's action button (Undo, Retry, View): a `button type=\"button\"` whose `action` runs as\n * a transition. Renders nothing when neither the part nor the toast has an action. Never disabled\n * while pending (a second click is a second dispatch, latest wins).\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `onClick`, `data-pending`.\n */\nexport function ToastAction({\n  action,\n  closeOnSettle = true,\n  children,\n  className,\n  style,\n  render,\n  ...rest\n}: ToastActionProps) {\n  const root = useToastRootContext(\"Toast.Action\");\n  const { pending, run } = useActionTrigger();\n  const [token] = useState(() => ({}));\n  const effective = action ?? root.toast.action?.action;\n  const { setActionPending } = root;\n\n  // The Root (and through it the Viewport's timer) sees this part's pending state.\n  useLayoutEffect(() => {\n    if (!pending) return;\n    setActionPending(token, true);\n    return () => setActionPending(token, false);\n  }, [pending, setActionPending, token]);\n\n  const state: ToastActionState = { pending, toast: root.toast };\n\n  const onClick = (event: MouseEvent<HTMLElement>): void => {\n    if (effective === undefined || rest.disabled === true) return;\n    const native = event.nativeEvent;\n    const details = createActionDetails(native, { id: root.toast.id });\n    run(\n      () => effective(details),\n      () => {\n        // A second resolve finds the toast already closed (closing is idempotent).\n        if (closeOnSettle) root.close(\"activate\", native);\n      },\n    );\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    onClick,\n    \"data-pending\": dataAttr(pending),\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToastActionState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children: children ?? root.toast.action?.label,\n    props: rest,\n    libraryProps,\n  });\n  return effective === undefined ? null : element;\n}\n\nToastAction.displayName = \"ToastAction\";\n"],"mappings":";;;;;;;;;;;;;;;AA8CA,SAAgB,YAAY,EAC1B,QACA,gBAAgB,MAChB,UACA,WACA,OACA,QACA,GAAG,QACgB;CACnB,MAAM,OAAO,oBAAoB,cAAc;CAC/C,MAAM,EAAE,SAAS,QAAQ,iBAAiB;CAC1C,MAAM,CAAC,SAAS,gBAAgB,CAAC,EAAE;CACnC,MAAM,YAAY,UAAU,KAAK,MAAM,QAAQ;CAC/C,MAAM,EAAE,qBAAqB;CAG7B,sBAAsB;EACpB,IAAI,CAAC,SAAS;EACd,iBAAiB,OAAO,IAAI;EAC5B,aAAa,iBAAiB,OAAO,KAAK;CAC5C,GAAG;EAAC;EAAS;EAAkB;CAAK,CAAC;CAErC,MAAM,QAA0B;EAAE;EAAS,OAAO,KAAK;CAAM;CAE7D,MAAM,WAAW,UAAyC;EACxD,IAAI,cAAc,KAAA,KAAa,KAAK,aAAa,MAAM;EACvD,MAAM,SAAS,MAAM;EACrB,MAAM,UAAU,oBAAoB,QAAQ,EAAE,IAAI,KAAK,MAAM,GAAG,CAAC;EACjE,UACQ,UAAU,OAAO,SACjB;GAEJ,IAAI,eAAe,KAAK,MAAM,YAAY,MAAM;EAClD,CACF;CACF;CAEA,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EACvD;EACA,gBAAgB,SAAS,OAAO;CAClC;CAEA,MAAM,UAAU,UAA6D;EAC3E,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU,YAAY,KAAK,MAAM,QAAQ;EACzC,OAAO;EACP;CACF,CAAC;CACD,OAAO,cAAc,KAAA,IAAY,OAAO;AAC1C;AAEA,YAAY,cAAc"}

package/dist/toast/toast-close.d.mts

@@ -0,0 +1,25 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ToastItem } from "./toast.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toast/toast-close.d.ts
+export interface ToastCloseState {
+  readonly toast: ToastItem;
+}
+export interface ToastCloseProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "className" | "style" | "children"> {
+  children?: StateValue<ReactNode, ToastCloseState>;
+  className?: StateValue<string | undefined, ToastCloseState>;
+  style?: StateValue<CSSProperties | undefined, ToastCloseState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, ToastCloseState>;
+}
+/**
+ * Dismisses the toast (`reason: "dismiss"`, the same as Escape). Label it yourself (`aria-label`
+ * or text). No Invoker Command: `hide-popover` would hide the whole region.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `onClick`.
+ */
+export declare function ToastClose({ children, className, style, render, ...rest }: ToastCloseProps): ReactNode;
+export declare namespace ToastClose {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toast-close.d.mts.map

package/dist/toast/toast-close.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-close.d.mts","names":[],"sources":["../../src/toast/toast-close.tsx"],"mappings":";;;;iBASiB;WACN,OAAO;;iBAGD,wBAAwB,KACvC;EAGA,WAAW,WAAW,WAAW;EACjC,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,SAAS,WAAW,iCAAiC;;;;;;;;wBAWvC,aAAa,UAAU,WAAW,OAAO,WAAW,QAAQ,kBAAe;yBAA3E"}

package/dist/toast/toast-close.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { rendersButton, useRender } from "../internal/use-render.mjs";
+import { useToastRootContext } from "./toast-context.mjs";
+import { useCallback } from "react";
+//#region src/toast/toast-close.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* Dismisses the toast (`reason: "dismiss"`, the same as Escape). Label it yourself (`aria-label`
+* or text). No Invoker Command: `hide-popover` would hide the whole region.
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `onClick`.
+*/
+function ToastClose({ children, className, style, render, ...rest }) {
+	const root = useToastRootContext("Toast.Close");
+	const devRef = useCallback((element) => {
+		if (isDev) queueMicrotask(() => {
+			if (!element.isConnected) return;
+			if (!(element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby") || (element.textContent ?? "").trim() !== "")) console.error("Toast.Close: the button has no accessible name. Give it text or an `aria-label`.");
+		});
+		return () => {};
+	}, []);
+	const onClick = (event) => {
+		if (rest.disabled === true) return;
+		root.close("dismiss", event.nativeEvent);
+	};
+	const libraryProps = {
+		...rendersButton(render) && { type: "button" },
+		onClick
+	};
+	return useRender({
+		defaultElement: "button",
+		render,
+		state: { toast: root.toast },
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref: devRef
+	});
+}
+ToastClose.displayName = "ToastClose";
+//#endregion
+export { ToastClose };
+
+//# sourceMappingURL=toast-close.mjs.map

package/dist/toast/toast-close.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-close.mjs","names":[],"sources":["../../src/toast/toast-close.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, MouseEvent, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport type { ToastItem } from \"./toast.js\";\nimport { useToastRootContext } from \"./toast-context.js\";\n\nexport interface ToastCloseState {\n  readonly toast: ToastItem;\n}\n\nexport interface ToastCloseProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"className\" | \"style\" | \"children\"\n> {\n  children?: StateValue<ReactNode, ToastCloseState>;\n  className?: StateValue<string | undefined, ToastCloseState>;\n  style?: StateValue<CSSProperties | undefined, ToastCloseState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToastCloseState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/**\n * Dismisses the toast (`reason: \"dismiss\"`, the same as Escape). Label it yourself (`aria-label`\n * or text). No Invoker Command: `hide-popover` would hide the whole region.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `onClick`.\n */\nexport function ToastClose({ children, className, style, render, ...rest }: ToastCloseProps) {\n  const root = useToastRootContext(\"Toast.Close\");\n\n  const devRef = useCallback((element: HTMLElement) => {\n    if (isDev) {\n      // After the commit: the text may come from children rendered in the same commit.\n      queueMicrotask(() => {\n        if (!element.isConnected) return;\n        const named =\n          element.hasAttribute(\"aria-label\") ||\n          element.hasAttribute(\"aria-labelledby\") ||\n          (element.textContent ?? \"\").trim() !== \"\";\n        if (!named) {\n          console.error(\n            \"Toast.Close: the button has no accessible name. Give it text or an `aria-label`.\",\n          );\n        }\n      });\n    }\n    return () => {};\n  }, []);\n\n  const onClick = (event: MouseEvent<HTMLElement>): void => {\n    if (rest.disabled === true) return;\n    root.close(\"dismiss\", event.nativeEvent);\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    onClick,\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, ToastCloseState>({\n    defaultElement: \"button\",\n    render,\n    state: { toast: root.toast },\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref: devRef,\n  });\n}\n\nToastClose.displayName = \"ToastClose\";\n"],"mappings":";;;;;AAuBA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;AAQvC,SAAgB,WAAW,EAAE,UAAU,WAAW,OAAO,QAAQ,GAAG,QAAyB;CAC3F,MAAM,OAAO,oBAAoB,aAAa;CAE9C,MAAM,SAAS,aAAa,YAAyB;EACnD,IAAI,OAEF,qBAAqB;GACnB,IAAI,CAAC,QAAQ,aAAa;GAK1B,IAAI,EAHF,QAAQ,aAAa,YAAY,KACjC,QAAQ,aAAa,iBAAiB,MACrC,QAAQ,eAAe,GAAA,CAAI,KAAK,MAAM,KAEvC,QAAQ,MACN,kFACF;EAEJ,CAAC;EAEH,aAAa,CAAC;CAChB,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,UAAyC;EACxD,IAAI,KAAK,aAAa,MAAM;EAC5B,KAAK,MAAM,WAAW,MAAM,WAAW;CACzC;CAEA,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EACvD;CACF;CAEA,OAAO,UAA4D;EACjE,gBAAgB;EAChB;EACA,OAAO,EAAE,OAAO,KAAK,MAAM;EAC3B;EACA;EACA;EACA,OAAO;EACP;EACA,KAAK;CACP,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/toast/toast-context.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/toast/toast-context.ts
+const ToastViewportContext = createContext(null);
+function useToastViewportContext(part) {
+	const context = use(ToastViewportContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Toast.Viewport.`);
+	return context;
+}
+const ToastRootContext = createContext(null);
+function useToastRootContext(part) {
+	const context = use(ToastRootContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Toast.Root.`);
+	return context;
+}
+//#endregion
+export { ToastRootContext, ToastViewportContext, useToastRootContext, useToastViewportContext };
+
+//# sourceMappingURL=toast-context.mjs.map

package/dist/toast/toast-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-context.mjs","names":[],"sources":["../../src/toast/toast-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { ChangeReason } from \"../internal/types.js\";\nimport type { ToastItem, ToastPriority } from \"./toast.js\";\n\n/** What a Root (and the parts under it) need from the Viewport. Stable for the Viewport's life. */\nexport interface ToastViewportContextValue {\n  /** Close toasts (`ending: true`), moving focus out first and scheduling `closeAction`. */\n  readonly close: (ids: readonly string[], reason: ChangeReason, event: Event | undefined) => void;\n  /** Remove an ending toast once its exit animations finished. */\n  readonly drop: (id: string) => void;\n  /** An action dispatched through the toast's Action part is (no longer) in flight. */\n  readonly setActionPending: (id: string, pending: boolean) => void;\n  /** The toast's content is (no longer) suspended behind the Root's guard. */\n  readonly setSuspended: (id: string, suspended: boolean) => void;\n  /** The Root's element, for arrow keys, the hotkey and focus moves; `null` to unregister. */\n  readonly registerRoot: (id: string, element: HTMLElement | null) => void;\n  /** Focus the next (`1`) or previous (`-1`) toast's Root, without wrapping. */\n  readonly focusSibling: (id: string, direction: 1 | -1) => void;\n  /** Queue an announcement; skipped when `text` equals the last one announced for `id`. */\n  readonly announce: (id: string, text: string | null, priority: ToastPriority) => void;\n  /** The Viewport's `announce` prop, read at announcement time. */\n  readonly announcer: () => ((toast: ToastItem) => string | null) | undefined;\n  /**\n   * The animations that ran in the toast before it was marked ending (kept until it is dropped\n   * or replaced): its exit waits only for the others.\n   */\n  readonly exitBaseline: (id: string) => ReadonlySet<Animation> | undefined;\n}\n\nexport const ToastViewportContext = createContext<ToastViewportContextValue | null>(null);\n\nexport function useToastViewportContext(part: string): ToastViewportContextValue {\n  const context = use(ToastViewportContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Toast.Viewport.`);\n  }\n  return context;\n}\n\n/** What the parts inside a Root need. */\nexport interface ToastRootContextValue {\n  readonly toast: ToastItem;\n  readonly ids: { readonly title: string; readonly description: string };\n  /** Root state, so Title and Description can resolve their function props against it. */\n  readonly state: ToastRootStateShape;\n  readonly registerTitle: (element: HTMLElement | null) => void;\n  readonly registerDescription: (element: HTMLElement | null) => void;\n  /** An Action part's run is (no longer) in flight; `token` identifies the part. */\n  readonly setActionPending: (token: object, pending: boolean) => void;\n  /**\n   * A Title or Description committed: mounted, or shown again by a Suspense boundary inside the\n   * Root (the consumer's skeleton), so the Root announces the text that now exists.\n   */\n  readonly contentCommitted: () => void;\n  /** The Suspense guard mounted (`true`) or unmounted (`false`). */\n  readonly setSuspended: (suspended: boolean) => void;\n  /** Close this toast. */\n  readonly close: (reason: ChangeReason, event: Event | undefined) => void;\n}\n\n/** Same shape as `ToastRootState` (declared in toast-root.tsx). */\nexport interface ToastRootStateShape {\n  readonly toast: ToastItem;\n  readonly pending: boolean;\n  readonly ending: boolean;\n  readonly type: string | undefined;\n  readonly priority: ToastPriority;\n}\n\nexport const ToastRootContext = createContext<ToastRootContextValue | null>(null);\n\nexport function useToastRootContext(part: string): ToastRootContextValue {\n  const context = use(ToastRootContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Toast.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AA8BA,MAAa,uBAAuB,cAAgD,IAAI;AAExF,SAAgB,wBAAwB,MAAyC;CAC/E,MAAM,UAAU,IAAI,oBAAoB;CACxC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,2CAA2C;CAErE,OAAO;AACT;AAgCA,MAAa,mBAAmB,cAA4C,IAAI;AAEhF,SAAgB,oBAAoB,MAAqC;CACvE,MAAM,UAAU,IAAI,gBAAgB;CACpC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,uCAAuC;CAEjE,OAAO;AACT"}

package/dist/toast/toast-description.d.mts

@@ -0,0 +1,24 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ToastRootState } from "./toast-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toast/toast-description.d.ts
+export interface ToastDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id" | "className" | "style" | "children"> {
+  /** Default: the toast's `description`. Without either, nothing is rendered. */
+  children?: StateValue<ReactNode, ToastRootState>;
+  className?: StateValue<string | undefined, ToastRootState>;
+  style?: StateValue<CSSProperties | undefined, ToastRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"p">, ToastRootState>;
+}
+/**
+ * The toast's description: a `p` whose id the Root references with `aria-describedby`. Renders
+ * nothing when the part has no `children` and the toast no `description`. Its text is part of the
+ * default announcement.
+ *
+ * Owned key (conventions 1.2): `id`.
+ */
+export declare function ToastDescription({ children, className, style, render, ...rest }: ToastDescriptionProps): ReactNode;
+export declare namespace ToastDescription {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toast-description.d.mts.map

package/dist/toast/toast-description.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-description.d.mts","names":[],"sources":["../../src/toast/toast-description.tsx"],"mappings":";;;;iBAQiB,8BAA8B,KAC7C;;EAIA,WAAW,WAAW,WAAW;EACjC,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,SAAS,WAAW,4BAA4B;;;;;;;;;wBAUlC,mBACd,UACA,WACA,OACA,WACG,QACF,wBAAqB;yBANR"}

package/dist/toast/toast-description.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useToastRootContext } from "./toast-context.mjs";
+import { useLayoutEffect } from "react";
+//#region src/toast/toast-description.tsx
+/**
+* The toast's description: a `p` whose id the Root references with `aria-describedby`. Renders
+* nothing when the part has no `children` and the toast no `description`. Its text is part of the
+* default announcement.
+*
+* Owned key (conventions 1.2): `id`.
+*/
+function ToastDescription({ children, className, style, render, ...rest }) {
+	const root = useToastRootContext("Toast.Description");
+	const content = children ?? root.toast.description;
+	const { contentCommitted } = root;
+	useLayoutEffect(() => contentCommitted(), [contentCommitted]);
+	const element = useRender({
+		defaultElement: "p",
+		render,
+		state: root.state,
+		className,
+		style,
+		children: content,
+		props: rest,
+		libraryProps: { id: root.ids.description },
+		ref: root.registerDescription
+	});
+	return content == null || content === false ? null : element;
+}
+ToastDescription.displayName = "ToastDescription";
+//#endregion
+export { ToastDescription };
+
+//# sourceMappingURL=toast-description.mjs.map

package/dist/toast/toast-description.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-description.mjs","names":[],"sources":["../../src/toast/toast-description.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useToastRootContext } from \"./toast-context.js\";\nimport type { ToastRootState } from \"./toast-root.js\";\n\nexport interface ToastDescriptionProps extends Omit<\n  ComponentPropsWithRef<\"p\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Default: the toast's `description`. Without either, nothing is rendered. */\n  children?: StateValue<ReactNode, ToastRootState>;\n  className?: StateValue<string | undefined, ToastRootState>;\n  style?: StateValue<CSSProperties | undefined, ToastRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"p\">, ToastRootState>;\n}\n\n/**\n * The toast's description: a `p` whose id the Root references with `aria-describedby`. Renders\n * nothing when the part has no `children` and the toast no `description`. Its text is part of the\n * default announcement.\n *\n * Owned key (conventions 1.2): `id`.\n */\nexport function ToastDescription({\n  children,\n  className,\n  style,\n  render,\n  ...rest\n}: ToastDescriptionProps) {\n  const root = useToastRootContext(\"Toast.Description\");\n  const content = children ?? root.toast.description;\n  // Mounted, or revealed by a Suspense boundary inside the Root: announce the text now present.\n  const { contentCommitted } = root;\n  useLayoutEffect(() => contentCommitted(), [contentCommitted]);\n  const element = useRender<ComponentPropsWithRef<\"p\">, ToastRootState>({\n    defaultElement: \"p\",\n    render,\n    state: root.state,\n    className,\n    style,\n    children: content,\n    props: rest,\n    libraryProps: { id: root.ids.description },\n    ref: root.registerDescription,\n  });\n  return content == null || content === false ? null : element;\n}\n\nToastDescription.displayName = \"ToastDescription\";\n"],"mappings":";;;;;;;;;;;;AA0BA,SAAgB,iBAAiB,EAC/B,UACA,WACA,OACA,QACA,GAAG,QACqB;CACxB,MAAM,OAAO,oBAAoB,mBAAmB;CACpD,MAAM,UAAU,YAAY,KAAK,MAAM;CAEvC,MAAM,EAAE,qBAAqB;CAC7B,sBAAsB,iBAAiB,GAAG,CAAC,gBAAgB,CAAC;CAC5D,MAAM,UAAU,UAAsD;EACpE,gBAAgB;EAChB;EACA,OAAO,KAAK;EACZ;EACA;EACA,UAAU;EACV,OAAO;EACP,cAAc,EAAE,IAAI,KAAK,IAAI,YAAY;EACzC,KAAK,KAAK;CACZ,CAAC;CACD,OAAO,WAAW,QAAQ,YAAY,QAAQ,OAAO;AACvD;AAEA,iBAAiB,cAAc"}