@bspk/ui 1.3.6 → 1.3.7

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';

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/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;

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/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

package/src/hooks/useDebounceState.ts

@@ -5,7 +5,6 @@ import { useTimeout } from './useTimeout';
 /**
  * A hook that debounces a state update, ensuring that the function is not called again until a specified delay
  *
- * @param defaultValue The initial value of the state
  * @param delay [1000] The delay (in ms) for the state to update
  * @returns A tuple containing the current state and a debounced setter function that updates the state after the
  *   specified delay

package/src/hooks/useOutsideClick.ts

@@ -24,16 +24,12 @@ import { useEffect } from 'react';
  *     </>
  *     );
  *     }
- *
- * @param elements - The elements to check if the click occurred outside of.
- * @param callback - The callback to call when a click occurs outside of the ref.
- * @param disabled - Whether the hook should be disabled. Defaults to false.
  */
 export function useOutsideClick({
-    elements,
-    callback,
-    disabled,
-    handleTabs = false,
+    elements, // The elements to check if the click occurred outside of.
+    callback, // The callback to call when a click occurs outside of the ref.
+    disabled, // Whether the hook should be disabled. Defaults to false.
+    handleTabs = false, // Whether to handle tab key presses as outside clicks.
 }: {
     elements: (HTMLElement | null)[] | null;
     callback: (event?: KeyboardEvent | MouseEvent) => void;

package/src/hooks/useTimeout.ts

@@ -1,6 +1,6 @@
 import { useRef, useEffect, useMemo } from 'react';
 
-type TimeoutHook = {
+export type TimeoutHook = {
     clear: () => void;
     set: (callback: () => void, ms?: number) => void;
     ref: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;

package/src/types/common.ts

@@ -32,7 +32,7 @@ export type ElementConstructorProps<
     O extends string = '',
 > = Omit<ComponentPropsWithoutRef<E>, O>;
 
-type CSSVariables = `--${string}`;
+export type CSSVariables = `--${string}`;
 
 export type CSSWithVariables = CSSProperties | (CSSProperties & { [key in CSSVariables]: unknown });
 
@@ -119,14 +119,12 @@ export type CommonPropsLibrary = {
     /**
      * The aria-label for the element.
      *
-     * @required
-     */
-    'aria-label'?: string;
-    /**
-     * Identifies the parent component. Helps with styling, debugging, and/or testing purposes.
+     * This is used to provide an accessible name for the element when a visible label is not present.
      *
-     * @utility
+     * Ensure this is provided when using the element in isolation to maintain accessibility.
      */
+    'aria-label'?: string;
+    /** Identifies the parent component. Helps with styling, debugging, and/or testing purposes. */
     owner?: string;
     /**
      * The ARIA role of the element.

package/src/utils/countryCodes.ts

@@ -4,7 +4,7 @@ import { CountryCode } from 'libphonenumber-js';
 
 export type SupportedCountryCode = keyof CountryCodeData;
 
-type CountryCodeData = Omit<
+export type CountryCodeData = Omit<
     Record<CountryCode, { name: string; flagIconName: IconName }>,
     | 'AC'
     | 'CI'

package/src/utils/createExampleChildElement.tsx

@@ -11,7 +11,7 @@ import { Switch } from '-/components/Switch';
 import { Tag } from '-/components/Tag';
 import { Txt } from '-/components/Txt';
 
-type ExampleChildElementProps = {
+export type ExampleChildElementProps = {
     exampleState: Record<string, any>;
     name: string;
     setState: DemoSetState;

package/src/utils/demo.ts

@@ -55,7 +55,7 @@ export type ComponentExampleRender<Props = Record<string, unknown>> = (
     params: ComponentExampleRenderProps<Props>,
 ) => React.ReactNode;
 
-type ComponentVariantOverride<Props> = {
+export type ComponentVariantOverride<Props> = {
     [K in keyof Props]?: Props[K] | { options: Props[K][] };
 };
 

package/dist/components/Breadcrumb/BreadcumbDropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreadcumbDropdown.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/BreadcumbDropdown.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/useModalState.d.ts

@@ -1,22 +0,0 @@
-/**
- * A hook to manage the state of a modal.
- *
- * @example
- *     import { Modal } from '@bspk/ui/Modal';
- *     import { useModalState } from '@bspk/ui/hooks/useModalState';
- *
- *     function Example() {
- *     const modalProps = useModalState(false);
- *     return <Modal  {...modalProps}>...</Modal>
- *     }
- *
- * @param parentValue - The value of the parent state.
- * @param setParentState - A function to set the parent state.
- * @returns An object with the open state and the `onClose` and `onOpen` callbacks.
- */
-export declare function useModalState(parentValue?: boolean, setParentState?: (next: boolean) => void): {
-    open: boolean;
-    onClose: () => void;
-    onOpen: () => void;
-};
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/hooks/useModalState.js

@@ -1,34 +0,0 @@
-import { useEffect, useState } from 'react';
-/**
- * A hook to manage the state of a modal.
- *
- * @example
- *     import { Modal } from '@bspk/ui/Modal';
- *     import { useModalState } from '@bspk/ui/hooks/useModalState';
- *
- *     function Example() {
- *     const modalProps = useModalState(false);
- *     return <Modal  {...modalProps}>...</Modal>
- *     }
- *
- * @param parentValue - The value of the parent state.
- * @param setParentState - A function to set the parent state.
- * @returns An object with the open state and the `onClose` and `onOpen` callbacks.
- */
-export function useModalState(parentValue = false, setParentState) {
-    const [open, setOpen] = useState(parentValue);
-    useEffect(() => setOpen(parentValue), [parentValue]);
-    return {
-        open,
-        onClose: () => {
-            setOpen(false);
-            setParentState?.(false);
-        },
-        onOpen: () => {
-            setOpen(true);
-            setParentState?.(true);
-        },
-    };
-}
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-//# sourceMappingURL=useModalState.js.map

package/dist/hooks/useModalState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useModalState.js","sourceRoot":"","sources":["../../src/hooks/useModalState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAC,cAAuB,KAAK,EAAE,cAAwC;IAChG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAErD,OAAO;QACH,IAAI;QACJ,OAAO,EAAE,GAAG,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;QACD,MAAM,EAAE,GAAG,EAAE;YACT,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;KACJ,CAAC;AACN,CAAC;AAED,sDAAsD"}

package/src/hooks/useModalState.ts

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * A hook to manage the state of a modal.
- *
- * @example
- *     import { Modal } from '@bspk/ui/Modal';
- *     import { useModalState } from '@bspk/ui/hooks/useModalState';
- *
- *     function Example() {
- *     const modalProps = useModalState(false);
- *     return <Modal  {...modalProps}>...</Modal>
- *     }
- *
- * @param parentValue - The value of the parent state.
- * @param setParentState - A function to set the parent state.
- * @returns An object with the open state and the `onClose` and `onOpen` callbacks.
- */
-export function useModalState(parentValue: boolean = false, setParentState?: (next: boolean) => void) {
-    const [open, setOpen] = useState(parentValue);
-
-    useEffect(() => setOpen(parentValue), [parentValue]);
-
-    return {
-        open,
-        onClose: () => {
-            setOpen(false);
-            setParentState?.(false);
-        },
-        onOpen: () => {
-            setOpen(true);
-            setParentState?.(true);
-        },
-    };
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */