@bspk/ui 1.3.3 → 1.3.5

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 />
@@ -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/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,35 @@
-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,
+    helperText,
     labelTrailing,
-    required,
-    ...passwordInputProps
+    errorMessage,
+    style,
+    ...controlProps
 }: PasswordFieldProps) {
     return (
         <FormField
-            controlId={controlId}
-            data-bspk="password-field"
             errorMessage={errorMessage}
             helperText={helperText}
-            invalid={invalid}
             label={label}
             labelTrailing={labelTrailing}
-            required={required}
+            style={style}
         >
-            {(fieldProps) => (
-                <PasswordInput
-                    {...passwordInputProps}
-                    {...fieldProps}
-                    id={controlId}
-                    invalid={invalid}
-                    required={required}
-                    value={passwordInputProps.value ?? ''}
-                />
-            )}
+            <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);

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" />;
  *     }
  *

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/ProgressionStepper/ProgressionStepper.tsx

@@ -59,7 +59,7 @@ export type ProgressionStepperProps = {
  * @example
  *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *     }
  *
@@ -86,19 +86,14 @@ export function ProgressionStepper({
                 <label>
                     <span data-title>{currentStep.name}</span>
                     <span data-subtitle>
-                        {currentStep.subtext ? (
-                            currentStep.subtext
-                        ) : (
-                            <>
-                                {completedStepNumber === steps.length ? (
-                                    'Completed'
-                                ) : (
-                                    <>
-                                        Step {currentStepNumber} of {steps.length}
-                                    </>
-                                )}
-                            </>
-                        )}
+                        {currentStep?.subtext ||
+                            (completedStepNumber === steps.length ? (
+                                'Completed'
+                            ) : (
+                                <>
+                                    Step {currentStepNumber} of {steps.length}
+                                </>
+                            ))}
                     </span>
                 </label>
             )}

package/src/components/ProgressionStepper/ProgressionStepperExample.tsx

@@ -51,7 +51,7 @@ export const presets: Preset<ProgressionStepperProps>[] = [
         label: 'Widget (w/ subtext)',
         propState: {
             variant: 'widget',
-            completedStep: 3,
+            completedStep: 6,
             steps: [
                 { name: 'Name of step 1' },
                 { name: 'Name of step 2' },
@@ -59,7 +59,7 @@ export const presets: Preset<ProgressionStepperProps>[] = [
                 { name: 'Name of step 4' },
                 { name: 'Name of step 5' },
                 { name: 'Name of step 6' },
-                { name: 'Review', subtext: `Check your information...` },
+                { name: 'Review', subtext: `Whoop, there it is...` },
             ],
         },
     },

package/src/components/Radio/Radio.tsx

@@ -1,22 +1,21 @@
 import './radio.scss';
 import { ChangeEvent } from 'react';
-import { ElementProps, CommonProps } from '-/types/common';
+import { ElementProps, FieldControlProps } from '-/types/common';
 
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
-    Required<CommonProps<'value'>> & {
-        /**
-         * Marks the radio as checked.
-         *
-         * @default false
-         */
-        checked?: boolean;
-        /**
-         * The function to call when the radio is checked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
+export type RadioProps = Omit<FieldControlProps<string, ChangeEvent<HTMLInputElement>>, 'onChange' | 'readOnly'> & {
+    /**
+     * Marks the radio as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the radio is checked.
+     *
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
 
 /**
  * A round control that allows user to choose one option from a set. This is the base element and if used directly you

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

@@ -4,18 +4,17 @@ import { render } from '-/rtl/util';
 
 const TestBed = () => (
     <RadioGroup
-        label="Example label"
-        name="Example name"
+        aria-label="Example label"
+        name="example-name"
         onChange={() => {}}
         options={[
             {
                 value: '1',
                 label: 'Option 1',
-                name: 'Option 1',
                 description: 'Description here',
             },
-            { value: '2', label: 'Option 2', name: 'Option 2' },
-            { value: '3', label: 'Option 3', name: 'Option 3' },
+            { value: '2', label: 'Option 2' },
+            { value: '3', label: 'Option 3' },
         ]}
         value="2"
     />