@bspk/ui 1.0.0

package/src/NumberInput.tsx

@@ -0,0 +1,282 @@
+import { SvgAdd } from '@bspk/icons/Add';
+import { SvgRemove } from '@bspk/icons/Remove';
+import { css } from '@emotion/react';
+
+import { useId } from './hooks/useId';
+import { useLongPress } from './hooks/useLongPress';
+
+import { CommonProps } from '.';
+
+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' | 'invalid' | 'name' | 'readOnly' | 'size'
+> & {
+    /**
+     * The value of the control.
+     *
+     * @required
+     */
+    value?: number;
+    /** Callback when the value changes. */
+    onChange: (value: number) => void;
+    /**
+     * If the value should be centered between the up & down buttons.
+     *
+     * @default false
+     */
+    centered?: boolean;
+    /** Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is accepted. */
+    max?: number;
+    /** Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is accepted. */
+    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 (-).
+ *
+ * @name NumberInput
+ */
+function NumberInput({
+    //
+    value = 1,
+    onChange,
+    centered = false,
+    size = 'medium',
+    disabled = false,
+    readOnly = false,
+    name,
+    id: inputIdProp,
+    invalid,
+    'aria-label': ariaLabel,
+    max: maxProp,
+    min: minProp,
+}: NumberInputProps) {
+    const inputId = useId(inputIdProp);
+    const max = isNumber(maxProp);
+    const min = isNumber(minProp);
+
+    const fix = (next: number = value) => {
+        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}
+            css={style}
+            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}
+                name={name}
+                onBlur={() => {
+                    fix();
+                }}
+                onChange={(event) => {
+                    onChange(event.target.value as unknown as number);
+                }}
+                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 };
+
+export const style = css`
+    // medium
+    --font: var(--body-base);
+    --height: var(--spacing-sizing-10);
+    --svg-width: var(--spacing-sizing-05);
+    --color: var(--foreground-neutral-on-surface);
+    width: 100%;
+
+    display: flex;
+    flex-flow: row nowrap;
+    font: var(--font);
+    height: var(--height);
+    border: 1px solid var(--stroke-neutral-base);
+    border-radius: var(--radius-small);
+    background: var(--surface-neutral-t1-base);
+
+    &:focus-within {
+        border-color: var(--stroke-brand-primary);
+        outline: 1px solid var(--stroke-brand-primary);
+    }
+
+    [data-divider] {
+        width: 4px;
+        border-right: 1px solid var(--stroke-neutral-base);
+        // account for border - 3(margin)  * 2 + 2(border)
+        height: calc(var(--height) - 8px);
+        margin: 3px 0;
+    }
+
+    button {
+        min-width: var(--height);
+        background: none;
+        border: none;
+        cursor: pointer;
+        font: var(--font);
+        svg {
+            width: var(--svg-width);
+        }
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--color);
+
+        &:disabled {
+            cursor: not-allowed;
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    input {
+        color: var(--color);
+        min-width: 0;
+        display: block;
+        font: var(--font);
+        text-align: center;
+        padding: 0 var(--spacing-sizing-03);
+        background: transparent;
+        border: none;
+
+        &:focus {
+            outline: none;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &[type='number'] {
+            appearance: textfield;
+            -moz-appearance: textfield;
+        }
+    }
+
+    &:not([data-disabled], [data-readonly]) {
+        input,
+        button:not(:disabled) {
+            &:hover {
+                background-color: var(--interactions-hover-opacity);
+            }
+
+            &:active {
+                background-color: var(--interactions-press-opacity);
+            }
+        }
+
+        &[data-invalid] {
+            border-color: var(--status-error);
+            outline-color: var(--status-error);
+        }
+    }
+
+    &[data-disabled],
+    &[data-readonly] {
+        --color: var(--foreground-neutral-disabled-on-surface);
+        border-color: var(--stroke-neutral-disabled-light);
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        [data-divider] {
+            border-color: var(--stroke-neutral-disabled-light);
+        }
+    }
+
+    &[data-readonly] {
+        input {
+            color: var(--foreground-neutral-on-surface) !important;
+        }
+    }
+
+    &[data-size='small'] {
+        --font: var(--body-small);
+        --height: var(--spacing-sizing-08);
+    }
+
+    &[data-size='large'] {
+        --font: var(--body-large);
+        --height: var(--spacing-sizing-12);
+        --svg-width: var(--spacing-sizing-06);
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/OTPInput.tsx

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

package/src/PageControl.tsx

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

package/src/PasswordInput.tsx

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

package/src/PhoneNumberInput.tsx

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

package/src/Popover.tsx

@@ -0,0 +1,237 @@
+import { SvgClose } from '@bspk/icons/Close';
+import { css } from '@emotion/react';
+import { cloneElement, ReactElement, 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.
+ *
+ * @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
+                    css={style}
+                    data-placement={middlewareData?.offset?.placement}
+                    data-popover=""
+                    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 };
+
+export const style = css`
+    position: absolute;
+    z-index: var(--z-index-tooltip-popover);
+    background: var(--surface-neutral-t1-base);
+    box-shadow: var(--drop-shadow-float);
+    padding: var(--spacing-sizing-04);
+    width: 300px;
+    border-radius: var(--radius-large);
+    display: flex;
+    flex-direction: column;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--spacing-sizing-02);
+        gap: var(--spacing-sizing-04);
+
+        button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0;
+            margin: 0 0 0 auto;
+            color: var(--foreground-neutral-on-surface-variant-01);
+            height: var(--spacing-sizing-06);
+            width: var(--spacing-sizing-06);
+
+            svg {
+                width: var(--spacing-sizing-06);
+                height: var(--spacing-sizing-06);
+            }
+        }
+    }
+
+    --arrow-size: var(--spacing-sizing-02);
+    --arrow-offset: calc(var(--arrow-size) * -2);
+    --arrow-background-color: var(--surface-neutral-t1-base);
+
+    [data-arrow] {
+        z-index: 1;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
+        border-color: transparent transparent transparent transparent;
+    }
+
+    &[data-placement^='top'] {
+        [data-arrow] {
+            bottom: var(--arrow-offset);
+            border-top-color: var(--arrow-background-color);
+            filter: drop-shadow(0 2px 1px var(--shadow-10));
+        }
+    }
+    &[data-placement^='right'] {
+        [data-arrow] {
+            margin-left: calc(var(--arrow-offset) * 2);
+            border-right-color: var(--arrow-background-color);
+            filter: drop-shadow(-2px 0 1px var(--shadow-10));
+        }
+    }
+    &[data-placement^='bottom'] {
+        [data-arrow] {
+            top: var(--arrow-offset);
+            border-bottom-color: var(--arrow-background-color);
+            filter: drop-shadow(0 -2px 1px var(--shadow-10));
+        }
+    }
+    &[data-placement='bottom-start'] {
+        [data-arrow] {
+            margin-left: var(--arrow-offset);
+        }
+    }
+    &[data-placement='bottom-end'] {
+        [data-arrow] {
+            margin-left: calc(var(--arrow-offset) * -1);
+        }
+    }
+    &[data-placement^='left'] {
+        [data-arrow] {
+            right: var(--arrow-offset);
+            border-left-color: var(--arrow-background-color);
+            filter: drop-shadow(2px 0 1px var(--shadow-10));
+        }
+    }
+
+    [data-content] {
+        gap: var(--spacing-sizing-04);
+        display: flex;
+        flex-direction: column;
+    }
+
+    [data-call-to-action] {
+        margin: 0 0 0 auto;
+        /* background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 var(--spacing-sizing-03);
+    height: var(--spacing-sizing-12);
+    font: var(--labels-small);
+    color: var(--foreground-brand-primary); */
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Portal.tsx

@@ -0,0 +1,36 @@
+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. */
+    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]);
+
+    return portalContainer && createPortal(children, portalContainer);
+}
+
+Portal.bspkName = 'Portal';
+
+export { Portal };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */