@bspk/ui 1.3.21 → 1.3.23

package/src/components/SelectField/SelectField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Select, SelectProps } from '-/components/Select';
+import { useId } from '-/hooks/useId';
 
-export type SelectFieldProps = FormFieldControlProps<SelectProps>;
+export type SelectFieldProps = ComposedFieldProps<SelectProps>;
 
 /**
  * A field wrapper for the Select component.
@@ -9,7 +10,7 @@ export type SelectFieldProps = FormFieldControlProps<SelectProps>;
  * This component takes properties from the FormField and Select components.
  *
  * @name SelectField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,22 @@ export function SelectField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: SelectFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
-            <Select {...controlProps} />
-        </FormField>
+            <Select {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/components/Slider/Slider.tsx

@@ -72,8 +72,7 @@ export type SliderProps<Value> = Pick<CommonPropsLibrary, 'disabled' | 'readOnly
  * track.
  *
  * @example
- *     import { Slider } from '@bspk/ui/Slider';
- *     import { useState } from 'react';
+ *     import { Slider } from '-/components/Slider';
  *
  *     () => {
  *         const [value, setValue] = useState(50);

package/src/components/Snackbar/Snackbar.tsx

@@ -83,7 +83,6 @@ export type SnackbarProps = CommonProps<'id'> & {
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
- *     import { useState } from 'react';
  *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
  *     () => {

package/src/components/Switch/Switch.tsx

@@ -26,7 +26,6 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name'>
  * will more often be used in the SwitchOption component.
  *
  * @example
- *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
  *     () => {

package/src/components/TabGroup/TabGroup.tsx

@@ -18,7 +18,6 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  * Navigation tool that organizes content across different screens and views.
  *
  * @example
- *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
  *     () => {

package/src/components/TabList/TabList.tsx

@@ -123,7 +123,6 @@ export type TabListProps<O extends TabOption = TabOption> = {
  * See TabGroup or SegmentedControl for examples.
  *
  * @example
- *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
  *     () => {

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

@@ -6,6 +6,7 @@ ul[data-bspk-utility='tab-list'] {
     list-style: none;
     height: var(--height);
     font: var(--font);
+    width: fit-content; // default to hug content
 
     &[data-width='fill'] {
         align-items: stretch;

package/src/components/Table/table.scss

@@ -5,6 +5,7 @@
     --grey-background: var(--surface-neutral-t2-lowest);
     --icon-size: var(--spacing-sizing-05);
 
+    display: block;
     min-width: 100%;
     overflow: auto hidden;
     border-collapse: separate;
@@ -135,7 +136,7 @@
                         z-index: var(--z-index-focus);
                         inset: 0;
                         outline: solid 2px var(--stroke-neutral-focus);
-                        outline-offset: -2px;
+                        isolation: isolate;
                     }
                 }
             }

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,5 @@
 import './textarea.scss';
 import { ChangeEvent, useRef } from 'react';
-import { useFieldInit } from '-/components/Field';
 import { CommonProps, FieldControlProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
@@ -46,18 +45,15 @@ export type TextareaProps = CommonProps<'size'> &
  * For a more complete example with field usage, see the TextareaField component.
  *
  * @example
- *     import { useState } from 'react';
- *     import { Textarea } from '@bspk/ui/Textarea';
+ *     import { Textarea } from '-/components/Textarea';
  *
  *     () => {
  *         const [value, setValue] = useState<string | undefined>('');
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Textarea</FieldLabel>
- *                     <Textarea name="example-name" onChange={setValue} value={value} />
- *                     <FieldDescription>This is an example textarea field.</FieldDescription>
+ *                 <Field controlId="example-textarea" helperText="This is an example textarea field." label="Textarea">
+ *                     <Textarea id="example-textarea" name="example-name" onChange={setValue} value={value} />
  *                 </Field>
  *             </div>
  *         );
@@ -69,30 +65,24 @@ export type TextareaProps = CommonProps<'size'> &
  * @phase Stable
  */
 export function Textarea({
-    invalid: invalidProp,
+    invalid = false,
     onChange,
     size = 'medium',
     value = '',
     name,
     innerRef,
     placeholder,
-    id: idProp,
+    id,
     minRows = 4,
     maxRows = 10,
     required = false,
     readOnly,
     disabled,
     'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...otherProps
 }: TextareaProps) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
-
     const onInput = () => {
         const target = textareaElement.current;
         if (!target) return;
@@ -137,6 +127,7 @@ export function Textarea({
                     textareaElement.current = node;
                     onInput();
                 }}
+                required={required || undefined}
                 value={value}
                 wrap="hard"
             />

package/src/components/Textarea/TextareaExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Textarea, TextareaProps } from '.';
-import { Field, FieldDescription, FieldLabel } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const TextareaExample: ComponentExample<TextareaProps> = {
@@ -19,10 +19,8 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Example Textarea</FieldLabel>
-                <Textarea name="example-name" onChange={setValue} value={value} />
-                <FieldDescription>This is an example textarea field.</FieldDescription>
+            <Field controlId="example-textarea" helperText="This is an example textarea field." label="Textarea">
+                <Textarea id="example-textarea" name="example-name" onChange={setValue} value={value} />
             </Field>
         </div>
     );

package/src/components/TextareaField/TextareaField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Textarea, TextareaProps } from '-/components/Textarea';
+import { useId } from '-/hooks/useId';
 
-export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
+export type TextareaFieldProps = ComposedFieldProps<TextareaProps>;
 
 /**
  * A field wrapper for the Textarea component.
@@ -9,7 +10,7 @@ export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
  * This component takes properties from the FormField and Textarea components.
  *
  * @name TextareaField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,22 @@ export function TextareaField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: TextareaFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
-            <Textarea {...controlProps} />
-        </FormField>
+            <Textarea {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/components/TimePicker/TimePicker.tsx

@@ -13,11 +13,11 @@ import {
     stringValueToParts,
 } from './utils';
 import { Button } from '-/components/Button';
-import { useFieldInit } from '-/components/Field';
 import { InputProps } from '-/components/Input';
 import { Menu } from '-/components/Menu';
 import { Portal } from '-/components/Portal';
 import { useFloating } from '-/hooks/useFloating';
+import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { ElementProps, FieldControlProps } from '-/types/common';
 import { handleKeyDown } from '-/utils/handleKeyDown';
@@ -31,17 +31,19 @@ export type TimePickerProps = FieldControlProps & Pick<InputProps, 'size'>;
  * For a more complete example with field usage, see the TimePickerField component.
  *
  * @example
- *     import { TimePicker } from '@bspk/ui/TimePicker';
+ *     import { TimePicker } from '-/components/TimePicker';
  *
  *     () => {
  *         const [value, onChange] = useState<string | undefined>('');
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Time</FieldLabel>
- *                     <TimePicker name="time" onChange={onChange} value={value} />
- *                     <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+ *                 <Field
+ *                     controlId="destination-time"
+ *                     helperText="The time picker allows you to select a time."
+ *                     label="Time"
+ *                 >
+ *                     <TimePicker id="destination-time" name="time" onChange={onChange} value={value} />
  *                 </Field>
  *             </div>
  *         );
@@ -54,22 +56,17 @@ export function TimePicker({
     value,
     disabled,
     id: idProp,
-    invalid: invalidProp,
+    invalid = false,
     readOnly,
     name,
     size,
-    required = false,
     onChange: onChangeProp,
     'aria-label': ariaLabel = 'Time picker',
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: ElementProps<TimePickerProps, 'div'>) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const id = useId(idProp);
 
     const menuId = `${id}-time-picker-menu`;
 

package/src/components/TimePicker/TimePickerExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TimePicker, TimePickerProps } from './TimePicker';
-import { Field, FieldLabel, FieldDescription } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const TimePickerExample: ComponentExample<TimePickerProps> = {
@@ -17,10 +17,8 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Time</FieldLabel>
-                <TimePicker name="time" onChange={onChange} value={value} />
-                <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+            <Field controlId="destination-time" helperText="The time picker allows you to select a time." label="Time">
+                <TimePicker id="destination-time" name="time" onChange={onChange} value={value} />
             </Field>
         </div>
     );

package/src/components/TimePickerField/TimePickerField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { TimePicker, TimePickerProps } from '-/components/TimePicker';
+import { useId } from '-/hooks/useId';
 
-export type TimePickerFieldProps = FormFieldControlProps<TimePickerProps>;
+export type TimePickerFieldProps = ComposedFieldProps<TimePickerProps>;
 
 /**
  * A field wrapper for the TimePicker component.
@@ -9,7 +10,7 @@ export type TimePickerFieldProps = FormFieldControlProps<TimePickerProps>;
  * This component takes properties from the FormField and TimePicker components.
  *
  * @name TimePickerField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,22 @@ export function TimePickerField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: TimePickerFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
-            <TimePicker {...controlProps} />
-        </FormField>
+            <TimePicker {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/hooks/useFloating.ts

@@ -79,12 +79,6 @@ export type UseFloatingElements = {
     setFloating: (element: HTMLElement | null) => void;
 };
 
-/**
- *
- *
- * @param param0
- * @returns
- */
 export function useFloating({
     placement = 'bottom-start',
     arrowRef,

package/src/styles/base.scss

@@ -68,93 +68,8 @@ body[data-bspk] {
     color: var(--foreground-neutral-on-surface);
     min-width: 343px;
 
-    a,
-    [data-bspk='link'] {
-        &:not([data-bspk='button'], [data-bspk='list-item']) {
-            color: var(--foreground-link-text-default);
-
-            &:not([disabled]) {
-                &:hover,
-                &[data-pseudo='hover'] {
-                    color: var(--foreground-link-text-default-hovered);
-                }
-
-                &:active,
-                &[data-pseudo='active'] {
-                    color: var(--foreground-link-text-default);
-                    filter: brightness(80%);
-                }
-
-                &:visited,
-                &[data-pseudo='visited'] {
-                    color: var(--foreground-link-text-default-visited);
-                }
-            }
-
-            &[disabled] {
-                pointer-events: none;
-                cursor: text;
-                color: var(--foreground-link-text-default-disabled);
-            }
-        }
-
-        &[data-subtle] {
-            text-decoration: none;
-            color: var(--foreground-neutral-on-surface);
-
-            &:not([disabled]) {
-                &:hover,
-                &[data-pseudo='hover'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-hovered);
-                }
-
-                &:active,
-                &[data-pseudo='active'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-pressed);
-                }
-
-                &:visited,
-                &[data-pseudo='visited'] {
-                    color: var(--foreground-neutral-on-surface);
-                }
-            }
-
-            &[disabled] {
-                pointer-events: none;
-                color: var(--foreground-link-text-subtle-disabled);
-            }
-        }
-
-        &[data-subtle-inverse] {
-            text-decoration: none;
-            color: var(--foreground-neutral-inverse-on-surface);
-
-            &:not([disabled]) {
-                &:hover,
-                &[data-pseudo='hover'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-inverse-hovered);
-                }
-
-                &:active,
-                &[data-pseudo='active'] {
-                    text-decoration: underline;
-                    color: var(--foreground-link-text-subtle-inverse-pressed);
-                }
-
-                &:visited,
-                &[data-pseudo='visited'] {
-                    color: var(--foreground-neutral-on-inverse-surface);
-                }
-            }
-
-            &[disabled] {
-                pointer-events: none;
-                color: var(--foreground-link-text-subtle-inversed-disabled);
-            }
-        }
+    a:not([data-bspk]) {
+        @extend %link;
     }
 }
 
@@ -314,4 +229,111 @@ body[data-bspk] {
     display: none !important;
 }
 
+[data-bspk='link'] {
+    @extend %link;
+}
+
+%link {
+    color: var(--foreground-link-text-default);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-sizing-01);
+    font: var(--labels-base);
+
+    &:not([disabled]) {
+        &:hover,
+        &[data-pseudo='hover'] {
+            color: var(--foreground-link-text-default-hovered);
+        }
+
+        &:active,
+        &[data-pseudo='active'] {
+            color: var(--foreground-link-text-default);
+            filter: brightness(80%);
+        }
+
+        &:visited,
+        &[data-pseudo='visited'] {
+            color: var(--foreground-link-text-default-visited);
+        }
+    }
+
+    &[disabled] {
+        pointer-events: none;
+        cursor: text;
+        color: var(--foreground-link-text-default-disabled);
+    }
+
+    &[data-subtle] {
+        text-decoration: none;
+        color: var(--foreground-neutral-on-surface);
+
+        &:not([disabled]) {
+            &:hover,
+            &[data-pseudo='hover'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-hovered);
+            }
+
+            &:active,
+            &[data-pseudo='active'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-pressed);
+            }
+
+            &:visited,
+            &[data-pseudo='visited'] {
+                color: var(--foreground-neutral-on-surface);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            color: var(--foreground-link-text-subtle-disabled);
+        }
+    }
+
+    &[data-subtle-inverse] {
+        text-decoration: none;
+        color: var(--foreground-neutral-inverse-on-surface);
+
+        &:not([disabled]) {
+            &:hover,
+            &[data-pseudo='hover'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-inverse-hovered);
+            }
+
+            &:active,
+            &[data-pseudo='active'] {
+                text-decoration: underline;
+                color: var(--foreground-link-text-subtle-inverse-pressed);
+            }
+
+            &:visited,
+            &[data-pseudo='visited'] {
+                color: var(--foreground-neutral-on-inverse-surface);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            color: var(--foreground-link-text-subtle-inversed-disabled);
+        }
+    }
+
+    &[data-size='large'] {
+        font: var(--labels-large);
+    }
+
+    &[data-size='small'] {
+        font: var(--labels-small);
+    }
+
+    svg {
+        width: var(--spacing-sizing-05);
+    }
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/types/common.ts

@@ -148,6 +148,7 @@ export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLi
 
 export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;
 
+/** The common properties for all input control components such as Input, TextArea, Select, etc. */
 export type FieldControlProps<
     ValueType = string,
     ChangeContext = ChangeEvent<HTMLElement> | KeyboardEvent | undefined,
@@ -164,6 +165,14 @@ export type FieldControlProps<
      * @required
      */
     onChange: (next: ValueType | undefined, event?: ChangeContext) => void;
+    /*
+     * The aria-describedby attribute for the field control.
+     */
+    'aria-describedby'?: string;
+    /*
+     * The aria-errormessage attribute for the field control.
+     */
+    'aria-errormessage'?: string;
 };
 
 export type Brand =

package/dist/components/Field/FieldDescription.d.ts

@@ -1,9 +0,0 @@
-/**
- * FieldDescription component displays a description associated with a form field.
- *
- * @name FieldDescription
- * @parent Field
- */
-export declare function FieldDescription({ children }: {
-    children?: string;
-}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Field/FieldDescription.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useFieldContext, describedById } from './utils';
-/**
- * FieldDescription component displays a description associated with a form field.
- *
- * @name FieldDescription
- * @parent Field
- */
-export function FieldDescription({ children }) {
-    const { id } = useFieldContext();
-    return children ? (_jsx("p", { "data-bspk": "field-description", id: describedById(id), children: children })) : null;
-}
-//# sourceMappingURL=FieldDescription.js.map

package/dist/components/Field/FieldDescription.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FieldDescription.js","sourceRoot":"","sources":["../../../src/components/Field/FieldDescription.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAyB;IAChE,MAAM,EAAE,EAAE,EAAE,GAAG,eAAe,EAAE,CAAC;IAEjC,OAAO,QAAQ,CAAC,CAAC,CAAC,CACd,yBAAa,mBAAmB,EAAC,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,YACjD,QAAQ,GACT,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC"}

package/dist/components/Field/FieldError.d.ts

@@ -1,11 +0,0 @@
-export type FieldErrorProps = {
-    /** The error message text. */
-    children?: string;
-};
-/**
- * FieldError component displays an error message associated with a form field.
- *
- * @name FieldError
- * @parent Field
- */
-export declare function FieldError({ children }: FieldErrorProps): "" | import("react/jsx-runtime").JSX.Element | undefined;