@bspk/ui 1.0.1 → 1.1.12

package/src/FormField.tsx

@@ -1,5 +1,4 @@
-import { css } from '@emotion/react';
-
+import './form-field.scss';
 import { InlineAlert } from './InlineAlert';
 import { Layout } from './Layout';
 import { Txt } from './Txt';
@@ -55,7 +54,7 @@ function FormField({ label, errorMessage, helperText, children, labelTrailing, c
     if (typeof children !== 'function') return null;
 
     return (
-        <div css={style} data-form-field>
+        <div data-bspk="form-field">
             <Layout as="header">
                 <label htmlFor={controlId}>
                     <Txt as="span" variant="labels-small">
@@ -92,16 +91,4 @@ FormField.bspkName = 'FormField';
 
 export { FormField };
 
-export const style = css`
-    box-sizing: border-box;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-sizing-01);
-
-    header label {
-        flex-grow: 1;
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Img.tsx

@@ -1,13 +1,5 @@
-import { css } from '@emotion/react';
-
 import { ElementProps } from './';
 
-const style = {
-    container: css`
-        display: block;
-    `,
-};
-
 export type ImgProps = {
     /**
      * The URL of the image.
@@ -29,7 +21,7 @@ export type ImgProps = {
  * @name Img
  */
 function Img({ alt, ...props }: ElementProps<ImgProps, 'img'>) {
-    return <img {...props} alt={alt} css={style.container} data-img />;
+    return <img {...props} alt={alt} data-bspk="img" />;
 }
 
 Img.bspkName = 'Img';

package/src/InlineAlert.tsx

@@ -1,7 +1,7 @@
 import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
 import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
-import { css } from '@emotion/react';
+import './inline-alert.scss';
 import { ReactNode } from 'react';
 
 import { Txt } from './Txt';
@@ -34,7 +34,7 @@ export type InlineAlertProps = {
  */
 function InlineAlert({ children, variant = 'informational', id }: InlineAlertProps) {
     return (
-        <div css={style} data-inline-alert={id} data-variant={variant}>
+        <div data-bspk="inline-alert" data-variant={variant} id={id}>
             {VARIANT_ICON[variant]}
             <Txt variant="body-small">{children}</Txt>
         </div>
@@ -45,52 +45,6 @@ InlineAlert.bspkName = 'InlineAlert';
 
 export { InlineAlert };
 
-export const style = css`
-    display: flex;
-    align-items: start;
-    justify-content: center;
-    flex-direction: row;
-    gap: var(--spacing-sizing-02);
-
-    [data-txt] {
-        flex: 1;
-    }
-
-    &[data-variant='error'] {
-        color: var(--status-error);
-        --first-tone: var(--status-error);
-        --second-tone: var(--status-on-information);
-    }
-
-    &[data-variant='success'] {
-        color: var(--status-success);
-        --first-tone: var(--status-success);
-        --second-tone: var(--status-on-success);
-    }
-
-    &[data-variant='warning'] {
-        color: var(--foreground-neutral-on-surface);
-        --first-tone: var(--status-warning);
-        --second-tone: var(--status-on-warning);
-    }
-
-    &[data-variant='informational'] {
-        color: var(--status-information);
-        --first-tone: var(--status-information);
-        --second-tone: var(--status-on-information);
-    }
-
-    svg {
-        color: var(--first-tone);
-        width: var(--spacing-sizing-05);
-        height: var(--spacing-sizing-05);
-
-        [data-second-tone] {
-            fill: var(--second-tone);
-        }
-    }
-`;
-
 // eslint-disable-next-line react/no-multi-comp
 const SvgWarningTwoTone = () => (
     <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

package/src/Layout.tsx

@@ -61,6 +61,7 @@ function Layout<As extends ElementType = 'div'>({
     return (
         <As
             {...props}
+            data-bspk="layout"
             style={{
                 ...style,
                 display: 'flex',

package/src/Link.tsx

@@ -1,7 +1,7 @@
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 import { SvgLink } from '@bspk/icons/Link';
 import { SvgOpenInNew } from '@bspk/icons/OpenInNew';
-import { css } from '@emotion/react';
+import './link.scss';
 import { AnchorHTMLAttributes } from 'react';
 
 export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & {
@@ -39,8 +39,7 @@ function Link({ label, trailingIcon, size, variant, ...props }: LinkProps) {
     return (
         <a
             {...props}
-            css={style}
-            data-link
+            data-bspk="link"
             data-size={size}
             data-subtle={variant === 'subtle' || undefined}
             data-subtle-inverse={variant === 'subtle-inverse' || undefined}
@@ -59,24 +58,4 @@ Link.bspkName = 'Link';
 
 export { Link };
 
-export const style = css`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-sizing-01);
-    font: var(--labels-base);
-
-    &[data-size='large'] {
-        font: var(--labels-large);
-    }
-
-    &[data-size='small'] {
-        font: var(--labels-small);
-    }
-
-    svg {
-        width: var(--spacing-sizing-05);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ListItem.tsx

@@ -1,7 +1,7 @@
-import { css } from '@emotion/react';
+import './list-item.scss';
 import { ElementType, ReactNode } from 'react';
 
-import { Button, ButtonProps } from './Button';
+import { ButtonProps, Button } from './Button';
 import { ChildElement, getChildrenElements } from './utils/children';
 import { useErrorLogger } from './utils/errors';
 
@@ -121,11 +121,10 @@ function ListItem<As extends ElementType = 'div'>({
             {...props}
             aria-disabled={disabled || undefined}
             aria-invalid={invalid || undefined}
-            css={style}
             data-action={actionable || undefined}
             data-active={active || undefined}
+            data-bspk="list-item"
             data-component={leading?.name || undefined}
-            data-list-item
             data-readonly={readOnly || undefined}
             role={as !== 'button' && 'onClick' in props ? 'button' : undefined}
         >
@@ -160,120 +159,6 @@ ListItem.Button = ListItemButton;
 
 export { ListItem };
 
-export const style = css`
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0 var(--spacing-sizing-02);
-    background: unset;
-    border: unset;
-    margin: unset;
-    text-decoration: unset;
-    user-select: none;
-    color: var(--foreground-neutral-on-surface);
-
-    &:is(a),
-    &:is(button),
-    &[onclick],
-    &[role='button'] {
-        cursor: pointer;
-    }
-
-    [data-inner] {
-        height: 100%;
-        width: 100%;
-        min-height: var(--spacing-sizing-09);
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        gap: var(--spacing-sizing-03);
-        padding: var(--spacing-sizing-02) 0;
-        justify-items: stretch;
-
-        & > * {
-            min-height: 100%;
-            width: fit-content;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            flex: 1;
-            flex-shrink: 0;
-
-            svg {
-                width: 24px;
-                max-width: unset;
-            }
-        }
-    }
-
-    /* &:has(+ [data-list-item]) {
-    [data-inner] {
-      border-bottom: 1px solid var(--stroke-neutral-low);
-    }
-  } */
-
-    &[data-action] {
-        [data-pseudo='focus'] &,
-        &:focus-visible,
-        &:has(*:focus-visible) {
-            //outline: 2px solid var(--stroke-neutral-focus);
-            box-shadow: inset var(--stroke-neutral-focus) 0 0 0 2px;
-
-            [data-inner] {
-                border-color: transparent;
-            }
-        }
-    }
-
-    [data-component='Img'] > img {
-        height: 36px;
-        width: 36px;
-        max-width: unset;
-    }
-
-    &:is(label) {
-        [data-inner] {
-            border-bottom: 0;
-            gap: var(--spacing-sizing-02);
-        }
-    }
-
-    [data-item-label] {
-        flex: 100%;
-        text-align: left;
-
-        [data-text] {
-            font: var(--labels-base);
-            color: var(--foreground-neutral-on-surface);
-        }
-
-        [data-sub-text] {
-            font: var(--body-small);
-            color: var(--foreground-neutral-on-surface-variant-01);
-        }
-    }
-
-    &[aria-disabled] {
-        [data-text],
-        [data-sub-text] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
-    &[data-action] {
-        [data-pseudo='hover'] &,
-        &:hover {
-            background-color: var(--interactions-neutral-hover-opacity);
-        }
-
-        [data-pseudo='active'] &,
-        &[data-active],
-        &:active {
-            background-color: var(--interactions-neutral-press-opacity);
-        }
-    }
-`;
-
 function useChildren(
     leadingProp: ReactNode,
     trailingProp: ReactNode,

package/src/Menu.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './menu.scss';
 import { ComponentProps, CSSProperties, MouseEvent as ReactMouseEvent, useMemo } from 'react';
 
 import { Checkbox } from './Checkbox';
@@ -124,10 +124,9 @@ function Menu<Item extends MenuItem = MenuItem>({
     return (
         <div
             {...props}
-            css={style}
+            data-bspk="menu"
             data-disabled={disabled || undefined}
             data-item-count={itemCount || undefined}
-            data-menu=""
             data-no-items={!items.length || undefined}
             id={menuId}
             ref={innerRef}
@@ -165,7 +164,7 @@ function Menu<Item extends MenuItem = MenuItem>({
                             id={itemId}
                             key={itemId}
                             label={renderProps?.label?.toString() || item.label?.toString()}
-                            onClick={(event) => {
+                            onClick={(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
                                 if (renderProps) renderProps?.onClick?.(event);
 
                                 if (onChange) {
@@ -223,41 +222,4 @@ Menu.bspkName = 'Menu';
 
 export { Menu };
 
-export const style = css`
-    /** 
-  --item-count is set via inline style. :)
-   */
-
-    width: 332px;
-    border: 1px solid var(--stroke-neutral-low);
-    background-color: var(--surface-neutral-t1-base);
-    box-shadow: var(--drop-shadow-float);
-    border-radius: var(--radius-large);
-    display: flex;
-    flex-direction: column;
-
-    --item-size: var(--spacing-sizing-12);
-
-    &[data-floating] {
-        z-index: var(--z-index-dropdown);
-    }
-
-    &[data-item-count] {
-        height: calc(var(--item-count) * var(--item-size));
-        overflow-y: scroll;
-    }
-
-    &[data-no-items] {
-        padding: var(--spacing-sizing-08) var(--spacing-sizing-04);
-        align-items: center;
-        justify-content: center;
-        gap: var(--spacing-sizing-03);
-    }
-
-    [data-list-item] {
-        min-height: var(--item-size);
-        height: var(--item-size);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/MenuButton.tsx

@@ -1,6 +1,6 @@
 import { SvgMenu } from '@bspk/icons/Menu';
-import { css } from '@emotion/react';
 
+import './menu-button.scss';
 import { ButtonProps } from './Button';
 
 import { ElementProps } from '.';
@@ -14,7 +14,7 @@ export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
  */
 function MenuButton(props: ElementProps<MenuButtonProps, 'button'>) {
     return (
-        <button {...props} css={style}>
+        <button data-bspk="menu-button" {...props}>
             <SvgMenu />
         </button>
     );
@@ -24,19 +24,4 @@ MenuButton.bspkName = 'MenuButton';
 
 export { MenuButton };
 
-export const style = css`
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    height: 48px;
-    width: auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding-top: var(--spacing-sizing-01);
-    color: var(--foreground-neutral-on-surface-variant-01);
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Modal.tsx

@@ -1,9 +1,9 @@
 import { SvgClose } from '@bspk/icons/Close';
-import { css } from '@emotion/react';
+import './modal.scss';
 import { useMemo } from 'react';
 
 import { Button } from './Button';
-import { Dialog, DialogProps } from './Dialog';
+import { DialogProps, Dialog } from './Dialog';
 import { Txt } from './Txt';
 import { useId } from './hooks/useId';
 import { srOnly } from './utils/srOnly';
@@ -52,7 +52,7 @@ function Modal({
 
     return (
         <Dialog {...dialogProps} aria-describedby={ids.description} aria-labelledby={ids.title}>
-            <div css={style} data-modal-body>
+            <div data-bspk="modal">
                 <header>
                     <Txt as="div" data-dialog-title id={ids.title} variant="heading-h4">
                         {header}
@@ -80,25 +80,4 @@ Modal.bspkName = 'Modal';
 
 export { Modal };
 
-export const style = css`
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    gap: var(--spacing-sizing-02);
-    padding: var(--spacing-sizing-04);
-
-    > header {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--spacing-sizing-04);
-    }
-
-    main {
-        overflow: auto;
-        flex: 1;
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/NumberField.tsx

@@ -1,5 +1,5 @@
-import { FormField, FormFieldProps } from './FormField';
-import { NumberInput, NumberInputProps } from './NumberInput';
+import { FormFieldProps, FormField } from './FormField';
+import { NumberInputProps, NumberInput } from './NumberInput';
 
 export type NumberFieldProps = Pick<
     NumberInputProps,
@@ -29,6 +29,7 @@ function NumberField({
     return (
         <FormField
             controlId={controlId}
+            data-bspk="number-field"
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}

package/src/NumberInput.tsx

@@ -1,7 +1,7 @@
 import { SvgAdd } from '@bspk/icons/Add';
 import { SvgRemove } from '@bspk/icons/Remove';
-import { css } from '@emotion/react';
 
+import './number-input.scss';
 import { useId } from './hooks/useId';
 import { useLongPress } from './hooks/useLongPress';
 
@@ -82,7 +82,7 @@ function NumberInput({
         <div
             aria-valuemax={max || undefined}
             aria-valuemin={min || undefined}
-            css={style}
+            data-bspk="number-input"
             data-centered={centered || undefined}
             data-disabled={disabled || undefined}
             data-invalid={invalid || undefined}
@@ -155,128 +155,4 @@ NumberInput.bspkName = 'NumberInput';
 
 export { NumberInput };
 
-export const style = css`
-    // medium
-    --font: var(--body-base);
-    --height: var(--spacing-sizing-10);
-    --svg-width: var(--spacing-sizing-05);
-    --color: var(--foreground-neutral-on-surface);
-    width: 100%;
-
-    display: flex;
-    flex-flow: row nowrap;
-    font: var(--font);
-    height: var(--height);
-    border: 1px solid var(--stroke-neutral-base);
-    border-radius: var(--radius-small);
-    background: var(--surface-neutral-t1-base);
-
-    &:focus-within {
-        border-color: var(--stroke-brand-primary);
-        outline: 1px solid var(--stroke-brand-primary);
-    }
-
-    [data-divider] {
-        width: 4px;
-        border-right: 1px solid var(--stroke-neutral-base);
-        // account for border - 3(margin)  * 2 + 2(border)
-        height: calc(var(--height) - 8px);
-        margin: 3px 0;
-    }
-
-    button {
-        min-width: var(--height);
-        background: none;
-        border: none;
-        cursor: pointer;
-        font: var(--font);
-        svg {
-            width: var(--svg-width);
-        }
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--color);
-
-        &:disabled {
-            cursor: not-allowed;
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
-    input {
-        color: var(--color);
-        min-width: 0;
-        display: block;
-        font: var(--font);
-        text-align: center;
-        padding: 0 var(--spacing-sizing-03);
-        background: transparent;
-        border: none;
-
-        &:focus {
-            outline: none;
-        }
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-
-        &[type='number'] {
-            appearance: textfield;
-            -moz-appearance: textfield;
-        }
-    }
-
-    &:not([data-disabled], [data-readonly]) {
-        input,
-        button:not(:disabled) {
-            &:hover {
-                background-color: var(--interactions-hover-opacity);
-            }
-
-            &:active {
-                background-color: var(--interactions-press-opacity);
-            }
-        }
-
-        &[data-invalid] {
-            border-color: var(--status-error);
-            outline-color: var(--status-error);
-        }
-    }
-
-    &[data-disabled],
-    &[data-readonly] {
-        --color: var(--foreground-neutral-disabled-on-surface);
-        border-color: var(--stroke-neutral-disabled-light);
-        background:
-            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-
-        [data-divider] {
-            border-color: var(--stroke-neutral-disabled-light);
-        }
-    }
-
-    &[data-readonly] {
-        input {
-            color: var(--foreground-neutral-on-surface) !important;
-        }
-    }
-
-    &[data-size='small'] {
-        --font: var(--body-small);
-        --height: var(--spacing-sizing-08);
-    }
-
-    &[data-size='large'] {
-        --font: var(--body-large);
-        --height: var(--spacing-sizing-12);
-        --svg-width: var(--spacing-sizing-06);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */