draft-components 1.13.0 → 2.0.1

package/dist/components/button/button.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Spinner } from '../spinner/index.js';
+export const Button = forwardRef(function Button({ fullWidth, disabled, loading, buttonStyle = 'filled', size = 'sm', tint = 'default', iconLeft, iconRight, caption, className, children, type = 'button', renderAs, ...props }, ref) {
+    children = (_jsxs(_Fragment, { children: [loading
+                ? _jsx(Spinner, { "data-testid": "button-spinner", size: "1.15em" })
+                : iconLeft, caption ? (_jsxs("div", { className: "dc-button__label", children: [children, _jsx("small", { className: "dc-button__caption", children: caption })] })) : children, iconRight] }));
+    className = classNames(className, 'dc-button', {
+        [`dc-button_style_${buttonStyle}`]: buttonStyle,
+        [`dc-button_tint_${tint}`]: tint,
+        [`dc-button_${size}`]: size,
+        'dc-button_full-width': fullWidth,
+        'dc-button_loading': loading,
+        'dc-button_has_icon-left': iconLeft,
+        'dc-button_has_icon-right': iconRight,
+    });
+    if (typeof renderAs === 'function') {
+        return renderAs({ className, children });
+    }
+    return (_jsx("button", { ref: ref, type: type, disabled: disabled || loading, className: className, ...props, children: children }));
+});

package/dist/components/button/icon-button.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ButtonProps } from './button.js';
+export type IconButtonProps = Omit<ButtonProps, 'caption' | 'iconLeft' | 'iconRight'>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/button/icon-button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Button } from './button.js';
+export const IconButton = forwardRef(function IconButton({ className, children, ...props }, ref) {
+    return _jsx(Button, { ...props, ref: ref, className: classNames('dc-button_icon-only', className), iconLeft: children });
+});

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

@@ -0,0 +1,2 @@
+export * from './button.js';
+export * from './icon-button.js';

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export * from './button.js';
+export * from './icon-button.js';

package/dist/components/button-group/button-group.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function ButtonGroup({ className, children, ...props }) {
+    return (_jsx("div", { ...props, className: classNames(className, 'dc-button-group'), children: children }));
+}

package/dist/components/button-group/index.d.ts

@@ -0,0 +1 @@
+export * from './button-group.js';

package/dist/components/button-group/index.js

@@ -0,0 +1 @@
+export * from './button-group.js';

package/dist/components/caption/caption.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+type CaptionHTMLProps = ComponentPropsWithRef<'div'>;
+type CaptionBaseProps = Omit<CaptionHTMLProps, 'color'>;
+export type CaptionColor = 'gray' | 'blue' | 'green' | 'orange' | 'red';
+export type CaptionProps = {
+    icon?: ReactNode;
+    color?: CaptionColor;
+} & CaptionBaseProps;
+export declare const Caption: import("react").ForwardRefExoticComponent<Omit<CaptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/caption/caption.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const Caption = forwardRef(function Caption({ color = 'gray', icon, children, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: classNames(className, 'dc-caption', {
+            [`dc-caption_color_${color}`]: color,
+        }), children: [icon
+                ? _jsx("span", { className: "dc-caption__icon", children: icon })
+                : null, children] }));
+});

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

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

package/dist/components/caption/index.js

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

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const Checkbox = forwardRef(function Checkbox({ hasMixedState = false, style, className, onChange, onToggle, ...props }, ref) {
+    return (_jsxs("label", { style: style, className: classNames('dc-checkbox', className), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), _jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? (_jsx(DashIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon" })) : (_jsx(CheckIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon" })) })] }));
+});
+function CheckIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: _jsx("path", { d: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DashIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: _jsx("path", { d: "M5 10H15", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round" }) }));
+}

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

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

package/dist/components/checkbox/index.js

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

package/dist/components/color-picker/color-picker-button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function ColorPickerButton({ style, className, label, name, color, value, checked, defaultChecked, onChange, onChangeValue, }) {
+    const customProperties = {
+        '--dc-color-picker-btn-color': color,
+    };
+    return (_jsxs("label", { style: { ...customProperties, ...style }, className: classNames('dc-color-picker__btn', className), children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: (event) => {
+                    onChange?.(event);
+                    onChangeValue?.(value);
+                } }), _jsx("span", { className: "dc-color-picker__btn-check", "aria-hidden": true }), label] }));
+}

package/{esm → dist}/components/color-picker/color-picker.js

@@ -1,9 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
 import { ColorPickerButton } from './color-picker-button.js';
-
-function ColorPicker({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }) {
-    return (jsx("fieldset", { ...props, disabled: disabled, className: classNames(className, {
+export function ColorPicker({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }) {
+    return (_jsx("fieldset", { ...props, disabled: disabled, className: classNames(className, {
             'dc-color-picker': true,
             'dc-color-picker_disabled': disabled,
         }), children: options.map((option) => {
@@ -15,8 +14,6 @@ function ColorPicker({ className, name, disabled, options, value, defaultValue,
             else if (defaultValue !== undefined) {
                 defaultChecked = option.value === defaultValue;
             }
-            return (jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, onChangeValue: onChangeValue }, option.value));
+            return (_jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, onChangeValue: onChangeValue }, option.value));
         }) }));
 }
-
-export { ColorPicker };

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './color-picker.js';

package/dist/components/color-picker/index.js

@@ -0,0 +1 @@
+export * from './color-picker.js';

package/{esm → dist}/components/date-picker/calendar-day.js

@@ -1,15 +1,12 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
-
-function CalendarDay({ date, dateISO, locale, isSelected, isDisabled, isFocusable, isToday, isWeekend, inRange, isRangeStart, isRangeEnd, ...props }) {
-    return (jsx("button", { ...props, className: classNames('dc-calendar-day', {
+export function CalendarDay({ date, dateISO, locale, isSelected, isDisabled, isFocusable, isToday, isWeekend, inRange, isRangeStart, isRangeEnd, ...props }) {
+    return (_jsx("button", { ...props, className: classNames('dc-calendar-day', {
             'dc-calendar-day_selected': isSelected,
             'dc-calendar-day_today': isToday,
             'dc-calendar-day_weekend': isWeekend,
             'dc-calendar-day_in-range': inRange,
             'dc-calendar-day_range-start': isRangeStart,
             'dc-calendar-day_range-end': isRangeEnd,
-        }), disabled: isDisabled, tabIndex: isFocusable ? 0 : -1, "data-date": dateISO, "aria-label": date.toLocaleString(locale, { dateStyle: 'long' }), children: jsx("span", { className: "dc-calendar-day__body", children: date.getDate() }) }));
+        }), disabled: isDisabled, tabIndex: isFocusable ? 0 : -1, "data-date": dateISO, "aria-label": date.toLocaleString(locale, { dateStyle: 'long' }), children: _jsx("span", { className: "dc-calendar-day__body", children: date.getDate() }) }));
 }
-
-export { CalendarDay };

package/{types → dist}/components/date-picker/calendar-grid-head.d.ts

@@ -1,4 +1,4 @@
-import { Weekday } from './date-helpers';
+import { Weekday } from './date-helpers.js';
 export type CalendarGridHeadProps = {
     locale?: string;
     weekStartsOn?: Weekday;

package/dist/components/date-picker/calendar-grid-head.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DAYS_IN_WEEK, addDays, getStartOfWeek } from './date-helpers.js';
+export function CalendarGridHead({ locale, weekStartsOn, }) {
+    const columns = [];
+    const monday = getStartOfWeek(new Date(), weekStartsOn);
+    for (let weekday = 0; weekday < DAYS_IN_WEEK; weekday += 1) {
+        const date = addDays(monday, weekday);
+        columns.push(_jsx("th", { role: "columnheader", abbr: date.toLocaleDateString(locale, { weekday: 'long' }), children: date.toLocaleDateString(locale, { weekday: 'short' }) }, weekday));
+    }
+    return (_jsx("thead", { children: _jsx("tr", { role: "row", children: columns }) }));
+}

package/{types → dist}/components/date-picker/calendar-grid.d.ts

@@ -1,5 +1,5 @@
-import { type Weekday } from './date-helpers';
-import { CalendarDayProps } from './calendar-day';
+import { type Weekday } from './date-helpers.js';
+import { CalendarDayProps } from './calendar-day.js';
 export type GetCalendarDayProps = (date: Date) => Pick<CalendarDayProps, 'isSelected' | 'inRange' | 'isRangeStart' | 'isRangeEnd'>;
 export type CalendarGridProps = {
     focusDay: Date;

package/{esm → dist}/components/date-picker/calendar-grid.js

@@ -1,10 +1,9 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardKeys } from '../../lib/keyboard-keys.js';
-import { getStartOfMonth, getEndOfMonth, getStartOfWeek, getEndOfWeek, toDateISO, isSameDay, isWeekend, addDays, DAYS_IN_WEEK, addYears, addMonths } from './date-helpers.js';
+import { DAYS_IN_WEEK, addDays, addMonths, addYears, getEndOfMonth, getEndOfWeek, getStartOfMonth, getStartOfWeek, isSameDay, isWeekend, toDateISO, } from './date-helpers.js';
 import { CalendarGridHead } from './calendar-grid-head.js';
 import { CalendarDay } from './calendar-day.js';
-
-function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn, getDayProps, onHoverDay, onFocusDay, onSelectDay, onChangeFocusDay, }) {
+export function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn, getDayProps, onHoverDay, onFocusDay, onSelectDay, onChangeFocusDay, }) {
     const today = new Date();
     const monthStart = getStartOfMonth(focusDay);
     const monthEnd = getEndOfMonth(focusDay);
@@ -25,13 +24,13 @@ function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn, getDay
             const inDisplayedMonth = date >= monthStart && date <= monthEnd;
             let calendarDay = null;
             if (inDisplayedMonth) {
-                calendarDay = jsx(CalendarDay, { ...getDayProps?.(date), date: date, dateISO: dateISO, locale: locale, isToday: isSameDay(date, today), isWeekend: isWeekend(date), isFocusable: isSameDay(date, focusDay), isDisabled: (minDate != null && date < minDate) ||
+                calendarDay = _jsx(CalendarDay, { ...getDayProps?.(date), date: date, dateISO: dateISO, locale: locale, isToday: isSameDay(date, today), isWeekend: isWeekend(date), isFocusable: isSameDay(date, focusDay), isDisabled: (minDate != null && date < minDate) ||
                         (maxDate != null && date > maxDate), onClick: handleSelectDay(date), onMouseEnter: handleHoverDay(date) });
             }
-            columns.push(jsx("td", { role: "gridcell", children: calendarDay }, dateISO));
+            columns.push(_jsx("td", { role: "gridcell", children: calendarDay }, dateISO));
             date = addDays(date, 1);
         }
-        rows.push(jsx("tr", { role: "row", children: columns }, `week-${week}`));
+        rows.push(_jsx("tr", { role: "row", children: columns }, `week-${week}`));
         week += 1;
     }
     function handleSelectDay(date) {
@@ -98,7 +97,5 @@ function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn, getDay
             }, 0);
         }
     }
-    return (jsxs("table", { className: "dc-calendar__grid", role: "grid", "aria-label": ariaLabel, children: [jsx(CalendarGridHead, { locale: locale, weekStartsOn: weekStartsOn }), jsx("tbody", { onKeyDown: handleKeydown, children: rows })] }));
+    return (_jsxs("table", { className: "dc-calendar__grid", role: "grid", "aria-label": ariaLabel, children: [_jsx(CalendarGridHead, { locale: locale, weekStartsOn: weekStartsOn }), _jsx("tbody", { role: "presentation", onKeyDown: handleKeydown, children: rows })] }));
 }
-
-export { CalendarGrid };

package/dist/components/date-picker/calendar-header.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MONTHS_IN_YEAR, addMonths, setDateMonth, setDateYear } from './date-helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { useEffect, useState } from 'react';
+import { IconButton } from '../button/index.js';
+import { Select } from '../select/index.js';
+import { TextInput } from '../text-input/index.js';
+import { ChevronLeftIcon } from '../hero-icons/24/outline/chevron-left-icon.js';
+import { ChevronRightIcon } from '../hero-icons/24/outline/chevron-right-icon.js';
+export function CalendarHeader({ focusDay, onChangeFocusDay, className, locale, nextMonthButtonLabel = 'next month', prevMonthButtonLabel = 'previous month', monthSelectLabel = 'month', yearInputLabel = 'year', }) {
+    const selectedYear = focusDay.getFullYear();
+    const selectedMonth = focusDay.getMonth();
+    const [year, setYear] = useState(formatYear(selectedYear));
+    useEffect(() => {
+        setYear((prevYear) => (parseYear(prevYear) === selectedYear
+            ? prevYear
+            : formatYear(selectedYear)));
+    }, [selectedYear]);
+    return (_jsxs("div", { className: classNames('dc-calendar__header', className), children: [_jsx(IconButton, { className: "dc-calendar-prev-month", size: "sm", "aria-label": prevMonthButtonLabel, onClick: () => onChangeFocusDay(addMonths(focusDay, -1)), children: _jsx(ChevronLeftIcon, { width: 16, height: 16, strokeWidth: 2 }) }), _jsx(Select, { className: "dc-calendar-month-select", "aria-label": monthSelectLabel, size: "sm", name: "month", value: selectedMonth, onChange: (event) => {
+                    const month = Number(event.target.value);
+                    onChangeFocusDay(setDateMonth(focusDay, month));
+                }, children: generateMonthOptions(locale) }), _jsx(TextInput, { className: "dc-calendar-year-input", "aria-label": yearInputLabel, size: "sm", sizeInChars: 4, value: year, maxLength: 4, onBlur: () => setYear(formatYear(year)), onChangeValue: (value) => {
+                    if (value.match(/^\d*$/)) {
+                        setYear(value);
+                        onChangeFocusDay(setDateYear(focusDay, parseYear(value)));
+                    }
+                } }), _jsx(IconButton, { className: "dc-calendar-next-month", "aria-label": nextMonthButtonLabel, onClick: () => onChangeFocusDay(addMonths(focusDay, 1)), children: _jsx(ChevronRightIcon, { width: 16, height: 16, strokeWidth: 2 }) })] }));
+}
+function generateMonthOptions(locale = 'en') {
+    const options = [];
+    const date = new Date();
+    for (let month = 0; month < MONTHS_IN_YEAR; month += 1) {
+        date.setMonth(month);
+        options.push(_jsx("option", { value: month, children: date.toLocaleDateString(locale, { month: 'long' }) }, month));
+    }
+    return options;
+}
+function formatYear(year) {
+    return String(year).padStart(4, '0');
+}
+function parseYear(year) {
+    return Number(year);
+}

package/{types → dist}/components/date-picker/calendar.d.ts

@@ -1,6 +1,6 @@
-import { Weekday } from './date-helpers';
-import { CalendarHeaderProps } from './calendar-header';
-import { CalendarGridProps } from './calendar-grid';
+import { Weekday } from './date-helpers.js';
+import { CalendarHeaderProps } from './calendar-header.js';
+import { CalendarGridProps } from './calendar-grid.js';
 export type CalendarProps = {
     className?: string;
     defaultFocusDay?: Date | null;

package/dist/components/date-picker/calendar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { getStartOfDay } from './date-helpers.js';
+import { CalendarHeader } from './calendar-header.js';
+import { CalendarGrid } from './calendar-grid.js';
+export function Calendar({ className, defaultFocusDay, minDate, maxDate, locale, weekStartsOn, nextMonthButtonLabel, prevMonthButtonLabel, getDayProps, onHoverDay, onFocusDay, onSelectDay, }) {
+    const [focusDay, setFocusDay] = useState(() => {
+        const focusDate = getStartOfDay(defaultFocusDay ?? new Date());
+        if (minDate && focusDate < minDate) {
+            return minDate;
+        }
+        if (maxDate && focusDate > maxDate) {
+            return maxDate;
+        }
+        return focusDate;
+    });
+    return (_jsxs("div", { className: classNames('dc-calendar', className), children: [_jsx(CalendarHeader, { focusDay: focusDay, onChangeFocusDay: setFocusDay, locale: locale, nextMonthButtonLabel: nextMonthButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel }), _jsx(CalendarGrid, { focusDay: focusDay, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, getDayProps: getDayProps, onHoverDay: onHoverDay, onFocusDay: onFocusDay, onSelectDay: onSelectDay, onChangeFocusDay: setFocusDay })] }));
+}

package/{esm → dist}/components/date-picker/date-helpers.js

@@ -1,58 +1,58 @@
-const MONTHS_IN_YEAR = 12;
-const DAYS_IN_WEEK = 7;
-const LAST_WEEKDAY = 6;
-const DATE_ISO_REGEX = /^([0-9]{4})-?(1[0-2]|0[1-9])-?(3[0-1]|0[1-9]|[1-2][0-9])$/;
-function addYears(date, amount) {
+export const MONTHS_IN_YEAR = 12;
+export const DAYS_IN_WEEK = 7;
+export const LAST_WEEKDAY = 6;
+export const DATE_ISO_REGEX = /^([0-9]{4})-?(1[0-2]|0[1-9])-?(3[0-1]|0[1-9]|[1-2][0-9])$/;
+export function addYears(date, amount) {
     // Use ISO date string to deal with years less than 100.
     return parseDateISO(formatDateISOComponents(date.getFullYear() + amount, date.getMonth(), date.getDate()));
 }
-function setDateYear(date, year) {
+export function setDateYear(date, year) {
     // Use ISO date string to deal with years less than 100.
     return parseDateISO(formatDateISOComponents(year, date.getMonth(), date.getDate()));
 }
-function addMonths(date, amount) {
+export function addMonths(date, amount) {
     date = new Date(date);
     date.setMonth(date.getMonth() + amount);
     return date;
 }
-function setDateMonth(date, month) {
+export function setDateMonth(date, month) {
     date = new Date(date);
     date.setMonth(month);
     return date;
 }
-function addDays(date, amount) {
+export function addDays(date, amount) {
     date = new Date(date);
     date.setDate(date.getDate() + amount);
     return date;
 }
-function getStartOfMonth(date) {
+export function getStartOfMonth(date) {
     date = new Date(date);
     date.setDate(1);
     return date;
 }
-function getEndOfMonth(date) {
+export function getEndOfMonth(date) {
     date = new Date(date);
     date.setDate(1);
     date.setMonth(date.getMonth() + 1);
     date.setDate(0);
     return date;
 }
-function getWeekday(date, weekStartsOn = 0) {
+export function getWeekday(date, weekStartsOn = 0) {
     let day = date.getDay() - weekStartsOn;
     if (day < 0) {
         day += DAYS_IN_WEEK;
     }
     return day;
 }
-function getStartOfWeek(date, weekStartsOn = 0) {
+export function getStartOfWeek(date, weekStartsOn = 0) {
     const weekday = getWeekday(date, weekStartsOn);
     return addDays(date, -weekday);
 }
-function getEndOfWeek(date, weekStartsOn = 0) {
+export function getEndOfWeek(date, weekStartsOn = 0) {
     const weekday = getWeekday(date, weekStartsOn);
     return addDays(date, LAST_WEEKDAY - weekday);
 }
-function getStartOfDay(date) {
+export function getStartOfDay(date) {
     date = new Date(date);
     date.setHours(0);
     date.setMinutes(0);
@@ -60,24 +60,24 @@ function getStartOfDay(date) {
     date.setMilliseconds(0);
     return date;
 }
-function isValidDateISO(value) {
+export function isValidDateISO(value) {
     return DATE_ISO_REGEX.test(value);
 }
-function isSameDay(a, b) {
+export function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate());
 }
-function isWeekend(date) {
+export function isWeekend(date) {
     return date.getDay() === 6 || date.getDay() === 0;
 }
-function parseDateISO(date, error = 'The argument must be a date in the ISO format.') {
+export function parseDateISO(date, error = 'The argument must be a date in the ISO format.') {
     if (!isValidDateISO(date)) {
         throw new RangeError(error);
     }
     return getStartOfDay(new Date(date));
 }
-function toDateISO(date) {
+export function toDateISO(date) {
     return formatDateISOComponents(date.getFullYear(), date.getMonth(), date.getDate());
 }
 function formatDateISOComponents(year, month, day) {
@@ -87,5 +87,3 @@ function formatDateISOComponents(year, month, day) {
         String(day).padStart(2, '0'),
     ].join('-');
 }
-
-export { DATE_ISO_REGEX, DAYS_IN_WEEK, LAST_WEEKDAY, MONTHS_IN_YEAR, addDays, addMonths, addYears, getEndOfMonth, getEndOfWeek, getStartOfDay, getStartOfMonth, getStartOfWeek, getWeekday, isSameDay, isValidDateISO, isWeekend, parseDateISO, setDateMonth, setDateYear, toDateISO };

package/{types → dist}/components/date-picker/date-picker.d.ts

@@ -1,6 +1,6 @@
-import { DateISO, Weekday } from './date-helpers';
+import { DateISO, Weekday } from './date-helpers.js';
 import { ComponentPropsWithoutRef } from 'react';
-import { CalendarProps } from './calendar';
+import { CalendarProps } from './calendar.js';
 type DatePickerHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DatePickerProps = {
     value: DateISO | null;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isSameDay, isValidDateISO, parseDateISO, toDateISO } from './date-helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { parseMinMaxProps } from './parse-min-max-props.js';
+import { Calendar } from './calendar.js';
+export function DatePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
+    const { minDate, maxDate } = parseMinMaxProps({ min, max });
+    const selectedDay = value && isValidDateISO(value)
+        ? parseDateISO(value)
+        : null;
+    const getDayProps = (date) => ({
+        isSelected: selectedDay != null && isSameDay(selectedDay, date),
+    });
+    return (_jsx("div", { ...props, className: classNames('dc-datepicker', className), children: _jsx(Calendar, { defaultFocusDay: selectedDay, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getDayProps, onSelectDay: (date) => onChangeValue(toDateISO(date)) }) }));
+}

package/{types → dist}/components/date-picker/date-range-picker.d.ts

@@ -1,7 +1,7 @@
-import { DateISORange } from './date-range';
-import { DateISO, Weekday } from './date-helpers';
+import { DateISORange } from './date-range.js';
+import { DateISO, Weekday } from './date-helpers.js';
 import { ComponentPropsWithoutRef } from 'react';
-import { CalendarProps } from './calendar';
+import { CalendarProps } from './calendar.js';
 type DateRangePickerHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DateRangePickerProps = {
     value: DateISORange | null;

package/{esm → dist}/components/date-picker/date-range-picker.js

@@ -1,12 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DateRange } from './date-range.js';
-import { isValidDateISO, parseDateISO, isSameDay } from './date-helpers.js';
+import { isSameDay, isValidDateISO, parseDateISO } from './date-helpers.js';
 import { classNames } from '../../lib/react-helpers.js';
 import { parseMinMaxProps } from './parse-min-max-props.js';
 import { useState } from 'react';
 import { Calendar } from './calendar.js';
-
-function DateRangePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
+export function DateRangePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
     const { minDate, maxDate } = parseMinMaxProps({ min, max });
     const selectedRange = parseValue(value);
     const [start, setStart] = useState(null);
@@ -38,7 +37,7 @@ function DateRangePicker({ value, onChangeValue, weekStartsOn = 1, min, max, loc
             setEnd(date);
         }
     };
-    return (jsx("div", { ...props, className: classNames('dc-datepicker', className), children: jsx(Calendar, { defaultFocusDay: selectedRange?.start, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getCalendarDayProps, onHoverDay: updateRange, onFocusDay: updateRange, onSelectDay: (date) => {
+    return (_jsx("div", { ...props, className: classNames('dc-datepicker', className), children: _jsx(Calendar, { defaultFocusDay: selectedRange?.start, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getCalendarDayProps, onHoverDay: updateRange, onFocusDay: updateRange, onSelectDay: (date) => {
                 if (start) {
                     setStart(null);
                     setEnd(null);
@@ -55,5 +54,3 @@ function parseValue(value) {
     }
     return null;
 }
-
-export { DateRangePicker };

package/{types → dist}/components/date-picker/date-range.d.ts

@@ -1,4 +1,4 @@
-import { DateISO } from './date-helpers';
+import { DateISO } from './date-helpers.js';
 export type DateISORange = {
     start: DateISO;
     end: DateISO;

package/{esm → dist}/components/date-picker/date-range.js

@@ -1,6 +1,5 @@
 import { isSameDay, toDateISO } from './date-helpers.js';
-
-class DateRange {
+export class DateRange {
     constructor(start, end) {
         if (start > end) {
             [start, end] = [end, start];
@@ -22,5 +21,3 @@ class DateRange {
         };
     }
 }
-
-export { DateRange };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker.js';
+export * from './date-range-picker.js';

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+export * from './date-picker.js';
+export * from './date-range-picker.js';

package/{types → dist}/components/date-picker/parse-min-max-props.d.ts

@@ -1,4 +1,4 @@
-import { DateISO } from './date-helpers';
+import { DateISO } from './date-helpers.js';
 export declare function parseMinMaxProps(props: {
     min?: DateISO;
     max?: DateISO;

package/{esm → dist}/components/date-picker/parse-min-max-props.js

@@ -1,6 +1,5 @@
 import { parseDateISO } from './date-helpers.js';
-
-function parseMinMaxProps(props) {
+export function parseMinMaxProps(props) {
     const min = props.min;
     const max = props.max;
     const minDate = min
@@ -14,5 +13,3 @@ function parseMinMaxProps(props) {
     }
     return { minDate, maxDate };
 }
-
-export { parseMinMaxProps };

package/{types → dist}/components/date-picker-popover/date-picker-popover.d.ts

@@ -1,6 +1,6 @@
-import { DateISO } from '../date-picker/date-helpers';
+import { DateISO } from '../date-picker/date-helpers.js';
 import { JSX, ReactNode } from 'react';
-import { DatePickerProps } from '../date-picker';
+import { DatePickerProps } from '../date-picker/index.js';
 export type DatePickerChangeValueFn = (value: DateISO) => void;
 export type DatePickerPopoverProps = {
     className?: string;

package/dist/components/date-picker-popover/date-picker-popover.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+import { useRef } from 'react';
+import { Popover } from '../popover/index.js';
+import { DatePicker } from '../date-picker/index.js';
+export function DatePickerPopover({ defaultIsOpen = false, footer, className, children, value, onChangeValue, 
+// DatePickerProps
+min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }) {
+    const popoverRef = useRef(null);
+    const handleChangeValue = (value) => {
+        onChangeValue(value);
+        popoverRef.current?.close();
+    };
+    return (_jsxs(Popover, { ref: popoverRef, className: classNames('dc-date-picker-popover', className), defaultIsOpen: defaultIsOpen, anchor: children, children: [_jsx(DatePicker, { min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: value, onChangeValue: handleChangeValue }), footer] }));
+}

package/dist/components/date-picker-popover/index.d.ts

@@ -0,0 +1 @@
+export * from './date-picker-popover.js';

package/dist/components/date-picker-popover/index.js

@@ -0,0 +1 @@
+export * from './date-picker-popover.js';

package/dist/components/date-range-picker-popover/date-range-picker-popover-footer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/index.js';
+export function DateRangePickerPopoverFooter({ children, cancelButtonLabel, confirmButtonLabel, onClickCancelButton, onClickConfirmButton, }) {
+    return (_jsxs("div", { className: "dc-date-range-picker-popover__footer", children: [Boolean(children) && (_jsx("div", { className: "dc-date-range-picker-popover__footer-content", children: children })), _jsx(Button, { className: "dc-date-range-picker-popover__footer-cancel", buttonStyle: "tinted", onClick: onClickCancelButton, children: cancelButtonLabel }), _jsx(Button, { className: "dc-date-range-picker-popover__footer-confirm", tint: "blue", onClick: onClickConfirmButton, children: confirmButtonLabel })] }));
+}

package/{types → dist}/components/date-range-picker-popover/date-range-picker-popover-presets.d.ts

@@ -1,4 +1,4 @@
-import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types';
+import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types.js';
 export type DateRangePickerPopoverPresetsProps = {
     isCompactView: boolean;
     customPresetLabel: string;