@skdx/react 0.26.0

package/dist/angle-slider/types.d.cts

@@ -0,0 +1,100 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link AngleSlider} to its parts via context. Not part of the public API. */
+export interface AngleSliderContextValue {
+    value: number;
+    step: number;
+    disabled: boolean;
+    readOnly: boolean;
+    dragging: boolean;
+}
+/** Props for the {@link AngleSlider} root. */
+export interface AngleSliderProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
+    /**
+     * Current angle in degrees, for controlled usage. Pair with `onValueChange`.
+     * Values outside `[0, 360)` are folded into it on the next change — 450 and
+     * 90 are the same direction, and the widget only ever reports one of them.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: number;
+    /**
+     * Initial angle in degrees, for uncontrolled usage, seeding the first render.
+     * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     */
+    defaultValue?: number;
+    /**
+     * Fires with the new angle on every change — each arrow key, and each frame
+     * of a drag that crosses a `step` boundary.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Fires once with the committed angle when a drag ends (pointer release or
+     * cancel). This is the callback to hang an expensive effect on: a drag emits
+     * `onValueChange` per step crossed, and this one exactly once, so a consumer
+     * can repaint per frame without also making a network call per frame.
+     *
+     * Keyboard changes do not fire it — a key press is already a discrete commit,
+     * reported by `onValueChange`.
+     * @default undefined — no-op if omitted.
+     */
+    onValueCommit?: (value: number) => void;
+    /**
+     * Previous name for `onValueCommit`, kept so 0.20 code keeps working.
+     * @deprecated Renamed to `onValueCommit` in 0.21. The contract, Vue and Web
+     * Components have always called this `value-commit`, and React's own
+     * `Slider`/`Editable` already spelled it `onValueCommit` — only
+     * `AngleSlider` and `ColorPicker` used `onValueChangeEnd`. Still honoured
+     * when `onValueCommit` is not supplied; it will be removed in 0.22.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChangeEnd?: (value: number) => void;
+    /**
+     * Increment in degrees that both pointer and keyboard input are rounded to.
+     * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
+     * regardless of this value. `0` makes pointer input continuous, while the
+     * arrows keep falling back to 1° so every angle stays reachable by keyboard.
+     * @default 1 — every whole degree is reachable.
+     */
+    step?: number;
+    /**
+     * Blocks pointer and keyboard interaction and takes the root out of the tab
+     * order (it stays programmatically focusable, at `tabIndex={-1}`).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Displays the current angle but blocks changes, while staying focusable and
+     * in the tab order — unlike `disabled`, a read-only dial can still be reached
+     * and read by a keyboard user.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Restrict the value to the angles declared by the rendered `AngleSliderMark`
+     * parts. Marks are discovered from the DOM at interaction time, so there is
+     * no registration plumbing and a mark added or removed later just works.
+     *
+     * With marks present, dragging snaps to the nearest one (measured the short
+     * way around the circle, so 350° snaps to a 0° mark), arrow keys move one
+     * mark, Shift+arrow and PageUp/PageDown move three, and Home/End jump to the
+     * first/last mark. With `restrictToMarks` set but no marks rendered, the
+     * value falls back to the `step` grid rather than becoming unchangeable.
+     * @default false
+     */
+    restrictToMarks?: boolean;
+}
+/** Props for the {@link AngleSliderThumb}, the handle that points at the current angle. */
+export interface AngleSliderThumbProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link AngleSliderMarks}, the container for the tick marks around the dial. */
+export interface AngleSliderMarksProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for a single {@link AngleSliderMark} tick. */
+export interface AngleSliderMarkProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * The angle in degrees this tick sits at. Published back as
+     * `--skdx-angle-slider-mark-angle` for positioning, and read by the root when
+     * `restrictToMarks` is set.
+     */
+    value: number;
+}

package/dist/angle-slider/types.d.ts

@@ -0,0 +1,100 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared state distributed from {@link AngleSlider} to its parts via context. Not part of the public API. */
+export interface AngleSliderContextValue {
+    value: number;
+    step: number;
+    disabled: boolean;
+    readOnly: boolean;
+    dragging: boolean;
+}
+/** Props for the {@link AngleSlider} root. */
+export interface AngleSliderProps extends Omit<PrimitivePropsWithRef<'div'>, 'onChange'> {
+    /**
+     * Current angle in degrees, for controlled usage. Pair with `onValueChange`.
+     * Values outside `[0, 360)` are folded into it on the next change — 450 and
+     * 90 are the same direction, and the widget only ever reports one of them.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    value?: number;
+    /**
+     * Initial angle in degrees, for uncontrolled usage, seeding the first render.
+     * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     */
+    defaultValue?: number;
+    /**
+     * Fires with the new angle on every change — each arrow key, and each frame
+     * of a drag that crosses a `step` boundary.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Fires once with the committed angle when a drag ends (pointer release or
+     * cancel). This is the callback to hang an expensive effect on: a drag emits
+     * `onValueChange` per step crossed, and this one exactly once, so a consumer
+     * can repaint per frame without also making a network call per frame.
+     *
+     * Keyboard changes do not fire it — a key press is already a discrete commit,
+     * reported by `onValueChange`.
+     * @default undefined — no-op if omitted.
+     */
+    onValueCommit?: (value: number) => void;
+    /**
+     * Previous name for `onValueCommit`, kept so 0.20 code keeps working.
+     * @deprecated Renamed to `onValueCommit` in 0.21. The contract, Vue and Web
+     * Components have always called this `value-commit`, and React's own
+     * `Slider`/`Editable` already spelled it `onValueCommit` — only
+     * `AngleSlider` and `ColorPicker` used `onValueChangeEnd`. Still honoured
+     * when `onValueCommit` is not supplied; it will be removed in 0.22.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChangeEnd?: (value: number) => void;
+    /**
+     * Increment in degrees that both pointer and keyboard input are rounded to.
+     * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
+     * regardless of this value. `0` makes pointer input continuous, while the
+     * arrows keep falling back to 1° so every angle stays reachable by keyboard.
+     * @default 1 — every whole degree is reachable.
+     */
+    step?: number;
+    /**
+     * Blocks pointer and keyboard interaction and takes the root out of the tab
+     * order (it stays programmatically focusable, at `tabIndex={-1}`).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Displays the current angle but blocks changes, while staying focusable and
+     * in the tab order — unlike `disabled`, a read-only dial can still be reached
+     * and read by a keyboard user.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Restrict the value to the angles declared by the rendered `AngleSliderMark`
+     * parts. Marks are discovered from the DOM at interaction time, so there is
+     * no registration plumbing and a mark added or removed later just works.
+     *
+     * With marks present, dragging snaps to the nearest one (measured the short
+     * way around the circle, so 350° snaps to a 0° mark), arrow keys move one
+     * mark, Shift+arrow and PageUp/PageDown move three, and Home/End jump to the
+     * first/last mark. With `restrictToMarks` set but no marks rendered, the
+     * value falls back to the `step` grid rather than becoming unchangeable.
+     * @default false
+     */
+    restrictToMarks?: boolean;
+}
+/** Props for the {@link AngleSliderThumb}, the handle that points at the current angle. */
+export interface AngleSliderThumbProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link AngleSliderMarks}, the container for the tick marks around the dial. */
+export interface AngleSliderMarksProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for a single {@link AngleSliderMark} tick. */
+export interface AngleSliderMarkProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * The angle in degrees this tick sits at. Published back as
+     * `--skdx-angle-slider-mark-angle` for positioning, and read by the root when
+     * `restrictToMarks` is set.
+     */
+    value: number;
+}

package/dist/aspect-ratio/AspectRatio.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,n=Object.prototype.hasOwnProperty;var x=(t,o)=>{for(var e in o)s(t,e,{get:o[e],enumerable:!0})},r=(t,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of R(o))!n.call(t,i)&&i!==e&&s(t,i,{get:()=>o[i],enumerable:!(a=y(o,i))||a.enumerable});return t};var A=(t,o,e)=>(e=t!=null?l(v(t)):{},r(o||!t||!t.__esModule?s(e,"default",{value:t,enumerable:!0}):e,t)),P=t=>r(s({},"__esModule",{value:!0}),t);var k={};x(k,{AspectRatio:()=>f});module.exports=P(k);var m=A(require("react"),1),d=require("../utils/part.cjs"),c=require("../utils/primitive.cjs"),p=require("react/jsx-runtime"),f=m.forwardRef(({ratio:t=1,style:o,wrapperProps:e,...a},i)=>(0,p.jsx)("div",{"data-skdx-aspect-ratio-wrapper":"",...e,style:{position:"relative",width:"100%",...e?.style,paddingBottom:`${100/t}%`},children:(0,p.jsx)(c.Primitive.div,{"data-skdx-aspect-ratio":"",...a,...(0,d.skdxPart)("aspect-ratio","root",a.className),ref:i,style:{position:"absolute",inset:0,...o}})}));f.displayName="AspectRatio";0&&(module.exports={AspectRatio});

package/dist/aspect-ratio/AspectRatio.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { AspectRatioProps } from './types.cjs';
+/**
+ * Maintains a fixed width:height ratio for its content, independent of
+ * consumer CSS. Uses the padding-percentage technique so it works headlessly
+ * even if the brand layer never sets `aspect-ratio` itself. Renders an outer
+ * `<div data-skdx-aspect-ratio-wrapper>` that owns the padding hack, containing
+ * an absolutely-positioned `<div data-skdx-aspect-ratio>` (the actual
+ * `AspectRatio` element, forwarding `ref`) that fills it.
+ *
+ * @example
+ * ```tsx
+ * <div style={{ width: 300 }}>
+ *   <AspectRatio ratio={16 / 9}>
+ *     <img src="/photo.jpg" alt="" style={{ objectFit: 'cover', width: '100%', height: '100%' }} />
+ *   </AspectRatio>
+ * </div>
+ * ```
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/aspect-ratio/AspectRatio.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { AspectRatioProps } from './types.js';
+/**
+ * Maintains a fixed width:height ratio for its content, independent of
+ * consumer CSS. Uses the padding-percentage technique so it works headlessly
+ * even if the brand layer never sets `aspect-ratio` itself. Renders an outer
+ * `<div data-skdx-aspect-ratio-wrapper>` that owns the padding hack, containing
+ * an absolutely-positioned `<div data-skdx-aspect-ratio>` (the actual
+ * `AspectRatio` element, forwarding `ref`) that fills it.
+ *
+ * @example
+ * ```tsx
+ * <div style={{ width: 300 }}>
+ *   <AspectRatio ratio={16 / 9}>
+ *     <img src="/photo.jpg" alt="" style={{ objectFit: 'cover', width: '100%', height: '100%' }} />
+ *   </AspectRatio>
+ * </div>
+ * ```
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/aspect-ratio/AspectRatio.js

@@ -0,0 +1 @@
+import*as i from"react";import{skdxPart as r}from"../utils/part.js";import{Primitive as m}from"../utils/primitive.js";import{jsx as e}from"react/jsx-runtime";var d=i.forwardRef(({ratio:a=1,style:s,wrapperProps:t,...o},p)=>e("div",{"data-skdx-aspect-ratio-wrapper":"",...t,style:{position:"relative",width:"100%",...t?.style,paddingBottom:`${100/a}%`},children:e(m.div,{"data-skdx-aspect-ratio":"",...o,...r("aspect-ratio","root",o.className),ref:p,style:{position:"absolute",inset:0,...s}})}));d.displayName="AspectRatio";export{d as AspectRatio};

package/dist/aspect-ratio/index.d.cts

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

package/dist/aspect-ratio/index.d.ts

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

package/dist/aspect-ratio/types.d.cts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link AspectRatio} root. */
+export interface AspectRatioProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Desired width:height ratio, e.g. `16 / 9`.
+     * @default 1
+     */
+    ratio?: number;
+    /**
+     * Props for the outer `data-skdx-aspect-ratio-wrapper` element that owns the
+     * padding-percentage hack — `className`, `style`, `ref`, anything else. Its
+     * `position`/`width` are merged, not replaced, so yours win; `padding-bottom`
+     * is not, since that declaration *is* the ratio.
+     * @default undefined
+     */
+    wrapperProps?: React.ComponentPropsWithRef<'div'>;
+}

package/dist/aspect-ratio/types.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link AspectRatio} root. */
+export interface AspectRatioProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Desired width:height ratio, e.g. `16 / 9`.
+     * @default 1
+     */
+    ratio?: number;
+    /**
+     * Props for the outer `data-skdx-aspect-ratio-wrapper` element that owns the
+     * padding-percentage hack — `className`, `style`, `ref`, anything else. Its
+     * `position`/`width` are merged, not replaced, so yours win; `padding-bottom`
+     * is not, since that declaration *is* the ratio.
+     * @default undefined
+     */
+    wrapperProps?: React.ComponentPropsWithRef<'div'>;
+}

package/dist/autocomplete/Autocomplete.cjs

@@ -0,0 +1 @@
+"use strict";var We=Object.create;var T=Object.defineProperty;var Ke=Object.getOwnPropertyDescriptor;var $e=Object.getOwnPropertyNames;var Ge=Object.getPrototypeOf,Ue=Object.prototype.hasOwnProperty;var qe=(t,n)=>{for(var e in n)T(t,e,{get:n[e],enumerable:!0})},J=(t,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let p of $e(n))!Ue.call(t,p)&&p!==e&&T(t,p,{get:()=>n[p],enumerable:!(r=Ke(n,p))||r.enumerable});return t};var P=(t,n,e)=>(e=t!=null?We(Ge(t)):{},J(n||!t||!t.__esModule?T(e,"default",{value:t,enumerable:!0}):e,t)),ze=t=>J(T({},"__esModule",{value:!0}),t);var Je={};qe(Je,{Autocomplete:()=>te,AutocompleteContent:()=>K,AutocompleteEmpty:()=>U,AutocompleteInput:()=>S,AutocompleteItem:()=>G,AutocompleteList:()=>$,AutocompletePortal:()=>W,AutocompleteProvider:()=>ee,AutocompleteTrigger:()=>B,defaultGetSuggestionCountLabel:()=>j,useAutocompleteContext:()=>m});module.exports=ze(Je);var i=P(require("react"),1),Q=require("../utils/createContext.cjs"),X=require("../utils/liveAnnouncer.cjs"),Y=require("../utils/popper.cjs"),H=require("../utils/useControllableState.cjs"),Z=require("../utils/useOpenChangeComplete.cjs"),_=require("../utils/useOptionCollection.cjs"),V=require("react/jsx-runtime");function j(t){return`${t} suggestion${t===1?"":"s"} available`}var[ee,m]=(0,Q.createSafeContext)("Autocomplete");function te({children:t,value:n,defaultValue:e="",onValueChange:r,inputValue:p,defaultInputValue:o,onInputValueChange:u,open:I,defaultOpen:A=!1,onOpenChange:x,onOpenChangeComplete:l,allowCustomValue:c=!0,openOnFocus:a=!1,filter:f,disabled:h=!1,readOnly:b=!1,invalid:Te=!1,getSuggestionCountLabel:q=j}){let He=i.useRef(null),Le=i.useRef(null),L=i.useRef(null),Me=i.useId(),[M="",w]=(0,H.useControllableState)({prop:n,defaultProp:e,onChange:r}),[g="",R]=(0,H.useControllableState)({prop:p,defaultProp:o??e,onChange:u}),[E=!1,s]=(0,H.useControllableState)({prop:I,defaultProp:A,onChange:x});(0,Z.useOpenChangeComplete)(E,L,l);let d=(0,_.useOptionCollection)({open:E,setOpen:s,contentRef:L}),{itemCount:N}=d,O=i.useRef(g);i.useEffect(()=>{E&&(0,X.announce)(q(N))},[E,N,q]);let Ne=i.useCallback((y,z)=>{h||b||(w(y),R(z),O.current=z,s(!1))},[h,b,w,R,s]),Ve=i.useCallback(()=>{if(!(h||b)){if(!c){R(O.current),s(!1);return}w(g),O.current=g,s(!1)}},[h,b,c,g,w,R,s]),Fe=i.useCallback(()=>{R(O.current),s(!1)},[R,s]),Se=i.useCallback(y=>f===void 0||f(y,g),[f,g]),Be=i.useCallback(y=>y!==""&&y===M,[M]);return(0,V.jsx)(Y.PopperRoot,{children:(0,V.jsx)(ee,{inputRef:He,triggerRef:Le,contentRef:L,listId:Me,value:M,isSelected:Be,inputValue:g,onInputValueChange:R,open:E,onOpenChange:s,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:N,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:Se,commitItem:Ne,commitInputValue:Ve,revert:Fe,allowCustomValue:c,openOnFocus:a,disabled:h,readOnly:b,invalid:Te,children:t})})}te.displayName="Autocomplete";var oe=P(require("react"),1),ne=require("../utils/composeRefs.cjs"),re=require("../utils/part.cjs"),pe=require("../utils/popper.cjs"),v=require("../utils/primitive.cjs");var F=require("react/jsx-runtime"),S=oe.forwardRef((t,n)=>{let e=m("AutocompleteInput"),r=(0,ne.useComposedRefs)(n,e.inputRef),p=()=>{let o=e.activeId?e.getItem(e.activeId):void 0;return o?(e.commitItem(o.value,o.text||o.value),!0):!1};return(0,F.jsx)(pe.PopperAnchor,{asChild:!0,children:(0,F.jsx)(v.Primitive.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...(0,re.skdxPart)("autocomplete","input",t.className),ref:r,value:e.inputValue,onChange:(0,v.composeEventHandlers)(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onFocus:(0,v.composeEventHandlers)(t.onFocus,()=>{e.openOnFocus&&!e.readOnly&&!e.open&&e.onOpenChange(!0)}),onBlur:(0,v.composeEventHandlers)(t.onBlur,()=>{e.commitInputValue()}),onKeyDown:(0,v.composeEventHandlers)(t.onKeyDown,o=>{o.key==="ArrowDown"?(o.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first")):o.key==="ArrowUp"?(o.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last")):o.key==="Enter"?p()?o.preventDefault():e.allowCustomValue&&e.inputValue!==""&&(o.preventDefault(),e.commitInputValue()):o.key==="Escape"?e.open&&!e.contentRef.current&&(o.preventDefault(),e.revert()):o.key==="Tab"&&e.commitInputValue()})})})});S.displayName="AutocompleteInput";var ie=P(require("react"),1),me=require("../utils/composeRefs.cjs"),le=require("../utils/part.cjs"),k=require("../utils/primitive.cjs");var ae=require("react/jsx-runtime"),B=ie.forwardRef((t,n)=>{let e=m("AutocompleteTrigger"),r=(0,me.useComposedRefs)(n,e.triggerRef);return(0,ae.jsx)(k.Primitive.button,{type:"button",tabIndex:-1,"aria-expanded":e.open,"aria-controls":e.listId,disabled:e.disabled,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-state":e.open?"open":"closed",...t,...(0,le.skdxPart)("autocomplete","trigger",t.className),ref:r,onMouseDown:(0,k.composeEventHandlers)(t.onMouseDown,p=>p.preventDefault()),onClick:(0,k.composeEventHandlers)(t.onClick,()=>{e.readOnly||(e.onOpenChange(!e.open),e.inputRef.current?.focus())})})});B.displayName="AutocompleteTrigger";var se=require("../utils/portal.cjs");var ue=require("react/jsx-runtime"),W=({forceMount:t,children:n,...e})=>{let r=m("AutocompletePortal");return t||r.open?(0,ue.jsx)(se.Portal,{...e,children:n}):null};W.displayName="AutocompletePortal";var ce=P(require("react"),1),fe=require("../utils/composeRefs.cjs"),de=require("../utils/part.cjs"),Ae=require("../utils/popper.cjs"),ge=require("../utils/primitive.cjs"),Re=require("../utils/useDismiss.cjs");var Pe=require("react/jsx-runtime"),K=ce.forwardRef(({forceMount:t,side:n="bottom",align:e="start",sideOffset:r=4,onEscapeKeyDown:p,onPointerDownOutside:o,onFocusOutside:u,onInteractOutside:I,...A},x)=>{let l=m("AutocompleteContent"),c=(0,fe.useComposedRefs)(x,l.contentRef);return(0,Re.useDismiss)({enabled:l.open,onEscapeKeyDown:a=>{p?.(a),a.defaultPrevented||l.revert()},onInteractOutside:I,onPointerDownOutside:a=>{o?.(a),a.defaultPrevented||l.onOpenChange(!1)},onFocusOutside:a=>{u?.(a),a.defaultPrevented||l.onOpenChange(!1)}},[l.contentRef,l.inputRef,l.triggerRef]),!t&&!l.open?null:(0,Pe.jsx)(Ae.PopperContent,{component:"autocomplete","data-state":l.open?"open":"closed",side:n,align:e,sideOffset:r,...A,...(0,de.skdxPart)("autocomplete","content",A.className),ref:c,onMouseDown:(0,ge.composeEventHandlers)(A.onMouseDown,a=>a.preventDefault())})});K.displayName="AutocompleteContent";var ve=P(require("react"),1),Ie=require("../utils/part.cjs"),ye=require("../utils/primitive.cjs");var Ce=require("react/jsx-runtime"),$=ve.forwardRef((t,n)=>{let e=m("AutocompleteList");return(0,Ce.jsx)(ye.Primitive.div,{role:"listbox",id:e.listId,...t,...(0,Ie.skdxPart)("autocomplete","list",t.className),ref:n})});$.displayName="AutocompleteList";var C=P(require("react"),1),xe=require("../utils/composeRefs.cjs"),he=require("../utils/part.cjs"),D=require("../utils/primitive.cjs"),be=require("../utils/useOptionCollection.cjs");var Ee=require("react/jsx-runtime"),G=C.forwardRef(({value:t,disabled:n,textValue:e,...r},p)=>{let o=m("AutocompleteItem"),u=C.useId(),I=C.useRef(null),A=(0,xe.useComposedRefs)(p,I),{text:x,visible:l}=(0,be.useOptionEntry)({id:u,value:t,textValue:e,itemRef:I,matchesFilter:o.matchesFilter,registerItem:o.registerItem,unregisterItem:o.unregisterItem});if(!l)return null;let c=o.isSelected(t),a=o.activeId===u,f=n||o.disabled||o.readOnly;return(0,Ee.jsx)(D.Primitive.div,{role:"option",id:u,"data-value":t,"aria-selected":c,"aria-disabled":f?!0:void 0,"data-state":c?"checked":"unchecked","data-highlighted":a?"":void 0,"data-disabled":f?"":void 0,...r,...(0,he.skdxPart)("autocomplete","item",r.className),ref:A,onClick:(0,D.composeEventHandlers)(r.onClick,()=>{f||(o.commitItem(t,x??t),o.inputRef.current?.focus())}),onPointerEnter:(0,D.composeEventHandlers)(r.onPointerEnter,()=>{f||o.setActiveId(u)})})});G.displayName="AutocompleteItem";var ke=P(require("react"),1),De=require("../utils/part.cjs"),we=require("../utils/primitive.cjs");var Oe=require("react/jsx-runtime"),U=ke.forwardRef((t,n)=>m("AutocompleteEmpty").itemCount===0?(0,Oe.jsx)(we.Primitive.div,{role:"presentation",...t,...(0,De.skdxPart)("autocomplete","empty",t.className),ref:n}):null);U.displayName="AutocompleteEmpty";0&&(module.exports={Autocomplete,AutocompleteContent,AutocompleteEmpty,AutocompleteInput,AutocompleteItem,AutocompleteList,AutocompletePortal,AutocompleteProvider,AutocompleteTrigger,defaultGetSuggestionCountLabel,useAutocompleteContext});

package/dist/autocomplete/Autocomplete.d.cts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { AutocompleteContextValue, AutocompleteProps } from './types.cjs';
+/**
+ * WAI-ARIA 1.2 "combobox with list autocomplete", with one deliberate
+ * difference from {@link Combobox}: the committed value does not have to come
+ * from the list. Type "foo", blur, and "foo" is the answer.
+ */
+/** Default `getSuggestionCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`. */
+export declare function defaultGetSuggestionCountLabel(count: number): string;
+export declare const AutocompleteProvider: {
+    (props: AutocompleteContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAutocompleteContext: (consumerName: string) => AutocompleteContextValue;
+/**
+ * Root of a free-text field with suggestions. Owns **two separate** pieces of
+ * state — the draft text in the input (`inputValue`) and the committed value
+ * (`value`) — plus the popup's open state, and hands all three down to every
+ * other `Autocomplete*` part via context. Renders no DOM of its own.
+ *
+ * The distinction from [`Combobox`](../combobox/Combobox.md) is `allowCustomValue`,
+ * which defaults to `true` here and `false` there. A combobox constrains the
+ * answer to its list; an autocomplete only *suggests* one. Typing "foo" and
+ * tabbing away commits "foo", whether or not "foo" was ever an option — which
+ * is what a city field, a tag field, or a search box actually needs, and what
+ * a closed-set select must never do.
+ *
+ * Filtering is the consumer's job by default: you filter your data by
+ * `inputValue` and render only the `AutocompleteItem`s that match, which is
+ * what an async or server-side search needs. Pass a `filter` predicate instead
+ * and the component filters its own children.
+ *
+ * Keyboard: Arrow Down/Up move the highlight **without moving DOM focus**
+ * (real focus never leaves the input; the highlight is virtual, via
+ * `aria-activedescendant`). Enter commits the highlighted suggestion. Escape
+ * closes and puts the last committed text back. Tab commits the raw draft.
+ *
+ * @example Consumer-side (default) filtering:
+ * ```tsx
+ * function CityField() {
+ *   const [inputValue, setInputValue] = React.useState('');
+ *   const matches = CITIES.filter((c) => c.toLowerCase().includes(inputValue.toLowerCase()));
+ *
+ *   return (
+ *     <Autocomplete inputValue={inputValue} onInputValueChange={setInputValue}>
+ *       <AutocompleteInput aria-label="City" placeholder="Where to?" />
+ *       <AutocompletePortal>
+ *         <AutocompleteContent>
+ *           <AutocompleteList aria-label="Cities">
+ *             {matches.map((city) => (
+ *               <AutocompleteItem value={city} key={city}>{city}</AutocompleteItem>
+ *             ))}
+ *           </AutocompleteList>
+ *           <AutocompleteEmpty>No matches — your text is still accepted</AutocompleteEmpty>
+ *         </AutocompleteContent>
+ *       </AutocompletePortal>
+ *     </Autocomplete>
+ *   );
+ * }
+ * ```
+ *
+ * @example Built-in filtering, open on focus:
+ * ```tsx
+ * <Autocomplete openOnFocus filter={(text, input) => text.toLowerCase().startsWith(input.toLowerCase())}>
+ *   <AutocompleteInput aria-label="City" />
+ *   <AutocompleteTrigger aria-label="Show suggestions">▾</AutocompleteTrigger>
+ *   <AutocompletePortal>
+ *     <AutocompleteContent>
+ *       <AutocompleteList aria-label="Cities">
+ *         {CITIES.map((city) => <AutocompleteItem value={city} key={city}>{city}</AutocompleteItem>)}
+ *       </AutocompleteList>
+ *     </AutocompleteContent>
+ *   </AutocompletePortal>
+ * </Autocomplete>
+ * ```
+ */
+export declare function Autocomplete({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, allowCustomValue, openOnFocus, filter, disabled, readOnly, invalid, getSuggestionCountLabel, }: AutocompleteProps): React.JSX.Element;
+export declare namespace Autocomplete {
+    var displayName: string;
+}

package/dist/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { AutocompleteContextValue, AutocompleteProps } from './types.js';
+/**
+ * WAI-ARIA 1.2 "combobox with list autocomplete", with one deliberate
+ * difference from {@link Combobox}: the committed value does not have to come
+ * from the list. Type "foo", blur, and "foo" is the answer.
+ */
+/** Default `getSuggestionCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`. */
+export declare function defaultGetSuggestionCountLabel(count: number): string;
+export declare const AutocompleteProvider: {
+    (props: AutocompleteContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useAutocompleteContext: (consumerName: string) => AutocompleteContextValue;
+/**
+ * Root of a free-text field with suggestions. Owns **two separate** pieces of
+ * state — the draft text in the input (`inputValue`) and the committed value
+ * (`value`) — plus the popup's open state, and hands all three down to every
+ * other `Autocomplete*` part via context. Renders no DOM of its own.
+ *
+ * The distinction from [`Combobox`](../combobox/Combobox.md) is `allowCustomValue`,
+ * which defaults to `true` here and `false` there. A combobox constrains the
+ * answer to its list; an autocomplete only *suggests* one. Typing "foo" and
+ * tabbing away commits "foo", whether or not "foo" was ever an option — which
+ * is what a city field, a tag field, or a search box actually needs, and what
+ * a closed-set select must never do.
+ *
+ * Filtering is the consumer's job by default: you filter your data by
+ * `inputValue` and render only the `AutocompleteItem`s that match, which is
+ * what an async or server-side search needs. Pass a `filter` predicate instead
+ * and the component filters its own children.
+ *
+ * Keyboard: Arrow Down/Up move the highlight **without moving DOM focus**
+ * (real focus never leaves the input; the highlight is virtual, via
+ * `aria-activedescendant`). Enter commits the highlighted suggestion. Escape
+ * closes and puts the last committed text back. Tab commits the raw draft.
+ *
+ * @example Consumer-side (default) filtering:
+ * ```tsx
+ * function CityField() {
+ *   const [inputValue, setInputValue] = React.useState('');
+ *   const matches = CITIES.filter((c) => c.toLowerCase().includes(inputValue.toLowerCase()));
+ *
+ *   return (
+ *     <Autocomplete inputValue={inputValue} onInputValueChange={setInputValue}>
+ *       <AutocompleteInput aria-label="City" placeholder="Where to?" />
+ *       <AutocompletePortal>
+ *         <AutocompleteContent>
+ *           <AutocompleteList aria-label="Cities">
+ *             {matches.map((city) => (
+ *               <AutocompleteItem value={city} key={city}>{city}</AutocompleteItem>
+ *             ))}
+ *           </AutocompleteList>
+ *           <AutocompleteEmpty>No matches — your text is still accepted</AutocompleteEmpty>
+ *         </AutocompleteContent>
+ *       </AutocompletePortal>
+ *     </Autocomplete>
+ *   );
+ * }
+ * ```
+ *
+ * @example Built-in filtering, open on focus:
+ * ```tsx
+ * <Autocomplete openOnFocus filter={(text, input) => text.toLowerCase().startsWith(input.toLowerCase())}>
+ *   <AutocompleteInput aria-label="City" />
+ *   <AutocompleteTrigger aria-label="Show suggestions">▾</AutocompleteTrigger>
+ *   <AutocompletePortal>
+ *     <AutocompleteContent>
+ *       <AutocompleteList aria-label="Cities">
+ *         {CITIES.map((city) => <AutocompleteItem value={city} key={city}>{city}</AutocompleteItem>)}
+ *       </AutocompleteList>
+ *     </AutocompleteContent>
+ *   </AutocompletePortal>
+ * </Autocomplete>
+ * ```
+ */
+export declare function Autocomplete({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, allowCustomValue, openOnFocus, filter, disabled, readOnly, invalid, getSuggestionCountLabel, }: AutocompleteProps): React.JSX.Element;
+export declare namespace Autocomplete {
+    var displayName: string;
+}

package/dist/autocomplete/Autocomplete.js

@@ -0,0 +1 @@
+import*as r from"react";import{createSafeContext as pe}from"../utils/createContext.js";import{announce as ie}from"../utils/liveAnnouncer.js";import{PopperRoot as me}from"../utils/popper.js";import{useControllableState as T}from"../utils/useControllableState.js";import{useOpenChangeComplete as le}from"../utils/useOpenChangeComplete.js";import{useOptionCollection as ae}from"../utils/useOptionCollection.js";import{jsx as M}from"react/jsx-runtime";function se(t){return`${t} suggestion${t===1?"":"s"} available`}var[ue,l]=pe("Autocomplete");function ce({children:t,value:n,defaultValue:e="",onValueChange:p,inputValue:a,defaultInputValue:o,onInputValueChange:u,open:P,defaultOpen:A=!1,onOpenChange:y,onOpenChangeComplete:i,allowCustomValue:c=!0,openOnFocus:m=!1,filter:f,disabled:C=!1,readOnly:x=!1,invalid:Y=!1,getSuggestionCountLabel:H=se}){let Z=r.useRef(null),_=r.useRef(null),D=r.useRef(null),j=r.useId(),[w="",b]=T({prop:n,defaultProp:e,onChange:p}),[g="",R]=T({prop:a,defaultProp:o??e,onChange:u}),[h=!1,s]=T({prop:P,defaultProp:A,onChange:y});le(h,D,i);let d=ae({open:h,setOpen:s,contentRef:D}),{itemCount:O}=d,E=r.useRef(g);r.useEffect(()=>{h&&ie(H(O))},[h,O,H]);let ee=r.useCallback((v,L)=>{C||x||(b(v),R(L),E.current=L,s(!1))},[C,x,b,R,s]),te=r.useCallback(()=>{if(!(C||x)){if(!c){R(E.current),s(!1);return}b(g),E.current=g,s(!1)}},[C,x,c,g,b,R,s]),oe=r.useCallback(()=>{R(E.current),s(!1)},[R,s]),ne=r.useCallback(v=>f===void 0||f(v,g),[f,g]),re=r.useCallback(v=>v!==""&&v===w,[w]);return M(me,{children:M(ue,{inputRef:Z,triggerRef:_,contentRef:D,listId:j,value:w,isSelected:re,inputValue:g,onInputValueChange:R,open:h,onOpenChange:s,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:O,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:ne,commitItem:ee,commitInputValue:te,revert:oe,allowCustomValue:c,openOnFocus:m,disabled:C,readOnly:x,invalid:Y,children:t})})}ce.displayName="Autocomplete";import*as V from"react";import{useComposedRefs as fe}from"../utils/composeRefs.js";import{skdxPart as de}from"../utils/part.js";import{PopperAnchor as Ae}from"../utils/popper.js";import{composeEventHandlers as k,Primitive as ge}from"../utils/primitive.js";import{jsx as N}from"react/jsx-runtime";var F=V.forwardRef((t,n)=>{let e=l("AutocompleteInput"),p=fe(n,e.inputRef),a=()=>{let o=e.activeId?e.getItem(e.activeId):void 0;return o?(e.commitItem(o.value,o.text||o.value),!0):!1};return N(Ae,{asChild:!0,children:N(ge.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...de("autocomplete","input",t.className),ref:p,value:e.inputValue,onChange:k(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onFocus:k(t.onFocus,()=>{e.openOnFocus&&!e.readOnly&&!e.open&&e.onOpenChange(!0)}),onBlur:k(t.onBlur,()=>{e.commitInputValue()}),onKeyDown:k(t.onKeyDown,o=>{o.key==="ArrowDown"?(o.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first")):o.key==="ArrowUp"?(o.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last")):o.key==="Enter"?a()?o.preventDefault():e.allowCustomValue&&e.inputValue!==""&&(o.preventDefault(),e.commitInputValue()):o.key==="Escape"?e.open&&!e.contentRef.current&&(o.preventDefault(),e.revert()):o.key==="Tab"&&e.commitInputValue()})})})});F.displayName="AutocompleteInput";import*as B from"react";import{useComposedRefs as Re}from"../utils/composeRefs.js";import{skdxPart as Pe}from"../utils/part.js";import{composeEventHandlers as S,Primitive as ve}from"../utils/primitive.js";import{jsx as Ie}from"react/jsx-runtime";var W=B.forwardRef((t,n)=>{let e=l("AutocompleteTrigger"),p=Re(n,e.triggerRef);return Ie(ve.button,{type:"button",tabIndex:-1,"aria-expanded":e.open,"aria-controls":e.listId,disabled:e.disabled,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-state":e.open?"open":"closed",...t,...Pe("autocomplete","trigger",t.className),ref:p,onMouseDown:S(t.onMouseDown,a=>a.preventDefault()),onClick:S(t.onClick,()=>{e.readOnly||(e.onOpenChange(!e.open),e.inputRef.current?.focus())})})});W.displayName="AutocompleteTrigger";import{Portal as ye}from"../utils/portal.js";import{jsx as Ce}from"react/jsx-runtime";var K=({forceMount:t,children:n,...e})=>{let p=l("AutocompletePortal");return t||p.open?Ce(ye,{...e,children:n}):null};K.displayName="AutocompletePortal";import*as $ from"react";import{useComposedRefs as xe}from"../utils/composeRefs.js";import{skdxPart as he}from"../utils/part.js";import{PopperContent as be}from"../utils/popper.js";import{composeEventHandlers as Ee}from"../utils/primitive.js";import{useDismiss as ke}from"../utils/useDismiss.js";import{jsx as De}from"react/jsx-runtime";var G=$.forwardRef(({forceMount:t,side:n="bottom",align:e="start",sideOffset:p=4,onEscapeKeyDown:a,onPointerDownOutside:o,onFocusOutside:u,onInteractOutside:P,...A},y)=>{let i=l("AutocompleteContent"),c=xe(y,i.contentRef);return ke({enabled:i.open,onEscapeKeyDown:m=>{a?.(m),m.defaultPrevented||i.revert()},onInteractOutside:P,onPointerDownOutside:m=>{o?.(m),m.defaultPrevented||i.onOpenChange(!1)},onFocusOutside:m=>{u?.(m),m.defaultPrevented||i.onOpenChange(!1)}},[i.contentRef,i.inputRef,i.triggerRef]),!t&&!i.open?null:De(be,{component:"autocomplete","data-state":i.open?"open":"closed",side:n,align:e,sideOffset:p,...A,...he("autocomplete","content",A.className),ref:c,onMouseDown:Ee(A.onMouseDown,m=>m.preventDefault())})});G.displayName="AutocompleteContent";import*as U from"react";import{skdxPart as we}from"../utils/part.js";import{Primitive as Oe}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";var q=U.forwardRef((t,n)=>{let e=l("AutocompleteList");return Te(Oe.div,{role:"listbox",id:e.listId,...t,...we("autocomplete","list",t.className),ref:n})});q.displayName="AutocompleteList";import*as I from"react";import{useComposedRefs as He}from"../utils/composeRefs.js";import{skdxPart as Le}from"../utils/part.js";import{composeEventHandlers as z,Primitive as Me}from"../utils/primitive.js";import{useOptionEntry as Ne}from"../utils/useOptionCollection.js";import{jsx as Ve}from"react/jsx-runtime";var J=I.forwardRef(({value:t,disabled:n,textValue:e,...p},a)=>{let o=l("AutocompleteItem"),u=I.useId(),P=I.useRef(null),A=He(a,P),{text:y,visible:i}=Ne({id:u,value:t,textValue:e,itemRef:P,matchesFilter:o.matchesFilter,registerItem:o.registerItem,unregisterItem:o.unregisterItem});if(!i)return null;let c=o.isSelected(t),m=o.activeId===u,f=n||o.disabled||o.readOnly;return Ve(Me.div,{role:"option",id:u,"data-value":t,"aria-selected":c,"aria-disabled":f?!0:void 0,"data-state":c?"checked":"unchecked","data-highlighted":m?"":void 0,"data-disabled":f?"":void 0,...p,...Le("autocomplete","item",p.className),ref:A,onClick:z(p.onClick,()=>{f||(o.commitItem(t,y??t),o.inputRef.current?.focus())}),onPointerEnter:z(p.onPointerEnter,()=>{f||o.setActiveId(u)})})});J.displayName="AutocompleteItem";import*as Q from"react";import{skdxPart as Fe}from"../utils/part.js";import{Primitive as Se}from"../utils/primitive.js";import{jsx as Be}from"react/jsx-runtime";var X=Q.forwardRef((t,n)=>l("AutocompleteEmpty").itemCount===0?Be(Se.div,{role:"presentation",...t,...Fe("autocomplete","empty",t.className),ref:n}):null);X.displayName="AutocompleteEmpty";export{ce as Autocomplete,G as AutocompleteContent,X as AutocompleteEmpty,F as AutocompleteInput,J as AutocompleteItem,q as AutocompleteList,K as AutocompletePortal,ue as AutocompleteProvider,W as AutocompleteTrigger,se as defaultGetSuggestionCountLabel,l as useAutocompleteContext};

package/dist/autocomplete/AutocompleteContent.d.cts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { AutocompleteContentProps } from './types.cjs';
+/**
+ * The popup shell of an {@link Autocomplete}, positioned against the input via
+ * floating-ui (see {@link AutocompleteContentProps}). Renders a plain `<div>`
+ * with `data-state`, `data-side` and `data-align`, and — like every popper in
+ * this package — writes the four measurement custom properties
+ * `--skdx-autocomplete-available-width`, `--skdx-autocomplete-available-height`,
+ * `--skdx-autocomplete-trigger-width` and `--skdx-autocomplete-transform-origin`
+ * onto itself after each reposition, so the panel can be sized and animated
+ * from CSS alone rather than measured again in JavaScript.
+ *
+ * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, one
+ * level in, so a header, a footer or an {@link AutocompleteEmpty} can sit
+ * inside the popup without becoming a bogus `role="option"`-less child of a
+ * listbox. Prevents `mousedown` from stealing focus off the input — real DOM
+ * focus must never leave `AutocompleteInput`, or the blur would commit and
+ * close before the click landed. Unmounts when closed unless `forceMount`.
+ *
+ * Escape reverts the draft text to the last committed value and closes; an
+ * outside interaction — pointer-down outside or focus moving outside — closes
+ * too, each reported to `onPointerDownOutside`/`onFocusOutside` and, just
+ * before them and with the same event, to `onInteractOutside`. Any of those
+ * (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open, and
+ * on Escape leaves the draft text alone as well. The input counts as inside:
+ * clicking or tabbing back into it is not an outside interaction.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteContent>
+ *   <AutocompleteList aria-label="Cities">
+ *     <AutocompleteItem value="Oslo">Oslo</AutocompleteItem>
+ *   </AutocompleteList>
+ * </AutocompleteContent>
+ * ```
+ */
+export declare const AutocompleteContent: React.ForwardRefExoticComponent<Omit<AutocompleteContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/autocomplete/AutocompleteContent.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { AutocompleteContentProps } from './types.js';
+/**
+ * The popup shell of an {@link Autocomplete}, positioned against the input via
+ * floating-ui (see {@link AutocompleteContentProps}). Renders a plain `<div>`
+ * with `data-state`, `data-side` and `data-align`, and — like every popper in
+ * this package — writes the four measurement custom properties
+ * `--skdx-autocomplete-available-width`, `--skdx-autocomplete-available-height`,
+ * `--skdx-autocomplete-trigger-width` and `--skdx-autocomplete-transform-origin`
+ * onto itself after each reposition, so the panel can be sized and animated
+ * from CSS alone rather than measured again in JavaScript.
+ *
+ * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, one
+ * level in, so a header, a footer or an {@link AutocompleteEmpty} can sit
+ * inside the popup without becoming a bogus `role="option"`-less child of a
+ * listbox. Prevents `mousedown` from stealing focus off the input — real DOM
+ * focus must never leave `AutocompleteInput`, or the blur would commit and
+ * close before the click landed. Unmounts when closed unless `forceMount`.
+ *
+ * Escape reverts the draft text to the last committed value and closes; an
+ * outside interaction — pointer-down outside or focus moving outside — closes
+ * too, each reported to `onPointerDownOutside`/`onFocusOutside` and, just
+ * before them and with the same event, to `onInteractOutside`. Any of those
+ * (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open, and
+ * on Escape leaves the draft text alone as well. The input counts as inside:
+ * clicking or tabbing back into it is not an outside interaction.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteContent>
+ *   <AutocompleteList aria-label="Cities">
+ *     <AutocompleteItem value="Oslo">Oslo</AutocompleteItem>
+ *   </AutocompleteList>
+ * </AutocompleteContent>
+ * ```
+ */
+export declare const AutocompleteContent: React.ForwardRefExoticComponent<Omit<AutocompleteContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/autocomplete/AutocompleteEmpty.d.cts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { AutocompleteEmptyProps } from './types.cjs';
+/**
+ * Fallback shown in place of the suggestion list when no `AutocompleteItem`s
+ * are currently rendered — because the consumer's filtered results are empty,
+ * or because the root's `filter` predicate rejected every one. Renders a
+ * `<div role="presentation">`; renders nothing while at least one suggestion
+ * is registered.
+ *
+ * Word it as "no matches", not "invalid": with the default
+ * `allowCustomValue`, an empty list does **not** mean the user's text is
+ * rejected — it means nothing was suggested and their own text is the answer.
+ *
+ * Belongs inside {@link AutocompleteContent} and *outside*
+ * {@link AutocompleteList} — a non-option child of a listbox is a broken
+ * listbox.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteContent>
+ *   <AutocompleteList aria-label="Cities">…</AutocompleteList>
+ *   <AutocompleteEmpty>No matches — we'll use what you typed</AutocompleteEmpty>
+ * </AutocompleteContent>
+ * ```
+ */
+export declare const AutocompleteEmpty: React.ForwardRefExoticComponent<Omit<AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/autocomplete/AutocompleteEmpty.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { AutocompleteEmptyProps } from './types.js';
+/**
+ * Fallback shown in place of the suggestion list when no `AutocompleteItem`s
+ * are currently rendered — because the consumer's filtered results are empty,
+ * or because the root's `filter` predicate rejected every one. Renders a
+ * `<div role="presentation">`; renders nothing while at least one suggestion
+ * is registered.
+ *
+ * Word it as "no matches", not "invalid": with the default
+ * `allowCustomValue`, an empty list does **not** mean the user's text is
+ * rejected — it means nothing was suggested and their own text is the answer.
+ *
+ * Belongs inside {@link AutocompleteContent} and *outside*
+ * {@link AutocompleteList} — a non-option child of a listbox is a broken
+ * listbox.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteContent>
+ *   <AutocompleteList aria-label="Cities">…</AutocompleteList>
+ *   <AutocompleteEmpty>No matches — we'll use what you typed</AutocompleteEmpty>
+ * </AutocompleteContent>
+ * ```
+ */
+export declare const AutocompleteEmpty: React.ForwardRefExoticComponent<Omit<AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;