@bspk/ui 1.3.3 → 1.3.4

package/src/components/InputPhone/InputPhoneExample.tsx

@@ -0,0 +1,9 @@
+import { InputPhoneProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<InputPhoneProps>[] = [];
+
+export const InputPhoneExample: ComponentExample<InputPhoneProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
+    variants: true,
+};

package/src/components/InputPhone/index.tsx

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

package/src/components/{PhoneNumberInput/phone-number-input.scss → InputPhone/input-phone.scss}

@@ -1,39 +1,34 @@
-[data-bspk='phone-number-input'] {
+[data-bspk='input-phone'] {
     position: relative;
     width: 100%;
 }
 
-[data-bspk-owner='phone-number-input'] {
+[data-bspk-owner='input-phone'][data-bspk='input'] {
     padding-left: 0;
 
+    &:focus-within {
+        outline: none;
+    }
+
+    input:focus-visible {
+        outline: solid 2px var(--stroke-neutral-focus);
+        border-radius: var(--radius-sm);
+    }
+
     [data-bspk='divider'] {
         margin: 0 var(--spacing-sizing-02) 0 0;
     }
 
     [data-leading] {
-        overflow: hidden;
         position: relative;
 
-        [contentEditable] {
-            position: absolute;
-            opacity: 0;
-            inset: 0;
-            z-index: 2;
-        }
-
-        [contentEditable]:focus-visible {
-            outline: none;
-
-            & + [data-bspk='button'] {
-                outline: solid 2px var(--stroke-neutral-focus);
-            }
-        }
-
         [data-bspk='button'] {
             gap: var(--spacing-sizing-02);
             padding: 0 var(--spacing-sizing-03);
             min-height: 100%;
             margin-right: var(--spacing-sizing-02);
+            position: relative;
+            z-index: 2;
 
             &::after {
                 content: '';

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

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

package/src/components/InputPhoneField/InputPhoneField.tsx

@@ -0,0 +1,30 @@
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { InputPhone, InputPhoneProps } from '-/components/InputPhone';
+
+export type InputPhoneFieldProps = FormFieldControlProps<InputPhoneProps>;
+
+/**
+ * A field wrapper for the InputPhone component.
+ *
+ * This component takes properties from the FormField and InputPhone components.
+ *
+ * @name InputPhoneField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function InputPhoneField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    ...controlProps
+}: InputPhoneFieldProps) {
+    return (
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <InputPhone {...controlProps} />
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/InputPhoneField/index.tsx

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

package/src/components/Layout/Layout.tsx

@@ -44,7 +44,7 @@ export type LayoutProps<As extends ElementType = 'div'> = {
  * @example
  *     import { Layout } from '@bspk/ui/Layout';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Layout>Low effort example</Layout>;
  *     }
  *

package/src/components/Link/Link.tsx

@@ -46,7 +46,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  * @example
  *     import { Link } from '@bspk/ui/Link';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
  *     }
  *

package/src/components/ListItem/ListItem.tsx

@@ -7,6 +7,7 @@ import {
     AriaAttributes,
     HTMLAttributes,
     AriaRole,
+    ComponentProps,
 } from 'react';
 import { ListItemButton } from './ListItemButton';
 import { Truncated } from '-/components/Truncated';
@@ -31,12 +32,16 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
          * @options Icon, Img, Avatar
          */
         leading?: ReactNode;
+        /** Props to pass to the leading element wrapper span. */
+        leadingProps?: ComponentProps<'span'>;
         /**
          * The label to display in the ListItem.
          *
          * @required
          */
         label: string;
+        /** Props to pass to the label wrapper span. */
+        labelProps?: ComponentProps<'span'>;
         /** The subtext to display in the ListItem. */
         subText?: string;
         /**
@@ -49,6 +54,8 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
          * @options Checkbox, Icon, ListItemButton, Radio, Switch, Tag, Txt
          */
         trailing?: ReactNode;
+        /** Props to pass to the trailing element wrapper span. */
+        trailingProps?: ComponentProps<'span'>;
         /**
          * The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the list item.
          *
@@ -75,18 +82,21 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
          * If not provided, a unique ID will be generated. This is useful for accessibility and testing purposes.
          */
         id?: string;
-        /**
-         * Whether to hide the label from screen readers. Use this when the label is redundant with other context, such
-         * as within a ListItemMenu or Label.
-         *
-         * @default false
-         */
-        hideAriaLabel?: boolean;
         /**
          * Indicates the current "selected" state of the list item when used in a selectable context, such as within a
          * ListItemMenu.
          */
         'aria-selected'?: boolean;
+        /**
+         * Determines how the ListItem uses horizontal space.
+         *
+         * If set to 'fill', options expand to fill the container's width.
+         *
+         * If set to 'hug', options only take up as much space as the content requires.
+         *
+         * @default fill
+         */
+        width?: 'fill' | 'hug';
     };
 
 /**
@@ -107,7 +117,7 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
  *     import { SvgSquare } from '@bspk/icons/Square';
  *     import { ListItem } from '@bspk/ui/ListItem';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <ListItem
  *                 label="Example label"
@@ -121,22 +131,25 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
  * @name ListItem
  * @phase UXReview
  */
-function ListItem<As extends ElementType = 'div'>({
+function ListItem<As extends ElementType = ElementType>({
     active,
     as,
     innerRef,
     label,
+    labelProps,
     leading,
+    leadingProps,
     owner,
     role: roleProp,
     subText,
     trailing,
+    trailingProps,
     id: idProp,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
     'aria-disabled': ariaDisabled,
     'aria-readonly': ariaReadonly,
-    hideAriaLabel,
+    width,
     ...props
 }: ElementProps<ListItemProps<As>, As>) {
     const id = useId(idProp);
@@ -163,6 +176,7 @@ function ListItem<As extends ElementType = 'div'>({
             data-bspk-owner={owner || undefined}
             data-disabled={isDisabled || undefined}
             data-readonly={isReadOnly || undefined}
+            data-width={width === 'hug' ? 'hug' : undefined}
             id={id}
             onClick={isReadOnly || isDisabled ? undefined : props.onClick}
             ref={innerRef}
@@ -170,15 +184,19 @@ function ListItem<As extends ElementType = 'div'>({
             tabIndex={props.tabIndex || (actionable ? 0 : -1)}
         >
             {leading && (
-                <span aria-hidden data-leading>
+                <span {...leadingProps} data-leading>
                     {leading}
                 </span>
             )}
-            <span aria-hidden={hideAriaLabel ? true : undefined} data-item-label>
+            <span {...labelProps} data-item-label>
                 <Truncated data-text>{label}</Truncated>
                 {subText && <span data-sub-text>{subText}</span>}
             </span>
-            {trailing && <span data-trailing>{trailing}</span>}
+            {trailing && (
+                <span {...trailingProps} data-trailing>
+                    {trailing}
+                </span>
+            )}
         </As>
     );
 }

package/src/components/ListItem/ListItemExample.tsx

@@ -20,12 +20,12 @@ export const presets = (action: (param: string) => void): Preset<ListItemProps>[
         } as ElementProps<ListItemProps<'div'>, 'div'>,
     },
     {
-        label: 'As Role Button',
+        label: 'As Div',
         propState: {
             as: undefined,
-            label: 'as="button"',
+            label: 'role = "button"',
             role: 'button',
-            subText: 'Button example',
+            subText: 'aria-disabled = {true}',
             trailing: undefined,
             leading: undefined,
             'aria-disabled': true,

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,

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>
     );
 }