@reapit/elements 5.0.0-beta.60 → 5.0.0-beta.62

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

@@ -0,0 +1,16 @@
+/**
+ * Observes selection changes in a listbox and invokes a callback with the selected options.
+ *
+ * Uses a MutationObserver to watch `aria-checked` and `aria-selected` attributes within the
+ * 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: (visibleOptions: HTMLButtonElement[], listboxState: readonly string[]) => void): void;
+//# sourceMappingURL=use-listbox-selection-observer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-listbox-selection-observer.d.ts","sourceRoot":"/","sources":["utils/listbox/use-listbox-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,SAAS,MAAM,EAAE,KAAK,IAAI,GACvF,IAAI,CAmCN"}

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

@@ -0,0 +1,30 @@
+import type { ChangeEventHandler } from 'react';
+export declare namespace useListboxState {
+    interface Input {
+        /** Initially selected option values for uncontrolled mode */
+        defaultValue?: 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[];
+    }
+    type Output = [
+        /** Currently selected option values */
+        value: readonly string[],
+        /** Change handler for the select element */
+        onChange: ChangeEventHandler<HTMLSelectElement>
+    ];
+}
+/**
+ * Manages selection state for a listbox in both controlled and uncontrolled modes.
+ * Supports single- and multi-select behavior.
+ *
+ * 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-listbox-state.d.ts","sourceRoot":"/","sources":["utils/listbox/use-listbox-state.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAA;AAE/C,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,KAAK;QACpB,6DAA6D;QAC7D,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;QAChC,uCAAuC;QACvC,QAAQ,EAAE,OAAO,CAAA;QACjB,6DAA6D;QAC7D,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAA;QAChD,iDAAiD;QACjD,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;KAC1B;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;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,eAAe,CAAC,KAAK,GAAG,eAAe,CAAC,MAAM,CAYhD"}

package/dist/types/utils/mutation-observer/__tests__/use-mutation-observer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-mutation-observer.test.d.ts.map

package/dist/types/utils/mutation-observer/__tests__/use-mutation-observer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mutation-observer.test.d.ts","sourceRoot":"/","sources":["utils/mutation-observer/__tests__/use-mutation-observer.test.tsx"],"names":[],"mappings":""}

package/dist/types/utils/mutation-observer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-mutation-observer';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/utils/mutation-observer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/mutation-observer/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}

package/dist/types/utils/mutation-observer/use-mutation-observer.d.ts

@@ -0,0 +1,32 @@
+import type { RefObject } from 'react';
+/**
+ * Creates a `MutationObserver` that invokes the supplied callback when DOM changes occur for the
+ * referenced element. The observer will begin monitoring the DOM element immediately, and it will
+ * automatically disconnect when the component (not the DOM element being observed) is unmounted.
+ * It will also create a new `MutationObserver` and begin observing the specified DOM element whenever
+ * the DOM element, callback, or options change.
+ *
+ * See MDN's [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+ * documentation for more information, as well as
+ * [Smashing Magazine's guide](https://www.smashingmagazine.com/2019/04/mutationobserver-api-guide/).
+ */
+export declare function useMutationObserver(
+/** A mutable ref object attached to the DOM element that should be observed, or its ID. */
+refOrId: string | RefObject<HTMLElement>, 
+/**
+ * A _stable_ function which will be called on each DOM change that qualifies given the observed node or
+ * subtree and options. The callback function takes as input two parameters:
+ * - An array of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects,
+ *   describing each change that occurred; and
+ * - the [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+ *   that invoked the callback.
+ */
+callback: MutationCallback, 
+/**
+ * A _stable_ object providing options that describe which DOM mutations should be reported to the observer's
+ * callback. At a minimum, one of `childList`, `attributes`, and/or `characterData` must be `true`.
+ * The full list of options available can be found
+ * [here](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#parameters)
+ */
+options: MutationObserverInit): void;
+//# sourceMappingURL=use-mutation-observer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-mutation-observer.d.ts","sourceRoot":"/","sources":["utils/mutation-observer/use-mutation-observer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB;AACjC,2FAA2F;AAC3F,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC,WAAW,CAAC;AACxC;;;;;;;GAOG;AACH,QAAQ,EAAE,gBAAgB;AAC1B;;;;;GAKG;AACH,OAAO,EAAE,oBAAoB,QA0B9B"}

package/dist/types/utils/popover/get-closest-popover-element.d.ts

@@ -1,6 +1,6 @@
 /**
- * Returns the closest ancestor acting as a popover for the given element. Useful in event
- * handlers when needing to imperatively control the popover from one of its descendants.
+ * Finds the closest popover ancestor. Use in event handlers to control the popover
+ * from a descendant element.
  */
 export declare function getClosestPopoverElement(element: HTMLElement): HTMLElement | null;
 //# sourceMappingURL=get-closest-popover-element.d.ts.map

package/dist/types/utils/popover/get-popover-trigger-props.d.ts

@@ -1,16 +1,14 @@
 /**
- * React 18 does not support the HTML attributes involved in the
- * [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API). This helper
- * provides a way for consumers to use them without incurring TS prop type errors or React
- * development runtime errors.
+ * Adapts Popover API attributes for React 18, which lacks support for the
+ * [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API). Prevents
+ * TypeScript errors and React runtime warnings.
  *
- * The input properties match React 19's type definitions for the popover attributes. See
+ * Input properties match React 19's type definitions for popover attributes. See
  * [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/69670/files#diff-d0d8d4879e505e2bd1813a8e662eeedbdf85c1fae8b76c4dff609bb5bcfe3a98R128)
  *
- * The output properties are all lowercase so that React 18 will pass them through to the
- * underlying DOM element without throwing a runtime error about unrecognised attributes.
+ * Output properties use lowercase to allow React 18 to pass them through.
  *
- * @returns popover trigger attributes for use in React 18 consumers.
+ * @returns Popover trigger attributes for React 18.
  */
 export declare function getPopoverTriggerProps({ id, popoverTarget, popoverTargetAction, }: getPopoverTriggerProps.Input): getPopoverTriggerProps.Output;
 export declare namespace getPopoverTriggerProps {

package/dist/types/utils/popover/get-popover-trigger-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-popover-trigger-props.d.ts","sourceRoot":"/","sources":["utils/popover/get-popover-trigger-props.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,EAAE,EACF,aAAa,EACb,mBAAmB,GACpB,EAAE,sBAAsB,CAAC,KAAK,GAAG,sBAAsB,CAAC,MAAM,CAM9D;AAED,yBAAiB,sBAAsB,CAAC;IACtC,UAAiB,KAAK;QACpB,EAAE,EAAE,MAAM,CAAA;QACV,aAAa,EAAE,MAAM,CAAA;QACrB,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;KAChD;IAED,UAAiB,MAAM;QACrB,EAAE,EAAE,MAAM,CAAA;QACV,aAAa,EAAE,MAAM,CAAA;QACrB,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;KAChD;CACF;AAED;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG,sBAAsB,CAAC,KAAK,CAAA;AAEtE;;GAEG;AACH,MAAM,MAAM,4BAA4B,GAAG,sBAAsB,CAAC,MAAM,CAAA"}
+{"version":3,"file":"get-popover-trigger-props.d.ts","sourceRoot":"/","sources":["utils/popover/get-popover-trigger-props.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,EAAE,EACF,aAAa,EACb,mBAAmB,GACpB,EAAE,sBAAsB,CAAC,KAAK,GAAG,sBAAsB,CAAC,MAAM,CAM9D;AAED,yBAAiB,sBAAsB,CAAC;IACtC,UAAiB,KAAK;QACpB,EAAE,EAAE,MAAM,CAAA;QACV,aAAa,EAAE,MAAM,CAAA;QACrB,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;KAChD;IAED,UAAiB,MAAM;QACrB,EAAE,EAAE,MAAM,CAAA;QACV,aAAa,EAAE,MAAM,CAAA;QACrB,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;KAChD;CACF;AAED;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG,sBAAsB,CAAC,KAAK,CAAA;AAEtE;;GAEG;AACH,MAAM,MAAM,4BAA4B,GAAG,sBAAsB,CAAC,MAAM,CAAA"}

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

@@ -1,5 +1,6 @@
 export * from './get-popover-trigger-props';
 export * from './popover';
 export * from './styles';
-export type { PopoverPlacement } from './map-placement-to-css';
+export { placements as popoverPlacements } from '#src/utils/anchor-positioning';
+export type { Placement as PopoverPlacement } from '#src/utils/anchor-positioning';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA;AAC3C,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AAExB,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["utils/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA;AAC3C,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AAExB,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAC/E,YAAY,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAA"}

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

@@ -1,64 +1,38 @@
+import { AnchorPositioning } from '#src/utils/anchor-positioning';
 import { getPopoverTriggerProps } from './get-popover-trigger-props';
 import type { HTMLAttributes, ReactNode } from 'react';
-import type { PopoverPlacement } from './map-placement-to-css';
+type AttributesToOmit = 'anchorElementId' | 'positionedElementId';
 export declare namespace Popover {
-    interface Props extends HTMLAttributes<HTMLDivElement> {
-        /** The ID of the element this popover to which this popover should be anchored. */
+    interface Props extends Omit<AnchorPositioning.PositioningProps, AttributesToOmit>, HTMLAttributes<HTMLDivElement> {
+        /** ID of the element to anchor this popover to. */
         anchorId: string;
         /**
-         * The border radius of the popover. Can be any valid CSS length, though a border radius
-         * CSS variable is recommended. By default, the radius will be zero.
+         * Border radius. Accepts any valid CSS length. Defaults to zero. Prefer CSS variables.
          */
         borderRadius?: string;
-        /** The content of the popover. */
+        /** Popover content. */
         children: ReactNode;
-        /** The visual elevation of the popover. Determines how much shadow the popover casts. */
+        /** Visual elevation. Determines shadow depth. */
         elevation?: 'none' | 'xl';
         /**
-         * The gap between the popover and the anchor. Can be any valid CSS length, though `--spacing-*`
-         * CSS variables are recommended. By default, the gap will be zero.
-         */
-        gap?: string;
-        /**
-         * The ID of this popover. This is mandatory because the popover's trigger will need to reference
-         * this in it's `popovertarget` attribute.
+         * Popover ID. Required for the trigger's `popovertarget` attribute.
          */
         id: string;
         /**
-         * The maximum height of the popover. Can be any valid CSS length, though `--size-*`
-         * CSS variables are recommended. By default, the popover will be as tall as its content requires.
+         * Maximum height. Accepts any valid CSS length. Defaults to content height.
+         * Prefer `--size-*` variables.
          */
         maxHeight?: string;
         /**
-         * The maximum width of the popover. Can be any valid CSS length, though `--size-*`
-         * CSS variables are recommended. By default, the popover will be as wide as its content requires.
-         */
-        maxWidth?: string;
-        /**
-         * The "kind" of popover this should be. See
-         * [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover)
-         * for more details.
+         * Popover type. See
+         * [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover).
          *
-         * For browsers that do not support `hint`, they will fallback to `manual`.
+         * Browsers without `hint` support fall back to `manual`.
          *
-         * A special value of `null` allows the popover to not be a popover. This can be useful when you need
-         * to display a popover element permanently in the UI (such as in documentation or example code). Just
-         * note that the absence of the `popover` attribute means the element will not be displayed within the
-         * top-layer, so may be susceptible to z-index issues.
+         * Use `null` to display the popover permanently (for documentation or examples). Without the
+         * `popover` attribute, the element won't render in the top layer and may encounter z-index issues.
          */
         popover?: 'auto' | 'hint' | 'manual' | null;
-        /** Where the popover should be placed relative to its anchor. */
-        placement: PopoverPlacement;
-        /**
-         * Fallback positions for the popover that should be tried when it would otherwise overflow the viewport.
-         * See [position-try-fallbacks](https://developer.mozilla.org/en-US/docs/Web/CSS/position-try-fallbacks)
-         * for more details. Note that the [polyfill](https://anchor-positioning.oddbird.net/) we rely on for
-         * anchor positioning in some browsers will not play nicely with all available options.
-         *
-         * Typically, "flip-block", "flip-inline" or both will be sufficient for most use cases.
-         * Defaults to "none".
-         */
-        positionTryFallbacks?: string;
     }
 }
 /**
@@ -66,25 +40,21 @@ export declare namespace Popover {
  */
 export type PopoverProps = Popover.Props;
 /**
- * A simple popover that can be positioned relative to an anchor. It is designed to work with the
- * global [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover)
- * attribute. Positioning is facilitated using
- * [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning),
- * which currently requires a polyfill in some browsers.
+ * A popover positioned relative to an anchor using
+ * [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
+ * and the [popover](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover)
+ * attribute. Requires a polyfill in some browsers.
  *
- * If custom styles need to be applied to the Popover element itself, it's important to ensure a
- * custom `display` property is only set when the popover is open (via the `:popover-open`
- * pseudo-class), otherwise the custom `display` property will override the browser's default handling
- * of the popover's display.
+ * Custom `display` properties must use the `:popover-open` pseudo-class to avoid overriding
+ * the browser's default popover display handling.
  *
- * **note:** When working with Popover directly (uncommon) within a React 18 consumer, the
- * `getPopoverTriggerProps` helper will be useful to avoid type errors or development runtime errors
- * about the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) attributes used
- * to show/hide/toggle popovers.
+ * **Note:** React 18 users should use `getPopoverTriggerProps` to avoid type and runtime errors
+ * with [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) attributes.
  */
-export declare function Popover({ anchorId, borderRadius, children, className, elevation, gap, id, maxHeight, maxWidth, placement, positionTryFallbacks, popover, style, ...rest }: Popover.Props): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ alignSelf, anchorId, borderRadius, children, className, bottom, elevation, gap, id, justifySelf, left, maxHeight, maxWidth, minWidth, placement, positionTryFallbacks, popover, right, style, top, ...rest }: Popover.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Popover {
     var getTriggerProps: typeof getPopoverTriggerProps;
     var getClosestPopoverElement: typeof import("./get-closest-popover-element").getClosestPopoverElement;
 }
+export {};
 //# sourceMappingURL=popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"/","sources":["utils/popover/popover.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAGpE,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE9D,yBAAiB,OAAO,CAAC;IACvB,UAAiB,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC;QAC3D,mFAAmF;QACnF,QAAQ,EAAE,MAAM,CAAA;QAChB;;;WAGG;QACH,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,kCAAkC;QAClC,QAAQ,EAAE,SAAS,CAAA;QACnB,yFAAyF;QACzF,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACzB;;;WAGG;QACH,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ;;;WAGG;QACH,EAAE,EAAE,MAAM,CAAA;QACV;;;WAGG;QACH,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB;;;;;;;;;;;WAWG;QACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAA;QAC3C,iEAAiE;QACjE,SAAS,EAAE,gBAAgB,CAAA;QAC3B;;;;;;;;WAQG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;KAC9B;CACF;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAA;AAExC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,SAAkB,EAClB,GAAS,EACT,EAAE,EACF,SAAS,EACT,QAAQ,EACR,SAAS,EACT,oBAA6B,EAC7B,OAAgB,EAChB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,OAAO,CAAC,KAAK,2CAgDf;yBA/De,OAAO"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"/","sources":["utils/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAIjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,KAAK,gBAAgB,GAAG,iBAAiB,GAAG,qBAAqB,CAAA;AAEjE,yBAAiB,OAAO,CAAC;IACvB,UAAiB,KACf,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAChE,cAAc,CAAC,cAAc,CAAC;QAChC,mDAAmD;QACnD,QAAQ,EAAE,MAAM,CAAA;QAChB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,uBAAuB;QACvB,QAAQ,EAAE,SAAS,CAAA;QACnB,iDAAiD;QACjD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACzB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAA;QACV;;;WAGG;QACH,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB;;;;;;;;WAQG;QACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAA;KAC5C;CACF;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAA;AAExC;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAkB,EAClB,GAAG,EACH,EAAE,EACF,WAAW,EACX,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,oBAAoB,EACpB,OAAgB,EAChB,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,OAAO,CAAC,KAAK,2CAmCf;yBAzDe,OAAO"}

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

@@ -30,9 +30,19 @@ export declare const Example: Story;
  */
 export declare const Gap: Story;
 /**
- * There are a number of placements available for popovers relative to their anchor. They are shown below.
+ * A number of common positions for popovers relative to their anchor are available as simple string-based
+ * placements. These are shown below.
  */
 export declare const Placements: Story;
+/**
+ * When the predefined placements are insufficient, the `placement` prop can also accept an object with
+ * inset properties, `top`, `right`, `bottom`, and `left`, and self-alignment properties, `alignSelf` and
+ * `justifySelf`, defined.
+ *
+ * See [Using inset properties with anchor() function values](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#using_inset_properties_with_anchor_function_values)
+ * for details on how to position the popover element using this approach.
+ */
+export declare const CustomPositioning: Story;
 /**
  * The border radius of the popover element can be adjusted with the `borderRadius` prop. While
  * this prop accepts any valid CSS length, it should typically be a border-radius-related CSS
@@ -45,9 +55,16 @@ export declare const BorderRadius: Story;
  * than overflowing.
  *
  * While the maximum width can be defined using any valid CSS length, the value should typically be a
- * `--size-*` CSS variable.
+ * `--size-*` CSS variable, though the special `anchor-size()` value is also supported, allowing the popover
+ * to ensure it doesn't become wider than its anchor.
  */
 export declare const MaxWidth: Story;
+/**
+ * A minimum width can also be specified. While the minimum width can be defined using any valid CSS
+ * length, the value should typically be a `--size-*` CSS variable, though the special `anchor-size()`
+ * value is also supported, allowing the popover to ensure it doesn't become narrower than its anchor.
+ */
+export declare const MinWidth: Story;
 /**
  * Similarly, popovers will grow, by default, to the height of their content. To constrain this behaviour,
  * a maximum height can also be specified, at which point the popover will scroll the content.

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

@@ -1 +1 @@
-{"version":3,"file":"popover.stories.d.ts","sourceRoot":"/","sources":["utils/popover/popover.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAInC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAiCsB,CAAA;AAEhC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,EAAE,KAKjB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAyDxB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA"}
+{"version":3,"file":"popover.stories.d.ts","sourceRoot":"/","sources":["utils/popover/popover.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAInC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAS3D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAgCsB,CAAA;AAEhC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,EAAE,KAKjB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAsExB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "5.0.0-beta.60",
+  "version": "5.0.0-beta.62",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "homepage": "https://github.com/reapit/elements#readme",
   "bugs": {
@@ -98,71 +98,73 @@
   "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.7",
+    "@figma/code-connect": "^1.3.10",
     "@linaria/postcss-linaria": "6.3.0",
-    "@mdx-js/react": "3.0.1",
     "@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",
     "@types/babel__core": "7.20.5",
-    "@types/node": "22.18.12",
+    "@types/node": "22.19.1",
     "@types/react": "18.3.26",
     "@types/react-dom": "18.3.7",
     "@types/react-syntax-highlighter": "15.5.13",
-    "@typescript-eslint/eslint-plugin": "7.6.0",
-    "@typescript-eslint/parser": "7.6.0",
-    "@vitejs/plugin-react": "^5.0.4",
-    "@vitest/coverage-v8": "^4.0.2",
-    "@wyw-in-js/babel-preset": "0.6.0",
-    "@wyw-in-js/vite": "0.6.0",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vitejs/plugin-react": "5.0.2",
+    "@vitest/coverage-v8": "^4.0.9",
+    "@wyw-in-js/babel-preset": "0.8.0",
+    "@wyw-in-js/vite": "0.8.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",
-    "coverage-badges-cli": "2.1.0",
+    "coverage-badges-cli": "2.2.0",
     "dashify": "2.0.0",
     "eslint": "8.57.1",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.1",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "9.1.13",
-    "happy-dom": "^20.0.8",
+    "eslint-config-prettier": "9.1.2",
+    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-storybook": "10.0.8",
+    "happy-dom": "^20.0.10",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-syntax-highlighter": "15.5.0",
-    "rimraf": "6.0.1",
-    "snyk": "^1.1300.1",
-    "storybook": "9.1.13",
+    "rimraf": "6.1.0",
+    "snyk": "^1.1300.2",
+    "storybook": "10.0.8",
     "style-dictionary": "5.1.1",
     "stylelint": "16.25.0",
     "ts-node": "10.9.2",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12",
+    "vite": "^7.2.2",
     "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^4.0.2"
+    "vitest": "^4.0.9"
   },
   "peerDependencies": {
     "react": ">=18.0.2",
     "react-dom": ">=18.0.2"
   },
   "snyk": true,
-  "packageManager": "yarn@4.9.4",
-  "stableVersion": "5.0.0-beta.5"
+  "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"
+  }
 }

package/dist/js/button-base-D8LjBAOF.cjs

@@ -1 +0,0 @@
-"use strict";const r=require("react/jsx-runtime"),C=require("./index-8ctufnBx.cjs"),O=require("./index-Dmlb2--K.cjs"),b=require("react");function S(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const p=S(b),f="el-button",i=O.styled_default("span")({name:"ElButtonIconContainer",class:"el-button-icon-container",propsAsIs:!1}),m="el-button-spinner",y=e=>p.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16",...e},p.createElement("path",{fillRule:"evenodd",d:"M9.081 1.388a.667.667 0 0 1 .817-.472 7.333 7.333 0 1 1-7.083 12.27.667.667 0 1 1 .942-.944A6 6 0 1 0 9.553 2.204a.667.667 0 0 1-.472-.816Z",clipRule:"evenodd"}));function E({"aria-disabled":e,as:n,className:t,children:a,hasNoPadding:g,iconLeft:l,iconRight:s,isBusy:c,isDestructive:x,onClick:u,size:h,useLinkStyle:j,variant:B,...d}){const v=!a&&(l||s)&&!(l&&s),w=b.useCallback(o=>{if(o.currentTarget.getAttribute("aria-disabled")==="true"){o.preventDefault(),o.stopPropagation();return}u?.(o)},[u]);return r.jsxs(n,{...d,className:C.cx_default(f,t),"aria-disabled":!!c||!!d.disabled||!!e,"data-variant":B,"data-size":h,"data-has-no-padding":g,"data-is-destructive":x,"data-is-icon-only":v,"data-use-link-style":j,onClick:w,children:[c?r.jsx(i,{"aria-hidden":!0,className:m,children:r.jsx(y,{})}):l&&r.jsx(i,{"aria-hidden":!0,children:l}),a,!c&&s&&r.jsx(i,{"aria-hidden":!0,children:s})]})}exports.ButtonBase=E;exports.ElButtonIconContainer=i;exports.elButton=f;exports.elButtonSpinner=m;

package/dist/js/checkbox-control-CQnfBvph.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),t=require("./checkbox-BX2PWh1h.cjs"),i=require("./form-control-Be_ITYmU.cjs"),d=require("./label-text-CtdGurHG.cjs"),l=require("react");function u({errorText:o,label:s,required:c,...n}){const r=l.useId();return e.jsxs(i.FormControl,{as:"div",size:"medium",children:[e.jsx(t.Checkbox,{...n,"aria-describedby":o?r:void 0,label:e.jsx(d.LabelText,{isRequired:c,children:s})}),o&&e.jsx(i.FormControl.ErrorText,{id:r,children:o})]})}exports.CheckboxControl=u;

package/dist/js/checkbox-control-DLIP3r9I.js

@@ -1,22 +0,0 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { C as a } from "./checkbox-CCFCh92B.js";
-import { a as e } from "./form-control-Cv1xUB2V.js";
-import { L as n } from "./label-text-DfFJj8qi.js";
-import { useId as c } from "react";
-function h({ errorText: o, label: s, required: d, ...m }) {
-  const r = c();
-  return /* @__PURE__ */ t(e, { as: "div", size: "medium", children: [
-    /* @__PURE__ */ i(
-      a,
-      {
-        ...m,
-        "aria-describedby": o ? r : void 0,
-        label: /* @__PURE__ */ i(n, { isRequired: d, children: s })
-      }
-    ),
-    o && /* @__PURE__ */ i(e.ErrorText, { id: r, children: o })
-  ] });
-}
-export {
-  h as C
-};

package/dist/js/checkbox-group-control-BOda9k19.js

@@ -1,69 +0,0 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { C as k } from "./checkbox-CCFCh92B.js";
-import { createContext as G, useContext as w, forwardRef as y, useId as E } from "react";
-import { s as v } from "./index-YtxCR-9e.js";
-import { a as i } from "./form-control-Cv1xUB2V.js";
-const u = G(null);
-function x() {
-  const e = w(u);
-  if (!e)
-    throw new Error("useCheckboxGroupControlContext must be used within a CheckboxGroupControl");
-  return e;
-}
-const m = y(
-  ({ disabled: e, form: a, name: t, required: c, showValidity: n, ...s }, d) => {
-    const o = x();
-    return /* @__PURE__ */ r(
-      k,
-      {
-        ...s,
-        disabled: e ?? o.disabled,
-        form: a ?? o.form,
-        name: t ?? o.name,
-        ref: d,
-        required: c ?? o.required,
-        showValidity: n ?? o.showValidity
-      }
-    );
-  }
-);
-m.displayName = "CheckboxGroupControl.Option";
-const I = /* @__PURE__ */ v("div")({
-  name: "ElCheckboxGroup",
-  class: "el-checkbox-group",
-  propsAsIs: !1
-});
-function C({
-  children: e,
-  disabled: a,
-  errorText: t,
-  form: c,
-  helpText: n,
-  label: s,
-  name: d,
-  orientation: o = "vertical",
-  required: p,
-  showValidity: h,
-  ...b
-}) {
-  const l = E();
-  return (
-    // NOTE: we do not use the fieldset's native disabled, form or name attributes, because we want
-    // individual checkboxes to be able to override them.
-    /* @__PURE__ */ f(i, { ...b, "aria-describedby": l, as: "fieldset", size: "medium", children: [
-      s && /* @__PURE__ */ r(i.Label, { as: "legend", isRequired: p, children: s }),
-      /* @__PURE__ */ r(I, { "data-orientation": o, children: /* @__PURE__ */ r(u.Provider, { value: { disabled: a, form: c, name: d, required: p, showValidity: h }, children: e }) }),
-      t ? /* @__PURE__ */ r(i.ErrorText, { id: l, children: t }) : n && /* @__PURE__ */ r(i.HelpText, { id: l, children: n })
-    ] })
-  );
-}
-C.Option = m;
-C.Context = u;
-C.useContext = x;
-export {
-  C,
-  I as E,
-  m as a,
-  u as b,
-  x as u
-};

package/dist/js/checkbox-group-control-DZaXmETO.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),f=require("./checkbox-BX2PWh1h.cjs"),i=require("react"),j=require("./index-Dmlb2--K.cjs"),c=require("./form-control-Be_ITYmU.cjs"),u=i.createContext(null);function h(){const r=i.useContext(u);if(!r)throw new Error("useCheckboxGroupControlContext must be used within a CheckboxGroupControl");return r}const p=i.forwardRef(({disabled:r,form:l,name:t,required:x,showValidity:n,...s},d)=>{const o=h();return e.jsx(f.Checkbox,{...s,disabled:r??o.disabled,form:l??o.form,name:t??o.name,ref:d,required:x??o.required,showValidity:n??o.showValidity})});p.displayName="CheckboxGroupControl.Option";const k=j.styled_default("div")({name:"ElCheckboxGroup",class:"el-checkbox-group",propsAsIs:!1});function C({children:r,disabled:l,errorText:t,form:x,helpText:n,label:s,name:d,orientation:o="vertical",required:b,showValidity:m,...G}){const a=i.useId();return e.jsxs(c.FormControl,{...G,"aria-describedby":a,as:"fieldset",size:"medium",children:[s&&e.jsx(c.FormControl.Label,{as:"legend",isRequired:b,children:s}),e.jsx(k,{"data-orientation":o,children:e.jsx(u.Provider,{value:{disabled:l,form:x,name:d,required:b,showValidity:m},children:r})}),t?e.jsx(c.FormControl.ErrorText,{id:a,children:t}):n&&e.jsx(c.FormControl.HelpText,{id:a,children:n})]})}C.Option=p;C.Context=u;C.useContext=h;exports.CheckboxGroupControl=C;exports.CheckboxGroupControlContext=u;exports.CheckboxGroupControlOption=p;exports.ElCheckboxGroup=k;exports.useCheckboxGroupControlContext=h;

package/dist/js/chip-group-CMOQNhYo.cjs

@@ -1 +0,0 @@
-"use strict";const s=require("react/jsx-runtime"),t=require("./index-Dmlb2--K.cjs"),a=require("./chip-Vsb-fXDy.cjs"),e=t.styled_default("ul")({name:"ElChipGroupList",class:"el-chip-group-list",propsAsIs:!1}),p=t.styled_default("li")({name:"ElChipGroupListItem",class:"el-chip-group-list-item",propsAsIs:!1});function r(i){return s.jsx(p,{children:s.jsx(a.Chip,{...i})})}r.displayName="ChipGroup.Item";function l({children:i,flow:o="wrap",overflow:u="visible",...n}){return s.jsx(e,{...n,"data-flow":o,"data-overflow":u,children:i})}l.Item=r;exports.ChipGroup=l;exports.ElChipGroupList=e;exports.ElChipGroupListItem=p;

package/dist/js/chip-group-_1Ujkr17.js

@@ -1,25 +0,0 @@
-import { jsx as p } from "react/jsx-runtime";
-import { s as i } from "./index-YtxCR-9e.js";
-import { C as l } from "./chip-EmRR5ZvZ.js";
-const a = /* @__PURE__ */ i("ul")({
-  name: "ElChipGroupList",
-  class: "el-chip-group-list",
-  propsAsIs: !1
-}), m = /* @__PURE__ */ i("li")({
-  name: "ElChipGroupListItem",
-  class: "el-chip-group-list-item",
-  propsAsIs: !1
-});
-function t(s) {
-  return /* @__PURE__ */ p(m, { children: /* @__PURE__ */ p(l, { ...s }) });
-}
-t.displayName = "ChipGroup.Item";
-function u({ children: s, flow: o = "wrap", overflow: r = "visible", ...e }) {
-  return /* @__PURE__ */ p(a, { ...e, "data-flow": o, "data-overflow": r, children: s });
-}
-u.Item = t;
-export {
-  u as C,
-  a as E,
-  m as a
-};

package/dist/js/chip-select-control-AgupgCE2.js

@@ -1,28 +0,0 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { e as t } from "./chip-select-CFT-hd36.js";
-import { a as o } from "./form-control-Cv1xUB2V.js";
-import { L as C } from "./label-text-DfFJj8qi.js";
-import { useId as x } from "react";
-function r({
-  children: m,
-  errorText: n,
-  helpText: d,
-  label: a,
-  required: l,
-  size: s = "medium",
-  ...c
-}) {
-  const i = x();
-  return /* @__PURE__ */ p(o, { "aria-describedby": i, as: "fieldset", size: s, children: [
-    /* @__PURE__ */ e(o.Label, { as: "legend", children: /* @__PURE__ */ e(C, { isRequired: l, children: a }) }),
-    /* @__PURE__ */ e(t, { ...c, required: l, size: s, children: m }),
-    n ? /* @__PURE__ */ e(o.ErrorText, { id: i, children: n }) : d && /* @__PURE__ */ e(o.HelpText, { id: i, children: d })
-  ] });
-}
-r.Option = t.Option;
-r.determineNextControlledState = t.determineNextControlledState;
-r.Context = t.Context;
-r.useContext = t.useContext;
-export {
-  r as C
-};