@skdx/react 0.26.0

package/dist/accordion/types.d.ts

@@ -0,0 +1,131 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared state distributed from {@link Accordion} to its items via context. Not part of the public API. */
+export interface AccordionContextValue {
+    value: string[];
+    onItemOpen: (value: string) => void;
+    onItemClose: (value: string) => void;
+    type: 'single' | 'multiple';
+    collapsible: boolean;
+    disabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+}
+interface AccordionBaseProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Prevents every item's trigger from opening/closing when set.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right
+     * vs Arrow Up/Down for keyboard navigation between triggers.
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** Props for the {@link Accordion} root when `type="single"` — only one item can be open at a time. */
+export interface AccordionSingleProps extends AccordionBaseProps {
+    /** Restricts the accordion to a single open item. */
+    type: 'single';
+    /**
+     * Value of the currently open item, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own open item internally.
+     */
+    value?: string;
+    /**
+     * Value of the initially open item, for uncontrolled usage.
+     * @default undefined — starts with every item closed.
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new open item's value whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Allow closing the open item so all items can be closed.
+     * @default false
+     */
+    collapsible?: boolean;
+}
+/** Props for the {@link Accordion} root when `type="multiple"` — any number of items can be open at once. */
+export interface AccordionMultipleProps extends AccordionBaseProps {
+    /** Allows multiple items to be open simultaneously. */
+    type: 'multiple';
+    /**
+     * Values of the currently open items, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own open items internally.
+     */
+    value?: string[];
+    /**
+     * Values of the initially open items, for uncontrolled usage.
+     * @default undefined — starts with every item closed.
+     */
+    defaultValue?: string[];
+    /**
+     * Fires with the new set of open item values whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string[]) => void;
+}
+/** Props for the {@link Accordion} root — a discriminated union on `type` picking single- or multiple-item expansion. */
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+/** @internal Normalized union of {@link AccordionSingleProps} and {@link AccordionMultipleProps} used inside the `Accordion` implementation. Not part of the public API. */
+export type AccordionImplProps = AccordionBaseProps & {
+    type: 'single' | 'multiple';
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string & string[]) => void;
+    collapsible?: boolean;
+};
+/** @internal Shared state distributed from {@link AccordionItem} to its header/trigger/content via context. Not part of the public API. */
+export interface AccordionItemContextValue {
+    open: boolean;
+    disabled: boolean;
+    triggerId: string;
+    contentId: string;
+    value: string;
+}
+/** Props for {@link AccordionItem}, a single expandable section within an {@link Accordion}. */
+export interface AccordionItemProps extends PrimitivePropsWithRef<'div'> {
+    /** Unique identifier matched against the accordion root's open value(s). */
+    value: string;
+    /**
+     * Prevents this item's trigger from opening/closing, independent of the
+     * accordion root's `disabled`.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for {@link AccordionHeader}, the heading wrapper around an {@link AccordionTrigger}. */
+export interface AccordionHeaderProps extends PrimitivePropsWithRef<'h3'> {
+}
+/** Props for {@link AccordionTrigger}, the button that opens/closes its {@link AccordionItem}. */
+export interface AccordionTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link AccordionContent}, the panel revealed when its {@link AccordionItem} is open. */
+export interface AccordionContentProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep this panel mounted (hidden via the `hidden` attribute) even while
+     * closed, instead of unmounting it. Useful for animation libraries that
+     * need the outgoing panel present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Keep this panel mounted while closed as `hidden="until-found"` instead of
+     * `hidden=""`, so browser find-in-page (and same-page fragment navigation)
+     * can search the closed panel's text and expand the item to reveal a match.
+     * Implies `forceMount`.
+     *
+     * Support caveat: `hidden="until-found"` and its `beforematch` event are
+     * Chromium-first and still uneven across browsers. Where unsupported the
+     * attribute degrades to a plain `hidden`, so the panel stays correctly
+     * hidden — you lose find-in-page, not correctness. It also applies
+     * `content-visibility: hidden` rather than `display: none`, so a brand
+     * layer must not additionally set `display: none` on closed panels or the
+     * text becomes unsearchable again.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+}
+export {};

package/dist/affix/Affix.cjs

@@ -0,0 +1 @@
+"use strict";var V=Object.create;var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var s in t)a(e,s,{get:t[s],enumerable:!0})},C=(e,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!T.call(e,n)&&n!==s&&a(e,n,{get:()=>t[n],enumerable:!(i=w(t,n))||i.enumerable});return e};var q=(e,t,s)=>(s=e!=null?V(O(e)):{},C(t||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e)),z=e=>C(a({},"__esModule",{value:!0}),e);var F={};W(F,{Affix:()=>l});module.exports=z(F);var r=q(require("react"),1),b=require("../utils/composeRefs.cjs"),A=require("../utils/part.cjs"),H=require("../utils/primitive.cjs"),k=require("../utils/useCallbackRef.cjs"),f=require("react/jsx-runtime"),l=r.forwardRef(({offsetTop:e,offsetBottom:t,target:s,onChange:i,disabled:n=!1,style:E,...u},M)=>{let[$,D]=r.useState(!1),[I,d]=r.useState(0),p=r.useRef(null),c=r.useRef(null),L=(0,b.useComposedRefs)(M,c),x=(0,k.useCallbackRef)(i),R=r.useRef(!1),m=!n&&(e!=null||t!=null),h=`${-(e??0)}px 0px ${-(t??0)}px 0px`;r.useEffect(()=>{d(c.current?.offsetHeight??0)},[]),r.useEffect(()=>{let g=p.current;if(!m||!g||typeof IntersectionObserver>"u")return;let v=new IntersectionObserver(y=>{let P=y[y.length-1];if(!P)return;let o=!P.isIntersecting;R.current!==o&&(R.current=o,d(c.current?.offsetHeight??0),D(o),x(o))},{root:s?.current??null,rootMargin:h,threshold:0});return v.observe(g),()=>v.disconnect()},[m,h,s,x]);let S={"--skdx-affix-height":`${I}px`};return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)("div",{"data-skdx-affix-sentinel":"","aria-hidden":"true",ref:p,style:S}),(0,f.jsx)(H.Primitive.div,{"data-state":$?"affixed":"static","data-disabled":n?"":void 0,...u,...(0,A.skdxPart)("affix","root",u.className),ref:L,style:{...S,...E}})]})});l.displayName="Affix";0&&(module.exports={Affix});

package/dist/affix/Affix.d.cts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { AffixProps } from './types.cjs';
+/**
+ * Reports when an element has scrolled past a given offset, so it can be
+ * pinned. Renders a zero-height sentinel just before the element and watches
+ * it with a single `IntersectionObserver` — never a scroll listener, so
+ * nothing runs per frame and nothing reads layout on the scroll path.
+ *
+ * Headless, so it pins nothing by itself: it flips
+ * `data-state="affixed" | "static"`, calls `onChange`, and publishes the
+ * element's measured in-flow height as the `--skdx-affix-height` CSS custom
+ * property (on both the element and the sentinel) so the consumer can reserve
+ * the space the element vacates. The positioning is one CSS rule you write:
+ *
+ * ```css
+ * [data-state='affixed'] {
+ *   position: fixed;
+ *   top: 0;
+ * }
+ * ```
+ *
+ * **Reach for `position: sticky` first.** Plain sticky needs no JavaScript and
+ * no component. Affix earns its place when you need to *know* about the
+ * transition — a shadow that appears only once a header sticks, an analytics
+ * ping, a title that swaps in — which CSS alone cannot tell you.
+ *
+ * @example
+ * ```tsx
+ * const [affixed, setAffixed] = React.useState(false);
+ *
+ * <Affix offsetTop={0} onChange={setAffixed}>
+ *   <Toolbar shadow={affixed} />
+ * </Affix>
+ * ```
+ */
+export declare const Affix: React.ForwardRefExoticComponent<Omit<AffixProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/affix/Affix.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { AffixProps } from './types.js';
+/**
+ * Reports when an element has scrolled past a given offset, so it can be
+ * pinned. Renders a zero-height sentinel just before the element and watches
+ * it with a single `IntersectionObserver` — never a scroll listener, so
+ * nothing runs per frame and nothing reads layout on the scroll path.
+ *
+ * Headless, so it pins nothing by itself: it flips
+ * `data-state="affixed" | "static"`, calls `onChange`, and publishes the
+ * element's measured in-flow height as the `--skdx-affix-height` CSS custom
+ * property (on both the element and the sentinel) so the consumer can reserve
+ * the space the element vacates. The positioning is one CSS rule you write:
+ *
+ * ```css
+ * [data-state='affixed'] {
+ *   position: fixed;
+ *   top: 0;
+ * }
+ * ```
+ *
+ * **Reach for `position: sticky` first.** Plain sticky needs no JavaScript and
+ * no component. Affix earns its place when you need to *know* about the
+ * transition — a shadow that appears only once a header sticks, an analytics
+ * ping, a title that swaps in — which CSS alone cannot tell you.
+ *
+ * @example
+ * ```tsx
+ * const [affixed, setAffixed] = React.useState(false);
+ *
+ * <Affix offsetTop={0} onChange={setAffixed}>
+ *   <Toolbar shadow={affixed} />
+ * </Affix>
+ * ```
+ */
+export declare const Affix: React.ForwardRefExoticComponent<Omit<AffixProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/affix/Affix.js

@@ -0,0 +1 @@
+import*as e from"react";import{useComposedRefs as E}from"../utils/composeRefs.js";import{skdxPart as M}from"../utils/part.js";import{Primitive as $}from"../utils/primitive.js";import{useCallbackRef as D}from"../utils/useCallbackRef.js";import{Fragment as I,jsx as g,jsxs as L}from"react/jsx-runtime";var v=e.forwardRef(({offsetTop:s,offsetBottom:n,target:f,onChange:y,disabled:i=!1,style:P,...o},C)=>{let[b,A]=e.useState(!1),[H,a]=e.useState(0),c=e.useRef(null),r=e.useRef(null),k=E(C,r),l=D(y),u=e.useRef(!1),d=!i&&(s!=null||n!=null),p=`${-(s??0)}px 0px ${-(n??0)}px 0px`;e.useEffect(()=>{a(r.current?.offsetHeight??0)},[]),e.useEffect(()=>{let R=c.current;if(!d||!R||typeof IntersectionObserver>"u")return;let m=new IntersectionObserver(h=>{let S=h[h.length-1];if(!S)return;let t=!S.isIntersecting;u.current!==t&&(u.current=t,a(r.current?.offsetHeight??0),A(t),l(t))},{root:f?.current??null,rootMargin:p,threshold:0});return m.observe(R),()=>m.disconnect()},[d,p,f,l]);let x={"--skdx-affix-height":`${H}px`};return L(I,{children:[g("div",{"data-skdx-affix-sentinel":"","aria-hidden":"true",ref:c,style:x}),g($.div,{"data-state":b?"affixed":"static","data-disabled":i?"":void 0,...o,...M("affix","root",o.className),ref:k,style:{...x,...P}})]})});v.displayName="Affix";export{v as Affix};

package/dist/affix/index.d.cts

@@ -0,0 +1,2 @@
+export { Affix } from './Affix.cjs';
+export type { AffixProps } from './types.cjs';

package/dist/affix/index.d.ts

@@ -0,0 +1,2 @@
+export { Affix } from './Affix.js';
+export type { AffixProps } from './types.js';

package/dist/affix/types.d.cts

@@ -0,0 +1,39 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Affix} root — the only part of this family. */
+export interface AffixProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
+    /**
+     * Distance from the top edge of the scroll root at which the element counts
+     * as affixed. `0` flips the moment the element would scroll off the top;
+     * `64` flips 64px earlier, which is what you want under a fixed site header.
+     * @default undefined — the top edge is never pinned. With `offsetBottom` also
+     * unset the component observes nothing at all, so set at least one of them.
+     */
+    offsetTop?: number;
+    /**
+     * Distance from the bottom edge of the scroll root at which the element
+     * counts as affixed — the mirror of `offsetTop`, for a bar pinned to the
+     * bottom until its natural position scrolls into view.
+     * @default undefined — the bottom edge is never pinned.
+     */
+    offsetBottom?: number;
+    /**
+     * Ref to the scrolling ancestor the offsets are measured against, used as
+     * the `IntersectionObserver` root.
+     * @default undefined — measured against the viewport.
+     */
+    target?: React.RefObject<HTMLElement | null>;
+    /**
+     * Fires with the new value whenever the affixed state flips, and only then —
+     * it is deduped, so a scroll that does not cross the threshold emits nothing.
+     * @default undefined — no-op if omitted; `data-state` still flips.
+     */
+    onChange?: (affixed: boolean) => void;
+    /**
+     * Stops observing entirely: no `IntersectionObserver` is created and
+     * `data-state` stays `"static"`. Use it to switch the behaviour off at a
+     * breakpoint without unmounting the subtree.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/affix/types.d.ts

@@ -0,0 +1,39 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link Affix} root — the only part of this family. */
+export interface AffixProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
+    /**
+     * Distance from the top edge of the scroll root at which the element counts
+     * as affixed. `0` flips the moment the element would scroll off the top;
+     * `64` flips 64px earlier, which is what you want under a fixed site header.
+     * @default undefined — the top edge is never pinned. With `offsetBottom` also
+     * unset the component observes nothing at all, so set at least one of them.
+     */
+    offsetTop?: number;
+    /**
+     * Distance from the bottom edge of the scroll root at which the element
+     * counts as affixed — the mirror of `offsetTop`, for a bar pinned to the
+     * bottom until its natural position scrolls into view.
+     * @default undefined — the bottom edge is never pinned.
+     */
+    offsetBottom?: number;
+    /**
+     * Ref to the scrolling ancestor the offsets are measured against, used as
+     * the `IntersectionObserver` root.
+     * @default undefined — measured against the viewport.
+     */
+    target?: React.RefObject<HTMLElement | null>;
+    /**
+     * Fires with the new value whenever the affixed state flips, and only then —
+     * it is deduped, so a scroll that does not cross the threshold emits nothing.
+     * @default undefined — no-op if omitted; `data-state` still flips.
+     */
+    onChange?: (affixed: boolean) => void;
+    /**
+     * Stops observing entirely: no `IntersectionObserver` is created and
+     * `data-state` stays `"static"`. Use it to switch the behaviour off at a
+     * breakpoint without unmounting the subtree.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/alert/Alert.cjs

@@ -0,0 +1 @@
+"use strict";var _=Object.create;var p=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var re=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},C=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of j(t))!te.call(e,i)&&i!==r&&p(e,i,{get:()=>t[i],enumerable:!(o=$(t,i))||o.enumerable});return e};var a=(e,t,r)=>(r=e!=null?_(ee(e)):{},C(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),oe=e=>C(p({},"__esModule",{value:!0}),e);var ie={};re(ie,{Alert:()=>N,AlertAction:()=>x,AlertClose:()=>u,AlertDescription:()=>d,AlertIcon:()=>P,AlertProvider:()=>I,AlertTitle:()=>A,useAlertContext:()=>l});module.exports=oe(ie);var s=a(require("react"),1),v=require("../utils/createContext.cjs"),T=require("../utils/part.cjs"),D=require("../utils/primitive.cjs"),H=require("../utils/useControllableState.cjs"),f=require("react/jsx-runtime"),[I,l]=(0,v.createSafeContext)("Alert"),N=s.forwardRef(({role:e="status",open:t,defaultOpen:r=!0,onOpenChange:o,...i},K)=>{let R=s.useId(),y=s.useId(),[Q,U]=s.useState(!1),[W,X]=s.useState(!1),[Y=!0,Z]=(0,H.useControllableState)({prop:t,defaultProp:r,onChange:o});return(0,f.jsx)(I,{titleId:R,descriptionId:y,setHasTitle:U,setHasDescription:X,onOpenChange:Z,children:Y?(0,f.jsx)(D.Primitive.div,{role:e,"aria-live":e==="alert"?"assertive":"polite","aria-labelledby":Q?R:void 0,"aria-describedby":W?y:void 0,...i,...(0,T.skdxPart)("alert","root",i.className),ref:K}):null})});N.displayName="Alert";var n=a(require("react"),1),b=require("../utils/part.cjs"),E=require("../utils/primitive.cjs");var k=require("react/jsx-runtime"),A=n.forwardRef((e,t)=>{let r=l("AlertTitle"),{setHasTitle:o}=r;return n.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,k.jsx)(E.Primitive.h3,{id:r.titleId,...e,...(0,b.skdxPart)("alert","title",e.className),ref:t})});A.displayName="AlertTitle";var m=a(require("react"),1),h=require("../utils/part.cjs"),w=require("../utils/primitive.cjs");var L=require("react/jsx-runtime"),d=m.forwardRef((e,t)=>{let r=l("AlertDescription"),{setHasDescription:o}=r;return m.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,L.jsx)(w.Primitive.div,{id:r.descriptionId,...e,...(0,h.skdxPart)("alert","description",e.className),ref:t})});d.displayName="AlertDescription";var M=a(require("react"),1),S=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),O=require("react/jsx-runtime"),P=M.forwardRef((e,t)=>(0,O.jsx)(g.Primitive.span,{"aria-hidden":"true",...e,...(0,S.skdxPart)("alert","icon",e.className),ref:t}));P.displayName="AlertIcon";var V=a(require("react"),1),B=require("../utils/part.cjs"),c=require("../utils/primitive.cjs");var q=require("react/jsx-runtime"),u=V.forwardRef((e,t)=>{let r=l("AlertClose");return(0,q.jsx)(c.Primitive.button,{type:"button","aria-label":"Dismiss",...e,...(0,B.skdxPart)("alert","close",e.className),ref:t,onClick:(0,c.composeEventHandlers)(e.onClick,()=>r.onOpenChange(!1))})});u.displayName="AlertClose";var z=a(require("react"),1),F=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),J=require("react/jsx-runtime"),x=z.forwardRef((e,t)=>(0,J.jsx)(G.Primitive.div,{...e,...(0,F.skdxPart)("alert","action",e.className),ref:t}));x.displayName="AlertAction";0&&(module.exports={Alert,AlertAction,AlertClose,AlertDescription,AlertIcon,AlertProvider,AlertTitle,useAlertContext});

package/dist/alert/Alert.d.cts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { AlertContextValue, AlertProps } from './types.cjs';
+export declare const AlertProvider: {
+    (props: AlertContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAlertContext: (consumerName: string) => AlertContextValue;
+/**
+ * Inline message region — distinct from Toast, which is a floating,
+ * auto-dismissing notification. Generates `titleId` / `descriptionId` and
+ * wires them to `aria-labelledby` / `aria-describedby` on the root, and sets
+ * `aria-live` (`"polite"` for `role="status"`, `"assertive"` for
+ * `role="alert"`). Hands the ids and the dismissal callback down 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.
+ *
+ * @example
+ * ```tsx
+ * <Alert role="alert">
+ *   <AlertIcon>⚠️</AlertIcon>
+ *   <AlertTitle>Something went wrong</AlertTitle>
+ *   <AlertDescription>Please try again.</AlertDescription>
+ *   <AlertAction><button type="button">Retry</button></AlertAction>
+ *   <AlertClose>✕</AlertClose>
+ * </Alert>
+ * ```
+ */
+export declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/alert/Alert.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { AlertContextValue, AlertProps } from './types.js';
+export declare const AlertProvider: {
+    (props: AlertContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAlertContext: (consumerName: string) => AlertContextValue;
+/**
+ * Inline message region — distinct from Toast, which is a floating,
+ * auto-dismissing notification. Generates `titleId` / `descriptionId` and
+ * wires them to `aria-labelledby` / `aria-describedby` on the root, and sets
+ * `aria-live` (`"polite"` for `role="status"`, `"assertive"` for
+ * `role="alert"`). Hands the ids and the dismissal callback down 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.
+ *
+ * @example
+ * ```tsx
+ * <Alert role="alert">
+ *   <AlertIcon>⚠️</AlertIcon>
+ *   <AlertTitle>Something went wrong</AlertTitle>
+ *   <AlertDescription>Please try again.</AlertDescription>
+ *   <AlertAction><button type="button">Retry</button></AlertAction>
+ *   <AlertClose>✕</AlertClose>
+ * </Alert>
+ * ```
+ */
+export declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/alert/Alert.js

@@ -0,0 +1 @@
+import*as i from"react";import{createSafeContext as b}from"../utils/createContext.js";import{skdxPart as E}from"../utils/part.js";import{Primitive as k}from"../utils/primitive.js";import{useControllableState as h}from"../utils/useControllableState.js";import{jsx as c}from"react/jsx-runtime";var[w,s]=b("Alert"),L=i.forwardRef(({role:e="status",open:t,defaultOpen:r=!0,onOpenChange:o,...p},C)=>{let n=i.useId(),m=i.useId(),[v,T]=i.useState(!1),[D,H]=i.useState(!1),[I=!0,N]=h({prop:t,defaultProp:r,onChange:o});return c(w,{titleId:n,descriptionId:m,setHasTitle:T,setHasDescription:H,onOpenChange:N,children:I?c(k.div,{role:e,"aria-live":e==="alert"?"assertive":"polite","aria-labelledby":v?n:void 0,"aria-describedby":D?m:void 0,...p,...E("alert","root",p.className),ref:C}):null})});L.displayName="Alert";import*as l from"react";import{skdxPart as M}from"../utils/part.js";import{Primitive as S}from"../utils/primitive.js";import{jsx as g}from"react/jsx-runtime";var f=l.forwardRef((e,t)=>{let r=s("AlertTitle"),{setHasTitle:o}=r;return l.useEffect(()=>(o(!0),()=>o(!1)),[o]),g(S.h3,{id:r.titleId,...e,...M("alert","title",e.className),ref:t})});f.displayName="AlertTitle";import*as a from"react";import{skdxPart as O}from"../utils/part.js";import{Primitive as V}from"../utils/primitive.js";import{jsx as B}from"react/jsx-runtime";var A=a.forwardRef((e,t)=>{let r=s("AlertDescription"),{setHasDescription:o}=r;return a.useEffect(()=>(o(!0),()=>o(!1)),[o]),B(V.div,{id:r.descriptionId,...e,...O("alert","description",e.className),ref:t})});A.displayName="AlertDescription";import*as d from"react";import{skdxPart as q}from"../utils/part.js";import{Primitive as z}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var P=d.forwardRef((e,t)=>F(z.span,{"aria-hidden":"true",...e,...q("alert","icon",e.className),ref:t}));P.displayName="AlertIcon";import*as u from"react";import{skdxPart as G}from"../utils/part.js";import{composeEventHandlers as J,Primitive as K}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var x=u.forwardRef((e,t)=>{let r=s("AlertClose");return Q(K.button,{type:"button","aria-label":"Dismiss",...e,...G("alert","close",e.className),ref:t,onClick:J(e.onClick,()=>r.onOpenChange(!1))})});x.displayName="AlertClose";import*as R from"react";import{skdxPart as U}from"../utils/part.js";import{Primitive as W}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var y=R.forwardRef((e,t)=>X(W.div,{...e,...U("alert","action",e.className),ref:t}));y.displayName="AlertAction";export{L as Alert,y as AlertAction,x as AlertClose,A as AlertDescription,P as AlertIcon,w as AlertProvider,f as AlertTitle,s as useAlertContext};

package/dist/alert/AlertAction.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { AlertActionProps } from './types.cjs';
+/**
+ * Container for the alert's buttons and links ("Retry", "View details"). A
+ * plain `<div>` with no role and no behavior — it exists so the action row
+ * is an addressable part to style and to compose against, not to wrap or
+ * re-implement the controls inside it.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Upload failed</AlertTitle>
+ *   <AlertAction>
+ *     <button type="button" onClick={retry}>Retry</button>
+ *     <a href="/logs">View log</a>
+ *   </AlertAction>
+ * </Alert>
+ * ```
+ */
+export declare const AlertAction: React.ForwardRefExoticComponent<Omit<AlertActionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/alert/AlertAction.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { AlertActionProps } from './types.js';
+/**
+ * Container for the alert's buttons and links ("Retry", "View details"). A
+ * plain `<div>` with no role and no behavior — it exists so the action row
+ * is an addressable part to style and to compose against, not to wrap or
+ * re-implement the controls inside it.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Upload failed</AlertTitle>
+ *   <AlertAction>
+ *     <button type="button" onClick={retry}>Retry</button>
+ *     <a href="/logs">View log</a>
+ *   </AlertAction>
+ * </Alert>
+ * ```
+ */
+export declare const AlertAction: React.ForwardRefExoticComponent<Omit<AlertActionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/alert/AlertClose.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { AlertCloseProps } from './types.cjs';
+/**
+ * Button that dismisses the alert when clicked — sets the Alert's `open` to
+ * `false` (uncontrolled) and fires `onOpenChange(false)` either way. Must be
+ * used inside an `Alert`.
+ *
+ * Carries a default `aria-label="Dismiss"` so the common icon-only close
+ * button is never an unnamed button; pass your own `aria-label` (or visible
+ * text) to override it.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Update available</AlertTitle>
+ *   <AlertClose aria-label="Dismiss update notice">✕</AlertClose>
+ * </Alert>
+ * ```
+ */
+export declare const AlertClose: React.ForwardRefExoticComponent<Omit<AlertCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/alert/AlertClose.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { AlertCloseProps } from './types.js';
+/**
+ * Button that dismisses the alert when clicked — sets the Alert's `open` to
+ * `false` (uncontrolled) and fires `onOpenChange(false)` either way. Must be
+ * used inside an `Alert`.
+ *
+ * Carries a default `aria-label="Dismiss"` so the common icon-only close
+ * button is never an unnamed button; pass your own `aria-label` (or visible
+ * text) to override it.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Update available</AlertTitle>
+ *   <AlertClose aria-label="Dismiss update notice">✕</AlertClose>
+ * </Alert>
+ * ```
+ */
+export declare const AlertClose: React.ForwardRefExoticComponent<Omit<AlertCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/alert/AlertDescription.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { AlertDescriptionProps } from './types.cjs';
+/**
+ * Renders a `<div>` with the `id` referenced by the parent `Alert`'s
+ * `aria-describedby`, so its text is announced as the alert's description.
+ * Must be used inside an `Alert`.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Update available</AlertTitle>
+ *   <AlertDescription>A new version is ready to install.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+export declare const AlertDescription: React.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/alert/AlertDescription.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { AlertDescriptionProps } from './types.js';
+/**
+ * Renders a `<div>` with the `id` referenced by the parent `Alert`'s
+ * `aria-describedby`, so its text is announced as the alert's description.
+ * Must be used inside an `Alert`.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Update available</AlertTitle>
+ *   <AlertDescription>A new version is ready to install.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+export declare const AlertDescription: React.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/alert/AlertIcon.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { AlertIconProps } from './types.cjs';
+/**
+ * Purely decorative icon slot for an `Alert` — always rendered with
+ * `aria-hidden="true"` so screen readers rely on the title/description text
+ * instead.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertIcon><WarningIcon /></AlertIcon>
+ *   <AlertTitle>Heads up</AlertTitle>
+ * </Alert>
+ * ```
+ */
+export declare const AlertIcon: React.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/alert/AlertIcon.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { AlertIconProps } from './types.js';
+/**
+ * Purely decorative icon slot for an `Alert` — always rendered with
+ * `aria-hidden="true"` so screen readers rely on the title/description text
+ * instead.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertIcon><WarningIcon /></AlertIcon>
+ *   <AlertTitle>Heads up</AlertTitle>
+ * </Alert>
+ * ```
+ */
+export declare const AlertIcon: React.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/alert/AlertTitle.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { AlertTitleProps } from './types.cjs';
+/**
+ * Renders an `<h3>` with the `id` referenced by the parent `Alert`'s
+ * `aria-labelledby`, so its text is announced as the alert's label. Must be
+ * used inside an `Alert`.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Update available</AlertTitle>
+ *   <AlertDescription>A new version is ready to install.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+export declare const AlertTitle: React.ForwardRefExoticComponent<Omit<AlertTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/alert/AlertTitle.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { AlertTitleProps } from './types.js';
+/**
+ * Renders an `<h3>` with the `id` referenced by the parent `Alert`'s
+ * `aria-labelledby`, so its text is announced as the alert's label. Must be
+ * used inside an `Alert`.
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Update available</AlertTitle>
+ *   <AlertDescription>A new version is ready to install.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+export declare const AlertTitle: React.ForwardRefExoticComponent<Omit<AlertTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/alert/index.d.cts

@@ -0,0 +1,7 @@
+export * from './Alert.cjs';
+export { AlertTitle } from './AlertTitle.cjs';
+export { AlertDescription } from './AlertDescription.cjs';
+export { AlertIcon } from './AlertIcon.cjs';
+export { AlertClose } from './AlertClose.cjs';
+export { AlertAction } from './AlertAction.cjs';
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertIconProps, AlertCloseProps, AlertActionProps, } from './types.cjs';

package/dist/alert/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Alert.js';
+export { AlertTitle } from './AlertTitle.js';
+export { AlertDescription } from './AlertDescription.js';
+export { AlertIcon } from './AlertIcon.js';
+export { AlertClose } from './AlertClose.js';
+export { AlertAction } from './AlertAction.js';
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertIconProps, AlertCloseProps, AlertActionProps, } from './types.js';