@bspk/ui 1.1.27 → 1.1.28

package/src/base.scss

@@ -26,27 +26,40 @@ html:has(body[data-bspk]) {
     scroll-behavior: smooth;
 }
 
-body[data-bspk] {
+:root {
     --z-index-tooltip-popover: 1100;
     --z-index-dialog: 1000;
     --z-index-dropdown: 900;
     --z-index-fab: 800;
     --z-index-navbar: 700;
     --z-index-footer: 600;
+}
 
-    height: 100%;
-    scroll-behavior: smooth;
-
-    @media (prefers-reduced-motion) {
-        [data-animated] {
-            animation: none !important;
-        }
+@media (prefers-reduced-motion) {
+    [data-animated] {
+        animation: none !important;
     }
+}
 
+body[data-bspk] {
+    height: 100%;
+    scroll-behavior: smooth;
     font: var(--body-base);
     background-color: var(--background-base);
     color: var(--foreground-neutral-on-surface);
 
+    /** Remove default input autofill styles */
+    input:-internal-autofill-previewed,
+    input:-internal-autofill-selected,
+    textarea:-internal-autofill-previewed,
+    textarea:-internal-autofill-selected,
+    select:-internal-autofill-previewed,
+    select:-internal-autofill-selected {
+        transition:
+            color calc(infinity * 1s) step-end,
+            background-color calc(infinity * 1s) step-end;
+    }
+
     a {
         color: var(--foreground-link-text-default);
 
@@ -178,73 +191,43 @@ body[data-bspk] {
             color: var(--foreground-neutral-inverse-on-surface) !important;
         }
     }
+}
 
-    /** Remove default input autofill styles */
-    input:-internal-autofill-previewed,
-    input:-internal-autofill-selected,
-    textarea:-internal-autofill-previewed,
-    textarea:-internal-autofill-selected,
-    select:-internal-autofill-previewed,
-    select:-internal-autofill-selected {
-        transition:
-            color calc(infinity * 1s) step-end,
-            background-color calc(infinity * 1s) step-end;
-    }
-
-    [data-sr-only] {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-    }
-
-    ol {
-        list-style-type: decimal;
-
-        li {
-            list-style-type: decimal;
-            margin-left: var(--spacing-sizing-05);
-        }
-    }
+[data-touch-target] {
+    display: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    top: auto;
+    left: auto;
+}
 
-    ul {
-        list-style-type: disc;
+[data-sr-only] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
 
-        li {
-            list-style-type: disc;
-            margin-left: var(--spacing-sizing-05);
-        }
-    }
+[data-touch-target] ~ * {
+    position: relative;
+    z-index: 2;
+}
 
+/* if touchscreen */
+@media (any-pointer: coarse) {
     [data-touch-target] {
-        display: none;
-        touch-action: manipulation;
-        -webkit-tap-highlight-color: transparent;
-        -webkit-touch-callout: none;
-        user-select: none;
-        position: absolute;
-        z-index: 1;
-        height: 100%;
-        width: 100%;
-        top: auto;
-        left: auto;
-    }
-
-    [data-touch-target] ~ * {
-        position: relative;
-        z-index: 2;
-    }
-
-    /* if touchscreen */
-    @media (any-pointer: coarse) {
-        [data-touch-target] {
-            display: block;
-        }
+        display: block;
     }
 }
 

package/src/demo/ExamplePlaceholder.tsx

@@ -12,7 +12,12 @@ export function ExamplePlaceholder({
     direction = 'row',
     ...props
 }: ElementProps<
-    { hideSize?: boolean; height?: number | string; width?: number | string; direction?: 'column' | 'row' },
+    {
+        hideSize?: boolean;
+        height?: number | string;
+        width?: number | string;
+        direction?: 'column' | 'row';
+    },
     'div'
 >) {
     const ref = useRef<HTMLDivElement | null>(null);

package/src/demo/examples.tsx

@@ -146,7 +146,9 @@ export type Preset<P> = {
     isDefault?: boolean;
 };
 
-export type DemoPreset<P = Record<string, unknown>> = Preset<P> & { value: string };
+export type DemoPreset<P = Record<string, unknown>> = Preset<P> & {
+    value: string;
+};
 
 export function createUid(prefix: string = 'uid'): string {
     return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
@@ -322,11 +324,28 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 },
                 {
                     label: 'Trailing Tags',
-                    state: asProps<SelectProps<SelectOption & { tag?: string; tagColor?: ColorVariant }>>({
+                    state: asProps<
+                        SelectProps<
+                            SelectOption & {
+                                tag?: string;
+                                tagColor?: ColorVariant;
+                            }
+                        >
+                    >({
                         options: [
                             //
-                            { value: 'a', label: 'Package A', tag: 'Recommended', tagColor: 'blue' },
-                            { value: 'b', label: 'Package B', tag: 'Best Value', tagColor: 'green' },
+                            {
+                                value: 'a',
+                                label: 'Package A',
+                                tag: 'Recommended',
+                                tagColor: 'blue',
+                            },
+                            {
+                                value: 'b',
+                                label: 'Package B',
+                                tag: 'Best Value',
+                                tagColor: 'green',
+                            },
                             { value: 'c', label: 'Package C' },
                             { value: 'd', label: 'Package D' },
                         ],
@@ -380,9 +399,21 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                                 label: 'Jessica P.',
                                 profile: { name: 'Jessica P.' },
                             },
-                            { value: 'Louis', label: 'Louis L.', profile: { name: 'Louis L.' } },
-                            { value: 'Harvey', label: 'Harvey S.', profile: { name: 'Harvey S.' } },
-                            { value: 'Mike', label: 'Mike R.', profile: { name: 'Mike R.' } },
+                            {
+                                value: 'Louis',
+                                label: 'Louis L.',
+                                profile: { name: 'Louis L.' },
+                            },
+                            {
+                                value: 'Harvey',
+                                label: 'Harvey S.',
+                                profile: { name: 'Harvey S.' },
+                            },
+                            {
+                                value: 'Mike',
+                                label: 'Mike R.',
+                                profile: { name: 'Mike R.' },
+                            },
                         ],
                         renderListItem: (props) => {
                             return {
@@ -479,7 +510,12 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
         presets: setPresets<PopoverProps>([
             {
                 label: 'With CallToAction',
-                state: { callToAction: { label: 'Click me', onClick: () => action('Call to action clicked!') } },
+                state: {
+                    callToAction: {
+                        label: 'Click me',
+                        onClick: () => action('Call to action clicked!'),
+                    },
+                },
             },
         ]),
     },
@@ -568,9 +604,24 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 label: 'With icons',
                 state: {
                     options: [
-                        { value: '1', label: 'Option 1', icon: <SvgDiamond />, iconActive: <SvgDiamondFill /> },
-                        { value: '2', label: 'Disabled 2', disabled: true, icon: <SvgCircle /> },
-                        { value: '3', label: 'Option 3', icon: <SvgSquare />, iconActive: <SvgSquareFill /> },
+                        {
+                            value: '1',
+                            label: 'Option 1',
+                            icon: <SvgDiamond />,
+                            iconActive: <SvgDiamondFill />,
+                        },
+                        {
+                            value: '2',
+                            label: 'Disabled 2',
+                            disabled: true,
+                            icon: <SvgCircle />,
+                        },
+                        {
+                            value: '3',
+                            label: 'Option 3',
+                            icon: <SvgSquare />,
+                            iconActive: <SvgSquareFill />,
+                        },
                     ],
                 },
             },
@@ -641,9 +692,24 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                 label: 'With icons',
                 state: {
                     options: [
-                        { value: '1', label: 'Option 1', icon: <SvgDiamond />, iconActive: <SvgDiamondFill /> },
-                        { value: '2', label: 'Disabled 2', disabled: true, icon: <SvgCircle /> },
-                        { value: '3', label: 'Option 3', icon: <SvgSquare />, iconActive: <SvgSquareFill /> },
+                        {
+                            value: '1',
+                            label: 'Option 1',
+                            icon: <SvgDiamond />,
+                            iconActive: <SvgDiamondFill />,
+                        },
+                        {
+                            value: '2',
+                            label: 'Disabled 2',
+                            disabled: true,
+                            icon: <SvgCircle />,
+                        },
+                        {
+                            value: '3',
+                            label: 'Option 3',
+                            icon: <SvgSquare />,
+                            iconActive: <SvgSquareFill />,
+                        },
                     ],
                 },
             },
@@ -658,8 +724,20 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
                             iconActive: <SvgDiamondFill />,
                             badge: 1,
                         },
-                        { value: '2', label: 'Disabled 2', disabled: true, icon: <SvgCircle />, badge: 2 },
-                        { value: '3', label: 'Option 3', icon: <SvgSquare />, iconActive: <SvgSquare />, badge: 3 },
+                        {
+                            value: '2',
+                            label: 'Disabled 2',
+                            disabled: true,
+                            icon: <SvgCircle />,
+                            badge: 2,
+                        },
+                        {
+                            value: '3',
+                            label: 'Option 3',
+                            icon: <SvgSquare />,
+                            iconActive: <SvgSquare />,
+                            badge: 3,
+                        },
                     ],
                 },
             },

package/src/hooks/{useFloatingMenu.ts → useCombobox.ts}

@@ -3,44 +3,31 @@ import { AriaAttributes, useId, useState } from 'react';
 import { CommonProps, InvalidPropsLibrary } from '..';
 import { EVENT_KEY } from '../utils/keyboard';
 
-import { Placement, useFloating } from './useFloating';
+import { useFloating, UseFloatingProps } from './useFloating';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { useOutsideClick } from './useOutsideClick';
 
-export type UseFloatingMenuProps = {
-    placement: Placement;
-    triggerProps?: CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary;
-};
+export type UseComboboxProps = CommonProps<'disabled' | 'readOnly'> &
+    InvalidPropsLibrary &
+    Pick<UseFloatingProps, 'offsetOptions' | 'placement' | 'refWidth'>;
 
-export type UseFloatingMenuReturn = {
-    menuProps: {
-        activeIndex: number;
-        'data-placement': Placement | undefined;
-        id: string;
-        innerRef: (node: HTMLElement | null) => void;
-        role: 'listbox';
-        style: React.CSSProperties;
-        tabIndex: number;
-    };
-    triggerProps: {
-        'aria-activedescendant': string | undefined;
-        'aria-controls': string;
-        'aria-expanded': boolean;
-        'aria-haspopup': AriaAttributes['aria-haspopup'];
-        'aria-invalid': boolean | undefined;
-        'aria-owns': string;
-        'aria-readonly': boolean | undefined;
-        'aria-errormessage': string | undefined;
-        role: 'combobox';
-        tabIndex: number;
-        ref: (node: HTMLElement | null) => void;
-        onClick: (event: React.MouseEvent) => void;
-        onKeyDownCapture: (event: React.KeyboardEvent) => boolean;
-    };
-    closeMenu: () => void;
-};
-
-export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProps): UseFloatingMenuReturn {
+/**
+ * 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.
+ */
+export function useCombobox({
+    placement = 'bottom',
+    refWidth = true,
+    disabled,
+    errorMessage,
+    invalid,
+    readOnly,
+    offsetOptions,
+}: UseComboboxProps) {
     const menuId = useId();
 
     const [show, setShow] = useState(false);
@@ -50,8 +37,8 @@ export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProp
     const { floatingStyles, middlewareData, elements } = useFloating({
         placement,
         strategy: 'fixed',
-        offsetOptions: 4,
-        refWidth: true,
+        offsetOptions,
+        refWidth,
         hide: !show,
     });
 
@@ -75,15 +62,16 @@ export function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProp
             style: floatingStyles,
             tabIndex: -1,
         },
-        triggerProps: {
-            'aria-errormessage': triggerProps?.errorMessage || undefined,
+        toggleProps: {
+            'aria-errormessage': errorMessage || undefined,
             'aria-activedescendant': selectedId || undefined,
             'aria-controls': menuId,
+            'aria-disabled': disabled || undefined,
             'aria-expanded': show,
             'aria-haspopup': 'listbox' as AriaAttributes['aria-haspopup'],
-            'aria-invalid': triggerProps?.invalid || undefined,
+            'aria-invalid': invalid || undefined,
             'aria-owns': menuId,
-            'aria-readonly': triggerProps?.readOnly || undefined,
+            'aria-readonly': readOnly || undefined,
             role: 'combobox',
             tabIndex: 0,
             ref: (node: HTMLElement | null) => elements.setTrigger(node),

package/src/hooks/useFloating.ts

@@ -32,6 +32,45 @@ export type { Placement, Strategy };
 
 const TRANSITION_DELAY = 250;
 
+export type UseFloatingProps = {
+    /**
+     * The preferred placement of the floating element.
+     *
+     * This determines where the floating element will be positioned relative to the reference element.
+     *
+     * @default bottom
+     */
+    placement: Placement;
+    /** A ref object for the arrow element. */
+    arrowRef?: React.MutableRefObject<HTMLElement | null>;
+    /**
+     * The positioning strategy ('absolute' or 'fixed').
+     *
+     * When set to 'fixed', the floating element will be positioned relative to the viewport.
+     *
+     * When set to 'absolute', the floating element will be positioned relative to the nearest positioned ancestor.
+     *
+     * @default fixed
+     */
+    strategy?: Strategy;
+    /**
+     * The offset options for the floating element.
+     *
+     * @default 0
+     */
+    offsetOptions?: OffsetOptions;
+    /**
+     * When set to true, the width of the floating element will match the width of the reference element.
+     *
+     * When set to an HTMLElement, the width of the floating element will match the width of that HTMLElement.
+     *
+     * @default true
+     */
+    refWidth?: HTMLElement | boolean;
+    /** Whether to hide the floating element. */
+    hide?: boolean;
+};
+
 /**
  *
  *
@@ -39,20 +78,13 @@ const TRANSITION_DELAY = 250;
  * @returns
  */
 export function useFloating<TriggerElementType extends HTMLElement>({
-    placement,
+    placement = 'bottom',
     arrowRef,
-    strategy,
+    strategy = 'fixed',
     offsetOptions = 0,
-    refWidth,
+    refWidth = true,
     hide = false,
-}: {
-    placement: Placement;
-    arrowRef?: React.MutableRefObject<HTMLElement | null>;
-    strategy?: Strategy;
-    offsetOptions?: OffsetOptions;
-    refWidth?: boolean;
-    hide?: boolean;
-}) {
+}: UseFloatingProps) {
     const [floatingStyles, setFloatingStylesState] = useState<React.CSSProperties>({
         opacity: 0,
         pointerEvents: 'none',
@@ -72,18 +104,6 @@ export function useFloating<TriggerElementType extends HTMLElement>({
 
     const [floatingElement, setFloatingElement] = useState<HTMLElement | null>(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();
 
@@ -129,7 +149,8 @@ export function useFloating<TriggerElementType extends HTMLElement>({
                         size({
                             apply({ rects, elements }: MiddlewareState) {
                                 Object.assign(elements.floating.style, {
-                                    width: `${rects.reference.width}px`,
+                                    width:
+                                        refWidth === true ? `${rects.reference.width}px` : `${refWidth.offsetWidth}px`,
                                 });
                             },
                         }),

package/src/index.ts

@@ -1,7 +1,9 @@
 /**
  * There are no barrel files for this repository.
  *
- * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
+ * Components should be imported directly like "import { Txt } from
+ *
+ * @bspk/ui/Txt".
  */
 
 import { ComponentProps, JSXElementConstructor, ReactNode } from 'react';

package/dist/hooks/useFloatingMenu.d.ts

@@ -1,36 +0,0 @@
-import { AriaAttributes } from 'react';
-import { CommonProps, InvalidPropsLibrary } from '..';
-import { Placement } from './useFloating';
-export type UseFloatingMenuProps = {
-    placement: Placement;
-    triggerProps?: CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary;
-};
-export type UseFloatingMenuReturn = {
-    menuProps: {
-        activeIndex: number;
-        'data-placement': Placement | undefined;
-        id: string;
-        innerRef: (node: HTMLElement | null) => void;
-        role: 'listbox';
-        style: React.CSSProperties;
-        tabIndex: number;
-    };
-    triggerProps: {
-        'aria-activedescendant': string | undefined;
-        'aria-controls': string;
-        'aria-expanded': boolean;
-        'aria-haspopup': AriaAttributes['aria-haspopup'];
-        'aria-invalid': boolean | undefined;
-        'aria-owns': string;
-        'aria-readonly': boolean | undefined;
-        'aria-errormessage': string | undefined;
-        role: 'combobox';
-        tabIndex: number;
-        ref: (node: HTMLElement | null) => void;
-        onClick: (event: React.MouseEvent) => void;
-        onKeyDownCapture: (event: React.KeyboardEvent) => boolean;
-    };
-    closeMenu: () => void;
-};
-export declare function useFloatingMenu({ placement, triggerProps }: UseFloatingMenuProps): UseFloatingMenuReturn;
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useFloatingMenu.js.map

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