@bspk/ui 1.0.1 → 1.1.12

package/src/Switch.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './switch.scss';
 import { ChangeEvent } from 'react';
 
 import { CommonProps } from './';
@@ -37,7 +37,7 @@ function Switch(props: SwitchProps) {
     } = props;
 
     return (
-        <span css={style} data-switch>
+        <span data-bspk="switch">
             <input
                 {...otherProps}
                 aria-disabled={disabled || undefined}
@@ -55,68 +55,4 @@ Switch.bspkName = 'Switch';
 
 export { Switch };
 
-export const style = css`
-    --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'] {
-        position: absolute;
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        z-index: 2;
-        cursor: pointer;
-    }
-
-    box-sizing: border-box;
-    width: var(--track-width);
-    height: var(--spacing-sizing-05);
-    border-radius: var(--spacing-sizing-05);
-    background-color: var(--track-bg);
-    position: relative;
-    z-index: 1;
-
-    span {
-        display: block;
-        width: var(--toggle-width);
-        height: var(--toggle-width);
-        border-radius: var(--radius-circular);
-        background-color: var(--toggle-bg);
-        transition: left 0.2s;
-        box-shadow: var(--drop-shadow-raise);
-        left: 2px;
-        top: 2px;
-        position: absolute;
-    }
-
-    &:has(input[type='checkbox']:checked) {
-        --track-bg: var(--foreground-brand-primary);
-
-        span {
-            left: calc(var(--track-width) - var(--toggle-width) - 2px);
-        }
-    }
-
-    &:has(input[type='checkbox']:disabled) {
-        input[type='checkbox'] {
-            pointer-events: none;
-        }
-        --track-bg: var(--interactions-disabled-opacity);
-        --toggle-bg: var(--foreground-neutral-disabled-on-surface);
-
-        &:has(input[type='checkbox']:checked) span {
-            --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SwitchGroup.tsx

@@ -1,5 +1,5 @@
 import { Switch } from './Switch';
-import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
 import { ToggleControlProps, ElementProps, CommonProps } from './';
 
@@ -35,7 +35,7 @@ export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
  */
 function SwitchGroup({ onChange, options = [], name, values = [], ...props }: ElementProps<SwitchGroupProps, 'div'>) {
     return (
-        <div {...props} data-control-group data-switch-group role="group">
+        <div {...props} data-bspk="switch-group" role="group">
             {options.map(({ label, description, value }) => (
                 <ToggleOption description={description} key={value} label={label}>
                     <Switch

package/src/SwitchOption.tsx

@@ -1,5 +1,5 @@
-import { Switch, SwitchProps } from './Switch';
-import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+import { SwitchProps, Switch } from './Switch';
+import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
 export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> &
     Pick<ToggleOptionProps, 'description' | 'label' | 'size'>;
@@ -11,7 +11,7 @@ export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> &
  */
 function SwitchOption({ label, description, size, ...checkboxProps }: SwitchOptionProps) {
     return (
-        <ToggleOption data-checkbox-field description={description} label={label} size={size}>
+        <ToggleOption data-bspk="switch-option" description={description} label={label} size={size}>
             <Switch {...checkboxProps} aria-label={label} />
         </ToggleOption>
     );

package/src/TabGroup.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './tab-group.scss';
 import { ReactNode } from 'react';
 
 import { Badge } from './Badge';
@@ -87,10 +87,9 @@ function TabGroup({
     return (
         <div
             {...containerProps}
-            css={style}
+            data-bspk="tab-group"
             data-hide-trail={(width === 'hug' && !showTrail) || undefined}
             data-size={size}
-            data-tab-group
             data-width={width}
         >
             {items.map((item) => {
@@ -119,101 +118,4 @@ TabGroup.bspkName = 'TabGroup';
 
 export { TabGroup };
 
-export const style = css`
-    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;
-    }
-
-    --font: var(--labels-base);
-    --height: var(--spacing-sizing-10);
-
-    &[data-size='small'] {
-        --font: var(--labels-small);
-        --height: var(--spacing-sizing-08);
-    }
-
-    &[data-size='large'] {
-        --font: var(--labels-large);
-        --height: var(--spacing-sizing-12);
-    }
-
-    button {
-        border: 0;
-        cursor: pointer;
-        color: var(--foreground-neutral-on-surface-variant-02);
-        background: none;
-        flex-grow: var(--btn-flex-grow);
-        font: var(--font);
-
-        &:hover {
-            background: var(--interactions-neutral-hover-opacity);
-        }
-
-        &:active {
-            background: var(--interactions-neutral-press-opacity);
-        }
-
-        &:disabled {
-            pointer-events: none;
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-
-        &:focus-visible {
-            outline: solid 2px var(--stroke-neutral-focus);
-        }
-
-        span {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            margin: 0 var(--spacing-sizing-04);
-            height: var(--height);
-            justify-content: center;
-            position: relative;
-            gap: var(--spacing-sizing-02);
-
-            svg {
-                width: var(--spacing-sizing-05);
-            }
-        }
-
-        &[data-active] {
-            color: var(--foreground-brand-primary);
-            span {
-                &:after {
-                    content: '';
-                    display: block;
-                    width: 100%;
-                    height: 2px;
-                    background-color: var(--stroke-brand-primary);
-                    bottom: -1px;
-                    position: absolute;
-                    border-top-right-radius: 2px;
-                    border-top-left-radius: 2px;
-                }
-
-                svg {
-                    color: var(--surface-brand-primary);
-                }
-            }
-        }
-    }
-
-    &[data-hide-trail] {
-        border-bottom: none;
-        button {
-            border-bottom: 1px solid var(--stroke-neutral-low);
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Table.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './table.scss';
 import { ReactNode } from 'react';
 
 import { ElementProps } from '.';
@@ -46,8 +46,7 @@ function Table<R extends TableRow>({ rows, columns, ...props }: ElementProps<Tab
     return (
         <div
             {...props}
-            css={style}
-            data-table
+            data-bspk="table"
             style={{
                 ...props.style,
                 gridTemplateColumns: columns.map((c) => `minmax(0, ${c.width || '1fr'})`).join(' '),
@@ -77,50 +76,4 @@ Table.bspkName = 'Table';
 
 export { Table };
 
-export const style = css`
-    width: 100%;
-    border-collapse: separate;
-    text-align: left;
-    border-spacing: 2rem 0.125rem;
-    display: grid;
-    color: var(--foreground-neutral-on-surface);
-    font: var(--labels-base);
-    border-radius: var(--radius-medium);
-    border: 1px solid var(--stroke-neutral-low);
-
-    [data-cell] {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-sizing-02);
-        padding: var(--spacing-sizing-04);
-        background-color: var(--surface-neutral-t1-base);
-        border-bottom: var(--stroke-neutral-low) solid 1px;
-        font: var(--labels-small);
-        p {
-            margin: 0;
-            padding: 0;
-            font: var(--body-small);
-        }
-    }
-
-    [data-head] {
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        border-bottom: 1px solid var(--stroke-neutral-base);
-        background: var(--surface-neutral-t2-lowest);
-        height: var(--spacing-sizing-10);
-        padding: 0 var(--spacing-sizing-03);
-        font: var(--labels-base);
-
-        &[data-head='first'] {
-            border-top-left-radius: var(--radius-medium);
-        }
-
-        &[data-head='last'] {
-            border-top-right-radius: var(--radius-medium);
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Tag.tsx

@@ -1,7 +1,7 @@
-import { css } from '@emotion/react';
+import './tag.scss';
 import { ElementType, ReactNode } from 'react';
 
-import { ColorVariant, COLOR_VARIABLES } from './utils/colorVariants';
+import { ColorVariant } from './utils/colorVariants';
 
 import { ElementProps } from './';
 
@@ -66,10 +66,9 @@ function Tag<As extends ElementType = 'span'>({
     return (
         <As
             {...props}
-            css={style}
+            data-bspk="tag"
             data-color={color}
             data-size={size}
-            data-tag
             data-variant={variant}
             data-wrap={wrap || undefined}
         >
@@ -83,67 +82,4 @@ Tag.bspkName = 'Tag';
 
 export { Tag };
 
-export const style = css`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: fit-content;
-    position: relative;
-    padding: 0 var(--spacing-sizing-03);
-    border-radius: var(--radius-small);
-    color: var(--foreground) !important;
-    background: var(--background);
-    text-decoration: none;
-    font: unset;
-    text-decoration: unset;
-    white-space: nowrap;
-
-    &[data-wrap] {
-        height: auto;
-    }
-
-    &[data-variant='pill'] {
-        border-radius: var(--radius-circular);
-    }
-
-    &[data-variant='corner-wrap'] {
-        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);
-    }
-
-    &[data-size='x-small'] {
-        font: var(--labels-x-small);
-        height: var(--spacing-sizing-06);
-    }
-
-    &[data-color='white'] {
-        box-shadow: var(--drop-shadow-south);
-    }
-
-    [data-triangle] {
-        position: absolute;
-        bottom: -12px;
-        right: 0;
-        width: 0px;
-        height: 0px;
-        border-style: solid;
-        border-width: 12px 12px 0 0;
-        border-color: var(--foreground) transparent transparent transparent;
-        transform: rotate(0deg);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TextField.tsx

@@ -1,5 +1,5 @@
-import { FormField, FormFieldProps } from './FormField';
-import { TextInput, TextInputProps } from './TextInput';
+import { FormFieldProps, FormField } from './FormField';
+import { TextInputProps, TextInput } from './TextInput';
 
 export type TextFieldProps = Pick<
     TextInputProps,
@@ -41,6 +41,7 @@ function TextField({
     return (
         <FormField
             controlId={controlId}
+            data-bspk="text-field"
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}

package/src/TextInput.tsx

@@ -1,5 +1,5 @@
 import { SvgCancel } from '@bspk/icons/Cancel';
-import { css } from '@emotion/react';
+import './text-input.scss';
 import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
 
 import { useId } from './hooks/useId';
@@ -71,13 +71,12 @@ function TextInput({
 
     return (
         <div
-            css={style}
+            data-bspk="text-input"
             data-disabled={disabled || undefined}
             data-invalid={invalid || undefined}
             data-readonly={readOnly || undefined}
             data-required={required || undefined}
             data-size={size}
-            data-text-input
             ref={containerRef}
             {...otherProps}
         >
@@ -113,153 +112,4 @@ TextInput.bspkName = 'TextInput';
 
 export { TextInput };
 
-export const style = css`
-    --border-color: var(--stroke-neutral-base);
-    display: flex;
-    flex-direction: row;
-    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;
-        align-items: center;
-        height: var(--field-height);
-        font: var(--field-font);
-        color: var(--foreground-neutral-on-surface);
-        min-width: 0;
-    }
-
-    &:hover:not(:focus-within) {
-        background: 
-    // multiple colors
-
-            linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &:active:not(:focus-within) {
-        background: 
-    // multiple colors
-
-            linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &[data-readonly] {
-        --border-color: var(--stroke-neutral-disabled-light);
-
-        background: 
-    // multiple colors
-
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-    }
-
-    &[data-disabled] {
-        --border-color: var(--stroke-neutral-disabled-light);
-
-        background:
-    // multiple colors
-
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-
-        & > * {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
-    &[data-invalid] {
-        --border-color: var(--status-error);
-    }
-
-    &[data-size='small'] {
-        --field-padding: var(--spacing-sizing-02);
-        --field-height: var(--spacing-sizing-08);
-        --field-font: var(--body-small);
-        --field-icon-width: var(--spacing-sizing-04);
-        --field-clear-width: var(--spacing-sizing-05);
-    }
-
-    &[data-size='medium'] {
-        --field-padding: var(--spacing-sizing-03);
-        --field-height: var(--spacing-sizing-10);
-        --field-font: var(--body-base);
-        --field-icon-width: var(--spacing-sizing-05);
-        --field-clear-width: var(--spacing-sizing-05);
-    }
-
-    &[data-size='large'] {
-        --field-padding: var(--spacing-sizing-03);
-        --field-height: var(--spacing-sizing-12);
-        --field-font: var(--body-large);
-        --field-icon-width: var(--spacing-sizing-06);
-        --field-clear-width: var(--spacing-sizing-06);
-    }
-
-    [data-leading],
-    [data-trailing] {
-        svg {
-            width: var(--field-icon-width);
-        }
-    }
-
-    label {
-        font: var(--labels-small);
-        color: var(--foreground-neutral-on-surface-variant-01);
-    }
-
-    input {
-        flex: 1;
-        background-color: transparent !important;
-        border: none;
-        outline: none;
-        padding: 0;
-        pointer-events: all;
-        text-overflow: ellipsis;
-
-        &[type='number']::-webkit-inner-spin-button,
-        &[type='number']::-webkit-outer-spin-button {
-            display: none;
-        }
-    }
-
-    button[data-clear] {
-        display: none;
-        border: none;
-        background: none;
-        padding: 0;
-        cursor: pointer;
-        pointer-events: all;
-        margin-left: var(--spacing-sizing-02);
-        padding-right: var(--field-padding);
-
-        svg {
-            pointer-events: none;
-            width: var(--field-clear-width);
-        }
-    }
-
-    &:focus-within {
-        button[data-clear] {
-            display: flex;
-        }
-    }
-
-    &:has(button[data-clear]) {
-        padding-right: 0;
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Textarea.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './textarea.scss';
 import { ChangeEvent, CSSProperties, Ref } from 'react';
 
 import { useId } from './hooks/useId';
@@ -85,9 +85,8 @@ function Textarea({
 
     return (
         <div
-            css={style}
+            data-bspk="textarea"
             data-size={size}
-            data-textarea
             style={
                 {
                     '--min-rows': minRows,
@@ -125,81 +124,4 @@ Textarea.bspkName = 'Textarea';
 
 export { Textarea };
 
-export const style = css`
-    display: grid;
-    width: 100%;
-
-    // &[data-size='medium']
-    --font: var(--body-base);
-    --line-height: 20px;
-    --padding: var(--spacing-sizing-03);
-
-    &[data-size='small'] {
-        --font: var(--body-small);
-        --line-height: 20px;
-        --padding: var(--spacing-sizing-02);
-    }
-
-    &[data-size='large'] {
-        --font: var(--body-large);
-        --line-height: 24px;
-        --padding: var(--spacing-sizing-03);
-    }
-
-    [data-replicated-value] {
-        white-space: pre-wrap;
-        visibility: hidden;
-    }
-
-    textarea,
-    [data-replicated-value] {
-        width: 100%;
-        font: var(--font);
-        border: 1px solid var(--border-color);
-        padding: var(--padding);
-        grid-area: 1 / 1 / 2 / 2;
-        min-height: calc((var(--line-height) * var(--min-rows)) + (var(--padding) * 2));
-        max-height: calc((var(--line-height) * var(--max-rows)) + (var(--padding) * 2));
-    }
-
-    textarea {
-        --border-color: var(--stroke-neutral-base);
-
-        resize: vertical;
-        color: var(--foreground-neutral-on-surface);
-        background-color: var(--surface-neutral-t1-base);
-        border-radius: var(--radius-small);
-
-        &:focus-within {
-            --border-color: var(--stroke-neutral-focus);
-            outline: none;
-            color: var(--foreground-neutral-on-surface);
-        }
-
-        &:disabled {
-            pointer-events: none;
-            background: 
-    // multiple colors
-
-                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-
-        &:read-only {
-            background: 
-    // multiple colors
-
-                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-            color: var(--foreground-neutral-on-surface-variant-02);
-            cursor: not-allowed;
-        }
-
-        &[aria-invalid] {
-            --border-color: var(--status-error);
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TextareaField.tsx

@@ -1,5 +1,5 @@
-import { FormField, FormFieldProps } from './FormField';
-import { Textarea, TextareaProps } from './Textarea';
+import { FormFieldProps, FormField } from './FormField';
+import { TextareaProps, Textarea } from './Textarea';
 import { Txt } from './Txt';
 import { tryIntParse } from './utils/tryIntPsrse';
 
@@ -33,6 +33,7 @@ function TextareaField({
     return (
         <FormField
             controlId={id}
+            data-bspk="textarea-field"
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}