@bspk/ui 1.0.0

package/src/DropdownField.tsx

@@ -0,0 +1,57 @@
+import { Dropdown, DropdownProps } from './Dropdown';
+import { FormField, FormFieldProps } from './FormField';
+
+export type DropdownFieldProps = Pick<
+    DropdownProps,
+    | 'disabled'
+    | 'itemCount'
+    | 'name'
+    | 'onChange'
+    | 'options'
+    | 'placeholder'
+    | 'placement'
+    | 'readOnly'
+    | 'size'
+    | 'value'
+> &
+    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * This component takes properties from the FormField and Dropdown components.
+ *
+ * @name DropdownField
+ */
+function DropdownField({
+    label,
+    errorMessage: errorMessageProp,
+    helperText,
+    controlId: id,
+    labelTrailing,
+    required,
+    ...dropdownProps
+}: DropdownFieldProps) {
+    const errorMessage = (!dropdownProps.readOnly && !dropdownProps.disabled && errorMessageProp) || undefined;
+
+    return (
+        <FormField
+            controlId={id}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={required}
+        >
+            {(fieldProps) => (
+                <Dropdown {...dropdownProps} {...fieldProps} aria-label={label} id={id} invalid={!!errorMessage} />
+            )}
+        </FormField>
+    );
+}
+
+DropdownField.bspkName = 'DropdownField';
+
+export { DropdownField };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/EmptyState.tsx

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+
+import { Button } from './Button';
+import { Layout } from './Layout';
+import { Txt } from './Txt';
+
+import { CallToActionButton } from './';
+
+export type EmptyStateProps = {
+    /** The image or icon to display in the empty state. */
+    children?: ReactNode;
+    /**
+     * The header of the empty state.
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * The body of the empty state.
+     *
+     * @required
+     */
+    body: string;
+    /**
+     * This property may be undefined or an object containing required CallToActionButton properties.
+     *
+     * @type CallToActionButton
+     */
+    callToAction?: CallToActionButton;
+};
+
+/**
+ * A design pattern component that indicates to users that system has no content to display.
+ *
+ * @name EmptyState
+ */
+function EmptyState({ children, header, body, callToAction }: EmptyStateProps) {
+    return (
+        <Layout
+            align="center"
+            column
+            data-empty-state
+            style={{
+                margin: 'var(--spacing-sizing-04)',
+                maxWidth: '500px',
+            }}
+        >
+            {children}
+            <Layout align="center" column gap="4">
+                <Txt as="div" variant="heading-h5">
+                    {header}
+                </Txt>
+                <Txt as="div" variant="body-base">
+                    {body}
+                </Txt>
+            </Layout>
+            {callToAction && (
+                <Button
+                    label={callToAction.label}
+                    onClick={callToAction.onClick}
+                    size={callToAction.size || 'medium'}
+                    variant="primary"
+                />
+            )}
+        </Layout>
+    );
+}
+
+EmptyState.bspkName = 'EmptyState';
+
+export { EmptyState };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Fab.tsx

@@ -0,0 +1,222 @@
+import { css } from '@emotion/react';
+import { ElementType } from 'react';
+
+import { ButtonProps } from './Button';
+import { Tooltip } from './Tooltip';
+import { isValidIcon } from './utils/children';
+import { useErrorLogger } from './utils/errors';
+
+import { ElementProps } from './';
+
+export type FabVariant = 'neutral' | 'primary' | 'secondary';
+
+export type FabProps<As extends ElementType = 'button'> = Pick<
+    ButtonProps<As>,
+    'as' | 'icon' | 'onClick' | 'showLabel' | 'toolTip'
+> &
+    Required<Pick<ButtonProps<As>, 'label'>> & {
+        /**
+         * The size of the button.
+         *
+         * @default small
+         */
+        size?: 'medium' | 'small';
+        /**
+         * The style variant of the button.
+         *
+         * @default primary
+         */
+        variant?: FabVariant;
+        /**
+         * The placement of the button on the container.
+         *
+         * @default bottom-right
+         */
+        placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+        /**
+         * The container to render the button in.
+         *
+         * @default local
+         */
+        container?: 'local' | 'page';
+    };
+
+/**
+ * A button that highlights a primary action that is elevated above the body content of a page; normally fixed to the
+ * bottom right of a screen.
+ *
+ * @name Fab
+ */
+function Fab<As extends ElementType = 'button'>({
+    size = 'small',
+    variant = 'primary',
+    showLabel: showLabelProp = true,
+    as,
+    placement = 'bottom-right',
+    container = 'local',
+    label,
+    icon,
+    toolTip,
+    ...otherProps
+}: ElementProps<FabProps<As>, As>) {
+    // ignore showLabel=false if there is no icon
+    const hideLabel = showLabelProp === false && icon;
+
+    const { logError } = useErrorLogger();
+    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
+
+    const As: ElementType = as || 'button';
+
+    const button = (
+        <As
+            {...otherProps}
+            aria-label={label}
+            css={style}
+            data-container={container}
+            data-fab
+            data-placement={placement}
+            data-round={hideLabel || undefined}
+            data-size={size}
+            data-variant={variant}
+        >
+            {!!icon && <span data-fab-icon>{icon}</span>}
+            {!hideLabel && <span data-fab-label>{label}</span>}
+        </As>
+    );
+
+    return toolTip || hideLabel ? (
+        <Tooltip label={toolTip || label} placement="top">
+            {button}
+        </Tooltip>
+    ) : (
+        button
+    );
+}
+
+Fab.bspkName = 'Fab';
+
+export { Fab };
+
+export const style = css`
+    --placement-offset: var(--spacing-sizing-04);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sizing-02);
+    border: none;
+    cursor: pointer;
+    box-sizing: border-box;
+    background: transparent;
+    text-decoration: none;
+    z-index: var(--z-index-fab);
+    box-shadow: var(--drop-shadow-float);
+    border-radius: var(--radius-small);
+
+    &[data-container='page'] {
+        position: fixed;
+    }
+
+    &[data-container='local'] {
+        position: absolute;
+    }
+
+    &[data-placement='top-right'] {
+        top: var(--placement-offset);
+        right: var(--placement-offset);
+    }
+
+    &[data-placement='bottom-right'] {
+        bottom: var(--placement-offset);
+        right: var(--placement-offset);
+    }
+
+    &[data-placement='top-left'] {
+        top: var(--placement-offset);
+        left: var(--placement-offset);
+    }
+
+    &[data-placement='bottom-left'] {
+        bottom: var(--placement-offset);
+        left: var(--placement-offset);
+    }
+
+    > [data-fab-icon] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    > [data-fab-label] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &[data-size='small'] {
+        font: var(--labels-base);
+        height: var(--spacing-sizing-10);
+        padding: 0 var(--spacing-sizing-04);
+
+        > [data-fab-icon] {
+            width: var(--spacing-sizing-05);
+        }
+    }
+
+    &[data-size='medium'] {
+        font: var(--labels-large);
+        height: var(--spacing-sizing-14);
+        padding: 0 var(--spacing-sizing-07);
+
+        > [data-fab-icon] {
+            width: var(--spacing-sizing-06);
+        }
+    }
+
+    &[data-variant='primary'] {
+        --variant-background: var(--surface-brand-primary);
+        --variant-foreground: var(--foreground-brand-on-primary);
+    }
+
+    &[data-variant='secondary'] {
+        --variant-background: var(--surface-brand-secondary);
+        --variant-foreground: var(--foreground-brand-on-secondary);
+    }
+
+    &[data-variant='neutral'] {
+        --variant-background: var(--surface-neutral-t1-base);
+        --variant-foreground: var(--foreground-neutral-on-surface-variant-01);
+    }
+
+    background: var(--variant-background);
+    color: var(--variant-foreground);
+    --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
+
+    [data-pseudo='hover'] > &,
+    &:hover {
+        background:
+            linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),
+            var(--variant-gradient);
+    }
+
+    [data-pseudo='active'] > &,
+    &:active {
+        background:
+            linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),
+            var(--variant-gradient);
+    }
+
+    [data-pseudo='focus'] > &,
+    &:focus-visible {
+        outline: solid 2px var(--stroke-neutral-focus);
+    }
+
+    &[data-round] {
+        border-radius: var(--radius-circular);
+        aspect-ratio: 1/1;
+        padding: 0;
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/FileUpload.tsx

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

package/src/FormField.tsx

@@ -0,0 +1,107 @@
+import { css } from '@emotion/react';
+
+import { InlineAlert } from './InlineAlert';
+import { Layout } from './Layout';
+import { Txt } from './Txt';
+
+import { CommonProps } from './';
+
+export type FieldControlProps = {
+    /**
+     * Marks the element as invalid and displays error message.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /** The id of the control description. */
+    'aria-describedby'?: string;
+    /** The id of the error message */
+    'aria-errormessage'?: string;
+};
+
+export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
+    /**
+     * The label of the field.
+     *
+     * @required
+     */
+    label: string;
+    /** The id of the control. */
+    controlId: string;
+    /**
+     * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or TimePicker.
+     *
+     * @type (childProps: FieldControlProps) => JSX.Element
+     * @required
+     */
+    children: (childProps: FieldControlProps) => JSX.Element;
+    /** The helperText of the field. */
+    helperText?: string;
+    /** The trailing element of the label. */
+    labelTrailing?: React.ReactNode;
+};
+
+/**
+ * Wrapper component for form controls.
+ *
+ * Children may be one of the following: TextInput, Dropdown, DatePicker, or TimePicker.
+ *
+ * @name FormField
+ */
+function FormField({ label, errorMessage, helperText, children, labelTrailing, controlId, required }: FormFieldProps) {
+    const errorMessageId = errorMessage && `${controlId}-error-message`;
+    const helperTextId = helperText && `${controlId}-helper-text`;
+
+    if (typeof children !== 'function') return null;
+
+    return (
+        <div css={style} data-form-field>
+            <Layout as="header">
+                <label htmlFor={controlId}>
+                    <Txt as="span" variant="labels-small">
+                        {label}
+                    </Txt>
+                    {required && (
+                        <Txt as="span" variant="body-small">
+                            {' (Required)'}
+                        </Txt>
+                    )}
+                </label>
+                {labelTrailing}
+            </Layout>
+            {children({
+                invalid: !!errorMessage,
+                'aria-describedby': helperTextId,
+                'aria-errormessage': errorMessageId,
+            })}
+            {errorMessage && (
+                <InlineAlert id={errorMessageId} variant="error">
+                    {errorMessage}
+                </InlineAlert>
+            )}
+            {helperText && (
+                <Txt id={helperTextId} variant="body-small">
+                    {helperText}
+                </Txt>
+            )}
+        </div>
+    );
+}
+
+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/Image.tsx

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

package/src/Img.tsx

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+import { ElementProps } from './';
+
+const style = {
+    container: css`
+        display: block;
+    `,
+};
+
+export type ImgProps = {
+    /**
+     * The URL of the image.
+     *
+     * @required
+     */
+    src: string;
+    /**
+     * The alternative text for the image.
+     *
+     * @required
+     */
+    alt: string;
+};
+
+/**
+ * The Img component is used to display images on the page.
+ *
+ * @name Img
+ */
+function Img({ alt, ...props }: ElementProps<ImgProps, 'img'>) {
+    return <img {...props} alt={alt} css={style.container} data-img />;
+}
+
+Img.bspkName = 'Img';
+
+export { Img };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/InlineAlert.tsx

@@ -0,0 +1,119 @@
+import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
+import { SvgErrorFill } from '@bspk/icons/ErrorFill';
+import { SvgInfoFill } from '@bspk/icons/InfoFill';
+import { css } from '@emotion/react';
+import { ReactNode } from 'react';
+
+import { Txt } from './Txt';
+
+import { AlertVariant } from './';
+
+export type InlineAlertProps = {
+    /**
+     * The content of the inline alert.
+     *
+     * @type multiline
+     * @required
+     */
+    children: string;
+    /**
+     * The color variant of the inline alert.
+     *
+     * @default informational
+     */
+    variant?: AlertVariant;
+    /** The id of the inline alert. */
+    id?: string;
+};
+
+/**
+ * Inline alerts provide contextual feedback messages for typical user actions with a handful of available and flexible
+ * alert messages.
+ *
+ * @name InlineAlert
+ */
+function InlineAlert({ children, variant = 'informational', id }: InlineAlertProps) {
+    return (
+        <div css={style} data-inline-alert={id} data-variant={variant}>
+            {VARIANT_ICON[variant]}
+            <Txt variant="body-small">{children}</Txt>
+        </div>
+    );
+}
+
+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">
+        <path
+            d="M2.72503 21C2.5417 21 2.37503 20.9542 2.22503 20.8625C2.07503 20.7708 1.95837 20.65 1.87503 20.5C1.7917 20.35 1.74587 20.1875 1.73753 20.0125C1.7292 19.8375 1.77503 19.6667 1.87503 19.5L11.125 3.5C11.225 3.33333 11.3542 3.20833 11.5125 3.125C11.6709 3.04167 11.8334 3 12 3C12.1667 3 12.3292 3.04167 12.4875 3.125C12.6459 3.20833 12.775 3.33333 12.875 3.5L22.125 19.5C22.225 19.6667 22.2709 19.8375 22.2625 20.0125C22.2542 20.1875 22.2084 20.35 22.125 20.5C22.0417 20.65 21.925 20.7708 21.775 20.8625C21.625 20.9542 21.4584 21 21.275 21H2.72503ZM12 18C12.2834 18 12.5209 17.9042 12.7125 17.7125C12.9042 17.5208 13 17.2833 13 17C13 16.7167 12.9042 16.4792 12.7125 16.2875C12.5209 16.0958 12.2834 16 12 16C11.7167 16 11.4792 16.0958 11.2875 16.2875C11.0959 16.4792 11 16.7167 11 17C11 17.2833 11.0959 17.5208 11.2875 17.7125C11.4792 17.9042 11.7167 18 12 18ZM12 15C12.2834 15 12.5209 14.9042 12.7125 14.7125C12.9042 14.5208 13 14.2833 13 14V11C13 10.7167 12.9042 10.4792 12.7125 10.2875C12.5209 10.0958 12.2834 10 12 10C11.7167 10 11.4792 10.0958 11.2875 10.2875C11.0959 10.4792 11 10.7167 11 11V14C11 14.2833 11.0959 14.5208 11.2875 14.7125C11.4792 14.9042 11.7167 15 12 15Z"
+            fill="currentColor"
+        />
+        <path
+            d="M12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125Z"
+            data-second-tone
+        />
+        <path
+            d="M12.7125 14.7125C12.5208 14.9042 12.2833 15 12 15C11.7167 15 11.4792 14.9042 11.2875 14.7125C11.0958 14.5208 11 14.2833 11 14V11C11 10.7167 11.0958 10.4792 11.2875 10.2875C11.4792 10.0958 11.7167 10 12 10C12.2833 10 12.5208 10.0958 12.7125 10.2875C12.9042 10.4792 13 10.7167 13 11V14C13 14.2833 12.9042 14.5208 12.7125 14.7125Z"
+            data-second-tone
+        />
+    </svg>
+);
+
+const VARIANT_ICON: Record<AlertVariant, ReactNode> = {
+    error: <SvgErrorFill />,
+    informational: <SvgInfoFill />,
+    success: <SvgCheckCircleFill />,
+    warning: <SvgWarningTwoTone />,
+};
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */