@bspk/ui 1.1.31 → 1.1.33

package/src/Switch.tsx

@@ -1,75 +0,0 @@
-import './switch.scss';
-import { ChangeEvent } from 'react';
-
-import { CommonProps } from './';
-
-export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
-    /**
-     * Marks the control as checked.
-     *
-     * @default false
-     */
-    checked?: boolean;
-    /**
-     * The function to call when the control is checked or unchecked.
-     *
-     * @type (checked, Event) => void
-     * @required
-     */
-    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-};
-
-/**
- * A control element that allows users to toggle between two states, typically representing on/off and inherits
- * immediate reaction in each state. This is the base element and if used directly you must wrap it with a label. This
- * will more often be used in the SwitchOption component.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Switch } from '@bspk/ui/Switch';
- *
- *     export function Example() {
- *         const [isChecked, setIsChecked] = useState<boolean>(false);
- *
- *         return (
- *             <Switch
- *                 aria-label="Example aria-label"
- *                 name="Example name"
- *                 onChange={setIsChecked}
- *                 checked={isChecked}
- *             />
- *         );
- *     }
- *
- * @element
- *
- * @name Switch
- */
-function Switch(props: SwitchProps) {
-    const {
-        //
-        checked = false,
-        disabled,
-        ...otherProps
-    } = props;
-
-    return (
-        <span data-bspk="switch">
-            <input
-                {...otherProps}
-                aria-disabled={disabled || undefined}
-                checked={checked}
-                disabled={disabled || undefined}
-                onChange={(event) => props.onChange(!!event.target.checked, event)}
-                type="checkbox"
-            />
-            <span aria-hidden />
-        </span>
-    );
-}
-
-Switch.bspkName = 'Switch';
-
-export { Switch };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SwitchOption.tsx

@@ -1,29 +0,0 @@
-import { SwitchProps, Switch } from './Switch';
-import { ToggleOptionProps, ToggleOption } from './ToggleOption';
-
-export type SwitchOptionProps = Omit<SwitchProps, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label'>;
-
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * If only a switch is needed, consider using the `Switch` component directly.
- *
- * @name SwitchOption
- */
-function SwitchOption({ label: labelProp, description, ...checkboxProps }: SwitchOptionProps) {
-    const label = labelProp || description;
-
-    return (
-        label && (
-            <ToggleOption data-bspk="switch-option" description={description} label={label}>
-                <Switch {...checkboxProps} aria-label={label} />
-            </ToggleOption>
-        )
-    );
-}
-
-SwitchOption.bspkName = 'SwitchOption';
-
-export { SwitchOption };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TabGroup.tsx

@@ -1,180 +0,0 @@
-import './tab-group.scss';
-import { ReactNode } from 'react';
-
-import { Badge, BadgeProps } from './Badge';
-import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
-
-import { ElementProps } from './';
-
-export type TabGroupSize = 'large' | 'medium' | 'small';
-
-const TAB_BADGE_SIZES: Record<TabGroupSize, BadgeProps['size']> = {
-    large: 'small',
-    medium: 'x-small',
-    small: 'x-small',
-};
-
-export type TabGroupOption = {
-    /**
-     * The label of the tab. This is the text that will be displayed on the tab.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The value of the tab sent to onChange when selected.
-     *
-     * If not provided, the label will be used as the value.
-     */
-    value?: string;
-    /**
-     * The icon to display on the left side of the tab.
-     *
-     * @type BspkIcon
-     */
-    icon?: ReactNode;
-    /**
-     * The icon to display on the left side of the tab when the tab is active.
-     *
-     * @type BspkIcon
-     */
-    iconActive?: ReactNode;
-    /** The badge count to display on the tab */
-    badge?: number;
-};
-
-export type TabGroupProps = {
-    /**
-     * The tabs to display. Each tab has a label and an optional leading icon.
-     *
-     * @example
-     *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<TabGroupOption>
-     * @required
-     */
-    options: TabGroupOption[];
-    /**
-     * The value of the selected tab.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: TabGroupOption['value'];
-    /**
-     * The function to call when the tab is clicked.
-     *
-     * @required
-     */
-    onChange: (tabValue: string, index: number) => void;
-    /**
-     * The size of the tabs.
-     *
-     * @default medium
-     */
-    size?: TabGroupSize;
-    /**
-     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
-     * content.
-     *
-     * @default hug
-     */
-    width?: 'fill' | 'hug';
-    /**
-     * When width is 'hug' this determines if the trailing underline should be showing. When width is 'fill' this
-     * property isn't applicable.
-     *
-     * @default false
-     */
-    showTrail?: boolean;
-};
-
-/**
- * Navigation tool that organizes content across different screens and views.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TabGroup } from '@bspk/ui/TabGroup';
- *
- *     export function Example() {
- *         const [selectedTab, setSelectedTab] = useState<string>();
- *
- *         return (
- *             <TabGroup
- *                 onChange={setSelectedTab}
- *                 options={[
- *                     { value: '1', label: 'Option 1' },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                 ]}
- *                 value={selectedTab}
- *             />
- *         );
- *     }
- *
- * @name TabGroup
- */
-function TabGroup({
-    //
-    onChange: onTabChange,
-    value,
-    size = 'medium',
-    options: optionsProp,
-    width = 'hug',
-    showTrail = false,
-    ...containerProps
-}: ElementProps<TabGroupProps, 'div'>) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-
-    return (
-        <div
-            {...containerProps}
-            data-bspk="tab-group"
-            data-hide-trail={(width === 'hug' && !showTrail) || undefined}
-            data-size={size}
-            data-width={width}
-        >
-            {options.map((item, itemIndex) => {
-                const isActive = item.value === value;
-
-                return (
-                    <button
-                        data-active={isActive || undefined}
-                        disabled={item.disabled || undefined}
-                        key={item.value}
-                        onClick={() => {
-                            onTabChange(item.value || item.label, itemIndex);
-                        }}
-                    >
-                        <span>
-                            {(isActive && item.iconActive) || item.icon}
-                            {item.label}
-                            {item.badge && !item.disabled && !isActive && (
-                                <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
-                            )}
-                        </span>
-                    </button>
-                );
-            })}
-        </div>
-    );
-}
-
-TabGroup.bspkName = 'TabGroup';
-
-export { TabGroup };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Table.tsx

@@ -1,79 +0,0 @@
-import './table.scss';
-import { ReactNode } from 'react';
-
-import { ElementProps } from '.';
-
-export type TableRow = Record<string, ReactNode>;
-
-export type TableColumn<R extends TableRow = Record<string, ReactNode>> = {
-    /**
-     * The key of the column. This is used to access the data in the row.
-     *
-     * @type string
-     */
-    key: keyof R;
-    /**
-     * The label of the column. This is used to display the column header.
-     *
-     * @type string
-     */
-    label: string;
-    /**
-     * The width of the column. This is used to set the width of the column.
-     *
-     * Used to set the value of
-     * [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
-     *
-     * @default 1fr
-     * @type string
-     */
-    width?: string;
-};
-
-export type TableProps<R extends TableRow> = {
-    /** The data of the table. */
-    rows: R[];
-    /** The columns of the table. */
-    columns: TableColumn<R>[];
-};
-
-/**
- * Component description coming soon.
- *
- * @name Table
- */
-function Table<R extends TableRow>({ rows, columns, ...props }: ElementProps<TableProps<R>, 'div'>) {
-    return (
-        <div
-            {...props}
-            data-bspk="table"
-            style={{
-                ...props.style,
-                gridTemplateColumns: columns.map((c) => `minmax(0, ${c.width || '1fr'})`).join(' '),
-            }}
-        >
-            {columns.map((column, index, arr) => (
-                <div
-                    data-head={[index === 0 && 'first', index === arr.length - 1 && 'last'].filter(Boolean).join(' ')}
-                    key={column.key as string}
-                >
-                    {column.label}
-                </div>
-            ))}
-            {rows.map((row, index, arr) => {
-                const lastRow = index === arr.length - 1 || undefined;
-                return columns.map((column) => (
-                    <div data-cell={column.key} data-row-last={lastRow} key={index + (column.key as string)}>
-                        {row[column.key]}
-                    </div>
-                ));
-            })}
-        </div>
-    );
-}
-
-Table.bspkName = 'Table';
-
-export { Table };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Tag.tsx

@@ -1,99 +0,0 @@
-import './tag.scss';
-import { ElementType, ReactNode } from 'react';
-
-import { ColorVariant } from './utils/colorVariants';
-
-import { ElementProps } from './';
-
-export type TagProps<As extends ElementType = 'span'> = {
-    /**
-     * The element type to render as.
-     *
-     * @default span
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The content of the tag.
-     *
-     * @example
-     *     New;
-     *
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * The size of the tag.
-     *
-     * @default small
-     */
-    size?: 'small' | 'x-small';
-    /**
-     * The color of the tag.
-     *
-     * @default grey
-     */
-    color?: ColorVariant;
-    /**
-     * The display variant of the tag.
-     *
-     * @default flat
-     */
-    variant?: 'corner-wrap' | 'flat' | 'pill';
-    /**
-     * Whether the tag should wrap its content.
-     *
-     * (Not recommended)
-     *
-     * @default false
-     */
-    wrap?: boolean;
-};
-
-/**
- * A non-interactive visual indicators to draw attention or categorization of a component.
- *
- * @example
- *     import { Tag } from '@bspk/ui/Tag';
- *
- *     export function Example() {
- *         return (
- *             <Tag variant="flat" color="primary">
- *                 Example Tag
- *             </Tag>
- *         );
- *     }
- *
- * @name Tag
- */
-function Tag<As extends ElementType = 'span'>({
-    children,
-    as,
-    color = 'white',
-    size = 'small',
-    variant = 'flat',
-    wrap,
-    ...props
-}: ElementProps<TagProps<As>, As>) {
-    const As: ElementType = as || 'span';
-
-    return (
-        <As
-            {...props}
-            data-bspk="tag"
-            data-color={color}
-            data-size={size}
-            data-variant={variant}
-            data-wrap={wrap || undefined}
-        >
-            {children}
-            {variant === 'corner-wrap' && <div data-triangle />}
-        </As>
-    );
-}
-
-Tag.bspkName = 'Tag';
-
-export { Tag };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TextField.tsx

@@ -1,82 +0,0 @@
-import { FormFieldProps, FormField } from './FormField';
-import { TextInputProps, TextInput } from './TextInput';
-
-import { InvalidPropsLibrary } from '.';
-
-export type TextFieldProps = InvalidPropsLibrary &
-    Pick<
-        TextInputProps,
-        | 'autoComplete'
-        | 'disabled'
-        | 'inputRef'
-        | 'leading'
-        | 'name'
-        | 'onChange'
-        | 'placeholder'
-        | 'readOnly'
-        | 'required'
-        | 'size'
-        | 'trailing'
-        | 'type'
-        | 'value'
-    > &
-    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
-
-/**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
- *
- * This component takes properties from the FormField and TextInput components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextField } from '@bspk/ui/TextField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return (
- *             <TextField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @name TextField
- */
-function TextField({
-    label,
-    errorMessage: errorMessageProp,
-    helperText,
-    controlId,
-    labelTrailing,
-    required,
-    ...inputProps
-}: TextFieldProps) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-
-    return (
-        <FormField
-            controlId={controlId}
-            data-bspk="text-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => (
-                <TextInput {...inputProps} {...fieldProps} aria-label={label} id={controlId} required={required} />
-            )}
-        </FormField>
-    );
-}
-
-TextField.bspkName = 'TextField';
-
-export { TextField };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TextInput.tsx

@@ -1,137 +0,0 @@
-import './text-input.scss';
-import { SvgCancel } from '@bspk/icons/Cancel';
-import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
-
-import { useId } from './hooks/useId';
-
-import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '.';
-
-export const DEFAULT = {
-    size: 'medium',
-    value: '',
-    type: 'text' as Extract<HTMLInputTypeAttribute, 'number' | 'text'>,
-    autoComplete: 'off',
-} as const;
-
-export type TextInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
-> &
-    InvalidPropsLibrary & {
-        /**
-         * Callback when the value of the field changes.
-         *
-         * @required
-         */
-        onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
-        /** The ref of the container. */
-        containerRef?: SetRef<HTMLDivElement>;
-        /** The ref of the input. */
-        inputRef?: SetRef<HTMLInputElement>;
-        /** The trailing element to display in the field. */
-        trailing?: ReactNode;
-        /** The leading element to display in the field. */
-        leading?: ReactNode;
-        /** The placeholder of the field. */
-        placeholder?: string;
-        /**
-         * The type of the input.
-         *
-         * @default text
-         */
-        type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
-        /**
-         * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-         *
-         * @default off
-         */
-        autoComplete?: HTMLInputAutoCompleteAttribute;
-    };
-
-/**
- * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
- * not intended to be used directly. Use the TextField component.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextInput } from '@bspk/ui/TextInput';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <TextInput aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name TextInput
- */
-function TextInput({
-    invalid: invalidProp,
-    onChange,
-    size = DEFAULT.size,
-    value = DEFAULT.value,
-    name,
-    'aria-label': ariaLabel,
-    inputRef,
-    required,
-    placeholder,
-    id: idProp,
-    leading,
-    trailing,
-    type = DEFAULT.type,
-    readOnly,
-    disabled,
-    autoComplete = DEFAULT.autoComplete,
-    containerRef,
-    errorMessage,
-    ...otherProps
-}: ElementProps<TextInputProps, 'div'>) {
-    const id = useId(idProp);
-
-    const invalid = !readOnly && !disabled && invalidProp;
-
-    return (
-        <div
-            data-bspk="text-input"
-            data-disabled={disabled || undefined}
-            data-empty={!value.toString().length || undefined}
-            data-invalid={invalid || undefined}
-            data-readonly={readOnly || undefined}
-            data-required={required || undefined}
-            data-size={size}
-            ref={containerRef}
-            {...otherProps}
-        >
-            {leading && <span data-leading>{leading}</span>}
-            <input
-                aria-errormessage={errorMessage || undefined}
-                aria-invalid={invalid || undefined}
-                aria-label={ariaLabel}
-                autoComplete={autoComplete}
-                disabled={disabled || undefined}
-                id={id}
-                name={name}
-                onChange={(event) => {
-                    onChange(event.target.value, event);
-                }}
-                placeholder={placeholder || ' '}
-                readOnly={readOnly || undefined}
-                ref={inputRef}
-                required={required || undefined}
-                type={type}
-                value={value}
-            />
-            {trailing && <span data-trailing>{trailing}</span>}
-            <button aria-label="clear" data-clear onClick={() => onChange('')}>
-                <SvgCancel />
-            </button>
-        </div>
-    );
-}
-
-TextInput.bspkName = 'TextInput';
-
-export { TextInput };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */