@skdx/react 0.28.0 → 0.30.0

package/dist/autocomplete/types.d.cts

@@ -14,12 +14,12 @@ export interface AutocompleteOption {
      * Text matched by `filter` and written to the Input on selection.
      * @default undefined — falls back to `value`.
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Excludes this suggestion from selection and pointer highlight.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** A labeled group of {@link AutocompleteOption}s for {@link AutocompleteProps.options} — grouping is data, never a wrapper component. */
 export interface AutocompleteOptionGroup {
@@ -116,139 +116,144 @@ export interface AutocompleteProps extends PassThroughProps {
      * The `AutocompleteInput`/`AutocompletePortal` parts — `Autocomplete` itself renders no DOM.
      * @default undefined — renders nothing without children.
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * The committed value, for controlled usage, distinct from the draft `inputValue`.
      * @default undefined — uncontrolled, tracks its own committed value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial committed value; also seeds `defaultInputValue`.
      * @default '' — nothing committed, so blurring an untouched field commits nothing.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Fires with the new committed value on Enter, a suggestion click, Tab, or blur — never on a keystroke.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: AutocompleteValueChangeDetail) => void;
+    onValueChange?: ((detail: AutocompleteValueChangeDetail) => void) | undefined;
     /**
      * Controlled draft text; with no `filter` set, this prop is the filtering mechanism itself.
      * @default undefined — uncontrolled, tracks its own draft text internally.
      */
-    inputValue?: string;
+    inputValue?: string | undefined;
     /**
      * Initial draft text, falls back to defaultValue if unset.
      * @default defaultValue — the field opens showing whatever value it starts committed to.
      */
-    defaultInputValue?: string;
+    defaultInputValue?: string | undefined;
     /**
      * Fires with the new draft text on every keystroke, commit, or revert.
      * @default undefined — no-op if omitted.
      */
-    onInputValueChange?: (inputValue: string) => void;
+    onInputValueChange?: ((inputValue: string) => void) | undefined;
     /**
      * Whether the suggestion popup is open, for controlled usage.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Initial open state; popup waits for keystroke or trigger if false.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever it changes.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
     /**
      * Fires after the open-state animation completes; use for work that must not race the transition.
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
      * Lets the committed value be text outside the suggestion list; off, an unmatched draft reverts to the last committed text on blur.
      * @default true
      */
-    allowCustomValue?: boolean;
+    allowCustomValue?: boolean | undefined;
     /**
      * Opens the suggestion popup on focus instead of waiting for the first keystroke.
      * @default false
      */
-    openOnFocus?: boolean;
+    openOnFocus?: boolean | undefined;
     /**
      * Keeps the first suggestion highlighted as the filtered list changes while open, so Enter always has a target.
      * @default false
      */
-    autoHighlight?: boolean;
+    autoHighlight?: boolean | undefined;
     /**
      * Wraps arrow navigation around list ends; set `false` to clamp. Home/End always jump to an end regardless.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
      * Filters and ranks Items: `'manual'` filters nothing (default), a predicate filters and ranks by score.
      * @default undefined — nothing is filtered; the consumer renders only the matching items, which is what an async or server-side search needs.
      */
-    filter?: AutocompleteFilter;
+    filter?: AutocompleteFilter | undefined;
     /**
      * Blocks all interaction; the input is natively disabled and the popup can't open.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Shows the committed text but blocks changes, while remaining focusable, unlike `disabled`.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on the Input.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Marks suggestions as in flight; suppresses the suggestion-count announcement that would race an in-progress fetch.
      * @default false
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Form field name; needed on the root since a shadow-root input can't associate with the ancestor form.
      * @default undefined — the field submits nothing at all.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Id of the `<form>` the field submits into; requires `name` to have any effect.
      * @default undefined — associates with the nearest ancestor `<form>`.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * Formats the polite announcement when the rendered suggestion count changes while open; return an empty string to announce nothing.
      * @default defaultGetSuggestionCountLabel — e.g. `"3 suggestions available"`
      */
-    getResultCountLabel?: (count: number) => string;
+    getResultCountLabel?: ((count: number) => string) | undefined;
     /**
      * Flat or grouped suggestion data; when present, derives the Input, Portal, and List instead of using children.
      * @default undefined — nothing is derived; compose the parts yourself via `children`.
      */
-    options?: AutocompleteOptionOrGroup[];
+    options?: AutocompleteOptionOrGroup[] | undefined;
     /**
      * Customises how a derived suggestion renders; only read while `options` derives the anatomy.
      * @default undefined — renders `option.label ?? option.value`.
      */
-    renderOption?: (option: AutocompleteOption, state: {
+    renderOption?: ((option: AutocompleteOption, state: {
         selected: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
     /**
      * Placeholder for the derived Input; only read while `options` derives the anatomy.
      * @default undefined
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
+    /**
+     * Whether the derived anatomy renders a Clear button that empties the draft text and the committed value.
+     * @default false — no Clear button is derived.
+     */
+    clearable?: boolean | undefined;
     /**
      * Accessible name for the derived input and list; only read while `options` derives the anatomy.
      * @default undefined — falls back to `placeholder`; with neither, no attribute is emitted.
      */
-    'aria-label'?: string;
+    'aria-label'?: string | undefined;
 }
 /** 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'> {
@@ -264,7 +269,7 @@ export interface AutocompletePortalProps extends PortalProps {
      * present in the DOM during an exit transition.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /**
  * Props for {@link AutocompleteContent}, extending {@link PopperContentProps}
@@ -276,27 +281,27 @@ export interface AutocompleteContentProps extends PopperContentProps {
      * Keep this popup mounted even while closed, instead of unmounting it.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
      * Fires on Escape while open; call `event.preventDefault()` to keep the popup open and the draft text unchanged.
      * @default undefined — no-op if omitted.
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
      * Fires on pointer-down outside the popup and the input; call `event.preventDefault()` to keep the popup open.
      * @default undefined — no-op if omitted.
      */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
      * Fires when focus leaves the popup and the input, via a cancelable stand-in since native `focusin` cannot itself be canceled.
      * @default undefined — no-op if omitted.
      */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
     /**
      * Fires before either outside handler above, with the same event, so one `event.preventDefault()` here vetoes dismissal from either trigger.
      * @default undefined — no-op if omitted.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
 }
 /** Props for {@link AutocompleteList}, the `role="listbox"` the suggestions live in. */
 export interface AutocompleteListProps extends PrimitivePropsWithRef<'div'> {
@@ -309,12 +314,12 @@ export interface AutocompleteItemProps extends PrimitivePropsWithRef<'div'> {
      * Excludes this suggestion from selection and pointer highlight.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Text matched by `filter` and written to the Input on commit; needed only when the item renders more than its label.
      * @default undefined — falls back to the item's rendered text content.
      */
-    textValue?: string;
+    textValue?: string | undefined;
 }
 /** Props for {@link AutocompleteEmpty}, shown in place of the suggestion list when no items are rendered. */
 export interface AutocompleteEmptyProps extends PrimitivePropsWithRef<'div'> {

package/dist/autocomplete/types.d.ts

@@ -14,12 +14,12 @@ export interface AutocompleteOption {
      * Text matched by `filter` and written to the Input on selection.
      * @default undefined — falls back to `value`.
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * Excludes this suggestion from selection and pointer highlight.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** A labeled group of {@link AutocompleteOption}s for {@link AutocompleteProps.options} — grouping is data, never a wrapper component. */
 export interface AutocompleteOptionGroup {
@@ -116,139 +116,144 @@ export interface AutocompleteProps extends PassThroughProps {
      * The `AutocompleteInput`/`AutocompletePortal` parts — `Autocomplete` itself renders no DOM.
      * @default undefined — renders nothing without children.
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * The committed value, for controlled usage, distinct from the draft `inputValue`.
      * @default undefined — uncontrolled, tracks its own committed value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial committed value; also seeds `defaultInputValue`.
      * @default '' — nothing committed, so blurring an untouched field commits nothing.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Fires with the new committed value on Enter, a suggestion click, Tab, or blur — never on a keystroke.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (detail: AutocompleteValueChangeDetail) => void;
+    onValueChange?: ((detail: AutocompleteValueChangeDetail) => void) | undefined;
     /**
      * Controlled draft text; with no `filter` set, this prop is the filtering mechanism itself.
      * @default undefined — uncontrolled, tracks its own draft text internally.
      */
-    inputValue?: string;
+    inputValue?: string | undefined;
     /**
      * Initial draft text, falls back to defaultValue if unset.
      * @default defaultValue — the field opens showing whatever value it starts committed to.
      */
-    defaultInputValue?: string;
+    defaultInputValue?: string | undefined;
     /**
      * Fires with the new draft text on every keystroke, commit, or revert.
      * @default undefined — no-op if omitted.
      */
-    onInputValueChange?: (inputValue: string) => void;
+    onInputValueChange?: ((inputValue: string) => void) | undefined;
     /**
      * Whether the suggestion popup is open, for controlled usage.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Initial open state; popup waits for keystroke or trigger if false.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever it changes.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
     /**
      * Fires after the open-state animation completes; use for work that must not race the transition.
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
      * Lets the committed value be text outside the suggestion list; off, an unmatched draft reverts to the last committed text on blur.
      * @default true
      */
-    allowCustomValue?: boolean;
+    allowCustomValue?: boolean | undefined;
     /**
      * Opens the suggestion popup on focus instead of waiting for the first keystroke.
      * @default false
      */
-    openOnFocus?: boolean;
+    openOnFocus?: boolean | undefined;
     /**
      * Keeps the first suggestion highlighted as the filtered list changes while open, so Enter always has a target.
      * @default false
      */
-    autoHighlight?: boolean;
+    autoHighlight?: boolean | undefined;
     /**
      * Wraps arrow navigation around list ends; set `false` to clamp. Home/End always jump to an end regardless.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
      * Filters and ranks Items: `'manual'` filters nothing (default), a predicate filters and ranks by score.
      * @default undefined — nothing is filtered; the consumer renders only the matching items, which is what an async or server-side search needs.
      */
-    filter?: AutocompleteFilter;
+    filter?: AutocompleteFilter | undefined;
     /**
      * Blocks all interaction; the input is natively disabled and the popup can't open.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Shows the committed text but blocks changes, while remaining focusable, unlike `disabled`.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Marks the field as invalid, exposed as `aria-invalid`/`data-invalid` on the Input.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Marks suggestions as in flight; suppresses the suggestion-count announcement that would race an in-progress fetch.
      * @default false
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Form field name; needed on the root since a shadow-root input can't associate with the ancestor form.
      * @default undefined — the field submits nothing at all.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Id of the `<form>` the field submits into; requires `name` to have any effect.
      * @default undefined — associates with the nearest ancestor `<form>`.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * Formats the polite announcement when the rendered suggestion count changes while open; return an empty string to announce nothing.
      * @default defaultGetSuggestionCountLabel — e.g. `"3 suggestions available"`
      */
-    getResultCountLabel?: (count: number) => string;
+    getResultCountLabel?: ((count: number) => string) | undefined;
     /**
      * Flat or grouped suggestion data; when present, derives the Input, Portal, and List instead of using children.
      * @default undefined — nothing is derived; compose the parts yourself via `children`.
      */
-    options?: AutocompleteOptionOrGroup[];
+    options?: AutocompleteOptionOrGroup[] | undefined;
     /**
      * Customises how a derived suggestion renders; only read while `options` derives the anatomy.
      * @default undefined — renders `option.label ?? option.value`.
      */
-    renderOption?: (option: AutocompleteOption, state: {
+    renderOption?: ((option: AutocompleteOption, state: {
         selected: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
     /**
      * Placeholder for the derived Input; only read while `options` derives the anatomy.
      * @default undefined
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
+    /**
+     * Whether the derived anatomy renders a Clear button that empties the draft text and the committed value.
+     * @default false — no Clear button is derived.
+     */
+    clearable?: boolean | undefined;
     /**
      * Accessible name for the derived input and list; only read while `options` derives the anatomy.
      * @default undefined — falls back to `placeholder`; with neither, no attribute is emitted.
      */
-    'aria-label'?: string;
+    'aria-label'?: string | undefined;
 }
 /** 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'> {
@@ -264,7 +269,7 @@ export interface AutocompletePortalProps extends PortalProps {
      * present in the DOM during an exit transition.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /**
  * Props for {@link AutocompleteContent}, extending {@link PopperContentProps}
@@ -276,27 +281,27 @@ export interface AutocompleteContentProps extends PopperContentProps {
      * Keep this popup mounted even while closed, instead of unmounting it.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
      * Fires on Escape while open; call `event.preventDefault()` to keep the popup open and the draft text unchanged.
      * @default undefined — no-op if omitted.
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
      * Fires on pointer-down outside the popup and the input; call `event.preventDefault()` to keep the popup open.
      * @default undefined — no-op if omitted.
      */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
      * Fires when focus leaves the popup and the input, via a cancelable stand-in since native `focusin` cannot itself be canceled.
      * @default undefined — no-op if omitted.
      */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
     /**
      * Fires before either outside handler above, with the same event, so one `event.preventDefault()` here vetoes dismissal from either trigger.
      * @default undefined — no-op if omitted.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
 }
 /** Props for {@link AutocompleteList}, the `role="listbox"` the suggestions live in. */
 export interface AutocompleteListProps extends PrimitivePropsWithRef<'div'> {
@@ -309,12 +314,12 @@ export interface AutocompleteItemProps extends PrimitivePropsWithRef<'div'> {
      * Excludes this suggestion from selection and pointer highlight.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Text matched by `filter` and written to the Input on commit; needed only when the item renders more than its label.
      * @default undefined — falls back to the item's rendered text content.
      */
-    textValue?: string;
+    textValue?: string | undefined;
 }
 /** 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

@@ -1 +1,2 @@
-"use strict";var _=Object.create;var g=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(t,a)=>{for(var e in a)g(t,e,{get:a[e],enumerable:!0})},x=(t,a,e,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of B(a))!G.call(t,o)&&o!==e&&g(t,o,{get:()=>a[o],enumerable:!(r=$(a,o))||r.enumerable});return t};var k=(t,a,e)=>(e=t!=null?_(q(t)):{},x(a||!t||!t.__esModule?g(e,"default",{value:t,enumerable:!0}):e,t)),K=t=>x(g({},"__esModule",{value:!0}),t);var Q={};J(Q,{Avatar:()=>I,AvatarFallback:()=>p,AvatarImage:()=>A,AvatarProvider:()=>D,useAvatarContext:()=>c});module.exports=K(Q);var b=k(require("react"),1),E=require("../utils/createContext.cjs"),H=require("../utils/part.cjs"),M=require("../utils/primitive.cjs");var d=k(require("react"),1),L=require("../utils/part.cjs"),P=require("../utils/primitive.cjs");var R=require("react/jsx-runtime"),p=d.forwardRef(({delayMs:t,...a},e)=>{let r=c("AvatarFallback"),[o,u]=d.useState(t===void 0);return d.useEffect(()=>{if(t===void 0)return;let i=window.setTimeout(()=>u(!0),t);return()=>window.clearTimeout(i)},[t]),o&&r.imageLoadingStatus!=="loaded"?(0,R.jsx)(P.Primitive.span,{...a,...(0,L.skdxPart)("avatar","fallback",a.className),ref:e}):null});p.displayName="AvatarFallback";var v=k(require("react"),1),S=require("../utils/part.cjs"),C=require("../utils/primitive.cjs"),F=require("../utils/useCallbackRef.cjs");var N=require("react/jsx-runtime"),A=v.forwardRef(({onLoadingStatusChange:t=()=>{},src:a,srcSet:e,sizes:r,alt:o,children:u,...i},y)=>{let s=c("AvatarImage"),m=(0,F.useCallbackRef)(n=>{t(n),s.onImageLoadingStatusChange(n)});return v.useLayoutEffect(()=>{if(!a){m("error");return}let n=!0,f=new window.Image,w=V=>()=>{n&&m(V)};return m("loading"),f.onload=w("loaded"),f.onerror=w("error"),e&&(f.srcset=e),r&&(f.sizes=r),f.src=a,()=>{n=!1}},[a,e,r,m]),s.imageLoadingStatus==="loaded"?(0,N.jsx)(C.Primitive.img,{src:a,srcSet:e,sizes:r,alt:s.decorative?"":o??s.label??"",...i,...(0,S.skdxPart)("avatar","image",i.className),ref:y}):null});A.displayName="AvatarImage";var l=require("react/jsx-runtime");function O(t){let a=t.trim().split(/\s+/).filter(Boolean);return a.length===0?"":a.length===1?a[0].slice(0,2):`${a[0][0]}${a[a.length-1][0]}`}function T({src:t,name:a,fallbackDelayMs:e}){return(0,l.jsxs)(l.Fragment,{children:[t?(0,l.jsx)(A,{src:t}):null,(0,l.jsx)(p,{delayMs:e,children:a?O(a):null})]})}var h=require("react/jsx-runtime"),[D,c]=(0,E.createSafeContext)("Avatar"),I=b.forwardRef(({label:t,decorative:a=!1,src:e,name:r,fallbackDelayMs:o,children:u,...i},y)=>{let[s,m]=b.useState("idle"),n=t??r;return(0,h.jsx)(D,{imageLoadingStatus:s,onImageLoadingStatusChange:m,label:n,decorative:a,children:(0,h.jsx)(M.Primitive.span,{"data-load-status":s,role:n?"img":void 0,"aria-label":n,"aria-hidden":a?!0:void 0,...i,...(0,H.skdxPart)("avatar","root",i.className),ref:y,children:u??(0,h.jsx)(T,{src:e,name:r,fallbackDelayMs:o})})})});I.displayName="Avatar";0&&(module.exports={Avatar,AvatarFallback,AvatarImage,AvatarProvider,useAvatarContext});
+'use client';
+"use strict";var q=Object.create;var p=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var O=(t,a)=>{for(var e in a)p(t,e,{get:a[e],enumerable:!0})},P=(t,a,e,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of H(a))!M.call(t,o)&&o!==e&&p(t,o,{get:()=>a[o],enumerable:!(r=G(a,o))||r.enumerable});return t};var y=(t,a,e)=>(e=t!=null?q(K(t)):{},P(a||!t||!t.__esModule?p(e,"default",{value:t,enumerable:!0}):e,t)),Q=t=>P(p({},"__esModule",{value:!0}),t);var Y={};O(Y,{Avatar:()=>x,AvatarFallback:()=>v,AvatarImage:()=>A,AvatarProvider:()=>B,useAvatarContext:()=>c});module.exports=Q(Y);var E=y(require("react"),1),J=require("../utils/appearance.cjs"),T=require("../utils/createContext.cjs"),V=require("../utils/part.cjs"),X=require("../utils/primitive.cjs");var g=y(require("react"),1),k=require("../utils/part.cjs"),R=require("../utils/primitive.cjs");var S=require("react/jsx-runtime"),v=({delayMs:t,ref:a,...e})=>{let r=c("AvatarFallback"),[o,d]=g.useState(t===void 0);return g.useEffect(()=>{if(t===void 0)return;let f=window.setTimeout(()=>d(!0),t);return()=>window.clearTimeout(f)},[t]),o&&r.imageLoadingStatus!=="loaded"?(0,S.jsx)(R.Primitive.span,{...e,...(0,k.skdxPart)("avatar","fallback",e.className),ref:a}):null};v.displayName="AvatarFallback";var L=y(require("react"),1),C=require("../utils/part.cjs"),w=require("../utils/primitive.cjs"),N=require("../utils/useCallbackRef.cjs");var F=require("react/jsx-runtime"),A=({onLoadingStatusChange:t=()=>{},src:a,srcSet:e,sizes:r,alt:o,asChild:d,children:f,ref:h,...u})=>{let i=c("AvatarImage"),s=(0,N.useCallbackRef)(m=>{i.onImageLoadingStatusChange(m),t(m)});return L.useLayoutEffect(()=>{if(!a&&!e){s("error");return}let m=!0,n=new window.Image,I=U=>()=>{m&&s(U)};return s("loading"),n.onload=I("loaded"),n.onerror=I("error"),e&&(n.srcset=e),r&&(n.sizes=r),a&&(n.src=a),()=>{m=!1}},[a,e,r,s]),i.imageLoadingStatus==="loaded"?(0,F.jsx)(w.Primitive.img,{asChild:d,src:a,srcSet:e,sizes:r,alt:i.decorative?"":o??i.label??"",...u,...(0,C.skdxPart)("avatar","image",u.className),ref:h,children:d?f:null}):null};A.displayName="AvatarImage";var l=require("react/jsx-runtime");function W(t){let a=t.trim().split(/\s+/).filter(Boolean);if(a.length===0)return"";let e=a[0].charAt(0),r=a.length>1?a[a.length-1].charAt(0):"";return(e+r).toUpperCase()}function D({src:t,name:a,fallbackDelayMs:e}){return(0,l.jsxs)(l.Fragment,{children:[t?(0,l.jsx)(A,{src:t}):null,(0,l.jsx)(v,{delayMs:e,children:a?W(a):null})]})}var b=require("react/jsx-runtime"),[B,c]=(0,T.createSafeContext)("Avatar"),x=({label:t,decorative:a=!1,src:e,name:r,fallbackDelayMs:o,children:d,ref:f,shape:h,size:u,...i})=>{let[s,m]=E.useState("idle"),n=t??r;return(0,b.jsx)(B,{imageLoadingStatus:s,onImageLoadingStatusChange:m,label:n,decorative:a,children:(0,b.jsx)(X.Primitive.span,{"data-load-status":s,role:n?"img":void 0,"aria-label":n,"aria-hidden":a?!0:void 0,...i,...(0,J.appearanceAttrs)({shape:h,size:u},i),...(0,V.skdxPart)("avatar","root",i.className),ref:f,children:d??(0,b.jsx)(D,{src:e,name:r,fallbackDelayMs:o})})})};x.displayName="Avatar";0&&(module.exports={Avatar,AvatarFallback,AvatarImage,AvatarProvider,useAvatarContext});

package/dist/avatar/Avatar.d.cts

@@ -1,11 +1,8 @@
 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;
+export declare const AvatarProvider: React.FC<AvatarContextValue & {
+    children: React.ReactNode;
+}>, useAvatarContext: (consumerName: string) => AvatarContextValue;
 /**
  * Avatar root, owns image loading status. Publishes `data-load-status` so skins
  * can render shimmer. With no children, renders derived anatomy from
@@ -19,4 +16,7 @@ export declare const AvatarProvider: {
  * </Avatar>
  * ```
  */
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: {
+    ({ label, decorative, src, name, fallbackDelayMs, children, ref: forwardedRef, shape, size, ...props }: AvatarProps): React.ReactNode;
+    displayName: string;
+};

package/dist/avatar/Avatar.d.ts

@@ -1,11 +1,8 @@
 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;
+export declare const AvatarProvider: React.FC<AvatarContextValue & {
+    children: React.ReactNode;
+}>, useAvatarContext: (consumerName: string) => AvatarContextValue;
 /**
  * Avatar root, owns image loading status. Publishes `data-load-status` so skins
  * can render shimmer. With no children, renders derived anatomy from
@@ -19,4 +16,7 @@ export declare const AvatarProvider: {
  * </Avatar>
  * ```
  */
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: {
+    ({ label, decorative, src, name, fallbackDelayMs, children, ref: forwardedRef, shape, size, ...props }: AvatarProps): React.ReactNode;
+    displayName: string;
+};

package/dist/avatar/Avatar.js

@@ -1 +1,2 @@
-import*as g from"react";import{createSafeContext as H}from"../utils/createContext.js";import{skdxPart as M}from"../utils/part.js";import{Primitive as D}from"../utils/primitive.js";import*as l from"react";import{skdxPart as x}from"../utils/part.js";import{Primitive as L}from"../utils/primitive.js";import{jsx as P}from"react/jsx-runtime";var v=l.forwardRef(({delayMs:t,...a},e)=>{let r=c("AvatarFallback"),[m,f]=l.useState(t===void 0);return l.useEffect(()=>{if(t===void 0)return;let n=window.setTimeout(()=>f(!0),t);return()=>window.clearTimeout(n)},[t]),m&&r.imageLoadingStatus!=="loaded"?P(L.span,{...a,...x("avatar","fallback",a.className),ref:e}):null});v.displayName="AvatarFallback";import*as u from"react";import{skdxPart as R}from"../utils/part.js";import{Primitive as S}from"../utils/primitive.js";import{useCallbackRef as C}from"../utils/useCallbackRef.js";import{jsx as F}from"react/jsx-runtime";var A=u.forwardRef(({onLoadingStatusChange:t=()=>{},src:a,srcSet:e,sizes:r,alt:m,children:f,...n},p)=>{let i=c("AvatarImage"),s=C(o=>{t(o),i.onImageLoadingStatusChange(o)});return u.useLayoutEffect(()=>{if(!a){s("error");return}let o=!0,d=new window.Image,b=w=>()=>{o&&s(w)};return s("loading"),d.onload=b("loaded"),d.onerror=b("error"),e&&(d.srcset=e),r&&(d.sizes=r),d.src=a,()=>{o=!1}},[a,e,r,s]),i.imageLoadingStatus==="loaded"?F(S.img,{src:a,srcSet:e,sizes:r,alt:i.decorative?"":m??i.label??"",...n,...R("avatar","image",n.className),ref:p}):null});A.displayName="AvatarImage";import{Fragment as T,jsx as y,jsxs as E}from"react/jsx-runtime";function N(t){let a=t.trim().split(/\s+/).filter(Boolean);return a.length===0?"":a.length===1?a[0].slice(0,2):`${a[0][0]}${a[a.length-1][0]}`}function k({src:t,name:a,fallbackDelayMs:e}){return E(T,{children:[t?y(A,{src:t}):null,y(v,{delayMs:e,children:a?N(a):null})]})}import{jsx as h}from"react/jsx-runtime";var[V,c]=H("Avatar"),I=g.forwardRef(({label:t,decorative:a=!1,src:e,name:r,fallbackDelayMs:m,children:f,...n},p)=>{let[i,s]=g.useState("idle"),o=t??r;return h(V,{imageLoadingStatus:i,onImageLoadingStatusChange:s,label:o,decorative:a,children:h(D.span,{"data-load-status":i,role:o?"img":void 0,"aria-label":o,"aria-hidden":a?!0:void 0,...n,...M("avatar","root",n.className),ref:p,children:f??h(k,{src:e,name:r,fallbackDelayMs:m})})})});I.displayName="Avatar";export{I as Avatar,v as AvatarFallback,A as AvatarImage,V as AvatarProvider,c as useAvatarContext};
+'use client';
+import*as I from"react";import{appearanceAttrs as T}from"../utils/appearance.js";import{createSafeContext as V}from"../utils/createContext.js";import{skdxPart as X}from"../utils/part.js";import{Primitive as B}from"../utils/primitive.js";import*as c from"react";import{skdxPart as R}from"../utils/part.js";import{Primitive as S}from"../utils/primitive.js";import{jsx as L}from"react/jsx-runtime";var g=({delayMs:e,ref:a,...t})=>{let r=u("AvatarFallback"),[l,m]=c.useState(e===void 0);return c.useEffect(()=>{if(e===void 0)return;let d=window.setTimeout(()=>m(!0),e);return()=>window.clearTimeout(d)},[e]),l&&r.imageLoadingStatus!=="loaded"?L(S.span,{...t,...R("avatar","fallback",t.className),ref:a}):null};g.displayName="AvatarFallback";import*as h from"react";import{skdxPart as C}from"../utils/part.js";import{Primitive as w}from"../utils/primitive.js";import{useCallbackRef as N}from"../utils/useCallbackRef.js";import{jsx as F}from"react/jsx-runtime";var v=({onLoadingStatusChange:e=()=>{},src:a,srcSet:t,sizes:r,alt:l,asChild:m,children:d,ref:p,...f})=>{let n=u("AvatarImage"),i=N(s=>{n.onImageLoadingStatusChange(s),e(s)});return h.useLayoutEffect(()=>{if(!a&&!t){i("error");return}let s=!0,o=new window.Image,b=k=>()=>{s&&i(k)};return i("loading"),o.onload=b("loaded"),o.onerror=b("error"),t&&(o.srcset=t),r&&(o.sizes=r),a&&(o.src=a),()=>{s=!1}},[a,t,r,i]),n.imageLoadingStatus==="loaded"?F(w.img,{asChild:m,src:a,srcSet:t,sizes:r,alt:n.decorative?"":l??n.label??"",...f,...C("avatar","image",f.className),ref:p,children:m?d:null}):null};v.displayName="AvatarImage";import{Fragment as E,jsx as y,jsxs as J}from"react/jsx-runtime";function D(e){let a=e.trim().split(/\s+/).filter(Boolean);if(a.length===0)return"";let t=a[0].charAt(0),r=a.length>1?a[a.length-1].charAt(0):"";return(t+r).toUpperCase()}function x({src:e,name:a,fallbackDelayMs:t}){return J(E,{children:[e?y(v,{src:e}):null,y(g,{delayMs:t,children:a?D(a):null})]})}import{jsx as A}from"react/jsx-runtime";var[U,u]=V("Avatar"),P=({label:e,decorative:a=!1,src:t,name:r,fallbackDelayMs:l,children:m,ref:d,shape:p,size:f,...n})=>{let[i,s]=I.useState("idle"),o=e??r;return A(U,{imageLoadingStatus:i,onImageLoadingStatusChange:s,label:o,decorative:a,children:A(B.span,{"data-load-status":i,role:o?"img":void 0,"aria-label":o,"aria-hidden":a?!0:void 0,...n,...T({shape:p,size:f},n),...X("avatar","root",n.className),ref:d,children:m??A(x,{src:t,name:r,fallbackDelayMs:l})})})};P.displayName="Avatar";export{P as Avatar,g as AvatarFallback,v as AvatarImage,U as AvatarProvider,u as useAvatarContext};

package/dist/avatar/AvatarAnatomy.d.cts

@@ -1,11 +1,7 @@
-/**
- * The anatomy an {@link Avatar} draws when given no children: an Image when
- * `src` is given, and a Fallback showing `name`'s initials.
- *
- * @internal
- */
+import type { JSX } from 'react';
+/** @internal Derived anatomy: an Image when `src` is given, and a Fallback showing `name`'s initials. */
 export declare function AvatarAnatomy({ src, name, fallbackDelayMs, }: {
-    src?: string;
-    name?: string;
-    fallbackDelayMs?: number;
-}): import("react").JSX.Element;
+    src?: string | undefined;
+    name?: string | undefined;
+    fallbackDelayMs?: number | undefined;
+}): JSX.Element;

package/dist/avatar/AvatarAnatomy.d.ts

@@ -1,11 +1,7 @@
-/**
- * The anatomy an {@link Avatar} draws when given no children: an Image when
- * `src` is given, and a Fallback showing `name`'s initials.
- *
- * @internal
- */
+import type { JSX } from 'react';
+/** @internal Derived anatomy: an Image when `src` is given, and a Fallback showing `name`'s initials. */
 export declare function AvatarAnatomy({ src, name, fallbackDelayMs, }: {
-    src?: string;
-    name?: string;
-    fallbackDelayMs?: number;
-}): import("react").JSX.Element;
+    src?: string | undefined;
+    name?: string | undefined;
+    fallbackDelayMs?: number | undefined;
+}): JSX.Element;

package/dist/avatar/AvatarFallback.d.cts

@@ -12,4 +12,7 @@ import type { AvatarFallbackProps } from './types.cjs';
  * </Avatar>
  * ```
  */
-export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AvatarFallback: {
+    ({ delayMs, ref: forwardedRef, ...props }: AvatarFallbackProps): React.ReactNode;
+    displayName: string;
+};

package/dist/avatar/AvatarFallback.d.ts

@@ -12,4 +12,7 @@ import type { AvatarFallbackProps } from './types.js';
  * </Avatar>
  * ```
  */
-export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AvatarFallback: {
+    ({ delayMs, ref: forwardedRef, ...props }: AvatarFallbackProps): React.ReactNode;
+    displayName: string;
+};

package/dist/avatar/AvatarImage.d.cts

@@ -19,4 +19,7 @@ import type { AvatarImageProps } from './types.cjs';
  * </Avatar>
  * ```
  */
-export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const AvatarImage: {
+    ({ onLoadingStatusChange, src, srcSet, sizes, alt, asChild, children, ref: forwardedRef, ...props }: AvatarImageProps): React.ReactNode;
+    displayName: string;
+};