@bspk/ui 1.1.31 → 1.1.33

package/src/components/SwitchOption/index.tsx

@@ -0,0 +1 @@
+export * from './SwitchOption';

package/src/components/TabGroup/TabGroup.tsx

@@ -0,0 +1,181 @@
+import { ReactNode } from 'react';
+
+import { ElementProps } from '-';
+import { Badge, BadgeProps } from '-/components/Badge';
+import { useOptionIconsInvalid } from '-/hooks/useOptionIconsInvalid';
+
+import './tab-group.scss';
+
+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.
+     *
+     * Minimum of two tab options are required. Maximum of seven tab options are ideal.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Disabled 2 ', disabled: true },
+     *         { 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
+ * @phase DesignReview
+ */
+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 && <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/components/TabGroup/TabGroupExample.tsx

@@ -0,0 +1,100 @@
+import { SvgCircle } from '@bspk/icons/Circle';
+import { SvgDiamond } from '@bspk/icons/Diamond';
+import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
+import { SvgSquare } from '@bspk/icons/Square';
+import { SvgSquareFill } from '@bspk/icons/SquareFill';
+
+import { ComponentExample } from '-/utils/demo';
+
+import { TabGroupProps } from '.';
+
+export const TabGroupExample: ComponentExample<TabGroupProps> = {
+    containerStyle: { width: '100%' },
+    presets: [
+        {
+            label: 'With icons',
+            propState: {
+                options: [
+                    {
+                        value: '1',
+                        label: 'Option 1',
+                        icon: <SvgDiamond />,
+                        iconActive: <SvgDiamondFill />,
+                        badge: undefined,
+                    },
+                    {
+                        value: '2',
+                        label: 'Disabled 2',
+                        disabled: true,
+                        icon: <SvgCircle />,
+                        badge: undefined,
+                    },
+                    {
+                        value: '3',
+                        label: 'Option 3',
+                        icon: <SvgSquare />,
+                        iconActive: <SvgSquareFill />,
+                        badge: undefined,
+                    },
+                ],
+            },
+        },
+        {
+            label: 'With badges',
+            propState: {
+                options: [
+                    {
+                        value: '1',
+                        label: 'Option 1',
+                        icon: undefined,
+                        iconActive: undefined,
+                        badge: 1,
+                    },
+                    {
+                        value: '2',
+                        label: 'Disabled 2',
+                        disabled: true,
+                        icon: undefined,
+                        iconActive: undefined,
+                        badge: 2,
+                    },
+                    {
+                        value: '3',
+                        label: 'Option 3',
+                        icon: undefined,
+                        iconActive: undefined,
+                        badge: 3,
+                    },
+                ],
+            },
+        },
+        {
+            label: 'With icons & badges',
+            propState: {
+                options: [
+                    {
+                        value: '1',
+                        label: 'Option 1',
+                        icon: <SvgDiamond />,
+                        iconActive: <SvgDiamondFill />,
+                        badge: 1,
+                    },
+                    {
+                        value: '2',
+                        label: 'Disabled 2',
+                        disabled: true,
+                        icon: <SvgCircle />,
+                        badge: 2,
+                    },
+                    {
+                        value: '3',
+                        label: 'Option 3',
+                        icon: <SvgSquare />,
+                        iconActive: <SvgSquareFill />,
+                        badge: 3,
+                    },
+                ],
+            },
+        },
+    ],
+};

package/src/components/TabGroup/index.tsx

@@ -0,0 +1 @@
+export * from './TabGroup';

package/src/components/Table/Table.tsx

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+
+import { ElementProps } from '-';
+
+import './table.scss';
+
+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
+ * @phase Backlog
+ */
+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/components/Table/index.tsx

@@ -0,0 +1 @@
+export * from './Table';

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,99 @@
+import { ElementType, ReactNode } from 'react';
+
+import { ElementProps } from '-';
+import { ColorVariant } from '-/utils/colorVariants';
+import './tag.scss';
+
+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
+ * @phase AccessibilityReview
+ */
+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/components/Tag/index.tsx

@@ -0,0 +1 @@
+export * from './Tag';

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,89 @@
+import { FormFieldProps, FormField } from '-/components/FormField';
+import { TextInputProps, TextInput } from '-/components/TextInput';
+
+export type TextFieldProps = Pick<
+    TextInputProps,
+    | 'autoComplete'
+    | 'disabled'
+    | 'errorMessage'
+    | 'inputRef'
+    | 'invalid'
+    | 'leading'
+    | 'name'
+    | 'onChange'
+    | 'placeholder'
+    | 'readOnly'
+    | 'required'
+    | 'size'
+    | 'trailing'
+    | 'type'
+    | 'value'
+> &
+    Pick<FormFieldProps, 'controlId' | '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
+ * @phase DesignReview
+ */
+function TextField({
+    label,
+    errorMessage,
+    helperText,
+    controlId,
+    labelTrailing,
+    required,
+    invalid,
+    ...inputProps
+}: TextFieldProps) {
+    return (
+        <FormField
+            controlId={controlId}
+            data-bspk="text-field"
+            errorMessage={errorMessage}
+            helperText={helperText}
+            invalid={!inputProps.readOnly && !inputProps.disabled && invalid}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={required}
+        >
+            {(fieldProps) => (
+                <TextInput
+                    {...inputProps}
+                    {...fieldProps}
+                    aria-label={label}
+                    id={controlId}
+                    required={required}
+                    value={inputProps.value ?? ''}
+                />
+            )}
+        </FormField>
+    );
+}
+
+TextField.bspkName = 'TextField';
+
+export { TextField };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextField/index.tsx

@@ -0,0 +1 @@
+export * from './TextField';