@bspk/ui 1.3.11 → 1.3.16

package/src/components/Divider/DividerExample.tsx

@@ -4,12 +4,25 @@ import { DividerProps } from './Divider';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
 import { ComponentExample, Preset } from '-/utils/demo';
 
-export const presets: Preset<DividerProps>[] = [];
+export const presets: Preset<DividerProps>[] = [
+    {
+        label: 'Divider - Horizontal',
+        propState: {
+            orientation: 'horizontal',
+        },
+    },
+    {
+        label: 'Divider - Vertical',
+        propState: {
+            orientation: 'vertical',
+        },
+    },
+];
 
 export const DividerExample: ComponentExample<DividerProps> = {
     render: ({ props, Component }) => {
         const style: CSSProperties =
-            props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: '300px' };
+            props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: 300 };
         return (
             <div
                 style={{
@@ -17,31 +30,17 @@ export const DividerExample: ComponentExample<DividerProps> = {
                     flexDirection: props.orientation === 'vertical' ? 'row' : 'column',
                     alignItems: props.orientation === 'vertical' ? 'center' : 'stretch',
                     justifyContent: props.orientation === 'vertical' ? 'center' : 'stretch',
-                    maxWidth: props.orientation !== 'vertical' ? '300px' : 'auto',
+                    maxWidth: props.orientation !== 'vertical' ? 300 : 'auto',
                 }}
             >
-                <ExamplePlaceholder direction={props.orientation !== 'vertical' ? 'row' : 'column'} style={style} />
+                <ExamplePlaceholder
+                    style={{ ...style, flexDirection: props.orientation !== 'vertical' ? 'row' : 'column' }}
+                />
                 <Component {...props} />
-                <ExamplePlaceholder direction={props.orientation !== 'vertical' ? 'row' : 'column'} style={style} />
+                <ExamplePlaceholder
+                    style={{ ...style, flexDirection: props.orientation !== 'vertical' ? 'row' : 'column' }}
+                />
             </div>
         );
     },
-    presets: [
-        {
-            label: 'Divider - Horizontal',
-            designPattern:
-                'Horizontal thin line that separates grouped content in a list or other containers with the option to include a section/group label.',
-            propState: {
-                orientation: 'horizontal',
-            },
-        },
-        {
-            label: 'Divider - Vertical',
-            designPattern:
-                'Vertical thin line that separates grouped content or other visual elements within a container.',
-            propState: {
-                orientation: 'vertical',
-            },
-        },
-    ],
 };

package/src/components/Drawer/Drawer.tsx

@@ -3,7 +3,6 @@ import { SvgClose } from '@bspk/icons/Close';
 import { ReactNode } from 'react';
 import { Button } from '-/components/Button';
 import { Dialog, DialogProps } from '-/components/Dialog';
-import { Txt } from '-/components/Txt';
 
 export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | 'id' | 'innerRef' | 'owner'> & {
     /** Drawer header. */
@@ -47,8 +46,6 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  * content or actions without navigating away from the current view.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
@@ -56,25 +53,25 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *         const [open, setOpen] = useState(false);
  *
  *         return (
- *             <>
- *                 <Button label="Open Drawer" onClick={() => setOpen(true)} />
+ *             <div style={{ width: '100%', height: 180 }}>
+ *                 <Button label="Toggle Drawer" onClick={() => setOpen(!open)} />
  *                 <Drawer
+ *                     closeButton={true}
+ *                     header="Example Drawer"
  *                     id="exampleId"
+ *                     modal={false}
  *                     onClose={() => setOpen(false)}
  *                     open={open}
  *                     placement="right"
- *                     modal={false}
- *                     header="Example Drawer"
- *                     closeButton={true}
  *                 >
- *                     Example Drawer
+ *                     <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
  *                 </Drawer>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name Drawer
- * @phase UXReview
+ * @phase Stable
  */
 export function Drawer({
     header,
@@ -99,11 +96,7 @@ export function Drawer({
         >
             {(header || closeButton) && (
                 <div data-drawer-close-only={!header} data-drawer-header>
-                    {header && (
-                        <Txt as="div" data-drawer-title variant="heading-h4">
-                            {header}
-                        </Txt>
-                    )}
+                    {header && <div data-drawer-title>{header}</div>}
                     {closeButton && (
                         <Button icon={<SvgClose />} iconOnly label="close" onClick={onClose} variant="tertiary" />
                     )}

package/src/components/Drawer/DrawerExample.tsx

@@ -1,5 +1,7 @@
+import { useState } from 'react';
 import { Drawer, DrawerProps } from '.';
 import { Button } from '-/components/Button';
+import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 export const presets: Preset<DrawerProps>[] = [
@@ -23,12 +25,13 @@ export const DrawerExample: ComponentExampleFn<DrawerProps> = ({ action }) => ({
     presets,
     render: ({ props, preset, setState, Component }) => {
         if (!preset) return null;
-        const label = 'Open Drawer';
         const handleOnClose = () => {
             action('Drawer closed');
             setState({ open: false });
         };
 
+        const toggleButton = <Button label="Toggle Drawer" onClick={() => setState({ open: !props.open })} />;
+
         switch (preset.label) {
             case 'Left Responsive':
                 return (
@@ -45,7 +48,7 @@ export const DrawerExample: ComponentExampleFn<DrawerProps> = ({ action }) => ({
                                 marginLeft: props.open ? `280px` : 0,
                             }}
                         >
-                            <Button label={label} onClick={() => setState({ open: true })} />
+                            {toggleButton}
                         </div>
                     </>
                 );
@@ -58,7 +61,7 @@ export const DrawerExample: ComponentExampleFn<DrawerProps> = ({ action }) => ({
                                 marginRight: props.open ? `280px` : 0,
                             }}
                         >
-                            <Button label={label} onClick={() => setState({ open: true })} />
+                            {toggleButton}
                         </div>
                         <Drawer {...props} onClose={handleOnClose}>
                             <div style={{ width: '280px' }}>
@@ -71,7 +74,7 @@ export const DrawerExample: ComponentExampleFn<DrawerProps> = ({ action }) => ({
                 return (
                     <>
                         <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-sizing-04)' }}>
-                            <Button label={label} onClick={() => setState({ open: true })} />
+                            {toggleButton}
                         </div>
                         <Component
                             data-example-component
@@ -91,3 +94,24 @@ export const DrawerExample: ComponentExampleFn<DrawerProps> = ({ action }) => ({
     },
     variants: false,
 });
+
+export const Usage = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ width: '100%', height: 180 }}>
+            <Button label="Toggle Drawer" onClick={() => setOpen(!open)} />
+            <Drawer
+                closeButton={true}
+                header="Example Drawer"
+                id="exampleId"
+                modal={false}
+                onClose={() => setOpen(false)}
+                open={open}
+                placement="right"
+            >
+                <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
+            </Drawer>
+        </div>
+    );
+};

package/src/components/Drawer/drawer.scss

@@ -2,6 +2,8 @@
     padding: var(--spacing-sizing-03);
     color: var(--foreground-neutral-on-surface);
     background: var(--surface-neutral-t1-base);
+    display: flex;
+    flex-direction: column;
 
     &[data-no-portal] {
         box-shadow: var(--drop-shadow-float);
@@ -25,6 +27,7 @@
 
             position: absolute;
             right: 0;
+            top: 0;
             height: 100%;
             border-top-left-radius: var(--radius-lg);
             border-bottom-left-radius: var(--radius-lg);
@@ -61,6 +64,10 @@
         &[data-drawer-close-only='true'] {
             justify-content: flex-end;
         }
+
+        [data-drawer-title] {
+            font: var(--heading-h4);
+        }
     }
 }
 

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

@@ -11,6 +11,6 @@ describe('EmptyState (RTL)', () => {
     it('renders', () => {
         const { getByText } = render(<EmptyState {...presets[0].propState} />);
 
-        expect(getByText('Example header')).toBeInTheDocument();
+        expect(getByText('No results found')).toBeInTheDocument();
     });
 });

package/src/components/EmptyState/EmptyState.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 import { Button } from '-/components/Button';
-import { Layout } from '-/components/Layout';
+import { Flex } from '-/components/Flex';
 import { Txt } from '-/components/Txt';
 import { CallToActionButton } from '-/types/common';
 
@@ -42,32 +42,25 @@ export type EmptyStateProps = {
  *     import { EmptyState } from '@bspk/ui/EmptyState';
  *
  *     <EmptyState body="Example body" header="Example header">
- *         Example EmptyState
+ *         <ExamplePlaceholder height="200px" width="200px" label="Illustration slot or icon slot" />
  *     </EmptyState>;
  *
  * @name EmptyState
- * @phase UXReview
+ * @phase Stable
  */
 export function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
     return (
-        <Layout
-            align="center"
-            column
-            data-bspk="empty-state"
-            style={{
-                margin: 'var(--spacing-sizing-04)',
-                maxWidth: '500px',
-            }}
-        >
+        <Flex align="center" data-bspk="empty-state" direction="column" gap="16">
             {children}
-            <Layout align="center" column gap="4">
-                <Txt as="header" variant="heading-h5">
-                    {header}
-                </Txt>
-                <Txt as="p" style={{ textAlign: bodyAlign }} variant="body-base">
-                    {body}
-                </Txt>
-            </Layout>
+            <Flex
+                align={bodyAlign === 'left' ? 'flex-start' : 'center'}
+                direction="column"
+                gap="4"
+                style={{ textAlign: bodyAlign }}
+            >
+                <Txt variant="heading-h5">{header}</Txt>
+                <Txt variant="body-base">{body}</Txt>
+            </Flex>
             {callToAction && (
                 <Button
                     label={callToAction.label}
@@ -76,7 +69,7 @@ export function EmptyState({ children, header, body, callToAction, bodyAlign = '
                     variant="primary"
                 />
             )}
-        </Layout>
+        </Flex>
     );
 }
 

package/src/components/EmptyState/EmptyStateExample.tsx

@@ -7,14 +7,14 @@ export const presets: Preset<EmptyStateProps>[] = [
         label: 'With Custom Content',
         propState: {
             callToAction: undefined,
-            body: 'Example body',
-            header: 'Example header',
+            body: 'No results found',
+            header: 'We couldn’t find any matching results. Try changing your search.',
             children: (
                 <ExamplePlaceholder
+                    label="Illustration slot or icon slot"
                     style={{
                         height: '200px',
-                        width: '60%',
-                        minWidth: '250px',
+                        width: '200px',
                     }}
                 />
             ),
@@ -23,7 +23,7 @@ export const presets: Preset<EmptyStateProps>[] = [
 ];
 
 export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
+    containerStyle: { width: '400px' },
     render: ({ props: { children, ...props }, Component }) => <Component {...props}>{children}</Component>,
     presets: [
         {

package/src/components/ExamplePlaceholder/ExamplePlaceholder.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { ReactNode } from 'react';
 
 import { Txt } from '-/components/Txt';
 import { ElementProps } from '-/types/common';
@@ -6,12 +6,6 @@ import { ElementProps } from '-/types/common';
 const dimension = (value: number | string) => (typeof value === 'number' ? `${value}px` : `${value}`);
 
 export type ExamplePlaceholderProps = {
-    /**
-     * Whether to hide the size text.
-     *
-     * @default false
-     */
-    hideSize?: boolean;
     /**
      * The height of the placeholder.
      *
@@ -26,12 +20,10 @@ export type ExamplePlaceholderProps = {
      * @type string
      */
     width?: number | string;
-    /**
-     * The direction of the placeholder.
-     *
-     * @default 'row'
-     */
-    direction?: 'column' | 'row';
+    /** An optional label for the placeholder. */
+    label?: string;
+    /** Optional children to display inside the placeholder instead of the label. */
+    children?: ReactNode;
 };
 
 /**
@@ -41,28 +33,31 @@ export type ExamplePlaceholderProps = {
  * @phase Utility
  */
 export function ExamplePlaceholder({
-    hideSize = false,
     height = 100,
     width = '100%',
-    direction = 'row',
+    label,
+    children,
     ...props
 }: ElementProps<ExamplePlaceholderProps, 'div'>) {
-    const ref = useRef<HTMLDivElement | null>(null);
-
     return (
         <div
             {...props}
             data-bspk-utility="example-placeholder"
-            data-example-placeholder
-            ref={ref}
             style={{
-                ...props.style,
+                flexDirection: 'column',
+                gap: 'var(--spacing-sizing-01)',
                 width: dimension(width),
                 height: dimension(height),
-                flexDirection: direction,
+                background: 'var(--surface-neutral-t3-low)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                textAlign: 'center',
+                font: 'var(--body-x-small)',
+                ...props.style,
             }}
         >
-            {!hideSize && (
+            {children || label || (
                 <>
                     <Txt variant="labels-large">{dimension(width)}</Txt>
                     <Txt>&times;</Txt>

package/src/components/Fab/Fab.tsx

@@ -10,7 +10,7 @@ export type FabVariant = 'neutral' | 'primary' | 'secondary';
 
 export type FabProps<As extends ElementType = ElementType> = Pick<
     ButtonProps<As>,
-    'as' | 'icon' | 'iconOnly' | 'innerRef' | 'onClick' | 'toolTip'
+    'aria-label' | 'as' | 'icon' | 'iconOnly' | 'innerRef' | 'onClick' | 'tooltip'
 > &
     Required<Pick<ButtonProps<As>, 'label'>> & {
         /**
@@ -47,13 +47,16 @@ export type FabProps<As extends ElementType = ElementType> = Pick<
  *     import { SvgBolt } from '@bspk/icons/Bolt';
  *     import { Fab } from '@bspk/ui/Fab';
  *
- *     <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
+ *     <div style={{ width: '100%', height: 100 }}>
+ *         <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
+ *     </div>;
  *
  * @name Fab
- * @phase UXReview
+ * @phase Stable
  */
 export function Fab<As extends ElementType = ElementType>(props: AriaAttributes & ElementProps<FabProps<As>, As>) {
     const {
+        'aria-label': ariaLabel,
         size = 'small',
         variant = 'primary',
         iconOnly: iconOnlyProp = false,
@@ -62,7 +65,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
         container = 'local',
         label,
         icon,
-        toolTip,
+        tooltip,
         innerRef,
         ...otherProps
     } = props;
@@ -74,7 +77,7 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
         <As
             {...otherProps}
             {...triggerProps}
-            aria-label={label}
+            aria-label={ariaLabel || label}
             data-bspk="fab"
             data-container={container}
             data-placement={placement}
@@ -109,9 +112,9 @@ export function Fab<As extends ElementType = ElementType>(props: AriaAttributes
         </As>
     );
 
-    if (toolTip || iconOnly)
+    if (tooltip || iconOnly)
         return (
-            <Tooltip label={toolTip || label} placement="top">
+            <Tooltip label={tooltip || label} placement="top">
                 {button}
             </Tooltip>
         );

package/src/components/Fab/FabExample.tsx

@@ -1,4 +1,5 @@
-import { FabProps } from './Fab';
+import { SvgBolt } from '@bspk/icons/Bolt';
+import { Fab, FabProps } from './Fab';
 import { ButtonExample } from '-/components/Button/ButtonExample';
 import { ComponentExample } from '-/utils/demo';
 
@@ -27,3 +28,11 @@ export const FabExample: ComponentExample<FabProps> = {
         },
     },
 };
+
+export const Usage = () => {
+    return (
+        <div style={{ width: '100%', height: 100 }}>
+            <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
+        </div>
+    );
+};

package/src/components/FileUpload/FileUpload.tsx

@@ -90,7 +90,7 @@ export type FileUploadProps = Pick<FileUploadItemProps, 'cancelButtonLabel' | 'o
  *     };
  *
  * @name FileUpload
- * @phase UXReview
+ * @phase Stable
  */
 export function FileUpload({
     dragAndDrop = false,

package/src/components/FileUploadItem/FileUploadItem.tsx

@@ -38,7 +38,7 @@ export type FileUploadItemProps = FileEntry & {
  *     />;
  *
  * @name FileUploadItem
- * @phase UXReview
+ * @phase Stable
  */
 export function FileUploadItem({
     fileName = '',

package/src/components/{Layout/Layout.rtl.test.tsx → Flex/Flex.rtl.test.tsx}

@@ -1,10 +1,10 @@
-import { Layout } from './Layout';
+import { Flex } from './Flex';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const TestBed = () => <Layout>Example layout</Layout>;
+const TestBed = () => <Flex>Example layout</Flex>;
 
-describe('Layout (RTL)', () => {
+describe('Flex (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
 
     it('renders', () => {

package/src/components/Flex/Flex.tsx

@@ -0,0 +1,100 @@
+import { CSSProperties, ElementType, ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
+import { SizingPixels, numToSizingVar } from '-/utils/sizing';
+
+export type FlexProps<As extends ElementType = ElementType> = {
+    /**
+     * The content of the Flex.
+     *
+     * @required
+     */
+    children?: ReactNode;
+    /** The gap between the children. */
+    gap?: SizingPixels | 'auto';
+    /**
+     * The element type to render as.
+     *
+     * @default div
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The align-items style to apply to the Flex.
+     *
+     * @default flex-start
+     */
+    align?: CSSProperties['alignItems'] | 'end' | 'start';
+    /**
+     * The justification style to apply to the Flex.
+     *
+     * @default flex-start
+     */
+    justify?: CSSProperties['justifyContent'];
+    /** The flex-wrap style to apply to the Flex. */
+    wrap?: CSSProperties['flexWrap'];
+    /** The flex-direction style to apply to the Flex. */
+    direction?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
+    /** The padding to apply to the Flex. */
+    padding?: SizingPixels | SizingPixels[];
+};
+
+/**
+ * Utility component used within other components for layout purposes.
+ *
+ * @example
+ *     import { Flex } from '@bspk/ui/Flex';
+ *
+ *     <Flex gap="24" justify="center" style={{ width: '100%' }}>
+ *         <div>Alpha</div>
+ *         <div>Beta</div>
+ *         <div>Gamma</div>
+ *     </Flex>;
+ *
+ * @name Flex
+ * @phase Utility
+ */
+export function Flex<As extends ElementType = ElementType>({
+    children,
+    gap,
+    style,
+    as,
+    align = 'flex-start',
+    justify = 'flex-start',
+    wrap,
+    direction = 'row',
+    padding,
+    ...props
+}: ElementProps<FlexProps<As>, As>) {
+    const As: ElementType = as || 'div';
+
+    const alignItems = align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align;
+
+    const paddingValue = getPaddingValue(padding);
+
+    return (
+        <As
+            {...props}
+            data-bspk-utility="flex"
+            style={{
+                display: 'flex',
+                flexDirection: direction,
+                gap: numToSizingVar(gap),
+                alignItems,
+                justifyContent: justify || 'flex-start',
+                flexWrap: wrap ? 'wrap' : 'nowrap',
+                padding: paddingValue,
+                ...style,
+            }}
+        >
+            {children}
+        </As>
+    );
+}
+
+function getPaddingValue(padding?: SizingPixels | SizingPixels[]): string | undefined {
+    if (!padding) return undefined;
+
+    return (!Array.isArray(padding) ? [padding] : padding).map((p) => numToSizingVar(p)).join(' ');
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Flex/FlexExample.tsx

@@ -0,0 +1,27 @@
+import { Flex, FlexProps } from './Flex';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<FlexProps>[] = [];
+
+export const FlexExample: ComponentExample<FlexProps> = {
+    render: ({ props, Component }) => {
+        return (
+            <Component {...props}>
+                <div>Alpha</div>
+                <div>Beta</div>
+                <div>Gamma</div>
+            </Component>
+        );
+    },
+    presets,
+};
+
+export const Usage = () => {
+    return (
+        <Flex gap="24" justify="center" style={{ width: '100%' }}>
+            <div>Alpha</div>
+            <div>Beta</div>
+            <div>Gamma</div>
+        </Flex>
+    );
+};

package/src/components/Flex/index.tsx

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

package/src/components/FormField/FormFieldExample.tsx

@@ -25,7 +25,6 @@ export const presets: Preset<Partial<ExampleProps>>[] = [
 ];
 
 export const FormFieldExample: ComponentExample<ExampleProps> = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets: presets as Preset<ExampleProps>[],
@@ -184,7 +183,7 @@ export function FormFieldExampleRender({ ...props }: ExampleProps & { syntax?: S
                         onChange={(next) => setValue({ 'date-picker': next })}
                         placeholder="Example input"
                         required={required}
-                        value={value['date-picker'] as Date}
+                        value={value['date-picker'] as string}
                     />
                 </FormField>
                 <FormField {...props} {...internalProps('Input')}>