@bspk/ui 1.3.10 → 1.3.16

package/src/components/DatePicker/DatePicker.tsx

@@ -1,19 +1,16 @@
 import './date-picker.scss';
 import { SvgEvent } from '@bspk/icons/Event';
-import { format, isValid, parse } from 'date-fns';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { format, startOfToday } from 'date-fns';
+import { useMemo, useState } from 'react';
 import { Button } from '-/components/Button';
-import { Calendar } from '-/components/Calendar';
+import { Calendar, parseDate } from '-/components/Calendar';
 import { useFieldInit } from '-/components/Field';
 import { InputElement, InputProps } from '-/components/Input';
-import { Portal } from '-/components/Portal';
 import { useFloating } from '-/hooks/useFloating';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { FieldControlProps } from '-/types/common';
 
-const parsableDate = (dateString: string) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString);
-
-export type DatePickerProps = FieldControlProps<Date | undefined> &
+export type DatePickerProps = Omit<FieldControlProps, 'aria-label' | 'onChange' | 'value'> &
     Pick<InputProps, 'size'> & {
         /**
          * If the calendar should close when a date is selected.
@@ -27,6 +24,22 @@ export type DatePickerProps = FieldControlProps<Date | undefined> &
          * @default mm/dd/yyyy
          */
         placeholder?: string;
+        /**
+         * The currently selected date
+         *
+         * String formatted as 'MM/dd/yyyy'.
+         *
+         * @type string
+         */
+        value?: string;
+        /** Fires when the date changes with the new date */
+        onChange: (next: string) => void;
+        /**
+         * The aria-label attribute for the date input field.
+         *
+         * @default Enter or choose date
+         */
+        'aria-label'?: string;
     };
 
 /**
@@ -41,28 +54,24 @@ export type DatePickerProps = FieldControlProps<Date | undefined> &
  *     import { useState } from 'react';
  *
  *     () => {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *         const [fieldDate, setFieldDate] = useState<string>();
  *
  *         return (
- *             <>
- *                 // standalone date picker example
- *                 <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />
- *                 <br />
- *                 // date picker used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Date</FieldLabel>
- *                     <DatePicker name="date1" value={date} onChange={setDate} />
+ *                     <DatePicker name="date1" onChange={setFieldDate} required value={fieldDate} />
  *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name DatePicker
- * @phase UXReview
+ * @phase Stable
  */
 export function DatePicker({
-    value: valueProp,
+    value,
     onChange,
     disabled,
     readOnly,
@@ -73,7 +82,7 @@ export function DatePicker({
     required = false,
     size,
     id: idProp,
-    'aria-label': ariaLabel = 'Date picker',
+    'aria-label': ariaLabel = 'Enter or choose date',
 }: DatePickerProps) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
         idProp,
@@ -83,74 +92,29 @@ export function DatePicker({
         invalidProp,
     });
 
-    const value = useMemo(() => {
-        if (typeof valueProp === 'string') {
-            const parsedDate = new Date(valueProp);
-            return isValid(parsedDate) ? parsedDate : undefined;
-        }
-        return valueProp instanceof Date && isValid(valueProp) ? valueProp : undefined;
-    }, [valueProp]);
-
-    useEffect(() => {
-        const formattedValue = value ? format(value, 'MM/dd/yyyy') : '';
-        setTextValue(formattedValue);
-    }, [value]);
-    const [textValue, setTextValue] = useState(() => (value ? format(value, 'MM/dd/yyyy') : ''));
-
     const [calendarVisible, setCalendarVisible] = useState(false);
-    const containerRef = useRef<HTMLSpanElement | null>(null);
 
     const { elements, floatingStyles } = useFloating({
-        placement: 'bottom',
+        placement: 'bottom-start',
         strategy: 'absolute',
         offsetOptions: 4,
-        refWidth: true,
+        refWidth: false,
     });
 
     useOutsideClick({
-        elements: [elements.floating, containerRef.current],
+        elements: [elements.floating],
         callback: () => setCalendarVisible(false),
         disabled: !calendarVisible,
     });
 
-    const isValidDate = (next: string) => {
-        const parsedDate = parse(next, 'MM/dd/yyyy', new Date());
-        return isValid(parsedDate) ? parsedDate : undefined;
-    };
-
-    const validate = () => {
-        let nextDate: Date | undefined;
-        let nextTextValue = '';
-
-        if (parsableDate(textValue)) {
-            nextDate = isValidDate(textValue);
-            if (nextDate) nextTextValue = format(nextDate, 'MM/dd/yyyy');
-        }
-
-        setTextValue(nextTextValue);
-        onChange(nextDate);
-    };
-
-    const handleTextChange = (nextValue: string) => {
-        // Add slashes as the user types
-        if (/^\d{2}$/.test(nextValue) || /^\d{1,2}\/\d{2}$/.test(nextValue)) nextValue = `${nextValue}/`;
-
-        // Remove extra slashes
-        if (nextValue.endsWith('//')) nextValue = nextValue.slice(0, -1);
+    const calendarId = `${id}-calendar`;
 
-        setTextValue(nextValue);
-
-        if (parsableDate(nextValue)) {
-            const next = isValidDate(nextValue);
-            if (next) onChange(next);
-        }
-    };
+    const activeDate = useMemo(() => parseDate(value) || startOfToday(), [value]);
 
     return (
         <div
             data-bspk="date-picker"
             ref={(node) => {
-                containerRef.current = node;
                 elements.setReference(node);
             }}
         >
@@ -162,25 +126,7 @@ export function DatePicker({
                 id={id}
                 invalid={invalid || undefined}
                 name={name}
-                onBlur={() => validate()}
-                onChange={handleTextChange}
-                onKeyDown={(event) => {
-                    // allow select all and other keyboard shortcuts
-                    if (event.ctrlKey || event.metaKey) {
-                        return;
-                    }
-
-                    // handle backspace and delete to remove the slash and the number before it
-                    if (event.key === 'Backspace' || (event.key === 'Delete' && textValue.endsWith('/'))) {
-                        event.preventDefault();
-                        setTextValue((prev) => prev.slice(0, -2));
-                    }
-
-                    // if a single key and not a number or forward slash ignore
-                    if (event.key.length === 1 && !/[0-9/]/.test(event.key)) {
-                        event.preventDefault();
-                    }
-                }}
+                onChange={onChange}
                 placeholder={placeholder || 'mm/dd/yyyy'}
                 readOnly={readOnly}
                 required={required}
@@ -198,28 +144,27 @@ export function DatePicker({
                         />
                     )
                 }
-                value={textValue}
+                value={typeof value === 'string' ? value : ''}
             />
             {calendarVisible && (
-                <Portal>
-                    <div
-                        data-placement="bottom"
-                        ref={(node) => {
-                            elements.setFloating(node);
+                <div
+                    aria-label="Choose Date"
+                    aria-modal="true"
+                    data-bspk="calendar-popup"
+                    ref={(node) => elements.setFloating(node)}
+                    role="dialog"
+                    style={{ ...floatingStyles }}
+                >
+                    <Calendar
+                        focusTrap
+                        id={calendarId}
+                        onChange={(next) => {
+                            if (closeCalendarOnChange) setCalendarVisible(false);
+                            onChange(format(next, 'MM/dd/yyyy'));
                         }}
-                        style={{ ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }}
-                    >
-                        <Calendar
-                            focusTrap={true}
-                            onChange={(next) => {
-                                if (closeCalendarOnChange) setCalendarVisible(false);
-                                onChange(next);
-                            }}
-                            value={value}
-                            variant="elevated"
-                        />
-                    </div>
-                </Portal>
+                        value={activeDate}
+                    />
+                </div>
             )}
         </div>
     );

package/src/components/DatePicker/DatePickerExample.tsx

@@ -1,12 +1,29 @@
-import { DatePickerProps } from '.';
+import { useState } from 'react';
+import { DatePicker, DatePickerProps } from '.';
+import { Field, FieldLabel, FieldDescription } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const DatePickerExample: ComponentExample<DatePickerProps> = {
+    containerStyle: { width: 320, padding: 0 },
     defaultState: {
-        value: new Date(1985, 5, 3),
+        value: '06/03/1985',
         'aria-label': 'Select date',
     },
     disableProps: [],
-    sections: [],
+
     variants: false,
 };
+
+export const Usage = () => {
+    const [fieldDate, setFieldDate] = useState<string>();
+
+    return (
+        <div style={{ width: 320 }}>
+            <Field>
+                <FieldLabel>Date</FieldLabel>
+                <DatePicker name="date1" onChange={setFieldDate} required value={fieldDate} />
+                <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+            </Field>
+        </div>
+    );
+};

package/src/components/DatePicker/date-picker.scss

@@ -7,6 +7,17 @@
     [data-bspk='input'] {
         padding-right: 0;
     }
+
+    [data-bspk='calendar-popup'] {
+        border-radius: var(--radius-lg);
+        box-shadow: var(--drop-shadow-float);
+        z-index: var(--z-index-dropdown);
+        width: fit-content;
+    }
+
+    [data-bspk='inline-alert'] {
+        margin-top: var(--spacing-sizing-01);
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DatePickerField/DatePickerField.tsx

@@ -9,7 +9,7 @@ export type DatePickerFieldProps = FormFieldControlProps<DatePickerProps>;
  * This component takes properties from the FormField and DatePicker components.
  *
  * @name DatePickerField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/src/components/Divider/Divider.tsx

@@ -46,14 +46,14 @@ const insetToVariable = (insetProp: number | string) => {
  * @example
  *     import { Divider } from '@bspk/ui/Divider';
  *
- *     <div>
- *         <p>Content above the divider</p>
+ *     <div style={{ width: 320 }}>
+ *         <ExamplePlaceholder>Content above the divider</ExamplePlaceholder>
  *         <Divider orientation="horizontal" />
- *         <p>Content below the divider</p>
+ *         <ExamplePlaceholder>Content below the divider</ExamplePlaceholder>
  *     </div>;
  *
  * @name Divider
- * @phase UXReview
+ * @phase Stable
  */
 export function Divider({
     padding = true,

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: [
         {