@bspk/ui 1.3.11 → 1.3.16

package/src/components/Calendar/calendar.scss

@@ -7,13 +7,9 @@
     color: var(--foreground-neutral-on-surface);
     gap: var(--spacing-sizing-01);
     background: var(--surface-neutral-t1-base);
+    border-radius: var(--radius-lg);
     padding: var(--spacing-sizing-02);
 
-    &[data-variant='elevated'] {
-        border-radius: var(--radius-lg);
-        box-shadow: var(--drop-shadow-float);
-    }
-
     [data-header] {
         display: flex;
         justify-content: space-between;
@@ -30,58 +26,68 @@
             [data-bspk='button'] {
                 font: inherit;
 
-                &[data-month] {
-                    padding-right: var(--spacing-sizing-01);
-                }
-
+                &[data-month],
                 &[data-year] {
-                    padding-left: var(--spacing-sizing-01);
+                    padding: 0;
+                    min-width: var(--spacing-sizing-12);
                 }
             }
         }
-    }
-
-    [data-day-headers] {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        text-align: center;
-        color: var(--foreground-neutral-on-surface-variant-01);
 
-        span {
-            height: var(--spacing-sizing-12);
-            line-height: var(--spacing-sizing-12);
+        [data-bspk='button'] {
+            border-radius: var(--radius-sm);
         }
     }
 
-    [data-body] {
-        display: grid;
+    table {
+        display: flex;
+        flex-direction: column;
 
-        [data-bspk='button'] {
-            margin: auto;
+        tr {
+            display: contents;
         }
 
-        [data-non-month-day] {
-            color: var(--foreground-neutral-on-surface-variant-02);
+        td,
+        th {
+            height: var(--spacing-sizing-12);
+            line-height: var(--spacing-sizing-12);
+            text-align: center;
+            border-radius: var(--radius-sm);
+            font-weight: inherit;
         }
-    }
 
-    &[data-kind='day'] {
-        padding: var(--spacing-sizing-01);
-
-        [data-body] {
+        thead {
+            display: grid;
             grid-template-columns: repeat(7, calc(100% / 7));
-        }
-    }
+            text-align: center;
 
-    &[data-kind='month'] {
-        [data-body] {
-            grid-template-columns: repeat(3, calc(100% / 3));
+            th {
+                color: var(--foreground-neutral-on-surface-variant-01);
+            }
         }
-    }
 
-    &[data-kind='year'] {
-        [data-body] {
-            grid-template-columns: repeat(4, calc(100% / 4));
+        tbody {
+            display: grid;
+            grid-template-columns: repeat(7, calc(100% / 7));
+
+            [data-non-month-day] {
+                color: var(--foreground-neutral-on-surface-variant-02);
+            }
+
+            td {
+                &:hover,
+                &:focus-visible {
+                    cursor: pointer;
+                    outline: 2px solid var(--stroke-neutral-focus);
+                    outline-offset: -2px;
+                }
+
+                &[data-selected] {
+                    background: var(--surface-brand-primary);
+                    color: var(--foreground-brand-on-primary);
+                    outline-offset: 2px;
+                }
+            }
         }
     }
 }

package/src/components/Calendar/index.tsx

@@ -1 +1,2 @@
 export * from './Calendar';
+export * from './utils';

package/src/components/Calendar/utils.tsx

@@ -0,0 +1,98 @@
+import { addDays, addMonths, format, isSameDay, parse, isValid } from 'date-fns';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+
+export const COLUMNS_COUNT = 7;
+
+export function parseDate(next: string | undefined) {
+    // don't allow parsing unless the format is approximately mm/dd/yyyy
+    if (!/^\d{1,2}\/\d{1,2}\/\d{2,4}$/.test(next || '')) return undefined;
+
+    const parsedDate = next ? parse(next, 'MM/dd/yyyy', new Date()) : undefined;
+
+    if (!isValid(parsedDate)) return undefined;
+
+    if (parsedDate && parsedDate.getFullYear() < 100) {
+        parsedDate.setFullYear(parsedDate.getFullYear() + 2000);
+    }
+
+    return parsedDate;
+}
+
+export function optionIdGenerator(baseId: string) {
+    return (date: Date) => `${baseId}-option-${format(date, 'MM-dd-yyyy')}`;
+}
+
+type Direction = 'down' | 'left' | 'right' | 'up';
+
+const DIRECTION_INCREMENT: Record<Direction, number> = {
+    // same day next week
+    down: 1 * COLUMNS_COUNT,
+    // next day
+    right: 1,
+    // same day previous week
+    up: -1 * COLUMNS_COUNT,
+    // previous day
+    left: -1,
+};
+
+export const useKeyDownCaptures = ({
+    activeDate,
+    setActiveDate,
+    rows,
+    focusActiveDay,
+}: {
+    activeDate: Date;
+    setActiveDate: (date: Date) => void;
+    rows: Date[][];
+    focusActiveDay: () => void;
+}) => {
+    const handleItemArrows = (direction: Direction) => () => {
+        const next = addDays(activeDate, DIRECTION_INCREMENT[direction]);
+        setActiveDate(next);
+        focusActiveDay();
+    };
+
+    const handleEnterOrSpace = (event: React.KeyboardEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.nodeName === 'TD') target.click();
+    };
+
+    return {
+        handleKeyDownCapture: handleKeyDown(
+            {
+                ArrowDown: handleItemArrows('down'),
+                ArrowUp: handleItemArrows('up'),
+                ArrowLeft: handleItemArrows('left'),
+                ArrowRight: handleItemArrows('right'),
+                End: () => {
+                    const next = rows.find((r) => r.some((d) => isSameDay(d, activeDate)))?.[COLUMNS_COUNT - 1];
+                    if (!next || isSameDay(next, activeDate)) return;
+
+                    setActiveDate(next);
+                    focusActiveDay();
+                },
+                Home: () => {
+                    const next = rows.find((r) => r.some((d) => isSameDay(d, activeDate)))?.[0];
+                    if (!next || isSameDay(next, activeDate)) return;
+
+                    setActiveDate(next);
+                    focusActiveDay();
+                },
+                PageDown: () => {
+                    setActiveDate(addMonths(activeDate, 1));
+                    focusActiveDay();
+                },
+                PageUp: () => {
+                    setActiveDate(addMonths(activeDate, -1));
+                    focusActiveDay();
+                },
+                Space: handleEnterOrSpace,
+                Enter: handleEnterOrSpace,
+            },
+            {
+                preventDefault: true,
+                stopPropagation: true,
+            },
+        ),
+    };
+};

package/src/components/Card/Card.tsx

@@ -35,7 +35,7 @@ export type CardProps = {
  *     </Card>;
  *
  * @name Card
- * @phase UXReview
+ * @phase Stable
  */
 export function Card({ children, variant = 'elevated', innerRef, ...props }: ElementProps<CardProps, 'div'>) {
     return (

package/src/components/Carousel/Carousel.tsx

@@ -52,17 +52,17 @@ export type CarouselProps = {
  *     import { Carousel } from '@bspk/ui/Carousel';
  *
  *     <Carousel label="Example Carousel" width="1/2">
- *         <div>child 1</div>
- *         <div>child 2</div>
- *         <div>child 3</div>
- *         <div>child 4</div>
- *         <div>child 5</div>
- *         <div>child 6</div>
- *         <div>child 7</div>
+ *         <ExamplePlaceholder>Slide 1</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 2</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 3</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 4</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 5</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 6</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 7</ExamplePlaceholder>
  *     </Carousel>;
  *
  * @name Carousel
- * @phase UXReview
+ * @phase Stable
  */
 
 export function Carousel({

package/src/components/Carousel/carousel.scss

@@ -9,7 +9,6 @@
     align-items: center;
     width: 100%;
     position: relative;
-    background: #fff;
     gap: var(--spacing-sizing-02);
 
     [data-items-container] {

package/src/components/Checkbox/Checkbox.tsx

@@ -60,7 +60,7 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  * @element
  *
  * @name Checkbox
- * @phase UXReview
+ * @phase Stable
  */
 export function Checkbox({
     checked: checkedProp = false,

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -63,7 +63,7 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
  *     };
  *
  * @name CheckboxGroup
- * @phase UXReview
+ * @phase Stable
  */
 export function CheckboxGroup({
     onChange,

package/src/components/CheckboxGroupField/CheckboxGroupField.tsx

@@ -10,7 +10,7 @@ export type CheckboxGroupFieldProps = FormFieldControlProps<CheckboxGroupProps>;
  * This component takes properties from the FormField and CheckboxGroup components.
  *
  * @name CheckboxGroupField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/src/components/CheckboxOption/CheckboxOption.tsx

@@ -30,7 +30,7 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  *     };
  *
  * @name CheckboxOption
- * @phase UXReview
+ * @phase Stable
  */
 export function CheckboxOption({
     label: labelProp,

package/src/components/Chip/Chip.tsx

@@ -68,7 +68,7 @@ export type ChipProps = {
  *     </Chip>;
  *
  * @name Chip
- * @phase UXReview
+ * @phase Stable
  */
 export function Chip({
     flat = false,

package/src/components/ChipGroup/ChipGroup.tsx

@@ -30,7 +30,7 @@ export type ChipGroupProps = {
  *     />;
  *
  * @name ChipGroup
- * @phase UXReview
+ * @phase Stable
  */
 export function ChipGroup({ overflow = 'wrap', items }: ChipGroupProps) {
     return (

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

@@ -3,7 +3,7 @@ import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
 const TestBed = () => (
-    <DatePicker name="calendar input" onChange={() => {}} placeholder="Select Date" value={new Date()} />
+    <DatePicker name="calendar input" onChange={() => {}} placeholder="Select Date" value="06/03/1985" />
 );
 
 describe('DatePicker', () => {

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,