@bspk/ui 1.1.32 → 1.1.34

package/src/BannerAlert.tsx

@@ -1,115 +0,0 @@
-import './banner-alert.scss';
-import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
-import { SvgClose } from '@bspk/icons/Close';
-import { SvgErrorFill } from '@bspk/icons/ErrorFill';
-import { SvgInfoFill } from '@bspk/icons/InfoFill';
-import { SvgWarningFill } from '@bspk/icons/WarningFill';
-
-import { ElementProps, AlertVariant, CallToActionButton } from './';
-
-export type BannerAlertProps = {
-    /**
-     * The color variant of the banner alert.
-     *
-     * @default informational
-     */
-    variant?: AlertVariant;
-    /**
-     * The function to call when the banner alert is closed. If not included the close button will not be displayed.
-     *
-     * @type () => void
-     */
-    onClose?: () => void;
-    /**
-     * The header of the banner alert.
-     *
-     * @required
-     */
-    header: string;
-    /**
-     * The body of the banner alert.
-     *
-     * @type multiline
-     * @required
-     */
-    body: string;
-    /**
-     * This property may be undefined or an object containing required CallToActionButton properties.
-     *
-     * @type CallToActionButton
-     */
-    callToAction?: CallToActionButton;
-    /**
-     * Is the alert elevated. If true a drop shadow is added.
-     *
-     * @default false
-     */
-    elevated?: boolean;
-};
-
-/**
- * A visual and contextual message used to communicate an important message or notification to users relating to a
- * status or the body content of a page.
- *
- * @example
- *     import { BannerAlert } from '@bspk/ui/BannerAlert';
- *
- *     function Example() {
- *         <BannerAlert
- *             variant="error"
- *             header="Error"
- *             body="There was an error processing your request."
- *             onClose={() => console.log('Alert closed')}
- *         />;
- *     }
- *
- * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
- *
- *
- *
- *
- * @name BannerAlert
- */
-function BannerAlert({
-    variant = 'informational',
-    onClose,
-    header,
-    callToAction,
-    body,
-    elevated = false,
-}: ElementProps<BannerAlertProps, 'div'>) {
-    return (
-        <article data-bspk="banner-alert" data-elevated={elevated || undefined} data-variant={variant}>
-            <div data-icon-bar>
-                {variant === 'error' && <SvgErrorFill />}
-                {variant === 'informational' && <SvgInfoFill />}
-                {variant === 'success' && <SvgCheckCircleFill />}
-                {variant === 'warning' && <SvgWarningFill />}
-            </div>
-            <div data-content>
-                {(header || onClose) && (
-                    <header>
-                        <span>{header}</span>
-                        {typeof onClose === 'function' && (
-                            <button aria-label="Close" onClick={onClose} type="button">
-                                <SvgClose />
-                            </button>
-                        )}
-                    </header>
-                )}
-                <div data-body>
-                    <span>{body}</span>
-                    {callToAction?.label && callToAction?.onClick && (
-                        <button onClick={callToAction.onClick}>{callToAction.label}</button>
-                    )}
-                </div>
-            </div>
-        </article>
-    );
-}
-
-BannerAlert.bspkName = 'BannerAlert';
-
-export { BannerAlert };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Button.tsx

@@ -1,158 +0,0 @@
-import './button.scss';
-import { ElementType, ReactNode, isValidElement } from 'react';
-
-import { Tooltip } from './Tooltip';
-import { isValidIcon } from './utils/children';
-import { useErrorLogger } from './utils/errors';
-
-import { ButtonSize, CommonProps, ElementProps } from './';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
-    /**
-     * The label of the button.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The icon of the button.
-     *
-     * @type BspkIcon
-     */
-    icon?: ReactNode;
-    /**
-     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
-     *
-     * @default true
-     */
-    showLabel?: boolean;
-    /**
-     * The element type to render as.
-     *
-     * @default button
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The function of the button is destructive.
-     *
-     * @default false
-     */
-    destructive?: boolean;
-    /**
-     * The size of the button.
-     *
-     * @default medium
-     */
-    size?: ButtonSize;
-    /**
-     * The color variant of the button.
-     *
-     * @default primary
-     */
-    variant?: ButtonVariant;
-    /**
-     * The width of the button.
-     *
-     * @default hug
-     */
-    width?: 'fill' | 'hug';
-    /**
-     * If `string` is passed, it will be used as the label.
-     *
-     * If `ReactNode` is passed, it will override the default button content. (Not recommended)
-     */
-    children?: ReactNode;
-    /** The tool tip text that appears when hovered. */
-    toolTip?: string;
-    /** The function to call when the button is clicked. */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
-
-/**
- * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
- *
- * @example
- *     import { Button } from '@bspk/ui/Button';
- *     import { SvgPerson } from '@bspk/icons/Person';
- *
- *     function Example() {
- *         return (
- *             <Button
- *                 label="Click Me"
- *                 size="medium"
- *                 variant="primary"
- *                 onClick={() => console.log('Button clicked')}
- *                 icon={<SvgPerson />}
- *             />
- *         );
- *     }
- *
- * @name Button
- */
-function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element {
-    const {
-        size = 'medium',
-        variant = 'primary',
-        destructive = false,
-        width = 'hug',
-        as: As = 'button',
-        disabled = false,
-        label: labelProp,
-        icon,
-        // showLabel: showLabelProp = true,
-        showLabel = true,
-        toolTip: toolTipProp,
-        children,
-        ...containerProps
-    } = props;
-    const label = typeof children === 'string' ? children : labelProp || '';
-
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabel === false && icon;
-    const toolTip = toolTipProp || (hideLabel ? label : undefined);
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    logError(!label, 'Button - The button must have a label.');
-
-    const button = (
-        <As
-            {...containerProps}
-            aria-label={label}
-            data-bspk="button"
-            data-destructive={destructive || undefined}
-            data-size={size}
-            data-variant={variant}
-            data-width={width}
-            disabled={disabled || undefined}
-        >
-            {children && typeof children !== 'string' ? (
-                children
-            ) : (
-                <>
-                    <span data-touch-target />
-                    {!!icon && isValidElement(icon) && <span data-button-icon>{icon}</span>}
-                    {!hideLabel && <span data-button-label>{label}</span>}
-                </>
-            )}
-        </As>
-    );
-
-    if (toolTip) {
-        return (
-            <Tooltip label={toolTip} placement="top">
-                {button}
-            </Tooltip>
-        );
-    }
-
-    return button;
-}
-
-Button.bspkName = 'Button';
-
-export { Button };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Card.tsx

@@ -1,58 +0,0 @@
-import './card.scss';
-import { ReactNode } from 'react';
-
-export type CardProps = {
-    /**
-     * The content of the card.
-     *
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * Determines if the padding should be hidden.
-     *
-     * @default true
-     */
-    showPadding?: boolean;
-    /**
-     * Determines how the card border will appear.
-     *
-     * @default elevated
-     */
-    variant?: 'elevated' | 'filled' | 'outlined';
-};
-
-/**
- * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
- * elements.
- *
- * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
- * details.
- *
- * @example
- *     import { Card } from '@bspk/ui/card';
- *
- *     function Example() {
- *         return (
- *             <Card variant="elevated" showPadding={false}>
- *                 <h3>Card Title</h3>
- *                 <p>This is some content inside the card.</p>
- *             </Card>
- *         );
- *     }
- *
- * @name Card
- */
-function Card({ children, showPadding, variant = 'elevated' }: CardProps) {
-    return (
-        <div data-bspk="card" data-hide-padding={showPadding === false || undefined} data-variant={variant}>
-            {children}
-        </div>
-    );
-}
-
-Card.bspkName = 'Card';
-
-export { Card };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Checkbox.tsx

@@ -1,120 +0,0 @@
-import './checkbox.scss';
-import { ChangeEvent, useEffect, useRef } from 'react';
-
-import { CommonProps, ElementProps, InvalidPropsLibrary } from './';
-
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
-    InvalidPropsLibrary &
-    Required<CommonProps<'value'>> & {
-        /**
-         * If the checkbox is partially checked or
-         * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
-         *
-         * @default false
-         */
-        indeterminate?: boolean;
-        /**
-         * Marks the checkbox as checked.
-         *
-         * @default false
-         */
-        checked?: boolean;
-        /**
-         * The function to call when the checkbox is checked or unchecked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
-
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
- * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
- * CheckboxGroup component.
- *
- * @example
- *     import { Checkbox } from '@bspk/ui/Checkbox';
- *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
- *
- *         return (
- *             <label htmlFor="sample-checkbox">
- *                 <Checkbox
- *                     aria-label="Sample"
- *                     checked={checked}
- *                     id="sample-checkbox"
- *                     name="sample-checkbox"
- *                     onChange={(nextChecked) => setChecked(nextChecked)}
- *                     value="sample"
- *                 />
- *                 Checkbox Label
- *             </label>
- *         );
- *     }
- *
- * @element
- *
- * @name Checkbox
- */
-function Checkbox({
-    checked: checkedProp = false,
-    indeterminate: indeterminateProp,
-    invalid,
-    disabled,
-    errorMessage,
-
-    ...props
-}: ElementProps<CheckboxProps, 'input'>) {
-    const indeterminate = !!indeterminateProp;
-    const checked = !!checkedProp && !indeterminate;
-
-    const inputRef = useRef<HTMLInputElement>();
-
-    useEffect(() => {
-        if (!inputRef.current) return;
-        inputRef.current.indeterminate = indeterminate;
-    }, [indeterminate]);
-
-    return (
-        <span
-            //
-            data-bspk="checkbox"
-        >
-            <input
-                {...props}
-                aria-errormessage={errorMessage || undefined}
-                aria-invalid={invalid || undefined}
-                checked={checked}
-                disabled={disabled || undefined}
-                onChange={(event) => props.onChange(!!event.target.checked, event)}
-                ref={(node) => {
-                    if (!node) return;
-                    inputRef.current = node;
-                    node.indeterminate = indeterminate;
-                }}
-                type="checkbox"
-            />
-            <span aria-hidden>
-                <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
-                        fill="currentColor"
-                    />
-                </svg>
-                <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
-                        fill="currentColor"
-                    />
-                </svg>
-            </span>
-        </span>
-    );
-}
-
-Checkbox.bspkName = 'Checkbox';
-
-export { Checkbox };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/CheckboxGroup.tsx

@@ -1,128 +0,0 @@
-import { Checkbox } from './Checkbox';
-import { ToggleOptionProps, ToggleOption } from './ToggleOption';
-
-import { ElementProps, CommonProps } from './';
-
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-
-export type CheckboxGroupProps = CommonProps<'aria-label'> & {
-    /**
-     * The function to call when the checkboxes are changed.
-     *
-     * @example
-     *     (values) => setState({ values });
-     *
-     * @required
-     */
-    onChange: (values: string[]) => void;
-    /**
-     * The input control name of the checkboxes.
-     *
-     * @required
-     */
-    name: string;
-    /**
-     * The options for the checkboxes.
-     *
-     * @example
-     *     [
-     *         { label: 'Option 1', value: 'option1' },
-     *         { label: 'Option 2', value: 'option2' },
-     *         { label: 'Option 3', value: 'option3' },
-     *     ];
-     *
-     * @type Array<CheckboxGroupOption>
-     * @required
-     */
-    options: CheckboxGroupOption[];
-    /**
-     * The values of the checked checkboxes.
-     *
-     * @type Array<string>
-     */
-    values?: CheckboxGroupProps['options'][number]['value'][];
-    /**
-     * Whether to show a select all checkbox at the top of the list.
-     *
-     * @default false
-     */
-    selectAll?: boolean;
-    /** The props for the select all checkbox. */
-    selectAllProps?: CheckboxGroupOption;
-};
-
-/**
- * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @example
- *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
- *
- *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
- *
- *         return (
- *             <CheckboxGroup
- *                 aria-label="Example Checkbox Group"
- *                 name="example-checkbox-group"
- *                 options={[
- *                     { label: 'Option 1', value: 'option1' },
- *                     { label: 'Option 2', value: 'option2' },
- *                     { label: 'Option 3', value: 'option3' },
- *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
- *                 }}
- *             />
- *         );
- *     }
- *
- * @name CheckboxGroup
- */
-function CheckboxGroup({
-    onChange,
-    options = [],
-    name,
-    values = [],
-    selectAll,
-    selectAllProps,
-    ...props
-}: ElementProps<CheckboxGroupProps, 'div'>) {
-    return (
-        <div {...props} data-bspk="checkbox-group" role="group">
-            {selectAll && (
-                <>
-                    <ToggleOption label={selectAllProps?.label || 'All'}>
-                        <Checkbox
-                            aria-label={selectAllProps?.label || 'All'}
-                            checked={!!values.length && values.length === options.length}
-                            indeterminate={!!values.length && values.length < options.length}
-                            name={name}
-                            onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
-                            value="all"
-                        />
-                    </ToggleOption>
-                </>
-            )}
-            {options.map(({ label, description, value }) => (
-                <ToggleOption description={description} key={value} label={label}>
-                    <Checkbox
-                        aria-label={label}
-                        checked={values.includes(value)}
-                        name={name}
-                        onChange={(checked) => {
-                            onChange(checked ? [...values, value] : values.filter((v) => v !== value));
-                        }}
-                        value={value}
-                    />
-                </ToggleOption>
-            ))}
-        </div>
-    );
-}
-
-CheckboxGroup.bspkName = 'CheckboxGroup';
-
-export { CheckboxGroup };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/CheckboxOption.tsx

@@ -1,59 +0,0 @@
-import { CheckboxProps, Checkbox } from './Checkbox';
-import { ToggleOptionProps, ToggleOption } from './ToggleOption';
-
-import { InvalidPropsLibrary } from '.';
-
-export type CheckboxOptionProps = InvalidPropsLibrary &
-    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'> & {
-        /**
-         * The function to call when the checkbox is checked or unchecked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-    };
-
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * If only a Checkbox is needed, consider using the `Checkbox` component directly.
- *
- * @example
- *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
- *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
- *         return (
- *             <CheckboxOption
- *                 checked={checked}
- *                 description="This is an example checkbox option."
- *                 label="Example Checkbox"
- *                 name="example-checkbox-name"
- *                 onChange={(nextChecked, event) => {
- *                     setChecked(nextChecked);
- *                     console.log('Checkbox changed:', nextChecked, event);
- *                 }}
- *                 value="example-checkbox-value"
- *             />
- *         );
- *     }
- *
- * @name CheckboxOption
- */
-function CheckboxOption({ label: labelProp, description, ...checkboxProps }: CheckboxOptionProps) {
-    const label = labelProp || description;
-    return (
-        label && (
-            <ToggleOption data-bspk="checkbox-option" description={description} label={label}>
-                <Checkbox {...checkboxProps} aria-label={label} />
-            </ToggleOption>
-        )
-    );
-}
-
-CheckboxOption.bspkName = 'CheckboxOption';
-
-export { CheckboxOption };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */