@bspk/ui 1.3.8 → 1.3.9

package/src/components/Drawer/Drawer.tsx

@@ -52,8 +52,8 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
@@ -71,7 +71,7 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *                 </Drawer>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Drawer
  * @phase UXReview

package/src/components/EmptyState/EmptyState.tsx

@@ -41,13 +41,9 @@ export type EmptyStateProps = {
  * @example
  *     import { EmptyState } from '@bspk/ui/EmptyState';
  *
- *     function Example() {
- *         return (
- *             <EmptyState body="Example body" header="Example header">
- *                 Example EmptyState
- *             </EmptyState>
- *         );
- *     }
+ *     <EmptyState body="Example body" header="Example header">
+ *         Example EmptyState
+ *     </EmptyState>;
  *
  * @name EmptyState
  * @phase UXReview

package/src/components/Fab/Fab.tsx

@@ -4,11 +4,13 @@ import { ButtonProps } from '-/components/Button';
 import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { ElementProps } from '-/types/common';
 
+export type FabSize = 'medium' | 'small';
+
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
 
 export type FabProps<As extends ElementType = ElementType> = Pick<
     ButtonProps<As>,
-    'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'
+    'as' | 'icon' | 'iconOnly' | 'innerRef' | 'onClick' | 'toolTip'
 > &
     Required<Pick<ButtonProps<As>, 'label'>> & {
         /**
@@ -16,7 +18,7 @@ export type FabProps<As extends ElementType = ElementType> = Pick<
          *
          * @default small
          */
-        size?: 'medium' | 'small';
+        size?: FabSize;
         /**
          * The style variant of the button.
          *
@@ -45,9 +47,7 @@ export type FabProps<As extends ElementType = ElementType> = Pick<
  *     import { SvgBolt } from '@bspk/icons/Bolt';
  *     import { Fab } from '@bspk/ui/Fab';
  *
- *     function Example() {
- *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
- *     }
+ *     <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
  *
  * @name Fab
  * @phase UXReview
@@ -63,6 +63,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
         label,
         icon,
         toolTip,
+        innerRef,
         ...otherProps
     } = props;
 
@@ -77,6 +78,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
             data-bspk="fab"
             data-container={container}
             data-placement={placement}
+            data-position={container === 'page' ? 'fixed' : 'absolute'}
             data-round={iconOnly || undefined}
             data-size={size}
             data-variant={variant}
@@ -96,6 +98,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
                 triggerProps.onMouseOver?.();
                 otherProps.onMouseOver?.(e);
             }}
+            ref={innerRef}
         >
             {!!icon && isValidElement(icon) && (
                 <span aria-hidden={true} data-fab-icon>

package/src/components/Fab/FabExample.tsx

@@ -1,10 +1,29 @@
+import { FabProps } from './Fab';
 import { ButtonExample } from '-/components/Button/ButtonExample';
 import { ComponentExample } from '-/utils/demo';
 
 export const presets = ButtonExample.presets || [];
 
-export const FabExample: ComponentExample = {
+export const FabExample: ComponentExample<FabProps> = {
     containerStyle: { display: 'block', height: '152px', width: '100%' },
-    presets,
-    variants: false,
+    presets: ButtonExample.presets?.map((preset) => ({
+        ...preset,
+        propState: {
+            ...preset.propState,
+            size: undefined,
+            variant: undefined,
+        },
+    })),
+    defaultState: {
+        container: 'local',
+        placement: 'bottom-right',
+    },
+    variants: {
+        container: false,
+        placement: false,
+        iconOnly: {
+            icon: 'MenuBook',
+            label: 'Menu Book',
+        },
+    },
 };

package/src/components/Field/Field.tsx

@@ -42,9 +42,9 @@ const isComponentName = (
  *     import { Input } from '@bspk/ui/Input';
  *     import { Field, FieldLabel, FieldDescription, FieldError } from '@bspk/ui/Field';
  *
- *     function Example() {
- *         const [state, setState] = React.useState<string | undefined>(undefined);
- *         const [error, setError] = React.useState<string | undefined>(undefined);
+ *     () => {
+ *         const [state, setState] = useState<string | undefined>(undefined);
+ *         const [error, setError] = useState<string | undefined>(undefined);
  *
  *         return (
  *             <Field label="Example label">
@@ -56,13 +56,12 @@ const isComponentName = (
  *                         setState(next);
  *                     }}
  *                     value={state}
- *                     {...fieldProps}
  *                 />
  *                 <FieldDescription>This is an example description.</FieldDescription>
  *                 {error && <FieldError>{error}</FieldError>}
  *             </Field>
  *         );
- *     }
+ *     };
  *
  * @name Field
  * @phase Utility

package/src/components/FileUpload/FileUpload.tsx

@@ -73,7 +73,7 @@ export type FileUploadProps = Pick<FileUploadItemProps, 'cancelButtonLabel' | 'o
  * @example
  *     import { FileUpload } from '@bspk/ui/FileUpload';
  *
- *     function Example() {
+ *     () => {
  *         const [files, setFiles] = useState([]);
  *         return (
  *             <FileUpload
@@ -82,12 +82,12 @@ export type FileUploadProps = Pick<FileUploadItemProps, 'cancelButtonLabel' | 'o
  *                 acceptedFileTypes={['image/png', 'image/gif', 'image/svg+xml']}
  *                 files={files}
  *                 maxFileSize={5}
- *                 onError={(errorFiles) => console.log('Upload error:', errorFiles)}
+ *                 onError={(errorFiles) => sendSnackbar('Upload error:', errorFiles)}
  *                 onUpload={(uploadFiles) => setFiles(uploadFiles)}
  *                 uploadSubtitle="SVG, PNG, JPG or GIF (max. 5MB)"
  *             />
  *         );
- *     }
+ *     };
  *
  * @name FileUpload
  * @phase UXReview

package/src/components/FileUploadItem/FileUploadItem.tsx

@@ -30,16 +30,12 @@ export type FileUploadItemProps = FileEntry & {
  * @example
  *     import { FileUploadItem } from '@bspk/ui/FileUploadItem';
  *
- *     function Example() {
- *         return (
- *             <FileUploadItem
- *                 fileName="dunder-mifflin-paper-co.jpg"
- *                 fileSize="1.43 mb"
- *                 status="Uploading"
- *                 onCancel={() => console.log('Cancel item clicked!')}
- *             />
- *         );
- *     }
+ *     <FileUploadItem
+ *         fileName="dunder-mifflin-paper-co.jpg"
+ *         fileSize="1.43 mb"
+ *         status="Uploading"
+ *         onCancel={() => sendSnackbar('Cancel item clicked!')}
+ *     />;
  *
  * @name FileUploadItem
  * @phase UXReview

package/src/components/FormField/FormField.tsx

@@ -54,26 +54,15 @@ export type FormFieldProps<As extends ElementType = ElementType> = CommonProps<'
  *     import { Input } from '@bspk/ui/Input';
  *     import { FormField } from '@bspk/ui/FormField';
  *
- *     function Example() {
- *         const [state, setState] = React.useState<string | undefined>(undefined);
+ *     () => {
+ *         const [state, setState] = useState<string | undefined>(undefined);
+ *
  *         return (
  *             <FormField controlId="Example controlId" label="Example label">
- *                 {(fieldProps) => {
- *                     return (
- *                         <Input
- *                             aria-label="example aria-label"
- *                             name="example-text"
- *                             onChange={(next) => {
- *                                 setState(next);
- *                             }}
- *                             value={state}
- *                             {...fieldProps}
- *                         />
- *                     );
- *                 }}
+ *                 <Input name="example-text" onChange={(next) => setState(next)} value={state} />
  *             </FormField>
  *         );
- *     }
+ *     };
  *
  * @name FormField
  * @phase Utility

package/src/components/Img/Img.tsx

@@ -21,9 +21,7 @@ export type ImgProps = {
  * @example
  *     import { Img } from '@bspk/ui/Img';
  *
- *     function Example() {
- *         return <Img alt="Example alt" src="Example src" />;
- *     }
+ *     <Img alt="Example alt" src="Example src" />;
  *
  * @name Img
  * @phase Backlog

package/src/components/InlineAlert/InlineAlert.tsx

@@ -32,9 +32,7 @@ export type InlineAlertProps = CommonProps<'owner'> & {
  * @example
  *     import { InlineAlert } from '@bspk/ui/InlineAlert';
  *
- *     function Example() {
- *         return <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
- *     }
+ *     <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
  *
  * @name InlineAlert
  * @phase UXReview

package/src/components/Input/Input.tsx

@@ -15,23 +15,23 @@ export type InputProps = Omit<InputElementProps, 'ariaDescribedBy' | 'ariaErrorM
  *     import { Input } from '@bspk/ui/Input';
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Example Label</FieldLabel>
- *                 <Input name="example-name" onChange={setValue} value={value} />
- *                 <FieldDescription>This is an example input field.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone input example
+ *                 <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />
+ *                 <br />
+ *                 // input used within a field
+ *                 <Field>
+ *                     <FieldLabel>Example Label</FieldLabel>
+ *                     <Input name="example-name" onChange={setValue} value={value} />
+ *                     <FieldDescription>This is an example input field.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
- *
- *     function ExampleWithAriaLabel() {
- *         const [value, setValue] = useState('');
- *
- *         return <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />;
- *     }
+ *     };
  *
  * @name Input
  * @phase UXReview

package/src/components/Input/InputElement.tsx

@@ -67,16 +67,22 @@ export type InputElementProps = InputElementBaseProps & {
  *     import { InputElement } from '@bspk/ui/InputElement';
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState('');
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Example Label</FieldLabel>
+ *             <>
+ *                 // standalone input element example
  *                 <InputElement name="example-name" onChange={setValue} value={value} />
- *             </Field>
+ *                 <br />
+ *                 // input element used within a field
+ *                 <Field>
+ *                     <FieldLabel>Example Label</FieldLabel>
+ *                     <InputElement name="example-name" onChange={setValue} value={value} />
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name InputElement
  * @phase Utility

package/src/components/InputNumber/InputNumber.tsx

@@ -51,35 +51,35 @@ export type InputNumberProps = CommonProps<'size'> &
  * @example
  *     import { InputNumber } from '@bspk/ui/InputNumber';
  *
- *     function ExampleStandalone() {
- *         const [state, setState] = React.useState<number | undefined>();
+ *     () => {
+ *         const [state, setState] = useState<number | undefined>();
  *
  *         return (
- *             <InputNumber
- *                 aria-label="Example aria-label"
- *                 name="example-name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 value={state}
- *             />
- *         );
- *     }
- *
- *     function ExampleWithField() {
- *         const [state, setState] = React.useState<number | undefined>();
- *
- *         return (
- *             <Field>
- *                 <FieldLabel>Example Input Number</FieldLabel>
+ *             <>
+ *                 // standalone input number example
  *                 <InputNumber
  *                     aria-label="Example aria-label"
  *                     name="example-name"
  *                     onChange={(nextValue) => setState(nextValue)}
  *                     value={state}
  *                 />
- *                 <FieldDescription>The input number allows you to increment or decrement a value.</FieldDescription>
- *             </Field>
+ *                 <br />
+ *                 // input number used within a field
+ *                 <Field>
+ *                     <FieldLabel>Example Input Number</FieldLabel>
+ *                     <InputNumber
+ *                         aria-label="Example aria-label"
+ *                         name="example-name"
+ *                         onChange={(nextValue) => setState(nextValue)}
+ *                         value={state}
+ *                     />
+ *                     <FieldDescription>
+ *                         The input number allows you to increment or decrement a value.
+ *                     </FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name InputNumber
  * @phase UXReview

package/src/components/InputPhone/InputPhone.tsx

@@ -59,25 +59,30 @@ export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> &
  * @example
  *     import { InputPhone } from '@bspk/ui/InputPhone';
  *
- *     function ExampleStandalone() {
- *         const [value, onChange] = React.useState<number | undefined>();
- *
- *         return <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
- *     }
- *
- *     function ExampleWithField() {
- *         const [value, onChange] = React.useState<number | undefined>();
+ *     () => {
+ *         const [value, onChange] = useState<number | undefined>();
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Example Input Phone</FieldLabel>
- *                 <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />
- *                 <FieldDescription>
- *                     The phone input allows you to enter a phone number with country code.
- *                 </FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone input phone example
+ *                 <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *                 <br />
+ *                 // input phone used within a field
+ *                 <Field>
+ *                     <FieldLabel>Example Input Phone</FieldLabel>
+ *                     <InputPhone
+ *                         aria-label="Phone Number"
+ *                         initialCountryCode="US"
+ *                         value={value}
+ *                         onChange={onChange}
+ *                     />
+ *                     <FieldDescription>
+ *                         The phone input allows you to enter a phone number with country code.
+ *                     </FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name InputPhone
  * @phase UXReview

package/src/components/Layout/Layout.tsx

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

package/src/components/Link/Link.tsx

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

package/src/components/ListItem/ListItem.tsx

@@ -9,7 +9,6 @@ import {
     AriaRole,
     ComponentProps,
 } from 'react';
-import { ListItemButton } from './ListItemButton';
 import { Truncated } from '-/components/Truncated';
 import { useId } from '-/hooks/useId';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
@@ -47,11 +46,11 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
         /**
          * The trailing element to display in the ListItem.
          *
-         * Trailing elements should only be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio,
-         * Switch, Tag, Txt.
+         * Trailing elements should only be one of the following [Icon](/icons), Checkbox, Button, Radio, Switch, Tag,
+         * Txt.
          *
          * @exampleType select
-         * @options Checkbox, Icon, ListItemButton, Radio, Switch, Tag, Txt
+         * @options Checkbox, Icon, Button, Radio, Switch, Tag, Txt
          */
         trailing?: ReactNode;
         /** Props to pass to the trailing element wrapper span. */
@@ -109,24 +108,29 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
  *
  * Leading elements should be one of the following [Icon](/icons), Img, Avatar.
  *
- * Trailing elements should be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
- *
- * The ListItemButton is a more limited Button with context specific options.
+ * Trailing elements should be one of the following [Icon](/icons), Checkbox, Button, Radio, Switch, Tag, Txt.
  *
  * @example
- *     import { SvgSquare } from '@bspk/icons/Square';
+ *     import { SvgFolder } from '@bspk/icons/Folder';
+ *     import { SvgChevronRight } from '@bspk/icons/ChevronRight';
  *     import { ListItem } from '@bspk/ui/ListItem';
  *
- *     function Example() {
- *         return (
- *             <ListItem
- *                 label="Example label"
- *                 leading={<SvgSquare />}
- *                 subText="Example subtest"
- *                 trailing={<ListItem.Button label="Click me" onClick={() => console.log('Hello world')} />}
- *             />
- *         );
- *     }
+ *     <div style={{ width: 300 }}>
+ *         <ListItem
+ *             leading={<SvgDelete />}
+ *             label="File 13"
+ *             subText="Last modified: Jan 21, 2024"
+ *             trailing={<SvgChevronRight />}
+ *             onClick={() => sendSnackbar('Clicked Open Folder button')}
+ *         />
+ *         <ListItem
+ *             leading={<SvgFolder />}
+ *             label="Death Star Plans"
+ *             subText="Last modified: May 25, 1977"
+ *             trailing={<SvgChevronRight />}
+ *             onClick={() => sendSnackbar('Downloading blueprints...')}
+ *         />
+ *     </div>;
  *
  * @name ListItem
  * @phase UXReview
@@ -201,8 +205,6 @@ function ListItem<As extends ElementType = ElementType>({
     );
 }
 
-ListItem.Button = ListItemButton;
-
 export { ListItem };
 
 function asLogic<As extends ElementType>(as: As | undefined, props: Partial<ListItemProps>): ElementType {

package/src/components/Menu/Menu.tsx

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

package/src/components/Modal/Modal.tsx

@@ -87,7 +87,7 @@ export type ModalProps = Pick<
      */
     callToAction?: ModalCallToAction;
     /**
-     * The format of the buttons in the footer. Ignored if not mobile.
+     * The format of the buttons in the footer. Vertical applies only on screen widths less than or equal to 640px.
      *
      * @default horizontal
      */
@@ -114,8 +114,8 @@ export type ModalProps = Pick<
  *     import { Button } from '@bspk/ui/Button';
  *     import { Modal } from '@bspk/ui/Modal';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
@@ -130,7 +130,7 @@ export type ModalProps = Pick<
  *                 </Modal>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Modal
  * @phase UXReview
@@ -200,7 +200,12 @@ export function Modal({
                 {Array.isArray(buttons) && buttons.length > 0 && (
                     <div data-button-format={buttonFormat} data-modal-footer>
                         {buttons.map((buttonProps, idx) => (
-                            <Button key={idx} {...buttonProps} size={isMobile ? 'medium' : 'small'} />
+                            <Button
+                                key={idx}
+                                {...buttonProps}
+                                size={isMobile ? 'medium' : 'small'}
+                                width={buttonFormat === 'vertical' && isMobile ? 'fill' : 'hug'}
+                            />
                         ))}
                     </div>
                 )}

package/src/components/Modal/modal.scss

@@ -25,9 +25,21 @@
 
     > [data-modal-footer] {
         display: flex;
+        gap: var(--spacing-sizing-04);
+    }
+
+    [data-button-format='horizontal'] {
         flex-direction: row-reverse;
         justify-content: flex-start;
-        gap: var(--spacing-sizing-04);
+    }
+
+    [data-button-format='vertical'] {
+        flex-direction: column;
+
+        @media (width >= 640px) {
+            flex-direction: row-reverse;
+            justify-content: flex-start;
+        }
     }
 }
 

package/src/components/OTPInput/OTPInput.tsx

@@ -34,9 +34,7 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
  * @example
  *     import { OTPInput } from '@bspk/ui/OTPInput';
  *
- *     function Example() {
- *         return <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
- *     }
+ *     <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
  *
  * @name OTPInput
  * @phase UXReview

package/src/components/PageControl/PageControl.tsx

@@ -40,9 +40,7 @@ export type DotSize = 'medium' | 'small' | 'x-small';
  * @example
  *     import { PageControl } from '@bspk/ui/PageControl';
  *
- *     function Example() {
- *         return <PageControl value={1} numPages={3} />;
- *     }
+ *     <PageControl value={1} numPages={3} />;
  *
  * @name PageControl
  * @phase UXReview