@bspk/ui 1.3.5 → 1.3.7

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/Checkbox.tsx

@@ -2,7 +2,7 @@ import './checkbox.scss';
 import { ChangeEvent, useEffect, useRef } from 'react';
 import { ElementProps, FieldControlProps } from '-/types/common';
 
-export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'value'> & {
+export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'value'> & {
     /**
      * If the checkbox is partially checked or
      * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
@@ -64,7 +64,6 @@ export function Checkbox({
     indeterminate: indeterminateProp,
     invalid,
     disabled,
-    readOnly,
     required,
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
@@ -79,10 +78,7 @@ export function Checkbox({
     }, [indeterminate]);
 
     return (
-        <span
-            //
-            data-bspk="checkbox"
-        >
+        <span data-bspk="checkbox">
             <input
                 {...props}
                 aria-describedby={props['aria-describedby'] || undefined}
@@ -90,9 +86,8 @@ export function Checkbox({
                 aria-invalid={invalid || undefined}
                 checked={checked}
                 data-indeterminate={indeterminate || undefined}
-                disabled={disabled || readOnly || undefined}
+                disabled={disabled || undefined}
                 onChange={(event) => props.onChange(!!event.target.checked, event)}
-                readOnly={readOnly}
                 ref={(node) => {
                     if (!node) return;
                     inputRef.current = node;

package/src/components/Checkbox/CheckboxExample.tsx

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

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';
  *
@@ -71,7 +73,6 @@ export function CheckboxGroup({
     selectAll,
     selectAllProps,
     disabled = false,
-    readOnly,
     invalid: invalidProp,
     required,
     id: idProp,
@@ -83,7 +84,6 @@ export function CheckboxGroup({
         idProp,
         required,
         disabled,
-        readOnly,
         invalidProp,
     });
 
@@ -96,7 +96,7 @@ export function CheckboxGroup({
             role="group"
         >
             {selectAll && (
-                <ToggleOption label={selectAllProps?.label || ALL_LABEL} readOnly={readOnly}>
+                <ToggleOption label={selectAllProps?.label || ALL_LABEL}>
                     <Checkbox
                         aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
                         aria-label={selectAllProps?.label || ALL_LABEL}
@@ -107,7 +107,6 @@ export function CheckboxGroup({
                         invalid={invalid || undefined}
                         name={name}
                         onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
-                        readOnly={readOnly}
                         value="all"
                     />
                 </ToggleOption>
@@ -118,7 +117,6 @@ export function CheckboxGroup({
                     disabled={disabled || optionDisabled}
                     key={optionValue}
                     label={label}
-                    readOnly={readOnly}
                 >
                     <Checkbox
                         aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
@@ -130,7 +128,6 @@ export function CheckboxGroup({
                         onChange={(checked) => {
                             onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
                         }}
-                        readOnly={readOnly}
                         value={optionValue}
                     />
                 </ToggleOption>

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/CheckboxOption/CheckboxOption.tsx

@@ -36,7 +36,6 @@ export function CheckboxOption({
     label: labelProp,
     description,
     disabled,
-    readOnly,
     style,
     ...checkboxProps
 }: CheckboxOptionProps) {
@@ -49,10 +48,9 @@ export function CheckboxOption({
                 description={description}
                 disabled={disabled}
                 label={label}
-                readOnly={readOnly}
                 style={style}
             >
-                <Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} readOnly={readOnly} />
+                <Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} />
             </ToggleOption>
         )
     );

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/Field/utils.ts

@@ -52,7 +52,7 @@ export function useFieldInit({
     idProp: string | undefined;
     required: boolean | undefined;
     disabled: boolean | undefined;
-    readOnly: boolean | undefined;
+    readOnly?: boolean | undefined;
     invalidProp: boolean | undefined;
 }): Pick<FieldContext, 'ariaDescribedBy' | 'ariaErrorMessage'> & { invalid: boolean; id: string } {
     const context = useContext(fieldContext);

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,7 +1,7 @@
 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: {

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/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,7 @@
 import { ComponentExample, createUid } from '-/utils/demo';
 
 export const RadioExample: ComponentExample = {
-    render: ({ props, Component }) => <Component {...props} name={createUid('radio')} />,
+    render: ({ props, Component }) => (
+        <Component {...props} aria-label={props['aria-label'] || 'radio aria-label'} 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';
@@ -68,7 +70,6 @@ export function RadioGroup({
     name,
     value: groupValue,
     disabled = false,
-    readOnly,
     invalid: invalidProp,
     required,
     id: idProp,
@@ -80,7 +81,6 @@ export function RadioGroup({
         idProp,
         required,
         disabled,
-        readOnly,
         invalidProp,
     });
 

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/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/Switch.tsx

@@ -16,12 +16,6 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
      * @required
      */
     onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Only exists as a alias for `disabled` and to match other input properties.
-     *
-     * @default false
-     */
-    readOnly?: boolean;
     /** The value of the switch. */
     value: string;
 };
@@ -53,9 +47,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  * @name Switch
  * @phase UXReview
  */
-export function Switch({ checked = false, disabled: disabledProp = false, readOnly, ...props }: SwitchProps) {
-    const disabled = readOnly || disabledProp;
-
+export function Switch({ checked = false, disabled = false, ...props }: SwitchProps) {
     return (
         <span data-bspk="switch">
             <input

package/src/components/Switch/SwitchExample.tsx

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

package/src/components/Table/index.tsx

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

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;