@skdx/react 0.28.0 → 0.29.0

package/dist/accordion/types.d.ts

@@ -1,22 +1,23 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-import type { SelectionChangeDetail } from '../utils/useSelection.js';
+import type { SelectionChangeDetail, SelectionChangeReason } from '../utils/useSelection.js';
 /** One entry of {@link AccordionProps.items} — a single expandable section. */
 export interface AccordionItem {
     /** Unique identifier matched against the accordion's open value(s). */
     value: string;
     /** Text rendered inside the derived `AccordionTrigger`. */
-    title: React.ReactNode;
+    title: string;
     /**
-     * Panel revealed when open; ignored if `renderContent` is given.
+     * Panel text revealed when open; ignored if `renderContent` is given, which is the
+     * path to rich panel content.
      * @default undefined — the panel renders empty.
      */
-    content?: React.ReactNode;
+    content?: string | undefined;
     /**
      * Prevents this section's trigger from opening/closing.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** @internal Shared state distributed from {@link Accordion} to its items via context. Not part of the public API. */
 export interface AccordionContextValue {
@@ -24,7 +25,7 @@ export interface AccordionContextValue {
     /**
      * Commits one item, opening or closing per the root's `type` and `collapsible`.
      */
-    onItemToggle: (value: string) => void;
+    onItemToggle: (value: string, reason?: SelectionChangeReason) => void;
     type: 'single' | 'multiple';
     collapsible: boolean;
     disabled: boolean;
@@ -36,28 +37,28 @@ export interface AccordionProps extends PrimitivePropsWithRef<'div'> {
      * Sections rendered into derived `AccordionItem`/`AccordionHeader`/`AccordionTrigger`/`AccordionIndicator`/`AccordionContent`. Ignored when `children` is given.
      * @default undefined — an empty accordion.
      */
-    items?: AccordionItem[];
+    items?: AccordionItem[] | undefined;
     /**
      * Heading element each derived `Header` renders. Set it to match the surrounding
      * outline — an accordion under an `<h4>` needs `5` or it skips a level.
      * @default 3
      */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
     /**
      * Render a derived panel's body from each item in `items`. Ignored when `children` is given.
      * @default undefined — renders the entry's `content`.
      */
-    renderContent?: (item: AccordionItem) => React.ReactNode;
+    renderContent?: ((item: AccordionItem) => React.ReactNode) | undefined;
     /**
      * Prevents every item's trigger from opening/closing when set.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Layout axis for arrow-key navigation between triggers, exposed as `data-orientation`.
      * @default 'vertical'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
     /**
      * Allow one item open (`'single'`) or any number (`'multiple'`);
      * `value` accepts bare `string` or `string[]`, change payload always an array.
@@ -67,22 +68,22 @@ export interface AccordionProps extends PrimitivePropsWithRef<'div'> {
      * Open item's value(s) for controlled usage — bare `string` or `string[]`.
      * @default undefined — uncontrolled.
      */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /**
      * Initially open item's value(s) for uncontrolled usage — bare `string` or `string[]`.
      * @default undefined — all items closed.
      */
-    defaultValue?: string | string[];
+    defaultValue?: string | string[] | undefined;
     /**
      * Fires when the open set changes, carrying the selection as `string[]` and `selectedValue`.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: SelectionChangeDetail) => void;
+    onValueChange?: ((detail: SelectionChangeDetail) => void) | undefined;
     /**
      * Allow closing the open item. Ignored when `type` is `'multiple'`.
      * @default false
      */
-    collapsible?: boolean;
+    collapsible?: boolean | undefined;
 }
 /** @internal Shared state distributed from {@link AccordionItem} to its header/trigger/content via context. Not part of the public API. */
 export interface AccordionItemContextValue {
@@ -107,7 +108,7 @@ export interface AccordionItemProps extends PrimitivePropsWithRef<'div'> {
      * accordion root's `disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for {@link AccordionHeader}, the heading wrapper around an {@link AccordionTrigger}. */
 export interface AccordionHeaderProps extends PrimitivePropsWithRef<'h3'> {
@@ -116,7 +117,7 @@ export interface AccordionHeaderProps extends PrimitivePropsWithRef<'h3'> {
      * `<h2>`; under `<h4>`, use `5` or skip a level for screen readers.
      * @default 3
      */
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
 }
 /** Props for {@link AccordionTrigger}, the button that opens/closes its {@link AccordionItem}. */
 export interface AccordionTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -128,21 +129,21 @@ export interface AccordionContentProps extends PrimitivePropsWithRef<'div'> {
      * for animation libraries needing it during exit transitions.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
      * Mount as `hidden="until-found"` to enable find-in-page on closed content
      * (Chromium-first, degrades to `hidden=""` if unsupported). Implies `forceMount`.
      * Uses `content-visibility: hidden`; styling must not override with `display: none`.
      * @default false
      */
-    hiddenUntilFound?: boolean;
+    hiddenUntilFound?: boolean | undefined;
     /**
      * Panel landmark role: `region` clutters the landmark list when many panels
      * are open. Use `"group"` for long accordions; trigger's `aria-labelledby`
      * labels the panel either way.
      * @default 'region'
      */
-    role?: 'region' | 'group';
+    role?: 'region' | 'group' | undefined;
 }
 /** Props for {@link AccordionIndicator}, the chevron inside an {@link AccordionTrigger}. */
 export interface AccordionIndicatorProps extends PrimitivePropsWithRef<'span'> {

package/dist/alert/Alert.cjs

@@ -1 +1,2 @@
-"use strict";var ae=Object.create;var A=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var r in t)A(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of me(t))!fe.call(e,i)&&i!==r&&A(e,i,{get:()=>t[i],enumerable:!(o=ce(t,i))||o.enumerable});return e};var m=(e,t,r)=>(r=e!=null?ae(pe(e)):{},g(t||!e||!e.__esModule?A(r,"default",{value:e,enumerable:!0}):r,e)),Ae=e=>g(A({},"__esModule",{value:!0}),e);var ye={};ue(ye,{Alert:()=>M,AlertAction:()=>d,AlertClose:()=>y,AlertDescription:()=>v,AlertIcon:()=>T,AlertProvider:()=>te,AlertRoot:()=>L,AlertTitle:()=>C,useAlertContext:()=>c});module.exports=Ae(ye);var l=m(require("react"),1),$=require("../utils/createContext.cjs"),j=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),b=require("../utils/tabbable.cjs"),ee=require("../utils/useControllableState.cjs");var w=m(require("react"),1),S=require("../utils/part.cjs"),B=require("../utils/primitive.cjs"),O=require("react/jsx-runtime"),d=w.forwardRef((e,t)=>(0,O.jsx)(B.Primitive.div,{...e,...(0,S.skdxPart)("alert","action",e.className),ref:t}));d.displayName="AlertAction";var q=m(require("react"),1),K=require("../utils/part.cjs"),R=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),y=q.forwardRef((e,t)=>{let r=c("AlertClose");return(0,V.jsx)(R.Primitive.button,{type:"button","aria-label":r.closeLabel,...e,...(0,K.skdxPart)("alert","close",e.className),ref:t,onClick:(0,R.composeEventHandlers)(e.onClick,()=>r.onOpenChange(!1))})});y.displayName="AlertClose";var P=m(require("react"),1),F=require("../utils/part.cjs"),W=require("../utils/primitive.cjs");var _=require("react/jsx-runtime"),v=P.forwardRef((e,t)=>{let r=c("AlertDescription"),{setHasDescription:o}=r;return P.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,_.jsx)(W.Primitive.div,{id:r.descriptionId,...e,...(0,F.skdxPart)("alert","description",e.className),ref:t})});v.displayName="AlertDescription";var z=m(require("react"),1),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs"),Q=require("react/jsx-runtime"),T=z.forwardRef((e,t)=>(0,Q.jsx)(J.Primitive.span,{"aria-hidden":"true",...e,...(0,G.skdxPart)("alert","icon",e.className),ref:t}));T.displayName="AlertIcon";var x=m(require("react"),1),U=require("../utils/part.cjs"),X=require("../utils/primitive.cjs");var Y=require("react/jsx-runtime"),C=x.forwardRef((e,t)=>{let r=c("AlertTitle"),{setHasTitle:o}=r;return x.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,Y.jsx)(X.Primitive.h3,{id:r.titleId,...e,...(0,U.skdxPart)("alert","title",e.className),ref:t})});C.displayName="AlertTitle";var s=require("react/jsx-runtime"),de=()=>(0,s.jsx)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:(0,s.jsx)("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),Z=({icon:e,title:t,description:r,action:o,dismissible:i,children:p})=>(0,s.jsxs)(s.Fragment,{children:[e?(0,s.jsx)(T,{children:e}):null,t?(0,s.jsx)(C,{children:t}):null,r?(0,s.jsx)(v,{children:r}):null,p,o?(0,s.jsx)(d,{children:o}):null,i?(0,s.jsx)(y,{children:(0,s.jsx)(de,{})}):null]});var u=require("react/jsx-runtime");function Re(e,t){if(e?.ownerDocument)for(let o=e?.previousElementSibling;o;o=o.previousElementSibling){let i=o.matches(b.TABBABLE_SELECTOR)?o:o.querySelector(b.TABBABLE_SELECTOR);if(i){i.focus();return}}t?.isConnected&&t.focus()}var[te,c]=(0,$.createSafeContext)("Alert"),L=l.forwardRef(({role:e="status",open:t,defaultOpen:r=!0,onOpenChange:o,closeLabel:i="Dismiss",dismissOnEscape:p=!1,...f},a)=>{let N=l.useId(),h=l.useId(),[re,oe]=l.useState(!1),[le,ie]=l.useState(!1),[se=!0,D]=(0,ee.useControllableState)({prop:t,defaultProp:r,onChange:o}),H=l.useRef(null),I=l.useRef(null);l.useEffect(()=>{I.current=H.current?.ownerDocument.activeElement??null},[]);let k=l.useCallback(n=>{if(n){D(!0);return}Re(H.current,I.current),D(!1)},[D]),ne=l.useCallback(n=>{H.current=n,typeof a=="function"?a(n):a&&(a.current=n)},[a]);return(0,u.jsx)(te,{titleId:N,descriptionId:h,setHasTitle:oe,setHasDescription:ie,closeLabel:i,onOpenChange:k,children:se?(0,u.jsx)(E.Primitive.div,{role:e,"aria-live":e==="alert"?"assertive":"polite","aria-labelledby":re?N:void 0,"aria-describedby":le?h:void 0,...f,...(0,j.skdxPart)("alert","root",f.className),ref:ne,onKeyDown:(0,E.composeEventHandlers)(f.onKeyDown,n=>{!p||n.key!=="Escape"||(n.preventDefault(),k(!1))})}):null})});L.displayName="AlertRoot";var M=l.forwardRef(({title:e,description:t,icon:r,action:o,dismissible:i=!1,children:p,...f},a)=>(0,u.jsx)(L,{...f,ref:a,children:(0,u.jsx)(Z,{icon:r,title:e,description:t,action:o,dismissible:i,children:p})}));M.displayName="Alert";0&&(module.exports={Alert,AlertAction,AlertClose,AlertDescription,AlertIcon,AlertProvider,AlertRoot,AlertTitle,useAlertContext});
+'use client';
+"use strict";var me=Object.create;var A=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var Ae=(e,t)=>{for(var r in t)A(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of fe(t))!de.call(e,i)&&i!==r&&A(e,i,{get:()=>t[i],enumerable:!(o=pe(t,i))||o.enumerable});return e};var v=(e,t,r)=>(r=e!=null?me(ue(e)):{},M(t||!e||!e.__esModule?A(r,"default",{value:e,enumerable:!0}):r,e)),Re=e=>M(A({},"__esModule",{value:!0}),e);var Ce={};Ae(Ce,{Alert:()=>H,AlertAction:()=>R,AlertClose:()=>P,AlertDescription:()=>C,AlertIcon:()=>N,AlertProvider:()=>re,AlertRoot:()=>I,AlertTitle:()=>x,useAlertContext:()=>c});module.exports=Re(Ce);var n=v(require("react"),1),$=require("../utils/appearance.cjs"),j=require("../utils/createContext.cjs"),ee=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),D=require("../utils/tabbable.cjs"),te=require("../utils/useControllableState.cjs");var Y=require("../utils/Glyph.cjs");var g=require("../utils/part.cjs"),O=require("../utils/primitive.cjs"),B=require("react/jsx-runtime"),R=({ref:e,...t})=>(0,B.jsx)(O.Primitive.div,{...t,...(0,g.skdxPart)("alert","action",t.className),ref:e});R.displayName="AlertAction";var q=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var K=require("react/jsx-runtime"),P=({ref:e,...t})=>{let r=c("AlertClose");return(0,K.jsx)(y.Primitive.button,{type:"button","aria-label":r.closeLabel,...t,...(0,q.skdxPart)("alert","close",t.className),ref:e,onClick:(0,y.composeEventHandlers)(t.onClick,()=>r.onOpenChange(!1))})};P.displayName="AlertClose";var _=v(require("react"),1),w=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var G=require("react/jsx-runtime"),C=({ref:e,...t})=>{let r=c("AlertDescription"),{setHasDescription:o}=r;return _.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,G.jsx)(F.Primitive.div,{id:r.descriptionId,...t,...(0,w.skdxPart)("alert","description",t.className),ref:e})};C.displayName="AlertDescription";var V=require("../utils/part.cjs"),J=require("../utils/primitive.cjs"),U=require("react/jsx-runtime"),N=({ref:e,...t})=>(0,U.jsx)(J.Primitive.span,{"aria-hidden":"true",...t,...(0,V.skdxPart)("alert","icon",t.className),ref:e});N.displayName="AlertIcon";var W=v(require("react"),1),X=require("../utils/part.cjs"),z=require("../utils/primitive.cjs");var Q=require("react/jsx-runtime"),x=({ref:e,...t})=>{let r=c("AlertTitle"),{setHasTitle:o}=r;return W.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,Q.jsx)(z.Primitive.h3,{id:r.titleId,...t,...(0,X.skdxPart)("alert","title",t.className),ref:e})};x.displayName="AlertTitle";var s=require("react/jsx-runtime"),ye=()=>(0,s.jsx)(Y.Glyph,{name:"close"}),Z=({icon:e,title:t,description:r,action:o,dismissible:i,children:m})=>(0,s.jsxs)(s.Fragment,{children:[e?(0,s.jsx)(N,{children:e}):null,t?(0,s.jsx)(x,{children:t}):null,r?(0,s.jsx)(C,{children:r}):null,m,o?(0,s.jsx)(R,{children:o}):null,i?(0,s.jsx)(P,{children:(0,s.jsx)(ye,{})}):null]});var u=require("react/jsx-runtime");function Pe(e,t){let r=e?.ownerDocument;if(r)for(let l=e?.previousElementSibling;l;l=l.previousElementSibling){let p=l.matches(D.TABBABLE_SELECTOR)?l:l.querySelector(D.TABBABLE_SELECTOR);if(p){p.focus();return}}if(t?.isConnected&&t!==e?.ownerDocument.body){t.focus();return}if(!e||!r)return;let o=Array.from(r.querySelectorAll(D.TABBABLE_SELECTOR)).filter(l=>!e.contains(l)),i=l=>(l.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING)!==0;(o.filter(i).at(-1)??o.find(l=>!i(l)))?.focus()}var[re,c]=(0,j.createSafeContext)("Alert"),I=({role:e="status",open:t,defaultOpen:r=!0,onOpenChange:o,closeLabel:i="Dismiss",dismissOnEscape:m=!1,status:l,variant:p,ref:f,...d})=>{let L=n.useId(),h=n.useId(),[oe,le]=n.useState(!1),[ie,ne]=n.useState(!1),[se=!0,T]=(0,te.useControllableState)({prop:t,defaultProp:r,onChange:o}),b=n.useRef(null),k=n.useRef(null);n.useEffect(()=>{k.current=b.current?.ownerDocument.activeElement??null},[]);let S=n.useCallback(a=>{if(a){T(!0);return}Pe(b.current,k.current),T(!1)},[T]),ae=n.useCallback(a=>{b.current=a,typeof f=="function"?f(a):f&&(f.current=a)},[f]),ce=(0,E.useComposedEventHandlers)(d.onKeyDown,a=>{!m||a.key!=="Escape"||(a.preventDefault(),S(!1))});return(0,u.jsx)(re,{titleId:L,descriptionId:h,setHasTitle:le,setHasDescription:ne,closeLabel:i,onOpenChange:S,children:se?(0,u.jsx)(E.Primitive.div,{role:e,"aria-live":e==="alert"?"assertive":"polite","aria-labelledby":oe?L:void 0,"aria-describedby":ie?h:void 0,...d,...(0,$.appearanceAttrs)({status:l,variant:p},d),...(0,ee.skdxPart)("alert","root",d.className),ref:ae,onKeyDown:ce}):null})};I.displayName="AlertRoot";var H=({title:e,description:t,icon:r,action:o,dismissible:i=!1,children:m,ref:l,...p})=>(0,u.jsx)(I,{...p,ref:l,children:(0,u.jsx)(Z,{icon:r,title:e,description:t,action:o,dismissible:i,children:m})});H.displayName="Alert";0&&(module.exports={Alert,AlertAction,AlertClose,AlertDescription,AlertIcon,AlertProvider,AlertRoot,AlertTitle,useAlertContext});

package/dist/alert/Alert.d.cts

@@ -1,37 +1,16 @@
 import * as React from 'react';
 import type { AlertContextValue, AlertProps, AlertRootProps } from './types.cjs';
-export declare const AlertProvider: {
-    (props: AlertContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useAlertContext: (consumerName: string) => AlertContextValue;
+export declare const AlertProvider: React.FC<AlertContextValue & {
+    children: React.ReactNode;
+}>, useAlertContext: (consumerName: string) => AlertContextValue;
 /**
- * Alert's live-region primitive: renders the root `<div>`, generates
- * `titleId` / `descriptionId` and wires them to `aria-labelledby` /
- * `aria-describedby`, sets `aria-live` (`"polite"` for `role="status"`,
- * `"assertive"` for `role="alert"`), and hands the ids and the dismissal
- * callback down to `AlertTitle` / `AlertDescription` / `AlertClose` via
- * context. Renders `children` verbatim.
- *
- * `Alert` (the recipe, below) wraps this with `AlertAnatomy` and always
- * derives from `icon`/`title`/`description`/`action`/`dismissible`. Reach for
- * this directly — via `@skdx/react/primitives/alert`'s `AlertRoot` — for full
- * manual composition of the parts.
+ * Alert's live-region primitive: renders the root `<div>`, wires `titleId`/`descriptionId` to `aria-labelledby`/`aria-describedby`, sets `aria-live` from `role`, and distributes the ids and dismissal callback to `AlertTitle`/`AlertDescription`/`AlertClose` via context.
  *
- * Visibility works controlled (`open` + `onOpenChange`) or uncontrolled
- * (`defaultOpen`, which defaults to `true`); when closed the Alert renders
- * nothing. Dismissal is never automatic — nothing here runs on a timer.
+ * `Alert` below composes this with the derived anatomy; reach for `AlertRoot` directly, via `@skdx/react/primitives/alert`, for manual composition of the parts.
  *
- * **An Alert that is open on first render is not announced.** A live region
- * has to be in the accessibility tree *before* its text changes, and with
- * `defaultOpen` at `true` the region and its content mount together. The
- * default is not changed, because a static banner has to keep rendering as it
- * always did; an Alert that must be announced has to mount after load, or the
- * consumer has to render a persistent empty live region and fill it.
+ * An Alert open on first render is not announced — a live region must exist before its text changes, so an Alert that must be announced has to mount after load.
  *
- * Dismissal restores focus rather than dropping it on `document.body` — see
- * {@link focusAfterDismiss}.
+ * Dismissal restores focus to what preceded the alert, or to what held focus before it mounted, never to `document.body`; see {@link focusAfterDismiss}.
  *
  * @example
  * ```tsx
@@ -44,31 +23,23 @@ export declare const AlertProvider: {
  * </AlertRoot>
  * ```
  */
-export declare const AlertRoot: React.ForwardRefExoticComponent<Omit<AlertRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertRoot: {
+    ({ role, open: openProp, defaultOpen, onOpenChange, closeLabel, dismissOnEscape, status, variant, ref: forwardedRef, ...props }: AlertRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * Inline message region — distinct from Toast, which is a floating,
- * auto-dismissing notification.
+ * Inline message region — distinct from Toast, which is a floating, auto-dismissing notification.
  *
- * Always draws the derived anatomy from `icon`/`title`/`description`/
- * `action`/`dismissible`: a decorative icon, the title the root's
- * `aria-labelledby` resolves to, the description its `aria-describedby`
- * resolves to, the body (`children`), the action row, and a close button.
- * `children` is the alert's body, never a switch — this component never
- * inspects what it was given. For full manual composition of the parts, use
- * `AlertRoot` from `@skdx/react/primitives/alert`.
+ * Draws the derived anatomy from `icon`/`title`/`description`/`action`/`dismissible`: icon, title, description, `children` as the body, action row, and close button. For manual composition, use `AlertRoot` from `@skdx/react/primitives/alert`.
  *
- * Severity is not a prop: write `data-status="success"` (or `info`,
- * `warning`, `danger`, `error`) on the root, the same author-set attribute
- * `Badge`, `Button`, `Tag` and `Toast` read. Severity must never be carried by
- * colour alone — pair it with an `icon` or say it in the `title`.
- *
- * Visibility works controlled (`open` + `onOpenChange`) or uncontrolled
- * (`defaultOpen`, which defaults to `true`); when closed the Alert renders
- * nothing. Dismissal is never automatic — nothing here runs on a timer.
+ * Severity travels on `status` (or the equivalent `data-status`), the same axis `Badge`, `Button`, `Tag` and `Toast` read — pair it with an `icon` or say it in the `title`, never colour alone.
  *
  * @example
  * ```tsx
- * <Alert data-status="success" title="Saved" description="Your changes are live." />
+ * <Alert status="success" title="Saved" description="Your changes are live." />
  * ```
  */
-export declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Alert: {
+    ({ title, description, icon, action, dismissible, children, ref: forwardedRef, ...rest }: AlertProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/Alert.d.ts

@@ -1,37 +1,16 @@
 import * as React from 'react';
 import type { AlertContextValue, AlertProps, AlertRootProps } from './types.js';
-export declare const AlertProvider: {
-    (props: AlertContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useAlertContext: (consumerName: string) => AlertContextValue;
+export declare const AlertProvider: React.FC<AlertContextValue & {
+    children: React.ReactNode;
+}>, useAlertContext: (consumerName: string) => AlertContextValue;
 /**
- * Alert's live-region primitive: renders the root `<div>`, generates
- * `titleId` / `descriptionId` and wires them to `aria-labelledby` /
- * `aria-describedby`, sets `aria-live` (`"polite"` for `role="status"`,
- * `"assertive"` for `role="alert"`), and hands the ids and the dismissal
- * callback down to `AlertTitle` / `AlertDescription` / `AlertClose` via
- * context. Renders `children` verbatim.
- *
- * `Alert` (the recipe, below) wraps this with `AlertAnatomy` and always
- * derives from `icon`/`title`/`description`/`action`/`dismissible`. Reach for
- * this directly — via `@skdx/react/primitives/alert`'s `AlertRoot` — for full
- * manual composition of the parts.
+ * Alert's live-region primitive: renders the root `<div>`, wires `titleId`/`descriptionId` to `aria-labelledby`/`aria-describedby`, sets `aria-live` from `role`, and distributes the ids and dismissal callback to `AlertTitle`/`AlertDescription`/`AlertClose` via context.
  *
- * Visibility works controlled (`open` + `onOpenChange`) or uncontrolled
- * (`defaultOpen`, which defaults to `true`); when closed the Alert renders
- * nothing. Dismissal is never automatic — nothing here runs on a timer.
+ * `Alert` below composes this with the derived anatomy; reach for `AlertRoot` directly, via `@skdx/react/primitives/alert`, for manual composition of the parts.
  *
- * **An Alert that is open on first render is not announced.** A live region
- * has to be in the accessibility tree *before* its text changes, and with
- * `defaultOpen` at `true` the region and its content mount together. The
- * default is not changed, because a static banner has to keep rendering as it
- * always did; an Alert that must be announced has to mount after load, or the
- * consumer has to render a persistent empty live region and fill it.
+ * An Alert open on first render is not announced — a live region must exist before its text changes, so an Alert that must be announced has to mount after load.
  *
- * Dismissal restores focus rather than dropping it on `document.body` — see
- * {@link focusAfterDismiss}.
+ * Dismissal restores focus to what preceded the alert, or to what held focus before it mounted, never to `document.body`; see {@link focusAfterDismiss}.
  *
  * @example
  * ```tsx
@@ -44,31 +23,23 @@ export declare const AlertProvider: {
  * </AlertRoot>
  * ```
  */
-export declare const AlertRoot: React.ForwardRefExoticComponent<Omit<AlertRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertRoot: {
+    ({ role, open: openProp, defaultOpen, onOpenChange, closeLabel, dismissOnEscape, status, variant, ref: forwardedRef, ...props }: AlertRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * Inline message region — distinct from Toast, which is a floating,
- * auto-dismissing notification.
+ * Inline message region — distinct from Toast, which is a floating, auto-dismissing notification.
  *
- * Always draws the derived anatomy from `icon`/`title`/`description`/
- * `action`/`dismissible`: a decorative icon, the title the root's
- * `aria-labelledby` resolves to, the description its `aria-describedby`
- * resolves to, the body (`children`), the action row, and a close button.
- * `children` is the alert's body, never a switch — this component never
- * inspects what it was given. For full manual composition of the parts, use
- * `AlertRoot` from `@skdx/react/primitives/alert`.
+ * Draws the derived anatomy from `icon`/`title`/`description`/`action`/`dismissible`: icon, title, description, `children` as the body, action row, and close button. For manual composition, use `AlertRoot` from `@skdx/react/primitives/alert`.
  *
- * Severity is not a prop: write `data-status="success"` (or `info`,
- * `warning`, `danger`, `error`) on the root, the same author-set attribute
- * `Badge`, `Button`, `Tag` and `Toast` read. Severity must never be carried by
- * colour alone — pair it with an `icon` or say it in the `title`.
- *
- * Visibility works controlled (`open` + `onOpenChange`) or uncontrolled
- * (`defaultOpen`, which defaults to `true`); when closed the Alert renders
- * nothing. Dismissal is never automatic — nothing here runs on a timer.
+ * Severity travels on `status` (or the equivalent `data-status`), the same axis `Badge`, `Button`, `Tag` and `Toast` read — pair it with an `icon` or say it in the `title`, never colour alone.
  *
  * @example
  * ```tsx
- * <Alert data-status="success" title="Saved" description="Your changes are live." />
+ * <Alert status="success" title="Saved" description="Your changes are live." />
  * ```
  */
-export declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Alert: {
+    ({ title, description, icon, action, dismissible, children, ref: forwardedRef, ...rest }: AlertProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/Alert.js

@@ -1 +1,2 @@
-import*as o from"react";import{createSafeContext as le}from"../utils/createContext.js";import{skdxPart as ie}from"../utils/part.js";import{composeEventHandlers as se,Primitive as ne}from"../utils/primitive.js";import{TABBABLE_SELECTOR as h}from"../utils/tabbable.js";import{useControllableState as ae}from"../utils/useControllableState.js";import*as b from"react";import{skdxPart as K}from"../utils/part.js";import{Primitive as V}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var y=b.forwardRef((e,r)=>F(V.div,{...e,...K("alert","action",e.className),ref:r}));y.displayName="AlertAction";import*as L from"react";import{skdxPart as W}from"../utils/part.js";import{composeEventHandlers as _,Primitive as z}from"../utils/primitive.js";import{jsx as G}from"react/jsx-runtime";var P=L.forwardRef((e,r)=>{let l=c("AlertClose");return G(z.button,{type:"button","aria-label":l.closeLabel,...e,...W("alert","close",e.className),ref:r,onClick:_(e.onClick,()=>l.onOpenChange(!1))})});P.displayName="AlertClose";import*as f from"react";import{skdxPart as J}from"../utils/part.js";import{Primitive as Q}from"../utils/primitive.js";import{jsx as U}from"react/jsx-runtime";var v=f.forwardRef((e,r)=>{let l=c("AlertDescription"),{setHasDescription:t}=l;return f.useEffect(()=>(t(!0),()=>t(!1)),[t]),U(Q.div,{id:l.descriptionId,...e,...J("alert","description",e.className),ref:r})});v.displayName="AlertDescription";import*as M from"react";import{skdxPart as X}from"../utils/part.js";import{Primitive as Y}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var T=M.forwardRef((e,r)=>Z(Y.span,{"aria-hidden":"true",...e,...X("alert","icon",e.className),ref:r}));T.displayName="AlertIcon";import*as u from"react";import{skdxPart as $}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{jsx as ee}from"react/jsx-runtime";var x=u.forwardRef((e,r)=>{let l=c("AlertTitle"),{setHasTitle:t}=l;return u.useEffect(()=>(t(!0),()=>t(!1)),[t]),ee(j.h3,{id:l.titleId,...e,...$("alert","title",e.className),ref:r})});x.displayName="AlertTitle";import{Fragment as re,jsx as n,jsxs as oe}from"react/jsx-runtime";var te=()=>n("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:n("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),N=({icon:e,title:r,description:l,action:t,dismissible:i,children:m})=>oe(re,{children:[e?n(T,{children:e}):null,r?n(x,{children:r}):null,l?n(v,{children:l}):null,m,t?n(y,{children:t}):null,i?n(P,{children:n(te,{})}):null]});import{jsx as A}from"react/jsx-runtime";function ce(e,r){if(e?.ownerDocument)for(let t=e?.previousElementSibling;t;t=t.previousElementSibling){let i=t.matches(h)?t:t.querySelector(h);if(i){i.focus();return}}r?.isConnected&&r.focus()}var[me,c]=le("Alert"),I=o.forwardRef(({role:e="status",open:r,defaultOpen:l=!0,onOpenChange:t,closeLabel:i="Dismiss",dismissOnEscape:m=!1,...p},a)=>{let C=o.useId(),E=o.useId(),[g,w]=o.useState(!1),[S,B]=o.useState(!1),[O=!0,d]=ae({prop:r,defaultProp:l,onChange:t}),R=o.useRef(null),D=o.useRef(null);o.useEffect(()=>{D.current=R.current?.ownerDocument.activeElement??null},[]);let H=o.useCallback(s=>{if(s){d(!0);return}ce(R.current,D.current),d(!1)},[d]),q=o.useCallback(s=>{R.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]);return A(me,{titleId:C,descriptionId:E,setHasTitle:w,setHasDescription:B,closeLabel:i,onOpenChange:H,children:O?A(ne.div,{role:e,"aria-live":e==="alert"?"assertive":"polite","aria-labelledby":g?C:void 0,"aria-describedby":S?E:void 0,...p,...ie("alert","root",p.className),ref:q,onKeyDown:se(p.onKeyDown,s=>{!m||s.key!=="Escape"||(s.preventDefault(),H(!1))})}):null})});I.displayName="AlertRoot";var k=o.forwardRef(({title:e,description:r,icon:l,action:t,dismissible:i=!1,children:m,...p},a)=>A(I,{...p,ref:a,children:A(N,{icon:l,title:e,description:r,action:t,dismissible:i,children:m})}));k.displayName="Alert";export{k as Alert,y as AlertAction,P as AlertClose,v as AlertDescription,T as AlertIcon,me as AlertProvider,I as AlertRoot,x as AlertTitle,c as useAlertContext};
+'use client';
+import*as i from"react";import{appearanceAttrs as ie}from"../utils/appearance.js";import{createSafeContext as ne}from"../utils/createContext.js";import{skdxPart as se}from"../utils/part.js";import{Primitive as ae,useComposedEventHandlers as ce}from"../utils/primitive.js";import{TABBABLE_SELECTOR as D}from"../utils/tabbable.js";import{useControllableState as me}from"../utils/useControllableState.js";import{Glyph as te}from"../utils/Glyph.js";import{skdxPart as _}from"../utils/part.js";import{Primitive as w}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var y=({ref:t,...e})=>F(w.div,{...e,..._("alert","action",e.className),ref:t});y.displayName="AlertAction";import{skdxPart as G}from"../utils/part.js";import{composeEventHandlers as V,Primitive as J}from"../utils/primitive.js";import{jsx as U}from"react/jsx-runtime";var P=({ref:t,...e})=>{let r=p("AlertClose");return U(J.button,{type:"button","aria-label":r.closeLabel,...e,...G("alert","close",e.className),ref:t,onClick:V(e.onClick,()=>r.onOpenChange(!1))})};P.displayName="AlertClose";import*as I from"react";import{skdxPart as W}from"../utils/part.js";import{Primitive as X}from"../utils/primitive.js";import{jsx as z}from"react/jsx-runtime";var C=({ref:t,...e})=>{let r=p("AlertDescription"),{setHasDescription:o}=r;return I.useEffect(()=>(o(!0),()=>o(!1)),[o]),z(X.div,{id:r.descriptionId,...e,...W("alert","description",e.className),ref:t})};C.displayName="AlertDescription";import{skdxPart as Q}from"../utils/part.js";import{Primitive as Y}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var N=({ref:t,...e})=>Z(Y.span,{"aria-hidden":"true",...e,...Q("alert","icon",e.className),ref:t});N.displayName="AlertIcon";import*as H from"react";import{skdxPart as $}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{jsx as ee}from"react/jsx-runtime";var x=({ref:t,...e})=>{let r=p("AlertTitle"),{setHasTitle:o}=r;return H.useEffect(()=>(o(!0),()=>o(!1)),[o]),ee(j.h3,{id:r.titleId,...e,...$("alert","title",e.className),ref:t})};x.displayName="AlertTitle";import{Fragment as oe,jsx as a,jsxs as le}from"react/jsx-runtime";var re=()=>a(te,{name:"close"}),L=({icon:t,title:e,description:r,action:o,dismissible:n,children:c})=>le(oe,{children:[t?a(N,{children:t}):null,e?a(x,{children:e}):null,r?a(C,{children:r}):null,c,o?a(y,{children:o}):null,n?a(P,{children:a(re,{})}):null]});import{jsx as d}from"react/jsx-runtime";function pe(t,e){let r=t?.ownerDocument;if(r)for(let l=t?.previousElementSibling;l;l=l.previousElementSibling){let m=l.matches(D)?l:l.querySelector(D);if(m){m.focus();return}}if(e?.isConnected&&e!==t?.ownerDocument.body){e.focus();return}if(!t||!r)return;let o=Array.from(r.querySelectorAll(D)).filter(l=>!t.contains(l)),n=l=>(l.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)!==0;(o.filter(n).at(-1)??o.find(l=>!n(l)))?.focus()}var[fe,p]=ne("Alert"),h=({role:t="status",open:e,defaultOpen:r=!0,onOpenChange:o,closeLabel:n="Dismiss",dismissOnEscape:c=!1,status:l,variant:m,ref:f,...u})=>{let E=i.useId(),T=i.useId(),[S,M]=i.useState(!1),[g,O]=i.useState(!1),[B=!0,A]=me({prop:e,defaultProp:r,onChange:o}),R=i.useRef(null),b=i.useRef(null);i.useEffect(()=>{b.current=R.current?.ownerDocument.activeElement??null},[]);let v=i.useCallback(s=>{if(s){A(!0);return}pe(R.current,b.current),A(!1)},[A]),q=i.useCallback(s=>{R.current=s,typeof f=="function"?f(s):f&&(f.current=s)},[f]),K=ce(u.onKeyDown,s=>{!c||s.key!=="Escape"||(s.preventDefault(),v(!1))});return d(fe,{titleId:E,descriptionId:T,setHasTitle:M,setHasDescription:O,closeLabel:n,onOpenChange:v,children:B?d(ae.div,{role:t,"aria-live":t==="alert"?"assertive":"polite","aria-labelledby":S?E:void 0,"aria-describedby":g?T:void 0,...u,...ie({status:l,variant:m},u),...se("alert","root",u.className),ref:q,onKeyDown:K}):null})};h.displayName="AlertRoot";var k=({title:t,description:e,icon:r,action:o,dismissible:n=!1,children:c,ref:l,...m})=>d(h,{...m,ref:l,children:d(L,{icon:r,title:t,description:e,action:o,dismissible:n,children:c})});k.displayName="Alert";export{k as Alert,y as AlertAction,P as AlertClose,C as AlertDescription,N as AlertIcon,fe as AlertProvider,h as AlertRoot,x as AlertTitle,p as useAlertContext};

package/dist/alert/AlertAction.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AlertActionProps } from './types.cjs';
 /**
  * Container for the alert's buttons and links. A plain `<div>` that makes
@@ -15,4 +15,7 @@ import type { AlertActionProps } from './types.cjs';
  * </Alert>
  * ```
  */
-export declare const AlertAction: React.ForwardRefExoticComponent<Omit<AlertActionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertAction: {
+    ({ ref: forwardedRef, ...props }: AlertActionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertAction.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AlertActionProps } from './types.js';
 /**
  * Container for the alert's buttons and links. A plain `<div>` that makes
@@ -15,4 +15,7 @@ import type { AlertActionProps } from './types.js';
  * </Alert>
  * ```
  */
-export declare const AlertAction: React.ForwardRefExoticComponent<Omit<AlertActionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertAction: {
+    ({ ref: forwardedRef, ...props }: AlertActionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertAnatomy.d.cts

@@ -1,17 +1,10 @@
 import type * as React from 'react';
-/**
- * The anatomy an {@link Alert} draws from `icon`/`title`/`description`/
- * `action`/`dismissible`: the decorative icon, the title the root's
- * `aria-labelledby` resolves to, the description its `aria-describedby`
- * resolves to, the body, the action row, and the close button.
- *
- * @internal
- */
+/** @internal Derived anatomy: icon, title, description, body, action row, and close button. */
 export declare const AlertAnatomy: ({ icon, title, description, action, dismissible, children, }: {
-    icon?: React.ReactNode;
-    title?: string;
-    description?: React.ReactNode;
-    action?: React.ReactNode;
+    icon?: React.ReactNode | undefined;
+    title?: string | undefined;
+    description?: React.ReactNode | undefined;
+    action?: React.ReactNode | undefined;
     dismissible: boolean;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

package/dist/alert/AlertAnatomy.d.ts

@@ -1,17 +1,10 @@
 import type * as React from 'react';
-/**
- * The anatomy an {@link Alert} draws from `icon`/`title`/`description`/
- * `action`/`dismissible`: the decorative icon, the title the root's
- * `aria-labelledby` resolves to, the description its `aria-describedby`
- * resolves to, the body, the action row, and the close button.
- *
- * @internal
- */
+/** @internal Derived anatomy: icon, title, description, body, action row, and close button. */
 export declare const AlertAnatomy: ({ icon, title, description, action, dismissible, children, }: {
-    icon?: React.ReactNode;
-    title?: string;
-    description?: React.ReactNode;
-    action?: React.ReactNode;
+    icon?: React.ReactNode | undefined;
+    title?: string | undefined;
+    description?: React.ReactNode | undefined;
+    action?: React.ReactNode | undefined;
     dismissible: boolean;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

package/dist/alert/AlertClose.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AlertCloseProps } from './types.cjs';
 /**
  * Close button — sets Alert's `open` to `false` and fires `onOpenChange(false)`. Carries default accessible name from root's `closeLabel` (default: `"Dismiss"`).
@@ -13,4 +13,7 @@ import type { AlertCloseProps } from './types.cjs';
  * </Alert>
  * ```
  */
-export declare const AlertClose: React.ForwardRefExoticComponent<Omit<AlertCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertClose: {
+    ({ ref: forwardedRef, ...props }: AlertCloseProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertClose.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AlertCloseProps } from './types.js';
 /**
  * Close button — sets Alert's `open` to `false` and fires `onOpenChange(false)`. Carries default accessible name from root's `closeLabel` (default: `"Dismiss"`).
@@ -13,4 +13,7 @@ import type { AlertCloseProps } from './types.js';
  * </Alert>
  * ```
  */
-export declare const AlertClose: React.ForwardRefExoticComponent<Omit<AlertCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AlertClose: {
+    ({ ref: forwardedRef, ...props }: AlertCloseProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertDescription.d.cts

@@ -11,4 +11,7 @@ import type { AlertDescriptionProps } from './types.cjs';
  * </Alert>
  * ```
  */
-export declare const AlertDescription: React.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDescription: {
+    ({ ref: forwardedRef, ...props }: AlertDescriptionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertDescription.d.ts

@@ -11,4 +11,7 @@ import type { AlertDescriptionProps } from './types.js';
  * </Alert>
  * ```
  */
-export declare const AlertDescription: React.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDescription: {
+    ({ ref: forwardedRef, ...props }: AlertDescriptionProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertIcon.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AlertIconProps } from './types.cjs';
 /**
  * Purely decorative icon slot for an `Alert` — always rendered with
@@ -13,4 +13,7 @@ import type { AlertIconProps } from './types.cjs';
  * </Alert>
  * ```
  */
-export declare const AlertIcon: React.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AlertIcon: {
+    ({ ref: forwardedRef, ...props }: AlertIconProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertIcon.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AlertIconProps } from './types.js';
 /**
  * Purely decorative icon slot for an `Alert` — always rendered with
@@ -13,4 +13,7 @@ import type { AlertIconProps } from './types.js';
  * </Alert>
  * ```
  */
-export declare const AlertIcon: React.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AlertIcon: {
+    ({ ref: forwardedRef, ...props }: AlertIconProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertTitle.d.cts

@@ -11,4 +11,7 @@ import type { AlertTitleProps } from './types.cjs';
  * </Alert>
  * ```
  */
-export declare const AlertTitle: React.ForwardRefExoticComponent<Omit<AlertTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const AlertTitle: {
+    ({ ref: forwardedRef, ...props }: AlertTitleProps): React.ReactNode;
+    displayName: string;
+};

package/dist/alert/AlertTitle.d.ts

@@ -11,4 +11,7 @@ import type { AlertTitleProps } from './types.js';
  * </Alert>
  * ```
  */
-export declare const AlertTitle: React.ForwardRefExoticComponent<Omit<AlertTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const AlertTitle: {
+    ({ ref: forwardedRef, ...props }: AlertTitleProps): React.ReactNode;
+    displayName: string;
+};