@bspk/ui 1.0.0

package/src/Card.tsx

@@ -0,0 +1,66 @@
+import { css } from '@emotion/react';
+import { ReactNode } from 'react';
+
+export type CardProps = {
+    /**
+     * The content of the card.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Determines if the padding should be hidden.
+     *
+     * @default true
+     */
+    showPadding?: boolean;
+    /**
+     * Determines how the card border will appear.
+     *
+     * @default elevated
+     */
+    variant?: 'elevated' | 'filled' | 'outlined';
+};
+
+/**
+ * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
+ * elements.
+ *
+ * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
+ * details.
+ *
+ * @name Card
+ */
+function Card({ children, showPadding, variant = 'elevated' }: CardProps) {
+    return (
+        <div css={style} data-card data-hide-padding={showPadding === false || undefined} data-variant={variant}>
+            {children}
+        </div>
+    );
+}
+
+Card.bspkName = 'Card';
+
+export { Card };
+
+export const style = css`
+    display: block;
+    background: var(--surface-neutral-t1-base);
+    padding: var(--spacing-sizing-03);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+
+    &[data-hide-padding] {
+        padding: 0;
+    }
+    &[data-variant='outlined'] {
+        border: solid 1px var(--stroke-neutral-low);
+    }
+    &[data-variant='elevated'] {
+        box-shadow:
+            0 1px 2px 0 var(--shadow-32),
+            0 1px 3px 1px var(--shadow-15);
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Chart.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+
+export type ChartProps = {
+    /**
+     * The content of the chart.
+     *
+     * @required
+     */
+    children: string;
+};
+
+/**
+ * Component description coming soon.
+ *
+ * @name Chart
+ */
+function Chart({ children }: ChartProps) {
+    return (
+        <div css={style} data-chart>
+            {children}
+        </div>
+    );
+}
+
+Chart.bspkName = 'Chart';
+
+export { Chart };
+
+export const style = css`
+    display: flex;
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Checkbox.tsx

@@ -0,0 +1,174 @@
+import { css } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+
+import { ToggleControlProps, ElementProps } from './';
+
+export type CheckboxProps = ToggleControlProps<HTMLInputElement> & {
+    /**
+     * If the checkbox is partially checked or
+     * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+};
+
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
+ * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
+ * CheckboxGroup component.
+ *
+ * @element
+ *
+ * @name Checkbox
+ */
+function Checkbox({
+    checked: checkedProp = false,
+    indeterminate: indeterminateProp,
+    invalid,
+    disabled,
+    ...props
+}: ElementProps<CheckboxProps, 'input'>) {
+    const indeterminate = !!indeterminateProp;
+    const checked = !!checkedProp && !indeterminate;
+
+    const inputRef = useRef<HTMLInputElement>();
+
+    useEffect(() => {
+        if (!inputRef.current) return;
+        inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+
+    return (
+        <span
+            css={style}
+            //
+            data-checkbox
+        >
+            <input
+                {...props}
+                aria-invalid={invalid || undefined}
+                checked={checked}
+                disabled={disabled || undefined}
+                onChange={(event) => props.onChange(!!event.target.checked, event)}
+                ref={(node) => {
+                    if (!node) return;
+                    inputRef.current = node;
+                    node.indeterminate = indeterminate;
+                }}
+                type="checkbox"
+            />
+            <span aria-hidden>
+                <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
+                        fill="currentColor"
+                    />
+                </svg>
+                <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
+                        fill="currentColor"
+                    />
+                </svg>
+            </span>
+        </span>
+    );
+}
+
+Checkbox.bspkName = 'Checkbox';
+
+export { Checkbox };
+
+export const style = css`
+    display: block;
+    position: relative;
+    width: var(--spacing-sizing-06);
+    aspect-ratio: 1/1;
+    padding: 2px;
+
+    input[type='checkbox'] {
+        position: absolute;
+        opacity: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+    }
+
+    span {
+        --stroke: var(--stroke-neutral-base);
+        --inner: none;
+        --background: none;
+        --color: var(--foreground-brand-on-primary);
+
+        box-sizing: border-box;
+        display: flex;
+        width: 20px;
+        aspect-ratio: 1/1;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 2px solid var(--stroke);
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        background: var(--background);
+
+        svg[data-checked] {
+            width: 14px;
+            display: none;
+        }
+        svg[data-indeterminate] {
+            width: 12px;
+            display: none;
+        }
+        color: var(--color);
+    }
+
+    input[type='checkbox']:not(:checked, :indeterminate, :disabled) {
+        &:hover + span {
+            background-color: var(--interactions-neutral-hover-opacity);
+        }
+        &:active + span {
+            background-color: var(--interactions-neutral-press-opacity);
+        }
+    }
+
+    input[type='checkbox']:checked + span svg[data-checked],
+    input[type='checkbox']:indeterminate + span svg[data-indeterminate] {
+        display: block;
+    }
+
+    input[type='checkbox']:checked + span,
+    input[type='checkbox']:indeterminate + span {
+        --stroke: var(--stroke-brand-primary);
+        --background: var(--surface-brand-primary);
+    }
+
+    input[type='checkbox']:disabled {
+        pointer-events: none;
+        & + span {
+            --stroke: var(--stroke-neutral-interactions-disabled-light);
+        }
+        &:is(:checked, :indeterminate) + span {
+            --stroke: transparent;
+            --background: var(--interactions-disabled-opacity);
+            --color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    input[type='checkbox'][aria-invalid]:not(:disabled) {
+        &:checked + span,
+        &:indeterminate + span {
+            --background: var(--status-error);
+        }
+        & + span {
+            --stroke: var(--status-error);
+        }
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/CheckboxGroup.tsx

@@ -0,0 +1,95 @@
+import { Checkbox } from './Checkbox';
+import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+
+import { ElementProps, CommonProps } from './';
+
+export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+
+export type CheckboxGroupProps = CommonProps<'aria-label'> & {
+    /**
+     * The function to call when the checkboxes are changed.
+     *
+     * @required
+     */
+    onChange: (value: string[]) => void;
+    /**
+     * The input control name of the checkboxes.
+     *
+     * @required
+     */
+    name: string;
+    /**
+     * The options for the checkboxes.
+     *
+     * @type CheckboxGroupOption[]
+     * @required
+     */
+    options: CheckboxGroupOption[];
+    /**
+     * The values of the checked checkboxes.
+     *
+     * @type string[]
+     */
+    values?: CheckboxGroupProps['options'][number]['value'][];
+    /**
+     * Whether to show a select all checkbox at the top of the list.
+     *
+     * @default false
+     */
+    selectAll?: boolean;
+    /** The props for the select all checkbox. */
+    selectAllProps?: CheckboxGroupOption;
+};
+
+/**
+ * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name CheckboxGroup
+ */
+function CheckboxGroup({
+    onChange,
+    options = [],
+    name,
+    values = [],
+    selectAll,
+    selectAllProps,
+    ...props
+}: ElementProps<CheckboxGroupProps, 'div'>) {
+    return (
+        <div {...props} data-checkbox-group data-control-group role="group">
+            {selectAll && (
+                <>
+                    <ToggleOption label={selectAllProps?.label || 'All'}>
+                        <Checkbox
+                            aria-label={selectAllProps?.label || 'All'}
+                            checked={!!values.length && values.length === options.length}
+                            indeterminate={!!values.length && values.length < options.length}
+                            name={name}
+                            onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
+                            value="all"
+                        />
+                    </ToggleOption>
+                </>
+            )}
+            {options.map(({ label, description, value }) => (
+                <ToggleOption description={description} key={value} label={label}>
+                    <Checkbox
+                        aria-label={label}
+                        checked={values.includes(value)}
+                        name={name}
+                        onChange={(checked) => {
+                            onChange(checked ? [...values, value] : values.filter((v) => v !== value));
+                        }}
+                        value={value}
+                    />
+                </ToggleOption>
+            ))}
+        </div>
+    );
+}
+
+CheckboxGroup.bspkName = 'CheckboxGroup';
+
+export { CheckboxGroup };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/CheckboxOption.tsx

@@ -0,0 +1,27 @@
+import { Checkbox, CheckboxProps } from './Checkbox';
+import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+
+export type CheckboxOptionProps = Pick<
+    CheckboxProps,
+    'checked' | 'disabled' | 'indeterminate' | 'invalid' | 'name' | 'onChange' | 'value'
+> &
+    Pick<ToggleOptionProps, 'description' | 'label'>;
+
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name CheckboxOption
+ */
+function CheckboxOption({ label, description, ...checkboxProps }: CheckboxOptionProps) {
+    return (
+        <ToggleOption data-checkbox-field description={description} label={label}>
+            <Checkbox {...checkboxProps} aria-label={label} />
+        </ToggleOption>
+    );
+}
+
+CheckboxOption.bspkName = 'CheckboxOption';
+
+export { CheckboxOption };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Chip.tsx

@@ -0,0 +1,155 @@
+import { css } from '@emotion/react';
+import { CSSProperties, ReactNode } from 'react';
+
+import { CommonProps } from '.';
+
+export type ChipProps = CommonProps<'disabled' | 'onClick'> & {
+    /**
+     * The content of the chip.
+     *
+     * @required
+     */
+    children: ReactNode | string;
+    /**
+     * Whether the chip should wrap its content.
+     *
+     * (Not recommended)
+     *
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * The variant of the chip.
+     *
+     * @default filter
+     */
+    variant?: 'filter';
+    /**
+     * Is the chip elevated or flat. If flat the drop shadow is removed.
+     *
+     * @default false
+     */
+    flat?: boolean;
+
+    /**
+     * Whether the chip is currently selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /** The style of the chip. */
+    style?: CSSProperties;
+};
+
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @name Chip
+ */
+function Chip({
+    children = '',
+    wrap = false,
+    variant = 'filter',
+    flat = false,
+    disabled = false,
+    selected = false,
+    onClick,
+    style: styleProp,
+}: ChipProps) {
+    let additionalProps = {};
+
+    if (variant === 'filter') {
+        additionalProps = {
+            onClick,
+            role: 'button',
+            tabIndex: 0,
+        };
+    }
+
+    return (
+        <span
+            css={style}
+            data-chip=""
+            data-disabled={disabled || undefined}
+            data-flat={flat || undefined}
+            data-selected={selected || undefined}
+            data-variant={variant}
+            data-wrap={wrap || undefined}
+            style={styleProp}
+            {...additionalProps}
+        >
+            {children}
+        </span>
+    );
+}
+
+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/DatePicker.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+
+export type DatePickerProps = {
+    /**
+     * The content of the datepicker.
+     *
+     * @required
+     */
+    children: string;
+};
+
+/**
+ * Component description coming soon.
+ *
+ * @name DatePicker
+ */
+function DatePicker({ children }: DatePickerProps) {
+    return (
+        <div css={style} data-date-picker>
+            {children}
+        </div>
+    );
+}
+
+DatePicker.bspkName = 'DatePicker';
+
+export { DatePicker };
+
+export const style = css`
+    display: flex;
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */