@bspk/ui 1.1.31 → 1.1.33

package/src/dialog.scss

@@ -1,152 +0,0 @@
-[data-bspk='dialog'] {
-    position: fixed;
-    inset: 0;
-    z-index: var(--z-index-dialog);
-
-    [data-dialog-box] {
-        text-align: start;
-        position: relative;
-        border-radius: var(--radius-large);
-        box-shadow: var(--drop-shadow-float);
-        background: var(--surface-neutral-t1-base);
-        color: var(--foreground-neutral-on-surface);
-        max-height: calc(100vh - var(--spacing-sizing-24));
-        overflow: scroll;
-        z-index: 2;
-
-        > :first-of-type {
-            margin-top: 0;
-        }
-
-        > :last-child {
-            margin-bottom: 0;
-        }
-
-        // we make the width responsive to the viewport
-        @media (width >= 640px) {
-            width: 90%;
-        }
-
-        @media (width >= 768px) {
-            width: 80%;
-        }
-
-        @media (width >= 1024px) {
-            width: 60%;
-        }
-
-        @media (width >= 1280px) {
-            width: 50%;
-        }
-    }
-
-    [data-dialog-backdrop] {
-        z-index: 1;
-        position: fixed;
-        inset: 0;
-        background-color: var(--background-scrim);
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-
-    &[data-visibility='show'] {
-        [data-dialog-backdrop] {
-            opacity: 1;
-        }
-    }
-
-    &[data-placement='center'] {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        [data-dialog-box] {
-            transition: opacity 1s;
-            opacity: 0;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                opacity: 1;
-            }
-        }
-    }
-
-    &[data-placement='bottom'] {
-        [data-dialog-box] {
-            position: absolute;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            width: 600px;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: -100vh;
-            transition: bottom 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                bottom: 0;
-            }
-        }
-    }
-
-    &[data-placement='top'] {
-        [data-dialog-box] {
-            position: absolute;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            width: 600px;
-            left: 50%;
-            transform: translateX(-50%);
-            top: -100vh;
-            transition: top 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                top: 0;
-            }
-        }
-    }
-
-    &[data-placement='left'] {
-        [data-dialog-box] {
-            position: absolute;
-            max-height: unset;
-            width: 280px;
-            height: 100vh;
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            left: -100vw;
-            transition: left 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                left: 0;
-            }
-        }
-    }
-
-    &[data-placement='right'] {
-        [data-dialog-box] {
-            position: absolute;
-            max-height: unset;
-            width: 280px;
-            height: 100vh;
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-            right: -100vw;
-            transition: right 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                right: 0;
-            }
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/fab.scss

@@ -1,123 +0,0 @@
-[data-bspk='fab'] {
-    --placement-offset: var(--spacing-sizing-04);
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-sizing-02);
-    border: none;
-    cursor: pointer;
-    box-sizing: border-box;
-    text-decoration: none;
-    z-index: var(--z-index-fab);
-    box-shadow: var(--drop-shadow-float);
-    border-radius: var(--radius-small);
-
-    &[data-container='page'] {
-        position: fixed;
-    }
-
-    &[data-container='local'] {
-        position: absolute;
-    }
-
-    &[data-placement='top-right'] {
-        top: var(--placement-offset);
-        right: var(--placement-offset);
-    }
-
-    &[data-placement='bottom-right'] {
-        bottom: var(--placement-offset);
-        right: var(--placement-offset);
-    }
-
-    &[data-placement='top-left'] {
-        top: var(--placement-offset);
-        left: var(--placement-offset);
-    }
-
-    &[data-placement='bottom-left'] {
-        bottom: var(--placement-offset);
-        left: var(--placement-offset);
-    }
-
-    > [data-fab-icon] {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    > [data-fab-label] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    &[data-size='small'] {
-        font: var(--labels-base);
-        height: var(--spacing-sizing-10);
-        padding: 0 var(--spacing-sizing-04);
-
-        > [data-fab-icon] {
-            width: var(--spacing-sizing-05);
-        }
-    }
-
-    &[data-size='medium'] {
-        font: var(--labels-large);
-        height: var(--spacing-sizing-14);
-        padding: 0 var(--spacing-sizing-07);
-
-        > [data-fab-icon] {
-            width: var(--spacing-sizing-06);
-        }
-    }
-
-    &[data-variant='primary'] {
-        --variant-background: var(--surface-brand-primary);
-        --variant-foreground: var(--foreground-brand-on-primary);
-    }
-
-    &[data-variant='secondary'] {
-        --variant-background: var(--surface-brand-secondary);
-        --variant-foreground: var(--foreground-brand-on-secondary);
-    }
-
-    &[data-variant='neutral'] {
-        --variant-background: var(--surface-neutral-t1-base);
-        --variant-foreground: var(--foreground-neutral-on-surface-variant-01);
-    }
-
-    background: var(--variant-background);
-    color: var(--variant-foreground);
-
-    --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
-
-    [data-pseudo='hover'] > &,
-    &:hover {
-        background:
-            linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),
-            var(--variant-gradient);
-    }
-
-    [data-pseudo='active'] > &,
-    &:active {
-        background:
-            linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),
-            var(--variant-gradient);
-    }
-
-    [data-pseudo='focus'] > &,
-    &:focus-visible {
-        outline: solid 2px var(--stroke-neutral-focus);
-    }
-
-    &[data-round] {
-        border-radius: var(--radius-circular);
-        aspect-ratio: 1/1;
-        padding: 0;
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/form-field.scss

@@ -1,14 +0,0 @@
-[data-bspk='form-field'] {
-    box-sizing: border-box;
-    max-width: 100%;
-    width: fit-content;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sizing-01);
-
-    header label {
-        flex-grow: 1;
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/hooks/useKeyboardNavigation.ts

@@ -1,99 +0,0 @@
-import { useState } from 'react';
-
-import { EVENT_KEY } from '../utils/keyboard';
-import { scrollElementIntoView } from '../utils/scrollElementIntoView';
-
-/**
- * This hook provides keyboard navigation for a list of elements. Used inside the Select component.
- *
- * @example
- *     import { useRef } from 'react';
- *     import { useKeyboardNavigation } from '@bspk/ui/hooks/useKeyboardNavigation';
- *
- *     export function Example() {
- *     const containerRef = useRef<HTMLDivElement>(null);
- *     const { selectedIndex, setSelectedIndex, handleKeyNavigation } = useKeyboardNavigation(containerRef.current, () => true);
- *
- *     return (
- *     <div ref={containerRef} onKeyDown={handleKeyNavigation} tabIndex={0}>
- *     {items.map((item, index) => (
- *     <div key={index} data-selected={selectedIndex === index}>
- *     {item}
- *     </div>
- *     ))}
- *     </div>
- *     );
- *     }
- *
- * @param containerElement - The container element that holds the list of elements.
- * @param onNavigate - Fires when the user navigates through the list with Arrow keys. If the function returns false,
- *   the navigation will be prevented. For example, this is useful when you want to prevent navigation when a dropdown
- *   is closed.
- * @returns An object containing the selectedIndex, setSelectedIndex, and handleKeyNavigation function.
- */
-export function useKeyboardNavigation(
-    containerElement?: HTMLElement | null,
-    // /**
-    //  * Fires when the user navigates through the list with Arrow keys. If the function returns false, the navigation will
-    //  * be prevented. This is useful when you want to prevent navigation when the dropdown is closed.
-    //  *
-    //  * @returns Boolean
-    //  */
-    // selectedIndex: number,
-    // setSelectedIndex: (index: number) => void,
-): {
-    handleKeyNavigation: (event: KeyboardEvent) => boolean;
-    selectedIndex: number;
-    selectedId: string | undefined;
-    setSelectedIndex: (index: number) => void;
-} {
-    const [selectedIndex, setSelectedIndex] = useState(-1);
-
-    if (!containerElement)
-        return {
-            handleKeyNavigation: () => false,
-            selectedIndex,
-            setSelectedIndex: () => {},
-            selectedId: undefined,
-        };
-
-    const handleArrowKeyNavigation = (event: KeyboardEvent): boolean => {
-        if (event.key !== EVENT_KEY.Enter && !event.key.startsWith('Arrow')) return false;
-
-        event.preventDefault();
-
-        if (!containerElement || !containerElement.children.length) return false;
-
-        const itemElements = Array.from(containerElement?.children) as HTMLElement[];
-
-        if (event.key === EVENT_KEY.Enter && selectedIndex !== -1) {
-            itemElements[selectedIndex].click();
-            return true;
-        }
-
-        let next = 0;
-        if (event.key === EVENT_KEY.ArrowUp || event.key === EVENT_KEY.ArrowLeft) next = selectedIndex - 1;
-        if (event.key === EVENT_KEY.ArrowDown || event.key === EVENT_KEY.ArrowRight) next = selectedIndex + 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);
-        setSelectedIndex(next);
-        return true;
-    };
-
-    return {
-        handleKeyNavigation: handleArrowKeyNavigation,
-        selectedIndex,
-        selectedId: selectedIndex === -1 ? undefined : containerElement.children[selectedIndex]?.id,
-        setSelectedIndex: setSelectedIndex,
-    };
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/list-item.scss

@@ -1,117 +0,0 @@
-[data-bspk='list-item'] {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0 var(--spacing-sizing-02);
-    background: unset;
-    border: unset;
-    margin: unset;
-    text-decoration: unset;
-    user-select: none;
-    color: var(--foreground-neutral-on-surface);
-
-    &:is(a),
-    &:is(button),
-    &[onclick],
-    &[role='button'] {
-        cursor: pointer;
-    }
-
-    [data-inner] {
-        height: 100%;
-        width: 100%;
-        min-height: var(--spacing-sizing-09);
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        gap: var(--spacing-sizing-03);
-        padding: var(--spacing-sizing-02) 0;
-        justify-items: stretch;
-
-        & > * {
-            min-height: 100%;
-            width: fit-content;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            flex: 1;
-            flex-shrink: 0;
-
-            svg {
-                width: 24px;
-                max-width: unset;
-            }
-        }
-    }
-
-    /* &:has(+ [data-bspk="list-item"]) {
-    [data-inner] {
-      border-bottom: 1px solid var(--stroke-neutral-low);
-    }
-  } */
-
-    &[data-action] {
-        [data-pseudo='focus'] &,
-        &:focus-visible,
-        &:has(*:focus-visible) {
-            // outline: 2px solid var(--stroke-neutral-focus);
-            box-shadow: inset var(--stroke-neutral-focus) 0 0 0 2px;
-
-            [data-inner] {
-                border-color: transparent;
-            }
-        }
-
-        [data-pseudo='hover'] &,
-        &:hover {
-            background-color: var(--interactions-neutral-hover-opacity);
-        }
-
-        [data-pseudo='active'] &,
-        &[data-active],
-        &:active {
-            background-color: var(--interactions-neutral-press-opacity);
-        }
-    }
-
-    [data-trailing]:has(input) {
-        pointer-events: none;
-    }
-
-    [data-component='Img'] > img {
-        height: 36px;
-        width: 36px;
-        max-width: unset;
-    }
-
-    &:is(label) {
-        [data-inner] {
-            border-bottom: 0;
-            gap: var(--spacing-sizing-02);
-        }
-    }
-
-    [data-item-label] {
-        flex: 100%;
-        text-align: left;
-
-        [data-text] {
-            font: var(--labels-base);
-            color: var(--foreground-neutral-on-surface);
-        }
-
-        [data-sub-text] {
-            font: var(--body-small);
-            color: var(--foreground-neutral-on-surface-variant-01);
-        }
-    }
-
-    &[aria-disabled] {
-        [data-text],
-        [data-sub-text] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/menu.scss

@@ -1,40 +0,0 @@
-[data-bspk='menu'] {
-    /*! --item-count: is set via inline style */
-
-    width: 332px;
-    border: 1px solid var(--stroke-neutral-low);
-    background-color: var(--surface-neutral-t1-base);
-    box-shadow: var(--drop-shadow-float);
-    border-radius: var(--radius-large);
-    display: flex;
-    flex-direction: column;
-
-    --item-size: var(--spacing-sizing-12);
-
-    &[data-floating] {
-        z-index: var(--z-index-dropdown);
-    }
-
-    &[data-item-count] {
-        height: calc(var(--item-count) * var(--item-size));
-        overflow-y: scroll;
-    }
-
-    &[data-no-items] {
-        padding: var(--spacing-sizing-08) var(--spacing-sizing-04);
-        align-items: center;
-        justify-content: center;
-        gap: var(--spacing-sizing-03);
-    }
-
-    [data-bspk='list-item'] {
-        min-height: var(--item-size);
-        height: var(--item-size);
-
-        &[data-selected] {
-            background-color: var(--surface-brand-primary-highlight);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/modal.scss

@@ -1,22 +0,0 @@
-[data-bspk='modal'] {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    gap: var(--spacing-sizing-02);
-    padding: var(--spacing-sizing-04);
-
-    > header {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--spacing-sizing-04);
-    }
-
-    main {
-        overflow: auto;
-        flex: 1;
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/radio-group.scss

@@ -1,5 +0,0 @@
-[data-bspk='radio-group'] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sizing-01);
-}

package/src/radio.scss

@@ -1,81 +0,0 @@
-[data-bspk='radio'] {
-    display: block;
-    position: relative;
-    width: var(--spacing-sizing-06);
-    aspect-ratio: 1/1;
-    padding: 2px;
-
-    input[type='radio'] {
-        position: absolute;
-        opacity: 0;
-        z-index: 2;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        cursor: pointer;
-    }
-
-    span {
-        --stroke: var(--stroke-neutral-base);
-        --inner: var(--foreground-brand-primary);
-        --background: none;
-
-        position: relative;
-        z-index: 1;
-        box-sizing: border-box;
-        display: flex;
-        width: var(--spacing-sizing-05);
-        aspect-ratio: 1/1;
-        border-radius: 50%;
-        border: 2px solid var(--stroke);
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        background: var(--background);
-
-        &::before {
-            content: '';
-            display: block;
-            width: var(--spacing-sizing-03);
-            aspect-ratio: 1/1;
-            background: var(--inner);
-            border-radius: var(--radius-circular);
-            opacity: 0;
-        }
-    }
-
-    input[type='radio']:not(:disabled) {
-        &:hover + span {
-            --background: var(--interactions-neutral-hover-opacity);
-        }
-
-        &:active + span {
-            --background: var(--interactions-neutral-press-opacity);
-        }
-
-        &[data-invalid] + span {
-            --stroke: var(--status-error);
-            --inner: var(--status-error);
-        }
-    }
-
-    input[type='radio']:checked + span {
-        --stroke: var(--stroke-brand-primary);
-
-        &::before {
-            opacity: 1;
-        }
-    }
-
-    input[type='radio']:disabled {
-        pointer-events: none;
-
-        & + span {
-            --stroke: var(--stroke-neutral-interactions-disabled-light);
-            --inner: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/search-bar.scss

@@ -1,7 +0,0 @@
-[data-bspk='search-bar'] {
-    display: flex;
-    width: 100%;
-    min-width: 300px;
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */