@bspk/ui 1.1.34 → 1.2.0

package/dist/hooks/useKeyNavigation.js

@@ -0,0 +1,46 @@
+import { useRef, useState } from 'react';
+import { useOutsideClick } from './useOutsideClick';
+import { handleKeyDown } from '../utils/handleKeyDown';
+/**
+ * Custom hook to handle keyboard navigation for a list of elements.
+ *
+ * This hook provides functionality to navigate through elements using arrow keys and select an element with the Enter
+ * or Space key, or onClick.
+ */
+export function useKeyNavigation({ onSelect, }) {
+    const elements = useRef([]);
+    const setElements = (newElements) => {
+        elements.current = newElements;
+    };
+    const [activeElementId, setActiveElementId] = useState(null);
+    useOutsideClick({
+        elements: elements.current,
+        callback: () => setActiveElementId(null),
+    });
+    const handleIncrement = (increment) => () => {
+        let currentElement = elements.current[0];
+        if (activeElementId)
+            currentElement = elements.current.find((el) => el.id === activeElementId) || elements.current[0];
+        const activeIndex = elements.current.indexOf(currentElement);
+        const nextindex = (activeIndex + increment + elements.current.length) % elements.current.length;
+        setActiveElementId(elements.current[nextindex].id);
+    };
+    const handleSelect = () => () => {
+        if (activeElementId)
+            onSelect(activeElementId);
+    };
+    return {
+        setElements,
+        handleKeyDown: handleKeyDown({
+            ArrowRight: handleIncrement(1),
+            ArrowDown: handleIncrement(1),
+            ArrowUp: handleIncrement(-1),
+            ArrowLeft: handleIncrement(-1),
+            Enter: handleSelect(),
+            Space: handleSelect(),
+        }, { preventDefault: true, stopPropagation: true }),
+        activeElementId,
+        setActiveElementId,
+    };
+}
+//# sourceMappingURL=useKeyNavigation.js.map

package/dist/hooks/useKeyNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyNavigation.js","sourceRoot":"","sources":["../../src/hooks/useKeyNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAOtD;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAwB,EACpD,QAAQ,GACY;IAMpB,MAAM,QAAQ,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,CAAC,WAA0B,EAAE,EAAE;QAC/C,QAAQ,CAAC,OAAO,GAAG,WAAW,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5E,eAAe,CAAC;QACZ,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,QAAQ,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC;KAC3C,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,GAAS,EAAE;QACtD,IAAI,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACzC,IAAI,eAAe;YACf,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,eAAe,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAErG,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC7D,MAAM,SAAS,GAAG,CAAC,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;QAChG,kBAAkB,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE;QAC5B,IAAI,eAAe;YAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,OAAO;QACH,WAAW;QACX,aAAa,EAAE,aAAa,CACxB;YACI,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;YAC9B,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC;YAC7B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAC5B,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,YAAY,EAAE;YACrB,KAAK,EAAE,YAAY,EAAE;SACxB,EACD,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAClD;QACD,eAAe;QACf,kBAAkB;KACrB,CAAC;AACN,CAAC"}

package/dist/hooks/useLongPress.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 export declare const MIN_INTERVAL = 250;
 export declare const INTERVAL_DECREASE_FACTOR = 0.75;
 export declare const INITIAL_INTERVAL = 1000;
@@ -7,7 +8,7 @@ export declare function useLongPress(callback: () => void, disabled: boolean): {
     setTriggerElement: () => void;
     onMouseLeave?: undefined;
 } | {
-    onMouseDown: () => void;
+    onMouseDown: (event: MouseEvent) => void;
     onMouseUp: () => void;
     onMouseLeave: () => void;
     setTriggerElement: import("react").Dispatch<import("react").SetStateAction<HTMLButtonElement | null>>;

package/dist/hooks/useLongPress.js

@@ -31,7 +31,8 @@ export function useLongPress(callback, disabled) {
         timeout.set(run, intervalRef.current);
     };
     return {
-        onMouseDown: () => {
+        onMouseDown: (event) => {
+            event.preventDefault();
             intervalRef.current = INITIAL_INTERVAL;
             callback();
             timeout.set(run, intervalRef.current);

package/dist/hooks/useLongPress.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,CAAC,mCAAmC;AACpE,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,CAAC,CAAC,oDAAoD;AAClG,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,mCAAmC;AAEzE,MAAM,wBAAwB,GAAG,CAAC,OAA2B,EAAE,EAAE,CAC7D,CAAC,OAAO;IACP,OAA6B,CAAC,QAAQ;IACvC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,MAAM;IAC3C,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;IAChD,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;IAChD,CAAC,OAAO,CAAC,WAAW;IACpB,CAAC,OAAO,CAAC,YAAY,CAAC;AAE1B,MAAM,UAAU,YAAY,CAAC,QAAoB,EAAE,QAAiB;IAChE,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAE7C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IAErF,IAAI,QAAQ;QACR,OAAO;YACH,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;YACrB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;YACnB,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;SAC9B,CAAC;IAEN,MAAM,GAAG,GAAG,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,wBAAwB,CAAC,cAAc,CAAC;YAAE,OAAO;QACrD,QAAQ,EAAE,CAAC;QACX,sEAAsE;QACtE,IAAI,WAAW,CAAC,OAAO,GAAG,YAAY;YAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,wBAAwB,CAAC;QAC7G,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO;QACH,WAAW,EAAE,GAAG,EAAE;YACd,WAAW,CAAC,OAAO,GAAG,gBAAgB,CAAC;YACvC,QAAQ,EAAE,CAAC;YACX,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACf,OAAO,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;QACD,iBAAiB;KACpB,CAAC;AACN,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAc,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,CAAC,mCAAmC;AACpE,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,CAAC,CAAC,oDAAoD;AAClG,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,mCAAmC;AAEzE,MAAM,wBAAwB,GAAG,CAAC,OAA2B,EAAE,EAAE,CAC7D,CAAC,OAAO;IACP,OAA6B,CAAC,QAAQ;IACvC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,MAAM;IAC3C,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;IAChD,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;IAChD,CAAC,OAAO,CAAC,WAAW;IACpB,CAAC,OAAO,CAAC,YAAY,CAAC;AAE1B,MAAM,UAAU,YAAY,CAAC,QAAoB,EAAE,QAAiB;IAChE,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAE7C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IAErF,IAAI,QAAQ;QACR,OAAO;YACH,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;YACrB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;YACnB,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC;SAC9B,CAAC;IAEN,MAAM,GAAG,GAAG,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,wBAAwB,CAAC,cAAc,CAAC;YAAE,OAAO;QACrD,QAAQ,EAAE,CAAC;QACX,sEAAsE;QACtE,IAAI,WAAW,CAAC,OAAO,GAAG,YAAY;YAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,GAAG,wBAAwB,CAAC;QAC7G,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO;QACH,WAAW,EAAE,CAAC,KAAiB,EAAE,EAAE;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,CAAC,OAAO,GAAG,gBAAgB,CAAC;YACvC,QAAQ,EAAE,CAAC;YACX,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QACD,SAAS,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;QACD,YAAY,EAAE,GAAG,EAAE;YACf,OAAO,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;QACD,iBAAiB;KACpB,CAAC;AACN,CAAC;AAED,sDAAsD"}

package/dist/hooks/useOutsideClick.d.ts

@@ -27,5 +27,9 @@
  * @param callback - The callback to call when a click occurs outside of the ref.
  * @param disabled - Whether the hook should be disabled. Defaults to false.
  */
-export declare function useOutsideClick(elements: (HTMLElement | null)[] | null, callback: (event?: MouseEvent) => void, disabled?: boolean): void;
+export declare function useOutsideClick({ elements, callback, disabled, }: {
+    elements: (HTMLElement | null)[] | null;
+    callback: (event?: MouseEvent) => void;
+    disabled?: boolean;
+}): void;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useOutsideClick.js

@@ -28,7 +28,7 @@ import { useEffect } from 'react';
  * @param callback - The callback to call when a click occurs outside of the ref.
  * @param disabled - Whether the hook should be disabled. Defaults to false.
  */
-export function useOutsideClick(elements, callback, disabled) {
+export function useOutsideClick({ elements, callback, disabled, }) {
     useEffect(() => {
         if (!elements?.length || disabled)
             return;

package/dist/hooks/useOutsideClick.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideClick.js","sourceRoot":"","sources":["../../src/hooks/useOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,eAAe,CAC3B,QAAuC,EACvC,QAAsC,EACtC,QAAkB;IAElB,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ;YAAE,OAAO;QAE1C,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,QAAQ,IAAI,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;gBAAE,OAAO;YACjG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAClE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useOutsideClick.js","sourceRoot":"","sources":["../../src/hooks/useOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,QAAQ,GAKX;IACG,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ;YAAE,OAAO;QAE1C,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,QAAQ,IAAI,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAc,CAAC,CAAC;gBAAE,OAAO;YACjG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAClE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,CAAC;AAED,sDAAsD"}

package/dist/hooks/usePaginationState.d.ts

@@ -0,0 +1,4 @@
+export declare const usePaginationState: (numPages: number, initialPage?: number) => {
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+};

package/dist/hooks/usePaginationState.js

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+/*
+    * A hook to manage the state of pagination.
+
+    * @param numPages - The total number of pages.
+    * @param initialPage - The initial page to start on (default is 1).
+    * @returns An object containing the current page and a function to set the current page.
+    */
+export const usePaginationState = (numPages, initialPage) => {
+    const [currentPage, setCurrentPage] = useState(initialPage || 1);
+    const setPage = (page) => {
+        if (page < 1 || page > numPages) {
+            return;
+        }
+        setCurrentPage(page);
+    };
+    return {
+        currentPage,
+        setCurrentPage: setPage,
+    };
+};
+//# sourceMappingURL=usePaginationState.js.map

package/dist/hooks/usePaginationState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationState.js","sourceRoot":"","sources":["../../src/hooks/usePaginationState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;;MAMM;AACN,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAgB,EAAE,WAAoB,EAAE,EAAE;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE;QAC7B,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,EAAE,CAAC;YAC9B,OAAO;QACX,CAAC;QACD,cAAc,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO;QACH,WAAW;QACX,cAAc,EAAE,OAAO;KAC1B,CAAC;AACN,CAAC,CAAC"}

package/dist/hooks/useRadioState.d.ts

@@ -1,4 +1,4 @@
-import { RadioProps } from '../components/Radio';
+import { RadioProps } from '-/components/Radio';
 /**
  * A hook to manage the state of a single radio. Used alongside the Radio component.
  *
@@ -18,6 +18,6 @@ import { RadioProps } from '../components/Radio';
 export declare function useRadioState(name: string, externalState?: [value: string | undefined, onChange: (next: string) => void]): {
     radioProps: (radioValue: string) => Pick<RadioProps, "checked" | "name" | "onChange" | "value">;
     value: string | undefined;
-    setValue: (next: string) => void;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useTimeout.d.ts

@@ -1,3 +1,8 @@
+type TimeoutHook = {
+    clear: () => void;
+    set: (callback: () => void, ms?: number) => void;
+    ref: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+};
 /**
  * A hook that creates a timeout that is automatically cleared when the component is unmounted.
  *
@@ -17,9 +22,7 @@
  *
  * @returns A ref object that can be used to store a timeout id.
  */
-export declare function useTimeout(): {
-    clear: () => void;
-    set: (callback: () => void, durationMs: number) => void;
-    ref: import("react").MutableRefObject<NodeJS.Timeout | null>;
-};
+export declare function useTimeout(): TimeoutHook;
+export declare function useTimeout(initialCallback: () => void, durationMs: number): TimeoutHook;
+export {};
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useTimeout.js

@@ -1,41 +1,25 @@
 import { useRef, useEffect, useMemo } from 'react';
-/**
- * A hook that creates a timeout that is automatically cleared when the component is unmounted.
- *
- * @example
- *     import { useTimeout } from '@bspk/ui/hooks/useTimeout';
- *     import { useEffect } from 'react';
- *
- *     export function MyComponent() {
- *     const timeout = useTimeout();
- *
- *     const handleClick = () => {
- *     timeout.set(() => console.log('Timeout triggered'), 1000);
- *     };
- *
- *     return <Button onClick={handleClick}>Click here then check the console.</Button>;
- *     }
- *
- * @returns A ref object that can be used to store a timeout id.
- */
-export function useTimeout() {
+export function useTimeout(initialCallback, durationMs = 1000) {
     const timeoutRef = useRef(null);
     useEffect(() => {
         if (timeoutRef.current)
             clearTimeout(timeoutRef.current);
+        if (initialCallback)
+            timeoutRef.current = setTimeout(initialCallback, durationMs);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only run at mount
     }, []);
     return useMemo(() => ({
         clear: () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         },
-        set: (callback, durationMs) => {
+        set: (callback, ms = durationMs) => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
-            timeoutRef.current = setTimeout(callback, durationMs);
+            timeoutRef.current = setTimeout(callback, ms);
         },
         ref: timeoutRef,
-    }), []);
+    }), [durationMs]);
 }
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 //# sourceMappingURL=useTimeout.js.map

package/dist/hooks/useTimeout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTimeout.js","sourceRoot":"","sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,UAAU;IACtB,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO;YAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CACV,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,GAAG,EAAE;YACR,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7D,CAAC;QACD,GAAG,EAAE,CAAC,QAAoB,EAAE,UAAkB,EAAE,EAAE;YAC9C,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACzD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAC1D,CAAC;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,EACF,EAAE,CACL,CAAC;AACN,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useTimeout.js","sourceRoot":"","sources":["../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AA6BnD,MAAM,UAAU,UAAU,CAAC,eAA4B,EAAE,UAAU,GAAG,IAAI;IACtE,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO;YAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,IAAI,eAAe;YAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;QAClF,4EAA4E;IAChF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CACV,GAAG,EAAE,CAAC,CAAC;QACH,KAAK,EAAE,GAAG,EAAE;YACR,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC7D,CAAC;QACD,GAAG,EAAE,CAAC,QAAoB,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE;YAC3C,IAAI,UAAU,CAAC,OAAO;gBAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACzD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,EACF,CAAC,UAAU,CAAC,CACf,CAAC;AACN,CAAC;AAED,sDAAsD"}

package/dist/hooks/useUIContext.d.ts

@@ -1 +1 @@
-export declare const useUIContext: () => import("../utils/uiContext").UIContextProps;
+export declare const useUIContext: () => import("-/utils/uiContext").UIContextProps;

package/dist/styles/anywhere.css

@@ -604,17 +604,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - Anywhere */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Anywhere */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Anywhere */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Anywhere */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -624,7 +624,7 @@ body {
     --interaction-primary-hover-opacity: #1559ea1a;
     /* Interaction/primary-press-opacity - Theme - 3.0 */
     --interaction-primary-press-opacity: #1559ea33;
-    /* Interactions/disabled-opacity - Theme - 3.0 */
+    /* Interactions/disabled-opacity - Theme - Anywhere */
     --interactions-disabled-opacity: #0000000f;
     /* Interactions/opacity-black-10 - Global (primitives) */
     --interactions-opacity-black-10: #0000001a;
@@ -870,17 +870,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Anywhere */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Anywhere */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Anywhere */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - Anywhere */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Anywhere */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Anywhere */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -894,7 +894,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Anywhere */
     --surface-neutral-transparent: #ffffff00;
     /* Colors/Brands/Anywhere/Tertiary/00-base - Global (primitives) */
     --tertiary-00-base: #030330;

package/dist/styles/anywhere.css.js

@@ -607,17 +607,17 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - 3.0 */
+    /* Foreground/Brand/on-brand-primary - Theme - Anywhere */
     --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Anywhere */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Anywhere */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Anywhere */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Anywhere */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -627,7 +627,7 @@ body {
     --interaction-primary-hover-opacity: #1559ea1a;
     /* Interaction/primary-press-opacity - Theme - 3.0 */
     --interaction-primary-press-opacity: #1559ea33;
-    /* Interactions/disabled-opacity - Theme - 3.0 */
+    /* Interactions/disabled-opacity - Theme - Anywhere */
     --interactions-disabled-opacity: #0000000f;
     /* Interactions/opacity-black-10 - Global (primitives) */
     --interactions-opacity-black-10: #0000001a;
@@ -873,17 +873,17 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Anywhere */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Anywhere */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Anywhere */
     --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - 3.0 */
+    /* Status/on-success - Theme - Anywhere */
     --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Anywhere */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Anywhere */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -897,7 +897,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Anywhere */
     --surface-neutral-transparent: #ffffff00;
     /* Colors/Brands/Anywhere/Tertiary/00-base - Global (primitives) */
     --tertiary-00-base: #030330;
@@ -1890,4 +1890,3 @@ body {
 }
 `));
 document.head.appendChild(style);
-

package/dist/{base.css → styles/base.css}

@@ -94,6 +94,7 @@
 }
 
 :root {
+  --z-index-focus: 9999;
   --z-index-tooltip-popover: 1100;
   --z-index-dialog: 1000;
   --z-index-dropdown: 1000;
@@ -129,20 +130,20 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]) {
   color: var(--foreground-link-text-default);
 }
-body[data-bspk] a:not([disabled]):hover, body[data-bspk] a:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
   color: var(--foreground-link-text-default-hovered);
 }
-body[data-bspk] a:not([disabled]):active, body[data-bspk] a:not([disabled])[data-pseudo=active] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
   color: var(--foreground-link-text-default);
   filter: brightness(80%);
 }
-body[data-bspk] a:not([disabled]):visited, body[data-bspk] a:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
   color: var(--foreground-link-text-default-visited);
 }
-body[data-bspk] a[disabled] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled] {
   pointer-events: none;
   cursor: text;
   color: var(--foreground-link-text-default-disabled);
@@ -208,15 +209,11 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 }
 
 [data-sr-only] {
-  position: absolute;
-  width: 1px;
   height: 1px;
-  padding: 0;
-  margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+  position: absolute !important;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
 }
 
 [data-touch-target] ~ * {
@@ -297,4 +294,22 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   border-radius: var(--radius-sm);
 }
 
+[data-attachment-wrapper] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  flex-shrink: 0;
+}
+[data-attachment-wrapper] [data-attachment] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  z-index: 2;
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/{base.css.js → styles/base.css.js}

@@ -97,6 +97,7 @@ style.appendChild(document.createTextNode(`/**
 }
 
 :root {
+  --z-index-focus: 9999;
   --z-index-tooltip-popover: 1100;
   --z-index-dialog: 1000;
   --z-index-dropdown: 1000;
@@ -132,20 +133,20 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]) {
   color: var(--foreground-link-text-default);
 }
-body[data-bspk] a:not([disabled]):hover, body[data-bspk] a:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
   color: var(--foreground-link-text-default-hovered);
 }
-body[data-bspk] a:not([disabled]):active, body[data-bspk] a:not([disabled])[data-pseudo=active] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
   color: var(--foreground-link-text-default);
   filter: brightness(80%);
 }
-body[data-bspk] a:not([disabled]):visited, body[data-bspk] a:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
   color: var(--foreground-link-text-default-visited);
 }
-body[data-bspk] a[disabled] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled] {
   pointer-events: none;
   cursor: text;
   color: var(--foreground-link-text-default-disabled);
@@ -211,15 +212,11 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 }
 
 [data-sr-only] {
-  position: absolute;
-  width: 1px;
   height: 1px;
-  padding: 0;
-  margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+  position: absolute !important;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
 }
 
 [data-touch-target] ~ * {
@@ -300,7 +297,24 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   border-radius: var(--radius-sm);
 }
 
+[data-attachment-wrapper] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  flex-shrink: 0;
+}
+[data-attachment-wrapper] [data-attachment] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  z-index: 2;
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/styles/better-homes-gardens.css

@@ -598,7 +598,7 @@ body {
     --corner-radius-none: 0;
     /* Colors/Brands/Better Homes & Gardens/Dark Grey - Global (primitives) */
     --dark-grey: #636466;
-    /* Data visual/category-1 - Theme - 3.0 */
+    /* Data visual/category-1 - Theme - Better Home & Garden */
     --data-visual-category-1: #0a466c;
     /* East - navigation rails, drawers, sheets */
     --drop-shadow-east: 2px 0px 8px -2px #0000001a, 2px 0px 4px -2px #0000001f;
@@ -614,15 +614,15 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - Better Home & Garden */
     --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - 3.0 */
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - Better Home & Garden */
     --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - 3.0 */
+    /* Foreground/Neutral/inverse-on-surface - Theme - Better Home & Garden */
     --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - 3.0 */
+    /* Foreground/Neutral/on-color - Theme - Better Home & Garden */
     --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - 3.0 */
+    /* Foreground/Neutral/on-inverse-surface - Theme - Better Home & Garden */
     --foreground-neutral-on-inverse-surface: #fafafa;
     /* Interaction/disabled-opacity - Theme - 3.0 */
     --interaction-disabled-opacity: #0000000f;
@@ -880,15 +880,15 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - 3.0 */
+    /* Status/on-error - Theme - Better Home & Garden */
     --status-on-error: #ffffff;
-    /* Status/on-information - Theme - 3.0 */
+    /* Status/on-information - Theme - Better Home & Garden */
     --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - 3.0 */
+    /* Status/on-informational - Theme - Better Home & Garden */
     --status-on-informational: #ffffff;
-    /* Status/on-warning - Theme - 3.0 */
+    /* Status/on-warning - Theme - Better Home & Garden */
     --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - 3.0 */
+    /* Stroke/Neutral/focus-on-inverse - Theme - Better Home & Garden */
     --stroke-neutral-focus-on-inverse: #ffffff;
     /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
     --stroke-neutral-interaction-inverse-focus: #ffffff;
@@ -902,7 +902,7 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - 3.0 */
+    /* Surface/Neutral/transparent - Theme - Better Home & Garden */
     --surface-neutral-transparent: #ffffff00;
     /* Typeface - Brand */
     --typeface: 'Work Sans', sans-serif;