@bspk/ui 1.0.0

package/src/Skeleton.tsx

@@ -0,0 +1,90 @@
+import { css } from '@emotion/react';
+import { CSSProperties } from 'react';
+
+import { TxtVariant } from './utils/txtVariants';
+
+export type SkeletonVariant = TxtVariant | 'other';
+
+export type SkeletonProps = {
+    /**
+     * The text variant of the skeleton. If 'other' skeleton will expand to size of nearest relative positioned parent.
+     *
+     * @default other
+     */
+    variant?: SkeletonVariant;
+    /**
+     * The number of lines showing. Ignored when variant is other.
+     *
+     * @default 1
+     */
+    lines?: number;
+};
+
+/**
+ * A visual placeholder for an element while it is in a loading state.
+ *
+ * @name Skeleton
+ */
+function Skeleton({ variant = 'other', lines: linesProp = 3 }: SkeletonProps) {
+    const lines = Math.max(1, linesProp || 0);
+
+    return (
+        <div
+            css={style}
+            data-skeleton
+            style={
+                {
+                    '--margin': `calc(var(--${variant}-line-height) - var(--${variant}-size))`,
+                    '--height': `var(--${variant}-size)`,
+                } as CSSProperties
+            }
+        >
+            {variant !== 'other' && [...Array(lines)].map((_, index) => <div data-line key={index} />)}
+        </div>
+    );
+}
+
+Skeleton.bspkName = 'Skeleton';
+
+export { Skeleton };
+
+export const style = css`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--margin);
+
+    animation: skeleton-pulse 1.5s infinite;
+    @keyframes skeleton-pulse {
+        0% {
+            opacity: 0.8;
+        }
+        50% {
+            opacity: 0.4;
+        }
+        100% {
+            opacity: 0.8;
+        }
+    }
+
+    &:empty {
+        width: auto;
+        height: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--foreground-neutral-skeleton-element);
+        border-radius: var(--radius-small);
+    }
+
+    [data-line] {
+        width: 100%;
+        background: var(--foreground-neutral-skeleton-element);
+        border-radius: var(--radius-small);
+        height: var(--height);
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SliderInput.tsx

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

package/src/Snackbar.tsx

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

package/src/StylesProviderAnywhere.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import brandStyle from './styles/anywhere';
+import baseStyle from './styles/base';
+
+/**
+ * Utility to provide the Anywhere styles to the application.
+ *
+ * @name StylesProviderAnywhere
+ */
+function StylesProviderAnywhere() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'anywhere');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderAnywhere.bspkName = 'StylesProviderAnywhere';
+
+export { StylesProviderAnywhere };

package/src/StylesProviderBetterHomesGardens.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/better-homes-gardens';
+
+/**
+ * Utility to provide the Better Homes & Gardens styles to the application.
+ *
+ * @name StylesProviderBetterHomesGardens
+ */
+function StylesProviderBetterHomesGardens() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'better-homes-gardens');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderBetterHomesGardens.bspkName = 'StylesProviderBetterHomesGardens';
+
+export { StylesProviderBetterHomesGardens };

package/src/StylesProviderCartus.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/cartus';
+
+/**
+ * Utility to provide the Cartus styles to the application.
+ *
+ * @name StylesProviderCartus
+ */
+function StylesProviderCartus() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'cartus');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderCartus.bspkName = 'StylesProviderCartus';
+
+export { StylesProviderCartus };

package/src/StylesProviderCentury21.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/century-21';
+
+/**
+ * Utility to provide the Century 21 styles to the application.
+ *
+ * @name StylesProviderCentury21
+ */
+function StylesProviderCentury21() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'century-21');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderCentury21.bspkName = 'StylesProviderCentury21';
+
+export { StylesProviderCentury21 };

package/src/StylesProviderColdwellBanker.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/coldwell-banker';
+
+/**
+ * Utility to provide the Coldwell Banker styles to the application.
+ *
+ * @name StylesProviderColdwellBanker
+ */
+function StylesProviderColdwellBanker() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'coldwell-banker');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderColdwellBanker.bspkName = 'StylesProviderColdwellBanker';
+
+export { StylesProviderColdwellBanker };

package/src/StylesProviderCorcoran.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/corcoran';
+
+/**
+ * Utility to provide the Corcoran styles to the application.
+ *
+ * @name StylesProviderCorcoran
+ */
+function StylesProviderCorcoran() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'corcoran');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderCorcoran.bspkName = 'StylesProviderCorcoran';
+
+export { StylesProviderCorcoran };

package/src/StylesProviderDenaliBoss.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/denali-boss';
+
+/**
+ * Utility to provide the Denali Boss styles to the application.
+ *
+ * @name StylesProviderDenaliBoss
+ */
+function StylesProviderDenaliBoss() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'denali-boss');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderDenaliBoss.bspkName = 'StylesProviderDenaliBoss';
+
+export { StylesProviderDenaliBoss };

package/src/StylesProviderEra.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/era';
+
+/**
+ * Utility to provide the ERA styles to the application.
+ *
+ * @name StylesProviderEra
+ */
+function StylesProviderEra() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'era');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderEra.bspkName = 'StylesProviderEra';
+
+export { StylesProviderEra };

package/src/StylesProviderSothebys.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+import baseStyle from './styles/base';
+import brandStyle from './styles/sothebys';
+
+/**
+ * Utility to provide the Sotheby's styles to the application.
+ *
+ * @name StylesProviderSothebys
+ */
+function StylesProviderSothebys() {
+    const styleEmentRef = useRef<HTMLStyleElement | null>(null);
+
+    useEffect(() => {
+        styleEmentRef.current = document.createElement('style');
+        styleEmentRef.current.setAttribute('data-bspk', 'sothebys');
+        styleEmentRef.current.innerHTML = brandStyle + baseStyle;
+        document.head.appendChild(styleEmentRef.current);
+        document.body.style.display = '';
+
+        return () => {
+            if (styleEmentRef.current) document.head.removeChild(styleEmentRef.current);
+        };
+    }, []);
+
+    return <></>;
+}
+
+StylesProviderSothebys.bspkName = 'StylesProviderSothebys';
+
+export { StylesProviderSothebys };

package/src/Switch.tsx

@@ -0,0 +1,122 @@
+import { css } from '@emotion/react';
+import { ChangeEvent } from 'react';
+
+import { CommonProps } from './';
+
+export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'onClick' | 'value'> & {
+    /**
+     * Marks the control as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the control is checked or unchecked.
+     *
+     * @type (checked, Event) => void
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+/**
+ * A control element that allows users to toggle between two states, typically representing on/off and inherits
+ * immediate reaction in each state. This is the base element and if used directly you must wrap it with a label. This
+ * will more often be used in the SwitchOption or SwitchGroup component.
+ *
+ * @element
+ *
+ * @name Switch
+ */
+function Switch(props: SwitchProps) {
+    const {
+        //
+        checked = false,
+        disabled,
+        ...otherProps
+    } = props;
+
+    return (
+        <span css={style} data-switch>
+            <input
+                {...otherProps}
+                aria-disabled={disabled || undefined}
+                checked={checked}
+                disabled={disabled || undefined}
+                onChange={(event) => props.onChange(!!event.target.checked, event)}
+                type="checkbox"
+            />
+            <span aria-hidden />
+        </span>
+    );
+}
+
+Switch.bspkName = 'Switch';
+
+export { Switch };
+
+export const style = css`
+    --track-width: var(--spacing-sizing-09);
+    --toggle-width: var(--spacing-sizing-04);
+    --track-bg: var(--surface-neutral-t4-high);
+    --toggle-bg: var(--foreground-neutral-on-color);
+
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    margin: 2px;
+
+    input[type='checkbox'] {
+        position: absolute;
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        cursor: pointer;
+    }
+
+    box-sizing: border-box;
+    width: var(--track-width);
+    height: var(--spacing-sizing-05);
+    border-radius: var(--spacing-sizing-05);
+    background-color: var(--track-bg);
+    position: relative;
+    z-index: 1;
+
+    span {
+        display: block;
+        width: var(--toggle-width);
+        height: var(--toggle-width);
+        border-radius: var(--radius-circular);
+        background-color: var(--toggle-bg);
+        transition: left 0.2s;
+        box-shadow: var(--drop-shadow-raise);
+        left: 2px;
+        top: 2px;
+        position: absolute;
+    }
+
+    &:has(input[type='checkbox']:checked) {
+        --track-bg: var(--foreground-brand-primary);
+
+        span {
+            left: calc(var(--track-width) - var(--toggle-width) - 2px);
+        }
+    }
+
+    &:has(input[type='checkbox']:disabled) {
+        input[type='checkbox'] {
+            pointer-events: none;
+        }
+        --track-bg: var(--interactions-disabled-opacity);
+        --toggle-bg: var(--foreground-neutral-disabled-on-surface);
+
+        &:has(input[type='checkbox']:checked) span {
+            --toggle-bg: var(--foreground-neutral-disabled-on-color-surface);
+        }
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SwitchGroup.tsx

@@ -0,0 +1,60 @@
+import { Switch } from './Switch';
+import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+
+import { ToggleControlProps, ElementProps, CommonProps } from './';
+
+export type SwitchGroupOption = Pick<ToggleControlProps<HTMLInputElement>, 'value'> &
+    Pick<ToggleOptionProps, 'description' | 'label'>;
+
+export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
+    /**
+     * The function to call when the switches are changed.
+     *
+     * @required
+     */
+    onChange: (value: string[]) => void;
+    /**
+     * The options for the switches.
+     *
+     * @type SwitchGroupOption[]
+     * @required
+     */
+    options: SwitchGroupOption[];
+    /**
+     * The values of the switches in the on state.
+     *
+     * @type string[]
+     */
+    values?: SwitchGroupProps['options'][number]['value'][];
+};
+
+/**
+ * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name SwitchGroup
+ */
+function SwitchGroup({ onChange, options = [], name, values = [], ...props }: ElementProps<SwitchGroupProps, 'div'>) {
+    return (
+        <div {...props} data-control-group data-switch-group role="group">
+            {options.map(({ label, description, value }) => (
+                <ToggleOption description={description} key={value} label={label}>
+                    <Switch
+                        aria-label={label}
+                        checked={values.includes(value)}
+                        name={name}
+                        onChange={(checked) => {
+                            onChange(checked ? [...values, value] : values.filter((v) => v !== value));
+                        }}
+                        value={value}
+                    />
+                </ToggleOption>
+            ))}
+        </div>
+    );
+}
+
+SwitchGroup.bspkName = 'SwitchGroup';
+
+export { SwitchGroup };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SwitchOption.tsx

@@ -0,0 +1,24 @@
+import { Switch, SwitchProps } from './Switch';
+import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+
+export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> &
+    Pick<ToggleOptionProps, 'description' | 'label' | 'size'>;
+
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name SwitchOption
+ */
+function SwitchOption({ label, description, size, ...checkboxProps }: SwitchOptionProps) {
+    return (
+        <ToggleOption data-checkbox-field description={description} label={label} size={size}>
+            <Switch {...checkboxProps} aria-label={label} />
+        </ToggleOption>
+    );
+}
+
+SwitchOption.bspkName = 'SwitchOption';
+
+export { SwitchOption };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */