@bspk/ui 1.0.1 → 1.1.12

package/src/Popover.tsx

@@ -1,6 +1,6 @@
 import { SvgClose } from '@bspk/icons/Close';
-import { css } from '@emotion/react';
-import { cloneElement, ReactElement, useId, useMemo, useRef, useState } from 'react';
+import './popover.scss';
+import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 'react';
 
 import { Button } from './Button';
 import { Portal } from './Portal';
@@ -78,9 +78,8 @@ function Popover({ placement = 'top', header, content, callToAction, children, d
             {child}
             <Portal>
                 <div
-                    css={style}
+                    data-bspk="popover"
                     data-placement={middlewareData?.offset?.placement}
-                    data-popover=""
                     id={id}
                     ref={(node) => {
                         elements.setFloating(node);
@@ -128,110 +127,4 @@ Popover.bspkName = 'Popover';
 
 export { Popover };
 
-export const style = css`
-    position: absolute;
-    z-index: var(--z-index-tooltip-popover);
-    background: var(--surface-neutral-t1-base);
-    box-shadow: var(--drop-shadow-float);
-    padding: var(--spacing-sizing-04);
-    width: 300px;
-    border-radius: var(--radius-large);
-    display: flex;
-    flex-direction: column;
-
-    header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: var(--spacing-sizing-02);
-        gap: var(--spacing-sizing-04);
-
-        button {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 0;
-            margin: 0 0 0 auto;
-            color: var(--foreground-neutral-on-surface-variant-01);
-            height: var(--spacing-sizing-06);
-            width: var(--spacing-sizing-06);
-
-            svg {
-                width: var(--spacing-sizing-06);
-                height: var(--spacing-sizing-06);
-            }
-        }
-    }
-
-    --arrow-size: var(--spacing-sizing-02);
-    --arrow-offset: calc(var(--arrow-size) * -2);
-    --arrow-background-color: var(--surface-neutral-t1-base);
-
-    [data-arrow] {
-        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 transparent transparent transparent;
-    }
-
-    &[data-placement^='top'] {
-        [data-arrow] {
-            bottom: var(--arrow-offset);
-            border-top-color: var(--arrow-background-color);
-            filter: drop-shadow(0 2px 1px var(--shadow-10));
-        }
-    }
-    &[data-placement^='right'] {
-        [data-arrow] {
-            margin-left: calc(var(--arrow-offset) * 2);
-            border-right-color: var(--arrow-background-color);
-            filter: drop-shadow(-2px 0 1px var(--shadow-10));
-        }
-    }
-    &[data-placement^='bottom'] {
-        [data-arrow] {
-            top: var(--arrow-offset);
-            border-bottom-color: var(--arrow-background-color);
-            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);
-            border-left-color: var(--arrow-background-color);
-            filter: drop-shadow(2px 0 1px var(--shadow-10));
-        }
-    }
-
-    [data-content] {
-        gap: var(--spacing-sizing-04);
-        display: flex;
-        flex-direction: column;
-    }
-
-    [data-call-to-action] {
-        margin: 0 0 0 auto;
-        /* background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0 var(--spacing-sizing-03);
-    height: var(--spacing-sizing-12);
-    font: var(--labels-small);
-    color: var(--foreground-brand-primary); */
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Portal.tsx

@@ -26,6 +26,7 @@ function Portal({ children, container }: PortalProps) {
         if (!portalContainer && typeof window !== 'undefined') setPortalContainer(document.body);
     }, [portalContainer]);
 
+    // data-bspk="portal" can't be used here
     return portalContainer && createPortal(children, portalContainer);
 }
 

package/src/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './progress-bar.scss';
 import { CSSProperties, useId } from 'react';
 
 export type ProgressBarProps = {
@@ -37,7 +37,7 @@ function ProgressBar({ size = 'large', completion = 0, align = 'center', label }
     const id = useId();
 
     return (
-        <div css={style} data-align={align} data-progress-bar data-size={size}>
+        <div data-align={align} data-bspk="progress-bar" data-size={size}>
             <progress
                 aria-busy={completion < 100}
                 aria-label="A bounded progress bar from 0 to 100"
@@ -60,51 +60,4 @@ ProgressBar.bspkName = 'ProgressBar';
 
 export { ProgressBar };
 
-export const style = css`
-    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/ProgressCircle.tsx

@@ -1,13 +1,11 @@
 /* eslint-disable react/no-multi-comp */
 
-import { css } from '@emotion/react';
+import './progress-circle.scss';
 import { useId } from 'react';
 
 import { Txt } from './Txt';
 import { TxtVariant } from './utils/txtVariants';
 
-const ANIMATION_SPEED = 1.5;
-
 export type ProgressCircleProps = {
     /** The label of the progress circle. */
     label: string;
@@ -41,9 +39,8 @@ function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircl
     return (
         <div
             aria-labelledby={labelId}
-            css={style}
+            data-bspk="progress-circle"
             data-label-position={labelPosition}
-            data-progress-circle
             data-size={size}
             role="progressbar"
         >
@@ -59,58 +56,6 @@ ProgressCircle.bspkName = 'ProgressCircle';
 
 export { ProgressCircle };
 
-export const style = css`
-    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 ${ANIMATION_SPEED}s 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;
-        }
-    }
-`;
-
 const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
     const strokeWidth = props.strokeWidth || 10;
     const width = 100;

package/src/ProgressionStepper.tsx

@@ -1,6 +1,6 @@
 import { SvgCheck } from '@bspk/icons/Check';
-import { css } from '@emotion/react';
 
+import './progression-stepper.scss';
 import { ElementProps } from '.';
 
 /** A progress stepper item is a single step in the progress bar. */
@@ -68,7 +68,7 @@ function ProgressionStepper({
 }: ElementProps<ProgressionStepperProps, 'div'>) {
     const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
     return (
-        <div {...containerProps} css={style} data-progress-stepper="" data-variant={variant}>
+        <div {...containerProps} data-bspk="progression-stepper" data-variant={variant}>
             {variant === 'widget' && (
                 <label>
                     <span data-title>{steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name}</span>
@@ -118,177 +118,4 @@ ProgressionStepper.bspkName = 'ProgressionStepper';
 
 export { ProgressionStepper };
 
-export const style = css`
-    width: 100%;
-    --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);
-    --inactive-foreground-color: var(--foreground-neutral-on-surface);
-
-    ol {
-        display: flex;
-        width: 100%;
-        margin: 0;
-        padding: 0;
-
-        li {
-            display: flex;
-            flex-direction: column;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            gap: var(--spacing-sizing-02);
-            [data-line-circle] {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                flex-direction: row;
-
-                [data-line] {
-                    background-color: var(--inactive-background-color);
-                    height: 2px;
-                    flex-grow: 1;
-                }
-
-                [data-circle] {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    width: var(--circle-width);
-                    height: var(--circle-width);
-                    border-radius: 50%;
-                    background-color: none;
-                    border: 2px solid var(--inactive-background-color);
-                    font: var(--labels-large);
-
-                    svg {
-                        display: none;
-                        width: var(--spacing-sizing-06);
-                        height: var(--spacing-sizing-06);
-                    }
-                }
-            }
-
-            [data-content] {
-                display: flex;
-                padding: 0 var(--spacing-sizing-10);
-                font: var(--body-small);
-            }
-
-            &:first-of-type {
-                [data-line='before'] {
-                    visibility: hidden;
-                }
-            }
-
-            &:last-of-type {
-                [data-line='after'] {
-                    visibility: hidden;
-                }
-            }
-
-            &[data-status='complete'] {
-                [data-line] {
-                    background-color: var(--active-background-color);
-                }
-                [data-circle] {
-                    background-color: var(--active-background-color);
-                    border: 1px solid var(--active-background-color);
-                    color: var(--active-foreground-color);
-
-                    span {
-                        display: none;
-                    }
-                    svg {
-                        display: block;
-                    }
-                }
-            }
-
-            &[data-status='current'] {
-                [data-line='before'] {
-                    background-color: var(--active-background-color);
-                }
-
-                [data-circle] {
-                    border-color: var(--active-background-color);
-                }
-            }
-        }
-    }
-
-    &[data-variant='vertical'] {
-        ol {
-            flex-direction: column;
-        }
-
-        li {
-            flex-direction: row;
-
-            [data-line-circle] {
-                flex-direction: column;
-                width: var(--circle-width);
-
-                [data-line] {
-                    width: 2px;
-                    height: auto;
-                }
-            }
-            [data-content] {
-                flex-direction: column;
-                padding: var(--spacing-sizing-10) 0;
-            }
-        }
-    }
-
-    &[data-variant='widget'] {
-        --circle-width: var(--spacing-sizing-05);
-
-        label {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sizing-02);
-            margin-bottom: var(--spacing-sizing-03);
-            font: var(--body-small);
-
-            [data-title] {
-                font: var(--labels-base);
-                color: var(--foreground-neutral-on-surface);
-            }
-
-            [data-subtitle] {
-                font: var(--body-x-small);
-                color: var(--foreground-neutral-on-surface-variant-02);
-            }
-        }
-
-        ol {
-            align-items: center;
-            min-height: var(--spacing-sizing-09);
-
-            li {
-                [data-line-circle] {
-                    [data-line] {
-                        width: 10px;
-                    }
-                }
-
-                &[data-status='current'] {
-                    --circle-width: var(--spacing-sizing-09);
-                }
-
-                &[data-status='incomplete'] {
-                    [data-circle] {
-                        span {
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ProgressionStepperBar.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './progression-stepper-bar.scss';
 import { CSSProperties } from 'react';
 
 export type ProgressionStepperBarProps = {
@@ -17,7 +17,11 @@ export type ProgressionStepperBarProps = {
      * @minimum 0
      */
     stepCompleted?: number;
-    /** The size of the progress bar. */
+    /**
+     * The size of the progress bar.
+     *
+     * @default large
+     */
     size?: 'large' | 'small';
 };
 
@@ -34,12 +38,7 @@ function ProgressionStepperBar({
     const stepCompleted = Math.min(stepCompletedProp, stepCount);
 
     return (
-        <div
-            css={style}
-            data-progression-stepper-bar=""
-            data-size={size}
-            style={{ '--steps': stepCount } as CSSProperties}
-        >
+        <div data-bspk="progression-stepper-bar" data-size={size} style={{ '--steps': stepCount } as CSSProperties}>
             <div data-steps>
                 {Array.from({ length: stepCount }, (_, i) => (
                     <div data-complete={i < stepCompleted || undefined} data-step={i} key={i} />
@@ -56,40 +55,4 @@ ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
 
 export { ProgressionStepperBar };
 
-export const style = css`
-    &[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/src/Radio.tsx

@@ -1,5 +1,4 @@
-import { css } from '@emotion/react';
-
+import './radio.scss';
 import { ToggleControlProps, ElementProps } from './';
 
 export type RadioProps = Pick<
@@ -19,7 +18,7 @@ function Radio(props: ElementProps<RadioProps, 'input'>) {
     const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
 
     return (
-        <span css={style} data-radio>
+        <span data-bspk="radio">
             <input
                 {...otherProps}
                 checked={!!checked}
@@ -37,83 +36,4 @@ Radio.bspkName = 'Radio';
 
 export { Radio };
 
-export const style = css`
-    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/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import { Radio } from './Radio';
-import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
 import { ElementProps, CommonProps } from './';
 
@@ -37,7 +37,7 @@ function RadioGroup({
     ...props
 }: ElementProps<RadioGroupProps, 'div'>) {
     return (
-        <div {...props} data-control-group data-radio-group role="radiogroup" style={{ display: 'contents' }}>
+        <div {...props} data-bspk="radio-group" role="radiogroup" style={{ display: 'contents' }}>
             {options.map(({ label, description, value }) => {
                 return (
                     <ToggleOption description={description} key={value} label={label} size={size}>

package/src/RadioOption.tsx

@@ -1,5 +1,5 @@
-import { Radio, RadioProps } from './Radio';
-import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+import { RadioProps, Radio } from './Radio';
+import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
 export type RadioOptionProps = Pick<RadioProps, 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'> &
     Pick<ToggleOptionProps, 'description' | 'label'>;
@@ -11,7 +11,7 @@ export type RadioOptionProps = Pick<RadioProps, 'checked' | 'disabled' | 'invali
  */
 function RadioOption({ label, description, ...checkboxProps }: RadioOptionProps) {
     return (
-        <ToggleOption data-checkbox-field description={description} label={label}>
+        <ToggleOption data-bspk="radio-option" description={description} label={label}>
             <Radio {...checkboxProps} aria-label={label} />
         </ToggleOption>
     );