@bspk/ui 1.3.10 → 1.3.16

package/dist/components/ChipGroup/ChipGroup.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import './chip-group.css.js';
+import { Chip } from '../Chip';
 /**
  * A component that manages the layout of a group of chips.
  *
@@ -7,31 +9,19 @@ import './chip-group.css.js';
  *     import { Chip } from '@bspk/ui/Chip';
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     <ChipGroup wrap={false}>
- *         <Chip
- *             label="chip 1"
- *             leadingIcon={<SvgLightbulb />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 2"
- *             leadingIcon={<SvgIcecream />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 3"
- *             leadingIcon={<SvgSignLanguage />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgClose />}
- *         />
- *     </ChipGroup>;
+ *     <ChipGroup
+ *         overflow="scroll"
+ *         items={[
+ *             { label: 'chip 1', leadingIcon: <SvgLightbulb />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 2', leadingIcon: <SvgIcecream />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 3', leadingIcon: <SvgSignLanguage />, onClick: () => {}, trailingIcon: <SvgClose /> },
+ *         ]}
+ *     />;
  *
  * @name ChipGroup
- * @phase UXReview
+ * @phase Stable
  */
-export function ChipGroup({ children, wrap = true }) {
-    return (_jsx("div", { "data-bspk": "chip-group", "data-wrap": wrap || undefined, children: children }));
+export function ChipGroup({ overflow = 'wrap', items }) {
+    return (_jsx("div", { "data-bspk": "chip-group", "data-scroll": overflow === 'scroll' || undefined, children: items?.length ? items.map((item, idx) => _createElement(Chip, { ...item, key: item.label ?? idx })) : null }));
 }
 //# sourceMappingURL=ChipGroup.js.map

package/dist/components/ChipGroup/ChipGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAqB3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAkB;IAC/D,OAAO,CACH,2BAAe,YAAY,eAAY,IAAI,IAAI,SAAS,YACnD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";;AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,mBAAmB,CAAC;AAapD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,EAAkB;IAClE,OAAO,CACH,2BAAe,YAAY,iBAAc,QAAQ,KAAK,QAAQ,IAAI,SAAS,YACtE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,eAAC,IAAI,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,GAAG,GAAI,CAAC,CAAC,CAAC,CAAC,IAAI,GAC1F,CACT,CAAC;AACN,CAAC"}

package/dist/components/ChipGroup/ChipGroupExample.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 import { SvgClose } from '@bspk/icons/Close';
 import { SvgCloud } from '@bspk/icons/Cloud';
@@ -7,17 +7,72 @@ import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
-import { Chip } from '../Chip';
 export const presets = [
-    { label: 'scroll', propState: { wrap: false } },
-    { label: 'wrap', propState: { wrap: true } },
+    {
+        label: 'Scroll',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                { label: 'chip 1', leadingIcon: _jsx(SvgLightbulb, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+                { label: 'chip 2', leadingIcon: _jsx(SvgIcecream, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+                { label: 'chip 3', leadingIcon: _jsx(SvgSignLanguage, {}), trailingIcon: _jsx(SvgClose, {}) },
+                { label: 'chip 4', leadingIcon: _jsx(SvgOpportunities, {}), trailingIcon: _jsx(SvgClose, {}) },
+                { label: 'chip 5', leadingIcon: _jsx(SvgCloud, {}), trailingIcon: _jsx(SvgKeyboardArrowDown, {}) },
+            ],
+        },
+    },
+    {
+        label: 'Scroll: Flat chips',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                {
+                    flat: true,
+                    label: 'chip 1',
+                    leadingIcon: _jsx(SvgLightbulb, {}),
+                    trailingBadge: { count: 9, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 2',
+                    leadingIcon: _jsx(SvgIcecream, {}),
+                    trailingBadge: { count: 2, size: 'x-small' },
+                },
+                { flat: true, label: 'chip 3', leadingIcon: _jsx(SvgSignLanguage, {}), trailingIcon: _jsx(SvgClose, {}) },
+                {
+                    flat: true,
+                    label: 'chip 4',
+                    leadingIcon: _jsx(SvgOpportunities, {}),
+                    trailingBadge: { count: 5, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 5',
+                    leadingIcon: _jsx(SvgCloud, {}),
+                    trailingBadge: { count: 3, size: 'x-small' },
+                },
+            ],
+        },
+    },
 ];
 export const ChipGroupExample = ({ action }) => ({
     containerStyle: { width: '600px' },
     presets,
+    defaultState: {
+        overflow: 'wrap',
+        items: [
+            { label: 'chip 1', leadingIcon: _jsx(SvgLightbulb, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+            { label: 'chip 2', leadingIcon: _jsx(SvgIcecream, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+            { label: 'chip 3', leadingIcon: _jsx(SvgSignLanguage, {}), trailingIcon: _jsx(SvgClose, {}) },
+            { label: 'chip 4', leadingIcon: _jsx(SvgOpportunities, {}), trailingIcon: _jsx(SvgClose, {}) },
+            { label: 'chip 5', leadingIcon: _jsx(SvgCloud, {}), trailingIcon: _jsx(SvgKeyboardArrowDown, {}) },
+        ],
+    },
     render: ({ props, Component }) => {
-        const handleChipInputClick = () => action('Chip clicked!');
-        return (_jsxs(Component, { ...props, children: [_jsx(Chip, { label: "chip 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(Chip, { label: "chip 2", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(Chip, { label: "chip 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(Chip, { label: "chip 4", leadingIcon: _jsx(SvgOpportunities, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(Chip, { label: "chip 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgKeyboardArrowDown, {}) })] }));
+        return (_jsx(Component, { ...props, items: props.items?.map((item) => ({
+                ...item,
+                onClick: () => action('Chip clicked!'),
+            })) }));
     },
 });
 //# sourceMappingURL=ChipGroupExample.js.map

package/dist/components/ChipGroup/ChipGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIzC,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAC/C,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjF,cAAc,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC3D,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,YAAY,KAAG,EAC7B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,eAAe,KAAG,EAChC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,gBAAgB,KAAG,EACjC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,QAAQ,KAAG,EACzB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,oBAAoB,KAAG,GACxC,IACM,CACf,CAAC;IACN,CAAC;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/ChipGroup/chip-group.css

@@ -2,10 +2,12 @@
   display: flex;
   gap: var(--spacing-sizing-02);
   width: 100%;
-  overflow: auto;
-}
-[data-bspk=chip-group][data-wrap] {
   flex-flow: row wrap;
+  padding-bottom: var(--spacing-sizing-01);
+}
+[data-bspk=chip-group][data-scroll] {
+  overflow: auto;
+  flex-wrap: nowrap;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipGroup/chip-group.css.js

@@ -5,10 +5,12 @@ style.appendChild(document.createTextNode(`[data-bspk=chip-group] {
   display: flex;
   gap: var(--spacing-sizing-02);
   width: 100%;
-  overflow: auto;
-}
-[data-bspk=chip-group][data-wrap] {
   flex-flow: row wrap;
+  padding-bottom: var(--spacing-sizing-01);
+}
+[data-bspk=chip-group][data-scroll] {
+  overflow: auto;
+  flex-wrap: nowrap;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import './date-picker.scss';
 import { InputProps } from '-/components/Input';
 import { FieldControlProps } from '-/types/common';
-export type DatePickerProps = FieldControlProps<Date | undefined> & Pick<InputProps, 'size'> & {
+export type DatePickerProps = Omit<FieldControlProps, 'aria-label' | 'onChange' | 'value'> & Pick<InputProps, 'size'> & {
     /**
      * If the calendar should close when a date is selected.
      *
@@ -14,6 +14,22 @@ export type DatePickerProps = FieldControlProps<Date | undefined> & Pick<InputPr
      * @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;
 };
 /**
  * An input that allows a customer to manually type in a specific date or triggers a the Calendar component to select a
@@ -27,25 +43,21 @@ export type DatePickerProps = FieldControlProps<Date | undefined> & Pick<InputPr
  *     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 declare function DatePicker({ value: valueProp, onChange, disabled, readOnly, closeCalendarOnChange, name, placeholder, invalid: invalidProp, required, size, id: idProp, 'aria-label': ariaLabel, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ value, onChange, disabled, readOnly, closeCalendarOnChange, name, placeholder, invalid: invalidProp, required, size, id: idProp, 'aria-label': ariaLabel, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DatePicker/DatePicker.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './date-picker.css.js';
 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 '../Button';
-import { Calendar } from '../Calendar';
+import { Calendar, parseDate } from '../Calendar';
 import { useFieldInit } from '../Field';
 import { InputElement } from '../Input';
-import { Portal } from '../Portal';
 import { useFloating } from '../../hooks/useFloating';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-const parsableDate = (dateString) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString);
 /**
  * An input that allows a customer to manually type in a specific date or triggers a the Calendar component to select a
  * date.
@@ -23,27 +21,23 @@ const parsableDate = (dateString) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString
  *     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, onChange, disabled, readOnly, closeCalendarOnChange = true, name, placeholder, invalid: invalidProp, required = false, size, id: idProp, 'aria-label': ariaLabel = 'Date picker', }) {
+export function DatePicker({ value, onChange, disabled, readOnly, closeCalendarOnChange = true, name, placeholder, invalid: invalidProp, required = false, size, id: idProp, 'aria-label': ariaLabel = 'Enter or choose date', }) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
         idProp,
         required,
@@ -51,84 +45,27 @@ export function DatePicker({ value: valueProp, onChange, disabled, readOnly, clo
         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(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) => {
-        const parsedDate = parse(next, 'MM/dd/yyyy', new Date());
-        return isValid(parsedDate) ? parsedDate : undefined;
-    };
-    const validate = () => {
-        let nextDate;
-        let nextTextValue = '';
-        if (parsableDate(textValue)) {
-            nextDate = isValidDate(textValue);
-            if (nextDate)
-                nextTextValue = format(nextDate, 'MM/dd/yyyy');
-        }
-        setTextValue(nextTextValue);
-        onChange(nextDate);
-    };
-    const handleTextChange = (nextValue) => {
-        // 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);
-        }
-    };
+    const calendarId = `${id}-calendar`;
+    const activeDate = useMemo(() => parseDate(value) || startOfToday(), [value]);
     return (_jsxs("div", { "data-bspk": "date-picker", ref: (node) => {
-            containerRef.current = node;
             elements.setReference(node);
-        }, children: [_jsx(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 && (_jsx(Button, { icon: _jsx(SvgEvent, {}), iconOnly: true, label: "Toggle calendar", onClick: () => setCalendarVisible((prev) => !prev), variant: "tertiary" })), value: textValue }), calendarVisible && (_jsx(Portal, { children: _jsx("div", { "data-placement": "bottom", ref: (node) => {
-                        elements.setFloating(node);
-                    }, style: { ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }, children: _jsx(Calendar, { focusTrap: true, onChange: (next) => {
-                            if (closeCalendarOnChange)
-                                setCalendarVisible(false);
-                            onChange(next);
-                        }, value: value, variant: "elevated" }) }) }))] }));
+        }, children: [_jsx(InputElement, { "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-label": ariaLabel, disabled: disabled || undefined, id: id, invalid: invalid || undefined, name: name, onChange: onChange, placeholder: placeholder || 'mm/dd/yyyy', readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
+                    !readOnly && (_jsx(Button, { icon: _jsx(SvgEvent, {}), iconOnly: true, label: "Toggle calendar", onClick: () => setCalendarVisible((prev) => !prev), variant: "tertiary" })), value: typeof value === 'string' ? value : '' }), calendarVisible && (_jsx("div", { "aria-label": "Choose Date", "aria-modal": "true", "data-bspk": "calendar-popup", ref: (node) => elements.setFloating(node), role: "dialog", style: { ...floatingStyles }, children: _jsx(Calendar, { focusTrap: true, id: calendarId, onChange: (next) => {
+                        if (closeCalendarOnChange)
+                            setCalendarVisible(false);
+                        onChange(format(next, 'MM/dd/yyyy'));
+                    }, value: activeDate }) }))] }));
 }
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/DatePickerExample.d.ts

@@ -1,3 +1,4 @@
 import { DatePickerProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 export declare const DatePickerExample: ComponentExample<DatePickerProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePickerExample.js

@@ -1,10 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePicker } from '.';
+import { Field, FieldLabel, FieldDescription } from '../Field';
 export const DatePickerExample = {
+    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();
+    return (_jsx("div", { style: { width: 320 }, children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Date" }), _jsx(DatePicker, { name: "date1", onChange: setFieldDate, required: true, value: fieldDate }), _jsx(FieldDescription, { children: "The date picker allows you to select a date." })] }) }));
+};
 //# sourceMappingURL=DatePickerExample.js.map

package/dist/components/DatePicker/DatePickerExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerExample.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,YAAY,EAAE;QACV,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;QAC3B,YAAY,EAAE,aAAa;KAC9B;IACD,YAAY,EAAE,EAAE;IAChB,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}
+{"version":3,"file":"DatePickerExample.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAmB,MAAM,GAAG,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,YAAY,EAAE,aAAa;KAC9B;IACD,YAAY,EAAE,EAAE;IAEhB,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU,CAAC;IAErD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,MAAC,KAAK,eACF,KAAC,UAAU,uBAAkB,EAC7B,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,QAAC,KAAK,EAAE,SAAS,GAAI,EAC9E,KAAC,gBAAgB,+DAAgE,IAC7E,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DatePicker/date-picker.css

@@ -7,5 +7,14 @@
 [data-bspk=date-picker] [data-bspk=input] {
   padding-right: 0;
 }
+[data-bspk=date-picker] [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=date-picker] [data-bspk=inline-alert] {
+  margin-top: var(--spacing-sizing-01);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DatePicker/date-picker.css.js

@@ -10,6 +10,15 @@ style.appendChild(document.createTextNode(`[data-bspk=date-picker] {
 [data-bspk=date-picker] [data-bspk=input] {
   padding-right: 0;
 }
+[data-bspk=date-picker] [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=date-picker] [data-bspk=inline-alert] {
+  margin-top: var(--spacing-sizing-01);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

package/dist/components/DatePickerField/DatePickerField.d.ts

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

package/dist/components/DatePickerField/DatePickerField.js

@@ -7,7 +7,7 @@ import { FormField } from '../FormField';
  * This component takes properties from the FormField and DatePicker components.
  *
  * @name DatePickerField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/dist/components/Divider/Divider.d.ts

@@ -37,14 +37,14 @@ export type DividerProps = {
  * @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 declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Divider/Divider.js

@@ -16,14 +16,14 @@ const insetToVariable = (insetProp) => {
  * @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, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
     return (_jsx("div", { ...props, "aria-hidden": true, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: cssWithVars({

package/dist/components/Divider/DividerExample.js

@@ -1,32 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExamplePlaceholder } from '../ExamplePlaceholder';
-export const presets = [];
+export const presets = [
+    {
+        label: 'Divider - Horizontal',
+        propState: {
+            orientation: 'horizontal',
+        },
+    },
+    {
+        label: 'Divider - Vertical',
+        propState: {
+            orientation: 'vertical',
+        },
+    },
+];
 export const DividerExample = {
     render: ({ props, Component }) => {
-        const style = props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: '300px' };
+        const style = props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: 300 };
         return (_jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: props.orientation === 'vertical' ? 'row' : 'column',
                 alignItems: props.orientation === 'vertical' ? 'center' : 'stretch',
                 justifyContent: props.orientation === 'vertical' ? 'center' : 'stretch',
-                maxWidth: props.orientation !== 'vertical' ? '300px' : 'auto',
-            }, children: [_jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style })] }));
+                maxWidth: props.orientation !== 'vertical' ? 300 : 'auto',
+            }, children: [_jsx(ExamplePlaceholder, { style: { ...style, flexDirection: props.orientation !== 'vertical' ? 'row' : 'column' } }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { style: { ...style, flexDirection: props.orientation !== 'vertical' ? 'row' : 'column' } })] }));
     },
-    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',
-            },
-        },
-    ],
 };
 //# sourceMappingURL=DividerExample.js.map

package/dist/components/Divider/DividerExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA2B,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QACrG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAChE,aAED,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACpG,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,IAClG,CACT,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,sBAAsB;YAC7B,aAAa,EACT,qIAAqI;YACzI,SAAS,EAAE;gBACP,WAAW,EAAE,YAAY;aAC5B;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,aAAa,EACT,gGAAgG;YACpG,SAAS,EAAE;gBACP,WAAW,EAAE,UAAU;aAC1B;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA2B;IAC3C;QACI,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE;YACP,WAAW,EAAE,YAAY;SAC5B;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,WAAW,EAAE,UAAU;SAC1B;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;QACjG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;aAC5D,aAED,KAAC,kBAAkB,IACf,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,GACzF,EACF,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IACf,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,GACzF,IACA,CACT,CAAC;IACN,CAAC;CACJ,CAAC"}