@bspk/ui 1.2.0 → 1.3.1

package/dist/components/UIProvider/UIProvider.js

@@ -1,16 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { AriaLiveMessageHandler, sendAriaLiveMessage } from './AriaLiveMessageHandler';
 import { useEventListener } from '../../hooks/useAddEventListener';
 import { useDebounceState } from '../../hooks/useDebounceState';
 import { useIsomorphicEffect } from '../../hooks/useIsomorphicEffect';
 import { UIContext } from '../../utils/uiContext';
 /**
- * UIProvider is a React context provider that manages the UI state, including theme and responsive state.
+ * UIProvider is a React context provider that manages the UI state.
+ *
+ * UI state includes, theme, setTheme, responsive state, aria live messages
+ *
+ * This provider should wrap the root of your application to ensure that all components have access to the UI context.
  *
  * @name UIProvider
+ *
+ * @phase Utility
  */
 export function UIProvider({ children }) {
     const [theme, setTheme] = useState('light');
+    // Keep track of device width to determine if we are in mobile, tablet, or desktop mode
     const [deviceWidth, setDeviceWidth] = useDebounceState(() => {
         return typeof window !== 'undefined' ? window.innerWidth : 0;
     }, 250);
@@ -19,12 +27,13 @@ export function UIProvider({ children }) {
         document.documentElement.style.setProperty('--scrollbar-width', `${window.innerWidth - document.documentElement.clientWidth}px`);
     }, [theme]);
     useEventListener('resize', () => setDeviceWidth(window.innerWidth));
-    return (_jsx(UIContext.Provider, { "data-bspk-utility": "ui-provider", value: {
+    return (_jsxs(UIContext.Provider, { "data-bspk-utility": "ui-provider", value: {
             theme,
             setTheme,
             isMobile: deviceWidth < 640,
             isTablet: deviceWidth > 640 && deviceWidth < 1024,
             isDesktop: deviceWidth >= 1024,
-        }, children: children }));
+            sendAriaLiveMessage,
+        }, children: [children, _jsx(AriaLiveMessageHandler, {})] }));
 }
 //# sourceMappingURL=UIProvider.js.map

package/dist/components/UIProvider/UIProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../../src/components/UIProvider/UIProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAc,MAAM,mBAAmB,CAAC;AAM1D;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAmB;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,OAAO,CAAC,CAAC;IAExD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACxD,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE,CAAC,EAAE,GAAG,CAAC,CAAC;IAER,mBAAmB,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QAC/C,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACtC,mBAAmB,EACnB,GAAG,MAAM,CAAC,UAAU,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,CAClE,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAEpE,OAAO,CACH,KAAC,SAAS,CAAC,QAAQ,yBACG,aAAa,EAC/B,KAAK,EAAE;YACH,KAAK;YACL,QAAQ;YACR,QAAQ,EAAE,WAAW,GAAG,GAAG;YAC3B,QAAQ,EAAE,WAAW,GAAG,GAAG,IAAI,WAAW,GAAG,IAAI;YACjD,SAAS,EAAE,WAAW,IAAI,IAAI;SACjC,YAEA,QAAQ,GACQ,CACxB,CAAC;AACN,CAAC"}
+{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../../src/components/UIProvider/UIProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAc,MAAM,mBAAmB,CAAC;AAW1D;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAmB;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,OAAO,CAAC,CAAC;IACxD,uFAAuF;IAEvF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACxD,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE,CAAC,EAAE,GAAG,CAAC,CAAC;IAER,mBAAmB,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QAC/C,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACtC,mBAAmB,EACnB,GAAG,MAAM,CAAC,UAAU,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,IAAI,CAClE,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAEpE,OAAO,CACH,MAAC,SAAS,CAAC,QAAQ,yBACG,aAAa,EAC/B,KAAK,EAAE;YACH,KAAK;YACL,QAAQ;YACR,QAAQ,EAAE,WAAW,GAAG,GAAG;YAC3B,QAAQ,EAAE,WAAW,GAAG,GAAG,IAAI,WAAW,GAAG,IAAI;YACjD,SAAS,EAAE,WAAW,IAAI,IAAI;YAC9B,mBAAmB;SACtB,aAEA,QAAQ,EACT,KAAC,sBAAsB,KAAG,IACT,CACxB,CAAC;AACN,CAAC"}

package/dist/components/UIProvider/UIProviderExample.d.ts

@@ -0,0 +1,5 @@
+import { UIProviderProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<UIProviderProps>[];
+export declare const UIProviderExample: ComponentExample<UIProviderProps>;
+export declare function AriaLiveExample(): import("react/jsx-runtime").JSX.Element;

package/dist/components/UIProvider/UIProviderExample.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button';
+import { useUIContext } from '../../hooks/useUIContext';
+export const presets = [];
+export const UIProviderExample = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets,
+    sections: [
+        {
+            title: 'Theme Switching',
+            content: ({ Syntax }) => (_jsx("div", { style: {}, children: _jsx(Syntax, { code: `// Example usage of theme switching
+import { useContext } from 'react';
+import { useUIContext } from '../../hooks/useUIContext';
+
+export function ThemeSwitcher() {
+    const {theme, setTheme} = useUIContext();
+
+    return (
+        <div>
+            <p>Current theme: {theme}</p>
+            <button onClick={() => setTheme('light')}>Light Theme</button>
+            <button onClick={() => setTheme('dark')}>Dark Theme</button>
+        </div>
+    );
+}`, language: "typescript" }) })),
+        },
+        {
+            title: 'Responsive Helpers',
+            content: ({ Syntax }) => (_jsx("div", { style: {}, children: _jsx(Syntax, { code: `// Example usage of isMobile, isTablet, and isDesktop
+import { useContext } from 'react';
+import { useUIContext } from '../../hooks/useUIContext';
+
+export function ResponsiveComponent() {
+    const {isMobile, isTablet, isDesktop} = useUIContext();
+
+    return (
+        <div>
+            {isMobile && <p>This is a mobile device.</p>}
+            {isTablet && <p>This is a tablet device.</p>}
+            {isDesktop && <p>This is a desktop device.</p>}
+        </div>
+    );
+}`, language: "typescript" }) })),
+        },
+        {
+            title: 'ARIA Live Messages',
+            content: ({ Syntax }) => (_jsxs("div", { style: {}, children: [_jsx("p", { children: "Example usage of sending ARIA live messages. This allows for dynamic updates to assistive technologies, such as screen readers." }), _jsx(AriaLiveExample, {}), _jsx(Syntax, { code: `// Example usage of sending ARIA live messages
+import { useContext } from 'react';
+import { useUIContext } from '../../hooks/useUIContext';
+
+export function AriaLiveExample() {
+    const {sendAriaLiveMessage} = useUIContext();
+
+    const handleClick = () => {
+        sendAriaLiveMessage('Action completed successfully', 'polite');
+    };
+
+    return (
+        <div>
+            <button onClick={handleClick}>Perform Action</button>
+        </div>
+    );
+}`, language: "typescript" })] })),
+        },
+    ],
+    variants: {},
+};
+export function AriaLiveExample() {
+    const { sendAriaLiveMessage } = useUIContext();
+    return (_jsxs("p", { children: [_jsx(Button, { "data-bspk": "link", label: "Send a polite ARIA Live Message ", onClick: () => {
+                    sendAriaLiveMessage?.(`Action completed successfully at ${new Date().toLocaleTimeString()}`, 'polite');
+                }, style: {
+                    padding: 0,
+                    margin: 0,
+                    border: 'none',
+                    background: 'none',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                }, variant: "tertiary" }), _jsx(Button, { "data-bspk": "link", label: "Send an assertive ARIA Live Message ", onClick: () => {
+                    sendAriaLiveMessage?.(`Critical update occurred at ${new Date().toLocaleTimeString()}`, 'assertive');
+                }, style: {
+                    padding: 0,
+                    margin: 0,
+                    border: 'none',
+                    background: 'none',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                }, variant: "tertiary" })] }));
+}
+//# sourceMappingURL=UIProviderExample.js.map

package/dist/components/UIProvider/UIProviderExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIProviderExample.js","sourceRoot":"","sources":["../../../src/components/UIProvider/UIProviderExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,QAAQ,EAAE;QACN;YACI,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,cAAK,KAAK,EAAE,EAAE,YACV,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;EAc5B,EACsB,QAAQ,EAAC,YAAY,GACvB,GACA,CACT;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,cAAK,KAAK,EAAE,EAAE,YACV,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;EAc5B,EACsB,QAAQ,EAAC,YAAY,GACvB,GACA,CACT;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACrB,eAAK,KAAK,EAAE,EAAE,aACV,0JAGI,EACJ,KAAC,eAAe,KAAG,EACnB,KAAC,MAAM,IACH,IAAI,EAAE;;;;;;;;;;;;;;;;EAgB5B,EACsB,QAAQ,EAAC,YAAY,GACvB,IACA,CACT;SACJ;KACJ;IACD,QAAQ,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,UAAU,eAAe;IAC3B,MAAM,EAAE,mBAAmB,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/C,OAAO,CACH,wBACI,KAAC,MAAM,iBACO,MAAM,EAChB,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,GAAG,EAAE;oBACV,mBAAmB,EAAE,CACjB,oCAAoC,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,EAAE,EACrE,QAAQ,CACX,CAAC;gBACN,CAAC,EACD,KAAK,EAAE;oBACH,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,MAAM;oBACd,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;iBACpB,EACD,OAAO,EAAC,UAAU,GACpB,EAEF,KAAC,MAAM,iBACO,MAAM,EAChB,KAAK,EAAC,sCAAsC,EAC5C,OAAO,EAAE,GAAG,EAAE;oBACV,mBAAmB,EAAE,CACjB,+BAA+B,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,EAAE,EAChE,WAAW,CACd,CAAC;gBACN,CAAC,EACD,KAAK,EAAE;oBACH,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,MAAM;oBACd,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;iBACpB,EACD,OAAO,EAAC,UAAU,GACpB,IACF,CACP,CAAC;AACN,CAAC"}

package/dist/constants/phases.js

@@ -1,7 +1,6 @@
 export const COMPONENT_PHASE_COLORS = {
     Backlog: 'grey',
     Dev: 'blue',
-    QA: 'yellow',
     UXReview: 'purple',
     Stable: 'green',
     Utility: 'magenta',

package/dist/constants/phases.js.map

@@ -1 +1 @@
-{"version":3,"file":"phases.js","sourceRoot":"","sources":["../../src/constants/phases.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,sBAAsB,GAAyC;IACxE,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,MAAM;IACX,EAAE,EAAE,QAAQ;IACZ,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,SAAS;CACrB,CAAC"}
+{"version":3,"file":"phases.js","sourceRoot":"","sources":["../../src/constants/phases.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,sBAAsB,GAAyC;IACxE,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,MAAM;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,SAAS;CACrB,CAAC"}

package/dist/hooks/useAddEventListener.d.ts

@@ -1 +1,2 @@
-export declare function useEventListener<KW extends keyof WindowEventMap, KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap, KM extends keyof MediaQueryListEventMap, T extends Document | HTMLElement | MediaQueryList | SVGAElement | Window = HTMLElement>(eventName: KH | KM | KW, handler: (event: Event | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | SVGElementEventMap[KH] | WindowEventMap[KW]) => void, element?: T, disabled?: boolean, options?: AddEventListenerOptions | boolean): void;
+export type CustomEventName = 'aria-live';
+export declare function useEventListener<KW extends keyof WindowEventMap, KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap, KM extends keyof MediaQueryListEventMap, T extends Document | HTMLElement | MediaQueryList | SVGAElement | Window = HTMLElement>(eventName: CustomEventName | KH | KM | KW, handler: (event: Event | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | SVGElementEventMap[KH] | WindowEventMap[KW]) => void, element?: T, disabled?: boolean, options?: AddEventListenerOptions | boolean): void;

package/dist/hooks/useAddEventListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAddEventListener.js","sourceRoot":"","sources":["../../src/hooks/useAddEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,UAAU,gBAAgB,CAM5B,SAAuB,EACvB,OAOS,EACT,OAAW,EACX,QAAkB,EAClB,OAA2C;IAE3C,mCAAmC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,mBAAmB,CAAC,GAAG,EAAE;QACrB,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,mBAAmB,CAAC,GAAG,EAAE;QACrB,IAAI,QAAQ;YAAE,OAAO;QAErB,8BAA8B;QAC9B,MAAM,aAAa,GAAe,OAAO,IAAI,MAAM,CAAC;QAEpD,IAAI,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAE/D,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,CAAC,KAAK,EAAE,EAAE;YACvC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACR,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACpE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACtC,CAAC"}
+{"version":3,"file":"useAddEventListener.js","sourceRoot":"","sources":["../../src/hooks/useAddEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D,MAAM,UAAU,gBAAgB,CAM5B,SAAyC,EACzC,OAOS,EACT,OAAW,EACX,QAAkB,EAClB,OAA2C;IAE3C,mCAAmC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,mBAAmB,CAAC,GAAG,EAAE;QACrB,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,mBAAmB,CAAC,GAAG,EAAE;QACrB,IAAI,QAAQ;YAAE,OAAO;QAErB,8BAA8B;QAC9B,MAAM,aAAa,GAAe,OAAO,IAAI,MAAM,CAAC;QAEpD,IAAI,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,gBAAgB,CAAC;YAAE,OAAO;QAE/D,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,CAAC,KAAK,EAAE,EAAE;YACvC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACR,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QACpE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACtC,CAAC"}

package/dist/hooks/useArrowNavigation.d.ts

@@ -0,0 +1,50 @@
+import { KeyboardEvent } from 'react';
+import { KeysCallback } from '-/utils/handleKeyDown';
+import { KeyboardEventCode } from '-/utils/keyboard';
+type ArrowKeyNames = Extract<KeyboardEventCode, `Arrow${string}`>;
+export type ArrowKeyNavigationCallbackParams = {
+    key: ArrowKeyNames;
+    event: KeyboardEvent;
+    activeElementId: string | null;
+    increment: number;
+};
+type UseArrowNavigationProps = {
+    /**
+     * An array of string IDs representing the navigable elements. These IDs should correspond to the `id` attributes of
+     * the elements in the DOM. Ensure the elements are not disabled.
+     */
+    ids: string[];
+    /**
+     * An optional callback function that is invoked when an arrow key is pressed. This function receives the key name,
+     * the keyboard event, and the next active element ID. If the function returns `true`, the default navigation
+     * behavior is prevented; if it returns `false` or is not provided, the default behavior proceeds.
+     */
+    callback?: (params: ArrowKeyNavigationCallbackParams) => boolean;
+    /** Optional configuration to set navigation direction increments. */
+    increments?: Record<ArrowKeyNames, number>;
+    /**
+     * The ID of the element that should be active by default. If not provided, the first ID in the `ids` array will be
+     * used.
+     */
+    defaultActiveId?: string | null;
+};
+/**
+ * A hook to manage arrow key navigation for a list of elements.
+ *
+ * @example
+ *     ```tsx
+ *     const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation(['id1', 'id2', 'id3']);
+ *     ```;
+ *
+ * @returns An object containing:
+ *
+ *   - `activeElementId`: The ID of the currently active element.
+ *   - `setActiveElementId`: A function to manually set the active element ID.
+ *   - `arrowKeyCallbacks`: An object with callback functions for arrow key navigation.
+ */
+export declare function useArrowNavigation({ ids, callback, increments, defaultActiveId, }: UseArrowNavigationProps): {
+    activeElementId: string | null;
+    setActiveElementId: (id: string | null) => void;
+    arrowKeyCallbacks: KeysCallback;
+};
+export {};

package/dist/hooks/useArrowNavigation.js

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { getElementById } from '../utils/dom';
+const ARROW_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+/**
+ * A hook to manage arrow key navigation for a list of elements.
+ *
+ * @example
+ *     ```tsx
+ *     const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation(['id1', 'id2', 'id3']);
+ *     ```;
+ *
+ * @returns An object containing:
+ *
+ *   - `activeElementId`: The ID of the currently active element.
+ *   - `setActiveElementId`: A function to manually set the active element ID.
+ *   - `arrowKeyCallbacks`: An object with callback functions for arrow key navigation.
+ */
+export function useArrowNavigation({ ids = [], callback, increments = {
+    ArrowLeft: -1,
+    ArrowRight: 1,
+    ArrowUp: -1,
+    ArrowDown: 1,
+}, defaultActiveId, }) {
+    const [activeElementId, setActiveElementIdBase] = useState(defaultActiveId || null);
+    const setActiveElementId = (id) => {
+        setActiveElementIdBase(id);
+        getElementById(id)?.scrollIntoView({
+            block: 'nearest',
+            behavior: 'smooth',
+            inline: 'nearest',
+        });
+    };
+    return {
+        activeElementId,
+        setActiveElementId,
+        arrowKeyCallbacks: Object.fromEntries(ARROW_KEYS.map((key) => [
+            key,
+            (event) => {
+                let nextIndex = 0;
+                let currentIndex = 0;
+                let nextId = ids[nextIndex];
+                const increment = increments[key];
+                if (activeElementId) {
+                    currentIndex = ids.indexOf(activeElementId);
+                    nextIndex = (currentIndex + increment + ids.length) % ids.length;
+                    nextId = ids[nextIndex];
+                }
+                if (typeof callback === 'function' &&
+                    callback({ key, event, activeElementId: nextId, increment }) === false)
+                    return;
+                event.preventDefault();
+                setActiveElementId(nextId);
+            },
+        ])),
+    };
+}
+//# sourceMappingURL=useArrowNavigation.js.map

package/dist/hooks/useArrowNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArrowNavigation.js","sourceRoot":"","sources":["../../src/hooks/useArrowNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7C,MAAM,UAAU,GAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;AA8BxF;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,GAAG,GAAG,EAAE,EACR,QAAQ,EACR,UAAU,GAAG;IACT,SAAS,EAAE,CAAC,CAAC;IACb,UAAU,EAAE,CAAC;IACb,OAAO,EAAE,CAAC,CAAC;IACX,SAAS,EAAE,CAAC;CACf,EACD,eAAe,GACO;IAKtB,MAAM,CAAC,eAAe,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAgB,eAAe,IAAI,IAAI,CAAC,CAAC;IAEnG,MAAM,kBAAkB,GAAG,CAAC,EAAiB,EAAE,EAAE;QAC7C,sBAAsB,CAAC,EAAE,CAAC,CAAC;QAC3B,cAAc,CAAC,EAAE,CAAC,EAAE,cAAc,CAAC;YAC/B,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,SAAS;SACpB,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,OAAO;QACH,eAAe;QACf,kBAAkB;QAClB,iBAAiB,EAAE,MAAM,CAAC,WAAW,CACjC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC;YACpB,GAAG;YACH,CAAC,KAAoB,EAAE,EAAE;gBACrB,IAAI,SAAS,GAAG,CAAC,CAAC;gBAClB,IAAI,YAAY,GAAG,CAAC,CAAC;gBACrB,IAAI,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;gBAC5B,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;gBAElC,IAAI,eAAe,EAAE,CAAC;oBAClB,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;oBAC5C,SAAS,GAAG,CAAC,YAAY,GAAG,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC;oBACjE,MAAM,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;gBAC5B,CAAC;gBAED,IACI,OAAO,QAAQ,KAAK,UAAU;oBAC9B,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAK,KAAK;oBAEtE,OAAO;gBACX,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,kBAAkB,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;SACJ,CAAC,CACW;KACpB,CAAC;AACN,CAAC"}

package/dist/hooks/useCheckboxGroupState.d.ts

@@ -32,6 +32,6 @@ export declare function useCheckboxGroupState(allValues: string[], name: string,
     allCheckboxProps: Pick<CheckboxProps, "name" | "value" | "onChange" | "checked" | "indeterminate">;
     checkboxProps: (value: string) => Pick<CheckboxProps, "checked" | "name" | "onChange" | "value">;
     values: string[];
-    setValues: (next: string[]) => void;
+    setValues: import("react").Dispatch<import("react").SetStateAction<string[]>>;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useContainerWidth.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A hook to get the width of a container element.
+ *
+ * @example
+ *     import { useRef } from 'react';
+ *     import { useContainerWidth } from '@bspk/ui/hooks/useContainerWidth';
+ *     export function Example() {
+ *         const containerRef = useRef<HTMLDivElement>(null);
+ *         const width = useContainerWidth(containerRef);
+ *         return <div ref={containerRef}>Width: {width}px</div>;
+ *     }
+ *
+ * @param ref - A ref to a container element.
+ * @returns The width of the container element.
+ */
+export declare function useContainerWidth(ref: React.RefObject<HTMLDivElement>): number;

package/dist/hooks/useContainerWidth.js

@@ -0,0 +1,35 @@
+import { useState, useLayoutEffect } from 'react';
+/**
+ * A hook to get the width of a container element.
+ *
+ * @example
+ *     import { useRef } from 'react';
+ *     import { useContainerWidth } from '@bspk/ui/hooks/useContainerWidth';
+ *     export function Example() {
+ *         const containerRef = useRef<HTMLDivElement>(null);
+ *         const width = useContainerWidth(containerRef);
+ *         return <div ref={containerRef}>Width: {width}px</div>;
+ *     }
+ *
+ * @param ref - A ref to a container element.
+ * @returns The width of the container element.
+ */
+export function useContainerWidth(ref) {
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        setWidth(ref.current.offsetWidth);
+        const observer = new window.ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === ref.current) {
+                    setWidth(entry.contentRect.width);
+                }
+            }
+        });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}
+//# sourceMappingURL=useContainerWidth.js.map

package/dist/hooks/useContainerWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerWidth.js","sourceRoot":"","sources":["../../src/hooks/useContainerWidth.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAClD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,iBAAiB,CAAC,GAAoC;IAClE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,eAAe,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAElC,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACnD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC1B,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;oBAC/B,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACtC,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAE9B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/dist/hooks/useFloating.d.ts

@@ -45,16 +45,16 @@ export type UseFloatingProps = {
     /**
      * When set to true, the width of the floating element will match the width of the reference element.
      *
-     * @default true
+     * @default false
      */
     refWidth?: boolean;
     /** Whether to hide the floating element. */
     hide?: boolean;
 };
-export type UseFloatingElements<ReferenceElementType extends HTMLElement = HTMLElement> = {
-    reference: ReferenceElementType | null;
+export type UseFloatingElements = {
+    reference: HTMLElement | null;
     floating: HTMLElement | null;
-    setReference: (element: ReferenceElementType | null) => void;
+    setReference: (element: HTMLElement | null) => void;
     setFloating: (element: HTMLElement | null) => void;
 };
 /**
@@ -63,9 +63,10 @@ export type UseFloatingElements<ReferenceElementType extends HTMLElement = HTMLE
  * @param param0
  * @returns
  */
-export declare function useFloating<ReferenceElementType extends HTMLElement = HTMLElement>({ placement, arrowRef, strategy, offsetOptions, refWidth, hide, }: UseFloatingProps): {
-    elements: UseFloatingElements<ReferenceElementType>;
+export declare function useFloating({ placement, arrowRef, strategy, offsetOptions, refWidth, hide, }: UseFloatingProps): {
+    elements: UseFloatingElements;
     floatingStyles: React.CSSProperties;
     middlewareData: MiddlewareData;
+    currentPlacement: Placement | undefined;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useFloating.js

@@ -23,7 +23,7 @@ const TRANSITION_DELAY = 250;
  * @param param0
  * @returns
  */
-export function useFloating({ placement = 'bottom-start', arrowRef, strategy = 'fixed', offsetOptions = 0, refWidth = true, hide = false, }) {
+export function useFloating({ placement = 'bottom-start', arrowRef, strategy = 'fixed', offsetOptions = 0, refWidth = false, hide = false, }) {
     const [floatingStyles, setFloatingStylesState] = useState({
         opacity: 0,
         pointerEvents: 'none',
@@ -43,6 +43,7 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
     const compute = useCallback(() => {
         computeDebounce.clear();
         transitionDelay.clear();
+        // console.log('compute', { referenceElement, floatingElement });
         // check if the reference or floating element is null
         if (referenceElement === null || floatingElement === null)
             return;
@@ -50,14 +51,12 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
             if (floatingElement?.style.top)
                 setFloatingStyles((prev) => ({
                     ...prev,
-                    display: undefined,
                     opacity: 0,
                     pointerEvents: 'none',
                 }));
             transitionDelay.set(() => {
                 setFloatingStyles((prev) => ({
                     ...prev,
-                    display: 'none',
                 }));
             }, TRANSITION_DELAY);
             return;
@@ -74,15 +73,13 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
                     arrowRef?.current && arrow({ element: arrowRef.current, padding: 8 }),
                     offset(offsetOptions),
                     flip(),
-                    refWidth &&
-                        size({
-                            apply({ rects, elements }) {
-                                if (refWidth)
-                                    Object.assign(elements.floating.style, {
-                                        width: `${rects.reference.width}px`,
-                                    });
-                            },
-                        }),
+                    size({
+                        apply({ rects, elements }) {
+                            Object.assign(elements.floating.style, {
+                                width: refWidth ? `${rects.reference.width}px` : undefined,
+                            });
+                        },
+                    }),
                 ],
             }).then((value) => {
                 setFloatingStyles(() => ({
@@ -140,6 +137,7 @@ export function useFloating({ placement = 'bottom-start', arrowRef, strategy = '
         },
         floatingStyles,
         middlewareData,
+        currentPlacement: middlewareData?.offset?.placement,
     };
 }
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useFloating.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloating.js","sourceRoot":"","sources":["../../src/hooks/useFloating.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFloating.js","sourceRoot":"","sources":["../../src/hooks/useFloating.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAOH,eAAe,EACf,KAAK,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,IAAI,GACP,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,MAAM,gBAAgB,GAAG,GAAG,CAAC;AA8C7B;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,SAAS,GAAG,cAAc,EAC1B,QAAQ,EACR,QAAQ,GAAG,OAAO,EAClB,aAAa,GAAG,CAAC,EACjB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,GACG;IAMf,MAAM,CAAC,cAAc,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAsB;QAC3E,OAAO,EAAE,CAAC;QACV,aAAa,EAAE,MAAM;QACrB,OAAO,EAAE,MAAM;KAClB,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,IAAwD,EAAE,EAAE;QACnF,sBAAsB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC9B,UAAU,EAAE,WAAW,gBAAgB,IAAI;YAC3C,GAAG,IAAI,CAAC,IAAI,CAAC;SAChB,CAAC,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAEzE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEnF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEjF,MAAM,eAAe,GAAG,UAAU,EAAE,CAAC;IACrC,MAAM,eAAe,GAAG,UAAU,EAAE,CAAC;IAErC,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,eAAe,CAAC,KAAK,EAAE,CAAC;QAExB,iEAAiE;QAEjE,qDAAqD;QACrD,IAAI,gBAAgB,KAAK,IAAI,IAAI,eAAe,KAAK,IAAI;YAAE,OAAO;QAElE,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,eAAe,EAAE,KAAK,CAAC,GAAG;gBAC1B,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACzB,GAAG,IAAI;oBACP,OAAO,EAAE,CAAC;oBACV,aAAa,EAAE,MAAM;iBACxB,CAAC,CAAC,CAAC;YAER,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE;gBACrB,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACzB,GAAG,IAAI;iBACV,CAAC,CAAC,CAAC;YACR,CAAC,EAAE,gBAAgB,CAAC,CAAC;YACrB,OAAO;QACX,CAAC;QAED,oCAAoC;QAEpC,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE;YACrB,2DAA2D;YAC3D,IAAI,IAAI,IAAI,gBAAgB,KAAK,IAAI,IAAI,eAAe,KAAK,IAAI;gBAAE,OAAO;YAE1E,eAAe,CAAC,gBAAgB,EAAE,eAAe,EAAE;gBAC/C,SAAS,EAAE,SAAS;gBACpB,QAAQ;gBACR,UAAU,EAAE;oBACR,QAAQ,EAAE,OAAO,IAAI,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;oBACrE,MAAM,CAAC,aAAa,CAAC;oBACrB,IAAI,EAAE;oBACN,IAAI,CAAC;wBACD,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmB;4BACtC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;gCACnC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS;6BAC7D,CAAC,CAAC;wBACP,CAAC;qBACJ,CAAC;iBACL;aACJ,CAAC,CAAC,IAAI,CAAC,CAAC,KAA4B,EAAE,EAAE;gBACrC,iBAAiB,CAAC,GAAG,EAAE,CAAC,CAAC;oBACrB,GAAG,EAAE,KAAK,CAAC,CAAC;oBACZ,IAAI,EAAE,KAAK,CAAC,CAAC;oBACb,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB,OAAO,EAAE,CAAC;oBACV,aAAa,EAAE,MAAM;oBACrB,OAAO,EAAE,SAAS;iBACrB,CAAC,CAAC,CAAC;gBAEJ,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE;oBACrB,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;wBACzB,GAAG,IAAI;wBACP,OAAO,EAAE,CAAC;wBACV,aAAa,EAAE,MAAM;wBACrB,OAAO,EAAE,SAAS;qBACrB,CAAC,CAAC,CAAC;gBACR,CAAC,EAAE,EAAE,CAAC,CAAC;gBAEP,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;YAC5C,CAAC,CAAC,CAAC;QACP,CAAC,EAAE,EAAE,CAAC,CAAC;IACX,CAAC,EAAE;QACC,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,eAAe;QACf,IAAI;QACJ,SAAS;QACT,QAAQ;QACR,QAAQ;QACR,aAAa;QACb,QAAQ;KACX,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,EAAE,CAAC;QAEV,OAAO,GAAG,EAAE;YACR,eAAe,CAAC,KAAK,EAAE,CAAC;YACxB,eAAe,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,gBAAgB,KAAK,IAAI,IAAI,eAAe,KAAK,IAAI;YAAE,OAAO;QAE1E,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACR,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvD,OAAO;QACH,QAAQ,EAAE;YACN,SAAS,EAAE,gBAAgB;YAC3B,QAAQ,EAAE,eAAe;YACzB,YAAY,EAAE,mBAAmB;YACjC,WAAW,EAAE,kBAAkB;SAClC;QACD,cAAc;QACd,cAAc;QACd,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS;KACtD,CAAC;AACN,CAAC;AAED,sDAAsD"}

package/dist/hooks/useSnackbarContext.d.ts

@@ -0,0 +1 @@
+export declare const useSnackbarContext: () => import("-/utils/snackbarContext").SnackbarContextProps;

package/dist/hooks/useSnackbarContext.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-console */
+import { useContext } from 'react';
+import { SnackbarContext } from '../utils/snackbarContext';
+export const useSnackbarContext = () => {
+    const context = useContext(SnackbarContext);
+    if (!context) {
+        console.error('useSnackbarContext must be used within a SnackbarProvider!');
+    }
+    return (context ?? {
+        snackbars: [],
+        sendSnackbar: () => console.error('sendSnackbar must be used within a SnackbarProvider!'),
+        clearSnackbar: () => console.error('clearSnackbar must be used within a SnackbarProvider!'),
+        clearAll: () => console.error('clearAll must be used within a SnackbarProvider!'),
+    });
+};
+//# sourceMappingURL=useSnackbarContext.js.map

package/dist/hooks/useSnackbarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarContext.js","sourceRoot":"","sources":["../../src/hooks/useSnackbarContext.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAChF,CAAC;IACD,OAAO,CACH,OAAO,IAAI;QACP,SAAS,EAAE,EAAE;QACb,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,sDAAsD,CAAC;QACzF,aAAa,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC;QAC3F,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC;KACpF,CACJ,CAAC;AACN,CAAC,CAAC"}

package/dist/hooks/useSwipe.d.ts

@@ -0,0 +1,6 @@
+import { TouchEventHandler } from 'react';
+export declare function useSwipe(onSwipeLeft: () => void, onSwipeRight: () => void): {
+    onTouchStart: TouchEventHandler;
+    onTouchMove: TouchEventHandler;
+    onTouchEnd: TouchEventHandler;
+};

package/dist/hooks/useSwipe.js

@@ -0,0 +1,28 @@
+import { useRef } from 'react';
+const MIN_SWIPE_DISTANCE = 50; // Minimum distance for a swipe to be recognized
+export function useSwipe(onSwipeLeft, onSwipeRight) {
+    const touchStart = useRef(null);
+    const touchEnd = useRef(null);
+    const onTouchStart = (e) => {
+        touchEnd.current = null;
+        touchStart.current = e.targetTouches[0].clientX;
+    };
+    const onTouchMove = (e) => {
+        touchEnd.current = e.targetTouches[0].clientX;
+    };
+    const onTouchEnd = () => {
+        if (!touchStart.current || !touchEnd.current)
+            return;
+        const distance = touchStart.current - touchEnd.current;
+        const isLeftSwipe = distance > MIN_SWIPE_DISTANCE;
+        const isRightSwipe = distance < -MIN_SWIPE_DISTANCE;
+        if (isLeftSwipe) {
+            onSwipeLeft();
+        }
+        else if (isRightSwipe) {
+            onSwipeRight();
+        }
+    };
+    return { onTouchStart, onTouchMove, onTouchEnd };
+}
+//# sourceMappingURL=useSwipe.js.map

package/dist/hooks/useSwipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwipe.js","sourceRoot":"","sources":["../../src/hooks/useSwipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,MAAM,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,kBAAkB,GAAG,EAAE,CAAC,CAAC,gDAAgD;AAE/E,MAAM,UAAU,QAAQ,CAAC,WAAuB,EAAE,YAAwB;IACtE,MAAM,UAAU,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAsB,CAAC,CAAC,EAAE,EAAE;QAC1C,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACpD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAsB,CAAC,CAAC,EAAE,EAAE;QACzC,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAsB,GAAG,EAAE;QACvC,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QACrD,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACvD,MAAM,WAAW,GAAG,QAAQ,GAAG,kBAAkB,CAAC;QAClD,MAAM,YAAY,GAAG,QAAQ,GAAG,CAAC,kBAAkB,CAAC;QAEpD,IAAI,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,CAAC;QAClB,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACtB,YAAY,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACrD,CAAC"}