@skdx/react 0.27.0 → 0.29.0

package/dist/timeline/TimelineContent.d.ts

@@ -1,12 +1,14 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TimelineContentProps } from './types.js';
 /**
- * The body content of a {@link TimelineItem} (title, description, timestamp,
- * etc.): renders a plain `<div>`.
+ * The body content of a {@link TimelineItem} (title, description, timestamp, etc.), rendered as a plain `<div>`.
  *
  * @example
  * ```tsx
  * <TimelineContent>Order placed on Jan 1</TimelineContent>
  * ```
  */
-export declare const TimelineContent: React.ForwardRefExoticComponent<Omit<TimelineContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimelineContent: {
+    ({ ref: forwardedRef, ...props }: TimelineContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineIndicator.d.cts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import type { TimelineIndicatorProps } from './types.cjs';
 /**
- * The dot/icon marker for a {@link TimelineItem}: renders a plain `<div>`.
+ * The dot/icon marker for a {@link TimelineItem}, decorative and `aria-hidden` by default until given children.
  *
  * @example
  * ```tsx
  * <TimelineIndicator />
+ * <TimelineIndicator aria-label="Completed">✓</TimelineIndicator>
  * ```
  */
-export declare const TimelineIndicator: React.ForwardRefExoticComponent<Omit<TimelineIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimelineIndicator: {
+    ({ ref: forwardedRef, ...props }: TimelineIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineIndicator.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import type { TimelineIndicatorProps } from './types.js';
 /**
- * The dot/icon marker for a {@link TimelineItem}: renders a plain `<div>`.
+ * The dot/icon marker for a {@link TimelineItem}, decorative and `aria-hidden` by default until given children.
  *
  * @example
  * ```tsx
  * <TimelineIndicator />
+ * <TimelineIndicator aria-label="Completed">✓</TimelineIndicator>
  * ```
  */
-export declare const TimelineIndicator: React.ForwardRefExoticComponent<Omit<TimelineIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimelineIndicator: {
+    ({ ref: forwardedRef, ...props }: TimelineIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineItem.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TimelineItemProps } from './types.cjs';
 /**
- * A single `<li>` entry in the timeline, typically composing a
- * `TimelineIndicator`, an optional `TimelineSeparator`, and `TimelineContent`.
- *
+ * A single `<li role="listitem">` entry in the timeline; `role` is explicit since `display: grid` loses the implicit role in Safari/VoiceOver.
  * @example
  * ```tsx
  * <TimelineItem>
@@ -12,4 +10,7 @@ import type { TimelineItemProps } from './types.cjs';
  * </TimelineItem>
  * ```
  */
-export declare const TimelineItem: React.ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export declare const TimelineItem: {
+    ({ state, ref: forwardedRef, ...props }: TimelineItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineItem.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TimelineItemProps } from './types.js';
 /**
- * A single `<li>` entry in the timeline, typically composing a
- * `TimelineIndicator`, an optional `TimelineSeparator`, and `TimelineContent`.
- *
+ * A single `<li role="listitem">` entry in the timeline; `role` is explicit since `display: grid` loses the implicit role in Safari/VoiceOver.
  * @example
  * ```tsx
  * <TimelineItem>
@@ -12,4 +10,7 @@ import type { TimelineItemProps } from './types.js';
  * </TimelineItem>
  * ```
  */
-export declare const TimelineItem: React.ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export declare const TimelineItem: {
+    ({ state, ref: forwardedRef, ...props }: TimelineItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineOpposite.d.cts

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import type { TimelineOppositeProps } from './types.cjs';
+/**
+ * Metadata opposite the event on a {@link TimelineItem}, rendered in a dedicated grid column before `TimelineIndicator`.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineOpposite>09:41</TimelineOpposite>
+ *   <TimelineIndicator />
+ *   <TimelineSeparator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineOpposite: {
+    ({ ref: forwardedRef, ...props }: TimelineOppositeProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineOpposite.d.ts

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import type { TimelineOppositeProps } from './types.js';
+/**
+ * Metadata opposite the event on a {@link TimelineItem}, rendered in a dedicated grid column before `TimelineIndicator`.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineOpposite>09:41</TimelineOpposite>
+ *   <TimelineIndicator />
+ *   <TimelineSeparator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineOpposite: {
+    ({ ref: forwardedRef, ...props }: TimelineOppositeProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineSeparator.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TimelineSeparatorProps } from './types.cjs';
 /**
- * The connecting line between two {@link TimelineItem}s: renders a
- * `<div role="presentation" aria-hidden="true">` — decorative, hidden from
- * assistive tech.
+ * Connecting line between {@link TimelineItem}s: decorative, hidden from assistive tech via `role="presentation"` and `aria-hidden="true"`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ import type { TimelineSeparatorProps } from './types.cjs';
  * </TimelineItem>
  * ```
  */
-export declare const TimelineSeparator: React.ForwardRefExoticComponent<Omit<TimelineSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimelineSeparator: {
+    ({ ref: forwardedRef, ...props }: TimelineSeparatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/TimelineSeparator.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TimelineSeparatorProps } from './types.js';
 /**
- * The connecting line between two {@link TimelineItem}s: renders a
- * `<div role="presentation" aria-hidden="true">` — decorative, hidden from
- * assistive tech.
+ * Connecting line between {@link TimelineItem}s: decorative, hidden from assistive tech via `role="presentation"` and `aria-hidden="true"`.
  *
  * @example
  * ```tsx
@@ -14,4 +12,7 @@ import type { TimelineSeparatorProps } from './types.js';
  * </TimelineItem>
  * ```
  */
-export declare const TimelineSeparator: React.ForwardRefExoticComponent<Omit<TimelineSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TimelineSeparator: {
+    ({ ref: forwardedRef, ...props }: TimelineSeparatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/timeline/index.d.cts

@@ -1,6 +1,2 @@
-export * from './Timeline.cjs';
-export { TimelineItem } from './TimelineItem.cjs';
-export { TimelineIndicator } from './TimelineIndicator.cjs';
-export { TimelineSeparator } from './TimelineSeparator.cjs';
-export { TimelineContent } from './TimelineContent.cjs';
-export type { TimelineProps, TimelineItemProps, TimelineIndicatorProps, TimelineSeparatorProps, TimelineContentProps, } from './types.cjs';
+export { Timeline } from './Timeline.cjs';
+export type { TimelineProps, TimelineItem } from './types.cjs';

package/dist/timeline/index.d.ts

@@ -1,6 +1,2 @@
-export * from './Timeline.js';
-export { TimelineItem } from './TimelineItem.js';
-export { TimelineIndicator } from './TimelineIndicator.js';
-export { TimelineSeparator } from './TimelineSeparator.js';
-export { TimelineContent } from './TimelineContent.js';
-export type { TimelineProps, TimelineItemProps, TimelineIndicatorProps, TimelineSeparatorProps, TimelineContentProps, } from './types.js';
+export { Timeline } from './Timeline.js';
+export type { TimelineProps, TimelineItem } from './types.js';

package/dist/timeline/primitives.d.cts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `Timeline` — the parts the recipe composes, for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Timeline, TimelineContent, TimelineIndicator, TimelineItem, TimelineOpposite, TimelineSeparator } from '@skdx/react/primitives/timeline';
+ *
+ * <Timeline>
+ *   <TimelineItem>
+ *     <TimelineOpposite>09:41</TimelineOpposite>
+ *     <TimelineIndicator />
+ *     <TimelineSeparator />
+ *     <TimelineContent>Order placed</TimelineContent>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
+export { Timeline } from './Timeline.cjs';
+export { TimelineItem } from './TimelineItem.cjs';
+export { TimelineIndicator } from './TimelineIndicator.cjs';
+export { TimelineSeparator } from './TimelineSeparator.cjs';
+export { TimelineContent } from './TimelineContent.cjs';
+export { TimelineOpposite } from './TimelineOpposite.cjs';
+export type { TimelineProps, TimelineItemProps, TimelineIndicatorProps, TimelineSeparatorProps, TimelineContentProps, TimelineOppositeProps, } from './types.cjs';

package/dist/timeline/primitives.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `Timeline` — the parts the recipe composes, for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Timeline, TimelineContent, TimelineIndicator, TimelineItem, TimelineOpposite, TimelineSeparator } from '@skdx/react/primitives/timeline';
+ *
+ * <Timeline>
+ *   <TimelineItem>
+ *     <TimelineOpposite>09:41</TimelineOpposite>
+ *     <TimelineIndicator />
+ *     <TimelineSeparator />
+ *     <TimelineContent>Order placed</TimelineContent>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
+export { Timeline } from './Timeline.js';
+export { TimelineItem } from './TimelineItem.js';
+export { TimelineIndicator } from './TimelineIndicator.js';
+export { TimelineSeparator } from './TimelineSeparator.js';
+export { TimelineContent } from './TimelineContent.js';
+export { TimelineOpposite } from './TimelineOpposite.js';
+export type { TimelineProps, TimelineItemProps, TimelineIndicatorProps, TimelineSeparatorProps, TimelineContentProps, TimelineOppositeProps, } from './types.js';

package/dist/timeline/types.d.cts

@@ -1,15 +1,61 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** One entry of {@link TimelineProps.items} — a single event on the timeline. */
+export interface TimelineItem {
+    /** The event's body, rendered into the derived `TimelineContent`. */
+    content: React.ReactNode;
+    /**
+     * Metadata on the far side of the marker — a timestamp, an actor, an
+     * elapsed time — rendered into the derived `TimelineOpposite`.
+     * @default undefined — no opposite region is rendered.
+     */
+    opposite?: React.ReactNode | undefined;
+    /**
+     * What goes inside the derived `TimelineIndicator`; a childless indicator stays decorative and `aria-hidden`, while one with content needs `indicatorLabel`.
+     * @default undefined — a bare, decorative marker.
+     */
+    indicator?: React.ReactNode | undefined;
+    /**
+     * Accessible name for a non-decorative `indicator`.
+     * @default undefined — the indicator's own text names it.
+     */
+    indicatorLabel?: string | undefined;
+    /**
+     * Where the event sits in the sequence: complete, current, or pending.
+     * @default undefined — rendered without a state.
+     */
+    state?: 'complete' | 'current' | 'pending' | undefined;
+}
 /** Props for the {@link Timeline} root. */
 export interface TimelineProps extends PrimitivePropsWithRef<'ol'> {
     /**
-     * Layout axis, exposed as `data-orientation`. Purely a styling hook — this
-     * component sets no ARIA orientation and does no keyboard handling.
+     * Events rendered into derived parts per entry; ignored with `children`.
+     * @default undefined
+     */
+    items?: TimelineItem[] | undefined;
+    /**
+     * Render custom body for each item's `content`; ignored with `children`.
+     * @default undefined
+     */
+    renderContent?: ((item: TimelineItem) => React.ReactNode) | undefined;
+    /**
+     * Layout axis, exposed as `data-orientation` — purely a styling hook.
      * @default 'vertical'
      */
-    orientation?: 'vertical' | 'horizontal';
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * Which side of the rail the skin lays the entries out on, mirrored to `data-align`.
+     * @default undefined — the skin's own default alignment.
+     */
+    align?: 'end' | 'alternate' | (string & {}) | undefined;
 }
 /** Props for a single {@link TimelineItem} entry. */
 export interface TimelineItemProps extends PrimitivePropsWithRef<'li'> {
+    /**
+     * Where the event sits in the sequence, mirrored to `data-state` for the skin.
+     * @default undefined — rendered without a state.
+     */
+    state?: 'complete' | 'current' | 'pending' | undefined;
 }
 /** Props for {@link TimelineIndicator}, the dot/icon marker for a `TimelineItem`. */
 export interface TimelineIndicatorProps extends PrimitivePropsWithRef<'div'> {
@@ -20,3 +66,9 @@ export interface TimelineSeparatorProps extends PrimitivePropsWithRef<'div'> {
 /** Props for {@link TimelineContent}, the body content of a `TimelineItem`. */
 export interface TimelineContentProps extends PrimitivePropsWithRef<'div'> {
 }
+/**
+ * Props for {@link TimelineOpposite}, the metadata region on the far side of a
+ * `TimelineItem`'s marker — a timestamp, an actor, an elapsed time.
+ */
+export interface TimelineOppositeProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/timeline/types.d.ts

@@ -1,15 +1,61 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** One entry of {@link TimelineProps.items} — a single event on the timeline. */
+export interface TimelineItem {
+    /** The event's body, rendered into the derived `TimelineContent`. */
+    content: React.ReactNode;
+    /**
+     * Metadata on the far side of the marker — a timestamp, an actor, an
+     * elapsed time — rendered into the derived `TimelineOpposite`.
+     * @default undefined — no opposite region is rendered.
+     */
+    opposite?: React.ReactNode | undefined;
+    /**
+     * What goes inside the derived `TimelineIndicator`; a childless indicator stays decorative and `aria-hidden`, while one with content needs `indicatorLabel`.
+     * @default undefined — a bare, decorative marker.
+     */
+    indicator?: React.ReactNode | undefined;
+    /**
+     * Accessible name for a non-decorative `indicator`.
+     * @default undefined — the indicator's own text names it.
+     */
+    indicatorLabel?: string | undefined;
+    /**
+     * Where the event sits in the sequence: complete, current, or pending.
+     * @default undefined — rendered without a state.
+     */
+    state?: 'complete' | 'current' | 'pending' | undefined;
+}
 /** Props for the {@link Timeline} root. */
 export interface TimelineProps extends PrimitivePropsWithRef<'ol'> {
     /**
-     * Layout axis, exposed as `data-orientation`. Purely a styling hook — this
-     * component sets no ARIA orientation and does no keyboard handling.
+     * Events rendered into derived parts per entry; ignored with `children`.
+     * @default undefined
+     */
+    items?: TimelineItem[] | undefined;
+    /**
+     * Render custom body for each item's `content`; ignored with `children`.
+     * @default undefined
+     */
+    renderContent?: ((item: TimelineItem) => React.ReactNode) | undefined;
+    /**
+     * Layout axis, exposed as `data-orientation` — purely a styling hook.
      * @default 'vertical'
      */
-    orientation?: 'vertical' | 'horizontal';
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * Which side of the rail the skin lays the entries out on, mirrored to `data-align`.
+     * @default undefined — the skin's own default alignment.
+     */
+    align?: 'end' | 'alternate' | (string & {}) | undefined;
 }
 /** Props for a single {@link TimelineItem} entry. */
 export interface TimelineItemProps extends PrimitivePropsWithRef<'li'> {
+    /**
+     * Where the event sits in the sequence, mirrored to `data-state` for the skin.
+     * @default undefined — rendered without a state.
+     */
+    state?: 'complete' | 'current' | 'pending' | undefined;
 }
 /** Props for {@link TimelineIndicator}, the dot/icon marker for a `TimelineItem`. */
 export interface TimelineIndicatorProps extends PrimitivePropsWithRef<'div'> {
@@ -20,3 +66,9 @@ export interface TimelineSeparatorProps extends PrimitivePropsWithRef<'div'> {
 /** Props for {@link TimelineContent}, the body content of a `TimelineItem`. */
 export interface TimelineContentProps extends PrimitivePropsWithRef<'div'> {
 }
+/**
+ * Props for {@link TimelineOpposite}, the metadata region on the far side of a
+ * `TimelineItem`'s marker — a timestamp, an actor, an elapsed time.
+ */
+export interface TimelineOppositeProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/toast/Toast.cjs

@@ -1 +1,2 @@
-"use strict";var wt=Object.create;var O=Object.defineProperty;var Et=Object.getOwnPropertyDescriptor;var Ct=Object.getOwnPropertyNames;var bt=Object.getPrototypeOf,gt=Object.prototype.hasOwnProperty;var ht=(t,e)=>{for(var n in e)O(t,n,{get:e[n],enumerable:!0})},z=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Ct(e))!gt.call(t,i)&&i!==n&&O(t,i,{get:()=>e[i],enumerable:!(o=Et(e,i))||o.enumerable});return t};var P=(t,e,n)=>(n=t!=null?wt(bt(t)):{},z(e||!t||!t.__esModule?O(n,"default",{value:t,enumerable:!0}):n,t)),Lt=t=>z(O({},"__esModule",{value:!0}),t);var Ht={};ht(Ht,{DEFAULT_TOAST_DURATION:()=>Y,Toast:()=>V,ToastAction:()=>M,ToastClose:()=>A,ToastDescription:()=>H,ToastImplProvider:()=>j,ToastProvider:()=>L,ToastTitle:()=>N,ToastViewport:()=>D,Toaster:()=>q,createToaster:()=>xt,useToastContext:()=>k,useToaster:()=>$});module.exports=Lt(Ht);var m=P(require("react"),1),J=require("../utils/composeRefs.cjs"),Q=require("../utils/createContext.cjs"),W=require("../utils/part.cjs"),R=require("../utils/primitive.cjs"),X=require("../utils/useCallbackRef.cjs"),Z=require("../utils/useControllableState.cjs");var C=P(require("react"),1),G=require("../utils/createContext.cjs"),B=require("../utils/visuallyHidden.cjs"),h=require("react/jsx-runtime"),[kt,S]=(0,G.createSafeContext)("ToastProvider");function L({children:t,label:e="Notification",duration:n=5e3}){let o=C.useRef(null),i=C.useRef(null),r=C.useRef(null),c=C.useCallback((u,p)=>{let f=p==="assertive"?r.current:i.current;!f||!u||(f.textContent="",window.setTimeout(()=>{f.textContent=u},0))},[]);return(0,h.jsxs)(kt,{label:e,duration:n,viewportRef:o,announce:c,children:[t,(0,h.jsx)(B.VisuallyHidden,{ref:i,"aria-live":"polite","aria-atomic":"true","data-skdx-toast-announcer":"polite"}),(0,h.jsx)(B.VisuallyHidden,{ref:r,"aria-live":"assertive","aria-atomic":"true","data-skdx-toast-announcer":"assertive"})]})}L.displayName="ToastProvider";var K=require("react/jsx-runtime"),[j,k]=(0,Q.createSafeContext)("Toast"),V=m.forwardRef(({open:t,defaultOpen:e=!0,onOpenChange:n,duration:o,type:i="foreground",...r},c)=>{let u=S("Toast"),[p=!0,f]=(0,Z.useControllableState)({prop:t,defaultProp:e,onChange:n}),b=o??u.duration,E=(0,X.useCallbackRef)(()=>f(!1)),w=m.useRef(0),y=m.useRef(b),g=m.useRef(0),I=m.useRef(null),l=(0,J.useComposedRefs)(c,I);m.useEffect(()=>{if(!p)return;let T=I.current?.textContent??"";u.announce(T,i==="foreground"?"assertive":"polite")},[p]);let s=m.useCallback(()=>{Number.isFinite(y.current)&&(window.clearTimeout(w.current),g.current=Date.now(),w.current=window.setTimeout(E,y.current))},[E]),a=m.useCallback(()=>{window.clearTimeout(w.current),y.current-=Date.now()-g.current,g.current=Date.now()},[]);return m.useEffect(()=>{if(!p)return;y.current=b,s();let T=()=>{document.hidden?a():s()};return document.addEventListener("visibilitychange",T),window.addEventListener("pagehide",a),()=>{window.clearTimeout(w.current),document.removeEventListener("visibilitychange",T),window.removeEventListener("pagehide",a)}},[p,b,s,a]),p?(0,K.jsx)(j,{onClose:E,children:(0,K.jsx)(R.Primitive.div,{role:"status","data-state":p?"open":"closed",tabIndex:0,...r,...(0,W.skdxPart)("toast","root",r.className),ref:l,onPointerEnter:(0,R.composeEventHandlers)(r.onPointerEnter,a),onPointerLeave:(0,R.composeEventHandlers)(r.onPointerLeave,s),onFocus:(0,R.composeEventHandlers)(r.onFocus,a),onBlur:(0,R.composeEventHandlers)(r.onBlur,s),onKeyDown:(0,R.composeEventHandlers)(r.onKeyDown,T=>{T.key==="Escape"&&E()})})}):null});V.displayName="Toast";var x=P(require("react"),1),ot=require("../utils/part.cjs"),rt=require("../utils/portal.cjs"),nt=require("../utils/primitive.cjs");function tt(t){let e=document.activeElement;for(;e;){if(t.contains(e))return!0;e=e.shadowRoot?.activeElement??null}return!1}function et(t){let e=null,n=()=>{let c=e;e=null,c?.isConnected&&c.focus()},o=c=>{let u=c.composedPath();if(u.includes(t))return;let p=u[0];p instanceof HTMLElement&&(e=p)},i=c=>{c.key==="F6"&&(c.preventDefault(),c.shiftKey?n():tt(t)||t.focus())},r=c=>{c.relatedTarget||window.setTimeout(()=>{tt(t)||n()},0)};return document.addEventListener("focusin",o),document.addEventListener("keydown",i),t.addEventListener("focusout",r),()=>{document.removeEventListener("focusin",o),document.removeEventListener("keydown",i),t.removeEventListener("focusout",r)}}var U=require("react/jsx-runtime"),D=x.forwardRef((t,e)=>{let n=S("ToastViewport"),{viewportRef:o}=n,[i,r]=x.useState(null);x.useEffect(()=>{if(i)return et(i)},[i]);let c=x.useCallback(u=>{o.current=u,r(u),typeof e=="function"?e(u):e&&(e.current=u)},[o,e]);return(0,U.jsx)(rt.Portal,{asChild:!0,children:(0,U.jsx)(nt.Primitive.div,{role:"region","aria-label":n.label,tabIndex:-1,...t,...(0,ot.skdxPart)("toast","viewport",t.className),ref:c,style:{position:"fixed",...t.style}})})});D.displayName="ToastViewport";var st=P(require("react"),1),it=require("../utils/part.cjs"),at=require("../utils/primitive.cjs"),ct=require("react/jsx-runtime"),N=st.forwardRef((t,e)=>(0,ct.jsx)(at.Primitive.div,{...t,...(0,it.skdxPart)("toast","title",t.className),ref:e}));N.displayName="ToastTitle";var lt=P(require("react"),1),ut=require("../utils/part.cjs"),Tt=require("../utils/primitive.cjs"),pt=require("react/jsx-runtime"),H=lt.forwardRef((t,e)=>(0,pt.jsx)(Tt.Primitive.div,{...t,...(0,ut.skdxPart)("toast","description",t.className),ref:e}));H.displayName="ToastDescription";var mt=P(require("react"),1),ft=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var dt=require("react/jsx-runtime"),M=mt.forwardRef(({altText:t,...e},n)=>{let o=k("ToastAction");return(0,dt.jsx)(F.Primitive.button,{type:"button","aria-label":t,...e,...(0,ft.skdxPart)("toast","action",e.className),ref:n,onClick:(0,F.composeEventHandlers)(e.onClick,o.onClose)})});M.displayName="ToastAction";var vt=P(require("react"),1),yt=require("../utils/part.cjs"),_=require("../utils/primitive.cjs");var Pt=require("react/jsx-runtime"),A=vt.forwardRef((t,e)=>{let n=k("ToastClose");return(0,Pt.jsx)(_.Primitive.button,{type:"button",...t,...(0,yt.skdxPart)("toast","close",t.className),ref:e,onClick:(0,_.composeEventHandlers)(t.onClick,n.onClose)})});A.displayName="ToastClose";var Rt=P(require("react"),1);var v=require("react/jsx-runtime"),Dt={info:"status",success:"status",loading:"status",warning:"alert",error:"alert"},Nt={info:"background",success:"background",loading:"background",warning:"foreground",error:"foreground"},Y=5e3;function xt(t={}){let{max:e=3,placement:n="bottom-end",duration:o=Y,label:i="Notifications"}=t,r=[],c=new Set,u=[],p=0;function f(){u=r.slice(0,e);for(let l of c)l()}function b(l){return c.add(l),()=>{c.delete(l)}}function E(){return u}function w(l={}){let s=l.id??`skdx-toast-${++p}`,a=r.findIndex(d=>d.id===s),T={type:"info",...l,id:s,revision:a<0?0:r[a].revision+1};return a<0?r.push(T):r[a]=T,f(),s}function y(l,s){let a=r.findIndex(d=>d.id===l);if(a<0)return;let T=r[a];r[a]={...T,...s,id:l,revision:T.revision+1},f()}function g(l){if(l===void 0){if(r.length===0)return;r.length=0}else{let s=r.findIndex(a=>a.id===l);if(s<0)return;r.splice(s,1)}f()}function I(l,s,a={}){let T=w({...a,...s.loading,type:"loading"});return l.then(d=>(y(T,{duration:void 0,...a,...typeof s.success=="function"?s.success(d):s.success,type:"success"}),d),d=>{throw y(T,{duration:void 0,...a,...typeof s.error=="function"?s.error(d):s.error,type:"error"}),d})}return{max:e,placement:n,duration:o,label:i,subscribe:b,getToasts:E,create:w,update:y,dismiss:g,promise:I}}function $(t){return Rt.useSyncExternalStore(t.subscribe,t.getToasts,t.getToasts)}function q({toaster:t,...e}){let n=$(t);return(0,v.jsx)(L,{label:t.label,duration:t.duration,children:(0,v.jsx)(D,{"data-placement":t.placement,...e,children:n.map(o=>(0,v.jsxs)(V,{role:Dt[o.type],type:Nt[o.type],duration:o.duration??(o.type==="loading"?1/0:void 0),"data-type":o.type,onOpenChange:i=>{i||t.dismiss(o.id)},children:[o.title?(0,v.jsx)(N,{children:o.title}):null,o.description?(0,v.jsx)(H,{children:o.description}):null,o.action?(0,v.jsx)(M,{altText:o.action.altText,onClick:o.action.onClick,children:o.action.label}):null,(0,v.jsx)(A,{"aria-label":o.closeLabel??"Dismiss",children:"\xD7"})]},`${o.id}:${o.revision}`))})})}q.displayName="Toaster";0&&(module.exports={DEFAULT_TOAST_DURATION,Toast,ToastAction,ToastClose,ToastDescription,ToastImplProvider,ToastProvider,ToastTitle,ToastViewport,Toaster,createToaster,useToastContext,useToaster});
+'use client';
+"use strict";var rt=Object.create;var F=Object.defineProperty;var nt=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var it=Object.getPrototypeOf,at=Object.prototype.hasOwnProperty;var ct=(e,t)=>{for(var r in t)F(e,r,{get:t[r],enumerable:!0})},ue=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of st(t))!at.call(e,i)&&i!==r&&F(e,i,{get:()=>t[i],enumerable:!(o=nt(t,i))||o.enumerable});return e};var I=(e,t,r)=>(r=e!=null?rt(it(e)):{},ue(t||!e||!e.__esModule?F(r,"default",{value:e,enumerable:!0}):r,e)),lt=e=>ue(F({},"__esModule",{value:!0}),e);var Tt={};ct(Tt,{DEFAULT_TOAST_DURATION:()=>te,Toast:()=>V,ToastAction:()=>U,ToastClose:()=>B,ToastDescription:()=>$,ToastImplProvider:()=>xe,ToastProvider:()=>K,ToastProviderImpl:()=>de,ToastTitle:()=>X,ToastViewport:()=>q,Toaster:()=>re,createToaster:()=>_e,useToastContext:()=>g,useToastProviderContext:()=>N,useToaster:()=>oe});module.exports=lt(Tt);var Ve=I(require("react"),1);var p=I(require("react"),1),fe=require("../utils/composeRefs.cjs"),me=require("../utils/createContext.cjs"),Te=require("../utils/direction.cjs"),ye=require("../utils/part.cjs"),x=require("../utils/primitive.cjs"),Pe=require("../utils/timer.cjs"),R=require("../utils/useCallbackRef.cjs"),ve=require("../utils/useControllableState.cjs"),Re=require("../utils/useOpenChangeComplete.cjs");var w=I(require("react"),1),pe=require("../utils/createContext.cjs"),W=require("../utils/visuallyHidden.cjs"),L=require("react/jsx-runtime"),[de,N]=(0,pe.createSafeContext)("ToastProvider");function K({children:e,label:t="Notification",duration:r=5e3,swipeDirection:o="end",swipeThreshold:i=50}){let s=w.useRef(null),v=w.useRef(null),T=w.useRef(null),l=w.useRef(void 0),f=w.useCallback((C,m)=>{let b=m==="assertive"?T.current:v.current;!b||!C||(b.textContent="",clearTimeout(l.current),l.current=setTimeout(()=>{b.textContent=C},0))},[]);return w.useEffect(()=>()=>clearTimeout(l.current),[]),(0,L.jsxs)(de,{label:t,duration:r,swipeDirection:o,swipeThreshold:i,viewportRef:s,announce:f,children:[e,(0,L.jsx)(W.VisuallyHidden,{ref:v,"aria-live":"polite","aria-atomic":"true","data-skdx-toast-announcer":"polite"}),(0,L.jsx)(W.VisuallyHidden,{ref:T,"aria-live":"assertive","aria-atomic":"true","data-skdx-toast-announcer":"assertive"})]})}K.displayName="ToastProvider";var Z=require("react/jsx-runtime");function ut(e,t){if(e!=="start"&&e!=="end")return e;let r=(0,Te.resolveDirection)(t)==="rtl";return e==="start"?r?"right":"left":r?"left":"right"}function pt(e,t,r){return e==="left"?-t:e==="right"?t:e==="up"?-r:r}function A(e,t){e.setAttribute("data-swipe",t)}var[xe,g]=(0,me.createSafeContext)("Toast"),V=({open:e,defaultOpen:t=!0,onOpenChange:r,duration:o,forceMount:i,onOpenChangeComplete:s,onEscapeKeyDown:v,onPause:T,onResume:l,type:f="background",ref:C,...m})=>{let b=N("Toast"),[h=!0,J]=(0,ve.useControllableState)({prop:e,defaultProp:t,onChange:r}),M=o??b.duration,a=(0,R.useCallbackRef)(()=>J(!1)),u=(0,R.useCallbackRef)(v),d=(0,R.useCallbackRef)(T),E=(0,R.useCallbackRef)(l),y=p.useRef(null),S=p.useRef(null),Ue=(0,fe.useComposedRefs)(C,S);(0,Re.useOpenChangeComplete)(h,S,s);let ne=p.useId(),se=p.useId(),[Ye,Be]=p.useState(!1),[$e,Xe]=p.useState(!1),ie=p.useRef(!1),[qe,Je]=p.useState(!1),ze=p.useCallback(n=>{ie.current!==n&&(ie.current=n,Je(n),n?d():E())},[d,E]),ae=(0,R.useCallbackRef)(()=>{let n=S.current?.textContent??"";b.announce(n,f==="foreground"?"assertive":"polite")});p.useEffect(()=>{h&&ae()},[h,ae]);let ce=(0,R.useCallbackRef)(n=>{ze(n.phase==="paused"&&Number.isFinite(n.duration)),n.phase==="complete"&&a()}),z=(0,R.useCallbackRef)(()=>{y.current?.pause()}),O=(0,R.useCallbackRef)(()=>{y.current?.resume()}),k=p.useRef(null),le=p.useRef("right"),Ge=(0,R.useCallbackRef)(n=>{if(!n.isPrimary)return;let c=S.current;if(!c)return;let P=ut(b.swipeDirection,c);le.current=P,k.current={x:n.clientX,y:n.clientY,pointerId:n.pointerId},c.setPointerCapture?.(n.pointerId),A(c,"start"),c.setAttribute("data-swipe-direction",P),z()}),Qe=(0,R.useCallbackRef)(n=>{let c=k.current,P=S.current;if(!c||!P||n.pointerId!==c.pointerId)return;let G=n.clientX-c.x,Q=n.clientY-c.y;A(P,"move"),P.style.setProperty("--skdx-toast-swipe-move-x",`${G}px`),P.style.setProperty("--skdx-toast-swipe-move-y",`${Q}px`)}),We=(0,R.useCallbackRef)(n=>{let c=k.current,P=S.current;if(!c||!P||n.pointerId!==c.pointerId)return;k.current=null,P.releasePointerCapture?.(n.pointerId);let G=n.clientX-c.x,Q=n.clientY-c.y;pt(le.current,G,Q)>=b.swipeThreshold?(A(P,"end"),a()):(A(P,"cancel"),P.style.removeProperty("--skdx-toast-swipe-move-x"),P.style.removeProperty("--skdx-toast-swipe-move-y"),O())}),Ze=(0,R.useCallbackRef)(n=>{let c=S.current;!k.current||k.current.pointerId!==n.pointerId||(k.current=null,c?.releasePointerCapture?.(n.pointerId),c&&A(c,"cancel"),c?.style.removeProperty("--skdx-toast-swipe-move-x"),c?.style.removeProperty("--skdx-toast-swipe-move-y"),O())});p.useEffect(()=>{if(!h)return;let n=new Pe.Timer({duration:M,onPhaseChange:ce});return y.current=n,n.start(),()=>{n.destroy(),y.current=null}},[h,M,ce]);let je=(0,x.useComposedEventHandlers)(m.onPointerEnter,z),et=(0,x.useComposedEventHandlers)(m.onPointerLeave,O),tt=(0,x.useComposedEventHandlers)(m.onFocus,z),ot=(0,x.useComposedEventHandlers)(m.onBlur,O);return i||h?(0,Z.jsx)(xe,{onClose:a,titleId:ne,descriptionId:se,setHasTitle:Be,setHasDescription:Xe,children:(0,Z.jsx)(x.Primitive.div,{"data-state":h?"open":"closed","data-paused":qe?"":void 0,"aria-labelledby":Ye?ne:void 0,"aria-describedby":$e?se:void 0,tabIndex:0,...m,...(0,ye.skdxPart)("toast","root",m.className),ref:Ue,onPointerEnter:je,onPointerLeave:et,onFocus:tt,onBlur:ot,onPointerDown:(0,x.composeEventHandlers)(m.onPointerDown,Ge),onPointerMove:(0,x.composeEventHandlers)(m.onPointerMove,Qe),onPointerUp:(0,x.composeEventHandlers)(m.onPointerUp,We),onPointerCancel:(0,x.composeEventHandlers)(m.onPointerCancel,Ze),onKeyDown:(0,x.composeEventHandlers)(m.onKeyDown,n=>{n.key==="Escape"&&(u(n.nativeEvent),!n.nativeEvent.defaultPrevented&&a())})})}):null};V.displayName="Toast";var Ee=require("../utils/part.cjs"),_=require("../utils/primitive.cjs");var be=require("react/jsx-runtime"),U=({altText:e,ref:t,...r})=>{let o=g("ToastAction");return(0,be.jsx)(_.Primitive.button,{type:"button","aria-label":e,...r,...(0,Ee.skdxPart)("toast","action",r.className),ref:t,onClick:(0,_.composeEventHandlers)(r.onClick,o.onClose)})};U.displayName="ToastAction";var he=require("../utils/part.cjs"),Y=require("../utils/primitive.cjs");var Ce=require("react/jsx-runtime"),B=({ref:e,...t})=>{let r=g("ToastClose"),o=t["aria-label"]!==void 0||t["aria-labelledby"]!==void 0;return(0,Ce.jsx)(Y.Primitive.button,{type:"button","aria-label":o?void 0:"Dismiss",...t,...(0,he.skdxPart)("toast","close",t.className),ref:e,onClick:(0,Y.composeEventHandlers)(t.onClick,r.onClose)})};B.displayName="ToastClose";var we=I(require("react"),1),ge=require("../utils/part.cjs"),De=require("../utils/primitive.cjs");var Se=require("react/jsx-runtime"),$=({ref:e,...t})=>{let r=g("ToastDescription"),{setHasDescription:o}=r;return we.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,Se.jsx)(De.Primitive.div,{id:r.descriptionId,...t,...(0,ge.skdxPart)("toast","description",t.className),ref:e})};$.displayName="ToastDescription";var ke=I(require("react"),1),Ie=require("../utils/part.cjs"),He=require("../utils/primitive.cjs");var Le=require("react/jsx-runtime"),X=({ref:e,...t})=>{let r=g("ToastTitle"),{setHasTitle:o}=r;return ke.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,Le.jsx)(He.Primitive.div,{id:r.titleId,...t,...(0,Ie.skdxPart)("toast","title",t.className),ref:e})};X.displayName="ToastTitle";var H=I(require("react"),1),Oe=require("../utils/part.cjs"),Fe=require("../utils/portal.cjs"),Ke=require("../utils/primitive.cjs");function Ne(e){let t=document.activeElement;for(;t;){if(e.contains(t))return!0;t=t.shadowRoot?.activeElement??null}return!1}var j=["F6"];function dt(e,t){let r=t[t.length-1];if(r===void 0||e.key!==r)return!1;let o=t.slice(0,-1).map(i=>i.toLowerCase());return o.includes("alt")===e.altKey&&o.includes("control")===e.ctrlKey&&o.includes("meta")===e.metaKey}function Ae(e){return e.join("+")}function Me(e,t=j){let r=null,o,i=()=>{let l=r;r=null,l?.isConnected&&l.focus()},s=l=>{let f=l.composedPath();if(f.includes(e))return;let C=f[0];C instanceof HTMLElement&&(r=C)},v=l=>{dt(l,t)&&(l.preventDefault(),l.shiftKey?i():Ne(e)||e.focus())},T=l=>{l.relatedTarget||(o=setTimeout(()=>{Ne(e)||i()},0))};return document.addEventListener("focusin",s),document.addEventListener("keydown",v),e.addEventListener("focusout",T),()=>{document.removeEventListener("focusin",s),document.removeEventListener("keydown",v),e.removeEventListener("focusout",T),clearTimeout(o)}}var ee=require("react/jsx-runtime"),q=({hotkey:e=j,ref:t,...r})=>{let o=N("ToastViewport"),{viewportRef:i}=o,[s,v]=H.useState(null),T=Ae(e);H.useEffect(()=>{if(s)return Me(s,T.split("+"))},[s,T]);let l=H.useCallback(f=>{i.current=f,v(f),typeof t=="function"?t(f):t&&(t.current=f)},[i,t]);return(0,ee.jsx)(Fe.Portal,{asChild:!0,children:(0,ee.jsx)(Ke.Primitive.div,{role:"region","aria-label":`${o.label} (${T})`,tabIndex:-1,...r,...(0,Oe.skdxPart)("toast","viewport",r.className),ref:l,style:{position:"fixed",...r.style}})})};q.displayName="ToastViewport";var D=require("react/jsx-runtime"),ft={info:"background",success:"background",loading:"background",warning:"foreground",error:"foreground"},mt={info:"info",success:"success",loading:"neutral",warning:"warning",error:"danger"},te=5e3;function _e(e={}){let{max:t=3,placement:r="bottom-end",duration:o=te,label:i="Notifications"}=e,s=[],v=new Set,T=[],l=0;function f(){T=s.slice(0,t);for(let a of v)a()}function C(a){return v.add(a),()=>{v.delete(a)}}function m(){return T}function b(a={}){let u=a.id??`skdx-toast-${++l}`,d=s.findIndex(y=>y.id===u),E={...a,type:a.type??"info",id:u,revision:d<0?0:s[d].revision+1};return d<0?s.push(E):s[d]=E,f(),u}function h(a,u){let d=s.findIndex(y=>y.id===a);if(d<0)return;let E=s[d];s[d]={...E,...u,type:u.type??E.type,id:a,revision:E.revision+1},f()}function J(a){if(a===void 0){if(s.length===0)return;s.length=0}else{let u=s.findIndex(d=>d.id===a);if(u<0)return;s.splice(u,1)}f()}function M(a,u,d={}){let E=b({...d,...u.loading,type:"loading"});return a.then(y=>(h(E,{duration:void 0,...d,...typeof u.success=="function"?u.success(y):u.success,type:"success"}),y),y=>{throw h(E,{duration:void 0,...d,...typeof u.error=="function"?u.error(y):u.error,type:"error"}),y})}return{max:t,placement:r,duration:o,label:i,subscribe:C,getToasts:m,create:b,update:h,dismiss:J,promise:M}}function oe(e){return Ve.useSyncExternalStore(e.subscribe,e.getToasts,e.getToasts)}function re({toaster:e,...t}){let r=oe(e);return(0,D.jsx)(K,{label:e.label,duration:e.duration,children:(0,D.jsx)(q,{"data-placement":e.placement,...t,children:r.map(o=>(0,D.jsxs)(V,{type:ft[o.type],duration:o.duration??(o.type==="loading"?1/0:void 0),"data-type":o.type,"data-status":mt[o.type],onOpenChange:i=>{i||e.dismiss(o.id)},children:[o.title?(0,D.jsx)(X,{children:o.title}):null,o.description?(0,D.jsx)($,{children:o.description}):null,o.action?(0,D.jsx)(U,{altText:o.action.altText,onClick:o.action.onClick,children:o.action.label}):null,(0,D.jsx)(B,{"aria-label":o.closeLabel??"Dismiss",children:"\xD7"})]},`${o.id}:${o.revision}`))})})}re.displayName="Toaster";0&&(module.exports={DEFAULT_TOAST_DURATION,Toast,ToastAction,ToastClose,ToastDescription,ToastImplProvider,ToastProvider,ToastProviderImpl,ToastTitle,ToastViewport,Toaster,createToaster,useToastContext,useToastProviderContext,useToaster});

package/dist/toast/Toast.d.cts

@@ -1,36 +1,22 @@
 import * as React from 'react';
 import type { ToastContextValue, ToastProps } from './types.cjs';
-export declare const ToastImplProvider: {
-    (props: ToastContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useToastContext: (consumerName: string) => ToastContextValue;
+export declare const ToastImplProvider: React.FC<ToastContextValue & {
+    children: React.ReactNode;
+}>, useToastContext: (consumerName: string) => ToastContextValue;
 /**
- * A single toast notification: `role="status"` and `data-state`
- * (`open`/`closed`). Must render under a `ToastProvider`. Self-closes after
- * `duration` ms (or the provider's default), pausing the timer while
- * hovered, while focused, and while the page is hidden, and closing
- * immediately on Escape. Pass `role="alert"` to raise an error or warning
- * assertively instead of the default polite `role="status"`. Announces its text
- * content to screen readers via the provider's persistent `aria-live`
- * region on mount/reopen — the toast root itself carries no `aria-live` /
- * `aria-atomic` of its own (beyond the implicit `polite` from
- * `role="status"`), since an explicit live-region attribute set on a node
- * at the same moment it's inserted into the DOM isn't reliably picked up by
- * screen readers, and would risk a second, redundant announcement on the
- * readers that do pick it up. Self-closing and uncontrolled by default —
- * mount one `Toast` per notification and drop it from state in
- * `onOpenChange(false)`.
+ * A single toast notification with `data-state`, self-closing after `duration` (paused on hover/focus/page-hidden) and dismissible via swipe or Escape.
  *
  * @example
  * ```tsx
- * <Toast duration={4000} type="background" onOpenChange={(open) => !open && dismiss(id)}>
+ * <Toast duration={4000} onOpenChange={(open) => !open && dismiss(id)}>
  *   <ToastTitle>Saved</ToastTitle>
  *   <ToastDescription>Your changes have been saved.</ToastDescription>
  *   <ToastAction altText="Undo the save" onClick={undo}>Undo</ToastAction>
- *   <ToastClose aria-label="Dismiss">✕</ToastClose>
+ *   <ToastClose>✕</ToastClose>
  * </Toast>
  * ```
  */
-export declare const Toast: React.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Toast: {
+    ({ open: openProp, defaultOpen, onOpenChange, duration: durationProp, forceMount, onOpenChangeComplete, onEscapeKeyDown, onPause, onResume, type, ref: forwardedRef, ...props }: ToastProps): React.ReactNode;
+    displayName: string;
+};

package/dist/toast/Toast.d.ts

@@ -1,36 +1,22 @@
 import * as React from 'react';
 import type { ToastContextValue, ToastProps } from './types.js';
-export declare const ToastImplProvider: {
-    (props: ToastContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useToastContext: (consumerName: string) => ToastContextValue;
+export declare const ToastImplProvider: React.FC<ToastContextValue & {
+    children: React.ReactNode;
+}>, useToastContext: (consumerName: string) => ToastContextValue;
 /**
- * A single toast notification: `role="status"` and `data-state`
- * (`open`/`closed`). Must render under a `ToastProvider`. Self-closes after
- * `duration` ms (or the provider's default), pausing the timer while
- * hovered, while focused, and while the page is hidden, and closing
- * immediately on Escape. Pass `role="alert"` to raise an error or warning
- * assertively instead of the default polite `role="status"`. Announces its text
- * content to screen readers via the provider's persistent `aria-live`
- * region on mount/reopen — the toast root itself carries no `aria-live` /
- * `aria-atomic` of its own (beyond the implicit `polite` from
- * `role="status"`), since an explicit live-region attribute set on a node
- * at the same moment it's inserted into the DOM isn't reliably picked up by
- * screen readers, and would risk a second, redundant announcement on the
- * readers that do pick it up. Self-closing and uncontrolled by default —
- * mount one `Toast` per notification and drop it from state in
- * `onOpenChange(false)`.
+ * A single toast notification with `data-state`, self-closing after `duration` (paused on hover/focus/page-hidden) and dismissible via swipe or Escape.
  *
  * @example
  * ```tsx
- * <Toast duration={4000} type="background" onOpenChange={(open) => !open && dismiss(id)}>
+ * <Toast duration={4000} onOpenChange={(open) => !open && dismiss(id)}>
  *   <ToastTitle>Saved</ToastTitle>
  *   <ToastDescription>Your changes have been saved.</ToastDescription>
  *   <ToastAction altText="Undo the save" onClick={undo}>Undo</ToastAction>
- *   <ToastClose aria-label="Dismiss">✕</ToastClose>
+ *   <ToastClose>✕</ToastClose>
  * </Toast>
  * ```
  */
-export declare const Toast: React.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Toast: {
+    ({ open: openProp, defaultOpen, onOpenChange, duration: durationProp, forceMount, onOpenChangeComplete, onEscapeKeyDown, onPause, onResume, type, ref: forwardedRef, ...props }: ToastProps): React.ReactNode;
+    displayName: string;
+};

package/dist/toast/Toast.js

@@ -1 +1,2 @@
-import*as m from"react";import{useComposedRefs as Z}from"../utils/composeRefs.js";import{createSafeContext as j}from"../utils/createContext.js";import{skdxPart as tt}from"../utils/part.js";import{composeEventHandlers as b,Primitive as et}from"../utils/primitive.js";import{useCallbackRef as ot}from"../utils/useCallbackRef.js";import{useControllableState as rt}from"../utils/useControllableState.js";import*as x from"react";import{createSafeContext as Q}from"../utils/createContext.js";import{VisuallyHidden as O}from"../utils/visuallyHidden.js";import{jsx as S,jsxs as X}from"react/jsx-runtime";var[W,h]=Q("ToastProvider");function L({children:t,label:e="Notification",duration:a=5e3}){let o=x.useRef(null),u=x.useRef(null),r=x.useRef(null),i=x.useCallback((l,p)=>{let f=p==="assertive"?r.current:u.current;!f||!l||(f.textContent="",window.setTimeout(()=>{f.textContent=l},0))},[]);return X(W,{label:e,duration:a,viewportRef:o,announce:i,children:[t,S(O,{ref:u,"aria-live":"polite","aria-atomic":"true","data-skdx-toast-announcer":"polite"}),S(O,{ref:r,"aria-live":"assertive","aria-atomic":"true","data-skdx-toast-announcer":"assertive"})]})}L.displayName="ToastProvider";import{jsx as V}from"react/jsx-runtime";var[nt,k]=j("Toast"),I=m.forwardRef(({open:t,defaultOpen:e=!0,onOpenChange:a,duration:o,type:u="foreground",...r},i)=>{let l=h("Toast"),[p=!0,f]=rt({prop:t,defaultProp:e,onChange:a}),E=o??l.duration,R=ot(()=>f(!1)),P=m.useRef(0),v=m.useRef(E),C=m.useRef(0),g=m.useRef(null),c=Z(i,g);m.useEffect(()=>{if(!p)return;let T=g.current?.textContent??"";l.announce(T,u==="foreground"?"assertive":"polite")},[p]);let n=m.useCallback(()=>{Number.isFinite(v.current)&&(window.clearTimeout(P.current),C.current=Date.now(),P.current=window.setTimeout(R,v.current))},[R]),s=m.useCallback(()=>{window.clearTimeout(P.current),v.current-=Date.now()-C.current,C.current=Date.now()},[]);return m.useEffect(()=>{if(!p)return;v.current=E,n();let T=()=>{document.hidden?s():n()};return document.addEventListener("visibilitychange",T),window.addEventListener("pagehide",s),()=>{window.clearTimeout(P.current),document.removeEventListener("visibilitychange",T),window.removeEventListener("pagehide",s)}},[p,E,n,s]),p?V(nt,{onClose:R,children:V(et.div,{role:"status","data-state":p?"open":"closed",tabIndex:0,...r,...tt("toast","root",r.className),ref:c,onPointerEnter:b(r.onPointerEnter,s),onPointerLeave:b(r.onPointerLeave,n),onFocus:b(r.onFocus,s),onBlur:b(r.onBlur,n),onKeyDown:b(r.onKeyDown,T=>{T.key==="Escape"&&R()})})}):null});I.displayName="Toast";import*as y from"react";import{skdxPart as st}from"../utils/part.js";import{Portal as it}from"../utils/portal.js";import{Primitive as at}from"../utils/primitive.js";function F(t){let e=document.activeElement;for(;e;){if(t.contains(e))return!0;e=e.shadowRoot?.activeElement??null}return!1}function _(t){let e=null,a=()=>{let i=e;e=null,i?.isConnected&&i.focus()},o=i=>{let l=i.composedPath();if(l.includes(t))return;let p=l[0];p instanceof HTMLElement&&(e=p)},u=i=>{i.key==="F6"&&(i.preventDefault(),i.shiftKey?a():F(t)||t.focus())},r=i=>{i.relatedTarget||window.setTimeout(()=>{F(t)||a()},0)};return document.addEventListener("focusin",o),document.addEventListener("keydown",u),t.addEventListener("focusout",r),()=>{document.removeEventListener("focusin",o),document.removeEventListener("keydown",u),t.removeEventListener("focusout",r)}}import{jsx as B}from"react/jsx-runtime";var D=y.forwardRef((t,e)=>{let a=h("ToastViewport"),{viewportRef:o}=a,[u,r]=y.useState(null);y.useEffect(()=>{if(u)return _(u)},[u]);let i=y.useCallback(l=>{o.current=l,r(l),typeof e=="function"?e(l):e&&(e.current=l)},[o,e]);return B(it,{asChild:!0,children:B(at.div,{role:"region","aria-label":a.label,tabIndex:-1,...t,...st("toast","viewport",t.className),ref:i,style:{position:"fixed",...t.style}})})});D.displayName="ToastViewport";import*as K from"react";import{skdxPart as ct}from"../utils/part.js";import{Primitive as lt}from"../utils/primitive.js";import{jsx as ut}from"react/jsx-runtime";var N=K.forwardRef((t,e)=>ut(lt.div,{...t,...ct("toast","title",t.className),ref:e}));N.displayName="ToastTitle";import*as U from"react";import{skdxPart as Tt}from"../utils/part.js";import{Primitive as pt}from"../utils/primitive.js";import{jsx as mt}from"react/jsx-runtime";var H=U.forwardRef((t,e)=>mt(pt.div,{...t,...Tt("toast","description",t.className),ref:e}));H.displayName="ToastDescription";import*as Y from"react";import{skdxPart as ft}from"../utils/part.js";import{composeEventHandlers as dt,Primitive as vt}from"../utils/primitive.js";import{jsx as yt}from"react/jsx-runtime";var M=Y.forwardRef(({altText:t,...e},a)=>{let o=k("ToastAction");return yt(vt.button,{type:"button","aria-label":t,...e,...ft("toast","action",e.className),ref:a,onClick:dt(e.onClick,o.onClose)})});M.displayName="ToastAction";import*as $ from"react";import{skdxPart as Pt}from"../utils/part.js";import{composeEventHandlers as Rt,Primitive as xt}from"../utils/primitive.js";import{jsx as wt}from"react/jsx-runtime";var A=$.forwardRef((t,e)=>{let a=k("ToastClose");return wt(xt.button,{type:"button",...t,...Pt("toast","close",t.className),ref:e,onClick:Rt(t.onClick,a.onClose)})});A.displayName="ToastClose";import*as q from"react";import{jsx as w,jsxs as gt}from"react/jsx-runtime";var Et={info:"status",success:"status",loading:"status",warning:"alert",error:"alert"},Ct={info:"background",success:"background",loading:"background",warning:"foreground",error:"foreground"},z=5e3;function bt(t={}){let{max:e=3,placement:a="bottom-end",duration:o=z,label:u="Notifications"}=t,r=[],i=new Set,l=[],p=0;function f(){l=r.slice(0,e);for(let c of i)c()}function E(c){return i.add(c),()=>{i.delete(c)}}function R(){return l}function P(c={}){let n=c.id??`skdx-toast-${++p}`,s=r.findIndex(d=>d.id===n),T={type:"info",...c,id:n,revision:s<0?0:r[s].revision+1};return s<0?r.push(T):r[s]=T,f(),n}function v(c,n){let s=r.findIndex(d=>d.id===c);if(s<0)return;let T=r[s];r[s]={...T,...n,id:c,revision:T.revision+1},f()}function C(c){if(c===void 0){if(r.length===0)return;r.length=0}else{let n=r.findIndex(s=>s.id===c);if(n<0)return;r.splice(n,1)}f()}function g(c,n,s={}){let T=P({...s,...n.loading,type:"loading"});return c.then(d=>(v(T,{duration:void 0,...s,...typeof n.success=="function"?n.success(d):n.success,type:"success"}),d),d=>{throw v(T,{duration:void 0,...s,...typeof n.error=="function"?n.error(d):n.error,type:"error"}),d})}return{max:e,placement:a,duration:o,label:u,subscribe:E,getToasts:R,create:P,update:v,dismiss:C,promise:g}}function G(t){return q.useSyncExternalStore(t.subscribe,t.getToasts,t.getToasts)}function J({toaster:t,...e}){let a=G(t);return w(L,{label:t.label,duration:t.duration,children:w(D,{"data-placement":t.placement,...e,children:a.map(o=>gt(I,{role:Et[o.type],type:Ct[o.type],duration:o.duration??(o.type==="loading"?1/0:void 0),"data-type":o.type,onOpenChange:u=>{u||t.dismiss(o.id)},children:[o.title?w(N,{children:o.title}):null,o.description?w(H,{children:o.description}):null,o.action?w(M,{altText:o.action.altText,onClick:o.action.onClick,children:o.action.label}):null,w(A,{"aria-label":o.closeLabel??"Dismiss",children:"\xD7"})]},`${o.id}:${o.revision}`))})})}J.displayName="Toaster";export{z as DEFAULT_TOAST_DURATION,I as Toast,M as ToastAction,A as ToastClose,H as ToastDescription,nt as ToastImplProvider,L as ToastProvider,N as ToastTitle,D as ToastViewport,J as Toaster,bt as createToaster,k as useToastContext,G as useToaster};
+'use client';
+import*as le from"react";import*as u from"react";import{useComposedRefs as Le}from"../utils/composeRefs.js";import{createSafeContext as Ne}from"../utils/createContext.js";import{resolveDirection as Ae}from"../utils/direction.js";import{skdxPart as Me}from"../utils/part.js";import{composeEventHandlers as I,Primitive as Oe,useComposedEventHandlers as M}from"../utils/primitive.js";import{Timer as Fe}from"../utils/timer.js";import{useCallbackRef as x}from"../utils/useCallbackRef.js";import{useControllableState as Ke}from"../utils/useControllableState.js";import{useOpenChangeComplete as Ve}from"../utils/useOpenChangeComplete.js";import*as C from"react";import{createSafeContext as ke}from"../utils/createContext.js";import{VisuallyHidden as ee}from"../utils/visuallyHidden.js";import{jsx as te,jsxs as He}from"react/jsx-runtime";var[Ie,A]=ke("ToastProvider");function _({children:e,label:t="Notification",duration:r=5e3,swipeDirection:o="end",swipeThreshold:d=50}){let s=C.useRef(null),v=C.useRef(null),T=C.useRef(null),c=C.useRef(void 0),f=C.useCallback((h,m)=>{let E=m==="assertive"?T.current:v.current;!E||!h||(E.textContent="",clearTimeout(c.current),c.current=setTimeout(()=>{E.textContent=h},0))},[]);return C.useEffect(()=>()=>clearTimeout(c.current),[]),He(Ie,{label:t,duration:r,swipeDirection:o,swipeThreshold:d,viewportRef:s,announce:f,children:[e,te(ee,{ref:v,"aria-live":"polite","aria-atomic":"true","data-skdx-toast-announcer":"polite"}),te(ee,{ref:T,"aria-live":"assertive","aria-atomic":"true","data-skdx-toast-announcer":"assertive"})]})}_.displayName="ToastProvider";import{jsx as oe}from"react/jsx-runtime";function _e(e,t){if(e!=="start"&&e!=="end")return e;let r=Ae(t)==="rtl";return e==="start"?r?"right":"left":r?"left":"right"}function Ue(e,t,r){return e==="left"?-t:e==="right"?t:e==="up"?-r:r}function H(e,t){e.setAttribute("data-swipe",t)}var[Ye,w]=Ne("Toast"),U=({open:e,defaultOpen:t=!0,onOpenChange:r,duration:o,forceMount:d,onOpenChangeComplete:s,onEscapeKeyDown:v,onPause:T,onResume:c,type:f="background",ref:h,...m})=>{let E=A("Toast"),[b=!0,O]=Ke({prop:e,defaultProp:t,onChange:r}),L=o??E.duration,i=x(()=>O(!1)),l=x(v),p=x(T),R=x(c),y=u.useRef(null),g=u.useRef(null),fe=Le(h,g);Ve(b,g,s);let z=u.useId(),G=u.useId(),[me,Te]=u.useState(!1),[ye,Pe]=u.useState(!1),Q=u.useRef(!1),[ve,Re]=u.useState(!1),xe=u.useCallback(n=>{Q.current!==n&&(Q.current=n,Re(n),n?p():R())},[p,R]),W=x(()=>{let n=g.current?.textContent??"";E.announce(n,f==="foreground"?"assertive":"polite")});u.useEffect(()=>{b&&W()},[b,W]);let Z=x(n=>{xe(n.phase==="paused"&&Number.isFinite(n.duration)),n.phase==="complete"&&i()}),F=x(()=>{y.current?.pause()}),N=x(()=>{y.current?.resume()}),D=u.useRef(null),j=u.useRef("right"),Ee=x(n=>{if(!n.isPrimary)return;let a=g.current;if(!a)return;let P=_e(E.swipeDirection,a);j.current=P,D.current={x:n.clientX,y:n.clientY,pointerId:n.pointerId},a.setPointerCapture?.(n.pointerId),H(a,"start"),a.setAttribute("data-swipe-direction",P),F()}),be=x(n=>{let a=D.current,P=g.current;if(!a||!P||n.pointerId!==a.pointerId)return;let K=n.clientX-a.x,V=n.clientY-a.y;H(P,"move"),P.style.setProperty("--skdx-toast-swipe-move-x",`${K}px`),P.style.setProperty("--skdx-toast-swipe-move-y",`${V}px`)}),he=x(n=>{let a=D.current,P=g.current;if(!a||!P||n.pointerId!==a.pointerId)return;D.current=null,P.releasePointerCapture?.(n.pointerId);let K=n.clientX-a.x,V=n.clientY-a.y;Ue(j.current,K,V)>=E.swipeThreshold?(H(P,"end"),i()):(H(P,"cancel"),P.style.removeProperty("--skdx-toast-swipe-move-x"),P.style.removeProperty("--skdx-toast-swipe-move-y"),N())}),Ce=x(n=>{let a=g.current;!D.current||D.current.pointerId!==n.pointerId||(D.current=null,a?.releasePointerCapture?.(n.pointerId),a&&H(a,"cancel"),a?.style.removeProperty("--skdx-toast-swipe-move-x"),a?.style.removeProperty("--skdx-toast-swipe-move-y"),N())});u.useEffect(()=>{if(!b)return;let n=new Fe({duration:L,onPhaseChange:Z});return y.current=n,n.start(),()=>{n.destroy(),y.current=null}},[b,L,Z]);let we=M(m.onPointerEnter,F),ge=M(m.onPointerLeave,N),De=M(m.onFocus,F),Se=M(m.onBlur,N);return d||b?oe(Ye,{onClose:i,titleId:z,descriptionId:G,setHasTitle:Te,setHasDescription:Pe,children:oe(Oe.div,{"data-state":b?"open":"closed","data-paused":ve?"":void 0,"aria-labelledby":me?z:void 0,"aria-describedby":ye?G:void 0,tabIndex:0,...m,...Me("toast","root",m.className),ref:fe,onPointerEnter:we,onPointerLeave:ge,onFocus:De,onBlur:Se,onPointerDown:I(m.onPointerDown,Ee),onPointerMove:I(m.onPointerMove,be),onPointerUp:I(m.onPointerUp,he),onPointerCancel:I(m.onPointerCancel,Ce),onKeyDown:I(m.onKeyDown,n=>{n.key==="Escape"&&(l(n.nativeEvent),!n.nativeEvent.defaultPrevented&&i())})})}):null};U.displayName="Toast";import{skdxPart as Be}from"../utils/part.js";import{composeEventHandlers as $e,Primitive as Xe}from"../utils/primitive.js";import{jsx as qe}from"react/jsx-runtime";var Y=({altText:e,ref:t,...r})=>{let o=w("ToastAction");return qe(Xe.button,{type:"button","aria-label":e,...r,...Be("toast","action",r.className),ref:t,onClick:$e(r.onClick,o.onClose)})};Y.displayName="ToastAction";import{skdxPart as Je}from"../utils/part.js";import{composeEventHandlers as ze,Primitive as Ge}from"../utils/primitive.js";import{jsx as Qe}from"react/jsx-runtime";var B=({ref:e,...t})=>{let r=w("ToastClose"),o=t["aria-label"]!==void 0||t["aria-labelledby"]!==void 0;return Qe(Ge.button,{type:"button","aria-label":o?void 0:"Dismiss",...t,...Je("toast","close",t.className),ref:e,onClick:ze(t.onClick,r.onClose)})};B.displayName="ToastClose";import*as re from"react";import{skdxPart as We}from"../utils/part.js";import{Primitive as Ze}from"../utils/primitive.js";import{jsx as je}from"react/jsx-runtime";var $=({ref:e,...t})=>{let r=w("ToastDescription"),{setHasDescription:o}=r;return re.useEffect(()=>(o(!0),()=>o(!1)),[o]),je(Ze.div,{id:r.descriptionId,...t,...We("toast","description",t.className),ref:e})};$.displayName="ToastDescription";import*as ne from"react";import{skdxPart as et}from"../utils/part.js";import{Primitive as tt}from"../utils/primitive.js";import{jsx as ot}from"react/jsx-runtime";var X=({ref:e,...t})=>{let r=w("ToastTitle"),{setHasTitle:o}=r;return ne.useEffect(()=>(o(!0),()=>o(!1)),[o]),ot(tt.div,{id:r.titleId,...t,...et("toast","title",t.className),ref:e})};X.displayName="ToastTitle";import*as S from"react";import{skdxPart as nt}from"../utils/part.js";import{Portal as st}from"../utils/portal.js";import{Primitive as it}from"../utils/primitive.js";function se(e){let t=document.activeElement;for(;t;){if(e.contains(t))return!0;t=t.shadowRoot?.activeElement??null}return!1}var q=["F6"];function rt(e,t){let r=t[t.length-1];if(r===void 0||e.key!==r)return!1;let o=t.slice(0,-1).map(d=>d.toLowerCase());return o.includes("alt")===e.altKey&&o.includes("control")===e.ctrlKey&&o.includes("meta")===e.metaKey}function ie(e){return e.join("+")}function ae(e,t=q){let r=null,o,d=()=>{let c=r;r=null,c?.isConnected&&c.focus()},s=c=>{let f=c.composedPath();if(f.includes(e))return;let h=f[0];h instanceof HTMLElement&&(r=h)},v=c=>{rt(c,t)&&(c.preventDefault(),c.shiftKey?d():se(e)||e.focus())},T=c=>{c.relatedTarget||(o=setTimeout(()=>{se(e)||d()},0))};return document.addEventListener("focusin",s),document.addEventListener("keydown",v),e.addEventListener("focusout",T),()=>{document.removeEventListener("focusin",s),document.removeEventListener("keydown",v),e.removeEventListener("focusout",T),clearTimeout(o)}}import{jsx as ce}from"react/jsx-runtime";var J=({hotkey:e=q,ref:t,...r})=>{let o=A("ToastViewport"),{viewportRef:d}=o,[s,v]=S.useState(null),T=ie(e);S.useEffect(()=>{if(s)return ae(s,T.split("+"))},[s,T]);let c=S.useCallback(f=>{d.current=f,v(f),typeof t=="function"?t(f):t&&(t.current=f)},[d,t]);return ce(st,{asChild:!0,children:ce(it.div,{role:"region","aria-label":`${o.label} (${T})`,tabIndex:-1,...r,...nt("toast","viewport",r.className),ref:c,style:{position:"fixed",...r.style}})})};J.displayName="ToastViewport";import{jsx as k,jsxs as ut}from"react/jsx-runtime";var at={info:"background",success:"background",loading:"background",warning:"foreground",error:"foreground"},ct={info:"info",success:"success",loading:"neutral",warning:"warning",error:"danger"},ue=5e3;function lt(e={}){let{max:t=3,placement:r="bottom-end",duration:o=ue,label:d="Notifications"}=e,s=[],v=new Set,T=[],c=0;function f(){T=s.slice(0,t);for(let i of v)i()}function h(i){return v.add(i),()=>{v.delete(i)}}function m(){return T}function E(i={}){let l=i.id??`skdx-toast-${++c}`,p=s.findIndex(y=>y.id===l),R={...i,type:i.type??"info",id:l,revision:p<0?0:s[p].revision+1};return p<0?s.push(R):s[p]=R,f(),l}function b(i,l){let p=s.findIndex(y=>y.id===i);if(p<0)return;let R=s[p];s[p]={...R,...l,type:l.type??R.type,id:i,revision:R.revision+1},f()}function O(i){if(i===void 0){if(s.length===0)return;s.length=0}else{let l=s.findIndex(p=>p.id===i);if(l<0)return;s.splice(l,1)}f()}function L(i,l,p={}){let R=E({...p,...l.loading,type:"loading"});return i.then(y=>(b(R,{duration:void 0,...p,...typeof l.success=="function"?l.success(y):l.success,type:"success"}),y),y=>{throw b(R,{duration:void 0,...p,...typeof l.error=="function"?l.error(y):l.error,type:"error"}),y})}return{max:t,placement:r,duration:o,label:d,subscribe:h,getToasts:m,create:E,update:b,dismiss:O,promise:L}}function pe(e){return le.useSyncExternalStore(e.subscribe,e.getToasts,e.getToasts)}function de({toaster:e,...t}){let r=pe(e);return k(_,{label:e.label,duration:e.duration,children:k(J,{"data-placement":e.placement,...t,children:r.map(o=>ut(U,{type:at[o.type],duration:o.duration??(o.type==="loading"?1/0:void 0),"data-type":o.type,"data-status":ct[o.type],onOpenChange:d=>{d||e.dismiss(o.id)},children:[o.title?k(X,{children:o.title}):null,o.description?k($,{children:o.description}):null,o.action?k(Y,{altText:o.action.altText,onClick:o.action.onClick,children:o.action.label}):null,k(B,{"aria-label":o.closeLabel??"Dismiss",children:"\xD7"})]},`${o.id}:${o.revision}`))})})}de.displayName="Toaster";export{ue as DEFAULT_TOAST_DURATION,U as Toast,Y as ToastAction,B as ToastClose,$ as ToastDescription,Ye as ToastImplProvider,_ as ToastProvider,Ie as ToastProviderImpl,X as ToastTitle,J as ToastViewport,de as Toaster,lt as createToaster,w as useToastContext,A as useToastProviderContext,pe as useToaster};