@bspk/ui 1.0.1 → 1.1.12

package/{Radio.js → src/radio.scss}

@@ -1,20 +1,4 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-
-/**
- * A round control that allows user to choose one option from a set. This is the base element and if used directly you
- * must wrap it with a label. This will more often be used in the RadioOption or RadioGroup component.
- *
- * @element
- *
- * @name Radio
- */
-function Radio(props) {
-    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
-    return (jsxs("span", { css: style, "data-radio": true, children: [jsx("input", { ...otherProps, checked: !!checked, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), jsx("span", { "aria-hidden": true })] }));
-}
-Radio.bspkName = 'Radio';
-const style = css `
+[data-bspk='radio'] {
     display: block;
     position: relative;
     width: var(--spacing-sizing-06);
@@ -36,6 +20,7 @@ const style = css `
         --stroke: var(--stroke-neutral-base);
         --inner: var(--foreground-brand-primary);
         --background: none;
+
         position: relative;
         z-index: 1;
         box-sizing: border-box;
@@ -49,7 +34,7 @@ const style = css `
         justify-content: center;
         background: var(--background);
 
-        &:before {
+        &::before {
             content: '';
             display: block;
             width: var(--spacing-sizing-03);
@@ -78,7 +63,7 @@ const style = css `
     input[type='radio']:checked + span {
         --stroke: var(--stroke-brand-primary);
 
-        &:before {
+        &::before {
             opacity: 1;
         }
     }
@@ -91,7 +76,6 @@ const style = css `
             --inner: var(--foreground-neutral-disabled-on-surface);
         }
     }
-`;
+}
 
-export { Radio, style };
-//# sourceMappingURL=Radio.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/search-bar.scss

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

package/{SegmentedControl.js → src/segmented-control.scss}

@@ -1,27 +1,8 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { Fragment } from 'react';
-import { Tooltip } from './Tooltip.js';
-import { useNavOptions } from './hooks/useNavOptions.js';
-
-/**
- * Navigation tool that organizes content across different screens and views.
- *
- * @name SegmentedControl
- */
-function SegmentedControl({ onChange, value, size = 'medium', options, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
-    const items = useNavOptions(options);
-    const hideLabels = showLabelsProp === false && items.every((item) => item.icon && item.label);
-    return (jsx("div", { ...containerProps, css: style, "data-option-group": true, "data-size": size, "data-width": width, children: items.map((item, index) => {
-            const isActive = item.value === value;
-            return (jsx(Fragment, { children: jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === items.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value), children: jsx("span", { "data-outer": true, children: jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
-        }) }));
-}
-SegmentedControl.bspkName = 'SegmentedControl';
-const style = css `
+[data-bspk='segmented-control'] {
     display: flex;
     flex-direction: row;
     max-width: 100%;
+
     --outer-height: var(--spacing-sizing-10);
     --inner-height: var(--spacing-sizing-08);
     --svg-width: 20px;
@@ -29,12 +10,15 @@ const style = css `
     &[data-width='fill'] {
         align-items: stretch;
         width: 100%;
+
         --btn-flex-grow: 1;
+
         margin: 0 var(--spacing-sizing-04);
     }
 
     &[data-width='hug'] {
         width: fit-content;
+
         --btn-flex-grow: 0;
     }
 
@@ -130,7 +114,6 @@ const style = css `
             cursor: not-allowed;
         }
     }
-`;
+}
 
-export { SegmentedControl, style };
-//# sourceMappingURL=SegmentedControl.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/skeleton.scss

@@ -0,0 +1,83 @@
+[data-bspk='skeleton'] {
+    /*! 
+    --text-margin: is set via inline style
+    --text-height: is set via inline style
+    --height: is set via inline style
+    --width: is set via inline style
+    */
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--text-margin);
+    animation: skeleton-pulse 1.5s infinite;
+    background: var(--foreground-neutral-skeleton-element);
+
+    @keyframes skeleton-pulse {
+        0% {
+            opacity: 0.8;
+        }
+
+        50% {
+            opacity: 0.4;
+        }
+
+        100% {
+            opacity: 0.8;
+        }
+    }
+
+    &[data-variant='rectangular'],
+    &[data-variant='photo'] {
+        min-width: var(--spacing-sizing-08);
+        min-height: var(--spacing-sizing-08);
+        height: var(--height, var(--width));
+        width: var(--width, var(--height));
+        border-radius: var(--radius-small);
+    }
+
+    &[data-variant='photo'] {
+        border-radius: var(--radius-medium);
+    }
+
+    &[data-variant='circular'] {
+        border-radius: 100%;
+        width: var(--width);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='profile'] {
+        border-radius: 100%;
+        width: var(--spacing-sizing-10);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='thumbnail'] {
+        width: var(--spacing-sizing-12);
+        height: var(--spacing-sizing-12);
+        border-radius: var(--radius-small);
+    }
+
+    &[data-variant='text'] {
+        background: transparent;
+        min-height: unset;
+        max-height: unset;
+        width: 100%;
+        height: fit-content;
+
+        [data-line] {
+            width: 100%;
+            background: var(--foreground-neutral-skeleton-element);
+            border-radius: var(--radius-small);
+            height: var(--text-height);
+        }
+
+        // if there are 2 lines or more, make the last line 80% width
+        &:has([data-line]:nth-child(2)) {
+            [data-line]:last-child {
+                width: 80%;
+            }
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Switch.js → src/switch.scss}

@@ -1,31 +1,10 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-
-/**
- * A control element that allows users to toggle between two states, typically representing on/off and inherits
- * immediate reaction in each state. This is the base element and if used directly you must wrap it with a label. This
- * will more often be used in the SwitchOption or SwitchGroup component.
- *
- * @element
- *
- * @name Switch
- */
-function Switch(props) {
-    const { 
-    //
-    checked = false, disabled, ...otherProps } = props;
-    return (jsxs("span", { css: style, "data-switch": true, children: [jsx("input", { ...otherProps, "aria-disabled": disabled || undefined, checked: checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), type: "checkbox" }), jsx("span", { "aria-hidden": true })] }));
-}
-Switch.bspkName = 'Switch';
-const style = css `
+[data-bspk='switch'] {
     --track-width: var(--spacing-sizing-09);
     --toggle-width: var(--spacing-sizing-04);
     --track-bg: var(--surface-neutral-t4-high);
     --toggle-bg: var(--foreground-neutral-on-color);
 
     display: block;
-    position: relative;
-    box-sizing: border-box;
     margin: 2px;
 
     input[type='checkbox'] {
@@ -72,6 +51,7 @@ const style = css `
         input[type='checkbox'] {
             pointer-events: none;
         }
+
         --track-bg: var(--interactions-disabled-opacity);
         --toggle-bg: var(--foreground-neutral-disabled-on-surface);
 
@@ -79,7 +59,6 @@ const style = css `
             --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);
         }
     }
-`;
+}
 
-export { Switch, style };
-//# sourceMappingURL=Switch.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{TabGroup.js → src/tab-group.scss}

@@ -1,34 +1,16 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { Badge } from './Badge.js';
-import { useNavOptions } from './hooks/useNavOptions.js';
-
-/**
- * Navigation tool that organizes content across different screens and views.
- *
- * @name TabGroup
- */
-function TabGroup({ 
-//
-onChange: onTabChange, value, size = 'medium', options, width = 'hug', showTrail = false, ...containerProps }) {
-    const items = useNavOptions(options);
-    return (jsx("div", { ...containerProps, css: style, "data-hide-trail": (width === 'hug' && !showTrail) || undefined, "data-size": size, "data-tab-group": true, "data-width": width, children: items.map((item) => {
-            const isActive = item.value === value;
-            return (jsx("button", { "data-active": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onTabChange(item.value), children: jsxs("span", { children: [(isActive && item.iconActive) || item.icon, item.label, item.badge && jsx(Badge, { count: item.badge, size: "x-small" })] }) }, item.value));
-        }) }));
-}
-TabGroup.bspkName = 'TabGroup';
-const style = css `
+[data-bspk='tab-group'] {
     display: flex;
     flex-direction: row;
-    width: fit-content;
+
     --btn-flex-grow: 0;
+
     border-bottom: 1px solid var(--stroke-neutral-low);
     width: 100%;
 
     &[data-width='fill'] {
         align-items: stretch;
         width: 100%;
+
         --btn-flex-grow: 1;
     }
 
@@ -87,8 +69,9 @@ const style = css `
 
         &[data-active] {
             color: var(--foreground-brand-primary);
+
             span {
-                &:after {
+                &::after {
                     content: '';
                     display: block;
                     width: 100%;
@@ -109,11 +92,11 @@ const style = css `
 
     &[data-hide-trail] {
         border-bottom: none;
+
         button {
             border-bottom: 1px solid var(--stroke-neutral-low);
         }
     }
-`;
+}
 
-export { TabGroup, style };
-//# sourceMappingURL=TabGroup.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Table.js → src/table.scss}

@@ -1,22 +1,4 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-
-/**
- * Component description coming soon.
- *
- * @name Table
- */
-function Table({ rows, columns, ...props }) {
-    return (jsxs("div", { ...props, css: style, "data-table": true, style: {
-            ...props.style,
-            gridTemplateColumns: columns.map((c) => `minmax(0, ${c.width || '1fr'})`).join(' '),
-        }, children: [columns.map((column, index, arr) => (jsx("div", { "data-head": [index === 0 && 'first', index === arr.length - 1 && 'last'].filter(Boolean).join(' '), children: column.label }, column.key))), rows.map((row, index, arr) => {
-                const lastRow = index === arr.length - 1 || undefined;
-                return columns.map((column) => (jsx("div", { "data-cell": column.key, "data-row-last": lastRow, children: row[column.key] }, index + column.key)));
-            })] }));
-}
-Table.bspkName = 'Table';
-const style = css `
+[data-bspk='table'] {
     width: 100%;
     border-collapse: separate;
     text-align: left;
@@ -35,6 +17,7 @@ const style = css `
         background-color: var(--surface-neutral-t1-base);
         border-bottom: var(--stroke-neutral-low) solid 1px;
         font: var(--labels-small);
+
         p {
             margin: 0;
             padding: 0;
@@ -60,7 +43,6 @@ const style = css `
             border-top-right-radius: var(--radius-medium);
         }
     }
-`;
+}
 
-export { Table, style };
-//# sourceMappingURL=Table.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Tag.js → src/tag.scss}

@@ -1,18 +1,4 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { COLOR_VARIABLES } from './utils/colorVariants.js';
-
-/**
- * A non-interactive visual indicators to draw attention or categorization of a component.
- *
- * @name Tag
- */
-function Tag({ children, as, color = 'white', size = 'small', variant = 'flat', wrap, ...props }) {
-    const As = as || 'span';
-    return (jsxs(As, { ...props, css: style, "data-color": color, "data-size": size, "data-tag": true, "data-variant": variant, "data-wrap": wrap || undefined, children: [children, variant === 'corner-wrap' && jsx("div", { "data-triangle": true })] }));
-}
-Tag.bspkName = 'Tag';
-const style = css `
+[data-bspk='tag'] {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -22,7 +8,6 @@ const style = css `
     border-radius: var(--radius-small);
     color: var(--foreground) !important;
     background: var(--background);
-    text-decoration: none;
     font: unset;
     text-decoration: unset;
     white-space: nowrap;
@@ -39,13 +24,6 @@ const style = css `
         border-bottom-right-radius: 0;
     }
 
-    ${Object.entries(COLOR_VARIABLES).map(([variant, { foreground, surface }]) => css `
-            &[data-color='${variant}'] {
-                --foreground: var(${foreground});
-                --background: var(${surface});
-            }
-        `)}
-
     &[data-size='small'] {
         font: var(--labels-small);
         height: var(--spacing-sizing-08);
@@ -64,14 +42,13 @@ const style = css `
         position: absolute;
         bottom: -12px;
         right: 0;
-        width: 0px;
-        height: 0px;
+        width: 0;
+        height: 0;
         border-style: solid;
         border-width: 12px 12px 0 0;
         border-color: var(--foreground) transparent transparent transparent;
         transform: rotate(0deg);
     }
-`;
+}
 
-export { Tag, style };
-//# sourceMappingURL=Tag.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{TextInput.js → src/text-input.scss}

@@ -1,41 +1,16 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { SvgCancel } from '@bspk/icons/Cancel';
-import { css } from '@emotion/react';
-import { useId } from './hooks/useId.js';
-
-/**
- * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
- * not intended to be used directly. Use the TextField component.
- *
- * @element
- *
- * @name TextInput
- */
-function TextInput({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type, readOnly, disabled, autoComplete = 'off', containerRef, ...otherProps }) {
-    const id = useId(idProp);
-    const invalid = !readOnly && !disabled && invalidProp;
-    return (jsxs("div", { css: style, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, "data-size": size, "data-text-input": true, ref: containerRef, ...otherProps, children: [leading && jsx("span", { "data-leading": true, children: leading }), jsx("input", { "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, disabled: disabled || undefined, id: id, name: name, onChange: (event) => {
-                    onChange(event.target.value, event);
-                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: inputRef, required: required || undefined, type: type, value: value }), trailing && jsx("span", { "data-trailing": true, children: trailing }), value?.toString().length > 0 && !readOnly && !disabled && (jsx("button", { "aria-label": "clear", "data-clear": true, onClick: () => onChange(''), children: jsx(SvgCancel, {}) }))] }));
-}
-TextInput.bspkName = 'TextInput';
-const style = css `
+[data-bspk='text-input'] {
     --border-color: var(--stroke-neutral-base);
+
     display: flex;
-    flex-direction: row;
+    flex-flow: row nowrap;
     background-color: var(--surface-neutral-t1-base);
     border: solid 1px var(--border-color);
     height: var(--field-height);
     border-radius: var(--radius-small);
     padding: 0 var(--field-padding);
     gap: var(--spacing-sizing-01);
-    flex-wrap: nowrap;
     width: 100%;
 
-    &:focus-within {
-        --border-color: var(--stroke-brand-primary);
-    }
-
     & > * {
         display: flex;
         justify-content: center;
@@ -158,6 +133,8 @@ const style = css `
     }
 
     &:focus-within {
+        --border-color: var(--stroke-brand-primary);
+
         button[data-clear] {
             display: flex;
         }
@@ -166,7 +143,6 @@ const style = css `
     &:has(button[data-clear]) {
         padding-right: 0;
     }
-`;
+}
 
-export { TextInput, style };
-//# sourceMappingURL=TextInput.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{Textarea.js → src/textarea.scss}

@@ -1,38 +1,9 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { useId } from './hooks/useId.js';
-
-const MIN_ROWS = 3;
-const MAX_ROWS = 10;
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * @element
- *
- * @name Textarea
- */
-function Textarea({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = MIN_ROWS, maxRows: maxRowsProp = MAX_ROWS, ...otherProps }) {
-    const id = useId(idProp);
-    const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
-    // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(MAX_ROWS, Math.max(minRowsProp, MIN_ROWS));
-    const maxRows = Math.max(MIN_ROWS, Math.min(maxRowsProp, MAX_ROWS));
-    return (jsxs("div", { css: style, "data-size": size, "data-textarea": true, style: {
-            '--min-rows': minRows,
-            '--max-rows': maxRows,
-        }, children: [jsx("textarea", { ...otherProps, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, id: id, name: name, onBlur: (event) => {
-                    const target = event.target;
-                    target.scrollTop = 0;
-                }, onChange: (event) => onChange(event.target.value, event), onInput: (event) => {
-                    const target = event.target;
-                    // we know the textarea was resized, so we don't want to auto-size it
-                    if (target.style.height)
-                        return;
-                    target.nextSibling.innerText = `${target.value}\n`;
-                }, placeholder: placeholder, ref: innerRef, value: value }), jsx("div", { "aria-hidden": true, "data-replicated-value": true })] }));
-}
-Textarea.bspkName = 'Textarea';
-const style = css `
+[data-bspk='textarea'] {
+    /*! 
+    --min-rows: is set via inline style 
+    --max-rows: is set via inline style
+    */
+
     display: grid;
     width: 100%;
 
@@ -79,6 +50,7 @@ const style = css `
 
         &:focus-within {
             --border-color: var(--stroke-neutral-focus);
+
             outline: none;
             color: var(--foreground-neutral-on-surface);
         }
@@ -107,7 +79,6 @@ const style = css `
             --border-color: var(--status-error);
         }
     }
-`;
+}
 
-export { Textarea, style };
-//# sourceMappingURL=Textarea.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{ToggleOption.js → src/toggle-option.scss}

@@ -1,16 +1,4 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-
-/**
- * A utility component that wraps a checkbox, radio, and switch.
- *
- * @name ToggleOption
- */
-function ToggleOption({ label, description, children, size }) {
-    return (jsxs("label", { css: style, "data-size": size, "data-toggle-option": "", children: [jsx("span", { "data-control": true, children: children }), jsxs("span", { "data-content": true, children: [jsx("span", { "data-label": true, children: label }), description && jsx("span", { "data-description": true, children: description })] })] }));
-}
-ToggleOption.bspkName = 'ToggleOption';
-const style = css `
+[data-bspk='toggle-option'] {
     display: flex;
     width: 100%;
     box-sizing: border-box;
@@ -85,7 +73,6 @@ const style = css `
             color: var(--foreground-neutral-disabled-on-surface);
         }
     }
-`;
+}
 
-export { ToggleOption, style };
-//# sourceMappingURL=ToggleOption.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/tooltip.scss

@@ -0,0 +1,63 @@
+[data-bspk='tooltip'] {
+    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;
+    }
+
+    &[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);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/top-navigation.scss

@@ -0,0 +1,5 @@
+[data-bspk='top-navigation'] {
+    display: flex;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/utils/children.ts

@@ -1,4 +1,4 @@
-import { Children, Fragment, isValidElement, ReactNode } from 'react';
+import { ReactNode , Children, Fragment, isValidElement } from 'react';
 
 export function isValidIcon(child: unknown) {
     return isChildNamed(child, 'Icon');