@bspk/ui 1.3.3 → 1.3.4

package/src/components/Switch/Switch.rtl.test.tsx

@@ -2,7 +2,9 @@ import { Switch } from './Switch';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const TestBed = () => <Switch aria-label="Example aria-label" checked name="Example name" onChange={() => {}} />;
+const TestBed = () => (
+    <Switch aria-label="Example aria-label" checked name="example-name" onChange={() => {}} value="whoops" />
+);
 
 describe('Switch (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));

package/src/components/Switch/Switch.tsx

@@ -2,7 +2,7 @@ import './switch.scss';
 import { ChangeEvent } from 'react';
 import { CommonProps } from '-/types/common';
 
-export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
+export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
     /**
      * Marks the control as checked.
      *
@@ -22,6 +22,8 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'valu
      * @default false
      */
     readOnly?: boolean;
+    /** The value of the switch. */
+    value: string;
 };
 
 /**
@@ -33,13 +35,13 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'valu
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
  *             <Switch
  *                 aria-label="Example aria-label"
- *                 name="Example name"
+ *                 name="example-name"
  *                 onChange={setIsChecked}
  *                 checked={isChecked}
  *             />

package/src/components/SwitchOption/SwitchOption.rtl.test.tsx

@@ -2,7 +2,9 @@ import { SwitchOption } from './SwitchOption';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const TestBed = () => <SwitchOption checked label="Example label" name="Example name" onChange={() => {}} />;
+const TestBed = () => (
+    <SwitchOption checked label="Example label" name="example-name" onChange={() => {}} value="whoops" />
+);
 
 describe('SwitchOption (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));

package/src/components/SwitchOption/SwitchOption.tsx

@@ -17,7 +17,7 @@ export function SwitchOption({ label: labelProp, description, ...checkboxProps }
 
     return (
         label && (
-            <ToggleOption data-bspk="switch-option" description={description} label={label}>
+            <ToggleOption data-bspk-owner="switch-option" description={description} label={label}>
                 <Switch {...checkboxProps} aria-label={ariaLabel} />
             </ToggleOption>
         )

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';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -49,7 +49,7 @@ export function TabGroup({
     showTrail = false,
     ...containerProps
 }: ElementProps<TabGroupProps, 'ul'>) {
-    if (!Array.isArray(options) || options.length < 2) return <></>;
+    if (!Array.isArray(options) || options.length < 2) return null;
     return (
         <TabList
             data-bspk="tab-group"

package/src/components/TabList/TabList.tsx

@@ -92,8 +92,11 @@ export type TabListProps<O extends TabOption = TabOption> = {
      */
     size?: TabSize;
     /**
-     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
-     * content.
+     * Determines how the tab options use horizontal space.
+     *
+     * If set to 'fill', options expand to fill the container's width.
+     *
+     * If set to 'hug', options only take up as much space as the content requires.
      *
      * @default hug
      */
@@ -124,7 +127,7 @@ export type TabListProps<O extends TabOption = TabOption> = {
  *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -160,7 +163,7 @@ export function TabList({
     const options = useIds(`tab-list-${id}`, optionsProp);
 
     const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
-        ids: options.map((opt) => opt.id),
+        ids: options.filter((o) => !o.disabled).map((o) => o.id),
         defaultActiveId: options.find((opt) => opt.value === valueProp)?.id,
     });
 
@@ -177,6 +180,14 @@ export function TabList({
         if (!item.disabled) onChange(item.value);
     };
 
+    // ensure an option is always focusable
+    const focusableOption = useMemo(
+        () =>
+            options.find((item) => (activeElementId ? activeElementId === item.id : item.value === value)) ||
+            options[0],
+        [activeElementId, options, value],
+    );
+
     return (
         <ul
             {...containerProps}
@@ -208,7 +219,6 @@ export function TabList({
                 const isSelected = item.value === value;
                 const icon = isSelected ? item.iconSelected : item.icon;
                 const isActive = (activeElementId && activeElementId === item.id) || undefined;
-                const focusable = (isSelected && !activeElementId) || isActive;
 
                 return (
                     <Fragment key={item.id}>
@@ -225,7 +235,7 @@ export function TabList({
                                     id={item.id}
                                     onClick={item.disabled ? undefined : handleClick(item)}
                                     role="tab"
-                                    tabIndex={focusable ? 0 : -1}
+                                    tabIndex={focusableOption.id === item.id ? 0 : -1}
                                 >
                                     {icon && <span aria-hidden="true">{icon}</span>}
                                     {!iconsOnly && <Truncated data-label>{item.label}</Truncated>}

package/src/components/Tag/Tag.tsx

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

package/src/components/Textarea/Textarea.rtl.test.tsx

@@ -3,7 +3,7 @@ import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
 const TestBed = () => (
-    <Textarea aria-label="Example label" name="Example name" onChange={() => {}} value="text value" />
+    <Textarea aria-label="Example label" name="example-name" onChange={() => {}} value="text value" />
 );
 
 describe('Textarea (RTL)', () => {

package/src/components/Textarea/Textarea.tsx

@@ -1,65 +1,45 @@
 import './textarea.scss';
 import { ChangeEvent, useRef } from 'react';
-import { useId } from '-/hooks/useId';
-import { CommonProps, FormFieldControlProps, SetRef } from '-/types/common';
+import { useFieldInit } from '-/components/Field';
+import { FieldControlProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly'> &
-    FormFieldControlProps & {
-        /**
-         * Callback when the value of the field changes.
-         *
-         * @type (next: String, Event) => void
-         * @required
-         */
-        onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
-        /**
-         * The text size of the field.
-         *
-         * @default medium
-         */
-        textSize?: 'large' | 'medium' | 'small';
-        /**
-         * The value of the field.
-         *
-         * @type multiline
-         */
-        value?: string;
-        /**
-         * The textarea control name of the field.
-         *
-         * @required
-         */
-        name: string;
-        /** The ref of the field. */
-        innerRef?: SetRef<HTMLTextAreaElement>;
-        /** The placeholder of the field. */
-        placeholder?: string;
-        /**
-         * The maximum number of characters that the field will accept.
-         *
-         * @minimum 1
-         */
-        maxLength?: number;
-        /**
-         * The minimum number of rows that the textarea will show.
-         *
-         * @default 3
-         * @minimum 3
-         * @maximum 10
-         */
-        minRows?: number;
-        /**
-         * The maximum number of rows that the textarea will show.
-         *
-         * When set the textarea will automatically adjust its height to fit the content up to this limit.
-         *
-         * @default 10
-         * @minimum 3
-         * @maximum 10
-         */
-        maxRows?: number;
-    };
+export type TextareaProps = FieldControlProps<string, ChangeEvent<HTMLTextAreaElement>> & {
+    /**
+     * The text size of the field.
+     *
+     * @default medium
+     */
+    textSize?: 'large' | 'medium' | 'small';
+    /** The ref of the field. */
+    innerRef?: SetRef<HTMLTextAreaElement>;
+    /** The placeholder of the field. */
+    placeholder?: string;
+    /**
+     * The maximum number of characters that the field will accept.
+     *
+     * @minimum 1
+     */
+    maxLength?: number;
+    /**
+     * The minimum number of rows that the textarea will show.
+     *
+     * @default 3
+     * @minimum 3
+     * @maximum 10
+     */
+    minRows?: number;
+    /**
+     * The maximum number of rows that the textarea will show.
+     *
+     * When set the textarea will automatically adjust its height to fit the content up to this limit.
+     *
+     * @default 10
+     * @minimum 3
+     * @maximum 10
+     */
+    maxRows?: number;
+};
 
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
@@ -68,20 +48,33 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'inva
  * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
  * remaining below the limit.
  *
+ * For a more complete example with field usage, see the TextareaField component.
+ *
  * @example
  *     import { useState } from 'react';
  *     import { Textarea } from '@bspk/ui/Textarea';
  *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
+ *     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>
+ *         );
+ *     }
+ *
+ *     function ExampleStandalone() {
+ *         const [value, setValue] = useState('');
  *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
+ *         return <Textarea aria-label="Enter text" name="example-name" onChange={setValue} value={value} />;
  *     }
  *
  * @element
  *
  * @name Textarea
- * @phase Utility
+ * @phase UXReview
  */
 export function Textarea({
     invalid: invalidProp,
@@ -89,18 +82,24 @@ export function Textarea({
     textSize = 'medium',
     value = '',
     name,
-    'aria-label': ariaLabel,
     innerRef,
     placeholder,
     id: idProp,
     minRows = 4,
     maxRows = 10,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
+    required = false,
+    readOnly,
+    disabled,
+    'aria-label': ariaLabel,
     ...otherProps
 }: TextareaProps) {
-    const id = useId(idProp);
-    const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
 
     const onInput = () => {
         const target = textareaElement.current;
@@ -115,6 +114,9 @@ export function Textarea({
     return (
         <div
             data-bspk="textarea"
+            data-disabled={disabled || undefined}
+            data-invalid={invalid || undefined}
+            data-read-only={readOnly || undefined}
             data-size={textSize}
             style={cssWithVars({
                 '--min-rows': minRows,
@@ -126,7 +128,8 @@ export function Textarea({
                 aria-describedby={ariaDescribedBy || undefined}
                 aria-errormessage={ariaErrorMessage || undefined}
                 aria-invalid={invalid || undefined}
-                aria-label={ariaLabel}
+                aria-label={ariaLabel || undefined}
+                disabled={disabled}
                 id={id}
                 name={name}
                 onBlur={(event) => {
@@ -136,6 +139,7 @@ export function Textarea({
                 onChange={(event) => onChange(event.target.value, event)}
                 onInput={onInput}
                 placeholder={placeholder}
+                readOnly={readOnly}
                 ref={(node) => {
                     innerRef?.(node);
                     textareaElement.current = node;

package/src/components/Textarea/textarea.scss

@@ -9,6 +9,8 @@
     border: 1px solid var(--border-color);
     border-radius: var(--radius-sm);
     overflow: hidden;
+    color: var(--foreground-neutral-on-surface);
+    background-color: var(--surface-neutral-t1-base);
 
     --border-color: var(--stroke-neutral-base);
 
@@ -64,32 +66,52 @@
         }
 
         resize: none;
-        color: var(--foreground-neutral-on-surface);
-        background-color: var(--surface-neutral-t1-base);
+        color: inherit;
+        background-color: inherit;
+        outline: none;
+    }
 
-        &:focus-within {
-            outline: none;
-            color: var(--foreground-neutral-on-surface);
-        }
+    &:hover:not(:focus-within) {
+        background:
+            linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &:active:not(:focus-within) {
+        background:
+            linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &[data-readonly] {
+        --border-color: var(--stroke-neutral-disabled-light);
+
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
 
-        &:disabled {
-            pointer-events: none;
-            background: 
-    // multiple colors
+    &[data-disabled],
+    &:has([data-main-input][disabled]) {
+        --border-color: var(--stroke-neutral-disabled-light);
 
-                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        & > * {
             color: var(--foreground-neutral-disabled-on-surface);
         }
+    }
 
-        &:read-only {
-            background: 
-    // multiple colors
+    &[data-invalid] {
+        --border-color: var(--status-error);
+    }
 
-                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
-                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
-            cursor: not-allowed;
-        }
+    &:focus-within {
+        --border-color: var(--stroke-neutral-focus);
+
+        outline: 1px solid var(--stroke-neutral-focus);
     }
 }
 

package/src/components/TextareaField/TextareaField.rtl.test.tsx

@@ -1,24 +1,17 @@
-import { TextareaField } from './TextareaField';
+import { TextareaField } from '.';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
 const TestBed = () => (
-    <TextareaField
-        aria-label="Example label"
-        controlId="1"
-        label="Example label"
-        name="Example name"
-        onChange={() => {}}
-        value="text value"
-    />
+    <TextareaField label="Example field label" name="example-field-name" onChange={() => {}} value="" />
 );
 
 describe('TextareaField (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
 
     it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
+        const { getAllByLabelText } = render(<TestBed />);
 
-        expect(getByLabelText('Example label')).toBeInTheDocument();
+        expect(getAllByLabelText('Example field label')[0]).toBeInTheDocument();
     });
 });

package/src/components/TextareaField/TextareaField.tsx

@@ -1,87 +1,22 @@
-import { FormFieldWrapProps, FormField } from '-/components/FormField';
-import { TextareaProps, Textarea } from '-/components/Textarea';
-import { Txt } from '-/components/Txt';
-import { tryIntParse } from '-/utils/tryIntPsrse';
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Textarea, TextareaProps } from '-/components/Textarea';
 
-export type TextareaFieldProps = FormFieldWrapProps<TextareaProps> & {
-    /**
-     * Whether the character count should be displayed.
-     *
-     * @default true
-     */
-    characterCount?: boolean;
-};
+export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
 
 /**
- * A component that allows users to input large amounts of text that could span multiple lines.
+ * A field wrapper for the Textarea component.
  *
  * This component takes properties from the FormField and Textarea components.
  *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
  * @name TextareaField
  * @phase UXReview
+ *
+ * @generated
  */
-export function TextareaField({
-    label,
-    errorMessage,
-    helperText,
-    controlId,
-    required,
-    invalid,
-    characterCount,
-    ...inputProps
-}: TextareaFieldProps) {
-    const maxLength = tryIntParse(inputProps.maxLength) || -1;
-
+export function TextareaField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: TextareaFieldProps) {
     return (
-        <FormField
-            controlId={controlId}
-            data-bspk="textarea-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={
-                // If characterCount is falsey, we don't want to show the labelTrailing
-                characterCount && (
-                    <Txt
-                        style={{
-                            color: 'var(--foreground-neutral-on-surface-variant-02)',
-                        }}
-                        variant="body-small"
-                    >
-                        {`${inputProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}`}
-                    </Txt>
-                )
-            }
-            required={required}
-        >
-            {(fieldProps) => (
-                <Textarea
-                    //
-                    {...inputProps}
-                    {...fieldProps}
-                    invalid={invalid}
-                />
-            )}
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <Textarea {...controlProps} />
         </FormField>
     );
 }

package/src/components/{TimeInput → TimePicker}/Listbox.tsx

@@ -1,4 +1,4 @@
-import { TimeInputType } from './Segment';
+import { TimePickerType } from './Segment';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { getElementById } from '-/utils/dom';
 import { handleKeyDown } from '-/utils/handleKeyDown';
@@ -9,15 +9,15 @@ type Option = {
     label: string;
 };
 
-type TimeInputListboxProps = {
+type TimePickerListboxProps = {
     options: Option[];
     selectedValue?: string;
-    type: TimeInputType;
+    type: TimePickerType;
     onSelect?: (value: string) => void;
     onTab?: (e: React.KeyboardEvent) => void;
 };
 
-export function TimeInputListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimeInputListboxProps) {
+export function TimePickerListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimePickerListboxProps) {
     const { activeElementId, arrowKeyCallbacks } = useArrowNavigation({
         ids: options.map((option) => option.id),
         defaultActiveId: (options.find((option) => option.value === selectedValue) || options[0])?.id || null,
@@ -31,7 +31,7 @@ export function TimeInputListbox({ options, selectedValue, type: kind, onSelect,
         <div
             //aria-activedescendant={activeElementId || undefined}
             aria-label={`Select ${kind}`}
-            data-bspk="time-input-listbox"
+            data-bspk="time-picker-listbox"
             data-scroll-column={kind}
             data-type={kind}
             data-visible={true}

package/src/components/{TimeInput → TimePicker}/Segment.tsx

@@ -7,25 +7,27 @@ export const HOUR_BOUNDS = { min: 1, max: 12 } as const;
 
 export const NUMBER_PLACEHOLDER = '--' as const;
 
-export type TimeInputType = 'hours' | 'meridiem' | 'minutes';
+export type TimePickerType = 'hours' | 'meridiem' | 'minutes';
 
-type TimeInputSegmentProps<T extends string> = {
+type TimePickerSegmentProps<T extends string> = {
     disabled?: boolean;
     name: string;
     readOnly?: boolean;
     value?: T;
-    type: TimeInputType;
+    type: TimePickerType;
     onChange: (value: T | null) => void;
+    setRef?: (element: HTMLElement | null) => void;
 };
 
-export function TimeInputSegment<T extends string>({
+export function TimePickerSegment<T extends string>({
     disabled,
     name,
     readOnly,
     value: valueProp,
     type: kind,
     onChange,
-}: TimeInputSegmentProps<T>) {
+    setRef,
+}: TimePickerSegmentProps<T>) {
     const ref = useRef<HTMLElement | null>(null);
 
     const selectAll = (element: HTMLElement | null = ref.current) => {
@@ -198,6 +200,7 @@ export function TimeInputSegment<T extends string>({
                 if (!element) return;
                 ref.current = element;
                 element.textContent = valueToContent(valueProp);
+                setRef?.(element);
             }}
             role="spinbutton"
             spellCheck="false"