@bspk/ui 1.1.33 → 1.2.0

package/src/components/Tag/TagExample.tsx

@@ -0,0 +1,16 @@
+import { TagProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const TagExample: ComponentExample<TagProps> = {
+    presets: [
+        {
+            label: 'Long Label',
+            propState: {
+                label: 'Hello, this is a very long tag label that should be truncated if it exceeds the container width.',
+                color: 'purple',
+                size: 'small',
+                variant: 'flat',
+            },
+        },
+    ],
+};

package/src/components/Tag/tag.scss

@@ -1,24 +1,19 @@
 [data-bspk='tag'] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: fit-content;
+    display: inline-flex;
+    align-items: center;
     position: relative;
     padding: 0 var(--spacing-sizing-03);
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     color: var(--foreground) !important;
     background: var(--background);
     font: unset;
-    text-decoration: unset;
-    white-space: nowrap;
-    pointer-events: none;
-
-    &[data-wrap] {
-        height: auto;
-    }
+    max-width: 200px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    width: fit-content;
 
     &[data-variant='pill'] {
-        border-radius: var(--radius-circular);
+        border-radius: var(--radius-full);
     }
 
     &[data-variant='corner-wrap'] {

package/src/components/TextField/TextField.tsx

@@ -1,25 +1,7 @@
-import { FormFieldProps, FormField } from '-/components/FormField';
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
 import { TextInputProps, TextInput } from '-/components/TextInput';
 
-export type TextFieldProps = Pick<
-    TextInputProps,
-    | 'autoComplete'
-    | 'disabled'
-    | 'errorMessage'
-    | 'inputRef'
-    | 'invalid'
-    | 'leading'
-    | 'name'
-    | 'onChange'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'trailing'
-    | 'type'
-    | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing'>;
+export type TextFieldProps = FormFieldWrapProps<TextInputProps>;
 
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line.
@@ -45,9 +27,9 @@ export type TextFieldProps = Pick<
  *     }
  *
  * @name TextField
- * @phase DesignReview
+ * @phase UXReview
  */
-function TextField({
+export function TextField({
     label,
     errorMessage,
     helperText,
@@ -63,7 +45,7 @@ function TextField({
             data-bspk="text-field"
             errorMessage={errorMessage}
             helperText={helperText}
-            invalid={!inputProps.readOnly && !inputProps.disabled && invalid}
+            invalid={invalid}
             label={label}
             labelTrailing={labelTrailing}
             required={required}
@@ -74,6 +56,7 @@ function TextField({
                     {...fieldProps}
                     aria-label={label}
                     id={controlId}
+                    invalid={invalid}
                     required={required}
                     value={inputProps.value ?? ''}
                 />
@@ -82,8 +65,4 @@ function TextField({
     );
 }
 
-TextField.bspkName = 'TextField';
-
-export { TextField };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextInput/TextInput.tsx

@@ -1,8 +1,8 @@
 import { SvgCancel } from '@bspk/icons/Cancel';
-import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
+import { ChangeEvent, HTMLInputTypeAttribute, ReactNode } from 'react';
 
-import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '-';
 import { useId } from '-/hooks/useId';
+import { CommonProps, ElementProps, FormFieldControlProps, SetRef } from '-/types/common';
 
 import './text-input.scss';
 
@@ -13,46 +13,57 @@ export const DEFAULT = {
     autoComplete: 'off',
 } as const;
 
+type TextInputBaseProps = {
+    /**
+     * Callback when the value of the field changes.
+     *
+     * @required
+     */
+    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
+    /** The ref of the container. */
+    containerRef?: SetRef<HTMLDivElement>;
+    /** The ref of the input. */
+    inputRef?: SetRef<HTMLInputElement>;
+    /**
+     * The trailing element to display in the field.
+     *
+     * @exampleType string
+     */
+    trailing?: ReactNode;
+    /**
+     * The leading element to display in the field.
+     *
+     * @exampleType string
+     */
+    leading?: ReactNode;
+    /** The placeholder of the field. */
+    placeholder?: string;
+    /**
+     * The type of the input.
+     *
+     * @default text
+     */
+    type?: Extract<HTMLInputTypeAttribute, 'number' | 'password' | 'text'>;
+    /**
+     * Specifies if user agent has any permission to provide automated assistance in filling out form field values
+     *
+     * @default off
+     */
+    autoComplete?: '' | 'off' | 'on';
+    /**
+     * Specifies if the clear button should be shown. This should almost always be true, but can be set to false.
+     *
+     * @default true
+     */
+    showClearButton?: boolean;
+};
+
 export type TextInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
+    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'owner' | 'readOnly' | 'required' | 'size' | 'value'
 > &
-    InvalidPropsLibrary & {
-        /**
-         * Callback when the value of the field changes.
-         *
-         * @required
-         */
-        onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
-        /** The ref of the container. */
-        containerRef?: SetRef<HTMLDivElement>;
-        /** The ref of the input. */
-        inputRef?: SetRef<HTMLInputElement>;
-        /**
-         * The trailing element to display in the field.
-         *
-         * @exampleType string
-         */
-        trailing?: ReactNode;
-        /**
-         * The leading element to display in the field.
-         *
-         * @exampleType string
-         */
-        leading?: ReactNode;
-        /** The placeholder of the field. */
-        placeholder?: string;
-        /**
-         * The type of the input.
-         *
-         * @default text
-         */
-        type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
-        /**
-         * Specifies if user agent has any permission to provide automated assistance in filling out form field values
-         *
-         * @default off
-         */
-        autoComplete?: HTMLInputAutoCompleteAttribute;
+    FormFieldControlProps &
+    TextInputBaseProps & {
+        inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof TextInputBaseProps>;
     };
 
 /**
@@ -72,9 +83,9 @@ export type TextInputProps = CommonProps<
  * @element
  *
  * @name TextInput
- * @phase DesignReview
+ * @phase Utility
  */
-function TextInput({
+export function TextInput({
     invalid: invalidProp,
     onChange,
     size = DEFAULT.size,
@@ -92,8 +103,13 @@ function TextInput({
     disabled,
     autoComplete = DEFAULT.autoComplete,
     containerRef,
-    errorMessage,
-    ...otherProps
+    showClearButton = true,
+    owner,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+
+    inputProps,
+    ...props
 }: ElementProps<TextInputProps, 'div'>) {
     const id = useId(idProp);
 
@@ -101,19 +117,23 @@ function TextInput({
 
     return (
         <div
+            {...props}
             data-bspk="text-input"
+            data-bspk-owner={owner || undefined}
+            data-clear-hidden={showClearButton === false || undefined}
             data-disabled={disabled || undefined}
             data-empty={!value.toString().length || undefined}
             data-invalid={invalid || undefined}
             data-readonly={readOnly || undefined}
-            data-required={required || undefined}
             data-size={size}
             ref={containerRef}
-            {...otherProps}
         >
             {leading && <span data-leading>{leading}</span>}
+
             <input
-                aria-errormessage={errorMessage || undefined}
+                {...inputProps}
+                aria-describedby={ariaDescribedBy || undefined}
+                aria-errormessage={ariaErrorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 autoComplete={autoComplete}
@@ -131,15 +151,13 @@ function TextInput({
                 value={value || ''}
             />
             {trailing && <span data-trailing>{trailing}</span>}
-            <button aria-label="clear" data-clear onClick={() => onChange('')}>
-                <SvgCancel />
-            </button>
+            {showClearButton !== false && (
+                <button aria-label="clear" data-clear onClick={() => onChange('')}>
+                    <SvgCancel />
+                </button>
+            )}
         </div>
     );
 }
 
-TextInput.bspkName = 'TextInput';
-
-export { TextInput };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextInput/TextInputExample.tsx

@@ -1,8 +1,8 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { TextInputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const TextInputExample: ComponentExample<TextInputProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
     presets: [
         {
             label: 'Currency',

package/src/components/TextInput/text-input.scss

@@ -6,7 +6,7 @@
     background-color: var(--surface-neutral-t1-base);
     border: solid 1px var(--border-color);
     height: var(--field-height);
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     padding: 0 0 0 var(--field-padding);
     gap: var(--spacing-sizing-01);
     width: 100%;
@@ -128,7 +128,8 @@
     &:not(:focus-within),
     &[data-empty],
     &[data-readonly],
-    &[data-disabled] {
+    &[data-disabled],
+    &[data-clear-hidden] {
         padding-right: var(--field-padding);
 
         button[data-clear] {

package/src/components/Textarea/Textarea.tsx

@@ -1,8 +1,9 @@
 import { ChangeEvent, useRef } from 'react';
 
-import { CommonProps, InvalidPropsLibrary, SetRef } from '-';
 import { useId } from '-/hooks/useId';
+import { CommonProps, FormFieldControlProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
+
 import './textarea.scss';
 
 const DEFAULT = {
@@ -11,8 +12,8 @@ const DEFAULT = {
     textSize: 'medium',
 } as const;
 
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> &
-    InvalidPropsLibrary & {
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly'> &
+    FormFieldControlProps & {
         /**
          * Callback when the value of the field changes.
          *
@@ -88,9 +89,9 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
  * @element
  *
  * @name Textarea
- * @phase DesignReview
+ * @phase Utility
  */
-function Textarea({
+export function Textarea({
     invalid: invalidProp,
     onChange,
     textSize = DEFAULT.textSize,
@@ -102,7 +103,8 @@ function Textarea({
     id: idProp,
     minRows: minRowsProp = DEFAULT.minRows,
     maxRows: maxRowsProp = DEFAULT.maxRows,
-    errorMessage,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...otherProps
 }: TextareaProps) {
     const id = useId(idProp);
@@ -132,7 +134,8 @@ function Textarea({
         >
             <textarea
                 {...otherProps}
-                aria-errormessage={errorMessage || undefined}
+                aria-describedby={ariaDescribedBy || undefined}
+                aria-errormessage={ariaErrorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 aria-label={ariaLabel}
                 id={id}
@@ -157,8 +160,4 @@ function Textarea({
     );
 }
 
-Textarea.bspkName = 'Textarea';
-
-export { Textarea };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Textarea/TextareaExample.tsx

@@ -1,5 +1,6 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { TextareaProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
-export const TextareaExample: ComponentExample<TextareaProps> = {};
+export const TextareaExample: ComponentExample<TextareaProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
+};

package/src/components/Textarea/textarea.scss

@@ -7,7 +7,7 @@
     display: grid;
     width: 100%;
     border: 1px solid var(--border-color);
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     overflow: hidden;
 
     --border-color: var(--stroke-neutral-base);

package/src/components/TextareaField/TextareaField.tsx

@@ -1,17 +1,17 @@
-import { FormFieldProps, FormField } from '-/components/FormField';
+import { FormFieldWrapProps, FormField } from '-/components/FormField';
 import { TextareaProps, Textarea } from '-/components/Textarea';
 import { Txt } from '-/components/Txt';
 import { tryIntParse } from '-/utils/tryIntPsrse';
 
-export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'helperText' | 'label'> &
-    TextareaProps & {
-        /**
-         * Whether the character count should be displayed.
-         *
-         * @default true
-         */
-        characterCount?: boolean;
-    };
+export type TextareaFieldProps = FormFieldWrapProps<TextareaProps> & {
+    /**
+     * Whether the character count should be displayed.
+     *
+     * @default true
+     */
+    characterCount?: boolean;
+};
+
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
  *
@@ -37,36 +37,28 @@ export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'helperText'
  *     }
  *
  * @name TextareaField
- * @phase DesignReview
+ * @phase UXReview
  */
-function TextareaField({
+export function TextareaField({
     label,
-    errorMessage: errorMessageProp,
     helperText,
-    controlId: id,
-    onChange,
-    maxLength: maxLengthProp,
-    invalid,
-    readOnly,
-    disabled,
+    controlId,
     required,
-    characterCount = true,
-    ...textareaProps
+    invalid,
+    characterCount,
+    ...inputProps
 }: TextareaFieldProps) {
-    const maxLength = tryIntParse(maxLengthProp) || -1;
-    const errorMessage = (!readOnly && !disabled && errorMessageProp) || undefined;
-
-    if (typeof onChange !== 'function') return null;
+    const maxLength = tryIntParse(inputProps.maxLength) || -1;
 
     return (
         <FormField
-            controlId={id}
+            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={{
@@ -74,7 +66,7 @@ function TextareaField({
                         }}
                         variant="body-small"
                     >
-                        {`${textareaProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}`}
+                        {`${inputProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}`}
                     </Txt>
                 )
             }
@@ -82,23 +74,14 @@ function TextareaField({
         >
             {(fieldProps) => (
                 <Textarea
-                    {...textareaProps}
+                    //
+                    {...inputProps}
                     {...fieldProps}
-                    aria-label={textareaProps['aria-label'] || label}
-                    id={id}
                     invalid={invalid}
-                    onChange={(next, event) => {
-                        onChange(next, event);
-                    }}
-                    required={required}
                 />
             )}
         </FormField>
     );
 }
 
-TextareaField.bspkName = 'TextareaField';
-
-export { TextareaField };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TextareaField/TextareaFieldExample.tsx

@@ -1,19 +1,13 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { TextareaFieldProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const TextareaFieldExample: ComponentExample<TextareaFieldProps> = {
     render: ({ Component, props }) => {
         const tooManyCharacters = Boolean(props.value && props.maxLength && props.value?.length > props.maxLength);
 
         const invalid = props.invalid || tooManyCharacters;
+        const errorMessage = tooManyCharacters ? 'Too Many characters' : props.errorMessage || '';
 
-        return (
-            <Component
-                {...props}
-                errorMessage={invalid ? props.errorMessage || 'Too Many characters' : ''}
-                invalid={invalid}
-            />
-        );
+        return <Component {...props} errorMessage={errorMessage} invalid={invalid} />;
     },
 };

package/src/components/TimeInput/Listbox.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState } from 'react';
+import { TimeInputType } from './Segment';
+import { bound } from '-/utils/bound';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollElementIntoView } from '-/utils/scrollElementIntoView';
+
+type TimeInputListboxProps<T> = {
+    options: T[];
+    selectedValue?: T;
+    type: TimeInputType;
+    onSelect?: (value: T) => void;
+    onTab?: (e: React.KeyboardEvent) => void;
+};
+
+export function TimeInputListbox<T>({ options, selectedValue, type: kind, onSelect, onTab }: TimeInputListboxProps<T>) {
+    const [activeIndex, setActiveIndex] = useState<number>(-1);
+    const listRef = useRef<HTMLDivElement | null>(null);
+
+    const handleArrow = (dir: 'down' | 'up') => {
+        return (e: React.KeyboardEvent) => {
+            e.preventDefault();
+            setActiveIndex((prevIndex) => {
+                const next = bound({
+                    num: prevIndex + (dir === 'down' ? 1 : -1),
+                    min: 0,
+                    max: options.length - 1,
+                    rollover: true,
+                });
+                scrollElementIntoView(listRef.current?.children[next] as HTMLElement, listRef.current!);
+                return next;
+            });
+        };
+    };
+
+    return (
+        <div
+            aria-label={`Select ${kind}`}
+            data-scroll-column={kind}
+            onClick={(event) => {
+                const target = event.target as HTMLSpanElement;
+                if (target.dataset.value) onSelect?.(target.dataset.value as T);
+            }}
+            onFocus={() => {
+                if (activeIndex < 0 && options.length > 0)
+                    scrollElementIntoView(listRef.current?.children[activeIndex], listRef.current!);
+            }}
+            onKeyDown={handleKeyDown({
+                ArrowDown: handleArrow('down'),
+                ArrowUp: handleArrow('up'),
+                ArrowLeft: (e) => {
+                    e.preventDefault();
+                    const previousSibling = e.currentTarget.previousElementSibling as HTMLSpanElement;
+                    if (previousSibling) previousSibling.focus();
+                    else (e.currentTarget.parentNode?.lastElementChild as HTMLSpanElement)?.focus();
+                },
+                ArrowRight: (e) => {
+                    e.preventDefault();
+                    const nextSibling = e.currentTarget.nextElementSibling as HTMLSpanElement;
+                    if (nextSibling) nextSibling.focus();
+                    else (e.currentTarget.parentNode?.firstElementChild as HTMLSpanElement)?.focus();
+                },
+                Enter: (e) => {
+                    e.preventDefault();
+                    if (activeIndex >= 0 && activeIndex < options.length) onSelect?.(options[activeIndex]);
+                },
+                Tab: onTab,
+            })}
+            onMouseMove={(event) => {
+                const target = event.target as HTMLSpanElement;
+                setActiveIndex(Number(target.dataset.index));
+                event.currentTarget.focus();
+            }}
+            ref={(node) => {
+                if (!node) return;
+                listRef.current = node;
+            }}
+            role="listbox"
+            tabIndex={0}
+        >
+            {options.map((val, index) => (
+                <span
+                    aria-label={`${val}`.padStart(2, '0')}
+                    aria-selected={`${val}` === `${selectedValue}` || undefined}
+                    data-active={activeIndex === index || undefined}
+                    data-index={index}
+                    data-value={val}
+                    key={`${val}`}
+                    role="option"
+                >
+                    {`${val}`.padStart(2, '0')}
+                </span>
+            ))}
+        </div>
+    );
+}