@bspk/ui 1.0.1 → 1.1.12

package/src/CheckboxGroup.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from './Checkbox';
-import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
 import { ElementProps, CommonProps } from './';
 
@@ -56,7 +56,7 @@ function CheckboxGroup({
     ...props
 }: ElementProps<CheckboxGroupProps, 'div'>) {
     return (
-        <div {...props} data-checkbox-group data-control-group role="group">
+        <div {...props} data-bspk="checkbox-group" role="group">
             {selectAll && (
                 <>
                     <ToggleOption label={selectAllProps?.label || 'All'}>

package/src/CheckboxOption.tsx

@@ -1,5 +1,5 @@
-import { Checkbox, CheckboxProps } from './Checkbox';
-import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+import { CheckboxProps, Checkbox } from './Checkbox';
+import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
 export type CheckboxOptionProps = Pick<
     CheckboxProps,
@@ -14,7 +14,7 @@ export type CheckboxOptionProps = Pick<
  */
 function CheckboxOption({ label, description, ...checkboxProps }: CheckboxOptionProps) {
     return (
-        <ToggleOption data-checkbox-field description={description} label={label}>
+        <ToggleOption data-bspk="checkbox-option" description={description} label={label}>
             <Checkbox {...checkboxProps} aria-label={label} />
         </ToggleOption>
     );

package/src/Chip.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './chip.scss';
 import { CSSProperties, ReactNode } from 'react';
 
 import { CommonProps } from '.';
@@ -68,8 +68,7 @@ function Chip({
 
     return (
         <span
-            css={style}
-            data-chip=""
+            data-bspk="chip"
             data-disabled={disabled || undefined}
             data-flat={flat || undefined}
             data-selected={selected || undefined}
@@ -87,69 +86,4 @@ Chip.bspkName = 'Chip';
 
 export { Chip };
 
-export const style = css`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: fit-content;
-    height: var(--spacing-sizing-06);
-    padding: 0 var(--spacing-sizing-02);
-    font: var(--labels-small);
-    color: var(--foreground-neutral-on-surface-variant-01);
-    background-color: var(--surface-neutral-t1-base);
-    border: 1px solid var(--stroke-neutral-low);
-    border-radius: var(--radius-small);
-
-    &:not([data-flat]) {
-        box-shadow: var(--drop-shadow-raise);
-    }
-
-    &[data-variant='filter'] {
-        cursor: pointer;
-    }
-
-    &[data-wrap] {
-        height: auto;
-    }
-
-    &[data-disabled] {
-        color: var(--foreground-neutral-disabled-on-surface);
-        cursor: not-allowed;
-        border-color: var(--stroke-neutral-disabled-light);
-        background-image: 
-    //
-
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &:not([data-disabled]) {
-        &:hover {
-            background-image: 
-    //
-
-                linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-        }
-
-        &:active {
-            background-image: 
-    //
-
-                linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-        }
-
-        &:focus {
-            outline: 1px solid var(--stroke-neutral-focus);
-            border-color: var(--stroke-neutral-focus);
-        }
-    }
-
-    &[data-selected] {
-        background-color: var(--surface-brand-primary-highlight);
-        border-color: var(--stroke-brand-primary);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Dialog.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './dialog.scss';
 import { FocusTrap } from 'focus-trap-react';
 import { ReactNode, Ref, useCallback, useEffect, useRef, useState } from 'react';
 
@@ -115,8 +115,7 @@ function Dialog({
             <Portal>
                 <div
                     {...containerProps}
-                    css={style}
-                    data-dialog-root=""
+                    data-bspk="dialog"
                     data-placement={placement}
                     data-visibility={visibility}
                     id={id}
@@ -150,155 +149,4 @@ Dialog.bspkName = 'Dialog';
 
 export { Dialog };
 
-export const style = css`
-    position: fixed;
-    inset: 0;
-    z-index: var(--z-index-dialog);
-
-    [data-dialog-box] {
-        text-align: start;
-        position: relative;
-        border-radius: var(--radius-large);
-        box-shadow: var(--drop-shadow-float);
-        background: var(--surface-neutral-t1-base);
-        color: var(--foreground-neutral-on-surface);
-        max-height: calc(100vh - var(--spacing-sizing-24));
-        overflow: scroll;
-        z-index: 2;
-
-        > :first-of-type {
-            margin-top: 0;
-        }
-
-        > :last-child {
-            margin-bottom: 0;
-        }
-
-        // we make the width responsive to the viewport
-        @media (min-width: 640px) {
-            width: 90%;
-        }
-
-        @media (min-width: 768px) {
-            width: 80%;
-        }
-
-        @media (min-width: 1024px) {
-            width: 60%;
-        }
-
-        @media (min-width: 1280px) {
-            width: 50%;
-        }
-    }
-
-    [data-dialog-backdrop] {
-        z-index: 1;
-        position: fixed;
-        inset: 0;
-        background-color: var(--background-scrim);
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-
-    &[data-visibility='show'] {
-        [data-dialog-backdrop] {
-            opacity: 1;
-        }
-    }
-
-    &[data-placement='center'] {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        [data-dialog-box] {
-            transition: opacity 1s;
-            opacity: 0;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                opacity: 1;
-            }
-        }
-    }
-
-    &[data-placement='bottom'] {
-        [data-dialog-box] {
-            position: absolute;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            width: 600px;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: -100vh;
-            transition: bottom 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                bottom: 0;
-            }
-        }
-    }
-
-    &[data-placement='top'] {
-        [data-dialog-box] {
-            position: absolute;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            width: 600px;
-            left: 50%;
-            transform: translateX(-50%);
-            top: -100vh;
-            transition: top 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                top: 0;
-            }
-        }
-    }
-
-    &[data-placement='left'] {
-        [data-dialog-box] {
-            position: absolute;
-            max-height: unset;
-            width: 280px;
-            height: 100vh;
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            left: -100vw;
-            transition: left 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                left: 0;
-            }
-        }
-    }
-
-    &[data-placement='right'] {
-        [data-dialog-box] {
-            position: absolute;
-            max-height: unset;
-            width: 280px;
-            height: 100vh;
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-            right: -100vw;
-            transition: right 0.3s;
-        }
-
-        &[data-visibility='show'] {
-            [data-dialog-box] {
-                right: 0;
-            }
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Divider.tsx

@@ -1,5 +1,4 @@
-import { css } from '@emotion/react';
-
+import './divider.scss';
 import { ElementProps } from './';
 
 export type DividerProps = {
@@ -56,8 +55,7 @@ function Divider({
         <div
             {...props}
             aria-orientation={orientation}
-            css={style}
-            data-divider
+            data-bspk="divider"
             data-hide-padding={!padding || undefined}
             data-orientation={orientation}
             data-thickness={thickness}
@@ -76,54 +74,4 @@ Divider.bspkName = 'Divider';
 
 export { Divider };
 
-export const style = css`
-    display: flex;
-    background-color: var(--stroke-neutral-low);
-    align-self: stretch;
-    justify-content: stretch;
-    margin: 0;
-    padding: 0;
-    align-content: stretch;
-    content: 'hello';
-
-    --length: calc(100% - var(--inset) * 2);
-
-    &, // default
-  &[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/src/Dropdown.tsx

@@ -1,6 +1,6 @@
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { css } from '@emotion/react';
 
+import './dropdown.scss';
 import { ListItem } from './ListItem';
 import { Menu, MenuProps } from './Menu';
 import { Portal } from './Portal';
@@ -93,8 +93,7 @@ function Dropdown<O extends DropdownOption = DropdownOption>({
             <input defaultValue={selected} name={name} type="hidden" />
             <button
                 aria-label={ariaLabel}
-                css={style}
-                data-dropdown=""
+                data-bspk="dropdown"
                 data-empty={dropdownLabel ? undefined : ''}
                 data-invalid={invalid || undefined}
                 data-size={size}
@@ -132,120 +131,4 @@ Dropdown.bspkName = 'Dropdown';
 
 export { Dropdown };
 
-export const style = css`
-    // default -- size medium not disabled or readonly
-    --dropdown-background: var(--surface-neutral-t1-base);
-    --dropdown-border-color: var(--stroke-neutral-base);
-    --dropdown-text-color: var(--foreground-neutral-on-surface);
-    --dropdown-height: var(--spacing-sizing-10);
-    --dropdown-font: var(--body-base);
-    --dropdown-clear-height: var(--spacing-sizing-05);
-    --dropdown-padding: var(--spacing-sizing-03);
-    --dropdown-icon-width: var(--spacing-sizing-05);
-
-    position: relative;
-    width: 100%;
-    max-width: 280px;
-    outline: unset;
-    min-height: var(--dropdown-height);
-    max-height: var(--dropdown-height);
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-sizing-02);
-    flex-grow: 0;
-    flex-shrink: 0;
-    text-align: left;
-    font: var(--dropdown-font);
-    border: 1px solid var(--dropdown-border-color);
-    border-radius: var(--radius-small);
-    background: var(--dropdown-background);
-    padding: 0 var(--dropdown-padding);
-
-    [data-placeholder] {
-        display: block;
-        max-width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        padding: 0;
-
-        [data-inner] {
-            min-height: auto;
-            padding: 0;
-        }
-
-        [data-item-label] [data-text] {
-            color: var(--dropdown-text-color);
-        }
-    }
-
-    [data-svg] {
-        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);
-        --dropdown-clear-height: var(--spacing-sizing-05);
-        --dropdown-padding: var(--spacing-sizing-02);
-        --dropdown-icon-width: var(--spacing-sizing-05);
-    }
-
-    &[data-size='large'] {
-        --dropdown-height: var(--spacing-sizing-12);
-        --dropdown-font: var(--body-large);
-        --dropdown-clear-height: var(--spacing-sizing-06);
-        --dropdown-icon-width: var(--spacing-sizing-06);
-    }
-
-    &:disabled {
-        --dropdown-text-color: var(--foreground-neutral-disabled-on-surface);
-        --dropdown-border-color: var(--stroke-neutral-disabled-light);
-        --dropdown-background:
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-
-        &[aria-readonly]:not([data-empty]) {
-            --dropdown-text-color: var(--foreground-neutral-on-surface);
-        }
-    }
-
-    &:not(:disabled) {
-        &:focus {
-            --dropdown-border-color: var(--stroke-brand-primary);
-        }
-
-        &:hover {
-            --dropdown-background:
-                linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-        }
-
-        &:active {
-            --dropdown-background:
-                linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-        }
-    }
-
-    &[data-invalid] {
-        --dropdown-border-color: var(--status-error);
-    }
-
-    &[data-empty] {
-        --dropdown-text-color: var(--foreground-neutral-on-surface-variant-03);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/DropdownField.tsx

@@ -1,5 +1,5 @@
-import { Dropdown, DropdownProps } from './Dropdown';
-import { FormField, FormFieldProps } from './FormField';
+import { DropdownProps, Dropdown } from './Dropdown';
+import { FormFieldProps, FormField } from './FormField';
 
 export type DropdownFieldProps = Pick<
     DropdownProps,
@@ -37,6 +37,7 @@ function DropdownField({
     return (
         <FormField
             controlId={id}
+            data-bspk="dropdown-field"
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}

package/src/EmptyState.tsx

@@ -21,6 +21,12 @@ export type EmptyStateProps = {
      * @required
      */
     body: string;
+    /**
+     * The text alignment of the body.
+     *
+     * @default center
+     */
+    bodyAlign?: 'center' | 'left' | 'right';
     /**
      * This property may be undefined or an object containing required CallToActionButton properties.
      *
@@ -34,12 +40,12 @@ export type EmptyStateProps = {
  *
  * @name EmptyState
  */
-function EmptyState({ children, header, body, callToAction }: EmptyStateProps) {
+function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
     return (
         <Layout
             align="center"
             column
-            data-empty-state
+            data-bspk="empty-state"
             style={{
                 margin: 'var(--spacing-sizing-04)',
                 maxWidth: '500px',
@@ -47,10 +53,10 @@ function EmptyState({ children, header, body, callToAction }: EmptyStateProps) {
         >
             {children}
             <Layout align="center" column gap="4">
-                <Txt as="div" variant="heading-h5">
+                <Txt as="header" variant="heading-h5">
                     {header}
                 </Txt>
-                <Txt as="div" variant="body-base">
+                <Txt as="p" style={{ textAlign: bodyAlign }} variant="body-base">
                     {body}
                 </Txt>
             </Layout>

package/src/Fab.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './fab.scss';
 import { ElementType } from 'react';
 
 import { ButtonProps } from './Button';
@@ -71,9 +71,8 @@ function Fab<As extends ElementType = 'button'>({
         <As
             {...otherProps}
             aria-label={label}
-            css={style}
+            data-bspk="fab"
             data-container={container}
-            data-fab
             data-placement={placement}
             data-round={hideLabel || undefined}
             data-size={size}
@@ -97,126 +96,4 @@ Fab.bspkName = 'Fab';
 
 export { Fab };
 
-export const style = css`
-    --placement-offset: var(--spacing-sizing-04);
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-sizing-02);
-    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);
-    border-radius: var(--radius-small);
-
-    &[data-container='page'] {
-        position: fixed;
-    }
-
-    &[data-container='local'] {
-        position: absolute;
-    }
-
-    &[data-placement='top-right'] {
-        top: var(--placement-offset);
-        right: var(--placement-offset);
-    }
-
-    &[data-placement='bottom-right'] {
-        bottom: var(--placement-offset);
-        right: var(--placement-offset);
-    }
-
-    &[data-placement='top-left'] {
-        top: var(--placement-offset);
-        left: var(--placement-offset);
-    }
-
-    &[data-placement='bottom-left'] {
-        bottom: var(--placement-offset);
-        left: var(--placement-offset);
-    }
-
-    > [data-fab-icon] {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    > [data-fab-label] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    &[data-size='small'] {
-        font: var(--labels-base);
-        height: var(--spacing-sizing-10);
-        padding: 0 var(--spacing-sizing-04);
-
-        > [data-fab-icon] {
-            width: var(--spacing-sizing-05);
-        }
-    }
-
-    &[data-size='medium'] {
-        font: var(--labels-large);
-        height: var(--spacing-sizing-14);
-        padding: 0 var(--spacing-sizing-07);
-
-        > [data-fab-icon] {
-            width: var(--spacing-sizing-06);
-        }
-    }
-
-    &[data-variant='primary'] {
-        --variant-background: var(--surface-brand-primary);
-        --variant-foreground: var(--foreground-brand-on-primary);
-    }
-
-    &[data-variant='secondary'] {
-        --variant-background: var(--surface-brand-secondary);
-        --variant-foreground: var(--foreground-brand-on-secondary);
-    }
-
-    &[data-variant='neutral'] {
-        --variant-background: var(--surface-neutral-t1-base);
-        --variant-foreground: var(--foreground-neutral-on-surface-variant-01);
-    }
-
-    background: var(--variant-background);
-    color: var(--variant-foreground);
-    --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
-
-    [data-pseudo='hover'] > &,
-    &:hover {
-        background:
-            linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),
-            var(--variant-gradient);
-    }
-
-    [data-pseudo='active'] > &,
-    &:active {
-        background:
-            linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),
-            var(--variant-gradient);
-    }
-
-    [data-pseudo='focus'] > &,
-    &:focus-visible {
-        outline: solid 2px var(--stroke-neutral-focus);
-    }
-
-    &[data-round] {
-        border-radius: var(--radius-circular);
-        aspect-ratio: 1/1;
-        padding: 0;
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */