@bspk/ui 1.1.32 → 1.1.34

package/dist/components/Tooltip/tooltip.css.js

@@ -0,0 +1,56 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=tooltip] {
+  position: fixed;
+  pointer-events: none;
+  z-index: var(--z-index-tooltip-popover);
+  width: max-content !important;
+  --arrow-size: var(--spacing-sizing-01);
+  --arrow-offset: calc(var(--arrow-size) * -2);
+  --arrow-color: var(--surface-neutral-inverse);
+}
+[data-bspk=tooltip] [data-text] {
+  display: block;
+  z-index: 2;
+  position: relative;
+  background-color: var(--surface-neutral-inverse);
+  border-radius: var(--radius-sm);
+  color: var(--foreground-neutral-on-inverse-surface);
+  box-shadow: var(--drop-shadow-float);
+  font: var(--labels-small);
+  padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
+  border: none;
+  transition: opacity 0.2s ease-in-out;
+  width: max-content;
+}
+[data-bspk=tooltip] [data-arrow] {
+  display: block;
+  z-index: 1;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
+  border-color: transparent;
+}
+[data-bspk=tooltip][data-placement=bottom] [data-arrow] {
+  top: var(--arrow-offset);
+  border-bottom-color: var(--arrow-color);
+}
+[data-bspk=tooltip][data-placement=top] [data-arrow] {
+  border-top-color: var(--arrow-color);
+}
+[data-bspk=tooltip][data-placement=right] [data-arrow] {
+  margin-left: var(--arrow-offset);
+  border-right-color: var(--arrow-color);
+}
+[data-bspk=tooltip][data-placement=left] [data-arrow] {
+  right: var(--arrow-offset);
+  border-left-color: var(--arrow-color);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/TopNavigation/TopNavigation.d.ts

@@ -0,0 +1,17 @@
+import './top-navigation.scss';
+export type TopNavigationProps = {
+    /** The content of the top navigation. */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name TopNavigation
+ * @phase Backlog
+ */
+declare function TopNavigation({ children }: TopNavigationProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TopNavigation {
+    var bspkName: string;
+}
+export { TopNavigation };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TopNavigation/TopNavigation.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './top-navigation.css.js';
+/**
+ * Component description coming soon.
+ *
+ * @name TopNavigation
+ * @phase Backlog
+ */
+function TopNavigation({ children }) {
+    return _jsx("div", { "data-bspk": "top-navigation", children: children });
+}
+TopNavigation.bspkName = 'TopNavigation';
+export { TopNavigation };
+//# sourceMappingURL=TopNavigation.js.map

package/dist/components/TopNavigation/TopNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavigation.js","sourceRoot":"","sources":["../../../src/components/TopNavigation/TopNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAO/B;;;;;GAKG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAsB;IACnD,OAAO,2BAAe,gBAAgB,YAAE,QAAQ,GAAO,CAAC;AAC5D,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/TopNavigation/index.d.ts

@@ -0,0 +1 @@
+export * from './TopNavigation';

package/dist/components/TopNavigation/index.js

@@ -0,0 +1,2 @@
+export * from './TopNavigation';
+//# sourceMappingURL=index.js.map

package/dist/components/TopNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TopNavigation/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/TopNavigation/top-navigation.css

@@ -0,0 +1,5 @@
+[data-bspk=top-navigation] {
+  display: flex;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TopNavigation/top-navigation.css.js

@@ -0,0 +1,11 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=top-navigation] {
+  display: flex;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/Truncated/Truncated.d.ts

@@ -0,0 +1,34 @@
+import { ElementType } from 'react';
+import { ElementConstructorProps } from '../../index.js';
+export type TruncatedProps<As extends ElementType = 'span'> = ElementConstructorProps<'span', 'children'> & {
+    /**
+     * The element type to render as.
+     *
+     * @default span
+     */
+    as?: As;
+    /**
+     * The content to render.
+     *
+     * @type string
+     * @required
+     */
+    children: string;
+    /**
+     * The label to display in the tooltip when the text is truncated.
+     *
+     * If not provided, the children will be used as the label.
+     */
+    label?: string;
+};
+/**
+ * A utility component that displays a tooltip with the full text when hovered when text is truncated.
+ *
+ * @name Truncated
+ * @phase WorkInProgress
+ */
+declare function Truncated({ children, label, ...props }: TruncatedProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Truncated {
+    var bspkName: string;
+}
+export { Truncated };

package/dist/components/Truncated/Truncated.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '../Tooltip';
+import { useTruncatedText } from '../../hooks/useTruncatedText';
+/**
+ * A utility component that displays a tooltip with the full text when hovered when text is truncated.
+ *
+ * @name Truncated
+ * @phase WorkInProgress
+ */
+function Truncated({ children, label, ...props }) {
+    const { setElement, isTruncated } = useTruncatedText();
+    const span = (_jsx("span", { ...props, "data-bspk": "truncated", ref: (node) => setElement(node), style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: children }));
+    return isTruncated ? _jsx(Tooltip, { label: label || children, children: span }) : span;
+}
+Truncated.bspkName = 'Truncated';
+export { Truncated };
+//# sourceMappingURL=Truncated.js.map

package/dist/components/Truncated/Truncated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncated.js","sourceRoot":"","sources":["../../../src/components/Truncated/Truncated.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAwB5D;;;;;GAKG;AACH,SAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAkB;IAC5D,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEvD,MAAM,IAAI,GAAG,CACT,kBACQ,KAAK,eACC,WAAW,EACrB,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAC/B,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,YAE5E,QAAQ,GACN,CACV,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,IAAI,QAAQ,YAAG,IAAI,GAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACpF,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Truncated/index.d.ts

@@ -0,0 +1 @@
+export * from './Truncated';

package/dist/components/Truncated/index.js

@@ -0,0 +1,2 @@
+export * from './Truncated';
+//# sourceMappingURL=index.js.map

package/dist/components/Truncated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Truncated/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/Txt/Txt.d.ts

@@ -0,0 +1,60 @@
+import { ElementType } from 'react';
+import { ElementProps } from '../../index.js';
+import { TxtVariant } from '../../utils/txtVariants';
+export type TxtProps<As extends ElementType = 'span'> = {
+    /**
+     * The element type to render as.
+     *
+     * @default span
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The content to render.
+     *
+     * @type string
+     * @required
+     */
+    children: unknown;
+    /**
+     * The variant to use.
+     *
+     * @default body-base
+     */
+    variant?: TxtVariant;
+    /** The id of the element. */
+    id?: string;
+    /**
+     * The number of lines to display for skeleton text.
+     *
+     * If not provided, it defaults to 0, meaning no skeleton lines will be shown.
+     *
+     * @default 0
+     */
+    skeletonLines?: number;
+    /**
+     * Inherit style and not set font style.
+     *
+     * @default false
+     */
+    inherit?: boolean;
+};
+/**
+ * A text component that applies the correct font styles based on the variant and size. variant
+ *
+ * @example
+ *     import { Txt } from '@bspk/ui/Txt';
+ *
+ *     export function Example() {
+ *         return <Txt>Example Txt</Txt>;
+ *     }
+ *
+ * @name Txt
+ * @phase DesignReview
+ */
+declare function Txt<As extends ElementType = 'span'>({ children, as, variant, style: styleProp, skeletonLines, inherit, ...containerProps }: ElementProps<TxtProps<As>, As>): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Txt {
+    var bspkName: string;
+}
+export { Txt };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Txt/Txt.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SkeletonText } from '../SkeletonText';
+/**
+ * A text component that applies the correct font styles based on the variant and size. variant
+ *
+ * @example
+ *     import { Txt } from '@bspk/ui/Txt';
+ *
+ *     export function Example() {
+ *         return <Txt>Example Txt</Txt>;
+ *     }
+ *
+ * @name Txt
+ * @phase DesignReview
+ */
+function Txt({ children, as, variant = 'body-base', style: styleProp, skeletonLines = 0, inherit, ...containerProps }) {
+    const content = children?.toString();
+    if (!content)
+        return skeletonLines ? _jsx(SkeletonText, { lines: skeletonLines, variant: variant }) : null;
+    const As = as || 'span';
+    return (_jsx(As, { ...containerProps, "data-bspk": "txt", style: {
+            ...styleProp,
+            font: inherit ? undefined : `var(--${variant})`,
+        }, children: content }));
+}
+Txt.bspkName = 'Txt';
+export { Txt };
+//# sourceMappingURL=Txt.js.map

package/dist/components/Txt/Txt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt.js","sourceRoot":"","sources":["../../../src/components/Txt/Txt.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AA0CzD;;;;;;;;;;;;GAYG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,OAAO,GAAG,WAAW,EACrB,KAAK,EAAE,SAAS,EAChB,aAAa,GAAG,CAAC,EACjB,OAAO,EACP,GAAG,cAAc,EACY;IAC7B,MAAM,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO;QAAE,OAAO,aAAa,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAErG,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,KAAC,EAAE,OACK,cAAc,eACR,KAAK,EACf,KAAK,EAAE;YACH,GAAG,SAAS;YACZ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG;SAClD,YAEA,OAAO,GACP,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/Txt/index.d.ts

@@ -0,0 +1 @@
+export * from './Txt';

package/dist/components/Txt/index.js

@@ -0,0 +1,2 @@
+export * from './Txt';
+//# sourceMappingURL=index.js.map

package/dist/components/Txt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Txt/index.tsx"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type UIProviderProps = {
+    children: ReactNode;
+};
+/**
+ * UIProvider is a React context provider that manages the UI state, including theme and responsive state.
+ *
+ * @name UIProvider
+ */
+declare function UIProvider({ children }: UIProviderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace UIProvider {
+    var bspkName: string;
+}
+export { UIProvider };

package/dist/components/UIProvider/UIProvider.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+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.
+ *
+ * @name UIProvider
+ */
+function UIProvider({ children }) {
+    const [theme, setTheme] = useState('light');
+    const [deviceWidth, setDeviceWidth] = useDebounceState(() => {
+        return typeof window !== 'undefined' ? window.innerWidth : 0;
+    }, 250);
+    useIsomorphicEffect(() => {
+        document.documentElement.dataset.theme = theme;
+        document.documentElement.style.setProperty('--scrollbar-width', `${window.innerWidth - document.documentElement.clientWidth}px`);
+    }, [theme]);
+    useEventListener('resize', () => setDeviceWidth(window.innerWidth));
+    return (_jsx(UIContext.Provider, { value: {
+            theme,
+            setTheme,
+            isMobile: deviceWidth < 640,
+            isTablet: deviceWidth > 640 && deviceWidth < 1024,
+            isDesktop: deviceWidth >= 1024,
+        }, children: children }));
+}
+UIProvider.bspkName = 'UIProvider';
+export { UIProvider };
+//# sourceMappingURL=UIProvider.js.map

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

@@ -0,0 +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,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAmB;IAC7C,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,IACf,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;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1 @@
+export * from './UIProvider';

package/dist/components/UIProvider/index.js

@@ -0,0 +1,2 @@
+export * from './UIProvider';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UIProvider/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/hooks/useAddEventListener.d.ts

@@ -0,0 +1 @@
+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;

package/dist/hooks/useAddEventListener.js

@@ -0,0 +1,27 @@
+import { useRef } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
+export function useEventListener(eventName, handler, element, disabled, options) {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+    useIsomorphicEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useIsomorphicEffect(() => {
+        if (disabled)
+            return;
+        // Define the listening target
+        const targetElement = element ?? window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = (event) => {
+            savedHandler.current(event);
+        };
+        targetElement.addEventListener(eventName, listener, options);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener, options);
+        };
+    }, [eventName, element, options]);
+}
+//# sourceMappingURL=useAddEventListener.js.map

package/dist/hooks/useAddEventListener.js.map

@@ -0,0 +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"}

package/dist/hooks/useCheckboxGroupState.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxProps } from '../Checkbox';
+import { CheckboxProps } from '../components/Checkbox';
 /**
  * A hook to manage the state of a group of checkboxes. Used alongside the CheckboxGroup component.
  *

package/dist/hooks/useCheckboxState.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxProps } from '../Checkbox';
+import { CheckboxProps } from '../components/Checkbox';
 /**
  * A hook to manage the state of a single checkbox. Used alongside the Checkbox component.
  *

package/dist/hooks/useCombobox.d.ts

@@ -1,45 +1,55 @@
 import { AriaAttributes } from 'react';
 import { CommonProps, InvalidPropsLibrary } from '..';
-import { UseFloatingProps } from './useFloating';
-export type UseComboboxProps = CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary & Pick<UseFloatingProps, 'offsetOptions' | 'placement' | 'refWidth'>;
+import { UseFloatingElements, UseFloatingProps } from './useFloating';
+export type UseComboboxProps = CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary & Pick<UseFloatingProps, 'offsetOptions' | 'placement' | 'refWidth'> & {
+    /**
+     * The element to use for outside click detection.
+     *
+     * If set to true, it will use the floating, and reference elements.
+     *
+     * If set to HTMLElements, it will use those element for outside click detection.
+     *
+     * If set to false, it will not use outside click detection.
+     */
+    refOutsideClick?: HTMLElement[] | boolean;
+};
+export type ComboboxContext = ReturnType<typeof useCombobox>;
+export type ToggleProps = {
+    'aria-errormessage'?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-controls': string;
+    'aria-disabled'?: boolean | undefined;
+    'aria-expanded': boolean;
+    'aria-haspopup': AriaAttributes['aria-haspopup'];
+    'aria-invalid'?: boolean | undefined;
+    'aria-owns': string;
+    'aria-readonly'?: boolean | undefined;
+    role: 'combobox';
+    tabIndex: number;
+    onClick: () => void;
+    onKeyDownCapture: (event: React.KeyboardEvent) => boolean;
+};
 /**
  * Utility hook to manage a combobox component.
  *
  * It provides functionality for showing/hiding the menu, handling keyboard navigation, and managing ARIA attributes.
  *
  * @param {UseComboboxProps} props - The properties to configure the combobox.
- * @returns {object} An object containing props for the menu and toggle elements, and a function to close the menu.
+ * @returns An object containing props for the menu and toggle elements, and a function to close the menu.
  */
 export declare function useCombobox({ placement, refWidth, disabled, errorMessage, invalid, readOnly, offsetOptions, }: UseComboboxProps): {
+    activeIndex: number;
     menuProps: {
-        activeIndex: number;
-        'data-placement': import("@floating-ui/utils").Placement | undefined;
+        'data-placement': string | undefined;
         id: string;
-        innerRef: (node: HTMLElement | null) => void;
-        role: string;
-        style: import("react").CSSProperties;
-        tabIndex: number;
-    };
-    toggleProps: {
-        'aria-errormessage': string | undefined;
-        'aria-activedescendant': string | undefined;
-        'aria-controls': string;
-        'aria-disabled': true | undefined;
-        'aria-expanded': boolean;
-        'aria-haspopup': AriaAttributes["aria-haspopup"];
-        'aria-invalid': true | undefined;
-        'aria-owns': string;
-        'aria-readonly': true | undefined;
-        role: string;
-        tabIndex: number;
-        ref: (node: HTMLElement | null) => void;
-        onClick: () => void;
-        /**
-         * @param {React.KeyboardEvent} event
-         * @returns {boolean} True if event was handled internally
-         */
-        onKeyDownCapture: (event: React.KeyboardEvent) => boolean;
+        role: 'listbox';
+        style: React.CSSProperties;
+        tabIndex: -1;
+        onOutsideClick: () => void;
     };
+    toggleProps: ToggleProps;
     closeMenu: () => void;
+    isOpen: boolean;
+    elements: UseFloatingElements;
 };
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useCombobox.js

@@ -1,21 +1,65 @@
 import { useId, useState } from 'react';
 import { EVENT_KEY } from '../utils/keyboard';
+import { scrollElementIntoView } from '../utils/scrollElementIntoView';
 import { useFloating } from './useFloating';
-import { useKeyboardNavigation } from './useKeyboardNavigation';
-import { useOutsideClick } from './useOutsideClick';
+function useKeyDownNavigation(containerElement, setShow, disabled) {
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const itemElements = Array.from(containerElement?.children || []);
+    const selectedId = itemElements[activeIndex]?.id;
+    const onKeyDownCapture = (event) => {
+        if (disabled)
+            return false;
+        if (event.key === EVENT_KEY.Tab || event.key === EVENT_KEY.Escape) {
+            setShow(false);
+            return true;
+        }
+        if (event.key !== EVENT_KEY.Enter && !event.key.startsWith('Arrow'))
+            return false;
+        if (event.key.startsWith('Arrow') && !containerElement) {
+            event.preventDefault();
+            setShow(true);
+            setActiveIndex(0);
+            return true;
+        }
+        if (!containerElement?.children.length)
+            return false;
+        event.preventDefault();
+        if (event.key === EVENT_KEY.Enter && activeIndex !== -1) {
+            itemElements[activeIndex].click();
+            return true;
+        }
+        let next = 0;
+        if (event.key === EVENT_KEY.ArrowUp || event.key === EVENT_KEY.ArrowLeft)
+            next = activeIndex - 1;
+        if (event.key === EVENT_KEY.ArrowDown || event.key === EVENT_KEY.ArrowRight)
+            next = activeIndex + 1;
+        if (next < 0)
+            next = itemElements.length - 1;
+        if (next >= itemElements.length)
+            next = 0;
+        itemElements.forEach((el, index) => {
+            if (index === next)
+                el.setAttribute('data-selected', 'true');
+            else
+                el.removeAttribute('data-selected');
+        });
+        scrollElementIntoView(itemElements[next], containerElement);
+        setActiveIndex(next);
+        return true;
+    };
+    return { onKeyDownCapture, selectedId, activeIndex };
+}
 /**
  * Utility hook to manage a combobox component.
  *
  * It provides functionality for showing/hiding the menu, handling keyboard navigation, and managing ARIA attributes.
  *
  * @param {UseComboboxProps} props - The properties to configure the combobox.
- * @returns {object} An object containing props for the menu and toggle elements, and a function to close the menu.
+ * @returns An object containing props for the menu and toggle elements, and a function to close the menu.
  */
 export function useCombobox({ placement = 'bottom', refWidth = true, disabled, errorMessage, invalid, readOnly, offsetOptions, }) {
     const menuId = useId();
     const [show, setShow] = useState(false);
-    const closeMenu = () => setShow(false);
-    const openMenu = () => setShow(true);
     const { floatingStyles, middlewareData, elements } = useFloating({
         placement,
         strategy: 'fixed',
@@ -23,24 +67,16 @@ export function useCombobox({ placement = 'bottom', refWidth = true, disabled, e
         refWidth,
         hide: !show,
     });
-    const { handleKeyNavigation, selectedIndex: activeIndex, selectedId } = useKeyboardNavigation(elements.floating);
-    useOutsideClick([elements.floating, elements.trigger], (event) => {
-        event?.stopPropagation();
-        if (!show)
-            return;
-        closeMenu();
-    });
+    const { onKeyDownCapture, activeIndex, selectedId } = useKeyDownNavigation(elements.floating, setShow, disabled || readOnly);
     return {
+        activeIndex,
         menuProps: {
-            activeIndex,
             'data-placement': middlewareData?.offset?.placement,
             id: menuId,
-            innerRef: (node) => {
-                elements.setFloating(node);
-            },
             role: 'listbox',
             style: floatingStyles,
             tabIndex: -1,
+            onOutsideClick: () => setShow(false),
         },
         toggleProps: {
             'aria-errormessage': errorMessage || undefined,
@@ -54,24 +90,14 @@ export function useCombobox({ placement = 'bottom', refWidth = true, disabled, e
             'aria-readonly': readOnly || undefined,
             role: 'combobox',
             tabIndex: 0,
-            ref: (node) => elements.setTrigger(node),
             onClick: () => {
                 setShow((prev) => !prev);
             },
-            /**
-             * @param {React.KeyboardEvent} event
-             * @returns {boolean} True if event was handled internally
-             */
-            onKeyDownCapture: (event) => {
-                if (event.key === EVENT_KEY.Tab || event.key === EVENT_KEY.Escape) {
-                    closeMenu();
-                    return true;
-                }
-                openMenu();
-                return handleKeyNavigation?.(event.nativeEvent);
-            },
+            onKeyDownCapture,
         },
-        closeMenu,
+        closeMenu: () => setShow(false),
+        isOpen: show,
+        elements,
     };
 }
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */