@bspk/ui 1.0.0

package/src/TabGroup.tsx

@@ -0,0 +1,219 @@
+import { css } from '@emotion/react';
+import { ReactNode } from 'react';
+
+import { Badge } from './Badge';
+import { useNavOptions } from './hooks/useNavOptions';
+
+import { ElementProps } from './';
+
+export type TabGroupOption = {
+    /**
+     * The label of the tab. This is the text that will be displayed on the tab.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** The value of the tab. If not provided, the label will be used as the value. */
+    value?: string;
+    /** The icon to display on the left side of the tab. */
+    icon?: ReactNode;
+    /** The icon to display on the left side of the tab when the tab is active. */
+    iconActive?: ReactNode;
+    /** The badge count to display on the tab. */
+    badge?: number;
+};
+
+export type TabGroupProps = {
+    /**
+     * The tabs to display. Each tab has a label and an optional leading icon.
+     *
+     * @type TabGroupOption[]
+     * @required
+     */
+    options: TabGroupOption[];
+    /** The id of the selected tab. */
+    value?: TabGroupOption['value'];
+    /**
+     * The function to call when the tab is clicked.
+     *
+     * @required
+     */
+    onChange: (tabId: TabGroupOption['value']) => void;
+    /**
+     * The size of the tabs.
+     *
+     * @default medium
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
+     * content.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * When width is 'hug' this determines if the trailing underline should be showing. When width is 'fill' this
+     * property isn't applicable.
+     *
+     * @default false
+     */
+    showTrail?: boolean;
+};
+
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * @name TabGroup
+ */
+function TabGroup({
+    //
+    onChange: onTabChange,
+    value,
+    size = 'medium',
+    options,
+    width = 'hug',
+    showTrail = false,
+    ...containerProps
+}: ElementProps<TabGroupProps, 'div'>) {
+    const items = useNavOptions(options);
+
+    return (
+        <div
+            {...containerProps}
+            css={style}
+            data-hide-trail={(width === 'hug' && !showTrail) || undefined}
+            data-size={size}
+            data-tab-group
+            data-width={width}
+        >
+            {items.map((item) => {
+                const isActive = item.value === value;
+
+                return (
+                    <button
+                        data-active={isActive || undefined}
+                        disabled={item.disabled || undefined}
+                        key={item.value}
+                        onClick={() => onTabChange(item.value)}
+                    >
+                        <span>
+                            {(isActive && item.iconActive) || item.icon}
+                            {item.label}
+                            {item.badge && <Badge count={item.badge} size="x-small" />}
+                        </span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}
+
+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

@@ -0,0 +1,126 @@
+import { css } from '@emotion/react';
+import { ReactNode } from 'react';
+
+import { ElementProps } from '.';
+
+export type TableRow = Record<string, ReactNode>;
+
+export type TableColumn<R extends TableRow = Record<string, ReactNode>> = {
+    /**
+     * The key of the column. This is used to access the data in the row.
+     *
+     * @type string
+     */
+    key: keyof R;
+    /**
+     * The label of the column. This is used to display the column header.
+     *
+     * @type string
+     */
+    label: string;
+    /**
+     * The width of the column. This is used to set the width of the column.
+     *
+     * Used to set the value of
+     * [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+     *
+     * @default 1fr
+     * @type string
+     */
+    width?: string;
+};
+
+export type TableProps<R extends TableRow> = {
+    /** The data of the table. */
+    rows: R[];
+    /** The columns of the table. */
+    columns: TableColumn<R>[];
+};
+
+/**
+ * Component description coming soon.
+ *
+ * @name Table
+ */
+function Table<R extends TableRow>({ rows, columns, ...props }: ElementProps<TableProps<R>, 'div'>) {
+    return (
+        <div
+            {...props}
+            css={style}
+            data-table
+            style={{
+                ...props.style,
+                gridTemplateColumns: columns.map((c) => `minmax(0, ${c.width || '1fr'})`).join(' '),
+            }}
+        >
+            {columns.map((column, index, arr) => (
+                <div
+                    data-head={[index === 0 && 'first', index === arr.length - 1 && 'last'].filter(Boolean).join(' ')}
+                    key={column.key as string}
+                >
+                    {column.label}
+                </div>
+            ))}
+            {rows.map((row, index, arr) => {
+                const lastRow = index === arr.length - 1 || undefined;
+                return columns.map((column) => (
+                    <div data-cell={column.key} data-row-last={lastRow} key={index + (column.key as string)}>
+                        {row[column.key]}
+                    </div>
+                ));
+            })}
+        </div>
+    );
+}
+
+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

@@ -0,0 +1,149 @@
+import { css } from '@emotion/react';
+import { ElementType, ReactNode } from 'react';
+
+import { ColorVariant, COLOR_VARIABLES } from './utils/colorVariants';
+
+import { ElementProps } from './';
+
+export type TagProps<As extends ElementType = 'span'> = {
+    /**
+     * The element type to render as.
+     *
+     * @default span
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The content of the tag.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The size of the tag.
+     *
+     * @default small
+     */
+    size?: 'small' | 'x-small';
+    /**
+     * The color of the tag.
+     *
+     * @default white
+     */
+    color?: ColorVariant;
+    /**
+     * The display variant of the tag.
+     *
+     * @default flat
+     */
+    variant?: 'corner-wrap' | 'flat' | 'pill';
+    /**
+     * Whether the tag should wrap its content.
+     *
+     * (Not recommended)
+     *
+     * @default false
+     */
+    wrap?: boolean;
+};
+
+/**
+ * A non-interactive visual indicators to draw attention or categorization of a component.
+ *
+ * @name Tag
+ */
+function Tag<As extends ElementType = 'span'>({
+    children,
+    as,
+    color = 'white',
+    size = 'small',
+    variant = 'flat',
+    wrap,
+    ...props
+}: ElementProps<TagProps<As>, As>) {
+    const As: ElementType = as || 'span';
+
+    return (
+        <As
+            {...props}
+            css={style}
+            data-color={color}
+            data-size={size}
+            data-tag
+            data-variant={variant}
+            data-wrap={wrap || undefined}
+        >
+            {children}
+            {variant === 'corner-wrap' && <div data-triangle />}
+        </As>
+    );
+}
+
+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

@@ -0,0 +1,61 @@
+import { FormField, FormFieldProps } from './FormField';
+import { TextInput, TextInputProps } from './TextInput';
+
+export type TextFieldProps = Pick<
+    TextInputProps,
+    | 'autoComplete'
+    | 'disabled'
+    | 'inputRef'
+    | 'invalid'
+    | 'leading'
+    | 'name'
+    | 'onChange'
+    | 'placeholder'
+    | 'readOnly'
+    | 'required'
+    | 'size'
+    | 'trailing'
+    | 'type'
+    | 'value'
+> &
+    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
+
+/**
+ * A text input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * This component takes properties from the FormField and TextInput components.
+ *
+ * @name TextField
+ */
+function TextField({
+    label,
+    errorMessage: errorMessageProp,
+    helperText,
+    controlId,
+    labelTrailing,
+    required,
+    ...inputProps
+}: TextFieldProps) {
+    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
+
+    return (
+        <FormField
+            controlId={controlId}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={required}
+        >
+            {(fieldProps) => (
+                <TextInput {...inputProps} {...fieldProps} aria-label={label} id={controlId} required={required} />
+            )}
+        </FormField>
+    );
+}
+
+TextField.bspkName = 'TextField';
+
+export { TextField };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */