@bspk/ui 1.3.4 → 1.3.5

package/src/components/CheckboxOption/CheckboxOption.tsx

@@ -1,7 +1,8 @@
 import { CheckboxProps, Checkbox } from '-/components/Checkbox';
 import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
+import { CommonProps } from '-/types/common';
 
-export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
+export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProps<CheckboxProps>;
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -36,6 +37,7 @@ export function CheckboxOption({
     description,
     disabled,
     readOnly,
+    style,
     ...checkboxProps
 }: CheckboxOptionProps) {
     const label = labelProp || description;
@@ -48,6 +50,7 @@ export function CheckboxOption({
                 disabled={disabled}
                 label={label}
                 readOnly={readOnly}
+                style={style}
             >
                 <Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} readOnly={readOnly} />
             </ToggleOption>

package/src/components/DatePickerField/DatePickerField.tsx

@@ -18,10 +18,17 @@ export function DatePickerField({
     helperText,
     labelTrailing,
     errorMessage,
+    style,
     ...controlProps
 }: DatePickerFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <DatePicker {...controlProps} />
         </FormField>
     );

package/src/components/Fab/Fab.tsx

@@ -6,7 +6,7 @@ import { ElementProps } from '-/types/common';
 
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
 
-export type FabProps<As extends ElementType = 'button'> = Pick<
+export type FabProps<As extends ElementType = ElementType> = Pick<
     ButtonProps<As>,
     'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'
 > &
@@ -52,7 +52,7 @@ export type FabProps<As extends ElementType = 'button'> = Pick<
  * @name Fab
  * @phase UXReview
  */
-export function Fab<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<FabProps<As>, As>) {
+export function Fab<As extends ElementType = ElementType>(props: AriaAttributes & ElementProps<FabProps<As>, As>) {
     const {
         size = 'small',
         variant = 'primary',

package/src/components/FormField/FormField.tsx

@@ -1,10 +1,11 @@
 import { ElementType, ReactNode } from 'react';
 import { Field, FieldLabel, FieldDescription, FieldError } from '-/components/Field';
+import { CommonProps } from '-/types/common';
 
 export type FormFieldControlProps<P extends Record<string, unknown>> = Omit<FormFieldProps, 'children'> &
     Omit<P, keyof FormFieldProps>;
 
-export type FormFieldProps<As extends ElementType = ElementType> = {
+export type FormFieldProps<As extends ElementType = ElementType> = CommonProps<'style'> & {
     /** Displays an error message and marks the field as invalid. */
     errorMessage?: string;
     /**
@@ -77,12 +78,21 @@ export type FormFieldProps<As extends ElementType = ElementType> = {
  * @name FormField
  * @phase Utility
  */
-export function FormField({ label, errorMessage, helperText, children, labelTrailing, required, as }: FormFieldProps) {
+export function FormField({
+    label,
+    errorMessage,
+    helperText,
+    children,
+    labelTrailing,
+    required,
+    as,
+    style,
+}: FormFieldProps) {
     const fieldAs = as || 'div';
 
     const labelAs = fieldAs === 'fieldset' ? 'legend' : undefined;
     return (
-        <Field as={fieldAs}>
+        <Field as={fieldAs} style={style}>
             <FieldLabel as={labelAs} labelTrailing={labelTrailing} required={required}>
                 {label}
             </FieldLabel>

package/src/components/InputField/InputField.tsx

@@ -13,9 +13,22 @@ export type InputFieldProps = FormFieldControlProps<InputProps>;
  *
  * @generated
  */
-export function InputField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: InputFieldProps) {
+export function InputField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    style,
+    ...controlProps
+}: InputFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <Input {...controlProps} />
         </FormField>
     );

package/src/components/InputNumberField/InputNumberField.tsx

@@ -18,10 +18,17 @@ export function InputNumberField({
     helperText,
     labelTrailing,
     errorMessage,
+    style,
     ...controlProps
 }: InputNumberFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <InputNumber {...controlProps} />
         </FormField>
     );

package/src/components/InputPhoneField/InputPhoneField.tsx

@@ -18,10 +18,17 @@ export function InputPhoneField({
     helperText,
     labelTrailing,
     errorMessage,
+    style,
     ...controlProps
 }: InputPhoneFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <InputPhone {...controlProps} />
         </FormField>
     );

package/src/components/Layout/Layout.tsx

@@ -2,7 +2,7 @@ import { ElementType, ReactNode } from 'react';
 
 import { ElementProps } from '-/types/common';
 
-export type LayoutProps<As extends ElementType = 'div'> = {
+export type LayoutProps<As extends ElementType = ElementType> = {
     /**
      * The content of the Layout.
      *
@@ -51,7 +51,7 @@ export type LayoutProps<As extends ElementType = 'div'> = {
  * @name Layout
  * @phase Utility
  */
-export function Layout<As extends ElementType = 'div'>({
+export function Layout<As extends ElementType = ElementType>({
     children,
     column,
     gap = '16',

package/src/components/ListItem/ListItem.tsx

@@ -14,7 +14,7 @@ import { Truncated } from '-/components/Truncated';
 import { useId } from '-/hooks/useId';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
 
-export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'active' | 'owner'> &
+export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'active' | 'owner' | 'style'> &
     Pick<AriaAttributes, 'aria-label'> & {
         /**
          * The element type to render as.

package/src/components/Menu/Menu.tsx

@@ -7,7 +7,7 @@ export function menuItemId(menuId: string, index: number) {
     return `menu-${menuId}-item-${index}`;
 }
 
-export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' | 'owner' | 'role'> & {
+export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' | 'owner' | 'role' | 'style'> & {
     /** A ref to the inner div element. */
     innerRef?: SetRef<HTMLDivElement>;
     /**
@@ -29,6 +29,13 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
      * @type ElementType
      */
     as?: As;
+    /**
+     * The width of the menu.
+     *
+     * @type HTMLElement.style.width
+     * @exampleType string
+     */
+    width?: HTMLElement['style']['width'];
 };
 
 /**
@@ -65,6 +72,7 @@ export function Menu({ as, innerRef, id: idProp, children, owner, label, ...prop
             data-bspk-utility="menu"
             id={menuId}
             ref={innerRef}
+            style={{ ...props.style, width: props.width }}
         >
             {children}
         </As>

package/src/components/Menu/MenuExample.tsx

@@ -22,7 +22,7 @@ export const MenuExample: ComponentExampleFn<MenuProps & { style?: unknown; 'dat
             <Component {...props} style={{ padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }}>
                 <ListItem
                     label="Michael Scott"
-                    leading={<Avatar image="/profile2.jpg" name="Michael Scott" />}
+                    leading={<Avatar image="/avatar-01.png" name="Michael Scott" />}
                     subText="michael.scott@email.com"
                 />
                 <Divider inset={2} padding />

package/src/components/PasswordField/PasswordField.tsx

@@ -13,9 +13,22 @@ export type PasswordFieldProps = FormFieldControlProps<PasswordProps>;
  *
  * @generated
  */
-export function PasswordField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: PasswordFieldProps) {
+export function PasswordField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    style,
+    ...controlProps
+}: PasswordFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <Password {...controlProps} />
         </FormField>
     );

package/src/components/ProgressCircle/progress-circle.scss

@@ -6,6 +6,8 @@
     gap: var(--spacing-sizing-02);
     align-items: center;
     justify-content: center;
+    width: fit-content;
+    max-width: 100%;
 
     &[data-label-position='top'] {
         flex-direction: column-reverse;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -92,26 +92,24 @@ export function RadioGroup({
             id={id}
             role="radiogroup"
         >
-            <div role="presentation">
-                {options.map(({ label, description, value, ...option }, index) => {
-                    return (
-                        <RadioOption
-                            aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
-                            aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
-                            checked={groupValue === value}
-                            description={description}
-                            disabled={disabled || option.disabled}
-                            invalid={invalid || undefined}
-                            key={`radio-option-${value || index}`}
-                            label={label}
-                            name={name}
-                            onChange={(checked) => checked && onChange(value)}
-                            required={required}
-                            value={value}
-                        />
-                    );
-                })}
-            </div>
+            {options.map(({ label, description, value, ...option }, index) => {
+                return (
+                    <RadioOption
+                        aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
+                        aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
+                        checked={groupValue === value}
+                        description={description}
+                        disabled={disabled || option.disabled}
+                        invalid={invalid || undefined}
+                        key={`radio-option-${value || index}`}
+                        label={label}
+                        name={name}
+                        onChange={(checked) => checked && onChange(value)}
+                        required={required}
+                        value={value}
+                    />
+                );
+            })}
         </div>
     );
 }

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -19,11 +19,12 @@ export function RadioGroupField({
     helperText,
     labelTrailing,
     errorMessage,
+    style,
     ...controlProps
 }: RadioGroupFieldProps) {
     return (
         <Field as="fieldset">
-            <FieldLabel as="legend" labelTrailing={labelTrailing}>
+            <FieldLabel as="legend" labelTrailing={labelTrailing} style={style}>
                 {label}
             </FieldLabel>
             <RadioGroup {...controlProps} />

package/src/components/SearchBar/SearchBar.tsx

@@ -24,7 +24,7 @@ import { useIds } from '-/utils/useIds';
 export type SearchBarOption = Pick<ListItemProps, 'label' | 'leading' | 'trailing'>;
 
 export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = FieldControlProps<string, O> &
-    Pick<InputProps, 'inputRef' | 'size'> &
+    Pick<InputProps, 'inputRef' | 'size' | 'trailing'> &
     ScrollListItemsStyleProps & {
         /**
          * The placeholder of the field.
@@ -110,6 +110,7 @@ export function SearchBar<O extends SearchBarOption>({
     onChange,
     disabled = false,
     scrollLimit,
+    trailing,
 }: SearchBarProps<O>) {
     const id = useId(idProp);
     const menuId = `${id}-menu`;
@@ -215,6 +216,7 @@ export function SearchBar<O extends SearchBarOption>({
                     owner="search-bar"
                     placeholder={placeholder}
                     size={size}
+                    trailing={trailing}
                     value={value}
                 />
             </div>

package/src/components/Select/Select.tsx

@@ -3,7 +3,7 @@ import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { useMemo, KeyboardEvent, MouseEvent } from 'react';
 import { useFieldInit } from '-/components/Field';
 import { ListItem, ListItemProps } from '-/components/ListItem';
-import { Menu } from '-/components/Menu';
+import { Menu, MenuProps } from '-/components/Menu';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
@@ -18,7 +18,7 @@ import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollL
  * Essentially the props of ListItemProps.
  */
 export type SelectOption = CommonProps<'disabled'> &
-    Omit<ListItemProps, 'id' | 'onClick' | 'subText' | 'value'> & { value: string };
+    Omit<ListItemProps, 'id' | 'onClick' | 'value'> & { value: string };
 
 export type SelectItem = SelectOption & { id: string };
 
@@ -52,6 +52,12 @@ export type SelectProps = CommonProps<'size'> &
          * @default Select one
          */
         placeholder?: string;
+        /**
+         * The width of the menu.
+         *
+         * If not provided, the menu will match the width of the select control.
+         */
+        menuWidth?: MenuProps['width'];
     };
 
 /**
@@ -126,6 +132,7 @@ export function Select({
     scrollLimit,
     required = false,
     'aria-label': ariaLabel,
+    menuWidth,
     ...elementProps
 }: ElementProps<SelectProps, 'button'>) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
@@ -162,7 +169,8 @@ export function Select({
     const { elements, floatingStyles } = useFloating({
         hide: !open,
         offsetOptions: 4,
-        refWidth: true,
+        //match reference width if menuWidth not provided
+        refWidth: !menuWidth,
     });
 
     useOutsideClick({
@@ -266,6 +274,7 @@ export function Select({
                     ...floatingStyles,
                 }}
                 tabIndex={-1}
+                width={menuWidth}
             >
                 {items.map((item) => {
                     const isActive = activeElementId === item.id;

package/src/components/Select/SelectExample.tsx

@@ -30,6 +30,37 @@ export const presets: Preset<SelectProps>[] = [
             options: DEFAULT_OPTIONS,
             name: 'demo-select',
             value: '',
+            menuWidth: '',
+        },
+    },
+    {
+        label: 'SubText',
+        propState: {
+            options: [
+                {
+                    value: 'Claude 3.7 Sonnet',
+                    label: 'Claude 3.7 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-3-7-sonnet-20250219-v1:0',
+                },
+                {
+                    value: 'Claude 4 Sonnet',
+                    label: 'Claude 4 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-sonnet-4-20250514-v1:0',
+                },
+                {
+                    value: 'Claude 4.5 Sonnet',
+                    label: 'Claude 4.5 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-sonnet-4-5-20250929-v1:0',
+                },
+                {
+                    value: 'GPT 4.1',
+                    label: 'GPT 4.1',
+                    subText: 'azure • gpt-41',
+                },
+            ],
+            name: 'demo-select-long',
+            value: '',
+            menuWidth: '600px',
         },
     },
     {
@@ -43,6 +74,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-long',
             value: '',
+            menuWidth: '',
         },
     },
     {
@@ -65,6 +97,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-tags',
             value: 'a',
+            menuWidth: '',
         },
     },
     {
@@ -82,6 +115,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-trailing',
             value: '',
+            menuWidth: '',
         },
     },
     {
@@ -112,6 +146,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-avatar',
             value: '',
+            menuWidth: '',
         },
     },
 ];
@@ -122,6 +157,6 @@ export const SelectExample: ComponentExample<SelectProps> = {
         scrollLimit: 5,
         value: '',
     },
-    render: ({ props, Component }) => <Component {...props} />,
+    render: ({ props, Component, preset }) => <Component key={preset?.label} {...props} />,
     presets,
 };

package/src/components/SelectField/SelectField.tsx

@@ -13,9 +13,22 @@ export type SelectFieldProps = FormFieldControlProps<SelectProps>;
  *
  * @generated
  */
-export function SelectField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: SelectFieldProps) {
+export function SelectField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    style,
+    ...controlProps
+}: SelectFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <Select {...controlProps} />
         </FormField>
     );

package/src/components/SkeletonText/SkeletonText.tsx

@@ -48,7 +48,7 @@ export type SkeletonTextProps = {
  * @name SkeletonText
  * @phase UXReview
  */
-export function SkeletonText({ lines = 3, variant, children = null }: SkeletonTextProps) {
+export function SkeletonText({ lines = 3, variant = 'body-base', children = null }: SkeletonTextProps) {
     return children !== null && children !== undefined && children !== false ? (
         children
     ) : (

package/src/components/Slider/slider.scss

@@ -26,6 +26,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        position: relative;
     }
 
     [data-slider-body] {

package/src/components/Textarea/Textarea.tsx

@@ -1,45 +1,40 @@
 import './textarea.scss';
 import { ChangeEvent, useRef } from 'react';
 import { useFieldInit } from '-/components/Field';
-import { FieldControlProps, SetRef } from '-/types/common';
+import { CommonProps, FieldControlProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
-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;
-};
+export type TextareaProps = CommonProps<'size'> &
+    FieldControlProps<string, ChangeEvent<HTMLTextAreaElement>> & {
+        /** 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.
@@ -79,7 +74,7 @@ export type TextareaProps = FieldControlProps<string, ChangeEvent<HTMLTextAreaEl
 export function Textarea({
     invalid: invalidProp,
     onChange,
-    textSize = 'medium',
+    size = 'medium',
     value = '',
     name,
     innerRef,
@@ -117,7 +112,7 @@ export function Textarea({
             data-disabled={disabled || undefined}
             data-invalid={invalid || undefined}
             data-read-only={readOnly || undefined}
-            data-size={textSize}
+            data-size={size}
             style={cssWithVars({
                 '--min-rows': minRows,
                 '--max-rows': maxRows,

package/src/components/TextareaField/TextareaField.tsx

@@ -13,9 +13,22 @@ export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
  *
  * @generated
  */
-export function TextareaField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: TextareaFieldProps) {
+export function TextareaField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    style,
+    ...controlProps
+}: TextareaFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <Textarea {...controlProps} />
         </FormField>
     );