@bspk/ui 1.1.32 → 1.1.34

package/src/NumberInput.tsx

@@ -1,204 +0,0 @@
-import './number-input.scss';
-import { SvgAdd } from '@bspk/icons/Add';
-import { SvgRemove } from '@bspk/icons/Remove';
-
-import { useId } from './hooks/useId';
-import { useLongPress } from './hooks/useLongPress';
-
-import { CommonProps, InvalidPropsLibrary } from '.';
-
-const DEFAULT = {
-    align: 'center',
-    size: 'medium',
-    disabled: false,
-    readOnly: false,
-} as const;
-
-function isNumber(value: unknown): number | undefined {
-    if (typeof value === 'number') return value;
-    if (typeof value !== 'string') return undefined;
-    const num = Number(value);
-    return isNaN(num) ? undefined : num;
-}
-
-export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> &
-    InvalidPropsLibrary & {
-        /** The value of the control. */
-        value?: number;
-        /**
-         * Callback when the value changes.
-         *
-         * @required
-         */
-        onChange: (value: number | undefined) => void;
-        /**
-         * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
-         *
-         * @default center
-         */
-        align?: 'center' | 'left';
-        /**
-         * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
-         * accepted.
-         *
-         * @default 99
-         * @maximum 99
-         * @minimum 1
-         */
-        max?: number;
-        /**
-         * Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is
-         * accepted.
-         *
-         * @minimum 0
-         */
-        min?: number;
-    };
-
-/**
- * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
- * pressing the (+) or (-).
- *
- * The value of the input is a number. The value is clamped to the min and max values if they are provided.
- *
- * @example
- *     import { NumberInput } from '@bspk/ui/NumberInput';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState<number>();
- *
- *         return (
- *             <NumberInput
- *                 aria-label="Example aria-label"
- *                 name="Example name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 value={state}
- *             />
- *         );
- *     }
- *
- * @name NumberInput
- */
-function NumberInput({
-    value,
-    onChange,
-    align = DEFAULT.align,
-    size = DEFAULT.size,
-    disabled = DEFAULT.disabled,
-    readOnly = DEFAULT.readOnly,
-    name,
-    id: inputIdProp,
-    invalid,
-    'aria-label': ariaLabel,
-    max: maxProp,
-    min: minProp,
-}: NumberInputProps) {
-    const centered = align !== 'left';
-    const inputId = useId(inputIdProp);
-    const max = isNumber(maxProp);
-    const min = isNumber(minProp);
-
-    const fix = (nextValue: number | string | undefined) => {
-        const next = isNumber(nextValue);
-
-        if (typeof next !== 'number' || isNaN(next)) {
-            onChange(undefined);
-            return;
-        }
-
-        let fixValue = next;
-        if (typeof min !== 'undefined' && next < min) fixValue = min;
-        if (typeof max !== 'undefined' && next > max) fixValue = max;
-        if (fixValue !== value) onChange(fixValue);
-    };
-
-    const buttonProps = {
-        min,
-        max,
-        disabled,
-        readOnly,
-        onChange: fix,
-        value,
-    };
-
-    return (
-        <div
-            aria-valuemax={max || undefined}
-            aria-valuemin={min || undefined}
-            data-bspk="number-input"
-            data-centered={centered || undefined}
-            data-disabled={disabled || undefined}
-            data-invalid={invalid || undefined}
-            data-readonly={readOnly || undefined}
-            data-size={size}
-            data-stepper-input
-        >
-            {!!centered && <IncrementButton {...buttonProps} increment={-1} />}
-            <input
-                aria-label={ariaLabel}
-                disabled={disabled}
-                id={inputId}
-                max={max}
-                min={min}
-                name={name}
-                onBlur={(event) => {
-                    // Fix the value on blur to ensure it is a valid number
-                    fix(event.target.value);
-                }}
-                onChange={(event) => {
-                    onChange(isNumber(event.target.value));
-                }}
-                readOnly={readOnly}
-                type="number"
-                value={value}
-            />
-            {!centered && (
-                <>
-                    <div aria-hidden data-divider />
-                    <IncrementButton {...buttonProps} increment={-1} />
-                </>
-            )}
-            <IncrementButton {...buttonProps} increment={1} />
-        </div>
-    );
-}
-
-// eslint-disable-next-line react/no-multi-comp
-function IncrementButton({
-    increment,
-    min,
-    max,
-    readOnly,
-    disabled,
-    onChange,
-    value,
-}: Pick<NumberInputProps, 'disabled' | 'max' | 'min' | 'onChange' | 'readOnly' | 'value'> & { increment: -1 | 1 }) {
-    const add = increment === 1;
-    const prevValue = isNumber(value) || 0;
-
-    const isDisabled =
-        readOnly ||
-        disabled ||
-        (typeof min !== 'undefined' && prevValue + increment < min) ||
-        (typeof max !== 'undefined' && prevValue + increment > max);
-
-    const longPress = useLongPress((pressCounter) => onChange(prevValue + increment * pressCounter), 2000, isDisabled);
-
-    return (
-        <button
-            aria-label={`${add ? 'Increase' : 'Decrease'} value`}
-            data-increment={increment}
-            disabled={isDisabled}
-            type="button"
-            {...longPress.buttonProps}
-        >
-            {add ? <SvgAdd /> : <SvgRemove />}
-        </button>
-    );
-}
-
-NumberInput.bspkName = 'NumberInput';
-
-export { NumberInput };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Popover.tsx

@@ -1,156 +0,0 @@
-import './popover.scss';
-import { SvgClose } from '@bspk/icons/Close';
-import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 'react';
-
-import { Button } from './Button';
-import { Portal } from './Portal';
-import { Txt } from './Txt';
-import { Placement, useFloating } from './hooks/useFloating';
-import { useOutsideClick } from './hooks/useOutsideClick';
-
-import { CallToActionButton, CommonProps } from './';
-
-export type PopoverProps = CommonProps<'disabled'> & {
-    /**
-     * The placement of the popover.
-     *
-     * @default top
-     */
-    placement?: Placement;
-    /** The popover header. */
-    header: string;
-    /**
-     * The content of the popover.
-     *
-     * @type multiline
-     */
-    content: string;
-    /**
-     * The call to action button properties.
-     *
-     * @type CallToActionButton
-     */
-    callToAction?: CallToActionButton;
-    /**
-     * A single element that will trigger the popover when clicked.
-     *
-     * @type ReactElement
-     * @required
-     */
-    children: ReactElement;
-};
-
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Popover } from '@bspk/ui/Popover';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     export function Example() {
- *         const [showPopover, setShowPopover] = useState<boolean>(false);
- *
- *         const togglePopover = () => setShowPopover(!showPopover);
- *         const onPopoverCallToActionClick = () => alert('Action clicked');
- *
- *         return (
- *             <Popover
- *                 placement="bottom"
- *                 content="This is a popover content"
- *                 header="Popover Header"
- *                 callToAction={{
- *                     label: 'Action',
- *                     onClick: onPopoverCallToActionClick,
- *                 }}
- *             >
- *                 <Button label="Toggle popover" onClick={togglePopover} />
- *             </Popover>
- *         );
- *     }
- *
- * @name Popover
- */
-function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }: PopoverProps) {
-    const id = useId();
-    const [show, setShow] = useState(false);
-    const arrowRef = useRef<HTMLElement | null>(null);
-
-    const { elements, floatingStyles, middlewareData } = useFloating({
-        placement: placement,
-        strategy: 'absolute',
-        offsetOptions: 22,
-        arrowRef,
-        hide: !show,
-    });
-
-    useOutsideClick([elements.floating], () => setShow(false));
-
-    const child = useMemo(
-        () =>
-            !disabled &&
-            children &&
-            cloneElement(children, {
-                onClick: () => setShow((prev) => !prev),
-                'aria-describedby': id,
-            }),
-        [children, disabled, id],
-    );
-
-    return disabled ? (
-        children
-    ) : (
-        <>
-            {child}
-            <Portal>
-                <div
-                    data-bspk="popover"
-                    data-placement={middlewareData?.offset?.placement}
-                    id={id}
-                    ref={(node) => {
-                        elements.setFloating(node);
-                        elements.setTrigger(document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`));
-                    }}
-                    style={floatingStyles}
-                >
-                    <header>
-                        <Txt variant="heading-h6">{header}</Txt>
-                        <button aria-label="Close" onClick={() => setShow(false)}>
-                            <SvgClose />
-                        </button>
-                    </header>
-                    <div data-content>
-                        <Txt as="div" variant="body-small">
-                            {content}
-                        </Txt>
-                        {callToAction?.label && callToAction?.onClick && (
-                            <Button
-                                data-call-to-action
-                                label={callToAction.label}
-                                onClick={callToAction.onClick}
-                                size="small"
-                                variant="secondary"
-                            />
-                        )}
-                    </div>
-                    <div
-                        data-arrow
-                        ref={(node) => {
-                            arrowRef.current = node;
-                        }}
-                        style={{
-                            left: `${middlewareData?.arrow?.x}px`,
-                            top: `${middlewareData?.arrow?.y}px`,
-                        }}
-                    />
-                </div>
-            </Portal>
-        </>
-    );
-}
-
-Popover.bspkName = 'Popover';
-
-export { Popover };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Portal.tsx

@@ -1,41 +0,0 @@
-import { ReactNode, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-export type PortalProps = {
-    /**
-     * The content to render in the portal.
-     *
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * The container to render the portal in.
-     *
-     * @optional
-     */
-    container?: HTMLElement;
-};
-
-/**
- * Utility component to render children in the portals container provided by the BaseProvider.
- *
- * Initial SRR is supported.
- *
- * @name Portal
- */
-function Portal({ children, container }: PortalProps) {
-    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(container || null);
-
-    useEffect(() => {
-        if (!portalContainer && typeof window !== 'undefined') setPortalContainer(document.body);
-    }, [portalContainer]);
-
-    // data-bspk="portal" can't be used here
-    return portalContainer && createPortal(children, portalContainer);
-}
-
-Portal.bspkName = 'Portal';
-
-export { Portal };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ProgressBar.tsx

@@ -1,74 +0,0 @@
-import './progress-bar.scss';
-import { CSSProperties, useId } from 'react';
-
-export type ProgressBarProps = {
-    /**
-     * The size of the progressbar.
-     *
-     * @default large
-     */
-    size?: 'large' | 'small';
-    /**
-     * The current progress of the progressbar.
-     *
-     * @example
-     *     42;
-     *
-     * @default 0
-     * @minimum 0
-     * @maximum 100
-     *
-     * @required
-     */
-    completion: number;
-    /**
-     * The label alignment of the progressbar.
-     *
-     * @default center
-     */
-    align?: 'center' | 'left';
-    /** The label of the progressbar. */
-    label: string;
-};
-
-/**
- * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
- * occurring in the background.
- *
- * @example
- *     import { ProgressBar } from '@bspk/ui/ProgressBar';
- *
- *     export function Example() {
- *         return <ProgressBar label="Example label" completion={50} />;
- *     }
- *
- * @name ProgressBar
- */
-function ProgressBar({ size = 'large', completion = 0, align = 'center', label }: ProgressBarProps) {
-    const id = useId();
-
-    return (
-        <div data-align={align} data-bspk="progress-bar" data-size={size}>
-            <progress
-                aria-busy={completion < 100}
-                aria-label="A bounded progress bar from 0 to 100"
-                aria-valuemax={100}
-                aria-valuemin={0}
-                aria-valuenow={completion}
-                id={id}
-                max="100"
-                value={completion}
-            >
-                {completion}%
-            </progress>
-            <div aria-hidden data-bar style={{ '--width': `${completion}%` } as CSSProperties} />
-            <label htmlFor={id}>{label}</label>
-        </div>
-    );
-}
-
-ProgressBar.bspkName = 'ProgressBar';
-
-export { ProgressBar };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ProgressCircle.tsx

@@ -1,104 +0,0 @@
-import './progress-circle.scss';
-/* eslint-disable react/no-multi-comp */
-import { useId } from 'react';
-
-import { Txt } from './Txt';
-import { TxtVariant } from './utils/txtVariants';
-
-export type ProgressCircleProps = {
-    /** The label of the progress circle. */
-    label: string;
-    /**
-     * The size of the label and progress circle.
-     *
-     * @default medium
-     */
-    size?: 'large' | 'medium' | 'small';
-    /**
-     * The position of the label in relation to the progress circle.
-     *
-     * @default bottom
-     */
-    labelPosition?: 'bottom' | 'left' | 'right' | 'top';
-};
-
-/**
- * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
- *
- * @example
- *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
- *
- *     export function Example() {
- *         return <ProgressCircle label="Example label" />;
- *     }
- *
- * @name ProgressCircle
- */
-function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircleProps) {
-    let variant: TxtVariant = 'labels-base';
-
-    if (size === 'small') variant = 'labels-small';
-    else if (size === 'large') variant = 'labels-large';
-
-    const labelId = useId();
-
-    return (
-        <div
-            aria-labelledby={labelId}
-            data-bspk="progress-circle"
-            data-label-position={labelPosition}
-            data-size={size}
-            role="progressbar"
-        >
-            <ProgressCircle.SVG />
-            <Txt id={labelId} variant={variant}>
-                {label || 'Loading ...'}
-            </Txt>
-        </div>
-    );
-}
-
-ProgressCircle.bspkName = 'ProgressCircle';
-
-export { ProgressCircle };
-
-const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
-    const strokeWidth = props.strokeWidth || 10;
-    const width = 100;
-    const id = useId();
-
-    return (
-        <svg {...props} data-animated fill="none" viewBox={`0 0 ${width * 2} ${width * 2}`}>
-            <defs>
-                <linearGradient id={`${id}spinner-secondHalf`}>
-                    <stop offset="50%" stopColor="currentColor" stopOpacity={0} />
-                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
-                </linearGradient>
-                <linearGradient id={`${id}spinner-firstHalf`}>
-                    <stop offset="0%" stopColor="currentColor" stopOpacity={1} />
-                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
-                </linearGradient>
-            </defs>
-            <g strokeWidth={strokeWidth * 2}>
-                <path
-                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`}
-                    stroke={`url(#${id}spinner-secondHalf)`}
-                />
-                <path
-                    d={`M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`}
-                    stroke={`url(#${id}spinner-firstHalf)`}
-                />
-                {/* 1deg extra path to have the round end cap */}
-                <path
-                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`}
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                />
-            </g>
-        </svg>
-    );
-};
-
-ProgressCircle.SVG = ProgressCircleSVG;
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */