@bspk/ui 1.3.6 → 1.3.8

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -35,8 +35,8 @@ export type AvatarGroupProps = CommonProps<'style'> & {
      * Recommended to set this to a value between 3 and 5 for optimal display.
      *
      * @default 5
-     * @min 1
-     * @max 5
+     * @minimum 1
+     * @maximum 5
      */
     max?: number;
     /**

package/src/components/AvatarGroup/Overflow.tsx

@@ -9,7 +9,7 @@ import { handleKeyDown } from '-/utils/handleKeyDown';
 import { scrollListItemsStyle } from '-/utils/scrollListItemsStyle';
 import { useIds } from '-/utils/useIds';
 
-type AvatarGroupOverflowProps = {
+export type AvatarGroupOverflowProps = {
     /** The number of overflow avatars */
     overflow: number;
     /** The size of the avatar group */

package/src/components/BadgeDot/BadgeDot.tsx

@@ -2,7 +2,7 @@ import './badge-dot.scss';
 import { ReactNode } from 'react';
 import { cssWithVars } from '-/utils/cwv';
 
-type BadgeDotSize = 6 | 8 | 10 | 12;
+export type BadgeDotSize = 6 | 8 | 10 | 12;
 
 const OUTLINE_WIDTHS: Record<BadgeDotSize, number> = {
     6: 1,

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import './breadcrumb.scss';
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { BreadcrumbDropdown, BreadcrumbItem } from './BreadcumbDropdown';
+import { BreadcrumbDropdown, BreadcrumbItem } from './BreadcrumbDropdown';
 import { Link } from '-/components/Link';
 import { Txt } from '-/components/Txt';
 import { useId } from '-/hooks/useId';

package/src/components/Breadcrumb/{BreadcumbDropdown.tsx → BreadcrumbDropdown.tsx}

@@ -32,7 +32,7 @@ export type BreadcrumbItem = {
     href: string;
 };
 
-type BreadcrumbDropdownProps = ScrollListItemsStyleProps & {
+export type BreadcrumbDropdownProps = ScrollListItemsStyleProps & {
     items: BreadcrumbItem[];
     id: string;
 };

package/src/components/Breadcrumb/index.tsx

@@ -1 +1,2 @@
 export * from './Breadcrumb';
+export * from './BreadcrumbDropdown';

package/src/components/Calendar/Calendar.tsx

@@ -28,10 +28,10 @@ import { useId } from '-/hooks/useId';
 import { getElementById } from '-/utils/dom';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 
-type Direction = '<' | '<<' | '>' | '>>';
-type Kind = 'day' | 'month' | 'year';
+export type Direction = '<' | '<<' | '>' | '>>';
+export type Kind = 'day' | 'month' | 'year';
 
-type ConfigKind = {
+export type ConfigKind = {
     header: Record<
         Direction,
         {

package/src/components/Checkbox/CheckboxExample.tsx

@@ -0,0 +1,9 @@
+import { CheckboxProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const CheckboxExample: ComponentExample<CheckboxProps> = {
+    defaultState: {
+        'aria-label': 'checkbox aria-label',
+    },
+    render: ({ props, Component }) => <Component {...props} />,
+};

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -9,7 +9,7 @@ const ALL_LABEL = 'All';
 export type CheckboxGroupOption = Pick<CheckboxProps, 'value'> &
     Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'>;
 
-export type CheckboxGroupProps = FieldControlProps<string[]> & {
+export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> & {
     /**
      * The options for the checkboxes.
      *
@@ -37,6 +37,8 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
 /**
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * For a more complete example with field usage, see the CheckboxGroupField component.
+ *
  * @example
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *

package/src/components/CheckboxGroup/CheckboxGroupExample.tsx

@@ -57,4 +57,16 @@ export const presets: Preset<CheckboxGroupProps>[] = [
 
 export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
     presets,
+    defaultState: {
+        options: [
+            { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+            {
+                label: 'Option 2',
+                value: 'option2',
+                description: 'Description for option 2 (disabled)',
+                disabled: true,
+            },
+            { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+        ],
+    },
 };

package/src/components/CheckboxGroupField/CheckboxGroupFieldExample.tsx

@@ -0,0 +1,18 @@
+import { CheckboxGroupFieldProps } from '.';
+import { CheckboxGroupExample as checkboxGroupExample } from '-/components/CheckboxGroup/CheckboxGroupExample';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<CheckboxGroupFieldProps>[] = checkboxGroupExample.presets!.map((preset) => ({
+    ...preset,
+    propState: {
+        label: 'Checkbox Group Field',
+        ...preset.propState,
+    },
+}));
+
+export const CheckboxGroupFieldExample: ComponentExample<CheckboxGroupFieldProps> = {
+    presets,
+    defaultState: {
+        ...checkboxGroupExample.defaultState,
+    },
+};

package/src/components/Chip/Chip.tsx

@@ -29,7 +29,7 @@ export type ChipProps = {
     /** The function to call when the chip is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /**
-     * Whether the chip is currently selected.
+     * Visual indication of whether the chip is currently selected.
      *
      * @default false
      */

package/src/components/Field/field.scss

@@ -4,6 +4,8 @@
     flex-direction: column;
     gap: var(--spacing-sizing-01);
     border: none;
+    max-width: 100%;
+    min-inline-size: unset;
 }
 
 [data-bspk='field-label'] {

package/src/components/FormField/FormFieldExample.tsx

@@ -15,7 +15,7 @@ import { TimePicker } from '-/components/TimePicker';
 import { FieldControlProps } from '-/types/common';
 import { ComponentExample, Preset, Syntax } from '-/utils/demo';
 
-type ExampleProps = Partial<FieldControlProps & FormFieldProps>;
+export type ExampleProps = Partial<FieldControlProps & FormFieldProps>;
 
 export const presets: Preset<Partial<ExampleProps>>[] = [
     {

package/src/components/Input/InputElement.tsx

@@ -13,7 +13,7 @@ export const DEFAULT = {
     autoComplete: 'off',
 } as const;
 
-type InputElementBaseProps = CommonProps<'owner' | 'size'> &
+export type InputElementBaseProps = CommonProps<'owner' | 'size'> &
     FieldControlProps &
     Pick<FieldContextProps, 'ariaDescribedBy' | 'ariaErrorMessage'> & {
         /** The ref of the container. */

package/src/components/Input/InputExample.tsx

@@ -1,11 +1,12 @@
 import { InputProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 
-type InputExampleProps = InputProps & { label: string; description?: string };
+export type InputExampleProps = InputProps & { label: string; description?: string };
 
 export const InputExample: ComponentExample<InputExampleProps> = {
     defaultState: {
         label: 'Property Description',
+        'aria-label': 'input aria-label',
         description: 'This is a description of the property.',
         placeholder: 'Waterfront condo with great views',
     },

package/src/components/InputNumber/InputNumberExample.tsx

@@ -2,5 +2,8 @@ import { InputNumberProps } from './InputNumber';
 import { ComponentExample } from '-/utils/demo';
 
 export const InputNumberExample: ComponentExample<InputNumberProps> = {
+    defaultState: {
+        'aria-label': 'input number aria-label',
+    },
     render: ({ props, Component }) => <Component {...props} />,
 };

package/src/components/InputPhone/InputPhoneExample.tsx

@@ -4,6 +4,9 @@ import { ComponentExample, Preset } from '-/utils/demo';
 export const presets: Preset<InputPhoneProps>[] = [];
 
 export const InputPhoneExample: ComponentExample<InputPhoneProps> = {
+    defaultState: {
+        'aria-label': 'input phone aria-label',
+    },
     render: ({ props, Component }) => <Component {...props} />,
     variants: true,
 };

package/src/components/Modal/Modal.tsx

@@ -132,8 +132,6 @@ export type ModalProps = Pick<
  *         );
  *     }
  *
- * @ignoreRefs ButtonProps
- *
  * @name Modal
  * @phase UXReview
  */

package/src/components/PageControl/PageControl.tsx

@@ -9,7 +9,7 @@ export type PageControlProps = {
      * @example
      *     1;
      *
-     * @min 1
+     * @minimum 1
      * @required
      */
     currentPage: number;
@@ -19,7 +19,7 @@ export type PageControlProps = {
      * @example
      *     5;
      *
-     * @min 1
+     * @minimum 1
      * @required
      */
     numPages: number;
@@ -31,7 +31,7 @@ export type PageControlProps = {
     variant?: 'flat' | 'floating';
 };
 
-type DotSize = 'medium' | 'small' | 'x-small';
+export type DotSize = 'medium' | 'small' | 'x-small';
 
 /**
  * A visual indicator that displays a series of dots representing the number of pages or elements within a moving

package/src/components/Pagination/PageInput.tsx

@@ -4,7 +4,7 @@ import { PaginationProps } from './Pagination';
 import { Input } from '-/components/Input';
 import { Txt } from '-/components/Txt';
 
-type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+export type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
 
 export const PageInput: FC<PageInputProps> = ({ numPages, onChange, value }) => {
     const [page, setPage] = useState<string>(String(value));

package/src/components/Password/PasswordExample.tsx

@@ -0,0 +1,8 @@
+import { PasswordProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const PasswordExample: ComponentExample<PasswordProps> = {
+    defaultState: {
+        'aria-label': 'password aria-label',
+    },
+};

package/src/components/Portal/Portal.tsx

@@ -8,11 +8,7 @@ export type PortalProps = {
      * @required
      */
     children: ReactNode;
-    /**
-     * The container to render the portal in.
-     *
-     * @optional
-     */
+    /** The container to render the portal in. */
     container?: HTMLElement;
 };
 

package/src/components/Radio/RadioExample.tsx

@@ -1,5 +1,8 @@
 import { ComponentExample, createUid } from '-/utils/demo';
 
 export const RadioExample: ComponentExample = {
+    defaultState: {
+        'aria-label': 'radio aria-label',
+    },
     render: ({ props, Component }) => <Component {...props} name={createUid('radio')} />,
 };

package/src/components/Radio/radio.scss

@@ -36,7 +36,8 @@
         &::before {
             content: '';
             display: block;
-            width: var(--spacing-sizing-03);
+            width: 100%;
+            scale: 0.7;
             aspect-ratio: 1/1;
             background: var(--inner);
             border-radius: var(--radius-full);

package/src/components/RadioGroup/RadioGroup.tsx

@@ -7,7 +7,7 @@ import { ElementProps, FieldControlProps } from '-/types/common';
 export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label'> &
     Pick<RadioProps, 'value'>;
 
-export type RadioGroupProps = FieldControlProps & {
+export type RadioGroupProps = Omit<FieldControlProps, 'readOnly'> & {
     /**
      * The options for the radios.
      *
@@ -34,6 +34,8 @@ export type RadioGroupProps = FieldControlProps & {
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * For a more complete example with field usage, see the RadioGroupField component.
+ *
  * @example
  *     import { useState } from 'react';
  *     import { RadioGroup } from '@bspk/ui/RadioGroup';

package/src/components/RadioGroup/RadioGroupExample.tsx

@@ -1,11 +1,78 @@
 import { RadioGroupProps } from '.';
-import { CheckboxGroupExample } from '-/components/CheckboxGroup/CheckboxGroupExample';
-import { RadioExample } from '-/components/Radio/RadioExample';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+import { randomString } from '-/utils/random';
 
-export const presets = (CheckboxGroupExample.presets as ComponentExample<RadioGroupProps>['presets']) || [];
+export const presets: Preset<RadioGroupProps>[] = [
+    {
+        label: 'With Descriptions',
+        propState: {
+            value: 'option2',
+            disabled: false,
+            options: [
+                { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                {
+                    label: 'Option 2',
+                    value: 'option2',
+                    description: 'Description for option 2 (disabled)',
+                    disabled: true,
+                },
+                { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+            ],
+            ['aria-label']: 'Radio group',
+            name: 'Radio group',
+        },
+    },
+    {
+        label: 'Group disabled',
+        propState: {
+            value: 'option2',
+            disabled: true,
+            options: [
+                { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                {
+                    label: 'Option 2',
+                    value: 'option2',
+                    description: 'Description for option 2 (disabled)',
+                },
+                { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+            ],
+            ['aria-label']: 'Radio group',
+            name: 'Radio group',
+        },
+    },
+    {
+        label: 'Long labels',
+        propState: {
+            value: 'option2',
+            disabled: false,
+            options: [
+                { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
+                { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },
+                { label: 'This is a very long label for option 3', value: 'option3' },
+            ],
+            ['aria-label']: 'Radio group',
+            name: 'Radio group',
+        },
+    },
+];
 
 export const RadioGroupExample: ComponentExample<RadioGroupProps> = {
-    render: RadioExample.render,
     presets,
+    render: ({ props, Component }) => {
+        const id = randomString();
+        return <Component {...props} id={id} name={props.name + id} />;
+    },
+    defaultState: {
+        value: 'option3',
+        options: [
+            { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+            {
+                label: 'Option 2',
+                value: 'option2',
+                description: 'Description for option 2 (disabled)',
+                disabled: true,
+            },
+            { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+        ],
+    },
 };

package/src/components/RadioGroupField/RadioGroupFieldExample.tsx

@@ -0,0 +1,18 @@
+import { RadioGroupFieldProps } from '.';
+import { RadioGroupExample as radioGroupExample } from '-/components/RadioGroup/RadioGroupExample';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<RadioGroupFieldProps>[] = radioGroupExample.presets!.map((preset) => ({
+    ...preset,
+    propState: {
+        label: 'Radio Group Field',
+        ...preset.propState,
+    },
+}));
+
+export const RadioGroupFieldExample: ComponentExample<RadioGroupFieldProps> = {
+    presets,
+    defaultState: {
+        ...radioGroupExample.defaultState,
+    },
+};

package/src/components/SearchBar/SearchBar.tsx

@@ -23,7 +23,10 @@ import { useIds } from '-/utils/useIds';
  */
 export type SearchBarOption = Pick<ListItemProps, 'label' | 'leading' | 'trailing'>;
 
-export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = FieldControlProps<string, O> &
+export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Omit<
+    FieldControlProps<string, O>,
+    'invalid' | 'readOnly' | 'required'
+> &
     Pick<InputProps, 'inputRef' | 'size' | 'trailing'> &
     ScrollListItemsStyleProps & {
         /**
@@ -111,9 +114,11 @@ export function SearchBar<O extends SearchBarOption>({
     disabled = false,
     scrollLimit,
     trailing,
+    'aria-label': ariaLabel,
 }: SearchBarProps<O>) {
     const id = useId(idProp);
     const menuId = `${id}-menu`;
+    const noResultsId = `${id}-no-results`;
 
     const items = useIds(`search-bar-${id}`, itemsProp || []);
 
@@ -162,23 +167,20 @@ export function SearchBar<O extends SearchBarOption>({
     };
 
     useEffect(() => {
-        if (!hasFocus) {
-            setActiveElementId(null);
-            return;
-        }
+        if (!hasFocus) return setActiveElementId(null);
+
+        if (!filteredItems.length) return setActiveElementId(noResultsId);
 
         if (activeElementId) return;
 
-        // If we have focus but no active element, set the first item as active (if there is one)
-        if (filteredItems.length) {
-            setActiveElementId(value?.trim().length ? filteredItems[0].id : null);
-        }
-    }, [hasFocus, filteredItems, activeElementId, setActiveElementId, value]);
+        setActiveElementId(value?.trim().length ? filteredItems[0].id : null);
+    }, [hasFocus, filteredItems, activeElementId, setActiveElementId, value, noResultsId]);
 
     return (
         <>
             <div data-bspk="search-bar">
                 <Input
+                    aria-label={ariaLabel}
                     autoComplete="off"
                     containerRef={elements.setReference}
                     disabled={disabled}
@@ -242,8 +244,8 @@ export function SearchBar<O extends SearchBarOption>({
                 }}
                 tabIndex={-1}
             >
-                {!!value?.length && !items?.length && (
-                    <div data-bspk="no-items-found">
+                {activeElementId === noResultsId && (
+                    <div data-bspk="no-items-found" id={noResultsId}>
                         <Txt as="div" variant="heading-h5">
                             No results found
                         </Txt>

package/src/components/SearchBar/SearchBarExample.tsx

@@ -3,6 +3,9 @@ import { ComponentExample } from '-/utils/demo';
 import { randomString } from '-/utils/random';
 
 export const SearchBarExample: ComponentExample<SearchBarProps> = {
+    defaultState: {
+        'aria-label': 'search bar aria-label',
+    },
     render: ({ props, Component }) => {
         return <Component {...props} id={`search-bar-${randomString(8)}`} />;
     },

package/src/components/Select/SelectExample.tsx

@@ -156,6 +156,7 @@ export const SelectExample: ComponentExample<SelectProps> = {
         options: DEFAULT_OPTIONS,
         scrollLimit: 5,
         value: '',
+        'aria-label': 'select aria-label',
     },
     render: ({ props, Component, preset }) => <Component key={preset?.label} {...props} />,
     presets,

package/src/components/Slider/SliderIntervalDots.tsx

@@ -1,6 +1,6 @@
 import { SliderProps, SliderValue } from './Slider';
 
-type IntervalDotProps = Pick<SliderProps<SliderValue>, 'max' | 'min' | 'value'> & {
+export type IntervalDotProps = Pick<SliderProps<SliderValue>, 'max' | 'min' | 'value'> & {
     step: number;
 };
 

package/src/components/Switch/SwitchExample.tsx

@@ -0,0 +1,9 @@
+import { SwitchProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const SwitchExample: ComponentExample<SwitchProps> = {
+    defaultState: {
+        'aria-label': 'switch aria-label',
+    },
+    render: ({ props, Component }) => <Component {...props} />,
+};

package/src/components/Table/index.tsx

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

package/src/components/Textarea/TextareaExample.tsx

@@ -2,5 +2,8 @@ import { TextareaProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 
 export const TextareaExample: ComponentExample<TextareaProps> = {
+    defaultState: {
+        'aria-label': 'textarea aria-label',
+    },
     render: ({ props, Component }) => <Component {...props} />,
 };

package/src/components/TimePicker/Listbox.tsx

@@ -3,13 +3,13 @@ import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { getElementById } from '-/utils/dom';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 
-type Option = {
+export type Option = {
     id: string;
     value: string;
     label: string;
 };
 
-type TimePickerListboxProps = {
+export type TimePickerListboxProps = {
     options: Option[];
     selectedValue?: string;
     type: TimePickerType;

package/src/components/TimePicker/Segment.tsx

@@ -9,7 +9,7 @@ export const NUMBER_PLACEHOLDER = '--' as const;
 
 export type TimePickerType = 'hours' | 'meridiem' | 'minutes';
 
-type TimePickerSegmentProps<T extends string> = {
+export type TimePickerSegmentProps<T extends string> = {
     disabled?: boolean;
     name: string;
     readOnly?: boolean;

package/src/components/TimePicker/TimePickerExample.tsx

@@ -3,6 +3,8 @@ import { ComponentExample } from '-/utils/demo';
 
 export const TimePickerExample: ComponentExample<TimePickerProps> = {
     variants: false,
-
+    defaultState: {
+        'aria-label': 'time picker aria-label',
+    },
     render: ({ props, Component }) => <Component {...props} />,
 };

package/src/components/ToggleOption/ToggleOption.tsx

@@ -6,7 +6,7 @@ import { CommonProps } from '-/types/common';
 export type ToggleOptionControlProps<T extends { 'aria-label'?: string }> = Omit<T, 'aria-label'> &
     Pick<ToggleOptionProps, 'description' | 'label'>;
 
-export type ToggleOptionProps = CommonProps<'disabled' | 'readOnly'> &
+export type ToggleOptionProps = CommonProps<'disabled'> &
     Omit<ListItemProps, 'as' | 'label' | 'leading' | 'subtext' | 'trailing'> & {
         /**
          * The label of the option. Also used as the aria-label of the control.
@@ -30,13 +30,12 @@ export type ToggleOptionProps = CommonProps<'disabled' | 'readOnly'> &
  * @name ToggleOption
  * @phase Utility
  */
-export function ToggleOption({ label, description, children, disabled, readOnly, ...props }: ToggleOptionProps) {
+export function ToggleOption({ label, description, children, disabled, ...props }: ToggleOptionProps) {
     return (
         <ListItem
             {...props}
+            aria-disabled={disabled || undefined}
             as="label"
-            data-disabled={disabled}
-            data-readonly={readOnly}
             label={label}
             leading={children}
             subText={description}

package/src/hooks/useArrowNavigation.ts

@@ -3,7 +3,7 @@ import { getElementById } from '-/utils/dom';
 import { KeysCallback } from '-/utils/handleKeyDown';
 import { KeyboardEventCode } from '-/utils/keyboard';
 
-type ArrowKeyNames = Extract<KeyboardEventCode, `Arrow${string}`>;
+export type ArrowKeyNames = Extract<KeyboardEventCode, `Arrow${string}`>;
 
 const ARROW_KEYS: ArrowKeyNames[] = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 
@@ -14,7 +14,7 @@ export type ArrowKeyNavigationCallbackParams = {
     increment: number;
 };
 
-type UseArrowNavigationProps = {
+export type UseArrowNavigationProps = {
     /**
      * An array of string IDs representing the navigable elements. These IDs should correspond to the `id` attributes of
      * the elements in the DOM. Ensure the elements are not disabled.

package/src/hooks/useDebounceCallback.ts

@@ -1,6 +1,6 @@
 import { useTimeout } from './useTimeout';
 
-type Fn = (...args: unknown[]) => void;
+export type Fn = (...args: unknown[]) => void;
 
 /**
  * A hook that debounces a function call, ensuring that the function is not called again until a specified delay