@bspk/ui 1.1.17 → 1.1.19

package/src/SearchBar.tsx

@@ -5,21 +5,22 @@ import { useRef } from 'react';
 import { MenuItem, MenuProps, Menu } from './Menu';
 import { Portal } from './Portal';
 import { TextInputProps, TextInput } from './TextInput';
+import { Txt } from './Txt';
 import { useFloatingMenu } from './hooks/useFloatingMenu';
 import { useId } from './hooks/useId';
 //import { useFloatingMenu } from './hooks/useFloatingMenu';
 
-export type SearchBarProps = Pick<MenuProps, 'itemCount' | 'items' | 'noResultsMessage'> &
+export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'itemCount' | 'noResultsMessage'> &
     Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'placeholder' | 'size'> & {
         /** The current value of the search bar. */
-        searchValue?: string;
+        value?: string;
         /**
          * Handler for state updates.
          *
          * @type (value: String) => void
          * @required
          */
-        setSearchValue: (value: string) => void;
+        onChange: (value: string) => void;
         /*
          * Handler for item selection.
          *
@@ -27,6 +28,32 @@ export type SearchBarProps = Pick<MenuProps, 'itemCount' | 'items' | 'noResultsM
          * @required
          */
         onSelect: (item?: MenuItem) => void;
+        /**
+         * Content to display in the menu.
+         *
+         * @example
+         *     [
+         *         { value: '1', label: 'Apple Pie' },
+         *         { value: '2', label: 'Banana Split' },
+         *         { value: '3', label: 'Cherry Tart' },
+         *         { value: '4', label: 'Dragonfruit Sorbet' },
+         *         { value: '5', label: 'Elderberry Jam' },
+         *         { value: '6', label: 'Fig Newton' },
+         *         { value: '7', label: 'Grape Soda' },
+         *         { value: '8', label: 'Honeydew Smoothie' },
+         *         { value: '9', label: 'Ice Cream Sandwich' },
+         *         { value: '10', label: 'Jackfruit Pudding' },
+         *     ];
+         *
+         * @type Array<MenuItem>
+         */
+        items?: T[];
+        /**
+         * Message to display when no results are found
+         *
+         * @type multiline
+         */
+        noResultsMessage?: string;
     };
 
 /**
@@ -45,8 +72,8 @@ function SearchBar({
     name,
     size = 'medium',
     onSelect,
-    searchValue,
-    setSearchValue,
+    value,
+    onChange,
 }: SearchBarProps) {
     const id = useId(idProp);
     const {
@@ -61,49 +88,65 @@ function SearchBar({
 
     return (
         <>
-            <TextInput
-                aria-label={ariaLabel}
-                autoComplete="off"
-                containerRef={triggerRef}
-                data-bspk="search-bar"
-                id={id}
-                inputRef={(node) => {
-                    inputRef?.(node || null);
-                    inputRefLocal.current = node;
-                }}
-                leading={<SvgSearch />}
-                name={name}
-                onChange={(str) => setSearchValue(str)}
-                placeholder={placeholder}
-                size={size}
-                value={searchValue}
-                {...triggerProps}
-                onClick={(event) => {
-                    if (items?.length) onClick(event);
-                }}
-                onKeyDownCapture={(event) => {
-                    const handled = onKeyDownCapture(event);
+            <div data-bspk="search-bar">
+                <TextInput
+                    aria-label={ariaLabel}
+                    autoComplete="off"
+                    containerRef={triggerRef}
+                    id={id}
+                    inputRef={(node) => {
+                        inputRef?.(node || null);
+                        inputRefLocal.current = node;
+                    }}
+                    leading={<SvgSearch />}
+                    name={name}
+                    onChange={(str) => onChange(str)}
+                    placeholder={placeholder}
+                    size={size}
+                    value={value}
+                    {...triggerProps}
+                    onClick={(event) => {
+                        if (items?.length) onClick(event);
+                    }}
+                    onKeyDownCapture={(event) => {
+                        const handled = onKeyDownCapture(event);
 
-                    if (handled) return;
+                        if (handled) return;
 
-                    inputRefLocal.current?.focus();
-                }}
-            />
-            <Portal>
-                <Menu
-                    itemCount={itemCount}
-                    items={items}
-                    noResultsMessage={noResultsMessage}
-                    onChange={(selectedValues, event) => {
-                        event?.preventDefault();
-                        const item = items?.find((i) => i.value === selectedValues[0]);
-                        onSelect?.(item);
-                        setSearchValue(item?.label || '');
-                        closeMenu();
+                        inputRefLocal.current?.focus();
                     }}
-                    {...menuProps}
                 />
-            </Portal>
+            </div>
+            {!!value?.trim().length && (
+                <Portal>
+                    <Menu
+                        itemCount={itemCount}
+                        items={items}
+                        noResultsMessage={
+                            !!value?.length && (
+                                <>
+                                    <Txt as="div" variant="heading-h5">
+                                        No results found
+                                    </Txt>
+                                    {noResultsMessage && (
+                                        <Txt as="div" variant="body-base">
+                                            {noResultsMessage}
+                                        </Txt>
+                                    )}
+                                </>
+                            )
+                        }
+                        onChange={(selectedValues, event) => {
+                            event?.preventDefault();
+                            const item = items?.find((i) => i.value === selectedValues[0]);
+                            onSelect?.(item);
+                            onChange(item?.label || '');
+                            closeMenu();
+                        }}
+                        {...menuProps}
+                    />
+                </Portal>
+            )}
         </>
     );
 }

package/src/SegmentedControl.tsx

@@ -21,8 +21,17 @@ export type SegmentedControlOption = {
     disabled?: boolean;
     /** The value of the option. If not provided, the label will be used as the value. */
     value?: string;
-    /** The the icon to display before the label. */
+    /**
+     * The the icon to display before the label.
+     *
+     * @type BspkIcon
+     */
     icon?: React.ReactNode;
+    /**
+     * The icon to display before the label when the option is active.
+     *
+     * @type BspkIcon
+     */
     iconActive?: React.ReactNode;
 };
 
@@ -30,13 +39,23 @@ export type SegmentedControlProps = {
     /**
      * The options to display. Each option has a label and an optional leading icon.
      *
-     * @type SegmentedControlOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<SegmentedControlOption>
      * @required
      */
     options: SegmentedControlOption[];
     /**
      * The id of the selected option.
      *
+     * @example
+     *     1;
+     *
      * @required
      */
     value: SegmentedControlOption['value'];

package/src/Switch.tsx

@@ -3,7 +3,7 @@ import { ChangeEvent } from 'react';
 
 import { CommonProps } from './';
 
-export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'onClick' | 'value'> & {
+export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
     /**
      * Marks the control as checked.
      *

package/src/SwitchGroup.tsx

@@ -1,10 +1,9 @@
 import { Switch } from './Switch';
 import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
-import { ToggleControlProps, ElementProps, CommonProps } from './';
+import { ElementProps, CommonProps } from './';
 
-export type SwitchGroupOption = Pick<ToggleControlProps<HTMLInputElement>, 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'>;
+export type SwitchGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
 
 export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
     /**
@@ -16,16 +15,23 @@ export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
     /**
      * The options for the switches.
      *
-     * @type SwitchGroupOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<SwitchGroupOption>
      * @required
      */
     options: SwitchGroupOption[];
     /**
      * The values of the switches in the on state.
      *
-     * @type string[]
+     * @type Array<string>
      */
-    values?: SwitchGroupProps['options'][number]['value'][];
+    value?: SwitchGroupProps['options'][number]['value'][];
 };
 
 /**
@@ -33,7 +39,13 @@ export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
  *
  * @name SwitchGroup
  */
-function SwitchGroup({ onChange, options = [], name, values = [], ...props }: ElementProps<SwitchGroupProps, 'div'>) {
+function SwitchGroup({
+    onChange,
+    options = [],
+    name,
+    value: values = [],
+    ...props
+}: ElementProps<SwitchGroupProps, 'div'>) {
     return (
         <div {...props} data-bspk="switch-group" role="group">
             {options.map(({ label, description, value }) => (

package/src/TabGroup.tsx

@@ -33,11 +33,19 @@ export type TabGroupOption = {
      * If not provided, the label will be used as the value.
      */
     value?: string;
-    /** The icon to display on the left side of the tab. */
+    /**
+     * 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. */
+    /**
+     * 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. */
+    /** The badge count to display on the tab */
     badge?: number;
 };
 
@@ -45,12 +53,22 @@ export type TabGroupProps = {
     /**
      * The tabs to display. Each tab has a label and an optional leading icon.
      *
-     * @type TabGroupOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<TabGroupOption>
      * @required
      */
     options: TabGroupOption[];
     /**
-     * The id of the selected tab.
+     * The value of the selected tab.
+     *
+     * @example
+     *     1;
      *
      * @required
      */

package/src/Tag.tsx

@@ -1,9 +1,9 @@
-import './tag.scss';
 import { ElementType, ReactNode } from 'react';
 
 import { ColorVariant } from './utils/colorVariants';
 
 import { ElementProps } from './';
+import './tag.scss';
 
 export type TagProps<As extends ElementType = 'span'> = {
     /**
@@ -16,6 +16,9 @@ export type TagProps<As extends ElementType = 'span'> = {
     /**
      * The content of the tag.
      *
+     * @example
+     *     New;
+     *
      * @required
      */
     children: ReactNode;
@@ -28,7 +31,7 @@ export type TagProps<As extends ElementType = 'span'> = {
     /**
      * The color of the tag.
      *
-     * @default white
+     * @default grey
      */
     color?: ColorVariant;
     /**

package/src/TextInput.tsx

@@ -1,10 +1,18 @@
 import { SvgCancel } from '@bspk/icons/Cancel';
-import './text-input.scss';
 import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
 
 import { useId } from './hooks/useId';
 
-import { ElementProps, CommonProps, InvalidPropsLibrary } from '.';
+import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '.';
+
+import './text-input.scss';
+
+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'
@@ -13,21 +21,24 @@ export type TextInputProps = CommonProps<
         /**
          * Callback when the value of the field changes.
          *
-         * @type (next: String, Event) => void
          * @required
          */
         onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
         /** The ref of the container. */
-        containerRef?: (node: HTMLElement | null) => void;
+        containerRef?: SetRef<HTMLDivElement>;
         /** The ref of the input. */
-        inputRef?: (node: HTMLElement | null) => void;
+        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. */
+        /**
+         * 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.
@@ -49,8 +60,8 @@ export type TextInputProps = CommonProps<
 function TextInput({
     invalid: invalidProp,
     onChange,
-    size = 'medium',
-    value = '',
+    size = DEFAULT.size,
+    value = DEFAULT.value,
     name,
     'aria-label': ariaLabel,
     inputRef,
@@ -59,10 +70,10 @@ function TextInput({
     id: idProp,
     leading,
     trailing,
-    type,
+    type = DEFAULT.type,
     readOnly,
     disabled,
-    autoComplete = 'off',
+    autoComplete = DEFAULT.autoComplete,
     containerRef,
     errorMessage,
     ...otherProps
@@ -75,6 +86,7 @@ function TextInput({
         <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}
@@ -102,11 +114,9 @@ function TextInput({
                 value={value}
             />
             {trailing && <span data-trailing>{trailing}</span>}
-            {value?.toString().length > 0 && !readOnly && !disabled && (
-                <button aria-label="clear" data-clear onClick={() => onChange('')}>
-                    <SvgCancel />
-                </button>
-            )}
+            <button aria-label="clear" data-clear onClick={() => onChange('')}>
+                <SvgCancel />
+            </button>
         </div>
     );
 }

package/src/Textarea.tsx

@@ -1,9 +1,9 @@
 import './textarea.scss';
-import { ChangeEvent, CSSProperties, Ref } from 'react';
+import { ChangeEvent, CSSProperties } from 'react';
 
 import { useId } from './hooks/useId';
 
-import { CommonProps, InvalidPropsLibrary } from './';
+import { CommonProps, InvalidPropsLibrary, SetRef } from './';
 
 const DEFAULT = {
     minRows: 3,
@@ -39,7 +39,7 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
          */
         name: string;
         /** The ref of the field. */
-        innerRef?: Ref<HTMLTextAreaElement>;
+        innerRef?: SetRef<HTMLTextAreaElement>;
         /** The placeholder of the field. */
         placeholder?: string;
         /**

package/src/avatar-group.scss

@@ -0,0 +1,17 @@
+[data-bspk='avatar-group'] {
+    width: 100%;
+
+    [data-wrap] {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: end;
+        justify-content: end;
+        gap: var(--spacing-sizing-02);
+        overflow: hidden;
+
+        & > * + * {
+            // margin-left: calc(var(--spacing-sizing-01) * -1);
+        }
+    }
+}

package/src/avatar.scss

@@ -1,8 +1,12 @@
 [data-bspk='avatar'] {
     --height: var(--spacing-sizing-10);
     --font: var(--labels-base);
-    --foreground: var(--foreground-neutral-on-surface);
-    --background: var(--surface-neutral-t3-low);
+    --svg-size: var(--spacing-sizing-10);
+
+    &:not([data-color]) {
+        --foreground: var(--foreground-neutral-on-surface);
+        --background: var(--surface-neutral-t3-low);
+    }
 
     display: flex;
     flex-direction: column;
@@ -25,49 +29,69 @@
         max-width: 100%;
     }
 
+    svg {
+        width: var(--svg-size);
+        height: var(--svg-size);
+    }
+
+    [data-icon] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     &[data-size='x-small'] {
         --height: var(--spacing-sizing-06);
         --font: var(--labels-x-small);
+        --svg-size: var(--spacing-sizing-04);
     }
 
     &[data-size='small'] {
         --height: var(--spacing-sizing-08);
         --font: var(--labels-small);
+        --svg-size: var(--spacing-sizing-05);
     }
 
     &[data-size='medium'] {
         --height: var(--spacing-sizing-10);
         --font: var(--labels-base);
+        --svg-size: var(--spacing-sizing-05);
     }
 
     &[data-size='large'] {
         --height: var(--spacing-sizing-12);
         --font: var(--labels-large);
+        --svg-size: var(--spacing-sizing-06);
     }
 
     &[data-size='x-large'] {
         --height: var(--spacing-sizing-14);
         --font: var(--subheader-x-large);
+        --svg-size: var(--spacing-sizing-08);
     }
 
     &[data-size='xx-large'] {
         --height: var(--spacing-sizing-17);
         --font: var(--subheader-xx-large);
+        --svg-size: var(--spacing-sizing-09);
     }
 
     &[data-size='xxx-large'] {
         --height: var(--spacing-sizing-19);
         --font: var(--display-regular-small);
+        --svg-size: var(--spacing-sizing-12);
     }
 
     &[data-size='xxxx-large'] {
         --height: var(--spacing-sizing-21);
         --font: var(--display-regular-medium);
+        --svg-size: var(--spacing-sizing-15);
     }
 
     &[data-size='xxxxx-large'] {
         --height: var(--spacing-sizing-23);
         --font: var(--display-regular-large);
+        --svg-size: var(--spacing-sizing-17);
     }
 }
 

package/src/badge.scss

@@ -6,6 +6,7 @@
     justify-content: center;
     border-radius: var(--radius-circular);
     height: var(--size);
+    width: fit-content;
     min-width: var(--size);
     padding: 0 var(--spacing-sizing-02);
 

package/src/button.scss

@@ -10,6 +10,7 @@
     background: transparent;
     text-decoration: none;
     width: fit-content;
+    font-family: var(--typeface);
     position: relative;
 
     [data-touch-target] {

package/src/demo/ExampleModalRender.tsx

@@ -0,0 +1,37 @@
+import { useId } from 'react';
+
+import { Button } from '../Button';
+import { ModalProps, Modal } from '../Modal';
+import { useModalState } from '../hooks/useModalState';
+
+import { Preset, DemoSetState } from './examples';
+
+export function ExampleModalRender({
+    props,
+    preset,
+    setState,
+}: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: ModalProps & Record<string, any>;
+    preset?: Preset<ModalProps>;
+    setState: DemoSetState;
+}) {
+    let label = 'Open Modal';
+
+    const dialogId = useId();
+    const openKey = `${dialogId}-open`;
+
+    const { open, onClose, onOpen } = useModalState(!!props[openKey], (next) => setState({ [openKey]: next }));
+
+    const presetState: Partial<ModalProps> = preset?.state || {};
+    if (presetState?.placement) label += ` (${presetState?.placement})`;
+
+    return (
+        <>
+            <Button label={label} onClick={() => onOpen()} />
+            <Modal data-example-component id="exampleId" {...props} onClose={onClose} open={open}>
+                <pre>{JSON.stringify(props, null, '\t')}</pre>
+            </Modal>
+        </>
+    );
+}

package/src/demo/ExamplePlaceholder.tsx

@@ -0,0 +1,40 @@
+import { useRef } from 'react';
+
+import { ElementProps } from '..';
+import { Txt } from '../Txt';
+
+const dimension = (value: number | string) => (typeof value === 'number' ? `${value}px` : `${value}`);
+
+export function ExamplePlaceholder({
+    hideSize = false,
+    height = 100,
+    width = '100%',
+    direction = 'row',
+    ...props
+}: ElementProps<
+    { hideSize?: boolean; height?: number | string; width?: number | string; direction?: 'column' | 'row' },
+    'div'
+>) {
+    const ref = useRef<HTMLDivElement | null>(null);
+
+    return (
+        <div
+            {...props}
+            data-example-placeholder
+            ref={ref}
+            style={{
+                width: dimension(width),
+                height: dimension(height),
+                flexDirection: direction,
+            }}
+        >
+            {!hideSize && (
+                <>
+                    <Txt variant="labels-large">{dimension(width)}</Txt>
+                    <Txt>&times;</Txt>
+                    <Txt variant="labels-large">{dimension(height)}</Txt>
+                </>
+            )}
+        </div>
+    );
+}