@bspk/ui 1.0.1 → 1.1.12

package/{Checkbox.js → src/checkbox.scss}

@@ -1,34 +1,4 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { useRef, useEffect } from 'react';
-
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
- * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
- * CheckboxGroup component.
- *
- * @element
- *
- * @name Checkbox
- */
-function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, ...props }) {
-    const indeterminate = !!indeterminateProp;
-    const checked = !!checkedProp && !indeterminate;
-    const inputRef = useRef();
-    useEffect(() => {
-        if (!inputRef.current)
-            return;
-        inputRef.current.indeterminate = indeterminate;
-    }, [indeterminate]);
-    return (jsxs("span", { css: style, "data-checkbox": true, children: [jsx("input", { ...props, "aria-invalid": invalid || undefined, checked: checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
-                    if (!node)
-                        return;
-                    inputRef.current = node;
-                    node.indeterminate = indeterminate;
-                }, type: "checkbox" }), jsxs("span", { "aria-hidden": true, children: [jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) }), jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) })] })] }));
-}
-Checkbox.bspkName = 'Checkbox';
-const style = css `
+[data-bspk='checkbox'] {
     display: block;
     position: relative;
     width: var(--spacing-sizing-06);
@@ -69,10 +39,12 @@ const style = css `
             width: 14px;
             display: none;
         }
+
         svg[data-indeterminate] {
             width: 12px;
             display: none;
         }
+
         color: var(--color);
     }
 
@@ -80,6 +52,7 @@ const style = css `
         &:hover + span {
             background-color: var(--interactions-neutral-hover-opacity);
         }
+
         &:active + span {
             background-color: var(--interactions-neutral-press-opacity);
         }
@@ -98,9 +71,11 @@ const style = css `
 
     input[type='checkbox']:disabled {
         pointer-events: none;
+
         & + span {
             --stroke: var(--stroke-neutral-interactions-disabled-light);
         }
+
         &:is(:checked, :indeterminate) + span {
             --stroke: transparent;
             --background: var(--interactions-disabled-opacity);
@@ -113,11 +88,11 @@ const style = css `
         &:indeterminate + span {
             --background: var(--status-error);
         }
+
         & + span {
             --stroke: var(--status-error);
         }
     }
-`;
+}
 
-export { Checkbox, style };
-//# sourceMappingURL=Checkbox.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Chip.js → src/chip.scss}

@@ -1,24 +1,4 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-
-/**
- * Dynamically generated options that are suggested to the user as responses or prompts.
- *
- * @name Chip
- */
-function Chip({ children = '', wrap = false, variant = 'filter', flat = false, disabled = false, selected = false, onClick, style: styleProp, }) {
-    let additionalProps = {};
-    if (variant === 'filter') {
-        additionalProps = {
-            onClick,
-            role: 'button',
-            tabIndex: 0,
-        };
-    }
-    return (jsx("span", { css: style, "data-chip": "", "data-disabled": disabled || undefined, "data-flat": flat || undefined, "data-selected": selected || undefined, "data-variant": variant, "data-wrap": wrap || undefined, style: styleProp, ...additionalProps, children: children }));
-}
-Chip.bspkName = 'Chip';
-const style = css `
+[data-bspk='chip'] {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -81,7 +61,6 @@ const style = css `
         background-color: var(--surface-brand-primary-highlight);
         border-color: var(--stroke-brand-primary);
     }
-`;
+}
 
-export { Chip, style };
-//# sourceMappingURL=Chip.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/colors.scss

@@ -0,0 +1,76 @@
+/**
+ * This file is generated by /.scripts/update-css.ts.
+ * Do not edit this file directly.
+ * Instead, edit the script and run it again. */
+
+[data-color='grey'] {
+    --foreground: var(--foreground-neutral-on-surface-variant-01);
+    --background: var(--surface-neutral-t2-lowest);
+}
+
+[data-color='white'] {
+    --foreground: var(--foreground-neutral-on-surface-variant-01);
+    --background: var(--surface-neutral-t1-base);
+}
+
+[data-color='primary'] {
+    --foreground: var(--foreground-brand-primary-depth);
+    --background: var(--surface-brand-primary-highlight);
+}
+
+[data-color='secondary'] {
+    --foreground: var(--foreground-brand-secondary-depth);
+    --background: var(--surface-brand-secondary-highlight);
+}
+
+[data-color='blue'] {
+    --foreground: var(--foreground-spectrum-blue);
+    --background: var(--surface-spectrum-blue);
+}
+
+[data-color='green'] {
+    --foreground: var(--foreground-spectrum-green);
+    --background: var(--surface-spectrum-green);
+}
+
+[data-color='lime'] {
+    --foreground: var(--foreground-spectrum-lime);
+    --background: var(--surface-spectrum-lime);
+}
+
+[data-color='magenta'] {
+    --foreground: var(--foreground-spectrum-magenta);
+    --background: var(--surface-spectrum-magenta);
+}
+
+[data-color='orange'] {
+    --foreground: var(--foreground-spectrum-orange);
+    --background: var(--surface-spectrum-orange);
+}
+
+[data-color='pink'] {
+    --foreground: var(--foreground-spectrum-pink);
+    --background: var(--surface-spectrum-pink);
+}
+
+[data-color='purple'] {
+    --foreground: var(--foreground-spectrum-purple);
+    --background: var(--surface-spectrum-purple);
+}
+
+[data-color='red'] {
+    --foreground: var(--foreground-spectrum-red);
+    --background: var(--surface-spectrum-red);
+}
+
+[data-color='teal'] {
+    --foreground: var(--foreground-spectrum-teal);
+    --background: var(--surface-spectrum-teal);
+}
+
+[data-color='yellow'] {
+    --foreground: var(--foreground-spectrum-yellow);
+    --background: var(--surface-spectrum-yellow);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Dialog.js → src/dialog.scss}

@@ -1,72 +1,4 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { FocusTrap } from 'focus-trap-react';
-import { useRef, useState, useCallback, useEffect } from 'react';
-import { Portal } from './Portal.js';
-import { useId } from './hooks/useId.js';
-import { useOutsideClick } from './hooks/useOutsideClick.js';
-
-/**
- * Dialogs display important information that users need to acknowledge. They appear over the interface and block
- * further interactions until an action is selected.
- *
- * @name Dialog
- */
-function Dialog({ 
-//
-children, innerRef, onClose, open, placement = 'center', hideScrim, id: idProp, ...containerProps }) {
-    const id = useId(idProp);
-    const boxRef = useRef(null);
-    const [visibility, setVisibilityState] = useState(open ? 'show' : 'hidden');
-    const prevVisibility = useRef(visibility);
-    const setVisibility = useCallback((next) => {
-        setVisibilityState((prev) => {
-            prevVisibility.current = prev;
-            return next;
-        });
-    }, []);
-    const handleKeyDown = useCallback((e) => e.key === 'Escape' && onClose(), [onClose]);
-    useEffect(() => {
-        if (open) {
-            if (prevVisibility.current.startsWith('show'))
-                return;
-            setVisibility('showing');
-            return;
-        }
-        if (prevVisibility.current.startsWith('hid'))
-            return;
-        setVisibility('hiding');
-    }, [open, setVisibility]);
-    useEffect(() => {
-        if (prevVisibility.current === visibility)
-            return;
-        if (visibility === 'showing') {
-            document.body.style.overflow = 'hidden';
-            setTimeout(() => setVisibility('show'), 10);
-        }
-        if (visibility === 'hiding') {
-            document.body.style.overflow = '';
-            setTimeout(() => setVisibility('hidden'), 10);
-        }
-    }, [setVisibility, visibility]);
-    useEffect(() => {
-        if (visibility.startsWith('hid'))
-            return;
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown, visibility]);
-    useOutsideClick([boxRef.current], onClose, !open);
-    return (visibility !== 'hidden' && (jsx(Portal, { children: jsxs("div", { ...containerProps, css: style, "data-dialog-root": "", "data-placement": placement, "data-visibility": visibility, id: id, ref: innerRef, role: "presentation", children: [!hideScrim && jsx("div", { "aria-hidden": "true", "data-dialog-backdrop": true }), jsx(FocusTrap, { focusTrapOptions: {
-                        fallbackFocus: () => boxRef.current,
-                        clickOutsideDeactivates: true,
-                    }, children: jsx("div", { "data-dialog-box": true, ref: (node) => {
-                            boxRef.current = node;
-                        }, tabIndex: -1, children: children }) })] }) })));
-}
-Dialog.bspkName = 'Dialog';
-const style = css `
+[data-bspk='dialog'] {
     position: fixed;
     inset: 0;
     z-index: var(--z-index-dialog);
@@ -91,19 +23,19 @@ const style = css `
         }
 
         // we make the width responsive to the viewport
-        @media (min-width: 640px) {
+        @media (width >= 640px) {
             width: 90%;
         }
 
-        @media (min-width: 768px) {
+        @media (width >= 768px) {
             width: 80%;
         }
 
-        @media (min-width: 1024px) {
+        @media (width >= 1024px) {
             width: 60%;
         }
 
-        @media (min-width: 1280px) {
+        @media (width >= 1280px) {
             width: 50%;
         }
     }
@@ -215,7 +147,6 @@ const style = css `
             }
         }
     }
-`;
+}
 
-export { Dialog, style };
-//# sourceMappingURL=Dialog.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/divider.scss

@@ -0,0 +1,47 @@
+[data-bspk='divider'] {
+    /*! --inset: is set via inline style */
+
+    display: flex;
+    background-color: var(--stroke-neutral-low);
+    align-self: stretch;
+    place-content: stretch stretch;
+    margin: 0;
+    padding: 0;
+    content: 'hello';
+
+    --length: calc(100% - var(--inset) * 2);
+
+    &,
+    &[data-thickness='light'] {
+        --line-thickness: 1px;
+        --padding: var(--spacing-sizing-02);
+    }
+
+    &[data-thickness='heavy'] {
+        --line-thickness: 2px;
+        --padding: var(--spacing-sizing-04);
+    }
+
+    &, // default
+  &[data-orientation='horizontal'] {
+        width: unset;
+        min-height: unset;
+        height: var(--line-thickness);
+        min-width: var(--length);
+        margin: var(--padding) var(--inset);
+    }
+
+    &[data-orientation='vertical'] {
+        height: unset;
+        min-width: unset;
+        width: var(--line-thickness);
+        min-height: var(--length);
+        margin: var(--inset) var(--padding);
+    }
+
+    &[data-hide-padding] {
+        --padding: 0;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Dropdown.js → src/dropdown.scss}

@@ -1,39 +1,4 @@
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { css } from '@emotion/react';
-import { ListItem } from './ListItem.js';
-import { Menu } from './Menu.js';
-import { Portal } from './Portal.js';
-import { useFloatingMenu } from './hooks/useFloatingMenu.js';
-import { useId } from './hooks/useId.js';
-
-/**
- * A field element that allows users to select one option from a list of available choices. *
- *
- * @name Dropdown
- */
-function Dropdown({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, readOnly, placement = 'bottom', name, isMulti, renderListItem, style: styleProp, }) {
-    const id = useId(propId);
-    const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
-        placement,
-        triggerProps: {
-            disabled,
-            invalid,
-            readOnly,
-        },
-    });
-    const dropdownLabel = isMulti
-        ? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
-        : options.find((o) => o.value === selected?.[0])?.label;
-    return (jsxs(Fragment, { children: [jsx("input", { defaultValue: selected, name: name, type: "hidden" }), jsxs("button", { "aria-label": ariaLabel, css: style, "data-dropdown": "", "data-empty": dropdownLabel ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, style: styleProp, ...triggerProps, children: [jsx(ListItem, { "data-placeholder": "", label: dropdownLabel || placeholder, readOnly: true }), jsx("span", { "data-svg": true, children: jsx(SvgChevronRight, {}) })] }), jsx(Portal, { children: jsx(Menu, { "data-floating": true, isMulti: isMulti, itemCount: itemCount, items: options, onChange: (selectedValues, event) => {
-                        event?.preventDefault();
-                        if (!isMulti)
-                            closeMenu();
-                        onChange?.(selectedValues);
-                    }, renderListItem: renderListItem, selectedValues: selected, ...menuProps }) })] }));
-}
-Dropdown.bspkName = 'Dropdown';
-const style = css `
+[data-bspk='dropdown'] {
     // default -- size medium not disabled or readonly
     --dropdown-background: var(--surface-neutral-t1-base);
     --dropdown-border-color: var(--stroke-neutral-base);
@@ -83,18 +48,13 @@ const style = css `
         display: flex;
         flex-direction: column;
         justify-content: center;
+
         svg {
             transform: rotate(90deg);
             width: var(--dropdown-icon-width);
         }
     }
 
-    // &[data-size='medium'] {
-    & {
-        [data-svg] svg {
-        }
-    }
-
     &[data-size='small'] {
         --dropdown-height: var(--spacing-sizing-08);
         --dropdown-font: var(--body-small);
@@ -147,7 +107,6 @@ const style = css `
     &[data-empty] {
         --dropdown-text-color: var(--foreground-neutral-on-surface-variant-03);
     }
-`;
+}
 
-export { Dropdown, style };
-//# sourceMappingURL=Dropdown.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Fab.js → src/fab.scss}

@@ -1,26 +1,4 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { Tooltip } from './Tooltip.js';
-import { isValidIcon } from './utils/children.js';
-import { useErrorLogger } from './utils/errors.js';
-
-/**
- * A button that highlights a primary action that is elevated above the body content of a page; normally fixed to the
- * bottom right of a screen.
- *
- * @name Fab
- */
-function Fab({ size = 'small', variant = 'primary', showLabel: showLabelProp = true, as, placement = 'bottom-right', container = 'local', label, icon, toolTip, ...otherProps }) {
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabelProp === false && icon;
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    const As = as || 'button';
-    const button = (jsxs(As, { ...otherProps, "aria-label": label, css: style, "data-container": container, "data-fab": true, "data-placement": placement, "data-round": hideLabel || undefined, "data-size": size, "data-variant": variant, children: [!!icon && jsx("span", { "data-fab-icon": true, children: icon }), !hideLabel && jsx("span", { "data-fab-label": true, children: label })] }));
-    return toolTip || hideLabel ? (jsx(Tooltip, { label: toolTip || label, placement: "top", children: button })) : (button);
-}
-Fab.bspkName = 'Fab';
-const style = css `
+[data-bspk='fab'] {
     --placement-offset: var(--spacing-sizing-04);
 
     display: flex;
@@ -31,7 +9,6 @@ const style = css `
     border: none;
     cursor: pointer;
     box-sizing: border-box;
-    background: transparent;
     text-decoration: none;
     z-index: var(--z-index-fab);
     box-shadow: var(--drop-shadow-float);
@@ -114,6 +91,7 @@ const style = css `
 
     background: var(--variant-background);
     color: var(--variant-foreground);
+
     --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
 
     [data-pseudo='hover'] > &,
@@ -140,7 +118,6 @@ const style = css `
         aspect-ratio: 1/1;
         padding: 0;
     }
-`;
+}
 
-export { Fab, style };
-//# sourceMappingURL=Fab.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/form-field.scss

@@ -0,0 +1,13 @@
+[data-bspk='form-field'] {
+    box-sizing: border-box;
+    width: 100%;
+    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/useFloating.ts

@@ -11,18 +11,18 @@
  * @param {boolean} [params.hide=false] - Whether to hide the floating element. Default is `false`
  */
 import {
-    computePosition,
     ComputePositionReturn,
     Placement,
-    arrow,
     Strategy,
+    MiddlewareData,
+    OffsetOptions,
+    MiddlewareState,
+    computePosition,
+    arrow,
     offset,
     flip,
     autoUpdate,
-    MiddlewareData,
-    OffsetOptions,
     size,
-    MiddlewareState,
 } from '@floating-ui/dom';
 import { useCallback, useEffect, useState } from 'react';
 

package/src/inline-alert.scss

@@ -0,0 +1,51 @@
+[data-bspk='inline-alert'] {
+    display: flex;
+    align-items: start;
+    justify-content: center;
+    flex-direction: row;
+    gap: var(--spacing-sizing-02);
+
+    [data-txt] {
+        flex: 1;
+    }
+
+    &[data-variant='error'] {
+        color: var(--status-error);
+
+        --first-tone: var(--status-error);
+        --second-tone: var(--status-on-information);
+    }
+
+    &[data-variant='success'] {
+        color: var(--status-success);
+
+        --first-tone: var(--status-success);
+        --second-tone: var(--status-on-success);
+    }
+
+    &[data-variant='warning'] {
+        color: var(--foreground-neutral-on-surface);
+
+        --first-tone: var(--status-warning);
+        --second-tone: var(--status-on-warning);
+    }
+
+    &[data-variant='informational'] {
+        color: var(--status-information);
+
+        --first-tone: var(--status-information);
+        --second-tone: var(--status-on-information);
+    }
+
+    svg {
+        color: var(--first-tone);
+        width: var(--spacing-sizing-05);
+        height: var(--spacing-sizing-05);
+
+        [data-second-tone] {
+            fill: var(--second-tone);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/link.scss

@@ -0,0 +1,21 @@
+[data-bspk='link'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-sizing-01);
+    font: var(--labels-base);
+
+    &[data-size='large'] {
+        font: var(--labels-large);
+    }
+
+    &[data-size='small'] {
+        font: var(--labels-small);
+    }
+
+    svg {
+        width: var(--spacing-sizing-05);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */