@bspk/ui 1.1.32 → 1.1.34

package/src/Textarea.tsx

@@ -1,154 +0,0 @@
-import './textarea.scss';
-import { ChangeEvent, CSSProperties } from 'react';
-
-import { useId } from './hooks/useId';
-
-import { CommonProps, InvalidPropsLibrary, SetRef } from './';
-
-const DEFAULT = {
-    minRows: 3,
-    maxRows: 10,
-    textSize: 'medium',
-} as const;
-
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> &
-    InvalidPropsLibrary & {
-        /**
-         * Callback when the value of the field changes.
-         *
-         * @type (next: String, Event) => void
-         * @required
-         */
-        onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
-        /**
-         * The text size of the field.
-         *
-         * @default medium
-         */
-        textSize?: 'large' | 'medium' | 'small';
-        /**
-         * The value of the field.
-         *
-         * @type multiline
-         */
-        value?: string;
-        /**
-         * The textarea control name of the field.
-         *
-         * @required
-         */
-        name: string;
-        /** The ref of the field. */
-        innerRef?: SetRef<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 will show.
-         *
-         * @default 3
-         * @minimum 3
-         * @maximum 10
-         */
-        minRows?: number;
-        /**
-         * The maximum number of rows that the textarea will show.
-         *
-         * @default 10
-         * @minimum 3
-         * @maximum 10
-         */
-        maxRows?: number;
-    };
-
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
- * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
- * remaining below the limit.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Textarea } from '@bspk/ui/Textarea';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name Textarea
- */
-function Textarea({
-    invalid: invalidProp,
-    onChange,
-    textSize = DEFAULT.textSize,
-    value = '',
-    name,
-    'aria-label': ariaLabel,
-    innerRef,
-    placeholder,
-    id: idProp,
-    minRows: minRowsProp = DEFAULT.minRows,
-    maxRows: maxRowsProp = DEFAULT.maxRows,
-    errorMessage,
-    ...otherProps
-}: TextareaProps) {
-    const id = useId(idProp);
-    const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
-    // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
-    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
-
-    return (
-        <div
-            data-bspk="textarea"
-            data-size={textSize}
-            style={
-                {
-                    '--min-rows': minRows,
-                    '--max-rows': maxRows,
-                } as CSSProperties
-            }
-        >
-            <textarea
-                {...otherProps}
-                aria-errormessage={errorMessage || undefined}
-                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}
-                wrap="hard"
-            />
-            <div aria-hidden data-replicated-value />
-        </div>
-    );
-}
-
-Textarea.bspkName = 'Textarea';
-
-export { Textarea };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TextareaField.tsx

@@ -1,92 +0,0 @@
-import { FormFieldProps, FormField } from './FormField';
-import { TextareaProps, Textarea } 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.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @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}
-            data-bspk="textarea-field"
-            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/ToggleOption.tsx

@@ -1,43 +0,0 @@
-import './toggle-option.scss';
-import { ReactElement } from 'react';
-
-export type ToggleOptionProps = {
-    /**
-     * The label of the option. Also used as the aria-label of the checkbox.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The description of the option.
-     *
-     * @type multiline
-     * @type multiline
-     */
-    description?: string;
-    /** The control element to use. */
-    children?: ReactElement;
-};
-
-/**
- * A utility component that wraps a checkbox, radio, and switch.
- *
- * @name ToggleOption
- */
-function ToggleOption({ label, description, children }: ToggleOptionProps) {
-    return (
-        <label data-bspk="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 };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Tooltip.tsx

@@ -1,131 +0,0 @@
-import './tooltip.scss';
-import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 'react';
-
-import { Portal } from './Portal';
-import { Placement, useFloating } from './hooks/useFloating';
-
-const DEFAULT = {
-    placement: 'top',
-    showTail: true,
-    disabled: false,
-} as const;
-
-export type TooltipProps = {
-    /**
-     * The placement of the tooltip.
-     *
-     * @default top
-     */
-    placement?: Extract<Placement, 'bottom' | 'left' | 'right' | 'top'>;
-    /** The tooltip content. */
-    label: string;
-    /**
-     * A single element that will trigger the tooltip when hovered over.
-     *
-     * @type ReactElement
-     * @required
-     */
-    children: ReactElement;
-    /** Determines if the tooltip is disabled. */
-    disabled?: boolean;
-    /**
-     * Determines if the tooltip should hide the tail.
-     *
-     * @default true
-     */
-    showTail?: boolean;
-};
-
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @example
- *     import { Tooltip } from '@bspk/ui/Tooltip';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     export function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 <Button>Click me</Button>
- *             </Tooltip>
- *         );
- *     }
- *
- * @name Tooltip
- */
-function Tooltip({
-    placement = DEFAULT.placement,
-    label,
-    children,
-    disabled = DEFAULT.disabled,
-    showTail = DEFAULT.showTail,
-}: TooltipProps) {
-    const id = useId();
-    const [show, setShow] = useState(false);
-
-    const child = useMemo(
-        () =>
-            !disabled &&
-            children &&
-            cloneElement(children, {
-                onMouseOver: () => setShow(true),
-                onMouseLeave: () => setShow(false),
-                'aria-describedby': id,
-            }),
-        [children, disabled, id],
-    );
-
-    const arrowRef = useRef<HTMLElement | null>(null);
-
-    const { floatingStyles, middlewareData, elements } = useFloating({
-        placement,
-        strategy: 'fixed',
-        offsetOptions: showTail ? 8 : 4,
-        arrowRef,
-        hide: !show,
-    });
-
-    return disabled ? (
-        children
-    ) : (
-        <>
-            {child}
-            {label && (
-                <Portal>
-                    <div
-                        data-bspk="tooltip"
-                        data-placement={middlewareData?.offset?.placement}
-                        id={id}
-                        ref={(node) => {
-                            elements.setFloating(node);
-                            elements.setTrigger(document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`));
-                        }}
-                        role="tooltip"
-                        style={floatingStyles}
-                    >
-                        <span data-text>{label}</span>
-                        <span
-                            aria-hidden
-                            data-arrow
-                            ref={(node) => {
-                                arrowRef.current = node;
-                            }}
-                            style={{
-                                zIndex: 1000,
-                                opacity: showTail ? 1 : 0,
-                                left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',
-                                top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',
-                            }}
-                        />
-                    </div>
-                </Portal>
-            )}
-        </>
-    );
-}
-
-Tooltip.bspkName = 'Tooltip';
-
-export { Tooltip };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TopNavigation.tsx

@@ -1,21 +0,0 @@
-import './top-navigation.scss';
-
-export type TopNavigationProps = {
-    /** The content of the top navigation. */
-    children: string;
-};
-
-/**
- * Component description coming soon.
- *
- * @name TopNavigation
- */
-function TopNavigation({ children }: TopNavigationProps) {
-    return <div data-bspk="top-navigation">{children}</div>;
-}
-
-TopNavigation.bspkName = 'TopNavigation';
-
-export { TopNavigation };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Txt.tsx

@@ -1,68 +0,0 @@
-import { ElementType } from 'react';
-
-import { TxtVariant } from './utils/txtVariants';
-
-import { ElementProps } from './';
-
-export type TxtProps<As extends ElementType = 'span'> = {
-    /**
-     * The element type to render as.
-     *
-     * @default span
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The content to render.
-     *
-     * @type string
-     * @required
-     */
-    children: unknown;
-    /**
-     * The variant to use.
-     *
-     * @default body-base
-     */
-    variant?: TxtVariant;
-    /** The id of the element. */
-    id?: string;
-};
-
-/**
- * A text component that applies the correct font styles based on the variant and size. variant
- *
- * @example
- *     import { Txt } from '@bspk/ui/Txt';
- *
- *     export function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
- *
- * @name Txt
- */
-function Txt<As extends ElementType = 'span'>({
-    children,
-    as,
-    variant = 'body-base',
-    style: styleProp,
-    ...containerProps
-}: ElementProps<TxtProps<As>, As>) {
-    const content = children?.toString();
-
-    if (!content) return null;
-
-    const As: ElementType = as || 'span';
-
-    return (
-        <As {...containerProps} data-bspk="txt" style={{ ...styleProp, font: `var(--${variant})` }}>
-            {content}
-        </As>
-    );
-}
-
-Txt.bspkName = 'Txt';
-
-export { Txt };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/avatar-group.scss

@@ -1,17 +0,0 @@
-[data-bspk='avatar-group'] {
-    width: 100%;
-
-    [data-wrap] {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: end;
-        justify-content: end;
-        gap: var(--spacing-sizing-02);
-        overflow: hidden;
-
-        & > * + * {
-            // margin-left: calc(var(--spacing-sizing-01) * -1);
-        }
-    }
-}

package/src/avatar.scss

@@ -1,98 +0,0 @@
-[data-bspk='avatar'] {
-    --height: var(--spacing-sizing-10);
-    --font: var(--labels-base);
-    --svg-size: var(--spacing-sizing-10);
-
-    &:not([data-color]) {
-        --foreground: var(--foreground-neutral-on-surface);
-        --background: var(--surface-neutral-t3-low);
-    }
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    height: var(--height);
-    width: var(--height);
-    aspect-ratio: 1 / 1;
-    border-radius: 999px;
-    background-color: var(--background);
-    color: var(--foreground);
-    font: var(--font);
-
-    &:has(img) {
-        overflow: hidden;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    svg {
-        width: var(--svg-size);
-        height: var(--svg-size);
-    }
-
-    [data-icon] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &[data-size='x-small'] {
-        --height: var(--spacing-sizing-06);
-        --font: var(--labels-x-small);
-        --svg-size: var(--spacing-sizing-04);
-    }
-
-    &[data-size='small'] {
-        --height: var(--spacing-sizing-08);
-        --font: var(--labels-small);
-        --svg-size: var(--spacing-sizing-05);
-    }
-
-    &[data-size='medium'] {
-        --height: var(--spacing-sizing-10);
-        --font: var(--labels-base);
-        --svg-size: var(--spacing-sizing-05);
-    }
-
-    &[data-size='large'] {
-        --height: var(--spacing-sizing-12);
-        --font: var(--labels-large);
-        --svg-size: var(--spacing-sizing-06);
-    }
-
-    &[data-size='x-large'] {
-        --height: var(--spacing-sizing-14);
-        --font: var(--subheader-x-large);
-        --svg-size: var(--spacing-sizing-08);
-    }
-
-    &[data-size='xx-large'] {
-        --height: var(--spacing-sizing-17);
-        --font: var(--subheader-xx-large);
-        --svg-size: var(--spacing-sizing-09);
-    }
-
-    &[data-size='xxx-large'] {
-        --height: var(--spacing-sizing-19);
-        --font: var(--display-regular-small);
-        --svg-size: var(--spacing-sizing-12);
-    }
-
-    &[data-size='xxxx-large'] {
-        --height: var(--spacing-sizing-21);
-        --font: var(--display-regular-medium);
-        --svg-size: var(--spacing-sizing-15);
-    }
-
-    &[data-size='xxxxx-large'] {
-        --height: var(--spacing-sizing-23);
-        --font: var(--display-regular-large);
-        --svg-size: var(--spacing-sizing-17);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/badge.scss

@@ -1,52 +0,0 @@
-[data-bspk='badge'] {
-    --size: var(--spacing-sizing-06);
-    --padding-x: var(--spacing-sizing-02);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-circular);
-    height: var(--size);
-    width: fit-content;
-    padding: 0 var(--padding-x);
-    min-width: var(--size);
-    font: var(--labels-x-small);
-    color: var(--foreground-brand-on-primary);
-    background: var(--surface-brand-primary);
-
-    &[data-size='x-small'] {
-        --size: var(--spacing-sizing-05);
-        --padding-x: var(--spacing-sizing-01);
-    }
-
-    &[data-variant='secondary'] {
-        color: var(--foreground-brand-on-secondary);
-        background: var(--surface-brand-secondary);
-    }
-
-    &[data-surface-border] {
-        padding: 0 calc(var(--padding-x) - 2px);
-        border: 2px solid var(--surface-neutral-t1-base);
-    }
-}
-
-[data-bspk='badge-wrapper'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: fit-content;
-    height: fit-content;
-    flex-shrink: 0;
-
-    [data-bspk='badge'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: scale(1) translate(50%, -50%);
-        transform-origin: 100% 0%;
-        z-index: 2;
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */