@skdx/react 0.26.0

package/dist/timeline/Timeline.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { TimelineProps } from './types.cjs';
+/**
+ * Root of a timeline: renders an `<ol>` with `data-orientation` for styling.
+ * Purely structural — no ARIA role or keyboard behavior beyond the semantic
+ * list; layout and connecting lines are entirely up to your CSS.
+ *
+ * @example
+ * ```tsx
+ * <Timeline>
+ *   <TimelineItem>
+ *     <TimelineIndicator />
+ *     <TimelineSeparator />
+ *     <TimelineContent>Order placed</TimelineContent>
+ *   </TimelineItem>
+ *   <TimelineItem>
+ *     <TimelineIndicator />
+ *     <TimelineContent>Order shipped</TimelineContent>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
+export declare const Timeline: React.ForwardRefExoticComponent<Omit<TimelineProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/timeline/Timeline.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { TimelineProps } from './types.js';
+/**
+ * Root of a timeline: renders an `<ol>` with `data-orientation` for styling.
+ * Purely structural — no ARIA role or keyboard behavior beyond the semantic
+ * list; layout and connecting lines are entirely up to your CSS.
+ *
+ * @example
+ * ```tsx
+ * <Timeline>
+ *   <TimelineItem>
+ *     <TimelineIndicator />
+ *     <TimelineSeparator />
+ *     <TimelineContent>Order placed</TimelineContent>
+ *   </TimelineItem>
+ *   <TimelineItem>
+ *     <TimelineIndicator />
+ *     <TimelineContent>Order shipped</TimelineContent>
+ *   </TimelineItem>
+ * </Timeline>
+ * ```
+ */
+export declare const Timeline: React.ForwardRefExoticComponent<Omit<TimelineProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/timeline/Timeline.js

@@ -0,0 +1 @@
+import*as t from"react";import{skdxPart as T}from"../utils/part.js";import{Primitive as d}from"../utils/primitive.js";import{jsx as c}from"react/jsx-runtime";var P=t.forwardRef(({orientation:e="vertical",...i},f)=>c(d.ol,{"data-orientation":e,...i,...T("timeline","root",i.className),ref:f}));P.displayName="Timeline";import*as r from"react";import{skdxPart as y}from"../utils/part.js";import{Primitive as R}from"../utils/primitive.js";import{jsx as I}from"react/jsx-runtime";var o=r.forwardRef((e,i)=>I(R.li,{...e,...y("timeline","item",e.className),ref:i}));o.displayName="TimelineItem";import*as m from"react";import{skdxPart as v}from"../utils/part.js";import{Primitive as x}from"../utils/primitive.js";import{jsx as N}from"react/jsx-runtime";var a=m.forwardRef((e,i)=>N(x.div,{...e,...v("timeline","indicator",e.className),ref:i}));a.displayName="TimelineIndicator";import*as n from"react";import{skdxPart as L}from"../utils/part.js";import{Primitive as C}from"../utils/primitive.js";import{jsx as S}from"react/jsx-runtime";var p=n.forwardRef((e,i)=>S(C.div,{role:"presentation","aria-hidden":"true",...e,...L("timeline","separator",e.className),ref:i}));p.displayName="TimelineSeparator";import*as l from"react";import{skdxPart as k}from"../utils/part.js";import{Primitive as w}from"../utils/primitive.js";import{jsx as E}from"react/jsx-runtime";var s=l.forwardRef((e,i)=>E(w.div,{...e,...k("timeline","content",e.className),ref:i}));s.displayName="TimelineContent";export{P as Timeline,s as TimelineContent,a as TimelineIndicator,o as TimelineItem,p as TimelineSeparator};

package/dist/timeline/TimelineContent.d.cts

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

package/dist/timeline/TimelineContent.d.ts

@@ -0,0 +1,12 @@
+import * 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>`.
+ *
+ * @example
+ * ```tsx
+ * <TimelineContent>Order placed on Jan 1</TimelineContent>
+ * ```
+ */
+export declare const TimelineContent: React.ForwardRefExoticComponent<Omit<TimelineContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineIndicator.d.cts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { TimelineIndicatorProps } from './types.cjs';
+/**
+ * The dot/icon marker for a {@link TimelineItem}: renders a plain `<div>`.
+ *
+ * @example
+ * ```tsx
+ * <TimelineIndicator />
+ * ```
+ */
+export declare const TimelineIndicator: React.ForwardRefExoticComponent<Omit<TimelineIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineIndicator.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { TimelineIndicatorProps } from './types.js';
+/**
+ * The dot/icon marker for a {@link TimelineItem}: renders a plain `<div>`.
+ *
+ * @example
+ * ```tsx
+ * <TimelineIndicator />
+ * ```
+ */
+export declare const TimelineIndicator: React.ForwardRefExoticComponent<Omit<TimelineIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineItem.d.cts

@@ -0,0 +1,15 @@
+import * 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`.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineIndicator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineItem: React.ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/timeline/TimelineItem.d.ts

@@ -0,0 +1,15 @@
+import * 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`.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineIndicator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineItem: React.ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/timeline/TimelineSeparator.d.cts

@@ -0,0 +1,17 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineIndicator />
+ *   <TimelineSeparator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineSeparator: React.ForwardRefExoticComponent<Omit<TimelineSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/TimelineSeparator.d.ts

@@ -0,0 +1,17 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <TimelineItem>
+ *   <TimelineIndicator />
+ *   <TimelineSeparator />
+ *   <TimelineContent>Order placed</TimelineContent>
+ * </TimelineItem>
+ * ```
+ */
+export declare const TimelineSeparator: React.ForwardRefExoticComponent<Omit<TimelineSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/timeline/index.d.cts

@@ -0,0 +1,6 @@
+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';

package/dist/timeline/index.d.ts

@@ -0,0 +1,6 @@
+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';

package/dist/timeline/types.d.cts

@@ -0,0 +1,22 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** 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.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+}
+/** Props for a single {@link TimelineItem} entry. */
+export interface TimelineItemProps extends PrimitivePropsWithRef<'li'> {
+}
+/** Props for {@link TimelineIndicator}, the dot/icon marker for a `TimelineItem`. */
+export interface TimelineIndicatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link TimelineSeparator}, the connecting line between two `TimelineItem`s. */
+export interface TimelineSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link TimelineContent}, the body content of a `TimelineItem`. */
+export interface TimelineContentProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/timeline/types.d.ts

@@ -0,0 +1,22 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** 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.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+}
+/** Props for a single {@link TimelineItem} entry. */
+export interface TimelineItemProps extends PrimitivePropsWithRef<'li'> {
+}
+/** Props for {@link TimelineIndicator}, the dot/icon marker for a `TimelineItem`. */
+export interface TimelineIndicatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link TimelineSeparator}, the connecting line between two `TimelineItem`s. */
+export interface TimelineSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link TimelineContent}, the body content of a `TimelineItem`. */
+export interface TimelineContentProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/toast/Toast.cjs

@@ -0,0 +1 @@
+"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});

package/dist/toast/Toast.d.cts

@@ -0,0 +1,36 @@
+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;
+/**
+ * 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)`.
+ *
+ * @example
+ * ```tsx
+ * <Toast duration={4000} type="background" 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>
+ * </Toast>
+ * ```
+ */
+export declare const Toast: React.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/Toast.d.ts

@@ -0,0 +1,36 @@
+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;
+/**
+ * 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)`.
+ *
+ * @example
+ * ```tsx
+ * <Toast duration={4000} type="background" 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>
+ * </Toast>
+ * ```
+ */
+export declare const Toast: React.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/Toast.js

@@ -0,0 +1 @@
+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};

package/dist/toast/ToastAction.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ToastActionProps } from './types.cjs';
+/**
+ * Actionable button rendered inside a `Toast` (e.g. "Undo"). Closes the
+ * toast after your own `onClick` handler runs. `altText` sets
+ * `aria-label` so assistive tech users who dismiss the toast before
+ * reaching it still know what the action would have done.
+ *
+ * @example
+ * ```tsx
+ * <ToastAction altText="Undo the save" onClick={undo}>Undo</ToastAction>
+ * ```
+ */
+export declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toast/ToastAction.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ToastActionProps } from './types.js';
+/**
+ * Actionable button rendered inside a `Toast` (e.g. "Undo"). Closes the
+ * toast after your own `onClick` handler runs. `altText` sets
+ * `aria-label` so assistive tech users who dismiss the toast before
+ * reaching it still know what the action would have done.
+ *
+ * @example
+ * ```tsx
+ * <ToastAction altText="Undo the save" onClick={undo}>Undo</ToastAction>
+ * ```
+ */
+export declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toast/ToastClose.d.cts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ToastCloseProps } from './types.cjs';
+/**
+ * Button that dismisses the toast when clicked. Renders inside `Toast`
+ * anywhere you like.
+ *
+ * @example
+ * ```tsx
+ * <ToastClose aria-label="Dismiss">✕</ToastClose>
+ * ```
+ */
+export declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toast/ToastClose.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ToastCloseProps } from './types.js';
+/**
+ * Button that dismisses the toast when clicked. Renders inside `Toast`
+ * anywhere you like.
+ *
+ * @example
+ * ```tsx
+ * <ToastClose aria-label="Dismiss">✕</ToastClose>
+ * ```
+ */
+export declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toast/ToastDescription.d.cts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ToastDescriptionProps } from './types.cjs';
+/**
+ * The toast's body text: renders a plain `<div>`.
+ *
+ * @example
+ * ```tsx
+ * <ToastDescription>Your changes have been saved.</ToastDescription>
+ * ```
+ */
+export declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/ToastDescription.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ToastDescriptionProps } from './types.js';
+/**
+ * The toast's body text: renders a plain `<div>`.
+ *
+ * @example
+ * ```tsx
+ * <ToastDescription>Your changes have been saved.</ToastDescription>
+ * ```
+ */
+export declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/ToastProvider.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { ToastProviderContextValue, ToastProviderProps } from './types.cjs';
+export declare const ToastProviderImpl: {
+    (props: ToastProviderContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useToastProviderContext: (consumerName: string) => ToastProviderContextValue;
+/**
+ * App-level ancestor that supplies default toast `duration`, the accessible
+ * region `label`, and a persistent `aria-live` announcer used by every
+ * descendant `Toast`. Renders its children plus two visually-hidden live
+ * regions (`polite`/`assertive`) — mount once near the root of your app,
+ * alongside a `ToastViewport`.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider duration={5000}>
+ *   <App />
+ *   <ToastViewport />
+ * </ToastProvider>
+ * ```
+ */
+export declare function ToastProvider({ children, label, duration }: ToastProviderProps): React.JSX.Element;
+export declare namespace ToastProvider {
+    var displayName: string;
+}

package/dist/toast/ToastProvider.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { ToastProviderContextValue, ToastProviderProps } from './types.js';
+export declare const ToastProviderImpl: {
+    (props: ToastProviderContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useToastProviderContext: (consumerName: string) => ToastProviderContextValue;
+/**
+ * App-level ancestor that supplies default toast `duration`, the accessible
+ * region `label`, and a persistent `aria-live` announcer used by every
+ * descendant `Toast`. Renders its children plus two visually-hidden live
+ * regions (`polite`/`assertive`) — mount once near the root of your app,
+ * alongside a `ToastViewport`.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider duration={5000}>
+ *   <App />
+ *   <ToastViewport />
+ * </ToastProvider>
+ * ```
+ */
+export declare function ToastProvider({ children, label, duration }: ToastProviderProps): React.JSX.Element;
+export declare namespace ToastProvider {
+    var displayName: string;
+}

package/dist/toast/ToastTitle.d.cts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ToastTitleProps } from './types.cjs';
+/**
+ * The toast's heading: renders a plain `<div>`.
+ *
+ * @example
+ * ```tsx
+ * <ToastTitle>Saved</ToastTitle>
+ * ```
+ */
+export declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastTitleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/ToastTitle.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ToastTitleProps } from './types.js';
+/**
+ * The toast's heading: renders a plain `<div>`.
+ *
+ * @example
+ * ```tsx
+ * <ToastTitle>Saved</ToastTitle>
+ * ```
+ */
+export declare const ToastTitle: React.ForwardRefExoticComponent<Omit<ToastTitleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/ToastViewport.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { ToastViewportProps } from './types.cjs';
+/**
+ * Fixed, portaled `<div role="region">` that hosts rendered `Toast`s in
+ * order, labelled via the ancestor `ToastProvider`'s `label`. Render once,
+ * near the end of the app, alongside `ToastProvider`.
+ *
+ * As a landmark it's reachable with **F6** (and **Shift+F6** to leave), and
+ * it puts focus back where it was when the toast holding focus is removed.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ *   <ToastViewport />
+ * </ToastProvider>
+ * ```
+ */
+export declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/ToastViewport.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { ToastViewportProps } from './types.js';
+/**
+ * Fixed, portaled `<div role="region">` that hosts rendered `Toast`s in
+ * order, labelled via the ancestor `ToastProvider`'s `label`. Render once,
+ * near the end of the app, alongside `ToastProvider`.
+ *
+ * As a landmark it's reachable with **F6** (and **Shift+F6** to leave), and
+ * it puts focus back where it was when the toast holding focus is removed.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *   <App />
+ *   <ToastViewport />
+ * </ToastProvider>
+ * ```
+ */
+export declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toast/Toaster.d.cts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { ToasterOptions, ToasterProps, ToasterStore, ToasterToast } from './types.cjs';
+/**
+ * Default auto-dismiss duration (ms). WCAG 2.2.1 wants time limits to be
+ * adjustable or long enough to read; 5s is the floor a short toast needs, and
+ * the timer additionally pauses on hover, on focus, and while the page is
+ * hidden, so the countdown only runs while the message is actually readable.
+ */
+export declare const DEFAULT_TOAST_DURATION = 5000;
+/**
+ * Creates a toast queue: `create`/`update`/`dismiss`/`promise` callable from
+ * anywhere in your app, `max` visible at a time with the rest waiting in FIFO
+ * order. Create it once at module scope and render one {@link Toaster} for it.
+ *
+ * @example
+ * ```ts
+ * // toaster.ts
+ * export const toaster = createToaster({ max: 3, placement: 'bottom-end' });
+ *
+ * // anywhere
+ * toaster.create({ title: 'Saved', type: 'success' });
+ * ```
+ */
+export declare function createToaster(options?: ToasterOptions): ToasterStore;
+/**
+ * Subscribes to a toaster's visible toasts. Only needed if you're rendering
+ * the queue yourself instead of mounting {@link Toaster}.
+ *
+ * @example
+ * ```tsx
+ * const toasts = useToaster(toaster);
+ * ```
+ */
+export declare function useToaster(toaster: ToasterStore): readonly ToasterToast[];
+/**
+ * Renders a {@link createToaster} queue: a `ToastProvider` + `ToastViewport`
+ * region hosting one `Toast` per visible entry. Mount it once near the root
+ * of your app; everything after that is imperative
+ * (`toaster.create({ title })`) from anywhere.
+ *
+ * The viewport is a labelled `region` landmark: **F6** moves focus into it
+ * from anywhere on the page, **Shift+F6** returns focus to where it was, and
+ * focus is restored automatically when the toast holding it is removed.
+ *
+ * @example
+ * ```tsx
+ * <Toaster toaster={toaster} className="my-toast-region" />
+ * ```
+ */
+export declare function Toaster({ toaster, ...viewportProps }: ToasterProps): React.JSX.Element;
+export declare namespace Toaster {
+    var displayName: string;
+}