@bspk/ui 1.3.8 → 1.3.10

package/src/components/Switch/Switch.tsx

@@ -29,7 +29,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     function Example() {
+ *     () => {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
@@ -40,7 +40,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *                 checked={isChecked}
  *             />
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/src/components/TabGroup/TabGroup.tsx

@@ -21,7 +21,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -35,7 +35,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabGroup
  * @phase UXReview

package/src/components/TabGroup/TabGroupExample.tsx

@@ -1,9 +1,3 @@
-import { SvgCircle } from '@bspk/icons/Circle';
-import { SvgDiamond } from '@bspk/icons/Diamond';
-import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
-import { SvgSquare } from '@bspk/icons/Square';
-import { SvgSquareFill } from '@bspk/icons/SquareFill';
-
 import { TabGroupProps } from '.';
 import { ComponentExample, Preset } from '-/utils/demo';
 
@@ -34,17 +28,17 @@ const PRESET_OPTIONS: TabGroupProps['options'] = [
 
 const OPTION_ICONS = [
     {
-        icon: <SvgDiamond />,
-        iconSelected: <SvgDiamondFill />,
+        icon: 'Diamond',
+        iconSelected: 'DiamondFill',
     },
 
     {
-        icon: <SvgCircle />,
+        icon: 'Circle',
         iconSelected: undefined,
     },
     {
-        icon: <SvgSquare />,
-        iconSelected: <SvgSquareFill />,
+        icon: 'Square',
+        iconSelected: 'SquareFill',
     },
 ];
 

package/src/components/TabGroup/tab-group.scss

@@ -1,5 +1,6 @@
 ul[data-bspk='tab-group'] {
     border-bottom: none;
+    max-width: 100%;
 
     li {
         border: 0;

package/src/components/TabList/TabList.tsx

@@ -2,7 +2,6 @@ import './tab-list.scss';
 import { Fragment, ReactNode, useMemo } from 'react';
 import { Badge, BadgeProps } from '-/components/Badge';
 import { Tooltip } from '-/components/Tooltip';
-import { Truncated } from '-/components/Truncated';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useId } from '-/hooks/useId';
 import { ElementProps } from '-/types/common';
@@ -127,7 +126,7 @@ export type TabListProps<O extends TabOption = TabOption> = {
  *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -141,7 +140,7 @@ export type TabListProps<O extends TabOption = TabOption> = {
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabList
  * @phase Utility
@@ -238,7 +237,7 @@ export function TabList({
                                     tabIndex={focusableOption.id === item.id ? 0 : -1}
                                 >
                                     {icon && <span aria-hidden="true">{icon}</span>}
-                                    {!iconsOnly && <Truncated data-label>{item.label}</Truncated>}
+                                    {!iconsOnly && <span data-label>{item.label}</span>}
                                     {item.badge && !item.disabled && (
                                         <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
                                     )}

package/src/components/TabList/tab-list.scss

@@ -4,7 +4,6 @@ ul[data-bspk-utility='tab-list'] {
     display: flex;
     flex-direction: row;
     list-style: none;
-    width: 100%;
     height: var(--height);
     font: var(--font);
 

package/src/components/Table/Footer.tsx

@@ -1,5 +1,11 @@
 import { Pagination } from '-/components/Pagination';
 
+/**
+ * TableFooter component displays pagination controls and information for a table.
+ *
+ * @name TableFooter
+ * @parent Table
+ */
 export function TableFooter({
     pageIndex,
     pageSize,

package/src/components/Table/Table.tsx

@@ -72,22 +72,59 @@ export type TableProps<R extends TableRow> = {
  * @example
  *     import { Table } from '@bspk/ui/Table';
  *
- *     function Example() {
- *         return (
- *             <Table
- *                 columns={[
- *                     { key: 'state', label: 'State', width: '100px' },
- *                     { key: 'capital', label: 'Capital', width: '1fr' },
- *                 ]}
- *                 data={[
- *                     { state: 'New Jersey', capital: 'Trenton' },
- *                     { state: 'New York', capital: 'Albany' },
- *                     { state: 'California', capital: 'Sacramento' },
- *                 ]}
- *                 title="State Capitals"
- *             />
- *         );
- *     }
+ *     <Table
+ *         columns={[
+ *             { key: 'state', label: 'State', width: '160px' },
+ *             { key: 'capital', label: 'Capital', width: '140px' },
+ *             { key: 'population', label: 'Population', width: '140px' },
+ *             { key: 'nickname', label: 'Nickname', width: '1fr' },
+ *         ]}
+ *         data={[
+ *             {
+ *                 id: 'ca',
+ *                 state: 'California',
+ *                 capital: 'Sacramento',
+ *                 population: '39,512,223',
+ *                 nickname: 'The Golden State',
+ *             },
+ *             {
+ *                 id: 'ny',
+ *                 state: 'New York',
+ *                 capital: 'Albany',
+ *                 population: '19,299,981',
+ *                 nickname: 'The Empire State',
+ *             },
+ *             {
+ *                 id: 'nj',
+ *                 state: 'New Jersey',
+ *                 capital: 'Trenton',
+ *                 population: '8,882,190',
+ *                 nickname: 'The Garden State',
+ *             },
+ *             {
+ *                 id: 'tx',
+ *                 state: 'Texas',
+ *                 capital: 'Austin',
+ *                 population: '29,183,290',
+ *                 nickname: 'The Lone Star State',
+ *             },
+ *             {
+ *                 id: 'hi',
+ *                 state: 'Hawaii',
+ *                 capital: 'Honolulu',
+ *                 population: '1,415,872',
+ *                 nickname: 'The Aloha State',
+ *             },
+ *             {
+ *                 id: 'ak',
+ *                 state: 'Alaska',
+ *                 capital: 'Juneau',
+ *                 population: '731,545',
+ *                 nickname: 'The Last Frontier',
+ *             },
+ *         ]}
+ *         title="U.S. States — Capitals & Quick Facts"
+ *     />;
  *
  * @name Table
  * @phase UXReview

package/src/components/Table/table.scss

@@ -46,7 +46,6 @@
         grid-template-columns: var(--template-columns);
         border-collapse: collapse;
         min-width: 100%;
-        user-select: none;
 
         tr,
         tbody,

package/src/components/Tag/Tag.tsx

@@ -35,9 +35,7 @@ export type TagProps = {
  * @example
  *     import { Tag } from '@bspk/ui/Tag';
  *
- *     function Example() {
- *         return <Tag label="Example Tag" variant="flat" color="primary" />;
- *     }
+ *     <Tag label="Example Tag" variant="flat" color="primary" />;
  *
  * @name Tag
  * @phase UXReview

package/src/components/Textarea/Textarea.tsx

@@ -49,22 +49,22 @@ export type TextareaProps = CommonProps<'size'> &
  *     import { useState } from 'react';
  *     import { Textarea } from '@bspk/ui/Textarea';
  *
- *     function ExampleWithField() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *         return (
- *             <Field>
- *                 <FieldLabel>Example Textarea</FieldLabel>
- *                 <Textarea name="example-name" onChange={setValue} value={value} />
- *                 <FieldDescription>This is an example textarea field.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone textarea example
+ *                 <Textarea aria-label="Enter text" name="example-name" onChange={setValue} value={value} />
+ *                 <br />
+ *                 // textarea used within a field
+ *                 <Field>
+ *                     <FieldLabel>Example Textarea</FieldLabel>
+ *                     <Textarea name="example-name" onChange={setValue} value={value} />
+ *                     <FieldDescription>This is an example textarea field.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
- *
- *     function ExampleStandalone() {
- *         const [value, setValue] = useState('');
- *
- *         return <Textarea aria-label="Enter text" name="example-name" onChange={setValue} value={value} />;
- *     }
+ *     };
  *
  * @element
  *

package/src/components/TimePicker/Listbox.tsx

@@ -17,6 +17,12 @@ export type TimePickerListboxProps = {
     onTab?: (e: React.KeyboardEvent) => void;
 };
 
+/**
+ * TimePickerListbox component displays a listbox for selecting time values.
+ *
+ * @name TimePickerListbox
+ * @parent TimePicker
+ */
 export function TimePickerListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimePickerListboxProps) {
     const { activeElementId, arrowKeyCallbacks } = useArrowNavigation({
         ids: options.map((option) => option.id),

package/src/components/TimePicker/Segment.tsx

@@ -19,6 +19,12 @@ export type TimePickerSegmentProps<T extends string> = {
     setRef?: (element: HTMLElement | null) => void;
 };
 
+/**
+ * TimePickerSegment component displays an individual segment of a time picker (hours, minutes, or meridiem).
+ *
+ * @name TimePickerSegment
+ * @parent TimePicker
+ */
 export function TimePickerSegment<T extends string>({
     disabled,
     name,

package/src/components/TimePicker/TimePicker.tsx

@@ -33,23 +33,23 @@ export type TimePickerProps = FieldControlProps & Pick<InputProps, 'size'>;
  * @example
  *     import { TimePicker } from '@bspk/ui/TimePicker';
  *
- *     function ExampleStandalone() {
- *         const [value, onChange] = React.useState('');
- *
- *         return <TimePicker aria-label="Time" name="time" value={value} onChange={onChange} />;
- *     }
- *
- *     function ExampleWithField() {
- *         const [value, onChange] = React.useState('');
+ *     () => {
+ *         const [value, onChange] = useState('');
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Time</FieldLabel>
- *                 <TimePicker value={value} onChange={onChange} />
- *                 <FieldDescription>The time picker allows you to select a time.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone time picker example
+ *                 <TimePicker aria-label="Time" name="time" value={value} onChange={onChange} />
+ *                 <br />
+ *                 // time picker used within a field
+ *                 <Field>
+ *                     <FieldLabel>Time</FieldLabel>
+ *                     <TimePicker value={value} onChange={onChange} />
+ *                     <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name TimePicker
  * @phase UXReview

package/src/components/ToggleOption/ToggleOption.tsx

@@ -38,6 +38,7 @@ export function ToggleOption({ label, description, children, disabled, ...props
             as="label"
             label={label}
             leading={children}
+            owner="toggle-option"
             subText={description}
             width="hug"
         />

package/src/components/ToggleOption/toggle-option.scss

@@ -1,64 +1,5 @@
-[data-bspk='toggle-option'] {
-    display: grid;
-    width: 100%;
-    grid-template-columns: auto 1fr;
-    grid-column-gap: var(--spacing-sizing-02);
-    user-select: none;
-    background: unset;
-    border: unset;
-    cursor: pointer;
-    min-height: var(--spacing-sizing-08);
-    max-width: 100%;
-    padding: var(--spacing-sizing-01);
-
-    &:has([data-description]) {
-        align-items: unset;
-    }
-
-    // this media query targets touch devices
-    @media (any-pointer: coarse) {
-        min-height: var(--spacing-sizing-12);
-    }
-
-    [data-control],
-    [data-label],
-    [data-description] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: start;
-    }
-
-    [data-label] {
-        color: var(--foreground-neutral-on-surface);
-        font: var(--labels-base);
-    }
-
-    [data-description] {
-        grid-column-start: 2;
-        font: var(--body-small);
-        color: var(--foreground-neutral-on-surface-variant-01);
-    }
-
-    &:not([aria-disabled]) {
-        [data-pseudo='focus'] &,
-        &:focus-visible,
-        &:has(*:focus-visible) {
-            outline: var(--stroke-neutral-focus) 2px solid;
-        }
-    }
-
-    &[aria-disabled] {
-        cursor: not-allowed;
-
-        [data-label] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-
-        [data-description] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
+[data-bspk-owner='toggle-option'] {
+    align-items: start;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Tooltip/Tooltip.tsx

@@ -44,13 +44,9 @@ export type TooltipProps = {
  *     import { Tooltip } from '@bspk/ui/Tooltip';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 {(triggerProps) => <Button {...triggerProps}>Click me</Button>}
- *             </Tooltip>
- *         );
- *     }
+ *     <Tooltip label="I explain what this button does" placement="top">
+ *         {(triggerProps) => <Button {...triggerProps}>Click me</Button>}
+ *     </Tooltip>;
  *
  * @name Tooltip
  * @phase UXReview

package/src/components/Tooltip/TooltipExample.tsx

@@ -1,17 +1,29 @@
 import { TooltipProps } from './Tooltip';
-import { Button } from '-/components/Button';
 import { ComponentExample } from '-/utils/demo';
 
 export const TooltipExample: ComponentExample<TooltipProps> = {
-    render: ({ props: state, Component }) => {
-        return (
-            <Component
-                {...state}
-                label={`Hover over me ${state.label || ''}`}
-                placement={[state.placement].flat()[0] || 'top'}
-            >
-                {(triggerProps) => <Button {...triggerProps} label="Hover over me" variant="secondary" />}
-            </Component>
-        );
+    defaultState: {
+        children: (triggerProps) => <span {...triggerProps}>Hover me</span>,
+    },
+    presets: [
+        {
+            label: 'Long Label Tooltip',
+            propState: {
+                label: 'This is a longer tooltip label to demonstrate how the tooltip handles more content.',
+                placement: 'top',
+                children: (triggerProps) => <span {...triggerProps}>Long Tooltip Label</span>,
+            },
+        },
+        {
+            label: 'No Label',
+            propState: {
+                label: '',
+                placement: 'top',
+                children: (triggerProps) => <span {...triggerProps}>No Label</span>,
+            },
+        },
+    ],
+    render: ({ props, Component }) => {
+        return <Component {...props}>{props.children || (() => <span>No Hover</span>)}</Component>;
     },
 };

package/src/components/Truncated/Truncated.tsx

@@ -1,4 +1,3 @@
-import './truncated.scss';
 import { ElementType } from 'react';
 import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { useTruncatedText } from '-/hooks/useTruncatedText';
@@ -45,7 +44,7 @@ export function Truncated<As extends ElementType = ElementType>({
     const span = (triggerProps: TooltipTriggerProps) => (
         <span
             {...props}
-            data-bspk-utility="truncated"
+            data-truncated
             ref={(node) => setElement(node)}
             {...triggerProps}
             role={isTruncated ? 'note' : props.role}

package/src/components/Txt/Txt.tsx

@@ -49,9 +49,7 @@ export type TxtProps<As extends ElementType = ElementType> = {
  * @example
  *     import { Txt } from '@bspk/ui/Txt';
  *
- *     function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
+ *     <Txt>Example Txt</Txt>;
  *
  * @name Txt
  * @phase UXReview

package/src/components/UIProvider/AriaLiveMessageHandler.tsx

@@ -3,8 +3,10 @@ import { useEventListener } from '-/hooks/useAddEventListener';
 import { useTimeout } from '-/hooks/useTimeout';
 import { AriaLiveMessage } from '-/utils/uiContext';
 
+const CUSTOM_EVENT_NAME = 'bspk-aria-live';
+
 export function sendAriaLiveMessage(message: string, live: 'assertive' | 'polite' = 'polite') {
-    document.dispatchEvent(new CustomEvent('aria-live', { detail: { message, live } }));
+    document.dispatchEvent(new CustomEvent(CUSTOM_EVENT_NAME, { detail: { message, live } }));
 }
 
 /**
@@ -24,7 +26,7 @@ export function AriaLiveMessageHandler() {
     const timeout = useTimeout();
 
     useEventListener(
-        'aria-live',
+        CUSTOM_EVENT_NAME,
         (event: CustomEvent) => {
             const { message, live } = event.detail;
             // Clear any existing message to ensure that screen readers read the new message

package/src/components/UIProvider/UIProvider.tsx

@@ -22,7 +22,6 @@ export type UIProviderProps = {
  * This provider should wrap the root of your application to ensure that all components have access to the UI context.
  *
  * @name UIProvider
- *
  * @phase Utility
  */
 export function UIProvider({ children }: UIProviderProps) {

package/src/hooks/useAddEventListener.ts

@@ -2,15 +2,13 @@ import { useRef } from 'react';
 
 import { useIsomorphicEffect } from './useIsomorphicEffect';
 
-export type CustomEventName = 'aria-live';
-
 export function useEventListener<
     KW extends keyof WindowEventMap,
     KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
     KM extends keyof MediaQueryListEventMap,
     T extends Document | HTMLElement | MediaQueryList | SVGAElement | Window = HTMLElement,
 >(
-    eventName: CustomEventName | KH | KM | KW,
+    eventName: KH | KM | KW | string,
     handler: (
         event:
             | Event