@skdx/react 0.27.0 → 0.29.0

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

@@ -1,4 +1,20 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/**
+ * The payload `onValueChange` receives, carrying both ends of the change
+ * plus what drove it. A dial's `onValueCommit` fires only when a pointer drag
+ * ends — a key press is already a discrete commit and fires none.
+ */
+export interface AngleSliderValueChangeDetail {
+    /** The angle the change settled on, in degrees, already folded into `[0, 360)`. */
+    value: number;
+    /** The angle held before the change, or `null` when there was none. */
+    previousValue: number | null;
+    /**
+     * What drove the change: `'keyboard'` for arrow/Page/Home/End keys,
+     * `'pointer'` for a drag frame, `'programmatic'` when the application set it.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @internal Shared state distributed from {@link AngleSlider} to its parts via context. Not part of the public API. */
 export interface AngleSliderContextValue {
     value: number;
@@ -14,40 +30,33 @@ export interface AngleSliderProps extends Omit<PrimitivePropsWithRef<'div'>, 'on
      * 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.
+     * @min 0
+     * @max 360
      */
-    value?: number;
+    value?: number | undefined;
     /**
      * Initial angle in degrees, for uncontrolled usage, seeding the first render.
      * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     * @min 0
+     * @max 360
      */
-    defaultValue?: number;
+    defaultValue?: number | undefined;
     /**
-     * Fires with the new angle on every change — each arrow key, and each frame
-     * of a drag that crosses a `step` boundary.
+     * Fires on every change — each arrow key, and each frame of a drag that
+     * crosses a `step` boundary — carrying the new angle, the angle held before
+     * it, and the reason the change happened. A change that resolves to the
+     * angle already held fires nothing.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: number) => void;
+    onValueChange?: ((detail: AngleSliderValueChangeDetail) => void) | undefined;
     /**
      * 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`.
+     * cancel) — the callback to hang an expensive effect on, since a drag emits
+     * `onValueChange` per step crossed but this exactly once. Keyboard changes
+     * do not fire it, being discrete commits already 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;
+    onValueCommit?: ((value: number) => void) | undefined;
     /**
      * Increment in degrees that both pointer and keyboard input are rounded to.
      * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
@@ -55,33 +64,70 @@ export interface AngleSliderProps extends Omit<PrimitivePropsWithRef<'div'>, 'on
      * arrows keep falling back to 1° so every angle stays reachable by keyboard.
      * @default 1 — every whole degree is reachable.
      */
-    step?: number;
+    step?: number | undefined;
     /**
      * 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;
+    disabled?: boolean | undefined;
     /**
      * 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;
+    readOnly?: boolean | undefined;
     /**
      * 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.
+     * parts, discovered from the DOM at interaction time so one added or removed
+     * later just works. With marks present, dragging snaps to the nearest one,
+     * arrow keys move one mark, Shift+arrow/PageUp/PageDown move three, and
+     * Home/End jump to the first/last mark; with none rendered, falls back to
+     * the `step` grid rather than becoming unchangeable.
      * @default false
      */
-    restrictToMarks?: boolean;
+    restrictToMarks?: boolean | undefined;
+    /**
+     * Formats the angle for `aria-valuetext`, which is what a screen reader
+     * announces in place of the bare `aria-valuenow`. Supply it to localise the
+     * announcement, or to announce something that is not degrees at all — a
+     * compass bearing, a clock position. Returning an empty string is treated as
+     * no override.
+     * @default (angle) => `${angle}°`
+     */
+    formatValue?: ((angle: number) => string) | undefined;
+    /**
+     * Form field name. With it the current angle is submitted under that name
+     * through a visually-hidden input; without it the dial submits nothing.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Id of the `<form>` the dial submits into, forwarded to the hidden input,
+     * so a dial can live outside the form it belongs to.
+     * @default undefined
+     */
+    form?: string | undefined;
+    /**
+     * Ticks rendered around the dial, one derived `AngleSliderMark` part each.
+     * Marks are discovered from the DOM at interaction time (same mechanism
+     * `restrictToMarks` always used), so a derived mark works with it exactly
+     * as a hand-composed one does. Ignored when `children` is given.
+     * @default undefined — no marks are rendered.
+     */
+    marks?: readonly AngleSliderMarkData[] | undefined;
+}
+/**
+ * One entry of {@link AngleSliderProps.marks} — a tick at an angle, with an
+ * optional label. Named `Data`, not `AngleSliderMark`, because that name is
+ * the `AngleSliderMark` part component's own.
+ */
+export interface AngleSliderMarkData {
+    /** The angle in degrees this tick sits at. */
+    value: number;
+    /** Text rendered inside the derived mark. */
+    label?: string | undefined;
 }
 /** Props for the {@link AngleSliderThumb}, the handle that points at the current angle. */
 export interface AngleSliderThumbProps extends PrimitivePropsWithRef<'div'> {

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

@@ -1,4 +1,20 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/**
+ * The payload `onValueChange` receives, carrying both ends of the change
+ * plus what drove it. A dial's `onValueCommit` fires only when a pointer drag
+ * ends — a key press is already a discrete commit and fires none.
+ */
+export interface AngleSliderValueChangeDetail {
+    /** The angle the change settled on, in degrees, already folded into `[0, 360)`. */
+    value: number;
+    /** The angle held before the change, or `null` when there was none. */
+    previousValue: number | null;
+    /**
+     * What drove the change: `'keyboard'` for arrow/Page/Home/End keys,
+     * `'pointer'` for a drag frame, `'programmatic'` when the application set it.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @internal Shared state distributed from {@link AngleSlider} to its parts via context. Not part of the public API. */
 export interface AngleSliderContextValue {
     value: number;
@@ -14,40 +30,33 @@ export interface AngleSliderProps extends Omit<PrimitivePropsWithRef<'div'>, 'on
      * 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.
+     * @min 0
+     * @max 360
      */
-    value?: number;
+    value?: number | undefined;
     /**
      * Initial angle in degrees, for uncontrolled usage, seeding the first render.
      * @default 0 — pointing straight up, since 0° is at 12 o'clock.
+     * @min 0
+     * @max 360
      */
-    defaultValue?: number;
+    defaultValue?: number | undefined;
     /**
-     * Fires with the new angle on every change — each arrow key, and each frame
-     * of a drag that crosses a `step` boundary.
+     * Fires on every change — each arrow key, and each frame of a drag that
+     * crosses a `step` boundary — carrying the new angle, the angle held before
+     * it, and the reason the change happened. A change that resolves to the
+     * angle already held fires nothing.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: number) => void;
+    onValueChange?: ((detail: AngleSliderValueChangeDetail) => void) | undefined;
     /**
      * 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`.
+     * cancel) — the callback to hang an expensive effect on, since a drag emits
+     * `onValueChange` per step crossed but this exactly once. Keyboard changes
+     * do not fire it, being discrete commits already 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;
+    onValueCommit?: ((value: number) => void) | undefined;
     /**
      * Increment in degrees that both pointer and keyboard input are rounded to.
      * Shift+arrow always moves 10° and PageUp/PageDown always move 45°,
@@ -55,33 +64,70 @@ export interface AngleSliderProps extends Omit<PrimitivePropsWithRef<'div'>, 'on
      * arrows keep falling back to 1° so every angle stays reachable by keyboard.
      * @default 1 — every whole degree is reachable.
      */
-    step?: number;
+    step?: number | undefined;
     /**
      * 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;
+    disabled?: boolean | undefined;
     /**
      * 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;
+    readOnly?: boolean | undefined;
     /**
      * 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.
+     * parts, discovered from the DOM at interaction time so one added or removed
+     * later just works. With marks present, dragging snaps to the nearest one,
+     * arrow keys move one mark, Shift+arrow/PageUp/PageDown move three, and
+     * Home/End jump to the first/last mark; with none rendered, falls back to
+     * the `step` grid rather than becoming unchangeable.
      * @default false
      */
-    restrictToMarks?: boolean;
+    restrictToMarks?: boolean | undefined;
+    /**
+     * Formats the angle for `aria-valuetext`, which is what a screen reader
+     * announces in place of the bare `aria-valuenow`. Supply it to localise the
+     * announcement, or to announce something that is not degrees at all — a
+     * compass bearing, a clock position. Returning an empty string is treated as
+     * no override.
+     * @default (angle) => `${angle}°`
+     */
+    formatValue?: ((angle: number) => string) | undefined;
+    /**
+     * Form field name. With it the current angle is submitted under that name
+     * through a visually-hidden input; without it the dial submits nothing.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Id of the `<form>` the dial submits into, forwarded to the hidden input,
+     * so a dial can live outside the form it belongs to.
+     * @default undefined
+     */
+    form?: string | undefined;
+    /**
+     * Ticks rendered around the dial, one derived `AngleSliderMark` part each.
+     * Marks are discovered from the DOM at interaction time (same mechanism
+     * `restrictToMarks` always used), so a derived mark works with it exactly
+     * as a hand-composed one does. Ignored when `children` is given.
+     * @default undefined — no marks are rendered.
+     */
+    marks?: readonly AngleSliderMarkData[] | undefined;
+}
+/**
+ * One entry of {@link AngleSliderProps.marks} — a tick at an angle, with an
+ * optional label. Named `Data`, not `AngleSliderMark`, because that name is
+ * the `AngleSliderMark` part component's own.
+ */
+export interface AngleSliderMarkData {
+    /** The angle in degrees this tick sits at. */
+    value: number;
+    /** Text rendered inside the derived mark. */
+    label?: string | undefined;
 }
 /** Props for the {@link AngleSliderThumb}, the handle that points at the current angle. */
 export interface AngleSliderThumbProps extends PrimitivePropsWithRef<'div'> {

package/dist/aspect-ratio/AspectRatio.cjs

@@ -1 +1,2 @@
-"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});
+'use client';
+"use strict";var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},A=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of R(e))!u.call(t,a)&&a!==o&&i(t,a,{get:()=>e[a],enumerable:!(r=l(e,a))||r.enumerable});return t};var v=t=>A(i({},"__esModule",{value:!0}),t);var y={};b(y,{AspectRatio:()=>d,resolveAspectRatio:()=>m});module.exports=v(y);var p=require("../utils/dev-mode.cjs"),c=require("../utils/part.cjs"),n=require("../utils/primitive.cjs"),f=require("react/jsx-runtime"),s=!1;function m(t){return Number.isFinite(t)&&t>0?t:(s||(s=!0,(0,p.isDevMode)()&&console.warn(`[skdx] AspectRatio: \`ratio\` must be a finite number greater than zero, got ${t}. Falling back to the default of 1. A non-positive ratio is not a valid CSS aspect-ratio, so the declaration would be discarded and the box would collapse to no height.`)),1)}var d=({ratio:t=1,style:e,ref:o,...r})=>(0,f.jsx)(n.Primitive.div,{...r,...(0,c.skdxPart)("aspect-ratio","root",r.className),ref:o,style:{...e,aspectRatio:m(t)}});d.displayName="AspectRatio";0&&(module.exports={AspectRatio,resolveAspectRatio});

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

@@ -1,12 +1,10 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AspectRatioProps } from './types.cjs';
+/** @internal Falls back to the default for a non-positive/non-finite `ratio`, and warns once. */
+export declare function resolveAspectRatio(ratio: number): number;
 /**
- * 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.
+ * Fixed width:height ratio. Requires a containing block with definite inline
+ * size — flex/grid items without `width`/`flex-basis` have no size.
  *
  * @example
  * ```tsx
@@ -17,4 +15,7 @@ import type { AspectRatioProps } from './types.cjs';
  * </div>
  * ```
  */
-export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AspectRatio: {
+    ({ ratio, style, ref: forwardedRef, ...props }: AspectRatioProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,12 +1,10 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AspectRatioProps } from './types.js';
+/** @internal Falls back to the default for a non-positive/non-finite `ratio`, and warns once. */
+export declare function resolveAspectRatio(ratio: number): number;
 /**
- * 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.
+ * Fixed width:height ratio. Requires a containing block with definite inline
+ * size — flex/grid items without `width`/`flex-basis` have no size.
  *
  * @example
  * ```tsx
@@ -17,4 +15,7 @@ import type { AspectRatioProps } from './types.js';
  * </div>
  * ```
  */
-export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AspectRatio: {
+    ({ ratio, style, ref: forwardedRef, ...props }: AspectRatioProps): React.ReactNode;
+    displayName: string;
+};

package/dist/aspect-ratio/AspectRatio.js

@@ -1 +1,2 @@
-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};
+'use client';
+import{isDevMode as i}from"../utils/dev-mode.js";import{skdxPart as s}from"../utils/part.js";import{Primitive as p}from"../utils/primitive.js";import{jsx as m}from"react/jsx-runtime";var o=!1;function c(t){return Number.isFinite(t)&&t>0?t:(o||(o=!0,i()&&console.warn(`[skdx] AspectRatio: \`ratio\` must be a finite number greater than zero, got ${t}. Falling back to the default of 1. A non-positive ratio is not a valid CSS aspect-ratio, so the declaration would be discarded and the box would collapse to no height.`)),1)}var n=({ratio:t=1,style:r,ref:a,...e})=>m(p.div,{...e,...s("aspect-ratio","root",e.className),ref:a,style:{...r,aspectRatio:c(t)}});n.displayName="AspectRatio";export{n as AspectRatio,c as resolveAspectRatio};

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

@@ -1,18 +1,9 @@
-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`.
+     * Desired width:height ratio, e.g. `16 / 9`. Must be positive; invalid values discard the declaration, collapse the box, and warn in development.
      * @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'>;
+    ratio?: number | undefined;
 }

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

@@ -1,18 +1,9 @@
-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`.
+     * Desired width:height ratio, e.g. `16 / 9`. Must be positive; invalid values discard the declaration, collapse the box, and warn in development.
      * @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'>;
+    ratio?: number | undefined;
 }

package/dist/autocomplete/Autocomplete.cjs

@@ -1 +1,2 @@
-"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});
+'use client';
+"use strict";var ht=Object.create;var S=Object.defineProperty;var Ot=Object.getOwnPropertyDescriptor;var xt=Object.getOwnPropertyNames;var Vt=Object.getPrototypeOf,kt=Object.prototype.hasOwnProperty;var Et=(t,e)=>{for(var o in e)S(t,o,{get:e[o],enumerable:!0})},fe=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of xt(e))!kt.call(t,r)&&r!==o&&S(t,r,{get:()=>e[r],enumerable:!(a=Ot(e,r))||a.enumerable});return t};var ne=(t,e,o)=>(o=t!=null?ht(Vt(t)):{},fe(e||!t||!t.__esModule?S(o,"default",{value:t,enumerable:!0}):o,t)),Nt=t=>fe(S({},"__esModule",{value:!0}),t);var Ft={};Et(Ft,{Autocomplete:()=>tt,AutocompleteClear:()=>K,AutocompleteContent:()=>B,AutocompleteEmpty:()=>W,AutocompleteGroup:()=>J,AutocompleteGroupLabel:()=>X,AutocompleteGroupProvider:()=>Ee,AutocompleteInput:()=>_,AutocompleteItem:()=>U,AutocompleteList:()=>$,AutocompletePortal:()=>z,AutocompleteProvider:()=>et,AutocompleteTrigger:()=>nt,defaultGetSuggestionCountLabel:()=>je,defaultOptionsFilter:()=>L.defaultOptionsFilter,useAutocompleteContext:()=>m,useAutocompleteGroupContext:()=>ae});module.exports=Nt(Ft);var n=ne(require("react"),1),$e=require("../utils/createContext.cjs"),ze=require("../utils/formControl.cjs"),Qe=require("../utils/liveAnnouncer.cjs"),Ye=require("../utils/popper.cjs"),Z=require("../utils/scoredFilter.cjs"),Y=require("../utils/useControllableState.cjs"),Ze=require("../utils/useOpenChangeComplete.cjs"),j=require("../utils/useOptionCollection.cjs");var qe=require("../utils/Glyph.cjs");var de=require("../utils/part.cjs"),D=require("../utils/primitive.cjs");var Ae=require("react/jsx-runtime"),K=({ref:t,...e})=>{let o=m("AutocompleteClear"),a=o.value===""&&o.inputValue==="";return(0,Ae.jsx)(D.Primitive.button,{type:"button",tabIndex:-1,disabled:o.disabled||o.readOnly||a,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...e,...(0,de.skdxPart)("autocomplete","clear",e.className),ref:t,onMouseDown:(0,D.composeEventHandlers)(e.onMouseDown,r=>r.preventDefault()),onClick:(0,D.composeEventHandlers)(e.onClick,()=>{o.clear(),o.inputRef.current?.focus()})})};K.displayName="AutocompleteClear";var ye=require("../utils/composeRefs.cjs"),Re=require("../utils/part.cjs"),ge=require("../utils/popper.cjs"),Ce=require("../utils/primitive.cjs"),be=require("../utils/useDismiss.cjs");var ve=require("react/jsx-runtime"),B=({forceMount:t,side:e="bottom",align:o="start",sideOffset:a=4,onEscapeKeyDown:r,onPointerDownOutside:u,onFocusOutside:s,onInteractOutside:f,ref:A,...l})=>{let p=m("AutocompleteContent"),R=(0,ye.useComposedRefs)(A,p.contentRef);return(0,be.useDismiss)({enabled:p.open,onEscapeKeyDown:i=>{r?.(i),i.defaultPrevented||p.revert()},onInteractOutside:f,onPointerDownOutside:i=>{u?.(i),i.defaultPrevented||p.onOpenChange(!1)},onFocusOutside:i=>{s?.(i),i.defaultPrevented||p.onOpenChange(!1)}},[p.contentRef,p.inputRef,p.triggerRef]),!t&&!p.open?null:(0,ve.jsx)(ge.PopperContent,{component:"autocomplete","aria-busy":p.loading?!0:void 0,"data-loading":p.loading?"":void 0,"data-state":p.open?"open":"closed",side:e,align:o,sideOffset:a,...l,...(0,Re.skdxPart)("autocomplete","content",l.className),ref:R,onMouseDown:(0,Ce.composeEventHandlers)(l.onMouseDown,i=>i.preventDefault())})};B.displayName="AutocompleteContent";var Pe=require("../utils/part.cjs"),Ie=require("../utils/primitive.cjs");var he=require("react/jsx-runtime"),W=({ref:t,...e})=>m("AutocompleteEmpty").itemCount===0?(0,he.jsx)(Ie.Primitive.div,{role:"presentation",...e,...(0,Pe.skdxPart)("autocomplete","empty",e.className),ref:t}):null;W.displayName="AutocompleteEmpty";var Oe=ne(require("react"),1),xe=require("../utils/createContext.cjs"),Ve=require("../utils/part.cjs"),ke=require("../utils/primitive.cjs"),le=require("react/jsx-runtime"),[Ee,ae]=(0,xe.createSafeContext)("AutocompleteGroup"),J=({ref:t,...e})=>{let o=Oe.useId();return(0,le.jsx)(Ee,{labelId:o,children:(0,le.jsx)(ke.Primitive.div,{role:"group","aria-labelledby":o,...e,...(0,Ve.skdxPart)("autocomplete","group",e.className),ref:t})})};J.displayName="AutocompleteGroup";var Ne=require("../utils/part.cjs"),Ge=require("../utils/primitive.cjs");var De=require("react/jsx-runtime"),X=({ref:t,...e})=>{let o=ae("AutocompleteGroupLabel");return(0,De.jsx)(Ge.Primitive.div,{id:o.labelId,...e,...(0,Ne.skdxPart)("autocomplete","label",e.className),ref:t})};X.displayName="AutocompleteGroupLabel";var Te=require("../utils/composeRefs.cjs"),Le=require("../utils/part.cjs"),He=require("../utils/popper.cjs"),k=require("../utils/primitive.cjs");var ue=require("react/jsx-runtime");function we(t){let e=t.activeId?t.getItem(t.activeId):void 0;return e?(t.commitItem(e.value,e.text||e.value,"keyboard"),!0):!1}function Gt(t,e){return e.altKey&&e.key==="ArrowDown"?(e.preventDefault(),t.open||t.onOpenChange(!0),!0):e.altKey&&e.key==="ArrowUp"?(e.preventDefault(),!we(t)&&t.open&&t.onOpenChange(!1),!0):!1}function Dt(t,e){return e.key==="ArrowDown"?(e.preventDefault(),t.open?t.moveActive(1):t.openWithHighlight("first"),!0):e.key==="ArrowUp"?(e.preventDefault(),t.open?t.moveActive(-1):t.openWithHighlight("last"),!0):e.key==="Home"||e.key==="End"?(t.open&&(e.preventDefault(),t.moveActiveToEdge(e.key==="Home"?"first":"last")),!0):!1}function Tt(t,e){e.key==="Enter"?we(t)?e.preventDefault():t.allowCustomValue&&t.inputValue!==""?(e.preventDefault(),t.commitInputValue("keyboard")):t.open&&t.onOpenChange(!1):e.key==="Escape"?t.open&&!t.contentRef.current&&(e.preventDefault(),t.revert()):e.key==="Tab"&&t.commitInputValue("keyboard")}var _=({ref:t,...e})=>{let o=m("AutocompleteInput"),a=(0,Te.useComposedRefs)(t,o.inputRef);return(0,ue.jsx)(He.PopperAnchor,{asChild:!0,children:(0,ue.jsx)(k.Primitive.input,{type:"text",role:"combobox","aria-expanded":o.open,"aria-controls":o.listId,"aria-autocomplete":"list","aria-activedescendant":o.activeId??void 0,autoComplete:"off",name:o.name,form:o.form,disabled:o.disabled,readOnly:o.readOnly,"aria-invalid":o.invalid?!0:void 0,"aria-readonly":o.readOnly?!0:void 0,"aria-busy":o.loading?!0:void 0,"data-invalid":o.invalid?"":void 0,"data-readonly":o.readOnly?"":void 0,"data-loading":o.loading?"":void 0,"data-disabled":o.disabled?"":void 0,"data-state":o.open?"open":"closed",...e,...(0,Le.skdxPart)("autocomplete","input",e.className),ref:a,value:o.inputValue,onChange:(0,k.composeEventHandlers)(e.onChange,r=>{o.onInputValueChange(r.target.value),o.open||o.onOpenChange(!0)}),onFocus:(0,k.composeEventHandlers)(e.onFocus,()=>{o.openOnFocus&&!o.readOnly&&!o.open&&o.onOpenChange(!0)}),onBlur:(0,k.composeEventHandlers)(e.onBlur,()=>{o.commitInputValue("pointer")}),onKeyDown:(0,k.composeEventHandlers)(e.onKeyDown,r=>{o.disabled||Gt(o,r)||Dt(o,r)||Tt(o,r)})})})};_.displayName="AutocompleteInput";var q=ne(require("react"),1),Fe=require("../utils/composeRefs.cjs"),Me=require("../utils/part.cjs"),T=require("../utils/primitive.cjs"),Se=require("../utils/useOptionCollection.cjs");var Ke=require("react/jsx-runtime"),U=({value:t,disabled:e,textValue:o,ref:a,...r})=>{let u=m("AutocompleteItem"),s=q.useId(),f=q.useRef(null),A=(0,Fe.useComposedRefs)(a,f),{text:l,visible:p}=(0,Se.useOptionEntry)({id:s,value:t,textValue:o,itemRef:f,matchesFilter:u.matchesFilter,registerItem:u.registerItem,unregisterItem:u.unregisterItem});if(!p)return null;let R=u.isSelected(t),i=u.activeId===s,C=e||u.disabled||u.readOnly,I=u.itemOrder?.get(s);return(0,Ke.jsx)(T.Primitive.div,{role:"option",id:s,"data-value":t,"aria-selected":R,"aria-disabled":C?!0:void 0,"data-state":R?"checked":"unchecked","data-highlighted":i?"":void 0,"data-disabled":C?"":void 0,...r,...(0,Me.skdxPart)("autocomplete","item",r.className),ref:A,onClick:(0,T.composeEventHandlers)(r.onClick,()=>{C||(u.commitItem(t,l??t,"pointer"),u.inputRef.current?.focus())}),onPointerEnter:(0,T.composeEventHandlers)(r.onPointerEnter,()=>{C||u.setActiveId(s)}),style:I!==void 0?{order:I,...r.style}:r.style})};U.displayName="AutocompleteItem";var Be=require("../utils/part.cjs"),We=require("../utils/primitive.cjs");var Je=require("react/jsx-runtime"),$=({ref:t,...e})=>{let o=m("AutocompleteList");return(0,Je.jsx)(We.Primitive.div,{role:"listbox",id:o.listId,...e,...(0,Be.skdxPart)("autocomplete","list",e.className),ref:t})};$.displayName="AutocompleteList";var Xe=require("../utils/portal.cjs");var _e=require("react/jsx-runtime"),z=({forceMount:t,children:e,...o})=>{let a=m("AutocompletePortal");return t||a.open?(0,_e.jsx)(Xe.Portal,{...o,children:e}):null};z.displayName="AutocompletePortal";var L=require("../combobox/Combobox.cjs"),c=require("react/jsx-runtime"),Lt=t=>"options"in t,Ue=({options:t,renderOption:e,placeholder:o,ariaLabel:a,clearable:r=!1,passThrough:u})=>{let s=m("Autocomplete"),f=a??o,A=l=>(0,c.jsx)(U,{value:l.value,disabled:l.disabled,textValue:l.label,children:e?e(l,{selected:s.isSelected(l.value)}):l.label??l.value},l.value);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)("div",{className:"skdx-autocomplete__field","data-clearable":r?"":void 0,children:[(0,c.jsx)(_,{...u,"aria-label":f,placeholder:o}),r?(0,c.jsx)(K,{"aria-label":"Clear",children:(0,c.jsx)(qe.Glyph,{name:"close"})}):null]}),(0,c.jsx)(z,{children:(0,c.jsxs)(B,{children:[(0,c.jsx)($,{"aria-label":f,children:t.map(l=>Lt(l)?(0,c.jsxs)(J,{children:[(0,c.jsx)(X,{children:l.label}),l.options.map(A)]},l.label):A(l))}),(0,c.jsx)(W,{children:"No suggestions"})]})})]})};var Q=require("react/jsx-runtime");function je(t){return`${t} suggestion${t===1?"":"s"} available`}var[et,m]=(0,$e.createSafeContext)("Autocomplete");function Ht(t,e){return t??(e?L.defaultOptionsFilter:void 0)}function wt({value:t,defaultValue:e="",onValueChange:o,inputValue:a,defaultInputValue:r,onInputValueChange:u}){let s=n.useRef("programmatic"),f=n.useRef(!1),A=n.useRef(null),[l="",p]=(0,Y.useControllableState)({prop:t,defaultProp:e,onChange:G=>o?.({value:G,previousValue:A.current,reason:s.current,created:f.current})}),R=n.useRef(l);n.useInsertionEffect(()=>{R.current=l});let i=n.useCallback((G,h,O)=>{s.current=h,f.current=O,A.current=R.current===""?null:R.current,p(G)},[p]),[C="",I]=(0,Y.useControllableState)({prop:a,defaultProp:r??e,onChange:u}),ee=n.useRef(C);return{value:l,setValue:i,inputValue:C,setInputValue:I,committedTextRef:ee}}var tt=function({children:e,value:o,defaultValue:a,onValueChange:r,inputValue:u,defaultInputValue:s,onInputValueChange:f,open:A,defaultOpen:l=!1,onOpenChange:p,onOpenChangeComplete:R,allowCustomValue:i=!0,openOnFocus:C=!1,autoHighlight:I=!1,loop:ee=!0,filter:G,disabled:h=!1,readOnly:O=!1,invalid:at=!1,loading:te=!1,name:ut,form:pt,getResultCountLabel:pe=je,options:me,renderOption:mt,placeholder:it,clearable:ct,"aria-label":st,ref:ft,...dt}){let E=Ht(G,me),ie=n.useRef(null),At=n.useRef(null),w=n.useRef(null),yt=n.useId(),{value:oe,setValue:N,inputValue:P,setInputValue:b,committedTextRef:v}=wt({value:o,defaultValue:a,onValueChange:r,inputValue:u,defaultInputValue:s,onInputValueChange:f}),[x=!1,y]=(0,Y.useControllableState)({prop:A,defaultProp:l,onChange:p});(0,Ze.useOpenChangeComplete)(x,w,R);let Rt=n.useCallback(d=>typeof E!="function"||(0,Z.filterKeeps)(E(d,P)),[E,P]),gt=n.useCallback(d=>{if(typeof E!="function")return null;let V=E(d.text,P);return typeof V=="number"?V:null},[E,P]),g=(0,j.useOptionCollection)({open:x,setOpen:y,contentRef:w,loop:ee,scoreItem:gt}),{itemCount:F,itemOrder:re}=g,{activeId:ce,setActiveId:se}=g;n.useEffect(()=>{if(!I||!x||ce!==null)return;let d=requestAnimationFrame(()=>{let V=Array.from(w.current?.querySelectorAll(j.OPTION_SELECTOR)??[]),M=(0,Z.sortByOrder)(V,re)[0];M&&se(M.id)});return()=>cancelAnimationFrame(d)},[I,x,ce,F,se,re]),n.useEffect(()=>{!x||te||(0,Qe.announce)(pe(F))},[x,te,F,pe]),n.useImperativeHandle(ft,()=>(0,ze.formValidityHandle)(ie),[]);let Ct=n.useCallback((d,V,M)=>{h||O||(N(d,M,!1),b(V),v.current=V,y(!1))},[h,O,N,b,y,v]),bt=n.useCallback(d=>{if(!(h||O)){if(!i){b(v.current),y(!1);return}N(P,d,!0),v.current=P,y(!1)}},[h,O,i,P,N,b,y,v]),vt=n.useCallback(()=>{N("","pointer",!0),b(""),v.current="",y(!1)},[N,b,y,v]),Pt=n.useCallback(()=>{b(v.current),y(!1)},[b,y,v]),It=n.useCallback(d=>d!==""&&d===oe,[oe]);return(0,Q.jsx)(Ye.PopperRoot,{children:(0,Q.jsx)(et,{inputRef:ie,triggerRef:At,contentRef:w,listId:yt,value:oe,isSelected:It,inputValue:P,onInputValueChange:b,open:x,onOpenChange:y,activeId:g.activeId,itemOrder:re,setActiveId:g.setActiveId,moveActive:g.moveActive,moveActiveToEdge:g.moveActiveToEdge,openWithHighlight:g.openWithHighlight,itemCount:F,registerItem:g.registerItem,unregisterItem:g.unregisterItem,getItem:g.getItem,matchesFilter:Rt,commitItem:Ct,commitInputValue:bt,revert:Pt,clear:vt,allowCustomValue:i,openOnFocus:C,disabled:h,readOnly:O,invalid:at,loading:te,name:ut,form:pt,children:e??(0,Q.jsx)(Ue,{options:me??[],renderOption:mt,placeholder:it,ariaLabel:st,clearable:ct,passThrough:dt})})})};tt.displayName="Autocomplete";var ot=require("../utils/composeRefs.cjs"),rt=require("../utils/part.cjs"),H=require("../utils/primitive.cjs");var lt=require("react/jsx-runtime"),nt=({ref:t,...e})=>{let o=m("AutocompleteTrigger"),a=(0,ot.useComposedRefs)(t,o.triggerRef);return(0,lt.jsx)(H.Primitive.button,{type:"button",tabIndex:-1,"aria-expanded":o.open,"aria-controls":o.listId,disabled:o.disabled,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,"data-state":o.open?"open":"closed",...e,...(0,rt.skdxPart)("autocomplete","trigger",e.className),ref:a,onMouseDown:(0,H.composeEventHandlers)(e.onMouseDown,r=>r.preventDefault()),onClick:(0,H.composeEventHandlers)(e.onClick,()=>{o.readOnly||(o.onOpenChange(!o.open),o.inputRef.current?.focus())})})};nt.displayName="AutocompleteTrigger";0&&(module.exports={Autocomplete,AutocompleteClear,AutocompleteContent,AutocompleteEmpty,AutocompleteGroup,AutocompleteGroupLabel,AutocompleteGroupProvider,AutocompleteInput,AutocompleteItem,AutocompleteList,AutocompletePortal,AutocompleteProvider,AutocompleteTrigger,defaultGetSuggestionCountLabel,defaultOptionsFilter,useAutocompleteContext,useAutocompleteGroupContext});

package/dist/autocomplete/Autocomplete.d.cts

@@ -1,40 +1,24 @@
 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"`. */
+import type { AutocompleteContextValue, AutocompleteHandle, AutocompleteProps } from './types.cjs';
+/** Default `getResultCountLabel`: `"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;
+export declare const AutocompleteProvider: React.FC<AutocompleteContextValue & {
+    children: React.ReactNode;
+}>, 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.
+ * Free-text field with suggestions. Owns draft text (`inputValue`), committed
+ * value (`value`), and popup state; distributes via context. Renders no DOM itself.
  *
- * 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.
+ * Accepts any text on blur (unlike {@link Combobox} which constrains to the list).
+ * Filter suggestions yourself with `inputValue`, or pass a `filter` predicate.
  *
- * 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 highlight (via `aria-activedescendant`, not DOM focus).
+ * Home/End jump to first/last (only open; closed, they're text-caret keys).
+ * Enter commits highlight, Escape closes and restores committed text, Tab commits draft.
  *
- * 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.
+ * Set `name` for submission, `form` for external form association, use
+ * {@link AutocompleteHandle} for validation. Set `loading` during fetches to silence
+ * result-count announcements.
  *
  * @example Consumer-side (default) filtering:
  * ```tsx
@@ -59,23 +43,10 @@ export declare const AutocompleteProvider: {
  *   );
  * }
  * ```
- *
- * @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;
-}
+export declare const Autocomplete: {
+    ({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, allowCustomValue, openOnFocus, autoHighlight, loop, filter: filterProp, disabled, readOnly, invalid, loading, name, form, getResultCountLabel, options, renderOption, placeholder, clearable, "aria-label": ariaLabel, ref: forwardedRef, ...rest }: Omit<AutocompleteProps, "ref"> & {
+        ref?: React.Ref<AutocompleteHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};