@bspk/ui 1.3.2 → 1.3.4

package/src/components/ListItem/ListItemExample.tsx

@@ -1,22 +1,90 @@
 import { ElementType } from 'react';
 import { ListItem, ListItemProps } from './ListItem';
+import { ElementProps } from '-/types/common';
 import { createExampleChildElement } from '-/utils/createExampleChildElement';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
-export const presets: Preset<ListItemProps>[] = [
+export const presets = (action: (param: string) => void): Preset<ListItemProps>[] => [
     {
         label: 'Long Label',
         propState: {
             label: 'This is a really long label that should be truncated if it exceeds the width of the ListItem',
+            as: undefined,
             subText: 'See below for other leading and trailing examples',
             trailing: 'Checkbox',
             leading: 'Avatar',
-        },
+            disabled: undefined,
+            readOnly: undefined,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+        } as ElementProps<ListItemProps<'div'>, 'div'>,
+    },
+    {
+        label: 'As Div',
+        propState: {
+            as: undefined,
+            label: 'role = "button"',
+            role: 'button',
+            subText: 'aria-disabled = {true}',
+            trailing: undefined,
+            leading: undefined,
+            'aria-disabled': true,
+            disabled: undefined,
+            readOnly: undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is aria disabled and should not show'),
+        } as ElementProps<ListItemProps<'div'>, 'div'>,
+    },
+    {
+        label: 'As Button',
+        propState: {
+            label: 'as="button"',
+            as: 'button',
+            subText: 'Button example',
+            trailing: undefined,
+            leading: undefined,
+            disabled: undefined,
+            readOnly: undefined,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is not disabled or readonly and should show'),
+        } as ElementProps<ListItemProps<'button'>, 'button'>,
+    },
+    {
+        label: 'As Button Disabled',
+        propState: {
+            label: 'as="button"',
+            as: 'button',
+            subText: 'Disabled button example',
+            trailing: undefined,
+            leading: undefined,
+            disabled: true,
+            readOnly: false,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is disabled and should not show'),
+        } as ElementProps<ListItemProps<'button'>, 'button'>,
+    },
+    {
+        label: 'As Button Read Only',
+        propState: {
+            label: 'as="button"',
+            as: 'button',
+            subText: 'Read only button example',
+            trailing: undefined,
+            leading: undefined,
+            readOnly: true,
+            disabled: undefined,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is readonly and should not show'),
+        } as ElementProps<ListItemProps<'button'>, 'button'>,
     },
 ];
 
 export const ListItemExample: ComponentExampleFn<ListItemProps> = ({ action, setState }) => ({
-    render: ({ props, id }) => {
+    presets: presets(action),
+    render: ({ props, id, preset }) => {
         const leading = createExampleChildElement({
             exampleState: props,
             name: 'leading',
@@ -34,9 +102,11 @@ export const ListItemExample: ComponentExampleFn<ListItemProps> = ({ action, set
 
         let as: ElementType = props.as || 'div';
 
+        if (!preset) return null;
+
         if (trailing.componentName && ['Checkbox', 'Radio', 'Switch'].includes(trailing.componentName)) as = 'label';
 
         return <ListItem {...props} as={as} leading={leading.element} trailing={trailing.element} />;
     },
-    presets,
+    variants: false,
 });

package/src/components/ListItem/list-item.scss

@@ -1,6 +1,5 @@
 [data-bspk='list-item'] {
     display: flex;
-    width: 100%;
     user-select: none;
     color: var(--foreground-neutral-on-surface);
     background-color: var(--surface-neutral-t1-base);
@@ -14,6 +13,12 @@
     border: unset;
     margin: unset;
     text-decoration: unset;
+    width: 100%;
+
+    &[data-width='hug'] {
+        width: auto;
+        max-width: 100%;
+    }
 
     [data-pseudo='focus'] &,
     &:focus-visible,
@@ -25,18 +30,20 @@
         }
     }
 
-    &[data-action],
-    &:is(label) {
-        &[data-active],
-        [data-pseudo='hover'] &,
-        &:hover {
-            background-color: var(--interactions-neutral-hover-opacity);
-        }
+    &:not([data-disabled], [data-readonly]) {
+        &[data-action],
+        &:is(label) {
+            &[data-active],
+            [data-pseudo='hover'] &,
+            &:hover {
+                background-color: var(--interactions-neutral-hover-opacity);
+            }
 
-        [data-pseudo='active'] &,
+            [data-pseudo='active'] &,
         // pressed state
         &:active {
-            background-color: var(--interactions-neutral-press-opacity);
+                background-color: var(--interactions-neutral-press-opacity);
+            }
         }
     }
 
@@ -78,13 +85,6 @@
         }
     }
 
-    &[aria-disabled] {
-        [data-text],
-        [data-sub-text] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
     [data-trailing]:has(input) {
         pointer-events: none;
     }
@@ -105,6 +105,15 @@
     &[aria-selected='true'] {
         background-color: var(--surface-brand-primary-highlight);
     }
+
+    &[data-disabled],
+    &[data-readonly] {
+        [data-text],
+        [data-sub-text] {
+            color: var(--foreground-neutral-disabled-on-surface);
+            cursor: not-allowed;
+        }
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Menu/Menu.tsx

@@ -39,7 +39,7 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
  *
  *     import { Menu } from '@bspk/ui/Menu';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <Menu>
  *                 <ListItem label="List Item" />

package/src/components/Menu/MenuExample.tsx

@@ -41,6 +41,7 @@ export const MenuExample: ComponentExampleFn<MenuProps & { style?: unknown; 'dat
                                 setState((prev) => ({ 'data-dark-mode': !prev['data-dark-mode'] }));
                                 action('Dark mode toggled');
                             }}
+                            value="dark-mode"
                         />
                     }
                 />

package/src/components/MenuButton/MenuButton.tsx

@@ -11,7 +11,7 @@ export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
  * @example
  *     import { MenuButton } from '@bspk/ui/MenuButton';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <MenuButton />;
  *     }
  *

package/src/components/Modal/Modal.tsx

@@ -114,7 +114,7 @@ export type ModalProps = Pick<
  *     import { Button } from '@bspk/ui/Button';
  *     import { Modal } from '@bspk/ui/Modal';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [open, setOpen] = React.useState(false);
  *
  *         return (

package/src/components/Modal/ModalExample.tsx

@@ -28,12 +28,10 @@ export const ModalExample: ComponentExampleFn<ModalProps> = ({ action }) => ({
                 header: 'Confirmation Modal',
                 description: 'This modal has a call to action and a cancel button.',
                 children: (
-                    <>
-                        <p>
-                            This is a confirmation modal. It has a call to action and a cancel button. The call to
-                            action is the primary button and the cancel button is the tertiary button.
-                        </p>
-                    </>
+                    <p>
+                        This is a confirmation modal. It has a call to action and a cancel button. The call to action is
+                        the primary button and the cancel button is the tertiary button.
+                    </p>
                 ),
                 callToAction: {
                     label: 'Call to Action',

package/src/components/Pagination/PageInput.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 
 import { PaginationProps } from './Pagination';
-import { TextInput } from '-/components/TextInput';
+import { Input } from '-/components/Input';
 import { Txt } from '-/components/Txt';
 
 type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
@@ -48,7 +48,7 @@ export const PageInput: FC<PageInputProps> = ({ numPages, onChange, value }) =>
             style={{ display: 'contents' }}
         >
             <div data-bspk="page-input">
-                <TextInput
+                <Input
                     aria-label="Page input"
                     name="page-input"
                     onBlur={handleSubmit}

package/src/components/{CalendarPicker/CalendarPicker.rtl.test.tsx → Password/Password.rtl.test.tsx}

@@ -1,15 +1,15 @@
-import { CalendarPicker } from './CalendarPicker';
+import { Password } from './';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const TestBed = () => <CalendarPicker onChange={() => {}} value={new Date()} />;
+const TestBed = () => <Password aria-label="Password" name="password" onChange={() => {}} value="foo" />;
 
-describe('CalendarPicker', () => {
+describe('Password (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
 
     it('renders', () => {
         const { getByLabelText } = render(<TestBed />);
 
-        expect(getByLabelText('Previous Year')).toBeInTheDocument();
+        expect(getByLabelText('Password')).toBeInTheDocument();
     });
 });

package/src/components/Password/Password.tsx

@@ -0,0 +1,113 @@
+import './password.scss';
+import { useState } from 'react';
+import { Button } from '-/components/Button';
+import { useFieldInit } from '-/components/Field';
+import { InputElement, InputProps } from '-/components/Input';
+import { FieldControlProps } from '-/types/common';
+
+export type PasswordProps = FieldControlProps & Pick<InputProps, 'containerRef' | 'inputProps' | 'inputRef' | 'size'>;
+
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * For a more complete example with field usage, see the PasswordField component.
+ *
+ * @example
+ *     import { Password } from '@bspk/ui/Password';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return (
+ *             <Password
+ *                 aria-label="Enter password"
+ *                 value={value}
+ *                 onChange={setValue}
+ *                 aria-label="password"
+ *                 name="password"
+ *             />
+ *         );
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, setValue] = useState('');
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Password</FieldLabel>
+ *                 <Password value={value} onChange={setValue} aria-label="password" name="password" />
+ *                 <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name Password
+ * @phase UXReview
+ */
+export function Password({
+    inputProps,
+    inputRef,
+    name,
+    onChange,
+    required = false,
+    containerRef,
+    invalid: invalidProp,
+    readOnly,
+    disabled,
+    id: idProp,
+    'aria-label': ariaLabel,
+    ...props
+}: PasswordProps) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+
+    const [isShowingPassword, setIsShowingPassword] = useState(false);
+
+    const togglePasswordVisibility = () => {
+        if (disabled || readOnly) return;
+        setIsShowingPassword((prev) => !prev);
+    };
+
+    return (
+        <InputElement
+            {...props}
+            aria-describedby={ariaDescribedBy}
+            aria-errormessage={ariaErrorMessage}
+            aria-label={ariaLabel || undefined}
+            autoComplete="off"
+            containerRef={containerRef}
+            data-bspk-owner="password"
+            id={id}
+            inputProps={inputProps}
+            inputRef={inputRef}
+            invalid={invalid}
+            name={name}
+            onChange={onChange}
+            onClick={(e) => {
+                (e.currentTarget as HTMLElement)?.querySelector('input')?.focus();
+            }}
+            owner="password"
+            required={required}
+            showClearButton={false}
+            trailing={
+                !disabled &&
+                !readOnly && (
+                    <Button
+                        data-toggle-visibility-button
+                        label={isShowingPassword ? 'Hide' : 'Show'}
+                        onClick={togglePasswordVisibility}
+                        variant="tertiary"
+                    />
+                )
+            }
+            type={isShowingPassword ? 'text' : 'password'}
+        />
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Password/index.tsx

@@ -0,0 +1 @@
+export * from './Password';

package/src/components/Password/password.scss

@@ -0,0 +1,31 @@
+[data-bspk-owner='password'] {
+    [data-bspk='input'] {
+        padding-right: 0;
+
+        [data-toggle-visibility-button] {
+            font: var(--button-font);
+            height: 100%;
+        }
+
+        &[data-disabled],
+        &[data-readonly] {
+            [data-toggle-visibility-button] {
+                cursor: default;
+            }
+        }
+
+        &[data-size='small'] {
+            --button-font: var(--labels-small);
+        }
+
+        &[data-size='medium'] {
+            --button-font: var(--labels-base);
+        }
+
+        &[data-size='large'] {
+            --button-font: var(--labels-large);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

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

package/src/components/PasswordField/PasswordField.tsx

@@ -1,65 +1,22 @@
-import { FormField, FormFieldWrapProps } from '-/components/FormField';
-import { PasswordInputProps, PasswordInput } from '-/components/PasswordInput';
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Password, PasswordProps } from '-/components/Password';
 
-export type PasswordFieldProps = FormFieldWrapProps<PasswordInputProps>;
+export type PasswordFieldProps = FormFieldControlProps<PasswordProps>;
 
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line.
+ * A field wrapper for the Password component.
  *
- * This component takes properties from the FormField and PasswordInput components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { PasswordField } from '@bspk/ui/PasswordField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return (
- *             <PasswordField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
+ * This component takes properties from the FormField and Password components.
  *
  * @name PasswordField
  * @phase UXReview
+ *
+ * @generated
  */
-export function PasswordField({
-    controlId,
-    errorMessage,
-    helperText,
-    invalid,
-    label,
-    labelTrailing,
-    required,
-    ...passwordInputProps
-}: PasswordFieldProps) {
+export function PasswordField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: PasswordFieldProps) {
     return (
-        <FormField
-            controlId={controlId}
-            data-bspk="password-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => (
-                <PasswordInput
-                    {...passwordInputProps}
-                    {...fieldProps}
-                    id={controlId}
-                    invalid={invalid}
-                    required={required}
-                    value={passwordInputProps.value ?? ''}
-                />
-            )}
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <Password {...controlProps} />
         </FormField>
     );
 }

package/src/components/Popover/Popover.tsx

@@ -49,7 +49,7 @@ export type PopoverProps = CommonProps<'disabled'> &
          *
          * @required
          */
-        children: (triggerProps: PopoverTriggerProps) => ReactElement;
+        children: (triggerProps: PopoverTriggerProps) => ReactElement | null;
     };
 
 /**
@@ -60,7 +60,7 @@ export type PopoverProps = CommonProps<'disabled'> &
  *     import { Popover } from '@bspk/ui/Popover';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [showPopover, setShowPopover] = useState<boolean>(false);
  *
  *         const togglePopover = () => setShowPopover(!showPopover);
@@ -111,6 +111,7 @@ export function Popover({
     useOutsideClick({
         elements: [elements.floating],
         callback: () => setShow(false),
+        disabled: !show,
     });
 
     const basicArrowX = middlewareData?.arrow?.x ? `${middlewareData.arrow.x}px` : '0px';

package/src/components/Popover/PopoverExample.tsx

@@ -25,7 +25,7 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
                     label: 'CTA Button',
                     onClick: () => action('Call to action clicked!'),
                 },
-                children: () => <></>,
+                children: () => null,
             },
         },
         {
@@ -41,7 +41,7 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
                     label: 'Secondary',
                     onClick: () => action('Secondary call to action clicked!'),
                 },
-                children: () => <></>,
+                children: () => null,
             },
         },
     ],

package/src/components/ProgressBar/ProgressBar.tsx

@@ -53,7 +53,7 @@ export type ProgressBarProps = {
  * @example
  *     import { ProgressBar } from '@bspk/ui/ProgressBar';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <ProgressBar label="Example label" completion={50} />;
  *     }
  *

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -27,7 +27,7 @@ export type ProgressCircleProps = {
  * @example
  *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <ProgressCircle label="Example label" />;
  *     }
  *