@bspk/ui 1.3.4 → 1.3.6

package/src/components/AvatarGroup/avatar-group.scss

@@ -1,28 +1,48 @@
 [data-bspk='avatar-group'] {
-    width: 100%;
+    width: fit-content;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 
     [data-wrap] {
-        width: 100%;
+        min-width: fit-content;
         display: flex;
         flex-direction: row;
-        align-items: end;
-        justify-content: end;
-        overflow: hidden;
+        align-items: center;
+        justify-content: center;
     }
 
-    [data-gap='01'] {
-        gap: var(--spacing-sizing-01);
-    }
+    // data-gap={variant === 'spread' ? (small ? '01' : '02') : undefined}
+
+    [data-bspk='avatar'] {
+        z-index: 1;
+
+        &:hover {
+            z-index: 2;
+        }
 
-    [data-gap='02'] {
-        gap: var(--spacing-sizing-02);
+        &[data-bspk-owner='avatar-overflow'] {
+            --avatar-border: solid 1px var(--stroke-neutral-low);
+
+            background-color: var(--surface-neutral-t1-base);
+        }
     }
 
-    [data-stacked='02']:not(:last-child) {
-        margin-right: -8px;
+    &[data-variant='spread'] {
+        --avatar-border: none;
+
+        [data-bspk='avatar'] + [data-bspk='avatar'] {
+            margin-left: var(--spacing-sizing-02);
+        }
     }
 
-    [data-stacked='01']:not(:last-child) {
-        margin-right: -4px;
+    &[data-variant='stacked'] {
+        --avatar-border: solid 1px var(--stroke-neutral-low);
+
+        [data-bspk='avatar'] + [data-bspk='avatar'] {
+            margin-left: calc(var(--spacing-sizing-02) * -1);
+        }
     }
 }

package/src/components/Badge/BadgeExample.tsx

@@ -6,7 +6,7 @@ export const BadgeExample: ComponentExample<BadgeProps> = {
     render: ({ props, Component }) => {
         return (
             <Component {...props}>
-                <Avatar image="/profile.jpg" name="Andre Giant" />
+                <Avatar image="/avatar-01.png" name="Andre Giant" />
             </Component>
         );
     },

package/src/components/BadgeDot/BadgeDotExample.tsx

@@ -13,7 +13,7 @@ export const BadgeDotExample: ComponentExample<BadgeDotProps> = {
                 {props.outline === true ? (
                     <Button label="Button" size="large" />
                 ) : (
-                    <Avatar image="/profile.jpg" name="Andre Giant" />
+                    <Avatar image="/avatar-01.png" name="Andre Giant" />
                 )}
             </Component>
         );

package/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
+export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -98,7 +98,7 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  * @name Button
  * @phase UXReview
  */
-export function Button<As extends ElementType = 'button'>(
+export function Button<As extends ElementType = ElementType>(
     props: AriaAttributes & ElementProps<ButtonProps<As>, As>,
 ): JSX.Element {
     const {

package/src/components/Card/Card.tsx

@@ -1,5 +1,6 @@
 import './card.scss';
 import { ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
 
 export type CardProps = {
     /**
@@ -38,9 +39,9 @@ export type CardProps = {
  * @name Card
  * @phase UXReview
  */
-export function Card({ children, variant = 'elevated' }: CardProps) {
+export function Card({ children, variant = 'elevated', ...props }: ElementProps<CardProps, 'div'>) {
     return (
-        <div data-bspk="card" data-variant={variant}>
+        <div {...props} data-bspk="card" data-variant={variant}>
             {children}
         </div>
     );

package/src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import './checkbox.scss';
 import { ChangeEvent, useEffect, useRef } from 'react';
 import { ElementProps, FieldControlProps } from '-/types/common';
 
-export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'value'> & {
+export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'value'> & {
     /**
      * If the checkbox is partially checked or
      * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
@@ -64,7 +64,6 @@ export function Checkbox({
     indeterminate: indeterminateProp,
     invalid,
     disabled,
-    readOnly,
     required,
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
@@ -79,10 +78,7 @@ export function Checkbox({
     }, [indeterminate]);
 
     return (
-        <span
-            //
-            data-bspk="checkbox"
-        >
+        <span data-bspk="checkbox">
             <input
                 {...props}
                 aria-describedby={props['aria-describedby'] || undefined}
@@ -90,9 +86,8 @@ export function Checkbox({
                 aria-invalid={invalid || undefined}
                 checked={checked}
                 data-indeterminate={indeterminate || undefined}
-                disabled={disabled || readOnly || undefined}
+                disabled={disabled || undefined}
                 onChange={(event) => props.onChange(!!event.target.checked, event)}
-                readOnly={readOnly}
                 ref={(node) => {
                     if (!node) return;
                     inputRef.current = node;

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -41,7 +41,7 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
  *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
+ *         const [value, setValue] = React.useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -52,9 +52,9 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
  *                     { label: 'Option 2', value: 'option2' },
  *                     { label: 'Option 3', value: 'option3' },
  *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
+ *                 value={value}
+ *                 onChange={(nextValue: string[]) => {
+ *                     setValue(nextValue);
  *                 }}
  *             />
  *         );
@@ -71,7 +71,6 @@ export function CheckboxGroup({
     selectAll,
     selectAllProps,
     disabled = false,
-    readOnly,
     invalid: invalidProp,
     required,
     id: idProp,
@@ -83,7 +82,6 @@ export function CheckboxGroup({
         idProp,
         required,
         disabled,
-        readOnly,
         invalidProp,
     });
 
@@ -96,7 +94,7 @@ export function CheckboxGroup({
             role="group"
         >
             {selectAll && (
-                <ToggleOption label={selectAllProps?.label || ALL_LABEL} readOnly={readOnly}>
+                <ToggleOption label={selectAllProps?.label || ALL_LABEL}>
                     <Checkbox
                         aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
                         aria-label={selectAllProps?.label || ALL_LABEL}
@@ -107,7 +105,6 @@ export function CheckboxGroup({
                         invalid={invalid || undefined}
                         name={name}
                         onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
-                        readOnly={readOnly}
                         value="all"
                     />
                 </ToggleOption>
@@ -118,7 +115,6 @@ export function CheckboxGroup({
                     disabled={disabled || optionDisabled}
                     key={optionValue}
                     label={label}
-                    readOnly={readOnly}
                 >
                     <Checkbox
                         aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
@@ -130,7 +126,6 @@ export function CheckboxGroup({
                         onChange={(checked) => {
                             onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
                         }}
-                        readOnly={readOnly}
                         value={optionValue}
                     />
                 </ToggleOption>

package/src/components/CheckboxGroupField/CheckboxGroupField.tsx

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

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.
@@ -35,7 +36,7 @@ export function CheckboxOption({
     label: labelProp,
     description,
     disabled,
-    readOnly,
+    style,
     ...checkboxProps
 }: CheckboxOptionProps) {
     const label = labelProp || description;
@@ -47,9 +48,9 @@ export function CheckboxOption({
                 description={description}
                 disabled={disabled}
                 label={label}
-                readOnly={readOnly}
+                style={style}
             >
-                <Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} readOnly={readOnly} />
+                <Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} />
             </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/Field/utils.ts

@@ -52,7 +52,7 @@ export function useFieldInit({
     idProp: string | undefined;
     required: boolean | undefined;
     disabled: boolean | undefined;
-    readOnly: boolean | undefined;
+    readOnly?: boolean | undefined;
     invalidProp: boolean | undefined;
 }): Pick<FieldContext, 'ariaDescribedBy' | 'ariaErrorMessage'> & { invalid: boolean; id: string } {
     const context = useContext(fieldContext);

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

@@ -68,7 +68,6 @@ export function RadioGroup({
     name,
     value: groupValue,
     disabled = false,
-    readOnly,
     invalid: invalidProp,
     required,
     id: idProp,
@@ -80,7 +79,6 @@ export function RadioGroup({
         idProp,
         required,
         disabled,
-        readOnly,
         invalidProp,
     });
 
@@ -92,26 +90,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>