@medable/nucleus-ui 2.0.0

package/date_format/src/lib/use_date_time_format.js

@@ -0,0 +1,88 @@
+import { DateFormat, DateTimeFormat as I18nDateTimeFormat, Locale as I18nLocale } from 'i18n-core-v4';
+import { useContext } from 'react';
+import { Instant, PlainDate } from 'temporal-luxon';
+import { Locale, LocaleContext, SetLocaleContext, TimeZoneContext } from '../../../i18n/src';
+const isPseudoLocale = (locale) => locale === Locale.en_XA || locale === Locale.ar_XB;
+const toInstant = (date) => date instanceof Date ? Instant.fromEpochMilliseconds(date.getTime()) : Instant.from(date);
+/**
+ * useDateTimeFormat returns formatters for localized instant, zoned, and plain-date values.
+ *
+ * Usage:
+ * - `formatDateTime(date, { dateOnly, showSeconds })` for viewer time zone (user profile or OS).
+ * - `formatDateTimeWithZone(date, { timeZone, dateOnly, showTimeZoneName, showSeconds })` when the time zone is defined by
+ *   your data (e.g. stored event time zone).
+ * - `formatPlainDate(date)` for ISO local dates (YYYY-MM-DD) without time zone or time.
+ *
+ * Example:
+ * const { formatDateTime, formatDateTimeWithZone, formatPlainDate } = useDateTimeFormat();
+ * formatDateTime(new Date(), { showSeconds: true });
+ * formatDateTimeWithZone(new Date(), { timeZone: 'America/New_York', showTimeZoneName: 'always' });
+ * formatPlainDate('2026-12-30');
+ */
+export const useDateTimeFormat = () => {
+    var _a;
+    const locale = useContext(LocaleContext);
+    const setLocale = useContext(SetLocaleContext);
+    const timeZoneContext = useContext(TimeZoneContext);
+    const resolvedLocale = locale.toString();
+    if (!setLocale) {
+        throw new Error('DateTimeFormat must be used within an I18nContextProvider.');
+    }
+    if (isPseudoLocale(resolvedLocale)) {
+        return {
+            formatDateTime: (_date, options) => `[[[${(options === null || options === void 0 ? void 0 : options.dateOnly) ? 'InstantDate' : 'InstantDateTime'}]]]`,
+            formatDateTimeWithZone: (_date, options) => `[[[${(options === null || options === void 0 ? void 0 : options.dateOnly) ? 'ZonedDate' : 'ZonedDateTime'}]]]`,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            formatPlainDate: (_date) => '[[[PlainDate]]]',
+        };
+    }
+    const viewerTimeZone = (_a = timeZoneContext.user) !== null && _a !== void 0 ? _a : timeZoneContext.os;
+    const localeInstance = new I18nLocale(resolvedLocale);
+    return {
+        formatDateTime: (date, options) => {
+            var _a;
+            const dateOnly = (_a = options === null || options === void 0 ? void 0 : options.dateOnly) !== null && _a !== void 0 ? _a : false;
+            const showSeconds = (options === null || options === void 0 ? void 0 : options.showSeconds) === 'always' || (options === null || options === void 0 ? void 0 : options.showSeconds) === true;
+            const includeTimeZone = viewerTimeZone !== timeZoneContext.os;
+            if (!date) {
+                return '';
+            }
+            const timeOptions = !dateOnly && showSeconds ? { second: 'numeric' } : undefined;
+            const formatter = dateOnly
+                ? new DateFormat(localeInstance, includeTimeZone ? { timeZoneName: 'short' } : undefined)
+                : new I18nDateTimeFormat(localeInstance, Object.assign(Object.assign({}, (includeTimeZone && { timeZoneName: 'short' })), timeOptions));
+            const instant = toInstant(date);
+            const zonedDateTime = instant.toZonedDateTimeISO(viewerTimeZone);
+            return formatter.format(zonedDateTime);
+        },
+        formatDateTimeWithZone: (date, options) => {
+            var _a, _b;
+            if (!(options === null || options === void 0 ? void 0 : options.timeZone)) {
+                throw new Error('DateTimeFormat timeZone is required when variant is "zoned".');
+            }
+            if (!date) {
+                return '';
+            }
+            const dateOnly = (_a = options === null || options === void 0 ? void 0 : options.dateOnly) !== null && _a !== void 0 ? _a : false;
+            const showSeconds = (options === null || options === void 0 ? void 0 : options.showSeconds) === 'always' || (options === null || options === void 0 ? void 0 : options.showSeconds) === true;
+            const includeTimeZone = ((_b = options.showTimeZoneName) !== null && _b !== void 0 ? _b : 'auto') === 'always' || options.timeZone !== viewerTimeZone;
+            const timeOptions = !dateOnly && showSeconds ? { second: 'numeric' } : undefined;
+            const formatter = dateOnly
+                ? new DateFormat(localeInstance, includeTimeZone ? { timeZoneName: 'short' } : undefined)
+                : new I18nDateTimeFormat(localeInstance, Object.assign(Object.assign({}, (includeTimeZone ? { timeZoneName: 'short' } : undefined)), timeOptions));
+            const instant = toInstant(date);
+            const zonedDateTime = instant.toZonedDateTimeISO(options.timeZone);
+            return formatter.format(zonedDateTime);
+        },
+        formatPlainDate: (date) => {
+            if (!date) {
+                return '';
+            }
+            const formatter = new DateFormat(localeInstance);
+            const plainDate = PlainDate.from(date);
+            const zonedDateTime = plainDate.toZonedDateTime({ timeZone: viewerTimeZone });
+            return formatter.format(zonedDateTime);
+        },
+    };
+};
+//# sourceMappingURL=use_date_time_format.js.map

package/date_picker/src/index.d.ts

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

package/date_picker/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/date_picker';
+//# sourceMappingURL=index.js.map

package/date_picker/src/lib/calendar/calendar_components.d.ts

@@ -0,0 +1,5 @@
+import { CustomComponents } from 'react-day-picker';
+/**
+ * Component overrides for the react-day-picker calendar
+ */
+export declare const calendarComponents: CustomComponents;

package/date_picker/src/lib/calendar/calendar_components.js

@@ -0,0 +1,17 @@
+import { CalendarDayButton } from './calendar_day_button';
+import { CalendarHead } from './calendar_head';
+import { CalendarNav } from './calendar_nav';
+/**
+ * Component overrides for the react-day-picker calendar
+ */
+export const calendarComponents = {
+    // Overrides the Month / Year, Previous and Next Navigation
+    Caption: CalendarNav,
+    // Overrides the way that the day of the week renders
+    Head: CalendarHead,
+    // Overrides the way that days are rendered
+    Day: CalendarDayButton,
+    // Overrides the footer element to support explicitSave / Cancel actions
+    // Footer: (props: FooterProps) => <>footer for actions</>,
+};
+//# sourceMappingURL=calendar_components.js.map

package/date_picker/src/lib/calendar/calendar_date.d.ts

@@ -0,0 +1,33 @@
+import { DayPickerBase } from 'react-day-picker';
+import { PlainDate } from 'temporal-luxon';
+export interface BaseCalendarProps {
+    /**
+     * The initial month to show in the calendar. Use this prop to let DayPicker
+     * control the current month. If you need to set the month programmatically,
+     * use {@link month]] and [[onMonthChange}.
+     *
+     * @defaultValue The current month
+     */
+    defaultMonth?: PlainDate;
+    /**
+     * The earliest day to start the month navigation.
+     */
+    startDate?: PlainDate;
+    /**
+     * The latest day to end the month navigation.
+     */
+    endDate?: PlainDate;
+}
+/** The selected day, `undefined` when `required={false}` (default) and the day is clicked again. */
+type DateCalendarEventHandler = (day: PlainDate | undefined) => void;
+export interface DateCalendarProps extends BaseCalendarProps {
+    /** The selected day. */
+    value?: PlainDate;
+    /** Event fired when a day is selected. */
+    onChange: DateCalendarEventHandler;
+    /** Make the selection required. */
+    required?: boolean;
+}
+export declare const adaptBaseProps: (props: BaseCalendarProps) => DayPickerBase;
+export declare const DateCalendar: ({ value, onChange, required, ...rest }: DateCalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/date_picker/src/lib/calendar/calendar_date.js

@@ -0,0 +1,16 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DayPicker } from 'react-day-picker';
+import { calendarComponents } from './calendar_components';
+import { calendarStyles } from './calendar_styles';
+import { toDate, toPlainDate } from '../date_utils';
+export const adaptBaseProps = (props) => (Object.assign(Object.assign({}, props), { defaultMonth: props.defaultMonth && toDate(props.defaultMonth), fromDate: props.startDate && toDate(props.startDate), toDate: props.endDate && toDate(props.endDate) }));
+export const DateCalendar = (_a) => {
+    var { value, onChange, required } = _a, rest = __rest(_a, ["value", "onChange", "required"]);
+    const onSelect = (inputDate) => {
+        onChange(inputDate && toPlainDate(inputDate));
+    };
+    const baseProps = adaptBaseProps(rest);
+    return (_jsx(DayPicker, Object.assign({}, baseProps, { defaultMonth: baseProps.defaultMonth || (value && toDate(value)), mode: 'single', required: required, selected: value && toDate(value), onSelect: onSelect, classNames: calendarStyles, components: calendarComponents })));
+};
+//# sourceMappingURL=calendar_date.js.map

package/date_picker/src/lib/calendar/calendar_day_button.d.ts

@@ -0,0 +1,2 @@
+import { DayProps } from 'react-day-picker';
+export declare const CalendarDayButton: (props: DayProps) => import("react/jsx-runtime").JSX.Element | null;

package/date_picker/src/lib/calendar/calendar_day_button.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useRef } from 'react';
+import { useDayRender } from 'react-day-picker';
+import { DateShort, NumberFormat } from '../../../../i18n-shim';
+import { LocaleContext } from '../../../../i18n/src';
+import { toPlainDate, toZonedDateTime } from '../date_utils';
+const getModifierKey = (activeModifiers) => {
+    const { selected, today, range_start, range_end, range_middle, outside, disabled } = activeModifiers;
+    if (range_middle) {
+        return 'middle';
+    }
+    if (selected || range_start || range_end) {
+        return 'selected';
+    }
+    if (disabled) {
+        return 'disabled';
+    }
+    if (today) {
+        return 'today';
+    }
+    if (outside) {
+        return 'outside';
+    }
+    return 'default';
+};
+// TODO: Modify this once we have a Circular Button component
+export const CalendarDayButton = (props) => {
+    const ref = useRef(null);
+    const { buttonProps, activeModifiers } = useDayRender(props.date, props.displayMonth, ref);
+    const locale = useContext(LocaleContext).toString();
+    const handleOnClick = (e) => {
+        var _a;
+        e.preventDefault();
+        (_a = buttonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(buttonProps, e);
+    };
+    if (activeModifiers.hidden) {
+        return null;
+    }
+    return (_jsx("button", Object.assign({ ref: ref }, buttonProps, { onClick: handleOnClick, "aria-label": new DateShort(locale).format(toZonedDateTime(toPlainDate(props.date))), className: `
+            nucleus-box-border nucleus-inline-flex nucleus-h-8 nucleus-w-8 nucleus-max-w-full nucleus-cursor-pointer nucleus-items-center nucleus-justify-center nucleus-border-none nucleus-font-medium nucleus-normal-case nucleus-transition-colors nucleus-m-0
+            nucleus-rounded-full
+            nucleus-p-0 nucleus-px-4 nucleus-py-2
+            hover:nucleus-bg-neutral-600
+            hover:nucleus-text-white
+            focus:nucleus-outline-none focus:nucleus-ring-2 focus:nucleus-ring-primary-500
+            focus-visible:nucleus-text-black active:nucleus-bg-primary-500
+            disabled:nucleus-pointer-events-none disabled:nucleus-text-text-disabled
+            ${{
+            default: 'nucleus-bg-transparent nucleus-text-black',
+            selected: 'nucleus-bg-primary-500 nucleus-text-white hover:nucleus-bg-neutral-300 hover:nucleus-text-black hover:nucleus-ring-primary-700 focus-visible:nucleus-text-white focus-visible:nucleus-bg-primary-500 focus-visible:nucleus-ring-primary-800',
+            today: 'nucleus-bg-transparent nucleus-text-primary-700 nucleus-underline',
+            outside: 'nucleus-bg-transparent nucleus-text-neutral-450',
+            middle: 'nucleus-bg-primary-100 nucleus-text-black',
+            disabled: 'nucleus-bg-transparent disabled:nucleus-line-through',
+        }[getModifierKey(activeModifiers)]}
+          `, children: new NumberFormat(locale).format(props.date.getDate()) })));
+};
+//# sourceMappingURL=calendar_day_button.js.map

package/date_picker/src/lib/calendar/calendar_head.d.ts

@@ -0,0 +1 @@
+export declare const CalendarHead: () => import("react/jsx-runtime").JSX.Element;

package/date_picker/src/lib/calendar/calendar_head.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Now } from 'temporal-luxon';
+import { DayOfWeek, Locale } from '../../../../i18n-shim';
+import { LocaleContext } from '../../../../i18n/src';
+import { Text } from '../../../../typography/src';
+import { toZonedDateTime } from '../date_utils';
+const startOfWeek = (locale) => {
+    const weekStartsOn = locale.weekInfo.firstDay;
+    const date = Now.zonedDateTimeISO();
+    const diff = (date.dayOfWeek < weekStartsOn ? 7 : 0) + date.dayOfWeek - weekStartsOn;
+    return date.add({ days: diff * -1 }).toPlainDate();
+};
+const getWeekdays = (locale) => {
+    const startDate = startOfWeek(locale);
+    return [0, 1, 2, 3, 4, 5, 6].map((days) => startDate.add({ days }));
+};
+export const CalendarHead = () => {
+    const locale = new Locale(useContext(LocaleContext).toString());
+    const weekdays = getWeekdays(locale);
+    return (_jsx("thead", { className: 'nucleus-text-text-secondary nucleus-m-0', children: _jsx("tr", { role: 'row', children: weekdays.map((weekday) => (_jsx("th", { "aria-label": new DayOfWeek(locale, { style: 'long' }).format(toZonedDateTime(weekday)), role: 'columnheader', className: 'nucleus-font-light', children: _jsx(Text, { size: 'sm', children: new DayOfWeek(locale, { style: 'calendarBestFit' }).format(toZonedDateTime(weekday)) }) }, weekday.toString()))) }) }));
+};
+//# sourceMappingURL=calendar_head.js.map

package/date_picker/src/lib/calendar/calendar_nav.d.ts

@@ -0,0 +1,2 @@
+import { CaptionProps } from 'react-day-picker';
+export declare const CalendarNav: (props: CaptionProps) => import("react/jsx-runtime").JSX.Element;

package/date_picker/src/lib/calendar/calendar_nav.js

@@ -0,0 +1,36 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useNavigation } from 'react-day-picker';
+import { YearMonth } from '../../../../i18n-shim';
+import { LocaleContext } from '../../../../i18n/src';
+import { Icon } from '../../../../icon/src';
+import { H5 } from '../../../../typography/src';
+import { CalendarNavButton } from './calendar_nav_button';
+import { toDate, toPlainDate, toZonedDateTime } from '../date_utils';
+export const CalendarNav = (props) => {
+    var _a, _b;
+    const _c = useNavigation(), { 
+    /** The month to display in the calendar. When `numberOfMonths` is greater than one, is the first of the displayed months. */
+    currentMonth, 
+    /** Navigate to the specified month. */
+    goToMonth, 
+    /** The months displayed in the calendar, used to determine the # of months to navigate to */
+    displayMonths } = _c, navProps = __rest(_c, ["currentMonth", "goToMonth", "displayMonths"]);
+    const isPreviousMonthDisabled = navProps.previousMonth === undefined;
+    const isNextMonthDisabled = navProps.nextMonth === undefined;
+    const locale = useContext(LocaleContext).toString();
+    // Number of months to skip when navigating using the previous / next buttons
+    const numberOfMonths = displayMonths.length;
+    // We calculate the previous / next dates here, as the react-day-picker ones are undefined
+    // when the month is out of the `fromDate` / `toDate` range.
+    // However, we still want to show the nav buttons with proper aria labels
+    const previousMonth = (_a = toPlainDate(currentMonth)) === null || _a === void 0 ? void 0 : _a.add({
+        months: numberOfMonths * -1,
+    });
+    const nextMonth = (_b = toPlainDate(currentMonth)) === null || _b === void 0 ? void 0 : _b.add({
+        months: numberOfMonths,
+    });
+    return (_jsxs("nav", { id: props.id, className: 'nucleus-flex nucleus-flex-row nucleus-items-center nucleus-gap-2 nucleus-p-2', children: [_jsx(H5, { children: new YearMonth(locale).format(toZonedDateTime(toPlainDate(currentMonth))) }), _jsxs("div", { className: 'nucleus-flex nucleus-grow nucleus-flex-row nucleus-justify-end nucleus-gap-2', children: [_jsx(CalendarNavButton, { "aria-label": new YearMonth(locale).format(toZonedDateTime(previousMonth)), disabled: isPreviousMonthDisabled, onClick: previousMonth ? () => goToMonth(toDate(previousMonth)) : undefined, children: _jsx(Icon, { name: 'chevronLeft' }) }), _jsx(CalendarNavButton, { "aria-label": new YearMonth(locale).format(toZonedDateTime(nextMonth)), disabled: isNextMonthDisabled, onClick: nextMonth ? () => goToMonth(toDate(nextMonth)) : undefined, children: _jsx(Icon, { name: 'chevronRight', size: 'base' }) })] })] }));
+};
+//# sourceMappingURL=calendar_nav.js.map

package/date_picker/src/lib/calendar/calendar_nav_button.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactElement, JSX } from 'react';
+import { IconProps } from '../../../../icon/src';
+type ButtonNativeProps = Omit<JSX.IntrinsicElements['button'], 'className'>;
+type ButtonProps = ButtonNativeProps & {
+    children: ReactElement<IconProps>;
+};
+export declare const CalendarNavButton: React.FC<ButtonProps>;
+export {};

package/date_picker/src/lib/calendar/calendar_nav_button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO: Drop this once we have a Circular Button component
+export const CalendarNavButton = (props) => {
+    return (_jsx("button", Object.assign({ type: 'button', className: `
+        nucleus-box-border nucleus-inline-flex nucleus-h-8 nucleus-w-8 nucleus-max-w-full nucleus-cursor-pointer nucleus-items-center nucleus-justify-center nucleus-border-none nucleus-transition-colors nucleus-m-0
+        nucleus-rounded-full
+        hover:nucleus-bg-neutral-600
+        hover:nucleus-text-white
+        focus:nucleus-outline-none focus:nucleus-ring-2 focus:nucleus-ring-primary-500
+        focus-visible:nucleus-text-black active:nucleus-bg-primary-500
+        disabled:nucleus-pointer-events-none
+      ` }, props)));
+};
+//# sourceMappingURL=calendar_nav_button.js.map

package/date_picker/src/lib/calendar/calendar_styles.d.ts

@@ -0,0 +1,7 @@
+import { ClassNames } from 'react-day-picker';
+/**
+ * React Day Picker uses CSS classnames for styling.
+ * Most style / functionality overrides are being provided as custom components instead.
+ * See: nucleus-components/packages/date-picker/src/lib/calendar-components.tsx
+ */
+export declare const calendarStyles: ClassNames;

package/date_picker/src/lib/calendar/calendar_styles.js

@@ -0,0 +1,9 @@
+/**
+ * React Day Picker uses CSS classnames for styling.
+ * Most style / functionality overrides are being provided as custom components instead.
+ * See: nucleus-components/packages/date-picker/src/lib/calendar-components.tsx
+ */
+export const calendarStyles = {
+    months: 'nucleus-flex',
+};
+//# sourceMappingURL=calendar_styles.js.map

package/date_picker/src/lib/date_picker.d.ts

@@ -0,0 +1,22 @@
+import { InputProps } from '../../../input/src';
+import { DateCalendarProps } from './calendar/calendar_date';
+export type DatePickerProps = Pick<InputProps, 'id' | 'required' | 'label' | 'description' | 'width'> & Omit<DateCalendarProps, 'value' | 'onChange'> & {
+    value?: DateCalendarProps['value'];
+    onChange: DateCalendarProps['onChange'];
+    hideRequiredIndicator?: boolean;
+    position?: 'bottom' | 'top' | 'bottom-end' | 'top-end';
+    containLabels?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+};
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<InputProps, "label" | "width" | "id" | "required" | "description"> & Omit<DateCalendarProps, "value" | "onChange"> & {
+    value?: DateCalendarProps["value"];
+    onChange: DateCalendarProps["onChange"];
+    hideRequiredIndicator?: boolean;
+    position?: "bottom" | "top" | "bottom-end" | "top-end";
+    containLabels?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/date_picker/src/lib/date_picker.js

@@ -0,0 +1,45 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFloating } from '@floating-ui/react';
+import { Popover, PopoverBackdrop, PopoverPanel } from '@headlessui/react';
+import { forwardRef, useContext, useEffect, useState } from 'react';
+import { LocaleContext, isRtl } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { Input } from '../../../input/src';
+import { DateCalendar } from './calendar/calendar_date';
+import { useDatePicker } from './use_date_picker';
+const PLACEMENT_MAP_LTR = {
+    'bottom': 'bottom-start',
+    'bottom-end': 'bottom-end',
+    'top': 'top-start',
+    'top-end': 'top-end',
+};
+const PLACEMENT_MAP_RTL = {
+    'bottom': 'bottom-end',
+    'bottom-end': 'bottom-start',
+    'top': 'top-end',
+    'top-end': 'top-start',
+};
+export const DatePicker = forwardRef(function DatePicker(props, ref) {
+    var _a;
+    const { description, disabled, errorMessage, hasError, id, label, onChange, required, hideRequiredIndicator, value, width = 'base', position = 'bottom', containLabels } = props, calendarProps = __rest(props, ["description", "disabled", "errorMessage", "hasError", "id", "label", "onChange", "required", "hideRequiredIndicator", "value", "width", "position", "containLabels"]);
+    const { inputValue, inputOnChange, calendarValue, calendarOnChange, error: internalError } = useDatePicker({ value });
+    const { refs, floatingStyles } = useFloating({
+        strategy: 'fixed',
+        placement: isRtl(useContext(LocaleContext)) ? PLACEMENT_MAP_RTL[position] : PLACEMENT_MAP_LTR[position],
+    });
+    // Notify parent component of changes to the calendar date
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(calendarValue);
+    }, [calendarValue]);
+    const [open, setOpen] = useState(false);
+    const onEsc = (event) => {
+        if (event.code === 'Escape') {
+            setOpen(false);
+        }
+    };
+    return (_jsx(Popover, { className: 'nucleus-relative nucleus-inline-block', ref: refs.setReference, children: _jsxs(_Fragment, { children: [open && (_jsx(PopoverBackdrop, { "data-testid": 'calendar-overlay', className: 'nucleus-fixed nucleus-inset-0 nucleus-z-10', onClick: () => setOpen(false), static: true })), _jsx(Input, { ref: ref, id: id, label: label, description: description, required: required, hideRequiredIndicator: hideRequiredIndicator, disabled: disabled, value: inputValue, onChange: inputOnChange, onFocus: () => {
+                        setOpen(true);
+                    }, onKeyDown: onEsc, endAdornment: _jsx(Icon, { name: 'date', "aria-hidden": true }), hasError: !!internalError || hasError, errorMessage: (_a = internalError === null || internalError === void 0 ? void 0 : internalError.message) !== null && _a !== void 0 ? _a : errorMessage, width: width, containLabels: containLabels }), open && (_jsx(PopoverPanel, { ref: refs.setFloating, role: 'dialog', className: 'nucleus-absolute nucleus-z-20 nucleus-box-border nucleus-w-80 nucleus-border-solid nucleus-shadow-lg nucleus-mt-3 nucleus-rounded-md nucleus-border-1 nucleus-border-neutral-300 nucleus-p-8 nucleus-bg-white', onKeyDown: onEsc, static: true, style: floatingStyles, children: _jsx(DateCalendar, Object.assign({}, calendarProps, { required: required, value: calendarValue, onChange: calendarOnChange })) }))] }) }));
+});
+//# sourceMappingURL=date_picker.js.map

package/date_picker/src/lib/date_utils.d.ts

@@ -0,0 +1,4 @@
+import { PlainDate, ZonedDateTime } from 'temporal-luxon';
+export declare const toZonedDateTime: (date: PlainDate) => ZonedDateTime;
+export declare const toPlainDate: (date: Date) => PlainDate;
+export declare const toDate: (plainDate: PlainDate) => Date;

package/date_picker/src/lib/date_utils.js

@@ -0,0 +1,13 @@
+import { Instant, Now } from 'temporal-luxon';
+// TODO Remove this method and refactor usages once Formatters support PlainDate directly
+export const toZonedDateTime = (date) => date.toZonedDateTime({
+    timeZone: Now.timeZone(),
+});
+export const toPlainDate = (date) => {
+    const instant = Instant.fromEpochMilliseconds(date.getTime());
+    const timeZone = Now.timeZone();
+    const zonedDateTime = instant.toZonedDateTimeISO(timeZone);
+    return zonedDateTime.toPlainDate();
+};
+export const toDate = (plainDate) => new Date(toZonedDateTime(plainDate).epochMilliseconds);
+//# sourceMappingURL=date_utils.js.map

package/date_picker/src/lib/use_date_picker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PlainDate } from 'temporal-luxon';
+export type UseDatePickerReturn = {
+    inputValue: string;
+    calendarValue?: PlainDate;
+    calendarOnChange: (date?: PlainDate) => void;
+    inputOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    error?: Error;
+};
+export type UseDayPickerProps = {
+    value?: PlainDate;
+};
+/**
+ * Custom React hook to parse and format dates using input elements and a calendar library.
+ * @param value - The date value for the date picker
+ * @returns An object containing the input value, calendar value, change handlers, and error state
+ */
+export declare const useDatePicker: ({ value }: UseDayPickerProps) => UseDatePickerReturn;

package/date_picker/src/lib/use_date_picker.js

@@ -0,0 +1,74 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import { DateShort } from '../../../i18n-shim';
+import { LocaleContext } from '../../../i18n/src';
+import { toZonedDateTime } from './date_utils';
+/**
+ * Custom React hook to parse and format dates using input elements and a calendar library.
+ * @param value - The date value for the date picker
+ * @returns An object containing the input value, calendar value, change handlers, and error state
+ */
+export const useDatePicker = ({ value }) => {
+    const locale = useContext(LocaleContext).toString();
+    // Formats the date for the input element
+    const formatDate = (date) => new DateShort(locale).format(toZonedDateTime(date));
+    // Parses the date from a string input
+    const parseDate = (input) => new DateShort(locale).parse(input);
+    const currentValueRef = useRef(value);
+    // State variables for input value, calendar value, and error
+    const [inputValue, setInputValue] = useState(value ? formatDate(value) : '');
+    const [calendarValue, setCalendarValue] = useState(value);
+    const [error, setError] = useState();
+    useEffect(() => {
+        const formattedNewValue = value ? formatDate(value) : '';
+        const formattedRefValue = currentValueRef.current ? formatDate(currentValueRef.current) : '';
+        if (formattedRefValue !== formattedNewValue) {
+            setInputValue(formattedNewValue);
+            setCalendarValue(value);
+            currentValueRef.current = value;
+        }
+    }, [value]);
+    /**
+     * Handles changes in the input element.
+     * Parses the input value and sets the error state if the input isn't formatted correctly.
+     */
+    const inputOnChange = (event) => {
+        try {
+            const inputValue = event.target.value;
+            // Keep track of input value to always display it to users, even if it's not valid
+            setInputValue(inputValue);
+            // Parse the input value to make sure it matches the expected format
+            const plainDate = inputValue ? parseDate(inputValue) : undefined;
+            // Clear out the error, as the date string was parsed correctly
+            setError(undefined);
+            // Set the state value
+            setCalendarValue(plainDate);
+        }
+        catch (error) {
+            // Set the error, so the input can display it
+            setError(error);
+            // Set the state value to undefined, as the input value is not valid
+            setCalendarValue(undefined);
+        }
+    };
+    /**
+     * Handles changes in the calendar element.
+     * Resets the error state and updates the input value according to the selected date.
+     */
+    const calendarOnChange = (plainDate) => {
+        // Clear out the error, as any date coming from the calendar is valid
+        setError(undefined);
+        // Update the input value with the incoming date
+        setInputValue(plainDate ? formatDate(plainDate) : '');
+        // Set the state value
+        setCalendarValue(plainDate);
+    };
+    // Return the result object containing the input value, calendar value, change handlers, and error state
+    return {
+        inputValue,
+        calendarValue,
+        calendarOnChange,
+        inputOnChange,
+        error,
+    };
+};
+//# sourceMappingURL=use_date_picker.js.map

package/dropdown/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/dropdown.component';
+export * from './lib/dropdown.types';

package/dropdown/src/index.js

@@ -0,0 +1,3 @@
+export * from './lib/dropdown.component';
+export * from './lib/dropdown.types';
+//# sourceMappingURL=index.js.map

package/dropdown/src/lib/dropdown.component.d.ts

@@ -0,0 +1,9 @@
+import { DropdownProps } from './dropdown.types';
+/**
+ * Dropdown menus allow users to make a selection from a list of actions to take.
+ *
+ * @privateRemarks The dropdown component uses FloatingUI to implement React portal behavior to the dropdown menu,
+ * allowing it to break from the document flow and render above other elements with overflow. for more info see:
+ * https://floating-ui.com/docs
+ */
+export declare const Dropdown: ({ variant, items, label, position, portalContainer, iconName, iconSize, selectorClassName, visibleOnHover, displayTooltip, tooltipDelay, displayTooltipOnlyOnOverflow, width, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;