@bspk/ui 1.0.0

package/Tooltip.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import { Placement } from './hooks/useFloating';
+export type TooltipProps = {
+    /**
+     * The placement of the tooltip.
+     *
+     * @default top
+     */
+    placement?: Placement;
+    /** The tooltip content. */
+    label: string;
+    /**
+     * A single element that will trigger the tooltip when hovered over.
+     *
+     * @type ReactElement
+     * @required
+     */
+    children: ReactElement;
+    /** Determines if the tooltip is disabled. */
+    disabled?: boolean;
+    /**
+     * Determines if the tooltip should hide the tail.
+     *
+     * @default true
+     */
+    tail?: boolean;
+};
+/**
+ * Brief message that provide additional guidance and helps users perform an action if needed.
+ *
+ * @name Tooltip
+ */
+declare function Tooltip({ placement, label, children, disabled, tail }: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Tooltip {
+    var bspkName: string;
+}
+export { Tooltip };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Tooltip.js

@@ -0,0 +1,104 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useId, useState, useMemo, cloneElement, useRef } from 'react';
+import { Portal } from './Portal.js';
+import { useFloating } from './hooks/useFloating.js';
+
+/**
+ * Brief message that provide additional guidance and helps users perform an action if needed.
+ *
+ * @name Tooltip
+ */
+function Tooltip({ placement = 'top', label, children, disabled = false, tail = true }) {
+    const id = useId();
+    const [show, setShow] = useState(false);
+    const child = useMemo(() => !disabled &&
+        children &&
+        cloneElement(children, {
+            onMouseOver: () => setShow(true),
+            onMouseLeave: () => setShow(false),
+            'aria-describedby': id,
+        }), [children, disabled, id]);
+    const arrowRef = useRef(null);
+    const { floatingStyles, middlewareData, elements } = useFloating({
+        placement: placement,
+        strategy: 'fixed',
+        offsetOptions: 8,
+        arrowRef,
+        hide: !show,
+    });
+    return disabled ? (children) : (jsxs(Fragment, { children: [child, label && (jsx(Portal, { children: jsxs("div", { css: style, "data-placement": middlewareData?.offset?.placement, "data-tooltip": "", id: id, ref: (node) => {
+                        elements.setFloating(node);
+                        elements.setTrigger(document.querySelector(`[aria-describedby="${id}"]`));
+                    }, role: "tooltip", style: floatingStyles, children: [jsx("span", { "data-text": true, children: label }), tail !== false && (jsx("span", { "aria-hidden": true, "data-arrow": true, ref: (node) => {
+                                arrowRef.current = node;
+                            }, style: {
+                                left: `${middlewareData?.arrow?.x}px`,
+                                top: `${middlewareData?.arrow?.y}px`,
+                            } }))] }) }))] }));
+}
+Tooltip.bspkName = 'Tooltip';
+const style = css `
+    position: fixed;
+    pointer-events: none;
+    z-index: var(--z-index-tooltip-popover);
+
+    [data-text] {
+        display: block;
+        z-index: 2;
+        position: relative;
+        background-color: var(--surface-neutral-inverse);
+        border-radius: var(--radius-small);
+        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;
+    }
+
+    --arrow-size: var(--spacing-sizing-01);
+    --arrow-offset: calc(var(--arrow-size) * -2);
+
+    [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 transparent transparent transparent;
+    }
+
+    &[data-placement^='bottom'] {
+        [data-arrow] {
+            top: var(--arrow-offset);
+            border-bottom-color: var(--surface-neutral-inverse);
+        }
+    }
+
+    &[data-placement^='top'] {
+        [data-arrow] {
+            border-top-color: var(--surface-neutral-inverse);
+        }
+    }
+
+    &[data-placement^='right'] {
+        [data-arrow] {
+            margin-left: var(--arrow-offset);
+            border-right-color: var(--surface-neutral-inverse);
+        }
+    }
+
+    &[data-placement^='left'] {
+        [data-arrow] {
+            right: var(--arrow-offset);
+            border-left-color: var(--surface-neutral-inverse);
+        }
+    }
+`;
+
+export { Tooltip, style };
+//# sourceMappingURL=Tooltip.js.map

package/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["src/Tooltip.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAgCA;;;;AAIG;AACH,SAAS,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,IAAI,EAAgB,EAAA;AAChG,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,KAAK,GAAG,OAAO,CACjB,MACI,CAAC,QAAQ;QACT,QAAQ;QACR,YAAY,CAAC,QAAQ,EAAE;AACnB,YAAA,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC;AAChC,YAAA,YAAY,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC;AAClC,YAAA,kBAAkB,EAAE,EAAE;SACzB,CAAC,EACN,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC3B,CAAC;AAEF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;AAC7D,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,aAAa,EAAE,CAAC;QAChB,QAAQ;QACR,IAAI,EAAE,CAAC,IAAI;AACd,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,QAAQ,IACX,QAAQ,KAERA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,KAAK,EACL,KAAK,KACFC,GAAA,CAAC,MAAM,EACH,EAAA,QAAA,EAAAF,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,KAAK,EACM,gBAAA,EAAA,cAAc,EAAE,MAAM,EAAE,SAAS,EACpC,cAAA,EAAA,EAAE,EACf,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,IAAI,KAAI;AACV,wBAAA,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AAC3B,wBAAA,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAc,CAAA,mBAAA,EAAsB,EAAE,CAAA,EAAA,CAAI,CAAC,CAAC,CAAC;qBAC1F,EACD,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,cAAc,EAErB,QAAA,EAAA,CAAAE,GAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAiB,KAAK,EAAA,CAAQ,EAC7B,IAAI,KAAK,KAAK,KACXA,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,YAAA,EAAA,IAAA,EAGI,GAAG,EAAE,CAAC,IAAI,KAAI;AACV,gCAAA,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;6BAC3B,EACD,KAAK,EAAE;AACH,gCAAA,IAAI,EAAE,CAAG,EAAA,cAAc,EAAE,KAAK,EAAE,CAAC,CAAI,EAAA,CAAA;AACrC,gCAAA,GAAG,EAAE,CAAG,EAAA,cAAc,EAAE,KAAK,EAAE,CAAC,CAAI,EAAA,CAAA;AACvC,6BAAA,EAAA,CACH,CACL,CACC,EAAA,CAAA,EAAA,CACD,CACZ,CAAA,EAAA,CACF,CACN,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAItB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/TopNavigation.d.ts

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

package/TopNavigation.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name TopNavigation
+ */
+function TopNavigation({ children }) {
+    return (jsx("div", { css: style, "data-top-navigation": true, children: children }));
+}
+TopNavigation.bspkName = 'TopNavigation';
+const style = css `
+    display: flex;
+`;
+
+export { TopNavigation, style };
+//# sourceMappingURL=TopNavigation.js.map

package/TopNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavigation.js","sources":["src/TopNavigation.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAOA;;;;AAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAsB,EAAA;IACnD,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,qBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAIlC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/Txt.d.ts

@@ -0,0 +1,38 @@
+import { ElementType } from 'react';
+import { TxtVariant } from './utils/txtVariants';
+import { ElementProps } from './';
+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;
+};
+/**
+ * A text component that applies the correct font styles based on the variant and size. variant
+ *
+ * @name Txt
+ */
+declare function Txt<As extends ElementType = 'span'>({ children, as, variant, style: styleProp, ...containerProps }: ElementProps<TxtProps<As>, As>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare namespace Txt {
+    var bspkName: string;
+}
+export { Txt };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Txt.js

@@ -0,0 +1,21 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * A text component that applies the correct font styles based on the variant and size. variant
+ *
+ * @name Txt
+ */
+function Txt({ children, as, variant = 'body-base', style: styleProp, ...containerProps }) {
+    const content = children?.toString();
+    if (!content)
+        return null;
+    const As = as || 'span';
+    return (jsx(As, { ...containerProps, css: css `
+                font: var(--${variant});
+            `, "data-txt": true, style: styleProp, children: content }));
+}
+Txt.bspkName = 'Txt';
+
+export { Txt };
+//# sourceMappingURL=Txt.js.map

package/Txt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt.js","sources":["src/Txt.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAgCA;;;;AAIG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,OAAO,GAAG,WAAW,EACrB,KAAK,EAAE,SAAS,EAChB,GAAG,cAAc,EACY,EAAA;AAC7B,IAAA,MAAM,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAErC,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI,CAAC;AAE1B,IAAA,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,QACIA,IAAC,EAAE,EAAA,EAAA,GACK,cAAc,EAClB,GAAG,EAAE,GAAG,CAAA,CAAA;8BACU,OAAO,CAAA;AACxB,YAAA,CAAA,EAAA,UAAA,EAAA,IAAA,EAED,KAAK,EAAE,SAAS,YAEf,OAAO,EAAA,CACP,EACP;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK;;;;"}

package/hooks/useCheckboxGroupState.d.ts

@@ -0,0 +1,37 @@
+import { CheckboxProps } from '../Checkbox';
+/**
+ * A hook to manage the state of a group of checkboxes. Used alongside the CheckboxGroup component.
+ *
+ * @example
+ *     import { Checkbox } from "@bspk/ui/Checkbox";
+ *     import { useCheckboxGroupState } from "@bspk/ui/hooks/useCheckboxGroupState";
+ *
+ *     export function Example() {
+ *     const allValues = ["Red", "Orange", "Yellow", "Green"];
+ *
+ *     const { allCheckboxProps, checkboxProps, values } = useCheckboxGroupState(allValues, "fruits");
+ *
+ *     return (
+ *     <>
+ *     <pre>Selected Values: {values.join(", ")}</pre>
+ *     <Checkbox aria-label="All" {...allCheckboxProps} />
+ *     {allValues.map((value) => (
+ *     <Checkbox key={value} aria-label={value} {...checkboxProps(value)} />
+ *     ))}
+ *     </>
+ *     );
+ *     }
+ *
+ * @param allValues - The values of the checkboxes.
+ * @param name - The name of the checkboxes.
+ * @param externalState - The externally managed state of the checkboxes.
+ * @returns Properties to pass to the checkbox, other helper functions, and the state of the checkbox.
+ */
+export declare function useCheckboxGroupState(allValues: string[], name: string, externalState?: [values: string[], setValues: (next: string[]) => void]): {
+    toggleValue: (itemValue: string, checked: boolean) => void;
+    allCheckboxProps: Pick<CheckboxProps, "onChange" | "name" | "value" | "checked" | "indeterminate">;
+    checkboxProps: (value: string) => Pick<CheckboxProps, "checked" | "name" | "onChange" | "value">;
+    values: string[];
+    setValues: (next: string[]) => void;
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/hooks/useCheckboxGroupState.js

@@ -0,0 +1,61 @@
+import { useState, useCallback, useMemo } from 'react';
+
+/**
+ * A hook to manage the state of a group of checkboxes. Used alongside the CheckboxGroup component.
+ *
+ * @example
+ *     import { Checkbox } from "@bspk/ui/Checkbox";
+ *     import { useCheckboxGroupState } from "@bspk/ui/hooks/useCheckboxGroupState";
+ *
+ *     export function Example() {
+ *     const allValues = ["Red", "Orange", "Yellow", "Green"];
+ *
+ *     const { allCheckboxProps, checkboxProps, values } = useCheckboxGroupState(allValues, "fruits");
+ *
+ *     return (
+ *     <>
+ *     <pre>Selected Values: {values.join(", ")}</pre>
+ *     <Checkbox aria-label="All" {...allCheckboxProps} />
+ *     {allValues.map((value) => (
+ *     <Checkbox key={value} aria-label={value} {...checkboxProps(value)} />
+ *     ))}
+ *     </>
+ *     );
+ *     }
+ *
+ * @param allValues - The values of the checkboxes.
+ * @param name - The name of the checkboxes.
+ * @param externalState - The externally managed state of the checkboxes.
+ * @returns Properties to pass to the checkbox, other helper functions, and the state of the checkbox.
+ */
+function useCheckboxGroupState(allValues, name, externalState) {
+    const localState = useState([]);
+    const [values, setValues] = externalState || localState;
+    const toggleValue = useCallback((itemValue, checked) => {
+        setValues(allValues.flatMap((value) => {
+            if (value === itemValue)
+                return checked ? value : [];
+            return values.includes(value) ? value : [];
+        }));
+    }, [allValues, setValues, values]);
+    const checkboxProps = useCallback((value) => ({
+        checked: values.includes(value),
+        name,
+        onChange: (checked) => toggleValue(value, checked),
+        value,
+    }), [values, name, toggleValue]);
+    const allCheckboxProps = useMemo(() => {
+        return {
+            checked: allValues.length === values.length,
+            indeterminate: values.length > 0 && values.length < allValues.length,
+            name,
+            onChange: () => setValues(allValues.length === values.length ? [] : allValues),
+            value: 'all',
+        };
+    }, [allValues, values.length, name, setValues]);
+    return { toggleValue, allCheckboxProps, checkboxProps, values, setValues };
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+export { useCheckboxGroupState };
+//# sourceMappingURL=useCheckboxGroupState.js.map

package/hooks/useCheckboxGroupState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckboxGroupState.js","sources":["../src/hooks/useCheckboxGroupState.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;SACa,qBAAqB,CACjC,SAAmB,EACnB,IAAY,EACZ,aAAuE,EAAA;AAEvE,IAAA,MAAM,UAAU,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,aAAa,IAAI,UAAU,CAAC;IAExD,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,SAAiB,EAAE,OAAgB,KAAI;QACpC,SAAS,CACL,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YACxB,IAAI,KAAK,KAAK,SAAS;gBAAE,OAAO,OAAO,GAAG,KAAK,GAAG,EAAE,CAAC;AACrD,YAAA,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;SAC9C,CAAC,CACL,CAAC;KACL,EACD,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CACjC,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAa,MAAsE;AAChF,QAAA,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC/B,IAAI;QACJ,QAAQ,EAAE,CAAC,OAAO,KAAK,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;QAClD,KAAK;KACR,CAAC,EACF,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,CAC9B,CAAC;AAEF,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAG7B;QACA,OAAO;AACH,YAAA,OAAO,EAAE,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;AAC3C,YAAA,aAAa,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM;YACpE,IAAI;YACJ,QAAQ,EAAE,MAAM,SAAS,CAAC,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,SAAS,CAAC;AAC9E,YAAA,KAAK,EAAE,KAAK;SACf,CAAC;AACN,KAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhD,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAC/E,CAAC;AAED;;;;"}

package/hooks/useCheckboxState.d.ts

@@ -0,0 +1,23 @@
+import { CheckboxProps } from '../Checkbox';
+/**
+ * A hook to manage the state of a single checkbox. Used alongside the Checkbox component.
+ *
+ * @example
+ *     import { Checkbox } from '@bspk/ui/Checkbox';
+ *     import { useCheckboxState } from '@bspk/ui/hooks/useCheckboxState';
+ *
+ *     export function Example() {
+ *     const { checkboxProps } = useCheckboxState('fruits');
+ *     return <Checkbox aria-label="cherry" {...checkboxProps('cherry')} />;
+ *     }
+ *
+ * @param name - The name of the checkbox.
+ * @param externalState - The externally managed state of the checkbox.
+ * @returns Properties to pass to the checkbox and the state of the checkbox.
+ */
+export declare function useCheckboxState(name: string, externalState?: [value: string[] | undefined, onChange: (next: string[]) => void]): {
+    checkboxProps: (value: string) => Pick<CheckboxProps, 'checked' | 'name' | 'onChange' | 'value'>;
+    value: string[] | undefined;
+    setValue: (next: string[]) => void;
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/hooks/useCheckboxState.js

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+/**
+ * A hook to manage the state of a single checkbox. Used alongside the Checkbox component.
+ *
+ * @example
+ *     import { Checkbox } from '@bspk/ui/Checkbox';
+ *     import { useCheckboxState } from '@bspk/ui/hooks/useCheckboxState';
+ *
+ *     export function Example() {
+ *     const { checkboxProps } = useCheckboxState('fruits');
+ *     return <Checkbox aria-label="cherry" {...checkboxProps('cherry')} />;
+ *     }
+ *
+ * @param name - The name of the checkbox.
+ * @param externalState - The externally managed state of the checkbox.
+ * @returns Properties to pass to the checkbox and the state of the checkbox.
+ */
+function useCheckboxState(name, externalState) {
+    const localState = useState();
+    const [value, setValue] = externalState || localState;
+    const checkboxProps = (checkboxValue) => {
+        return {
+            name,
+            checked: value?.includes(checkboxValue),
+            value: checkboxValue,
+            onChange: (checked) => {
+                const next = (value || []).filter((v) => v !== checkboxValue);
+                if (checked)
+                    next.push(checkboxValue);
+                setValue(next);
+            },
+        };
+    };
+    return { checkboxProps, value, setValue };
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+export { useCheckboxState };
+//# sourceMappingURL=useCheckboxState.js.map

package/hooks/useCheckboxState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckboxState.js","sources":["../src/hooks/useCheckboxState.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;AAeG;AACa,SAAA,gBAAgB,CAC5B,IAAY,EACZ,aAAiF,EAAA;AAMjF,IAAA,MAAM,UAAU,GAAG,QAAQ,EAAY,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,aAAa,IAAI,UAAU,CAAC;AAEtD,IAAA,MAAM,aAAa,GAAG,CAAC,aAAqB,KAAoE;QAC5G,OAAO;YACH,IAAI;AACJ,YAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC;AACvC,YAAA,KAAK,EAAE,aAAa;AACpB,YAAA,QAAQ,EAAE,CAAC,OAAO,KAAI;AAClB,gBAAA,MAAM,IAAI,GAAG,CAAC,KAAK,IAAI,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,aAAa,CAAC,CAAC;AAC9D,gBAAA,IAAI,OAAO;AAAE,oBAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACtC,QAAQ,CAAC,IAAI,CAAC,CAAC;aAClB;SACJ,CAAC;AACN,KAAC,CAAC;AAEF,IAAA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC9C,CAAC;AAED;;;;"}

package/hooks/useFloating.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Custom hook to manage the positioning of a floating element relative to a reference element.
+ *
+ * @template ReferenceType - The type of the reference element, extending HTMLElement.
+ * @param {Object} params - The parameters for the hook.
+ * @param {Placement} params.placement - The preferred placement of the floating element.
+ * @param {React.MutableRefObject<HTMLElement | null>} [params.arrowRef] - A ref object for the arrow element.
+ * @param {Strategy} [params.strategy] - The positioning strategy ('absolute' or 'fixed').
+ * @param {OffsetOptions} [params.offsetOptions=0] - The offset options for the floating element. Default is `0`
+ * @param {boolean} [params.refWidth] - Whether to match the width of the floating element to the reference element.
+ * @param {boolean} [params.hide=false] - Whether to hide the floating element. Default is `false`
+ */
+import { Placement, Strategy, MiddlewareData, OffsetOptions } from '@floating-ui/dom';
+export type { Placement, Strategy };
+/**
+ *
+ *
+ * @param param0
+ * @returns
+ */
+export declare function useFloating<TriggerElementType extends HTMLElement>({ placement, arrowRef, strategy, offsetOptions, refWidth, hide, }: {
+    placement: Placement;
+    arrowRef?: React.MutableRefObject<HTMLElement | null>;
+    strategy?: Strategy;
+    offsetOptions?: OffsetOptions;
+    refWidth?: boolean;
+    hide?: boolean;
+}): {
+    elements: {
+        trigger: TriggerElementType | null;
+        floating: HTMLElement | null;
+        setTrigger: import("react").Dispatch<import("react").SetStateAction<TriggerElementType | null>>;
+        setFloating: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    };
+    floatingStyles: import("react").CSSProperties;
+    middlewareData: MiddlewareData;
+};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/hooks/useFloating.js

@@ -0,0 +1,156 @@
+import { computePosition, arrow, offset, flip, size, autoUpdate } from '@floating-ui/dom';
+import { useState, useCallback, useEffect } from 'react';
+import { useTimeout } from './useTimeout.js';
+
+/**
+ * Custom hook to manage the positioning of a floating element relative to a reference element.
+ *
+ * @template ReferenceType - The type of the reference element, extending HTMLElement.
+ * @param {Object} params - The parameters for the hook.
+ * @param {Placement} params.placement - The preferred placement of the floating element.
+ * @param {React.MutableRefObject<HTMLElement | null>} [params.arrowRef] - A ref object for the arrow element.
+ * @param {Strategy} [params.strategy] - The positioning strategy ('absolute' or 'fixed').
+ * @param {OffsetOptions} [params.offsetOptions=0] - The offset options for the floating element. Default is `0`
+ * @param {boolean} [params.refWidth] - Whether to match the width of the floating element to the reference element.
+ * @param {boolean} [params.hide=false] - Whether to hide the floating element. Default is `false`
+ */
+const TRANSITION_DELAY = 250;
+/**
+ *
+ *
+ * @param param0
+ * @returns
+ */
+function useFloating({ placement, arrowRef, strategy, offsetOptions = 0, refWidth, hide = false, }) {
+    const [floatingStyles, setFloatingStylesState] = useState({
+        opacity: 0,
+        pointerEvents: 'none',
+        display: 'none',
+    });
+    const setFloatingStyles = (next) => {
+        setFloatingStylesState((prev) => ({
+            transition: `opacity ${TRANSITION_DELAY}ms`,
+            ...next(prev),
+        }));
+    };
+    const [middlewareData, setMiddlewareData] = useState({});
+    const [triggerElement, setTriggerElement] = useState(null);
+    const [floatingElement, setFloatingElement] = useState(null);
+    // const elements: {
+    //   trigger: HTMLElement | null;
+    //   floating: HTMLElement | null;
+    //   setReference: (node: TriggerElementType | null) => void;
+    //   setFloating: (node: HTMLElement | null) => void;
+    // } = {
+    //   trigger: triggerElement,
+    //   floating: floatingElement,
+    //   setReference: setTriggerElement,
+    //   setFloating: setFloatingElement,
+    // };
+    const computeDebounce = useTimeout();
+    const transitionDelay = useTimeout();
+    const compute = useCallback(() => {
+        computeDebounce.clear();
+        transitionDelay.clear();
+        // check if the reference or floating element is null
+        if (triggerElement === null || floatingElement === null)
+            return;
+        if (hide) {
+            if (floatingElement?.style.top)
+                setFloatingStyles((prev) => ({
+                    ...prev,
+                    display: undefined,
+                    opacity: 0,
+                    pointerEvents: 'none',
+                }));
+            transitionDelay.set(() => {
+                setFloatingStyles((prev) => ({
+                    ...prev,
+                    display: 'none',
+                }));
+            }, TRANSITION_DELAY);
+            return;
+        }
+        // debounce the computePosition call
+        computeDebounce.set(() => {
+            // check again if the reference or floating element is null
+            if (hide || triggerElement === null || floatingElement === null)
+                return;
+            computePosition(triggerElement, floatingElement, {
+                placement: placement,
+                strategy,
+                middleware: [
+                    arrowRef?.current && arrow({ element: arrowRef.current, padding: 8 }),
+                    offset(offsetOptions),
+                    flip(),
+                    refWidth &&
+                        size({
+                            apply({ rects, elements }) {
+                                Object.assign(elements.floating.style, {
+                                    width: `${rects.reference.width}px`,
+                                });
+                            },
+                        }),
+                ],
+            }).then((value) => {
+                setFloatingStyles(() => ({
+                    top: value.y,
+                    left: value.x,
+                    position: value.strategy,
+                    opacity: 0,
+                    pointerEvents: 'none',
+                    display: undefined,
+                }));
+                transitionDelay.set(() => {
+                    setFloatingStyles((prev) => ({
+                        ...prev,
+                        opacity: 1,
+                        pointerEvents: 'auto',
+                        display: undefined,
+                    }));
+                }, 10);
+                setMiddlewareData(value.middlewareData);
+            });
+        }, 10);
+    }, [
+        computeDebounce,
+        transitionDelay,
+        triggerElement,
+        floatingElement,
+        hide,
+        placement,
+        strategy,
+        arrowRef,
+        offsetOptions,
+        refWidth,
+    ]);
+    useEffect(() => {
+        compute();
+        return () => {
+            computeDebounce.clear();
+            transitionDelay.clear();
+        };
+    }, [compute, computeDebounce, hide, transitionDelay]);
+    useEffect(() => {
+        if (hide || triggerElement === null || floatingElement === null)
+            return;
+        const cleanup = autoUpdate(triggerElement, floatingElement, compute);
+        return () => {
+            cleanup();
+        };
+    }, [compute, hide, floatingElement, triggerElement]);
+    return {
+        elements: {
+            trigger: triggerElement,
+            floating: floatingElement,
+            setTrigger: setTriggerElement,
+            setFloating: setFloatingElement,
+        },
+        floatingStyles,
+        middlewareData,
+    };
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+export { useFloating };
+//# sourceMappingURL=useFloating.js.map

package/hooks/useFloating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloating.js","sources":["../src/hooks/useFloating.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}