@bspk/ui 1.1.32 → 1.1.34

package/src/Chip.tsx

@@ -1,102 +0,0 @@
-import './chip.scss';
-import { CSSProperties, ReactNode } from 'react';
-
-import { CommonProps } from '.';
-
-export type ChipProps = CommonProps<'disabled'> & {
-    /**
-     * 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;
-    /** The function to call when the chip is clicked. */
-    onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-};
-
-/**
- * Dynamically generated options that are suggested to the user as responses or prompts.
- *
- * @example
- *     import { Chip } from '@bspk/ui/Chip';
- *
- *     function Example() {
- *         return (
- *             <Chip variant="filter" onClick={() => console.log('Chip clicked!')}>
- *                 Example Chip
- *             </Chip>
- *         );
- *     }
- *
- * @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
-            data-bspk="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 };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Dialog.tsx

@@ -1,171 +0,0 @@
-import './dialog.scss';
-import { FocusTrap } from 'focus-trap-react';
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-
-import { Portal } from './Portal';
-import { useId } from './hooks/useId';
-import { useOutsideClick } from './hooks/useOutsideClick';
-
-import { CommonProps, ElementProps, SetRef } from './';
-
-export type DialogProps = CommonProps<'id'> & {
-    /** The content of the dialog. */
-    children?: ReactNode;
-    /** A ref to the dialog element. */
-    innerRef?: SetRef<HTMLDivElement>;
-    /**
-     * If the dialog should appear.
-     *
-     * @default false
-     */
-    open?: boolean;
-    /**
-     * Function to call when the dialog is closed.
-     *
-     * @type () => void
-     * @required
-     */
-    onClose: () => void;
-    /**
-     * The placement of the dialog on the screen.
-     *
-     * @default center
-     */
-    placement?: 'bottom' | 'center' | 'left' | 'right' | 'top';
-    /**
-     * Whether the dialog should have a scrim behind it.
-     *
-     * @default false
-     */
-    hideScrim?: boolean;
-};
-
-/**
- * Dialogs display important information that users need to acknowledge. They appear over the interface and block
- * further interactions until an action is selected.
- *
- * @example
- *     import { Dialog } from '@bspk/ui/Dialog';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
- *
- *         return (
- *             <>
- *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
- *                 <Dialog open={open} onClose={() => setOpen(false)}>
- *                     <h1>Dialog Title</h1>
- *                     <p>This is the content of the dialog.</p>
- *                     <button onClick={() => setOpen(false)}>Close</button>
- *                 </Dialog>
- *             </>
- *         );
- *     }
- *
- * @name Dialog
- */
-function Dialog({
-    //
-    children,
-    innerRef,
-    onClose,
-    open,
-    placement = 'center',
-    hideScrim,
-    id: idProp,
-    ...containerProps
-}: ElementProps<DialogProps, 'div'>) {
-    const id = useId(idProp);
-    const boxRef = useRef<HTMLDivElement | null>(null);
-    const [visibility, setVisibilityState] = useState<'hidden' | 'hiding' | 'show' | 'showing'>(
-        open ? 'show' : 'hidden',
-    );
-
-    const prevVisibility = useRef(visibility);
-
-    const setVisibility = useCallback((next: typeof visibility) => {
-        setVisibilityState((prev) => {
-            prevVisibility.current = prev;
-            return next;
-        });
-    }, []);
-
-    const handleKeyDown = useCallback((e: KeyboardEvent) => e.key === 'Escape' && onClose(), [onClose]);
-
-    useEffect(() => {
-        if (open) {
-            if (prevVisibility.current.startsWith('show')) return;
-            setVisibility('showing');
-            return;
-        }
-
-        if (prevVisibility.current.startsWith('hid')) return;
-        setVisibility('hiding');
-    }, [open, setVisibility]);
-
-    useEffect(() => {
-        if (prevVisibility.current === visibility) return;
-
-        if (visibility === 'showing') {
-            document.body.style.overflow = 'hidden';
-            setTimeout(() => setVisibility('show'), 10);
-        }
-
-        if (visibility === 'hiding') {
-            document.body.style.overflow = '';
-            setTimeout(() => setVisibility('hidden'), 10);
-        }
-    }, [setVisibility, visibility]);
-
-    useEffect(() => {
-        if (visibility.startsWith('hid')) return;
-
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown, visibility]);
-
-    useOutsideClick([boxRef.current], onClose, !open);
-
-    return (
-        visibility !== 'hidden' && (
-            <Portal>
-                <div
-                    {...containerProps}
-                    data-bspk="dialog"
-                    data-placement={placement}
-                    data-visibility={visibility}
-                    id={id}
-                    ref={innerRef}
-                    role="presentation"
-                >
-                    {!hideScrim && <div aria-hidden="true" data-dialog-backdrop />}
-                    <FocusTrap
-                        focusTrapOptions={{
-                            fallbackFocus: () => boxRef.current!,
-                            clickOutsideDeactivates: true,
-                        }}
-                    >
-                        <div
-                            data-dialog-box
-                            ref={(node) => {
-                                boxRef.current = node;
-                            }}
-                            tabIndex={-1}
-                        >
-                            {children}
-                        </div>
-                    </FocusTrap>
-                </div>
-            </Portal>
-        )
-    );
-}
-
-Dialog.bspkName = 'Dialog';
-
-export { Dialog };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Divider.tsx

@@ -1,90 +0,0 @@
-import './divider.scss';
-import { ElementProps } from './';
-
-export type DividerProps = {
-    /**
-     * The orientation of the divider.
-     *
-     * @default horizontal
-     */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * The thickness of the divider.
-     *
-     * @default light
-     */
-    thickness?: 'heavy' | 'light';
-    /**
-     * If the divider padding is shown.
-     *
-     * @default true
-     */
-    padding?: boolean;
-    /**
-     * The inset (margin) of the divider. The value is a number between 0 and 12, which corresponds to the spacing
-     * sizing variables defined in the theme. The inset is applied to the left and right sides of the divider when the
-     * orientation is horizontal, and to the top and bottom when the orientation is vertical.
-     *
-     * @default 0
-     */
-    inset?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-};
-
-const insetToVariable = (insetProp: number | string) => {
-    const inset = Number(insetProp);
-    if (inset === undefined || inset === null || inset < 1 || inset > 12) return '0px';
-    return `var(--spacing-sizing-${inset.toString().padStart(2, '0')})`;
-};
-
-/**
- * Horizontal thin lines that separates grouped content in a list or other containers with an optional section/group
- * label.
- *
- * Vertical thin lines that separates grouped content or other visual elements within a container.
- *
- * @example
- *     import { Divider } from '@bspk/ui/Divider';
- *
- *     function Example() {
- *         return (
- *             <div>
- *                 <p>Content above the divider</p>
- *                 <Divider orientation="horizontal" />
- *                 <p>Content below the divider</p>
- *             </div>
- *         );
- *     }
- *
- * @name Divider
- */
-function Divider({
-    padding = true,
-    orientation = 'horizontal',
-    thickness = 'light',
-    inset = 0,
-    ...props
-}: ElementProps<DividerProps, 'div'>) {
-    return (
-        <div
-            {...props}
-            aria-orientation={orientation}
-            data-bspk="divider"
-            data-hide-padding={!padding || undefined}
-            data-orientation={orientation}
-            data-thickness={thickness}
-            role="separator"
-            style={
-                {
-                    ...props.style,
-                    '--inset': insetToVariable(inset),
-                } as React.CSSProperties
-            }
-        />
-    );
-}
-
-Divider.bspkName = 'Divider';
-
-export { Divider };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/EmptyState.tsx

@@ -1,90 +0,0 @@
-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;
-    /**
-     * The text alignment of the body.
-     *
-     * @default center
-     */
-    bodyAlign?: 'center' | 'left' | 'right';
-    /**
-     * 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.
- *
- * @example
- *     import { EmptyState } from '@bspk/ui/EmptyState';
- *
- *     export function Example() {
- *         return (
- *             <EmptyState body="Example body" header="Example header">
- *                 Example EmptyState
- *             </EmptyState>
- *         );
- *     }
- *
- * @name EmptyState
- */
-function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
-    return (
-        <Layout
-            align="center"
-            column
-            data-bspk="empty-state"
-            style={{
-                margin: 'var(--spacing-sizing-04)',
-                maxWidth: '500px',
-            }}
-        >
-            {children}
-            <Layout align="center" column gap="4">
-                <Txt as="header" variant="heading-h5">
-                    {header}
-                </Txt>
-                <Txt as="p" style={{ textAlign: bodyAlign }} 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

@@ -1,107 +0,0 @@
-import './fab.scss';
-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.
- *
- * @example
- *     import { SvgBolt } from '@bspk/icons/Bolt';
- *     import { Fab } from '@bspk/ui/Fab';
- *
- *     export function Example() {
- *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
- *     }
- *
- * @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}
-            data-bspk="fab"
-            data-container={container}
-            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 };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/FormField.tsx

@@ -1,130 +0,0 @@
-import './form-field.scss';
-import { InlineAlert } from './InlineAlert';
-import { Layout } from './Layout';
-import { Txt } from './Txt';
-
-import { CommonProps, InvalidPropsLibrary } 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<'required'> &
-    InvalidPropsLibrary & {
-        /**
-         * 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, Select, 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, Select, DatePicker, or TimePicker.
- *
- * @example
- *     import { TextInput } from '@bspk/ui/TextInput';
- *     import { FormField } from '@bspk/ui/FormField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState<string | undefined>(undefined);
- *         return (
- *             <FormField controlId="Example controlId" label="Example label">
- *                 {(fieldProps) => {
- *                     return (
- *                         <TextInput
- *                             aria-label="example aria-label"
- *                             name="example-text"
- *                             onChange={(next) => {
- *                                 setState(next);
- *                             }}
- *                             value={state}
- *                             {...fieldProps}
- *                         />
- *                     );
- *                 }}
- *             </FormField>
- *         );
- *     }
- *
- * @name FormField
- */
-function FormField({
-    label,
-    invalid,
-    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 data-bspk="form-field" data-invalid={invalid || undefined}>
-            <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 };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */