@bspk/ui 1.0.0

package/src/TextInput.tsx

@@ -0,0 +1,265 @@
+import { SvgCancel } from '@bspk/icons/Cancel';
+import { css } from '@emotion/react';
+import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
+
+import { useId } from './hooks/useId';
+
+import { ElementProps, CommonProps } from '.';
+
+export type TextInputProps = CommonProps<
+    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
+> & {
+    /**
+     * Callback when the value of the field changes.
+     *
+     * @type (next: String, Event) => void
+     * @required
+     */
+    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
+    /** The ref of the container. */
+    containerRef?: (node: HTMLElement | null) => void;
+    /** The ref of the input. */
+    inputRef?: (node: HTMLElement | null) => void;
+    /** The trailing element to display in the field. */
+    trailing?: ReactNode;
+    /** The leading element to display in the field. */
+    leading?: ReactNode;
+    /** The placeholder of the field. */
+    placeholder?: string;
+    /** The type of the input. */
+    type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
+    /**
+     * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     *
+     * @default off
+     */
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+};
+
+/**
+ * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
+ * not intended to be used directly. Use the TextField component.
+ *
+ * @element
+ *
+ * @name TextInput
+ */
+function TextInput({
+    invalid: invalidProp,
+    onChange,
+    size = 'medium',
+    value = '',
+    name,
+    'aria-label': ariaLabel,
+    inputRef,
+    required,
+    placeholder,
+    id: idProp,
+    leading,
+    trailing,
+    type,
+    readOnly,
+    disabled,
+    autoComplete = 'off',
+    containerRef,
+    ...otherProps
+}: ElementProps<TextInputProps, 'div'>) {
+    const id = useId(idProp);
+
+    const invalid = !readOnly && !disabled && invalidProp;
+
+    return (
+        <div
+            css={style}
+            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}
+        >
+            {leading && <span data-leading>{leading}</span>}
+            <input
+                aria-invalid={invalid || undefined}
+                aria-label={ariaLabel}
+                autoComplete={autoComplete}
+                disabled={disabled || undefined}
+                id={id}
+                name={name}
+                onChange={(event) => {
+                    onChange(event.target.value, event);
+                }}
+                placeholder={placeholder || ' '}
+                readOnly={readOnly || undefined}
+                ref={inputRef}
+                required={required || undefined}
+                type={type}
+                value={value}
+            />
+            {trailing && <span data-trailing>{trailing}</span>}
+            {value?.toString().length > 0 && !readOnly && !disabled && (
+                <button aria-label="clear" data-clear onClick={() => onChange('')}>
+                    <SvgCancel />
+                </button>
+            )}
+        </div>
+    );
+}
+
+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

@@ -0,0 +1,205 @@
+import { css } from '@emotion/react';
+import { ChangeEvent, CSSProperties, Ref } from 'react';
+
+import { useId } from './hooks/useId';
+
+import { CommonProps } from './';
+
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly' | 'required'> & {
+    /**
+     * Callback when the value of the field changes.
+     *
+     * @type (next: String, Event) => void
+     * @required
+     */
+    onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * The size of the field.
+     *
+     * @default medium
+     */
+    size?: 'large' | 'medium' | 'small';
+    /** The value of the field. */
+    value?: string;
+    /**
+     * The textarea control name of the field.
+     *
+     * @required
+     */
+    name: string;
+    /** The ref of the field. */
+    innerRef?: Ref<HTMLTextAreaElement>;
+    /** The placeholder of the field. */
+    placeholder?: string;
+    /**
+     * The maximum number of characters that the field will accept.
+     *
+     * @minimum 1
+     */
+    maxLength?: number;
+    /**
+     * The minimum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
+     * to fit the content.
+     *
+     * @minimum 3
+     */
+    minRows?: number;
+    /**
+     * The maximum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
+     * to fit the content.
+     *
+     * @maximum 10
+     */
+    maxRows?: number;
+};
+
+const MIN_ROWS = 3;
+const MAX_ROWS = 10;
+
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * @element
+ *
+ * @name Textarea
+ */
+function Textarea({
+    invalid: invalidProp,
+    onChange,
+    size = 'medium',
+    value = '',
+    name,
+    'aria-label': ariaLabel,
+    innerRef,
+    placeholder,
+    id: idProp,
+    minRows: minRowsProp = MIN_ROWS,
+    maxRows: maxRowsProp = MAX_ROWS,
+    ...otherProps
+}: TextareaProps) {
+    const id = useId(idProp);
+    const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
+    // ensure minRows and maxRows are within bounds
+    const minRows = Math.min(MAX_ROWS, Math.max(minRowsProp, MIN_ROWS));
+    const maxRows = Math.max(MIN_ROWS, Math.min(maxRowsProp, MAX_ROWS));
+
+    return (
+        <div
+            css={style}
+            data-size={size}
+            data-textarea
+            style={
+                {
+                    '--min-rows': minRows,
+                    '--max-rows': maxRows,
+                } as CSSProperties
+            }
+        >
+            <textarea
+                {...otherProps}
+                aria-invalid={invalid || undefined}
+                aria-label={ariaLabel}
+                id={id}
+                name={name}
+                onBlur={(event) => {
+                    const target = event.target as HTMLTextAreaElement;
+                    target.scrollTop = 0;
+                }}
+                onChange={(event) => onChange(event.target.value, event)}
+                onInput={(event) => {
+                    const target = event.target as HTMLTextAreaElement;
+                    // we know the textarea was resized, so we don't want to auto-size it
+                    if (target.style.height) return;
+                    (target.nextSibling as HTMLElement).innerText = `${target.value}\n`;
+                }}
+                placeholder={placeholder}
+                ref={innerRef}
+                value={value}
+            />
+            <div aria-hidden data-replicated-value />
+        </div>
+    );
+}
+
+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

@@ -0,0 +1,67 @@
+import { FormField, FormFieldProps } from './FormField';
+import { Textarea, TextareaProps } from './Textarea';
+import { Txt } from './Txt';
+import { tryIntParse } from './utils/tryIntPsrse';
+
+export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label'> &
+    TextareaProps;
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * This component takes properties from the FormField and Textarea components.
+ *
+ * @name TextareaField
+ */
+function TextareaField({
+    label,
+    errorMessage: errorMessageProp,
+    helperText,
+    controlId: id,
+    onChange,
+    maxLength: maxLengthProp,
+    invalid,
+    readOnly,
+    disabled,
+    required,
+    ...textareaProps
+}: TextareaFieldProps) {
+    const maxLength = tryIntParse(maxLengthProp) || -1;
+    const errorMessage = (!readOnly && !disabled && errorMessageProp) || undefined;
+
+    if (typeof onChange !== 'function') return null;
+
+    return (
+        <FormField
+            controlId={id}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={
+                <Txt style={{ color: 'var(--foreground-neutral-on-surface-variant-02)' }} variant="body-small">
+                    {`${textareaProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}`}
+                </Txt>
+            }
+            required={required}
+        >
+            {(fieldProps) => (
+                <Textarea
+                    {...textareaProps}
+                    {...fieldProps}
+                    aria-label={textareaProps['aria-label'] || label}
+                    id={id}
+                    invalid={invalid}
+                    onChange={(next, event) => {
+                        onChange(next, event);
+                    }}
+                    required={required}
+                />
+            )}
+        </FormField>
+    );
+}
+
+TextareaField.bspkName = 'TextareaField';
+
+export { TextareaField };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TimePicker.tsx

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

package/src/ToggleOption.tsx

@@ -0,0 +1,117 @@
+import { css } from '@emotion/react';
+import { ReactElement } from 'react';
+
+export type ToggleOptionProps = {
+    /**
+     * The label of the field. Also used as the aria-label of the checkbox.
+     *
+     * @required
+     */
+    label: string;
+    /** The description of the field. */
+    description?: string;
+    /** The control element to use. */
+    children?: ReactElement;
+    /** The size of the control option label. */
+    size?: 'base' | 'large' | 'small';
+};
+
+/**
+ * A utility component that wraps a checkbox, radio, and switch.
+ *
+ * @name ToggleOption
+ */
+function ToggleOption({ label, description, children, size }: ToggleOptionProps) {
+    return (
+        <label css={style} data-size={size} data-toggle-option="">
+            <span data-control>{children}</span>
+            <span data-content>
+                <span data-label>{label}</span>
+                {description && <span data-description>{description}</span>}
+            </span>
+        </label>
+    );
+}
+
+ToggleOption.bspkName = 'ToggleOption';
+
+export { ToggleOption };
+
+export const style = css`
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    flex-direction: row;
+    padding: 0 var(--spacing-sizing-01) 0 0;
+    gap: var(--spacing-sizing-02);
+    user-select: none;
+    background: unset;
+    border: unset;
+    cursor: pointer;
+    min-height: var(--spacing-sizing-08);
+    align-items: center;
+
+    &:has([data-description]) {
+        align-items: unset;
+    }
+
+    @media (any-pointer: coarse) {
+        min-height: var(--spacing-sizing-12);
+    }
+
+    [data-content] {
+        display: flex;
+        flex-direction: column;
+        padding: 2px 0;
+    }
+
+    [data-label] {
+        color: var(--foreground-neutral-on-surface);
+        font: var(--labels-base);
+    }
+
+    [data-description] {
+        font: var(--body-small);
+        color: var(--foreground-neutral-on-surface-variant-01);
+    }
+
+    &[data-size='small'] {
+        [data-label] {
+            font: var(--labels-small);
+        }
+
+        [data-description] {
+            font: var(--body-x-small);
+        }
+    }
+
+    &[data-size='large'] {
+        [data-label] {
+            font: var(--labels-large);
+        }
+
+        [data-description] {
+            font: var(--body-base);
+        }
+    }
+
+    &:not(:has(:disabled)) {
+        [data-pseudo='focus'] &,
+        &:focus-visible,
+        &:has(*:focus-visible) {
+            outline: var(--stroke-neutral-focus) 2px solid;
+        }
+    }
+
+    &:has(:disabled) {
+        [data-label] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        [data-description] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */