@bspk/ui 1.3.11 → 1.3.17

package/dist/components/Calendar/calendar.css

@@ -7,11 +7,8 @@
   color: var(--foreground-neutral-on-surface);
   gap: var(--spacing-sizing-01);
   background: var(--surface-neutral-t1-base);
-  padding: var(--spacing-sizing-02);
-}
-[data-bspk=calendar][data-variant=elevated] {
   border-radius: var(--radius-lg);
-  box-shadow: var(--drop-shadow-float);
+  padding: var(--spacing-sizing-02);
 }
 [data-bspk=calendar] [data-header] {
   display: flex;
@@ -29,42 +26,52 @@
 [data-bspk=calendar] [data-header] [data-title] [data-bspk=button] {
   font: inherit;
 }
-[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-month] {
-  padding-right: var(--spacing-sizing-01);
+[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-month], [data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-year] {
+  padding: 0;
+  min-width: var(--spacing-sizing-12);
 }
-[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-year] {
-  padding-left: var(--spacing-sizing-01);
+[data-bspk=calendar] [data-header] [data-bspk=button] {
+  border-radius: var(--radius-sm);
 }
-[data-bspk=calendar] [data-day-headers] {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  text-align: center;
-  color: var(--foreground-neutral-on-surface-variant-01);
+[data-bspk=calendar] table {
+  display: flex;
+  flex-direction: column;
+}
+[data-bspk=calendar] table tr {
+  display: contents;
 }
-[data-bspk=calendar] [data-day-headers] span {
+[data-bspk=calendar] table td,
+[data-bspk=calendar] table th {
   height: var(--spacing-sizing-12);
   line-height: var(--spacing-sizing-12);
+  text-align: center;
+  border-radius: var(--radius-sm);
+  font-weight: inherit;
 }
-[data-bspk=calendar] [data-body] {
+[data-bspk=calendar] table thead {
   display: grid;
+  grid-template-columns: repeat(7, 14.2857142857%);
+  text-align: center;
 }
-[data-bspk=calendar] [data-body] [data-bspk=button] {
-  margin: auto;
-}
-[data-bspk=calendar] [data-body] [data-non-month-day] {
-  color: var(--foreground-neutral-on-surface-variant-02);
-}
-[data-bspk=calendar][data-kind=day] {
-  padding: var(--spacing-sizing-01);
+[data-bspk=calendar] table thead th {
+  color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=calendar][data-kind=day] [data-body] {
+[data-bspk=calendar] table tbody {
+  display: grid;
   grid-template-columns: repeat(7, 14.2857142857%);
 }
-[data-bspk=calendar][data-kind=month] [data-body] {
-  grid-template-columns: repeat(3, 33.3333333333%);
+[data-bspk=calendar] table tbody [data-non-month-day] {
+  color: var(--foreground-neutral-on-surface-variant-02);
+}
+[data-bspk=calendar] table tbody td:hover, [data-bspk=calendar] table tbody td:focus-visible {
+  cursor: pointer;
+  outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: -2px;
 }
-[data-bspk=calendar][data-kind=year] [data-body] {
-  grid-template-columns: repeat(4, 25%);
+[data-bspk=calendar] table tbody td[data-selected] {
+  background: var(--surface-brand-primary);
+  color: var(--foreground-brand-on-primary);
+  outline-offset: 2px;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Calendar/calendar.css.js

@@ -10,11 +10,8 @@ style.appendChild(document.createTextNode(`[data-bspk=calendar] {
   color: var(--foreground-neutral-on-surface);
   gap: var(--spacing-sizing-01);
   background: var(--surface-neutral-t1-base);
-  padding: var(--spacing-sizing-02);
-}
-[data-bspk=calendar][data-variant=elevated] {
   border-radius: var(--radius-lg);
-  box-shadow: var(--drop-shadow-float);
+  padding: var(--spacing-sizing-02);
 }
 [data-bspk=calendar] [data-header] {
   display: flex;
@@ -32,42 +29,52 @@ style.appendChild(document.createTextNode(`[data-bspk=calendar] {
 [data-bspk=calendar] [data-header] [data-title] [data-bspk=button] {
   font: inherit;
 }
-[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-month] {
-  padding-right: var(--spacing-sizing-01);
+[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-month], [data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-year] {
+  padding: 0;
+  min-width: var(--spacing-sizing-12);
 }
-[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-year] {
-  padding-left: var(--spacing-sizing-01);
+[data-bspk=calendar] [data-header] [data-bspk=button] {
+  border-radius: var(--radius-sm);
 }
-[data-bspk=calendar] [data-day-headers] {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  text-align: center;
-  color: var(--foreground-neutral-on-surface-variant-01);
+[data-bspk=calendar] table {
+  display: flex;
+  flex-direction: column;
+}
+[data-bspk=calendar] table tr {
+  display: contents;
 }
-[data-bspk=calendar] [data-day-headers] span {
+[data-bspk=calendar] table td,
+[data-bspk=calendar] table th {
   height: var(--spacing-sizing-12);
   line-height: var(--spacing-sizing-12);
+  text-align: center;
+  border-radius: var(--radius-sm);
+  font-weight: inherit;
 }
-[data-bspk=calendar] [data-body] {
+[data-bspk=calendar] table thead {
   display: grid;
+  grid-template-columns: repeat(7, 14.2857142857%);
+  text-align: center;
 }
-[data-bspk=calendar] [data-body] [data-bspk=button] {
-  margin: auto;
-}
-[data-bspk=calendar] [data-body] [data-non-month-day] {
-  color: var(--foreground-neutral-on-surface-variant-02);
-}
-[data-bspk=calendar][data-kind=day] {
-  padding: var(--spacing-sizing-01);
+[data-bspk=calendar] table thead th {
+  color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=calendar][data-kind=day] [data-body] {
+[data-bspk=calendar] table tbody {
+  display: grid;
   grid-template-columns: repeat(7, 14.2857142857%);
 }
-[data-bspk=calendar][data-kind=month] [data-body] {
-  grid-template-columns: repeat(3, 33.3333333333%);
+[data-bspk=calendar] table tbody [data-non-month-day] {
+  color: var(--foreground-neutral-on-surface-variant-02);
+}
+[data-bspk=calendar] table tbody td:hover, [data-bspk=calendar] table tbody td:focus-visible {
+  cursor: pointer;
+  outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: -2px;
 }
-[data-bspk=calendar][data-kind=year] [data-body] {
-  grid-template-columns: repeat(4, 25%);
+[data-bspk=calendar] table tbody td[data-selected] {
+  background: var(--surface-brand-primary);
+  color: var(--foreground-brand-on-primary);
+  outline-offset: 2px;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Calendar/index.d.ts

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

package/dist/components/Calendar/index.js

@@ -1,2 +1,3 @@
 export * from './Calendar';
+export * from './utils';
 //# sourceMappingURL=index.js.map

package/dist/components/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Calendar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Calendar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/components/Calendar/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const COLUMNS_COUNT = 7;
+export declare function parseDate(next: string | undefined): Date | undefined;
+export declare function optionIdGenerator(baseId: string): (date: Date) => string;
+export declare const useKeyDownCaptures: ({ activeDate, setActiveDate, rows, focusActiveDay, }: {
+    activeDate: Date;
+    setActiveDate: (date: Date) => void;
+    rows: Date[][];
+    focusActiveDay: () => void;
+}) => {
+    handleKeyDownCapture: (event: import("react").KeyboardEvent) => import("../../utils/keyboard").KeyboardEventCode | null;
+};

package/dist/components/Calendar/utils.js

@@ -0,0 +1,76 @@
+import { addDays, addMonths, format, isSameDay, parse, isValid } from 'date-fns';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+export const COLUMNS_COUNT = 7;
+export function parseDate(next) {
+    // 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) {
+    return (date) => `${baseId}-option-${format(date, 'MM-dd-yyyy')}`;
+}
+const DIRECTION_INCREMENT = {
+    // 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, }) => {
+    const handleItemArrows = (direction) => () => {
+        const next = addDays(activeDate, DIRECTION_INCREMENT[direction]);
+        setActiveDate(next);
+        focusActiveDay();
+    };
+    const handleEnterOrSpace = (event) => {
+        const target = event.target;
+        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,
+        }),
+    };
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/Calendar/utils.js.map

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

package/dist/components/Card/Card.d.ts

@@ -33,7 +33,7 @@ export type CardProps = {
  *     </Card>;
  *
  * @name Card
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Card({ children, variant, innerRef, ...props }: ElementProps<CardProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.js

@@ -16,7 +16,7 @@ import './card.css.js';
  *     </Card>;
  *
  * @name Card
- * @phase UXReview
+ * @phase Stable
  */
 export function Card({ children, variant = 'elevated', innerRef, ...props }) {
     return (_jsx("div", { ...props, "data-bspk": "card", "data-variant": variant, ref: innerRef, children: children }));

package/dist/components/Carousel/Carousel.d.ts

@@ -43,17 +43,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 declare function Carousel({ label, children, itemWidth: widthProp, gap: gapProp, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Carousel/Carousel.js

@@ -15,17 +15,17 @@ import { handleKeyDown } from '../../utils/handleKeyDown';
  *     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({ label = 'carousel', children, itemWidth: widthProp = '80%', gap: gapProp, style, }) {
     const gap = gapProp || 16;

package/dist/components/Carousel/carousel.css

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

package/dist/components/Carousel/carousel.css.js

@@ -11,7 +11,6 @@ style.appendChild(document.createTextNode(`[data-bspk=carousel] {
   align-items: center;
   width: 100%;
   position: relative;
-  background: #fff;
   gap: var(--spacing-sizing-02);
 }
 [data-bspk=carousel] [data-items-container] {

package/dist/components/Checkbox/Checkbox.d.ts

@@ -58,7 +58,7 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  * @element
  *
  * @name Checkbox
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, required, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Checkbox/Checkbox.js

@@ -33,7 +33,7 @@ import { useEffect, useRef } from 'react';
  * @element
  *
  * @name Checkbox
- * @phase UXReview
+ * @phase Stable
  */
 export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, required, ...props }) {
     const indeterminate = !!indeterminateProp;

package/dist/components/Checkbox/checkbox.css

@@ -31,7 +31,6 @@
   justify-content: center;
   position: relative;
   background: var(--background);
-  color: var(--color);
 }
 [data-bspk=checkbox] span svg[data-checked] {
   width: 14px;
@@ -39,6 +38,9 @@
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
 }
+[data-bspk=checkbox] span {
+  color: var(--color);
+}
 [data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled], [readOnly]):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
 }

package/dist/components/Checkbox/checkbox.css.js

@@ -34,7 +34,6 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
   justify-content: center;
   position: relative;
   background: var(--background);
-  color: var(--color);
 }
 [data-bspk=checkbox] span svg[data-checked] {
   width: 14px;
@@ -42,6 +41,9 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
 }
+[data-bspk=checkbox] span {
+  color: var(--color);
+}
 [data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, [disabled], [readOnly]):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
 }

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -56,7 +56,7 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
  *     };
  *
  * @name CheckboxGroup
- * @phase UXReview
+ * @phase Stable
  */
 export declare function CheckboxGroup({ onChange, options, name, value, selectAll, selectAllProps, disabled, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -33,7 +33,7 @@ const ALL_LABEL = 'All';
  *     };
  *
  * @name CheckboxGroup
- * @phase UXReview
+ * @phase Stable
  */
 export function CheckboxGroup({ onChange, options = [], name, value = [], selectAll, selectAllProps, disabled = false, invalid: invalidProp, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-errormessage': ariaErrorMessageProp, ...props }) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({

package/dist/components/CheckboxGroup/checkbox-group.css

@@ -3,5 +3,5 @@
   flex-direction: column;
   gap: 0;
   max-width: 100%;
-  --list-item-height: "auto";
+  --list-item-height: 'auto';
 }

package/dist/components/CheckboxGroup/checkbox-group.css.js

@@ -6,7 +6,7 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox-group] {
   flex-direction: column;
   gap: 0;
   max-width: 100%;
-  --list-item-height: "auto";
+  --list-item-height: 'auto';
 }
 `));
 document.head.appendChild(style);

package/dist/components/CheckboxGroupField/CheckboxGroupField.d.ts

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

package/dist/components/CheckboxGroupField/CheckboxGroupField.js

@@ -7,7 +7,7 @@ import { Field, FieldDescription, FieldError, FieldLabel } from '../Field';
  * This component takes properties from the FormField and CheckboxGroup components.
  *
  * @name CheckboxGroupField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/dist/components/CheckboxOption/CheckboxOption.d.ts

@@ -28,7 +28,7 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  *     };
  *
  * @name CheckboxOption
- * @phase UXReview
+ * @phase Stable
  */
 export declare function CheckboxOption({ label: labelProp, description, disabled, style, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxOption/CheckboxOption.js

@@ -27,7 +27,7 @@ import { ToggleOption } from '../ToggleOption';
  *     };
  *
  * @name CheckboxOption
- * @phase UXReview
+ * @phase Stable
  */
 export function CheckboxOption({ label: labelProp, description, disabled, style, ...checkboxProps }) {
     const label = labelProp || description;

package/dist/components/Chip/Chip.d.ts

@@ -65,7 +65,7 @@ export type ChipProps = {
  *     </Chip>;
  *
  * @name Chip
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Chip({ flat, disabled, label, selected, leadingIcon, onClick, trailingIcon, trailingBadge, }: ChipProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Chip/Chip.js

@@ -13,7 +13,7 @@ import { Badge } from '../Badge';
  *     </Chip>;
  *
  * @name Chip
- * @phase UXReview
+ * @phase Stable
  */
 export function Chip({ flat = false, disabled = false, label, selected = false, leadingIcon, onClick, trailingIcon, trailingBadge, }) {
     return (_jsxs("button", { "data-bspk": "chip", "data-disabled": disabled || undefined, "data-flat": flat || undefined, "data-selected": selected || undefined, "data-touch-target-parent": true, disabled: disabled, onClick: disabled ? undefined : onClick, children: [isValidElement(leadingIcon) && (_jsx("span", { "aria-hidden": "true", "data-chip-icon": true, children: leadingIcon })), _jsx("span", { children: label }), isValidElement(trailingIcon) && (_jsx("span", { "aria-hidden": "true", "data-chip-icon": true, children: trailingIcon })), trailingBadge && !trailingIcon && (_jsx(Badge, { count: trailingBadge.count, size: trailingBadge.size, surfaceBorder: trailingBadge.surfaceBorder })), _jsx("span", { "data-touch-target": true })] }));

package/dist/components/ChipGroup/ChipGroup.d.ts

@@ -28,7 +28,7 @@ export type ChipGroupProps = {
  *     />;
  *
  * @name ChipGroup
- * @phase UXReview
+ * @phase Stable
  */
 export declare function ChipGroup({ overflow, items }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipGroup/ChipGroup.js

@@ -19,7 +19,7 @@ import { Chip } from '../Chip';
  *     />;
  *
  * @name ChipGroup
- * @phase UXReview
+ * @phase Stable
  */
 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 }));

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 */