@reapit/elements 5.0.0-beta.61 → 5.0.0-beta.63

package/dist/types/utils/listbox/dom-helpers/get-listbox-selected-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-listbox-selected-options.d.ts","sourceRoot":"/","sources":["utils/listbox/dom-helpers/get-listbox-selected-options.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,yBAAyB,CAAC,cAAc,EAAE,WAAW,GAAG,iBAAiB,EAAE,CAG1F"}
+{"version":3,"file":"get-listbox-selected-options.d.ts","sourceRoot":"/","sources":["utils/listbox/dom-helpers/get-listbox-selected-options.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,yBAAyB,CAAC,cAAc,EAAE,WAAW,GAAG,iBAAiB,EAAE,CAK1F"}

package/dist/types/utils/listbox/dom-helpers/get-listbox-value.d.ts

@@ -9,6 +9,6 @@
  * @returns Readonly array of selected option values, excluding empty strings
  * @throws {ListboxError} when the listbox does not exist or lacks a select element
  */
-export declare function getListboxValue(listboxId: string): readonly string[];
-export declare function getListboxValue(selectElement: HTMLSelectElement): readonly string[];
+export declare function getListboxValue(listboxId: string): string | readonly string[];
+export declare function getListboxValue(selectElement: HTMLSelectElement): string | readonly string[];
 //# sourceMappingURL=get-listbox-value.d.ts.map

package/dist/types/utils/listbox/dom-helpers/get-listbox-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-listbox-value.d.ts","sourceRoot":"/","sources":["utils/listbox/dom-helpers/get-listbox-value.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAA;AACrE,wBAAgB,eAAe,CAAC,aAAa,EAAE,iBAAiB,GAAG,SAAS,MAAM,EAAE,CAAA"}
+{"version":3,"file":"get-listbox-value.d.ts","sourceRoot":"/","sources":["utils/listbox/dom-helpers/get-listbox-value.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAA;AAC9E,wBAAgB,eAAe,CAAC,aAAa,EAAE,iBAAiB,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAA"}

package/dist/types/utils/listbox/dom-helpers/index.d.ts

@@ -2,6 +2,6 @@ export * from './clear-listbox-value';
 export * from './get-listbox-value';
 export * from './get-listbox-selected-options';
 export * from './is-listbox-option-selected';
-export * from './set-listbox-option-selected-state';
 export * from './selectors';
+export * from './set-listbox-option-selected-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/utils/listbox/dom-helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/listbox/dom-helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qCAAqC,CAAA;AACnD,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/listbox/dom-helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,aAAa,CAAA;AAC3B,cAAc,qCAAqC,CAAA"}

package/dist/types/utils/listbox/get-select-id.d.ts

@@ -0,0 +1,2 @@
+export declare function getListboxSelectId(listboxId: string): string;
+//# sourceMappingURL=get-select-id.d.ts.map

package/dist/types/utils/listbox/get-select-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-select-id.d.ts","sourceRoot":"/","sources":["utils/listbox/get-select-id.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAE5D"}

package/dist/types/utils/listbox/index.d.ts

@@ -1,10 +1,12 @@
 export * from './context';
 export * from './dom-helpers';
+export * from './get-select-id';
 export * from './listbox';
 export * from './optgroup';
 export * from './option';
 export * from './render-context';
 export * from './use-focus-management';
-export * from './use-listbox-selection-observer';
-export * from './use-listbox-state';
+export * from './use-selection-observer';
+export * from './use-select-state';
+export * from './use-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/utils/listbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/listbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/listbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA"}

package/dist/types/utils/listbox/listbox.d.ts

@@ -1,16 +1,23 @@
 import { clearListboxValue, getListboxSelectedOptions, getListboxValue, setListboxOptionSelectedState } from './dom-helpers';
+import { Divider } from '#src/core/divider';
 import { ListboxContext, useListboxContext } from './context';
 import { ListboxOption } from './option';
 import { ListboxOptgroup } from './optgroup';
 import { ListboxRenderContext, useListboxRenderContext } from './render-context';
 import { ListboxSelect } from './select';
-import { useListboxSelectionObserver } from './use-listbox-selection-observer';
+import { useListboxSelectionObserver } from './use-selection-observer';
+import { useListboxState } from './use-state';
 import type { ChangeEventHandler, ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
 type AttributesToOmit = 'onChange';
 export declare namespace Listbox {
-    type OptionProps<C extends ElementType = 'button'> = ListboxOption.Props<C>;
+    interface DividerProps extends Divider.Props {
+    }
+    interface OptionProps extends ListboxOption.BaseProps {
+    }
     interface OptgroupProps extends ListboxOptgroup.BaseProps {
     }
+    interface SelectProps extends ListboxSelect.Props {
+    }
     interface BaseProps extends Omit<HTMLAttributes<HTMLDivElement>, AttributesToOmit> {
         /** Whether the listbox and its options are disabled. */
         'aria-disabled'?: boolean;
@@ -39,7 +46,7 @@ export declare namespace Listbox {
          * Always an array of strings, regardless of single- or multi-select mode.
          * For single-select, uses only the first value.
          */
-        defaultValue?: readonly string[];
+        defaultValue?: string | readonly string[];
         /** The listbox element's ID. Generates automatically if omitted. */
         id?: string;
         /** The form control name for form submission. */
@@ -67,12 +74,20 @@ export declare namespace Listbox {
          * Defaults to `true` for single-select, `false` for multi-select.
          */
         selectionFollowsFocus?: boolean;
+        /**
+         * Ref to the underlying HTMLSelectElement.
+         *
+         * We use `selectRef` instead of the standard `ref` prop to preserve TypeScript's type
+         * inference for the polymorphic `as` prop. Combining `forwardRef` with generic type
+         * parameters breaks this inference.
+         */
+        selectRef?: React.Ref<HTMLSelectElement>;
         /**
          * Selected option values for controlled mode.
          * Always an array of strings, regardless of single- or multi-select mode.
          * For single-select, uses only the first value.
          */
-        value?: readonly string[];
+        value?: string | readonly string[];
     }
     /**
      * Polymorphic props that merge BaseProps with any additional props from the `as` component.
@@ -98,14 +113,23 @@ export declare namespace Listbox {
  * - `Listbox.Optgroup` renders as `<optgroup>` in the native select and as a custom div
  * in the listbox UI
  * - `Listbox.Divider` always renders as `<hr>`
+ *
+ * @example
+ * // Integrate with React Hook Form
+ * const { ref, ...field } = register('myField')
+ * <Listbox selectRef={ref} {...field}>
+ *   <Listbox.Option value="1">Option 1</Listbox.Option>
+ *   <Listbox.Option value="2">Option 2</Listbox.Option>
+ * </Listbox>
  */
-export declare function Listbox<C extends ElementType = 'div'>({ 'aria-disabled': disabled, 'aria-multiselectable': multiple, 'aria-orientation': ariaOrientation, 'aria-required': required, as, children, className, defaultValue, id, name, onBlur, onChange, onFocus, onKeyDown, placeholder, selectAction, selectionFollowsFocus, style, value, ...rest }: Listbox.Props<C>): import("react/jsx-runtime").JSX.Element;
+export declare function Listbox<C extends ElementType = 'div'>({ 'aria-disabled': disabled, 'aria-multiselectable': multiple, 'aria-orientation': ariaOrientation, 'aria-required': required, as, children, className, defaultValue, id, name, onBlur, onChange, onFocus, onKeyDown, placeholder, selectAction, selectRef, selectionFollowsFocus, style, value, ...rest }: Listbox.Props<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Listbox {
     var Divider: typeof import("#src/core/divider").Divider;
     var Option: typeof ListboxOption;
     var Optgroup: typeof ListboxOptgroup;
-    var Select: typeof ListboxSelect;
+    var Select: import("react").ForwardRefExoticComponent<ListboxSelect.Props & import("react").RefAttributes<HTMLSelectElement>>;
     var useSelectionObserver: typeof useListboxSelectionObserver;
+    var useState: typeof useListboxState;
     var Context: import("react").Context<ListboxContext.Value | null>;
     var RenderContext: import("react").Context<ListboxRenderContext.Value | null>;
     var useContext: typeof useListboxContext;

package/dist/types/utils/listbox/listbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.d.ts","sourceRoot":"/","sources":["utils/listbox/listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,yBAAyB,EACzB,eAAe,EACf,6BAA6B,EAC9B,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGxC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AAG9E,OAAO,KAAK,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjH,KAAK,gBAAgB,GAAG,UAAU,CAAA;AAElC,yBAAiB,OAAO,CAAC;IACvB,KAAY,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAClF,UAAiB,aAAc,SAAQ,eAAe,CAAC,SAAS;KAAG;IAEnE,UAAiB,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC;QACvF,wDAAwD;QACxD,eAAe,CAAC,EAAE,OAAO,CAAA;QACzB;;;;WAIG;QACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;QAChC;;;;WAIG;QACH,kBAAkB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;QAC9C,uCAAuC;QACvC,eAAe,CAAC,EAAE,OAAO,CAAA;QACzB;;;;WAIG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAA;QACpB;;;;WAIG;QACH,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;QAChC,oEAAoE;QACpE,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,iDAAiD;QACjD,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,sFAAsF;QACtF,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAA;QAChD;;;;WAIG;QACH,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB;;;;;;WAMG;QACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;QAC3C;;;;;WAKG;QACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;QAC/B;;;;WAIG;QACH,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;KAC1B;IAED;;;OAGG;IACH,KAAY,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,SAAS,GAC1D,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,SAAS,CAAC,GAAG;QACnD,mEAAmE;QACnE,EAAE,CAAC,EAAE,CAAC,CAAA;KACP,CAAA;CACJ;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EACrD,eAAe,EAAE,QAAgB,EACjC,sBAAsB,EAAE,QAAgB,EACxC,kBAAkB,EAAE,eAA4B,EAChD,eAAe,EAAE,QAAgB,EACjC,EAAE,EACF,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,WAAW,EACX,YAAqB,EACrB,qBAAiC,EACjC,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACR,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,2CA8ClB;yBAnEe,OAAO"}
+{"version":3,"file":"listbox.d.ts","sourceRoot":"/","sources":["utils/listbox/listbox.tsx"],"names":[],"mappings":"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"}

package/dist/types/utils/listbox/listbox.stories.d.ts

@@ -60,9 +60,17 @@ export declare const Groups: Story;
  *
  * Whether single- or multi-select behaviour is desired, the controlled state must be an array of
  * string values. The example here demonstrates a controlled usage of the `Listbox` via simple
- * local component state (`useState`) and `Listbox.getValue`.
+ * local component state (`Listbox.useState`) and `Listbox.getValue`.
  */
 export declare const Controlled: Story;
+/**
+ * For multi-select listboxes, the controlled value should be an array of strings. This example
+ * demonstrates a controlled multi-select listbox where users can select multiple options.
+ *
+ * The `Listbox.getValue` helper returns an array for multi-select listboxes, making it easy to
+ * manage the state.
+ */
+export declare const ControlledMultiSelect: Story;
 /**
  * Clearing the listbox's selection when it's value is controlled is trivial: the value can simply be
  * set to an empty array. However, sometimes the controlled value's setter may not be available to the
@@ -87,6 +95,9 @@ export declare const ObservingState: Story;
 /**
  * Any selected options will be included in the form data during submission. The following example
  * demonstrates this through a native HTML form.
+ *
+ * Note: the form submission handler retrieves the "options" form value using `formData.getAll('options')`.
+ * This will result in an array of selected values, whether the listbox is a single- or multi-select.
  */
 export declare const Forms: Story;
 //# sourceMappingURL=listbox.stories.d.ts.map

package/dist/types/utils/listbox/listbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.stories.d.ts","sourceRoot":"/","sources":["utils/listbox/listbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAInC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAsBsB,CAAA;AAEhC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KA8BpB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAA"}
+{"version":3,"file":"listbox.stories.d.ts","sourceRoot":"/","sources":["utils/listbox/listbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAInC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAsBsB,CAAA;AAEhC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KA8BpB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,KA6BnC,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,EAAE,KAwBnB,CAAA"}

package/dist/types/utils/listbox/option/option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"/","sources":["utils/listbox/option/option.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,WAAW,EAAqB,MAAM,OAAO,CAAA;AAE3G,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,SAAU,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;QACxE,kEAAkE;QAClE,KAAK,EAAE,MAAM,CAAA;KACd;IAED,KAAY,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,SAAS,GAC7D,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,SAAS,CAAC,GAAG;QACnD;;;;WAIG;QACH,EAAE,CAAC,EAAE,CAAC,CAAA;KACP,CAAA;CACJ;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EAC9D,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EAAE,WAAW,EAClB,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,kDA8CxB;yBArDe,aAAa"}
+{"version":3,"file":"option.d.ts","sourceRoot":"/","sources":["utils/listbox/option/option.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,WAAW,EAAqB,MAAM,OAAO,CAAA;AAE3G,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,SAAU,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;QACxE,kEAAkE;QAClE,KAAK,EAAE,MAAM,CAAA;KACd;IAED,KAAY,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,SAAS,GAC7D,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,SAAS,CAAC,GAAG;QACnD;;;;WAIG;QACH,EAAE,CAAC,EAAE,CAAC,CAAA;KACP,CAAA;CACJ;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EAC9D,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EAAE,WAAW,EAClB,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,kDA+CxB;yBAtDe,aAAa"}

package/dist/types/utils/listbox/option/update-option-selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-option-selection.d.ts","sourceRoot":"/","sources":["utils/listbox/option/update-option-selection.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAoBvD;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,QAazE"}
+{"version":3,"file":"update-option-selection.d.ts","sourceRoot":"/","sources":["utils/listbox/option/update-option-selection.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAoBvD;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,QAczE"}

package/dist/types/utils/listbox/select/select.d.ts

@@ -24,5 +24,5 @@ export declare namespace ListboxSelect {
  * receive `value="native"` from ListboxRenderContext, rendering as native `<option>` or
  * `<optgroup>` elements.
  */
-export declare function ListboxSelect({ children, onChange, placeholder, multiple, value: selectedValues, ...rest }: ListboxSelect.Props): import("react/jsx-runtime").JSX.Element;
+export declare const ListboxSelect: import("react").ForwardRefExoticComponent<ListboxSelect.Props & import("react").RefAttributes<HTMLSelectElement>>;
 //# sourceMappingURL=select.d.ts.map

package/dist/types/utils/listbox/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"/","sources":["utils/listbox/select/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAEjD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,KAAM,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;QACpE,kEAAkE;QAClE,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,6BAA6B;QAC7B,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;KACzB;CACF;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,WAAgC,EAChC,QAAQ,EACR,KAAK,EAAE,cAAc,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,KAAK,2CA6BrB"}
+{"version":3,"file":"select.d.ts","sourceRoot":"/","sources":["utils/listbox/select/select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAEjD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,KAAM,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;QACpE,kEAAkE;QAClE,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,6BAA6B;QAC7B,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;KACzB;CACF;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,mHAiCxB,CAAA"}

package/dist/types/utils/listbox/{use-listbox-state.d.ts → use-select-state.d.ts}

@@ -1,14 +1,14 @@
 import type { ChangeEventHandler } from 'react';
-export declare namespace useListboxState {
+export declare namespace useListboxSelectState {
     interface Input {
         /** Initially selected option values for uncontrolled mode */
-        defaultValue?: readonly string[];
+        defaultValue?: string | readonly string[];
         /** Allows multiple option selection */
         multiple: boolean;
         /** Change event handler for the underlying select element */
         onChange?: ChangeEventHandler<HTMLSelectElement>;
         /** Selected option values for controlled mode */
-        value?: readonly string[];
+        value?: string | readonly string[];
     }
     type Output = [
         /** Currently selected option values */
@@ -23,8 +23,6 @@ export declare namespace useListboxState {
  *
  * In controlled mode, uses the provided `value` prop to determine selection.
  * In uncontrolled mode, manages internal state initialized from `defaultValue`.
- *
- * For single-select listboxes, uses only the first selected value.
  */
-export declare function useListboxState({ defaultValue, multiple, onChange, value, }: useListboxState.Input): useListboxState.Output;
-//# sourceMappingURL=use-listbox-state.d.ts.map
+export declare function useListboxSelectState({ defaultValue, multiple, onChange, value, }: useListboxSelectState.Input): useListboxSelectState.Output;
+//# sourceMappingURL=use-select-state.d.ts.map

package/dist/types/utils/listbox/use-select-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-select-state.d.ts","sourceRoot":"/","sources":["utils/listbox/use-select-state.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAA;AAE/C,yBAAiB,qBAAqB,CAAC;IACrC,UAAiB,KAAK;QACpB,6DAA6D;QAC7D,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAA;QACzC,uCAAuC;QACvC,QAAQ,EAAE,OAAO,CAAA;QACjB,6DAA6D;QAC7D,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAA;QAChD,iDAAiD;QACjD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAA;KACnC;IAED,KAAY,MAAM,GAAG;QACnB,uCAAuC;QACvC,KAAK,EAAE,SAAS,MAAM,EAAE;QACxB,4CAA4C;QAC5C,QAAQ,EAAE,kBAAkB,CAAC,iBAAiB,CAAC;KAChD,CAAA;CACF;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,qBAAqB,CAAC,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAY5D"}

package/dist/types/utils/listbox/{use-listbox-selection-observer.d.ts → use-selection-observer.d.ts}

@@ -5,8 +5,12 @@
  * listbox, triggering the callback whenever selection state changes. Invokes the callback on
  * initial mount to capture the initial selection state.
  *
+ * Also observes the native `<select>` element within the listbox, triggering the callback
+ * whenever the selected option changes. This ensures changes to the select's value that don't
+ * result in attribute changes to the listbox's visible options are observed.
+ *
  * Handles unstable callback references with a ref, preventing unnecessary re-observation when
  * the callback reference changes but the listbox ID remains constant.
  */
-export declare function useListboxSelectionObserver(listboxId: string, callback: (selectedOptions: HTMLButtonElement[]) => void): void;
-//# sourceMappingURL=use-listbox-selection-observer.d.ts.map
+export declare function useListboxSelectionObserver(listboxId: string, callback: (visibleOptions: HTMLButtonElement[], listboxState: string | readonly string[]) => void): void;
+//# sourceMappingURL=use-selection-observer.d.ts.map

package/dist/types/utils/listbox/use-selection-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-observer.d.ts","sourceRoot":"/","sources":["utils/listbox/use-selection-observer.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,EAAE,YAAY,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,KAAK,IAAI,GAChG,IAAI,CAmCN"}

package/dist/types/utils/listbox/use-state.d.ts

@@ -0,0 +1,7 @@
+import type { Dispatch, SetStateAction } from 'react';
+/**
+ * A thin useState wrapper that bakes in the type of state expected by a Listbox; specifically,
+ * a string or readonly array of strings.
+ */
+export declare function useListboxState(initialState: string | readonly string[] | (() => string | readonly string[])): [string | readonly string[], Dispatch<SetStateAction<string | readonly string[]>>];
+//# sourceMappingURL=use-state.d.ts.map

package/dist/types/utils/listbox/use-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-state.d.ts","sourceRoot":"/","sources":["utils/listbox/use-state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC,GAC5E,CAAC,MAAM,GAAG,SAAS,MAAM,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC,CAAC,CAAC,CAEpF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "5.0.0-beta.61",
+  "version": "5.0.0-beta.63",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/elements#readme",
   "bugs": {
@@ -53,6 +53,11 @@
       "import": "./dist/js/lab/*.js",
       "require": "./dist/js/lab/*.cjs"
     },
+    "./polyfills/*": {
+      "types": "./dist/types/polyfills/*/index.d.ts",
+      "import": "./dist/js/polyfills/*.js",
+      "require": "./dist/js/polyfills/*.cjs"
+    },
     "./utils/*": {
       "types": "./dist/types/utils/*/index.d.ts",
       "import": "./dist/js/utils/*.js",
@@ -98,20 +103,20 @@
   "dependencies": {
     "@linaria/core": "6.3.0",
     "@linaria/react": "6.3.0",
-    "@oddbird/css-anchor-positioning": "^0.7.0"
+    "@oddbird/css-anchor-positioning": "^0.8.0"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",
     "@babel/preset-react": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@figma/code-connect": "^1.3.9",
+    "@figma/code-connect": "^1.3.10",
     "@linaria/postcss-linaria": "6.3.0",
     "@playwright/test": "1.56.1",
-    "@storybook/addon-a11y": "9.1.13",
-    "@storybook/addon-docs": "9.1.13",
-    "@storybook/addon-links": "9.1.13",
-    "@storybook/cli": "9.1.13",
-    "@storybook/react-vite": "9.1.13",
+    "@storybook/addon-a11y": "10.0.8",
+    "@storybook/addon-docs": "10.0.8",
+    "@storybook/addon-links": "10.0.8",
+    "@storybook/cli": "10.0.8",
+    "@storybook/react-vite": "10.0.8",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
@@ -126,9 +131,9 @@
     "@vitest/coverage-v8": "^4.0.9",
     "@wyw-in-js/babel-preset": "0.8.0",
     "@wyw-in-js/vite": "0.8.0",
-    "aws-cdk": "2.1031.2",
-    "aws-cdk-lib": "2.224.0",
-    "aws-sdk": "2.1692.0",
+    "aws-cdk": "2.137.0",
+    "aws-cdk-lib": "2.137.0",
+    "aws-sdk": "2.1597.0",
     "colord": "2.9.3",
     "concurrently": "8.2.2",
     "constructs": "10.3.0",
@@ -139,7 +144,7 @@
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "10.0.6",
+    "eslint-plugin-storybook": "10.0.8",
     "happy-dom": "^20.0.10",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
@@ -148,7 +153,7 @@
     "react-syntax-highlighter": "15.5.0",
     "rimraf": "6.1.0",
     "snyk": "^1.1300.2",
-    "storybook": "9.1.13",
+    "storybook": "10.0.8",
     "style-dictionary": "5.1.1",
     "stylelint": "16.25.0",
     "ts-node": "10.9.2",
@@ -162,7 +167,7 @@
     "react-dom": ">=18.0.2"
   },
   "snyk": true,
-  "packageManager": "yarn@4.9.4",
+  "packageManager": "yarn@4.12.0",
   "stableVersion": "5.0.0-beta.5",
   "resolutions": {
     "@wyw-in-js/transform@npm:0.8.0": "patch:@wyw-in-js/transform@npm%3A0.8.0#~/.yarn/patches/@wyw-in-js-transform-npm-0.8.0-b3c8de59bc.patch"