@bspk/ui 1.0.1 → 1.1.12

package/src/SearchBar.tsx

@@ -1,10 +1,10 @@
 import { SvgSearch } from '@bspk/icons/Search';
-import { css } from '@emotion/react';
+import './search-bar.scss';
 import { useRef } from 'react';
 
-import { Menu, MenuItem, MenuProps } from './Menu';
+import { MenuItem, MenuProps, Menu } from './Menu';
 import { Portal } from './Portal';
-import { TextInput, TextInputProps } from './TextInput';
+import { TextInputProps, TextInput } from './TextInput';
 import { useFloatingMenu } from './hooks/useFloatingMenu';
 import { useId } from './hooks/useId';
 //import { useFloatingMenu } from './hooks/useFloatingMenu';
@@ -65,7 +65,7 @@ function SearchBar({
                 aria-label={ariaLabel}
                 autoComplete="off"
                 containerRef={triggerRef}
-                css={style}
+                data-bspk="search-bar"
                 id={id}
                 inputRef={(node) => {
                     inputRef?.(node || null);
@@ -112,10 +112,4 @@ SearchBar.bspkName = 'SearchBar';
 
 export { SearchBar };
 
-export const style = css`
-    display: flex;
-    width: 100%;
-    min-width: 300px;
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SegmentedControl.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './segmented-control.scss';
 import { Fragment } from 'react';
 
 import { Tooltip } from './Tooltip';
@@ -83,7 +83,7 @@ function SegmentedControl({
     const hideLabels = showLabelsProp === false && items.every((item) => item.icon && item.label);
 
     return (
-        <div {...containerProps} css={style} data-option-group data-size={size} data-width={width}>
+        <div {...containerProps} data-bspk="segmented-control" data-size={size} data-width={width}>
             {items.map((item, index) => {
                 const isActive = item.value === value;
                 return (
@@ -116,118 +116,4 @@ SegmentedControl.bspkName = 'SegmentedControl';
 
 export { SegmentedControl };
 
-export const style = css`
-    display: flex;
-    flex-direction: row;
-    max-width: 100%;
-    --outer-height: var(--spacing-sizing-10);
-    --inner-height: var(--spacing-sizing-08);
-    --svg-width: 20px;
-
-    &[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;
-    }
-
-    &[data-size='small'] {
-        --outer-height: var(--spacing-sizing-08);
-        --inner-height: var(--spacing-sizing-06);
-        --svg-width: 16px;
-    }
-
-    svg {
-        width: var(--svg-width) !important;
-    }
-
-    button {
-        border: 0;
-        cursor: pointer;
-        color: var(--foreground-neutral-on-surface);
-        flex-grow: var(--btn-flex-grow);
-        font: var(--labels-small);
-        margin: 0;
-        height: var(--spacing-sizing-12);
-        background: transparent;
-        position: relative;
-
-        [data-focus-ring] {
-            display: none;
-        }
-
-        [data-outer] {
-            height: var(--outer-height);
-            background: var(--surface-neutral-t3-low);
-            margin: var(--spacing-sizing-01) 0;
-            padding: var(--spacing-sizing-01) 0;
-            display: block;
-        }
-
-        [data-inner] {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            height: var(--inner-height);
-            border-bottom: 1px solid transparent;
-            justify-content: center;
-            gap: var(--spacing-sizing-01);
-            border-radius: var(--radius-small);
-            padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
-        }
-
-        &:first-of-type {
-            [data-outer] {
-                border-top-left-radius: var(--radius-medium);
-                border-bottom-left-radius: var(--radius-medium);
-                padding-left: var(--spacing-sizing-01);
-            }
-        }
-
-        &:last-of-type {
-            [data-outer] {
-                border-top-right-radius: var(--radius-medium);
-                border-bottom-right-radius: var(--radius-medium);
-                padding-right: var(--spacing-sizing-01);
-            }
-        }
-
-        &:not(:disabled) {
-            &:hover {
-                [data-inner] {
-                    background: var(--interactions-neutral-hover-opacity);
-                }
-            }
-
-            &:active {
-                [data-inner] {
-                    background: var(--interactions-neutral-press-opacity);
-                }
-            }
-
-            &[data-selected] {
-                [data-inner] {
-                    background: var(--surface-neutral-t1-base);
-                }
-            }
-
-            &:focus-visible {
-                z-index: 2;
-                outline: solid 2px var(--stroke-neutral-focus);
-            }
-        }
-
-        &:disabled {
-            pointer-events: none;
-            color: var(--foreground-neutral-disabled-on-surface);
-            cursor: not-allowed;
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Skeleton.tsx

@@ -1,23 +1,39 @@
-import { css } from '@emotion/react';
+import './skeleton.scss';
 import { CSSProperties } from 'react';
 
 import { TxtVariant } from './utils/txtVariants';
 
-export type SkeletonVariant = TxtVariant | 'other';
-
 export type SkeletonProps = {
     /**
-     * The text variant of the skeleton. If 'other' skeleton will expand to size of nearest relative positioned parent.
+     * The text variant of the skeleton.
+     *
+     * @default text
+     */
+    variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'text' | 'thumbnail';
+    /**
+     * The size of the text. This is only used when variant is 'text'.
      *
-     * @default other
+     * @default body-base
      */
-    variant?: SkeletonVariant;
+    textVariant?: TxtVariant;
     /**
-     * The number of lines showing. Ignored when variant is other.
+     * The number of lines showing. This is only used when variant is 'text'.
      *
-     * @default 1
+     * @default 3
      */
-    lines?: number;
+    textLines?: number;
+    /**
+     * The width of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
+     *
+     * @default 200
+     */
+    width?: number | string;
+    /**
+     * The height of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
+     *
+     * @default 100
+     */
+    height?: number | string;
 };
 
 /**
@@ -25,21 +41,28 @@ export type SkeletonProps = {
  *
  * @name Skeleton
  */
-function Skeleton({ variant = 'other', lines: linesProp = 3 }: SkeletonProps) {
-    const lines = Math.max(1, linesProp || 0);
-
+function Skeleton({
+    width = 100,
+    height = 100,
+    textLines,
+    textVariant: textSize,
+    variant = 'rectangular',
+}: SkeletonProps) {
     return (
         <div
-            css={style}
-            data-skeleton
+            data-bspk="skeleton"
+            data-variant={variant}
             style={
                 {
-                    '--margin': `calc(var(--${variant}-line-height) - var(--${variant}-size))`,
-                    '--height': `var(--${variant}-size)`,
+                    '--height': typeof height === 'number' ? `${height}px` : height,
+                    '--text-height': `var(--${textSize}-size)`,
+                    '--text-margin': `calc(var(--${textSize}-line-height) - var(--${textSize}-size))`,
+                    '--width': typeof width === 'number' ? `${width}px` : width,
                 } as CSSProperties
             }
         >
-            {variant !== 'other' && [...Array(lines)].map((_, index) => <div data-line key={index} />)}
+            {variant === 'text' &&
+                [...Array(Math.max(1, textLines || 0))].map((_, index) => <div data-line key={index} />)}
         </div>
     );
 }
@@ -48,43 +71,4 @@ Skeleton.bspkName = 'Skeleton';
 
 export { Skeleton };
 
-export const style = css`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--margin);
-
-    animation: skeleton-pulse 1.5s infinite;
-    @keyframes skeleton-pulse {
-        0% {
-            opacity: 0.8;
-        }
-        50% {
-            opacity: 0.4;
-        }
-        100% {
-            opacity: 0.8;
-        }
-    }
-
-    &:empty {
-        width: auto;
-        height: auto;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--foreground-neutral-skeleton-element);
-        border-radius: var(--radius-small);
-    }
-
-    [data-line] {
-        width: 100%;
-        background: var(--foreground-neutral-skeleton-element);
-        border-radius: var(--radius-small);
-        height: var(--height);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderAnywhere.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import brandStyle from './styles/anywhere';
-import baseStyle from './styles/base';
+import '@bspk/styles/anywhere.css';
+import './base.scss';
 
 /**
  * Utility to provide the Anywhere styles to the application.
@@ -9,23 +7,11 @@ import baseStyle from './styles/base';
  * @name StylesProviderAnywhere
  */
 function StylesProviderAnywhere() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'anywhere');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderAnywhere.bspkName = 'StylesProviderAnywhere';
 
 export { StylesProviderAnywhere };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderBetterHomesGardens.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/better-homes-gardens';
+import '@bspk/styles/better-homes-gardens.css';
+import './base.scss';
 
 /**
  * Utility to provide the Better Homes & Gardens styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/better-homes-gardens';
  * @name StylesProviderBetterHomesGardens
  */
 function StylesProviderBetterHomesGardens() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'better-homes-gardens');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderBetterHomesGardens.bspkName = 'StylesProviderBetterHomesGardens';
 
 export { StylesProviderBetterHomesGardens };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderCartus.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/cartus';
+import '@bspk/styles/cartus.css';
+import './base.scss';
 
 /**
  * Utility to provide the Cartus styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/cartus';
  * @name StylesProviderCartus
  */
 function StylesProviderCartus() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'cartus');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderCartus.bspkName = 'StylesProviderCartus';
 
 export { StylesProviderCartus };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderCentury21.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/century-21';
+import '@bspk/styles/century-21.css';
+import './base.scss';
 
 /**
  * Utility to provide the Century 21 styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/century-21';
  * @name StylesProviderCentury21
  */
 function StylesProviderCentury21() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'century-21');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderCentury21.bspkName = 'StylesProviderCentury21';
 
 export { StylesProviderCentury21 };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderColdwellBanker.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/coldwell-banker';
+import '@bspk/styles/coldwell-banker.css';
+import './base.scss';
 
 /**
  * Utility to provide the Coldwell Banker styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/coldwell-banker';
  * @name StylesProviderColdwellBanker
  */
 function StylesProviderColdwellBanker() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'coldwell-banker');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderColdwellBanker.bspkName = 'StylesProviderColdwellBanker';
 
 export { StylesProviderColdwellBanker };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderCorcoran.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/corcoran';
+import '@bspk/styles/corcoran.css';
+import './base.scss';
 
 /**
  * Utility to provide the Corcoran styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/corcoran';
  * @name StylesProviderCorcoran
  */
 function StylesProviderCorcoran() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'corcoran');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderCorcoran.bspkName = 'StylesProviderCorcoran';
 
 export { StylesProviderCorcoran };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderDenaliBoss.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/denali-boss';
+import '@bspk/styles/denali-boss.css';
+import './base.scss';
 
 /**
  * Utility to provide the Denali Boss styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/denali-boss';
  * @name StylesProviderDenaliBoss
  */
 function StylesProviderDenaliBoss() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'denali-boss');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderDenaliBoss.bspkName = 'StylesProviderDenaliBoss';
 
 export { StylesProviderDenaliBoss };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderEra.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/era';
+import '@bspk/styles/era.css';
+import './base.scss';
 
 /**
  * Utility to provide the ERA styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/era';
  * @name StylesProviderEra
  */
 function StylesProviderEra() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'era');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderEra.bspkName = 'StylesProviderEra';
 
 export { StylesProviderEra };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderSothebys.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useRef } from 'react';
-
-import baseStyle from './styles/base';
-import brandStyle from './styles/sothebys';
+import '@bspk/styles/sothebys.css';
+import './base.scss';
 
 /**
  * Utility to provide the Sotheby's styles to the application.
@@ -9,23 +7,11 @@ import brandStyle from './styles/sothebys';
  * @name StylesProviderSothebys
  */
 function StylesProviderSothebys() {
-    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
-
-    useEffect(() => {
-        styleEmentRef.current = document.createElement('style');
-        styleEmentRef.current.setAttribute('data-bspk', 'sothebys');
-        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
-        document.head.appendChild(styleEmentRef.current);
-        document.body.style.display = '';
-
-        return () => {
-            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
-        };
-    }, []);
-
     return <></>;
 }
 
 StylesProviderSothebys.bspkName = 'StylesProviderSothebys';
 
 export { StylesProviderSothebys };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */