@bspk/ui 1.3.2 → 1.3.4

package/src/components/{ChipUtility/ChipUtility.tsx → Chip/Chip.tsx}

@@ -1,10 +1,10 @@
-import './chip-utility.scss';
+import './chip.scss';
 import { ReactNode, isValidElement } from 'react';
 import { Badge, BadgeProps } from '-/components/Badge';
 
 export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder'>;
 
-export type ChipUtilityProps = {
+export type ChipProps = {
     /**
      * Is the chip disabled.
      *
@@ -61,7 +61,7 @@ export type ChipUtilityProps = {
  * Dynamically generated options that are suggested to the user as responses or prompts.
  *
  * @example
- *     import { ChipUtility } from '@bspk/ui/ChipUtility';
+ *     import { Chip } from '@bspk/ui/Chip';
  *
  *     function Example() {
  *         return (
@@ -71,10 +71,10 @@ export type ChipUtilityProps = {
  *         );
  *     }
  *
- * @name ChipUtility
- * @phase Utility
+ * @name Chip
+ * @phase UXReview
  */
-export function ChipUtility({
+export function Chip({
     flat = false,
     disabled = false,
     label,
@@ -83,10 +83,10 @@ export function ChipUtility({
     onClick,
     trailingIcon,
     trailingBadge,
-}: ChipUtilityProps) {
+}: ChipProps) {
     return (
         <button
-            data-bspk-utility="chip-utility"
+            data-bspk="chip"
             data-disabled={disabled || undefined}
             data-flat={flat || undefined}
             data-selected={selected || undefined}
@@ -94,26 +94,24 @@ export function ChipUtility({
             disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            <>
-                {isValidElement(leadingIcon) && (
-                    <span aria-hidden="true" data-chip-icon>
-                        {leadingIcon}
-                    </span>
-                )}
-                <span>{label}</span>
-                {isValidElement(trailingIcon) && (
-                    <span aria-hidden="true" data-chip-icon>
-                        {trailingIcon}
-                    </span>
-                )}
-                {trailingBadge && !trailingIcon && (
-                    <Badge
-                        count={trailingBadge.count}
-                        size={trailingBadge.size}
-                        surfaceBorder={trailingBadge.surfaceBorder}
-                    />
-                )}
-            </>
+            {isValidElement(leadingIcon) && (
+                <span aria-hidden="true" data-chip-icon>
+                    {leadingIcon}
+                </span>
+            )}
+            <span>{label}</span>
+            {isValidElement(trailingIcon) && (
+                <span aria-hidden="true" data-chip-icon>
+                    {trailingIcon}
+                </span>
+            )}
+            {trailingBadge && !trailingIcon && (
+                <Badge
+                    count={trailingBadge.count}
+                    size={trailingBadge.size}
+                    surfaceBorder={trailingBadge.surfaceBorder}
+                />
+            )}
             <span data-touch-target />
         </button>
     );

package/src/components/{ChipUtility/ChipUtilityExample.tsx → Chip/ChipExample.tsx}

@@ -1,7 +1,7 @@
-import { BadgeItem, ChipUtilityProps } from '.';
+import { BadgeItem, ChipProps } from '.';
 import { ComponentExample, Preset } from '-/utils/demo';
 
-export const presets: Preset<ChipUtilityProps>[] = [
+export const presets: Preset<ChipProps>[] = [
     {
         label: 'Basic',
         propState: {
@@ -59,7 +59,7 @@ export const presets: Preset<ChipUtilityProps>[] = [
     },
 ];
 
-export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
+export const ChipExample: ComponentExample<ChipProps> = {
     render: ({ props, Component }) => <Component {...props} />,
     presets,
 };

package/src/components/{ChipUtility/chip-utility.scss → Chip/chip.scss}

@@ -1,4 +1,4 @@
-[data-bspk-utility='chip-utility'] {
+[data-bspk='chip'] {
     flex-direction: row;
     gap: var(--spacing-sizing-02);
     height: var(--spacing-sizing-08);

package/src/components/Chip/index.tsx

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

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

@@ -1,6 +1,6 @@
 import { ChipGroup } from './ChipGroup';
 import { presets } from './ChipGroupExample';
-import { ChipSuggestion } from '-/components/ChipSuggestion';
+import { Chip } from '-/components/Chip';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
@@ -10,9 +10,9 @@ describe('ChipGroup (RTL)', () => {
             `has no basic a11y issues - ${preset.label}`,
             hasNoBasicA11yIssues(
                 <ChipGroup {...preset.propState}>
-                    <ChipSuggestion label="suggestion 1" onClick={() => {}} />
-                    <ChipSuggestion label="suggestion 2" onClick={() => {}} />
-                    <ChipSuggestion label="suggestion 3" onClick={() => {}} />
+                    <Chip label="suggestion 1" onClick={() => {}} />
+                    <Chip label="suggestion 2" onClick={() => {}} />
+                    <Chip label="suggestion 3" onClick={() => {}} />
                 </ChipGroup>,
             ),
         );
@@ -21,9 +21,9 @@ describe('ChipGroup (RTL)', () => {
     it('renders', () => {
         const { getByText } = render(
             <ChipGroup {...presets[1].propState}>
-                <ChipSuggestion label="suggestion 1" onClick={() => {}} />
-                <ChipSuggestion label="suggestion 2" onClick={() => {}} />
-                <ChipSuggestion label="suggestion 3" onClick={() => {}} />
+                <Chip label="suggestion 1" onClick={() => {}} />
+                <Chip label="suggestion 2" onClick={() => {}} />
+                <Chip label="suggestion 3" onClick={() => {}} />
             </ChipGroup>,
         );
 

package/src/components/ChipGroup/ChipGroup.tsx

@@ -2,10 +2,10 @@ import './chip-group.scss';
 
 import { ReactNode } from 'react';
 
-import { ChipUtilityProps } from '-/components/ChipUtility';
+import { ChipProps } from '-/components/Chip';
 
 export type ChipGroupItem = Pick<
-    ChipUtilityProps,
+    ChipProps,
     'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'
 >;
 
@@ -16,21 +16,22 @@ export type ChipGroupProps = {
      * @default true
      */
     wrap?: boolean;
-    /** Only ChipUtility, ChipInput, ChipFilter, ChipSuggestion, or ChipAssist components should be used as children. */
+    /** Only Chip components should be used as children. */
     children?: ReactNode;
 };
 /**
- * A group of chips that can be used to display a set of related items or actions.
+ * A component that manages the layout of a group of chips.
  *
  * @example
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
+ *     import { Chip } from '@bspk/ui/Chip';
  *
  *     function Example() {
  *         return (
  *             <ChipGroup wrap={false}>
- *                 <ChipSuggestion label="suggestion 1" onClick={() => console.log('Suggestion 1')} />
- *                 <ChipSuggestion label="suggestion 2" onClick={() => console.log('Suggestion 2')} />
- *                 <ChipSuggestion label="suggestion 3" onClick={() => console.log('Suggestion 3')} />
+ *                 <Chip label="chip 1" onClick={() => console.log('Chip 1')} />
+ *                 <Chip label="chip 2" onClick={() => console.log('Chip 2')} />
+ *                 <Chip label="chip 3" onClick={() => console.log('Chip 3')} />
  *             </ChipGroup>
  *         );
  *     }

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -7,153 +7,53 @@ import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
 
-import { ChipAssist } from '-/components/ChipAssist';
-import { ChipFilter } from '-/components/ChipFilter';
-import { ChipGroup, ChipGroupProps } from '-/components/ChipGroup';
-import { ChipInput } from '-/components/ChipInput';
-import { ChipSuggestion } from '-/components/ChipSuggestion';
-import { ChipUtility } from '-/components/ChipUtility';
+import { Chip } from '-/components/Chip';
+import { ChipGroupProps } from '-/components/ChipGroup';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 export const presets: Preset<ChipGroupProps>[] = [
-    { label: 'wrap', propState: { wrap: true } },
     { label: 'scroll', propState: { wrap: false } },
-    { label: 'suggestion', propState: { wrap: true } },
-    { label: 'assist', propState: { wrap: true } },
-    { label: 'input', propState: { wrap: true } },
-    { label: 'filter', propState: { wrap: true } },
+    { label: 'wrap', propState: { wrap: true } },
 ];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
     presets,
-    // containerStyle: { width: '100%' },
-    render: ({ props, preset }) => {
-        if (!preset) return null;
-
+    render: ({ props, Component }) => {
         const handleChipInputClick = () => action('Chip clicked!');
 
-        switch (preset.label) {
-            case 'wrap':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipUtility
-                            label="chip 1"
-                            leadingIcon={<SvgLightbulb />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 2"
-                            leadingIcon={<SvgIcecream />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 3"
-                            leadingIcon={<SvgSignLanguage />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 4"
-                            leadingIcon={<SvgOpportunities />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 5"
-                            leadingIcon={<SvgCloud />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgKeyboardArrowDown />}
-                        />
-                    </ChipGroup>
-                );
-            case 'scroll':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipUtility
-                            label="chip 1"
-                            leadingIcon={<SvgLightbulb />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 2"
-                            leadingIcon={<SvgIcecream />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgChevronRight />}
-                        />
-                        <ChipUtility
-                            label="chip 3"
-                            leadingIcon={<SvgSignLanguage />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 4"
-                            leadingIcon={<SvgOpportunities />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgClose />}
-                        />
-                        <ChipUtility
-                            label="chip 5"
-                            leadingIcon={<SvgCloud />}
-                            onClick={handleChipInputClick}
-                            trailingIcon={<SvgKeyboardArrowDown />}
-                        />
-                    </ChipGroup>
-                );
-            case 'suggestion':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipSuggestion label="suggestion 1" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 2" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 3" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 4" onClick={handleChipInputClick} />
-                        <ChipSuggestion label="suggestion 5" onClick={handleChipInputClick} />
-                    </ChipGroup>
-                );
-            case 'assist':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipAssist label="assist 1" leadingIcon={<SvgLightbulb />} onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 2" onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 3" leadingIcon={<SvgSignLanguage />} onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 4" onClick={handleChipInputClick} />
-                        <ChipAssist label="assist 5" leadingIcon={<SvgCloud />} onClick={handleChipInputClick} />
-                    </ChipGroup>
-                );
-            case 'input':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipInput label="input 1" onClick={handleChipInputClick} removable={false} />
-                        <ChipInput label="input 2" onClick={handleChipInputClick} />
-                        <ChipInput label="input 3" onClick={handleChipInputClick} />
-                        <ChipInput label="input 4" onClick={handleChipInputClick} />
-                        <ChipInput label="input 5" onClick={handleChipInputClick} />
-                    </ChipGroup>
-                );
-            case 'filter':
-                return (
-                    <ChipGroup {...props}>
-                        <ChipFilter label="filter 1" onClick={handleChipInputClick} trailingIcon="SvgClose" />
-                        <ChipFilter label="filter 2" onClick={handleChipInputClick} trailingIcon="SvgChevronRight" />
-                        <ChipFilter
-                            label="filter 3"
-                            onClick={handleChipInputClick}
-                            trailingIcon="SvgKeyboardArrowDown"
-                        />
-                        <ChipFilter label="filter 1" onClick={handleChipInputClick} trailingBadgeCount={5} />
-                        <ChipFilter
-                            label="filter 1"
-                            leadingIcon={<SvgIcecream />}
-                            onClick={handleChipInputClick}
-                            trailingBadgeCount={7}
-                        />
-                    </ChipGroup>
-                );
-            default:
-                return null;
-        }
+        return (
+            <Component {...props}>
+                <Chip
+                    label="chip 1"
+                    leadingIcon={<SvgLightbulb />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgChevronRight />}
+                />
+                <Chip
+                    label="chip 2"
+                    leadingIcon={<SvgIcecream />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgChevronRight />}
+                />
+                <Chip
+                    label="chip 3"
+                    leadingIcon={<SvgSignLanguage />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgClose />}
+                />
+                <Chip
+                    label="chip 4"
+                    leadingIcon={<SvgOpportunities />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgClose />}
+                />
+                <Chip
+                    label="chip 5"
+                    leadingIcon={<SvgCloud />}
+                    onClick={handleChipInputClick}
+                    trailingIcon={<SvgKeyboardArrowDown />}
+                />
+            </Component>
+        );
     },
 });

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

@@ -0,0 +1,17 @@
+import { DatePicker } from './';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <DatePicker name="calendar input" onChange={() => {}} placeholder="Select Date" value={new Date()} />
+);
+
+describe('DatePicker', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByPlaceholderText } = render(<TestBed />);
+
+        expect(getByPlaceholderText('Select Date')).toBeInTheDocument();
+    });
+});

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,227 @@
+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 { Button } from '-/components/Button';
+import { Calendar } 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> &
+    Pick<InputProps, 'size'> & {
+        /**
+         * If the calendar should close when a date is selected.
+         *
+         * @default true
+         */
+        closeCalendarOnChange?: boolean;
+        /**
+         * The placeholder text for the date input field.
+         *
+         * @default mm/dd/yyyy
+         */
+        placeholder?: string;
+    };
+
+/**
+ * An input that allows a customer to manually type in a specific date or triggers a the Calendar component to select a
+ * date.
+ *
+ * For a more complete example with field usage, see the DatePickerField component.
+ *
+ * @example
+ *     import { DatePicker } from '@bspk/ui/DatePicker';
+ *     import { Field, FieldLabel } from '@bspk/ui/Field';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleStandalone() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *         return <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Date</FieldLabel>
+ *                 <DatePicker name="date1" value={date} onChange={setDate} />
+ *                 <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name DatePicker
+ * @phase UXReview
+ */
+export function DatePicker({
+    value: valueProp,
+    onChange,
+    disabled,
+    readOnly,
+    closeCalendarOnChange = true,
+    name,
+    placeholder,
+    invalid: invalidProp,
+    required = false,
+    size,
+    id: idProp,
+    'aria-label': ariaLabel = 'Date picker',
+}: DatePickerProps) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        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',
+        strategy: 'absolute',
+        offsetOptions: 4,
+        refWidth: true,
+    });
+
+    useOutsideClick({
+        elements: [elements.floating, containerRef.current],
+        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);
+
+        setTextValue(nextValue);
+
+        if (parsableDate(nextValue)) {
+            const next = isValidDate(nextValue);
+            if (next) onChange(next);
+        }
+    };
+
+    return (
+        <div
+            data-bspk="date-picker"
+            ref={(node) => {
+                containerRef.current = node;
+                elements.setReference(node);
+            }}
+        >
+            <InputElement
+                aria-describedby={ariaDescribedBy || undefined}
+                aria-errormessage={ariaErrorMessage || undefined}
+                aria-label={ariaLabel}
+                disabled={disabled || undefined}
+                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();
+                    }
+                }}
+                placeholder={placeholder || 'mm/dd/yyyy'}
+                readOnly={readOnly}
+                required={required}
+                showClearButton={false}
+                size={size}
+                trailing={
+                    !disabled &&
+                    !readOnly && (
+                        <Button
+                            icon={<SvgEvent />}
+                            iconOnly
+                            label="Toggle calendar"
+                            onClick={() => setCalendarVisible((prev) => !prev)}
+                            variant="tertiary"
+                        />
+                    )
+                }
+                value={textValue}
+            />
+            {calendarVisible && (
+                <Portal>
+                    <div
+                        data-placement="bottom"
+                        ref={(node) => {
+                            elements.setFloating(node);
+                        }}
+                        style={{ ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }}
+                    >
+                        <Calendar
+                            focusTrap={true}
+                            onChange={(next) => {
+                                if (closeCalendarOnChange) setCalendarVisible(false);
+                                onChange(next);
+                            }}
+                            value={value}
+                            variant="elevated"
+                        />
+                    </div>
+                </Portal>
+            )}
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/DatePicker/DatePickerExample.tsx

@@ -0,0 +1,12 @@
+import { DatePickerProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const DatePickerExample: ComponentExample<DatePickerProps> = {
+    defaultState: {
+        value: new Date(1985, 5, 3),
+        'aria-label': 'Select date',
+    },
+    disableProps: [],
+    sections: [],
+    variants: false,
+};

package/src/components/{DateInput/date-input.scss → DatePicker/date-picker.scss}

@@ -1,11 +1,10 @@
-[data-bspk='date-input'] {
+[data-bspk='date-picker'] {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    min-width: 360px;
     width: 100%;
 
-    [data-bspk='text-input'] {
+    [data-bspk='input'] {
         padding-right: 0;
     }
 }

package/src/components/DatePicker/index.tsx

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