@bspk/ui 1.0.1 → 1.1.12

package/src/list-item.scss

@@ -0,0 +1,113 @@
+[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-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-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-button.scss

@@ -0,0 +1,16 @@
+[data-bspk='menu-button'] {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    height: 48px;
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--spacing-sizing-01);
+    color: var(--foreground-neutral-on-surface-variant-01);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/menu.scss

@@ -0,0 +1,36 @@
+[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-list-item] {
+        min-height: var(--item-size);
+        height: var(--item-size);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/modal.scss

@@ -0,0 +1,22 @@
+[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/number-input.scss

@@ -0,0 +1,128 @@
+[data-bspk='number-input'] {
+    // medium
+    --font: var(--body-base);
+    --height: var(--spacing-sizing-10);
+    --svg-width: var(--spacing-sizing-05);
+    --color: var(--foreground-neutral-on-surface);
+
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    font: var(--font);
+    height: var(--height);
+    border: 1px solid var(--stroke-neutral-base);
+    border-radius: var(--radius-small);
+    background: var(--surface-neutral-t1-base);
+
+    &:focus-within {
+        border-color: var(--stroke-brand-primary);
+        outline: 1px solid var(--stroke-brand-primary);
+    }
+
+    [data-divider] {
+        width: 4px;
+        border-right: 1px solid var(--stroke-neutral-base);
+
+        // account for border - 3(margin)  * 2 + 2(border)
+        height: calc(var(--height) - 8px);
+        margin: 3px 0;
+    }
+
+    button {
+        min-width: var(--height);
+        background: none;
+        border: none;
+        cursor: pointer;
+        font: var(--font);
+
+        svg {
+            width: var(--svg-width);
+        }
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--color);
+
+        &:disabled {
+            cursor: not-allowed;
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    input {
+        color: var(--color);
+        min-width: 0;
+        display: block;
+        font: var(--font);
+        text-align: center;
+        padding: 0 var(--spacing-sizing-03);
+        background: transparent;
+        border: none;
+
+        &:focus {
+            outline: none;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            appearance: none;
+            margin: 0;
+        }
+
+        &[type='number'] {
+            appearance: textfield;
+        }
+    }
+
+    &:not([data-disabled], [data-readonly]) {
+        input,
+        button:not(:disabled) {
+            &:hover {
+                background-color: var(--interactions-hover-opacity);
+            }
+
+            &:active {
+                background-color: var(--interactions-press-opacity);
+            }
+        }
+
+        &[data-invalid] {
+            border-color: var(--status-error);
+            outline-color: var(--status-error);
+        }
+    }
+
+    &[data-disabled],
+    &[data-readonly] {
+        --color: var(--foreground-neutral-disabled-on-surface);
+
+        border-color: var(--stroke-neutral-disabled-light);
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        [data-divider] {
+            border-color: var(--stroke-neutral-disabled-light);
+        }
+    }
+
+    &[data-readonly] {
+        input {
+            color: var(--foreground-neutral-on-surface) !important;
+        }
+    }
+
+    &[data-size='small'] {
+        --font: var(--body-small);
+        --height: var(--spacing-sizing-08);
+    }
+
+    &[data-size='large'] {
+        --font: var(--body-large);
+        --height: var(--spacing-sizing-12);
+        --svg-width: var(--spacing-sizing-06);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Popover.js → src/popover.scss}

@@ -1,48 +1,4 @@
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { SvgClose } from '@bspk/icons/Close';
-import { css } from '@emotion/react';
-import { useId, useState, useRef, useMemo, cloneElement } from 'react';
-import { Button } from './Button.js';
-import { Portal } from './Portal.js';
-import { Txt } from './Txt.js';
-import { useFloating } from './hooks/useFloating.js';
-import { useOutsideClick } from './hooks/useOutsideClick.js';
-
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @name Popover
- */
-function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }) {
-    const id = useId();
-    const [show, setShow] = useState(false);
-    const arrowRef = useRef(null);
-    const { elements, floatingStyles, middlewareData } = useFloating({
-        placement: placement,
-        strategy: 'absolute',
-        offsetOptions: 22,
-        arrowRef,
-        hide: !show,
-    });
-    useOutsideClick([elements.floating], () => setShow(false));
-    const child = useMemo(() => !disabled &&
-        children &&
-        cloneElement(children, {
-            onClick: () => setShow((prev) => !prev),
-            'aria-describedby': id,
-        }), [children, disabled, id]);
-    return disabled ? (children) : (jsxs(Fragment, { children: [child, jsx(Portal, { children: jsxs("div", { css: style, "data-placement": middlewareData?.offset?.placement, "data-popover": "", id: id, ref: (node) => {
-                        elements.setFloating(node);
-                        elements.setTrigger(document.querySelector(`[aria-describedby="${id}"]`));
-                    }, style: floatingStyles, children: [jsxs("header", { children: [jsx(Txt, { variant: "heading-h6", children: header }), jsx("button", { "aria-label": "Close", onClick: () => setShow(false), children: jsx(SvgClose, {}) })] }), jsxs("div", { "data-content": true, children: [jsx(Txt, { as: "div", variant: "body-small", children: content }), callToAction?.label && callToAction?.onClick && (jsx(Button, { "data-call-to-action": true, label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "secondary" }))] }), jsx("div", { "data-arrow": true, ref: (node) => {
-                                arrowRef.current = node;
-                            }, style: {
-                                left: `${middlewareData?.arrow?.x}px`,
-                                top: `${middlewareData?.arrow?.y}px`,
-                            } })] }) })] }));
-}
-Popover.bspkName = 'Popover';
-const style = css `
+[data-bspk='popover'] {
     position: absolute;
     z-index: var(--z-index-tooltip-popover);
     background: var(--surface-neutral-t1-base);
@@ -88,7 +44,7 @@ const style = css `
         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;
+        border-color: transparent;
     }
 
     &[data-placement^='top'] {
@@ -98,6 +54,7 @@ const style = css `
             filter: drop-shadow(0 2px 1px var(--shadow-10));
         }
     }
+
     &[data-placement^='right'] {
         [data-arrow] {
             margin-left: calc(var(--arrow-offset) * 2);
@@ -105,6 +62,7 @@ const style = css `
             filter: drop-shadow(-2px 0 1px var(--shadow-10));
         }
     }
+
     &[data-placement^='bottom'] {
         [data-arrow] {
             top: var(--arrow-offset);
@@ -112,16 +70,19 @@ const style = css `
             filter: drop-shadow(0 -2px 1px var(--shadow-10));
         }
     }
+
     &[data-placement='bottom-start'] {
         [data-arrow] {
             margin-left: var(--arrow-offset);
         }
     }
+
     &[data-placement='bottom-end'] {
         [data-arrow] {
             margin-left: calc(var(--arrow-offset) * -1);
         }
     }
+
     &[data-placement^='left'] {
         [data-arrow] {
             right: var(--arrow-offset);
@@ -138,6 +99,7 @@ const style = css `
 
     [data-call-to-action] {
         margin: 0 0 0 auto;
+
         /* background: none;
     border: none;
     cursor: pointer;
@@ -146,7 +108,6 @@ const style = css `
     font: var(--labels-small);
     color: var(--foreground-brand-primary); */
     }
-`;
+}
 
-export { Popover, style };
-//# sourceMappingURL=Popover.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/progress-bar.scss

@@ -0,0 +1,50 @@
+[data-bspk='progress-bar'] {
+    /*! --width: is set via inline style */
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: var(--spacing-sizing-01);
+
+    progress {
+        opacity: 0;
+        position: absolute;
+    }
+
+    [data-bar] {
+        width: 100%;
+        height: var(--spacing-sizing-02);
+        background-color: var(--surface-neutral-t3-low);
+        border-radius: var(--radius-small);
+
+        &::after {
+            content: '';
+            display: block;
+            height: 100%;
+            background-color: var(--foreground-brand-primary);
+            border-radius: var(--radius-small);
+            width: var(--width);
+            transition: width 0.3s;
+        }
+    }
+
+    &[data-size='small'] {
+        max-width: 248px;
+
+        [data-bar] {
+            height: var(--spacing-sizing-01);
+        }
+    }
+
+    label {
+        font-size: var(--labels-small);
+        width: 100%;
+        text-align: center;
+    }
+
+    &[data-align='left'] label {
+        text-align: left;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/progress-circle.scss

@@ -0,0 +1,56 @@
+[data-bspk='progress-circle'] {
+    --animation-speed: 1.5s;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sizing-02);
+    align-items: center;
+    justify-content: center;
+
+    &[data-label-position='top'] {
+        flex-direction: column-reverse;
+    }
+
+    &[data-label-position='left'] {
+        flex-direction: row-reverse;
+    }
+
+    &[data-label-position='right'] {
+        flex-direction: row;
+    }
+
+    svg {
+        color: var(--foreground-brand-secondary);
+        animation: spin var(--animation-speed) linear infinite;
+    }
+
+    @keyframes spin {
+        100% {
+            transform: rotate(360deg);
+        }
+
+        0% {
+            transform: rotate(0deg);
+        }
+    }
+
+    &[data-size='small'] {
+        svg {
+            width: 32px;
+        }
+    }
+
+    &[data-size='medium'] {
+        svg {
+            width: 40px;
+        }
+    }
+
+    &[data-size='large'] {
+        svg {
+            width: 48px;
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/progression-stepper-bar.scss

@@ -0,0 +1,39 @@
+[data-bspk='progression-stepper-bar'] {
+    &[data-size='large'] {
+        --height: var(--spacing-sizing-02);
+    }
+
+    &[data-size='small'] {
+        --height: var(--spacing-sizing-01);
+    }
+
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--spacing-sizing-01);
+
+    [data-steps] {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-sizing-01);
+        height: var(--height);
+
+        [data-step] {
+            width: 100%;
+            height: var(--height);
+            min-width: var(--spacing-sizing-02);
+            border-radius: var(--radius-small);
+            background: var(--surface-neutral-t3-low);
+
+            &[data-complete] {
+                background: var(--surface-brand-primary);
+            }
+        }
+    }
+
+    label {
+        font: var(--labels-small);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{ProgressionStepper.js → src/progression-stepper.scss}

@@ -1,29 +1,7 @@
-import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { SvgCheck } from '@bspk/icons/Check';
-import { css } from '@emotion/react';
-
-/**
- * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
- *
- * @name ProgressionStepper
- */
-function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
-    const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
-    return (jsxs("div", { ...containerProps, css: style, "data-progress-stepper": "", "data-variant": variant, children: [variant === 'widget' && (jsxs("label", { children: [jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (jsxs(Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), jsx("ol", { children: steps.flatMap(({ name, subtext }, index) => {
-                    const stepNum = index + 1;
-                    let status = 'incomplete';
-                    if (stepNum < currentStep)
-                        status = 'complete';
-                    else if (stepNum === currentStep)
-                        status = 'current';
-                    return (jsxs("li", { "data-status": status, "data-step": stepNum, children: [jsxs("span", { "aria-hidden": true, "data-line-circle": true, children: [jsx("span", { "data-line": "before" }), jsxs("span", { "data-circle": true, children: [jsx("span", { children: stepNum }), status === 'complete' && jsx(SvgCheck, {})] }), jsx("span", { "data-line": "after" })] }), variant !== 'widget' && (jsxs("span", { "data-content": true, children: [jsx("span", { "data-name": true, children: name }), subtext && jsx("span", { "data-subtext": true, children: subtext })] }))] }, `step-${index}`));
-                }) })] }));
-}
-ProgressionStepper.bspkName = 'ProgressionStepper';
-const style = css `
+[data-bspk='progression-stepper'] {
     width: 100%;
-    --circle-width: var(--spacing-sizing-09);
 
+    --circle-width: var(--spacing-sizing-09);
     --active-background-color: var(--surface-brand-primary);
     --active-foreground-color: var(--foreground-brand-on-primary);
     --inactive-background-color: var(--surface-neutral-t3-low);
@@ -42,6 +20,7 @@ const style = css `
             margin: 0;
             padding: 0;
             gap: var(--spacing-sizing-02);
+
             [data-line-circle] {
                 display: flex;
                 justify-content: center;
@@ -95,6 +74,7 @@ const style = css `
                 [data-line] {
                     background-color: var(--active-background-color);
                 }
+
                 [data-circle] {
                     background-color: var(--active-background-color);
                     border: 1px solid var(--active-background-color);
@@ -103,6 +83,7 @@ const style = css `
                     span {
                         display: none;
                     }
+
                     svg {
                         display: block;
                     }
@@ -138,6 +119,7 @@ const style = css `
                     height: auto;
                 }
             }
+
             [data-content] {
                 flex-direction: column;
                 padding: var(--spacing-sizing-10) 0;
@@ -191,7 +173,6 @@ const style = css `
             }
         }
     }
-`;
+}
 
-export { ProgressionStepper, style };
-//# sourceMappingURL=ProgressionStepper.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */