@skdx/react 0.26.0

package/dist/autocomplete/types.d.ts

@@ -0,0 +1,250 @@
+import type * as React from 'react';
+import type { PopperContentProps } from '../utils/popper.js';
+import type { PortalProps } from '../utils/portal.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
+import type { OptionEntry } from '../utils/useOptionCollection.js';
+/**
+ * Decides which `AutocompleteItem`s survive the current draft text.
+ * `undefined` filters nothing — the consumer renders only the suggestions that
+ * match, which is what an async or server-side search needs.
+ */
+export type AutocompleteFilter = (itemText: string, inputValue: string) => boolean;
+/** @internal Shared state distributed from {@link Autocomplete} to its parts via context. Not part of the public API. */
+export interface AutocompleteContextValue {
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    /** The optional `AutocompleteTrigger`, if one is mounted. Part of the layer for dismissal purposes: it toggles on *click*, so a pointer-down on it must not be reported as an outside interaction and close the popup the click is about to reopen. */
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    /** Id of `AutocompleteList`, referenced by the input's `aria-controls`. */
+    listId: string;
+    /** The committed value — the answer the form takes, which need not be one of the suggestions. */
+    value: string;
+    /** Whether an option value is the committed one, for `aria-selected`. */
+    isSelected: (value: string) => boolean;
+    /** The draft text currently in the input. */
+    inputValue: string;
+    onInputValueChange: (value: string) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    activeId: string | null;
+    setActiveId: (id: string | null) => void;
+    moveActive: (direction: 1 | -1) => void;
+    openWithHighlight: (edge: 'first' | 'last') => void;
+    itemCount: number;
+    registerItem: (id: string, entry: OptionEntry) => void;
+    unregisterItem: (id: string) => void;
+    getItem: (id: string) => OptionEntry | undefined;
+    /** Whether an item with this text survives the current `filter` and draft text. */
+    matchesFilter: (itemText: string) => boolean;
+    /** Commits a suggestion: writes its text into the input, its value into `value`, and closes. */
+    commitItem: (value: string, text: string) => void;
+    /** Commits the raw draft text as the value (Tab, blur) — or restores the last committed text when `allowCustomValue` is off. */
+    commitInputValue: () => void;
+    /** Closes and puts the last committed text back in the input (Escape). */
+    revert: () => void;
+    allowCustomValue: boolean;
+    openOnFocus: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+}
+/** Props for the {@link Autocomplete} root. */
+export interface AutocompleteProps {
+    /**
+     * The `AutocompleteInput`/`AutocompletePortal` parts, rendered as children —
+     * `Autocomplete` itself renders no DOM.
+     * @default undefined — renders nothing without children.
+     */
+    children?: React.ReactNode;
+    /**
+     * The committed value, for controlled usage. Pair with `onValueChange`. This
+     * is a *separate* state from `inputValue`: the draft text moves on every
+     * keystroke, the value only when something is committed.
+     * @default undefined — uncontrolled, tracks its own committed value internally.
+     */
+    value?: string;
+    /**
+     * Initial committed value, for uncontrolled usage. Also seeds
+     * `defaultInputValue`, so an autocomplete restored from saved state shows
+     * the text it committed rather than an empty field.
+     * @default '' — nothing committed, so blurring an untouched field commits nothing.
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new committed value — on Enter, on a suggestion click, on
+     * Tab, and on blur. Never on a keystroke.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The draft text in the input, for controlled usage. Pair with
+     * `onInputValueChange` — typically used to drive filtering of the suggestion
+     * list, since filtering is the consumer's job unless `filter` is supplied.
+     * @default undefined — uncontrolled, tracks its own draft text internally.
+     */
+    inputValue?: string;
+    /**
+     * Initial draft text, for uncontrolled usage.
+     * @default defaultValue — the field opens showing whatever value it starts committed to.
+     */
+    defaultInputValue?: string;
+    /**
+     * Fires with the new draft text on every keystroke, and whenever a commit or
+     * a revert rewrites the field.
+     * @default undefined — no-op if omitted.
+     */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Whether the suggestion popup is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `AutocompleteContent`'s enter or exit animation ends, or as soon as it
+     * has settled when the popup declares no animation. Use it for work that must
+     * not race the transition; use `onOpenChange` for work that must not wait for it.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * Lets the committed value be text that is not in the suggestion list — Tab,
+     * Enter with nothing highlighted, and blur all commit the raw draft. This is
+     * the whole point of the family: an autocomplete *suggests*, it does not
+     * constrain. Turn it off and an unmatched draft is discarded on blur and the
+     * last committed text is put back, which makes this a
+     * `Combobox` with extra steps — reach for that instead.
+     * @default true
+     */
+    allowCustomValue?: boolean;
+    /**
+     * Opens the suggestion popup as soon as the input takes focus, instead of
+     * waiting for the first keystroke. Off by default: an empty field usually
+     * means an unfiltered list, and dropping the entire dataset over the page on
+     * focus is rarely what the user asked for.
+     * @default false
+     */
+    openOnFocus?: boolean;
+    /**
+     * Predicate deciding which `AutocompleteItem`s survive the current draft
+     * text. Every item is measured (its `textValue`, or its rendered text) and
+     * the rejected ones render nothing at all, so they leave the suggestion
+     * count, the highlight order, and `AutocompleteEmpty` exactly as if the
+     * consumer had removed them.
+     * @default undefined — nothing is filtered; the consumer renders only the matching items, which is what an async or server-side search needs.
+     */
+    filter?: AutocompleteFilter;
+    /**
+     * Blocks all interaction: the input is natively `disabled`, so it is not
+     * focusable and the popup can never open.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the committed text but blocks any change to it — the input is
+     * natively `readOnly` and still focusable (unlike `disabled`), and no
+     * keystroke, Tab or blur commits anything.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on
+     * `AutocompleteInput`.
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Formats the message announced (through the shared `LiveAnnouncer`) each
+     * time the number of rendered suggestions changes while the popup is open.
+     * Filtering changes nothing `aria-expanded` or `aria-activedescendant`
+     * reports, so this count is the only signal a screen-reader user gets that
+     * typing narrowed anything. Return an empty string to announce nothing.
+     * @default defaultGetSuggestionCountLabel — e.g. `"3 suggestions available"`
+     */
+    getSuggestionCountLabel?: (count: number) => string;
+}
+/** Props for {@link AutocompleteInput}, the free-text field that owns real DOM focus for the whole interaction. */
+export interface AutocompleteInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+}
+/** Props for {@link AutocompleteTrigger}, the optional button that toggles the suggestion popup. */
+export interface AutocompleteTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link AutocompletePortal}, which teleports its content to `document.body` while the popup is open. */
+export interface AutocompletePortalProps extends PortalProps {
+    /**
+     * Render (and mount `AutocompleteContent`) even while closed, instead of
+     * unmounting. Useful for animation libraries that need the outgoing content
+     * present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/**
+ * Props for {@link AutocompleteContent}, the popup shell. Extends
+ * {@link PopperContentProps} (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`) for floating-ui positioning relative
+ * to the input — note `AutocompleteContent` defaults `side` to `'bottom'`,
+ * `align` to `'start'` and `sideOffset` to `4`, instead of the popper base
+ * defaults (`'bottom'` / `'center'` / `0`).
+ */
+export interface AutocompleteContentProps extends PopperContentProps {
+    /**
+     * Keep this popup mounted even while closed, instead of unmounting it.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Fires when Escape is pressed while the popup is open. Call `event.preventDefault()` to stop it from closing — which also leaves the draft text alone, since Escape's default here is "revert to the last committed value and close".
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the popup and the input. Call `event.preventDefault()` to stop the popup from closing.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Fires when focus moves to an element outside the popup and the input. Call `event.preventDefault()` to stop the popup from closing. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/** Props for {@link AutocompleteList}, the `role="listbox"` the suggestions live in. */
+export interface AutocompleteListProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for a single {@link AutocompleteItem} suggestion within `AutocompleteList`. */
+export interface AutocompleteItemProps extends PrimitivePropsWithRef<'div'> {
+    /** Value committed to the autocomplete root when this suggestion is chosen. */
+    value: string;
+    /**
+     * Excludes this suggestion from selection and pointer highlight.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text the root's `filter` predicate matches against, and the text a
+     * commit writes back into `AutocompleteInput`. Only needed when the item
+     * renders more than its label (an icon, a secondary line).
+     * @default undefined — falls back to the item's rendered text content.
+     */
+    textValue?: string;
+}
+/** Props for {@link AutocompleteEmpty}, shown in place of the suggestion list when no items are rendered. */
+export interface AutocompleteEmptyProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/avatar/Avatar.cjs

@@ -0,0 +1 @@
+"use strict";var T=Object.create;var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var z=(a,t)=>{for(var e in t)p(a,e,{get:t[e],enumerable:!0})},I=(a,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of H(t))!q.call(a,r)&&r!==e&&p(a,r,{get:()=>t[r],enumerable:!(o=h(t,r))||o.enumerable});return a};var l=(a,t,e)=>(e=a!=null?T(V(a)):{},I(t||!a||!a.__esModule?p(e,"default",{value:a,enumerable:!0}):e,a)),B=a=>I(p({},"__esModule",{value:!0}),a);var D={};z(D,{Avatar:()=>R,AvatarFallback:()=>v,AvatarImage:()=>u,AvatarProvider:()=>L,useAvatarContext:()=>s});module.exports=B(D);var f=l(require("react"),1),S=require("../utils/createContext.cjs"),P=require("../utils/part.cjs"),x=require("../utils/primitive.cjs"),c=require("react/jsx-runtime"),[L,s]=(0,S.createSafeContext)("Avatar"),R=f.forwardRef((a,t)=>{let[e,o]=f.useState("idle");return(0,c.jsx)(L,{imageLoadingStatus:e,onImageLoadingStatusChange:o,children:(0,c.jsx)(x.Primitive.span,{...a,...(0,P.skdxPart)("avatar","root",a.className),ref:t})})});R.displayName="Avatar";var d=l(require("react"),1),k=require("../utils/part.cjs"),C=require("../utils/primitive.cjs"),w=require("../utils/useCallbackRef.cjs");var b=require("react/jsx-runtime"),u=d.forwardRef(({onLoadingStatusChange:a=()=>{},src:t,...e},o)=>{let r=s("AvatarImage"),n=(0,w.useCallbackRef)(m=>{a(m),r.onImageLoadingStatusChange(m)});return d.useLayoutEffect(()=>{if(!t){n("error");return}let m=!0,g=new window.Image,A=E=>()=>{m&&n(E)};return n("loading"),g.onload=A("loaded"),g.onerror=A("error"),g.src=t,()=>{m=!1}},[t,n]),r.imageLoadingStatus==="loaded"?(0,b.jsx)(C.Primitive.img,{src:t,...e,...(0,k.skdxPart)("avatar","image",e.className),ref:o}):null});u.displayName="AvatarImage";var i=l(require("react"),1),y=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var N=require("react/jsx-runtime"),v=i.forwardRef(({delayMs:a,...t},e)=>{let o=s("AvatarFallback"),[r,n]=i.useState(a===void 0);return i.useEffect(()=>{if(a===void 0)return;let m=window.setTimeout(()=>n(!0),a);return()=>window.clearTimeout(m)},[a]),r&&o.imageLoadingStatus!=="loaded"?(0,N.jsx)(F.Primitive.span,{...t,...(0,y.skdxPart)("avatar","fallback",t.className),ref:e}):null});v.displayName="AvatarFallback";0&&(module.exports={Avatar,AvatarFallback,AvatarImage,AvatarProvider,useAvatarContext});

package/dist/avatar/Avatar.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { AvatarContextValue, AvatarProps } from './types.cjs';
+export declare const AvatarProvider: {
+    (props: AvatarContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAvatarContext: (consumerName: string) => AvatarContextValue;
+/**
+ * Root of an avatar: owns the image's loading status and hands it down to
+ * `AvatarImage` / `AvatarFallback` via context, so the fallback can appear
+ * while the image loads or fails, and the image can replace it once loaded.
+ * Renders a plain `<span>`.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/user.png" alt="Jane Doe" />
+ *   <AvatarFallback delayMs={300}>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { AvatarContextValue, AvatarProps } from './types.js';
+export declare const AvatarProvider: {
+    (props: AvatarContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAvatarContext: (consumerName: string) => AvatarContextValue;
+/**
+ * Root of an avatar: owns the image's loading status and hands it down to
+ * `AvatarImage` / `AvatarFallback` via context, so the fallback can appear
+ * while the image loads or fails, and the image can replace it once loaded.
+ * Renders a plain `<span>`.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/user.png" alt="Jane Doe" />
+ *   <AvatarFallback delayMs={300}>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/avatar/Avatar.js

@@ -0,0 +1 @@
+import*as s from"react";import{createSafeContext as A}from"../utils/createContext.js";import{skdxPart as I}from"../utils/part.js";import{Primitive as S}from"../utils/primitive.js";import{jsx as l}from"react/jsx-runtime";var[P,p]=A("Avatar"),x=s.forwardRef((a,t)=>{let[r,n]=s.useState("idle");return l(P,{imageLoadingStatus:r,onImageLoadingStatusChange:n,children:l(S.span,{...a,...I("avatar","root",a.className),ref:t})})});x.displayName="Avatar";import*as f from"react";import{skdxPart as L}from"../utils/part.js";import{Primitive as R}from"../utils/primitive.js";import{useCallbackRef as k}from"../utils/useCallbackRef.js";import{jsx as C}from"react/jsx-runtime";var c=f.forwardRef(({onLoadingStatusChange:a=()=>{},src:t,...r},n)=>{let i=p("AvatarImage"),o=k(e=>{a(e),i.onImageLoadingStatusChange(e)});return f.useLayoutEffect(()=>{if(!t){o("error");return}let e=!0,d=new window.Image,g=v=>()=>{e&&o(v)};return o("loading"),d.onload=g("loaded"),d.onerror=g("error"),d.src=t,()=>{e=!1}},[t,o]),i.imageLoadingStatus==="loaded"?C(R.img,{src:t,...r,...L("avatar","image",r.className),ref:n}):null});c.displayName="AvatarImage";import*as m from"react";import{skdxPart as w}from"../utils/part.js";import{Primitive as b}from"../utils/primitive.js";import{jsx as y}from"react/jsx-runtime";var u=m.forwardRef(({delayMs:a,...t},r)=>{let n=p("AvatarFallback"),[i,o]=m.useState(a===void 0);return m.useEffect(()=>{if(a===void 0)return;let e=window.setTimeout(()=>o(!0),a);return()=>window.clearTimeout(e)},[a]),i&&n.imageLoadingStatus!=="loaded"?y(b.span,{...t,...w("avatar","fallback",t.className),ref:r}):null});u.displayName="AvatarFallback";export{x as Avatar,u as AvatarFallback,c as AvatarImage,P as AvatarProvider,p as useAvatarContext};

package/dist/avatar/AvatarFallback.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { AvatarFallbackProps } from './types.cjs';
+/**
+ * Renders while the sibling `AvatarImage` hasn't finished loading (idle,
+ * loading, or errored) — typically initials or a placeholder icon. If
+ * `delayMs` is set, rendering is held back for that long to avoid a flash
+ * when the image loads quickly. Must be used inside an `Avatar`.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/user.png" alt="Jane Doe" />
+ *   <AvatarFallback delayMs={300}>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/avatar/AvatarFallback.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { AvatarFallbackProps } from './types.js';
+/**
+ * Renders while the sibling `AvatarImage` hasn't finished loading (idle,
+ * loading, or errored) — typically initials or a placeholder icon. If
+ * `delayMs` is set, rendering is held back for that long to avoid a flash
+ * when the image loads quickly. Must be used inside an `Avatar`.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/user.png" alt="Jane Doe" />
+ *   <AvatarFallback delayMs={300}>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/avatar/AvatarImage.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { AvatarImageProps } from './types.cjs';
+/**
+ * Loads `src` itself (independent of the `<img>` tag's native load event) and
+ * only renders the `<img>` once it has finished loading successfully;
+ * renders nothing while idle, loading, or on error, so a sibling
+ * `AvatarFallback` shows through instead. Must be used inside an `Avatar`.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/user.png" alt="Jane Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/avatar/AvatarImage.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { AvatarImageProps } from './types.js';
+/**
+ * Loads `src` itself (independent of the `<img>` tag's native load event) and
+ * only renders the `<img>` once it has finished loading successfully;
+ * renders nothing while idle, loading, or on error, so a sibling
+ * `AvatarFallback` shows through instead. Must be used inside an `Avatar`.
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/user.png" alt="Jane Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/avatar/index.d.cts

@@ -0,0 +1,4 @@
+export * from './Avatar.cjs';
+export { AvatarImage } from './AvatarImage.cjs';
+export { AvatarFallback } from './AvatarFallback.cjs';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './types.cjs';

package/dist/avatar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Avatar.js';
+export { AvatarImage } from './AvatarImage.js';
+export { AvatarFallback } from './AvatarFallback.js';
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './types.js';

package/dist/avatar/types.d.cts

@@ -0,0 +1,27 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Lifecycle of the {@link AvatarImage}'s underlying image load. */
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+/** @internal Shared image-loading state distributed from {@link Avatar} to its parts via context. Not part of the public API. */
+export interface AvatarContextValue {
+    imageLoadingStatus: ImageLoadingStatus;
+    onImageLoadingStatusChange: (status: ImageLoadingStatus) => void;
+}
+/** Props for the {@link Avatar} root. */
+export interface AvatarProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link AvatarImage} — renders an `<img>` that reports its own load status so {@link Avatar} can show {@link AvatarFallback} until it loads. */
+export interface AvatarImageProps extends PrimitivePropsWithRef<'img'> {
+    /**
+     * Fires whenever the image's loading status changes.
+     * @default undefined — no-op if omitted.
+     */
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+}
+/** Props for {@link AvatarFallback} — rendered in place of {@link AvatarImage} while it loads, fails, or is absent. */
+export interface AvatarFallbackProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Delay before showing the fallback, to avoid a flash on fast connections.
+     * @default undefined — renders immediately, with no delay.
+     */
+    delayMs?: number;
+}

package/dist/avatar/types.d.ts

@@ -0,0 +1,27 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Lifecycle of the {@link AvatarImage}'s underlying image load. */
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+/** @internal Shared image-loading state distributed from {@link Avatar} to its parts via context. Not part of the public API. */
+export interface AvatarContextValue {
+    imageLoadingStatus: ImageLoadingStatus;
+    onImageLoadingStatusChange: (status: ImageLoadingStatus) => void;
+}
+/** Props for the {@link Avatar} root. */
+export interface AvatarProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link AvatarImage} — renders an `<img>` that reports its own load status so {@link Avatar} can show {@link AvatarFallback} until it loads. */
+export interface AvatarImageProps extends PrimitivePropsWithRef<'img'> {
+    /**
+     * Fires whenever the image's loading status changes.
+     * @default undefined — no-op if omitted.
+     */
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+}
+/** Props for {@link AvatarFallback} — rendered in place of {@link AvatarImage} while it loads, fails, or is absent. */
+export interface AvatarFallbackProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Delay before showing the fallback, to avoid a flash on fast connections.
+     * @default undefined — renders immediately, with no delay.
+     */
+    delayMs?: number;
+}

package/dist/badge/Badge.cjs

@@ -0,0 +1 @@
+"use strict";var y=Object.create;var t=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var n=(e,o)=>{for(var r in o)t(e,r,{get:o[r],enumerable:!0})},m=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of P(o))!l.call(e,a)&&a!==r&&t(e,a,{get:()=>o[a],enumerable:!(p=B(o,a))||p.enumerable});return e};var x=(e,o,r)=>(r=e!=null?y(c(e)):{},m(o||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),R=e=>m(t({},"__esModule",{value:!0}),e);var N={};n(N,{Badge:()=>i});module.exports=R(N);var s=x(require("react"),1),d=require("../utils/part.cjs"),f=require("../utils/primitive.cjs"),g=require("react/jsx-runtime"),i=s.forwardRef((e,o)=>(0,g.jsx)(f.Primitive.span,{...e,...(0,d.skdxPart)("badge","root",e.className),ref:o}));i.displayName="Badge";0&&(module.exports={Badge});

package/dist/badge/Badge.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { BadgeProps } from './types.cjs';
+/**
+ * Headless badge. Purely a semantic/structural `<span>` wrapper — color,
+ * size, and variant are brand-layer concerns. With the default skin,
+ * severity comes from `data-status` and form from `data-variant`
+ * (`solid`, `dot`).
+ *
+ * @example
+ * ```tsx
+ * <Badge data-status="success">Active</Badge>
+ * ```
+ */
+export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { BadgeProps } from './types.js';
+/**
+ * Headless badge. Purely a semantic/structural `<span>` wrapper — color,
+ * size, and variant are brand-layer concerns. With the default skin,
+ * severity comes from `data-status` and form from `data-variant`
+ * (`solid`, `dot`).
+ *
+ * @example
+ * ```tsx
+ * <Badge data-status="success">Active</Badge>
+ * ```
+ */
+export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/badge/Badge.js

@@ -0,0 +1 @@
+import*as o from"react";import{skdxPart as a}from"../utils/part.js";import{Primitive as t}from"../utils/primitive.js";import{jsx as m}from"react/jsx-runtime";var p=o.forwardRef((e,r)=>m(t.span,{...e,...a("badge","root",e.className),ref:r}));p.displayName="Badge";export{p as Badge};

package/dist/badge/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Badge.cjs';
+export type { BadgeProps } from './types.cjs';

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge.js';
+export type { BadgeProps } from './types.js';

package/dist/badge/types.d.cts

@@ -0,0 +1,4 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Badge} root. */
+export interface BadgeProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/badge/types.d.ts

@@ -0,0 +1,4 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link Badge} root. */
+export interface BadgeProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/breadcrumb/Breadcrumb.cjs

@@ -0,0 +1 @@
+"use strict";var K=Object.create;var t=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(r,e)=>{for(var a in e)t(r,a,{get:e[a],enumerable:!0})},l=(r,e,a,f)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of U(e))!W.call(r,o)&&o!==a&&t(r,o,{get:()=>e[o],enumerable:!(f=Q(e,o))||f.enumerable});return r};var m=(r,e,a)=>(a=r!=null?K(V(r)):{},l(e||!r||!r.__esModule?t(a,"default",{value:r,enumerable:!0}):a,r)),Y=r=>l(t({},"__esModule",{value:!0}),r);var Z={};X(Z,{Breadcrumb:()=>n,BreadcrumbEllipsis:()=>b,BreadcrumbItem:()=>p,BreadcrumbLink:()=>s,BreadcrumbList:()=>i,BreadcrumbPage:()=>d,BreadcrumbSeparator:()=>c});module.exports=Y(Z);var u=m(require("react"),1),P=require("../utils/part.cjs"),B=require("../utils/primitive.cjs"),y=require("react/jsx-runtime"),n=u.forwardRef(({"aria-label":r="Breadcrumb",...e},a)=>(0,y.jsx)(B.Primitive.nav,{"aria-label":r,...e,...(0,P.skdxPart)("breadcrumb","root",e.className),ref:a}));n.displayName="Breadcrumb";var L=m(require("react"),1),R=require("../utils/part.cjs"),x=require("../utils/primitive.cjs"),k=require("react/jsx-runtime"),i=L.forwardRef((r,e)=>(0,k.jsx)(x.Primitive.ol,{...r,...(0,R.skdxPart)("breadcrumb","list",r.className),ref:e}));i.displayName="BreadcrumbList";var N=m(require("react"),1),E=require("../utils/part.cjs"),v=require("../utils/primitive.cjs"),g=require("react/jsx-runtime"),p=N.forwardRef((r,e)=>(0,g.jsx)(v.Primitive.li,{...r,...(0,E.skdxPart)("breadcrumb","item",r.className),ref:e}));p.displayName="BreadcrumbItem";var I=m(require("react"),1),S=require("../utils/part.cjs"),w=require("../utils/primitive.cjs"),H=require("react/jsx-runtime"),s=I.forwardRef((r,e)=>(0,H.jsx)(w.Primitive.a,{...r,...(0,S.skdxPart)("breadcrumb","link",r.className),ref:e}));s.displayName="BreadcrumbLink";var M=m(require("react"),1),T=require("../utils/part.cjs"),h=require("../utils/primitive.cjs"),A=require("react/jsx-runtime"),d=M.forwardRef((r,e)=>(0,A.jsx)(h.Primitive.span,{"aria-current":"page",...r,...(0,T.skdxPart)("breadcrumb","page",r.className),ref:e}));d.displayName="BreadcrumbPage";var O=m(require("react"),1),q=require("../utils/part.cjs"),z=require("../utils/primitive.cjs"),C=require("react/jsx-runtime"),c=O.forwardRef(({children:r,...e},a)=>(0,C.jsx)(z.Primitive.li,{role:"presentation","aria-hidden":"true",...e,...(0,q.skdxPart)("breadcrumb","separator",e.className),ref:a,children:r??"/"}));c.displayName="BreadcrumbSeparator";var D=m(require("react"),1),F=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),J=require("react/jsx-runtime"),b=D.forwardRef(({children:r,...e},a)=>(0,J.jsx)(G.Primitive.span,{role:"presentation","aria-hidden":"true",...e,...(0,F.skdxPart)("breadcrumb","ellipsis",e.className),ref:a,children:r??"\u2026"}));b.displayName="BreadcrumbEllipsis";0&&(module.exports={Breadcrumb,BreadcrumbEllipsis,BreadcrumbItem,BreadcrumbLink,BreadcrumbList,BreadcrumbPage,BreadcrumbSeparator});

package/dist/breadcrumb/Breadcrumb.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { BreadcrumbProps } from './types.cjs';
+/**
+ * Root of a breadcrumb trail: renders a `<nav>` labelled `"Breadcrumb"` by
+ * default (override via `aria-label`). Purely structural — layout and
+ * separators are composed from its children.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<BreadcrumbProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { BreadcrumbProps } from './types.js';
+/**
+ * Root of a breadcrumb trail: renders a `<nav>` labelled `"Breadcrumb"` by
+ * default (override via `aria-label`). Purely structural — layout and
+ * separators are composed from its children.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<BreadcrumbProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/breadcrumb/Breadcrumb.js

@@ -0,0 +1 @@
+import*as m from"react";import{skdxPart as B}from"../utils/part.js";import{Primitive as n}from"../utils/primitive.js";import{jsx as L}from"react/jsx-runtime";var y=m.forwardRef(({"aria-label":r="Breadcrumb",...e},a)=>L(n.nav,{"aria-label":r,...e,...B("breadcrumb","root",e.className),ref:a}));y.displayName="Breadcrumb";import*as o from"react";import{skdxPart as R}from"../utils/part.js";import{Primitive as x}from"../utils/primitive.js";import{jsx as k}from"react/jsx-runtime";var t=o.forwardRef((r,e)=>k(x.ol,{...r,...R("breadcrumb","list",r.className),ref:e}));t.displayName="BreadcrumbList";import*as i from"react";import{skdxPart as N}from"../utils/part.js";import{Primitive as E}from"../utils/primitive.js";import{jsx as v}from"react/jsx-runtime";var p=i.forwardRef((r,e)=>v(E.li,{...r,...N("breadcrumb","item",r.className),ref:e}));p.displayName="BreadcrumbItem";import*as s from"react";import{skdxPart as g}from"../utils/part.js";import{Primitive as I}from"../utils/primitive.js";import{jsx as S}from"react/jsx-runtime";var d=s.forwardRef((r,e)=>S(I.a,{...r,...g("breadcrumb","link",r.className),ref:e}));d.displayName="BreadcrumbLink";import*as c from"react";import{skdxPart as w}from"../utils/part.js";import{Primitive as H}from"../utils/primitive.js";import{jsx as M}from"react/jsx-runtime";var b=c.forwardRef((r,e)=>M(H.span,{"aria-current":"page",...r,...w("breadcrumb","page",r.className),ref:e}));b.displayName="BreadcrumbPage";import*as f from"react";import{skdxPart as T}from"../utils/part.js";import{Primitive as h}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var l=f.forwardRef(({children:r,...e},a)=>A(h.li,{role:"presentation","aria-hidden":"true",...e,...T("breadcrumb","separator",e.className),ref:a,children:r??"/"}));l.displayName="BreadcrumbSeparator";import*as u from"react";import{skdxPart as O}from"../utils/part.js";import{Primitive as q}from"../utils/primitive.js";import{jsx as z}from"react/jsx-runtime";var P=u.forwardRef(({children:r,...e},a)=>z(q.span,{role:"presentation","aria-hidden":"true",...e,...O("breadcrumb","ellipsis",e.className),ref:a,children:r??"\u2026"}));P.displayName="BreadcrumbEllipsis";export{y as Breadcrumb,P as BreadcrumbEllipsis,p as BreadcrumbItem,d as BreadcrumbLink,t as BreadcrumbList,b as BreadcrumbPage,l as BreadcrumbSeparator};

package/dist/breadcrumb/BreadcrumbEllipsis.d.cts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { BreadcrumbEllipsisProps } from './types.cjs';
+/**
+ * Placeholder standing in for collapsed middle items in a long trail: renders
+ * a `<span>` with `role="presentation"` and `aria-hidden="true"`. Defaults to
+ * `…`; pass `children` to override the glyph.
+ *
+ * Decorative only — never nest an interactive trigger (a menu button revealing
+ * the collapsed items) inside it. Interactive content in an `aria-hidden`
+ * subtree is unreachable to screen readers while still being tab-focusable.
+ * Use it only when the collapsed items are genuinely unreachable; when they
+ * are reachable, put a real `DropdownMenuTrigger` in the `BreadcrumbItem`
+ * instead and skip `BreadcrumbEllipsis` entirely.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem>
+ *   <BreadcrumbEllipsis />
+ * </BreadcrumbItem>
+ * ```
+ */
+export declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<Omit<BreadcrumbEllipsisProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/breadcrumb/BreadcrumbEllipsis.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { BreadcrumbEllipsisProps } from './types.js';
+/**
+ * Placeholder standing in for collapsed middle items in a long trail: renders
+ * a `<span>` with `role="presentation"` and `aria-hidden="true"`. Defaults to
+ * `…`; pass `children` to override the glyph.
+ *
+ * Decorative only — never nest an interactive trigger (a menu button revealing
+ * the collapsed items) inside it. Interactive content in an `aria-hidden`
+ * subtree is unreachable to screen readers while still being tab-focusable.
+ * Use it only when the collapsed items are genuinely unreachable; when they
+ * are reachable, put a real `DropdownMenuTrigger` in the `BreadcrumbItem`
+ * instead and skip `BreadcrumbEllipsis` entirely.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem>
+ *   <BreadcrumbEllipsis />
+ * </BreadcrumbItem>
+ * ```
+ */
+export declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<Omit<BreadcrumbEllipsisProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;