@evolve.ui/core-components 1.0.0

package/datePicker-DQ32Z8yo.mjs

@@ -0,0 +1,136 @@
+import { ArrowLeft, ArrowRight, CalendarBlank } from "./Icons.mjs";
+import "./DatePickerTarget-CKni-6Rq.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { DateInput } from "./dateInput.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingPortal, autoUpdate, flip, offset, shift, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
+import { DayPicker } from "react-day-picker";
+//#region src/DateTimeInput/datePicker/components/calendar/Calendar.tsx
+const dateToday = /* @__PURE__ */ new Date();
+const Calendar = ({ onSelectDate, selectedDate, ...rest }) => {
+	return /* @__PURE__ */ jsx(DayPicker, {
+		className: "m-sm",
+		classNames: {
+			caption_label: cn("hui-text-h5 pb-sm"),
+			day: cn("h-[40px] w-[40px] rounded-full hover:bg-background-hover"),
+			day_button: cn("hui-text-body-primary h-full w-full text-center"),
+			disabled: cn("bg-background-primary opacity-50 hover:bg-background-primary"),
+			month_caption: cn("flex h-[50px] items-center justify-center"),
+			month_grid: cn("w-full"),
+			months: cn("w-full"),
+			nav: cn("absolute flex w-full justify-between"),
+			outside: cn(""),
+			range_end: "",
+			range_middle: "",
+			range_start: "",
+			root: cn("relative"),
+			selected: cn("rounded-full border-none bg-background-info-dark text-text-inverse hover:bg-background-info-dark"),
+			today: cn("outline -outline-offset-2 outline-border-selected"),
+			week: cn(""),
+			weekday: cn("hui-text-label-mini py-[18px]"),
+			weekdays: cn("border-y border-border-secondary"),
+			weeks: cn("border-t border-border-secondary")
+		},
+		components: {
+			NextMonthButton: (props) => /* @__PURE__ */ jsx(IconButton, {
+				icon: ArrowRight,
+				onClick: props.onClick,
+				size: "sm"
+			}),
+			PreviousMonthButton: (props) => /* @__PURE__ */ jsx(IconButton, {
+				icon: ArrowLeft,
+				onClick: props.onClick,
+				size: "sm"
+			})
+		},
+		"data-testid": "calendar",
+		defaultMonth: dateToday,
+		formatters: { formatWeekdayName: (date) => new Intl.DateTimeFormat("en-US", { weekday: "short" }).format(date) },
+		mode: "single",
+		onSelect: (value) => {
+			if (value instanceof Date) onSelectDate?.(value);
+		},
+		selected: selectedDate,
+		...rest
+	});
+};
+//#endregion
+//#region src/DateTimeInput/datePicker/DatePicker.tsx
+const today = /* @__PURE__ */ new Date();
+const DatePicker = forwardRef(({ calendarProps, closeOnSelect, date: dateProp, disabled, onClear, onValidDateChange, small, zIndex = 15, ...rest }, ref) => {
+	const [date, setDate] = useState(dateProp);
+	useEffect(() => {
+		setDate(dateProp);
+	}, [dateProp]);
+	const handleOnClear = useCallback(() => {
+		setDate(void 0);
+		onClear?.();
+	}, [onClear, setDate]);
+	const [isOpen, setIsOpen] = useState(false);
+	const { context, floatingStyles, refs } = useFloating({
+		middleware: [
+			shift(),
+			offset({
+				crossAxis: -8,
+				mainAxis: 12
+			}),
+			flip()
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		placement: "bottom-start",
+		whileElementsMounted: autoUpdate
+	});
+	const { getFloatingProps, getReferenceProps } = useInteractions([useDismiss(context), useRole(context)]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateInput, {
+		clearAriaLabel: "Clear date",
+		date,
+		disabled,
+		onClear: handleOnClear,
+		onValidDateChange: (value) => {
+			setDate(value);
+			onValidDateChange?.(value);
+		},
+		ref: useMergeRefs([ref, refs.setReference]),
+		small,
+		suffix: /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Open Calendar",
+			"data-testid": "open-calendar-button",
+			disabled,
+			icon: CalendarBlank,
+			onClick: () => setIsOpen(!isOpen),
+			size: "sm",
+			type: "button"
+		}),
+		...getReferenceProps(),
+		...rest
+	}), isOpen && /* @__PURE__ */ jsx(FloatingPortal, {
+		id: "hui-datepicker-target",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "w-full max-w-[312px] cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02",
+			"data-testid": "date-picker-popover",
+			ref: refs.setFloating,
+			style: {
+				...floatingStyles,
+				zIndex
+			},
+			...getFloatingProps(),
+			children: /* @__PURE__ */ jsx(Calendar, {
+				disabled: { before: today },
+				onSelectDate: (date) => {
+					setDate(date);
+					onValidDateChange?.(date);
+					if (closeOnSelect) setIsOpen(false);
+				},
+				selectedDate: date,
+				...calendarProps
+			})
+		})
+	})] });
+});
+//#endregion
+export { DatePicker as t };
+
+//# sourceMappingURL=datePicker-DQ32Z8yo.mjs.map

package/datePicker-DQ32Z8yo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePicker-DQ32Z8yo.mjs","names":[],"sources":["../src/DateTimeInput/datePicker/components/calendar/Calendar.tsx","../src/DateTimeInput/datePicker/DatePicker.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { DayPicker, PropsBase } from 'react-day-picker';\n\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { ArrowLeft, ArrowRight } from '../../../../Icons';\n\nconst dateToday = new Date();\n\nexport type CalendarProps = {\n    onSelectDate?: (date: Date) => void;\n    selectedDate?: Date;\n} & Partial<Omit<PropsBase, 'styles' | 'style' | 'modifiersStyles' | 'components' | 'footer' | 'mode' | 'classNames'>>;\n\nexport const Calendar = ({ onSelectDate, selectedDate, ...rest }: CalendarProps) => {\n    return (\n        <DayPicker\n            className=\"m-sm\"\n            classNames={{\n                caption_label: cn('hui-text-h5 pb-sm'),\n                day: cn('h-[40px] w-[40px] rounded-full hover:bg-background-hover'),\n                day_button: cn('hui-text-body-primary h-full w-full text-center'),\n                disabled: cn('bg-background-primary opacity-50 hover:bg-background-primary'),\n                month_caption: cn('flex h-[50px] items-center justify-center'),\n                month_grid: cn('w-full'),\n                months: cn('w-full'),\n                nav: cn('absolute flex w-full justify-between'),\n                outside: cn(''),\n                range_end: '',\n                range_middle: '',\n                range_start: '',\n                root: cn('relative'),\n                selected: cn(\n                    'rounded-full border-none bg-background-info-dark text-text-inverse hover:bg-background-info-dark'\n                ),\n                today: cn('outline -outline-offset-2 outline-border-selected'),\n                week: cn(''),\n                weekday: cn('hui-text-label-mini py-[18px]'),\n                weekdays: cn('border-y border-border-secondary'),\n                weeks: cn('border-t border-border-secondary'),\n            }}\n            components={{\n                NextMonthButton: (props) => (\n                    <IconButton\n                        icon={ArrowRight}\n                        onClick={props.onClick}\n                        size=\"sm\"\n                    />\n                ),\n                PreviousMonthButton: (props) => (\n                    <IconButton\n                        icon={ArrowLeft}\n                        onClick={props.onClick}\n                        size=\"sm\"\n                    />\n                ),\n            }}\n            data-testid=\"calendar\"\n            defaultMonth={dateToday}\n            formatters={{\n                formatWeekdayName: (date) => new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(date),\n            }}\n            mode=\"single\"\n            onSelect={(value) => {\n                if (value instanceof Date) {\n                    onSelectDate?.(value);\n                }\n            }}\n            selected={selectedDate}\n            {...rest}\n        />\n    );\n};\n","import {\n    autoUpdate,\n    flip,\n    FloatingPortal,\n    offset,\n    shift,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from '@floating-ui/react';\nimport { ComponentProps, forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { IconButton } from '../../IconButton/IconButton';\nimport { CalendarBlank } from '../../Icons';\nimport { DatePickerTargetId } from '../../providers/targets/DatePickerTarget';\nimport { DateInput } from '../dateInput/DateInput';\nimport { Calendar } from './components/calendar/Calendar';\n\nconst today = new Date();\n\ntype Props = {\n    calendarProps?: ComponentProps<typeof Calendar>;\n    closeOnSelect?: boolean;\n    zIndex?: number;\n} & ComponentProps<typeof DateInput>;\n\nexport const DatePicker = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            calendarProps,\n            closeOnSelect,\n            date: dateProp,\n            disabled,\n            onClear,\n            onValidDateChange,\n            small,\n            zIndex = 15,\n            ...rest\n        },\n        ref\n    ) => {\n        const [date, setDate] = useState<Date | undefined>(dateProp);\n\n        useEffect(() => {\n            setDate(dateProp);\n        }, [dateProp]);\n\n        const handleOnClear = useCallback(() => {\n            setDate(undefined);\n            onClear?.();\n        }, [onClear, setDate]);\n\n        // #region floating-ui\n        const [isOpen, setIsOpen] = useState(false);\n        const middleware = [\n            shift(),\n            offset({\n                crossAxis: -8,\n                mainAxis: 12,\n            }),\n            flip(),\n        ];\n        const { context, floatingStyles, refs } = useFloating({\n            middleware: middleware,\n            onOpenChange: setIsOpen,\n            open: isOpen,\n            placement: 'bottom-start',\n            whileElementsMounted: autoUpdate,\n        });\n        // Closes the floating element when a dismissal is requested — by default, when the user presses the escape key or outside of the floating element.\n        const dismiss = useDismiss(context);\n        // Adds the correct ARIA attributes for a dialog to the popover and reference elements\n        const role = useRole(context);\n        // A hook to merge or compose interaction event handlers together, preserving memoization.\n        const { getFloatingProps, getReferenceProps } = useInteractions([dismiss, role]);\n        // Merges an array of refs, returning a memoized callback ref or null.\n        const mergedRef = useMergeRefs([ref, refs.setReference]);\n        // #endregion floating-ui\n\n        return (\n            <>\n                <DateInput\n                    clearAriaLabel=\"Clear date\"\n                    date={date}\n                    disabled={disabled}\n                    onClear={handleOnClear}\n                    onValidDateChange={(value) => {\n                        setDate(value);\n                        onValidDateChange?.(value);\n                    }}\n                    ref={mergedRef}\n                    small={small}\n                    suffix={\n                        <IconButton\n                            aria-label=\"Open Calendar\"\n                            data-testid=\"open-calendar-button\"\n                            disabled={disabled}\n                            icon={CalendarBlank}\n                            onClick={() => setIsOpen(!isOpen)}\n                            size=\"sm\"\n                            type=\"button\"\n                        />\n                    }\n                    {...getReferenceProps()}\n                    {...rest}\n                />\n\n                {isOpen && (\n                    <FloatingPortal id={DatePickerTargetId}>\n                        <div\n                            className=\"w-full max-w-[312px] cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02\"\n                            data-testid=\"date-picker-popover\"\n                            ref={refs.setFloating}\n                            style={{ ...floatingStyles, zIndex }}\n                            {...getFloatingProps()}\n                        >\n                            <Calendar\n                                disabled={{ before: today }}\n                                onSelectDate={(date: Date) => {\n                                    setDate(date);\n                                    onValidDateChange?.(date);\n\n                                    if (closeOnSelect) {\n                                        setIsOpen(false);\n                                    }\n                                }}\n                                selectedDate={date}\n                                {...calendarProps}\n                            />\n                        </div>\n                    </FloatingPortal>\n                )}\n            </>\n        );\n    }\n);\n"],"mappings":"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"}

package/datePicker-DaYegd15.cjs

@@ -0,0 +1,141 @@
+const require_Icons = require("./Icons.cjs");
+require("./DatePickerTarget-D_gR7380.cjs");
+const require_IconButton = require("./IconButton.cjs");
+const require_dateInput = require("./dateInput.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+let react_day_picker = require("react-day-picker");
+//#region src/DateTimeInput/datePicker/components/calendar/Calendar.tsx
+const dateToday = /* @__PURE__ */ new Date();
+const Calendar = ({ onSelectDate, selectedDate, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.DayPicker, {
+		className: "m-sm",
+		classNames: {
+			caption_label: (0, _evolve_ui_theme_system.cn)("hui-text-h5 pb-sm"),
+			day: (0, _evolve_ui_theme_system.cn)("h-[40px] w-[40px] rounded-full hover:bg-background-hover"),
+			day_button: (0, _evolve_ui_theme_system.cn)("hui-text-body-primary h-full w-full text-center"),
+			disabled: (0, _evolve_ui_theme_system.cn)("bg-background-primary opacity-50 hover:bg-background-primary"),
+			month_caption: (0, _evolve_ui_theme_system.cn)("flex h-[50px] items-center justify-center"),
+			month_grid: (0, _evolve_ui_theme_system.cn)("w-full"),
+			months: (0, _evolve_ui_theme_system.cn)("w-full"),
+			nav: (0, _evolve_ui_theme_system.cn)("absolute flex w-full justify-between"),
+			outside: (0, _evolve_ui_theme_system.cn)(""),
+			range_end: "",
+			range_middle: "",
+			range_start: "",
+			root: (0, _evolve_ui_theme_system.cn)("relative"),
+			selected: (0, _evolve_ui_theme_system.cn)("rounded-full border-none bg-background-info-dark text-text-inverse hover:bg-background-info-dark"),
+			today: (0, _evolve_ui_theme_system.cn)("outline -outline-offset-2 outline-border-selected"),
+			week: (0, _evolve_ui_theme_system.cn)(""),
+			weekday: (0, _evolve_ui_theme_system.cn)("hui-text-label-mini py-[18px]"),
+			weekdays: (0, _evolve_ui_theme_system.cn)("border-y border-border-secondary"),
+			weeks: (0, _evolve_ui_theme_system.cn)("border-t border-border-secondary")
+		},
+		components: {
+			NextMonthButton: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				icon: require_Icons.ArrowRight,
+				onClick: props.onClick,
+				size: "sm"
+			}),
+			PreviousMonthButton: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				icon: require_Icons.ArrowLeft,
+				onClick: props.onClick,
+				size: "sm"
+			})
+		},
+		"data-testid": "calendar",
+		defaultMonth: dateToday,
+		formatters: { formatWeekdayName: (date) => new Intl.DateTimeFormat("en-US", { weekday: "short" }).format(date) },
+		mode: "single",
+		onSelect: (value) => {
+			if (value instanceof Date) onSelectDate?.(value);
+		},
+		selected: selectedDate,
+		...rest
+	});
+};
+//#endregion
+//#region src/DateTimeInput/datePicker/DatePicker.tsx
+const today = /* @__PURE__ */ new Date();
+const DatePicker = (0, react.forwardRef)(({ calendarProps, closeOnSelect, date: dateProp, disabled, onClear, onValidDateChange, small, zIndex = 15, ...rest }, ref) => {
+	const [date, setDate] = (0, react.useState)(dateProp);
+	(0, react.useEffect)(() => {
+		setDate(dateProp);
+	}, [dateProp]);
+	const handleOnClear = (0, react.useCallback)(() => {
+		setDate(void 0);
+		onClear?.();
+	}, [onClear, setDate]);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const { context, floatingStyles, refs } = (0, _floating_ui_react.useFloating)({
+		middleware: [
+			(0, _floating_ui_react.shift)(),
+			(0, _floating_ui_react.offset)({
+				crossAxis: -8,
+				mainAxis: 12
+			}),
+			(0, _floating_ui_react.flip)()
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		placement: "bottom-start",
+		whileElementsMounted: _floating_ui_react.autoUpdate
+	});
+	const { getFloatingProps, getReferenceProps } = (0, _floating_ui_react.useInteractions)([(0, _floating_ui_react.useDismiss)(context), (0, _floating_ui_react.useRole)(context)]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dateInput.DateInput, {
+		clearAriaLabel: "Clear date",
+		date,
+		disabled,
+		onClear: handleOnClear,
+		onValidDateChange: (value) => {
+			setDate(value);
+			onValidDateChange?.(value);
+		},
+		ref: (0, _floating_ui_react.useMergeRefs)([ref, refs.setReference]),
+		small,
+		suffix: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			"aria-label": "Open Calendar",
+			"data-testid": "open-calendar-button",
+			disabled,
+			icon: require_Icons.CalendarBlank,
+			onClick: () => setIsOpen(!isOpen),
+			size: "sm",
+			type: "button"
+		}),
+		...getReferenceProps(),
+		...rest
+	}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, {
+		id: "hui-datepicker-target",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-full max-w-[312px] cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02",
+			"data-testid": "date-picker-popover",
+			ref: refs.setFloating,
+			style: {
+				...floatingStyles,
+				zIndex
+			},
+			...getFloatingProps(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Calendar, {
+				disabled: { before: today },
+				onSelectDate: (date) => {
+					setDate(date);
+					onValidDateChange?.(date);
+					if (closeOnSelect) setIsOpen(false);
+				},
+				selectedDate: date,
+				...calendarProps
+			})
+		})
+	})] });
+});
+//#endregion
+Object.defineProperty(exports, "DatePicker", {
+	enumerable: true,
+	get: function() {
+		return DatePicker;
+	}
+});
+
+//# sourceMappingURL=datePicker-DaYegd15.cjs.map

package/datePicker-DaYegd15.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePicker-DaYegd15.cjs","names":["DayPicker","IconButton","ArrowRight","ArrowLeft","autoUpdate","DateInput","IconButton","CalendarBlank","FloatingPortal"],"sources":["../src/DateTimeInput/datePicker/components/calendar/Calendar.tsx","../src/DateTimeInput/datePicker/DatePicker.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { DayPicker, PropsBase } from 'react-day-picker';\n\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { ArrowLeft, ArrowRight } from '../../../../Icons';\n\nconst dateToday = new Date();\n\nexport type CalendarProps = {\n    onSelectDate?: (date: Date) => void;\n    selectedDate?: Date;\n} & Partial<Omit<PropsBase, 'styles' | 'style' | 'modifiersStyles' | 'components' | 'footer' | 'mode' | 'classNames'>>;\n\nexport const Calendar = ({ onSelectDate, selectedDate, ...rest }: CalendarProps) => {\n    return (\n        <DayPicker\n            className=\"m-sm\"\n            classNames={{\n                caption_label: cn('hui-text-h5 pb-sm'),\n                day: cn('h-[40px] w-[40px] rounded-full hover:bg-background-hover'),\n                day_button: cn('hui-text-body-primary h-full w-full text-center'),\n                disabled: cn('bg-background-primary opacity-50 hover:bg-background-primary'),\n                month_caption: cn('flex h-[50px] items-center justify-center'),\n                month_grid: cn('w-full'),\n                months: cn('w-full'),\n                nav: cn('absolute flex w-full justify-between'),\n                outside: cn(''),\n                range_end: '',\n                range_middle: '',\n                range_start: '',\n                root: cn('relative'),\n                selected: cn(\n                    'rounded-full border-none bg-background-info-dark text-text-inverse hover:bg-background-info-dark'\n                ),\n                today: cn('outline -outline-offset-2 outline-border-selected'),\n                week: cn(''),\n                weekday: cn('hui-text-label-mini py-[18px]'),\n                weekdays: cn('border-y border-border-secondary'),\n                weeks: cn('border-t border-border-secondary'),\n            }}\n            components={{\n                NextMonthButton: (props) => (\n                    <IconButton\n                        icon={ArrowRight}\n                        onClick={props.onClick}\n                        size=\"sm\"\n                    />\n                ),\n                PreviousMonthButton: (props) => (\n                    <IconButton\n                        icon={ArrowLeft}\n                        onClick={props.onClick}\n                        size=\"sm\"\n                    />\n                ),\n            }}\n            data-testid=\"calendar\"\n            defaultMonth={dateToday}\n            formatters={{\n                formatWeekdayName: (date) => new Intl.DateTimeFormat('en-US', { weekday: 'short' }).format(date),\n            }}\n            mode=\"single\"\n            onSelect={(value) => {\n                if (value instanceof Date) {\n                    onSelectDate?.(value);\n                }\n            }}\n            selected={selectedDate}\n            {...rest}\n        />\n    );\n};\n","import {\n    autoUpdate,\n    flip,\n    FloatingPortal,\n    offset,\n    shift,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from '@floating-ui/react';\nimport { ComponentProps, forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { IconButton } from '../../IconButton/IconButton';\nimport { CalendarBlank } from '../../Icons';\nimport { DatePickerTargetId } from '../../providers/targets/DatePickerTarget';\nimport { DateInput } from '../dateInput/DateInput';\nimport { Calendar } from './components/calendar/Calendar';\n\nconst today = new Date();\n\ntype Props = {\n    calendarProps?: ComponentProps<typeof Calendar>;\n    closeOnSelect?: boolean;\n    zIndex?: number;\n} & ComponentProps<typeof DateInput>;\n\nexport const DatePicker = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            calendarProps,\n            closeOnSelect,\n            date: dateProp,\n            disabled,\n            onClear,\n            onValidDateChange,\n            small,\n            zIndex = 15,\n            ...rest\n        },\n        ref\n    ) => {\n        const [date, setDate] = useState<Date | undefined>(dateProp);\n\n        useEffect(() => {\n            setDate(dateProp);\n        }, [dateProp]);\n\n        const handleOnClear = useCallback(() => {\n            setDate(undefined);\n            onClear?.();\n        }, [onClear, setDate]);\n\n        // #region floating-ui\n        const [isOpen, setIsOpen] = useState(false);\n        const middleware = [\n            shift(),\n            offset({\n                crossAxis: -8,\n                mainAxis: 12,\n            }),\n            flip(),\n        ];\n        const { context, floatingStyles, refs } = useFloating({\n            middleware: middleware,\n            onOpenChange: setIsOpen,\n            open: isOpen,\n            placement: 'bottom-start',\n            whileElementsMounted: autoUpdate,\n        });\n        // Closes the floating element when a dismissal is requested — by default, when the user presses the escape key or outside of the floating element.\n        const dismiss = useDismiss(context);\n        // Adds the correct ARIA attributes for a dialog to the popover and reference elements\n        const role = useRole(context);\n        // A hook to merge or compose interaction event handlers together, preserving memoization.\n        const { getFloatingProps, getReferenceProps } = useInteractions([dismiss, role]);\n        // Merges an array of refs, returning a memoized callback ref or null.\n        const mergedRef = useMergeRefs([ref, refs.setReference]);\n        // #endregion floating-ui\n\n        return (\n            <>\n                <DateInput\n                    clearAriaLabel=\"Clear date\"\n                    date={date}\n                    disabled={disabled}\n                    onClear={handleOnClear}\n                    onValidDateChange={(value) => {\n                        setDate(value);\n                        onValidDateChange?.(value);\n                    }}\n                    ref={mergedRef}\n                    small={small}\n                    suffix={\n                        <IconButton\n                            aria-label=\"Open Calendar\"\n                            data-testid=\"open-calendar-button\"\n                            disabled={disabled}\n                            icon={CalendarBlank}\n                            onClick={() => setIsOpen(!isOpen)}\n                            size=\"sm\"\n                            type=\"button\"\n                        />\n                    }\n                    {...getReferenceProps()}\n                    {...rest}\n                />\n\n                {isOpen && (\n                    <FloatingPortal id={DatePickerTargetId}>\n                        <div\n                            className=\"w-full max-w-[312px] cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02\"\n                            data-testid=\"date-picker-popover\"\n                            ref={refs.setFloating}\n                            style={{ ...floatingStyles, zIndex }}\n                            {...getFloatingProps()}\n                        >\n                            <Calendar\n                                disabled={{ before: today }}\n                                onSelectDate={(date: Date) => {\n                                    setDate(date);\n                                    onValidDateChange?.(date);\n\n                                    if (closeOnSelect) {\n                                        setIsOpen(false);\n                                    }\n                                }}\n                                selectedDate={date}\n                                {...calendarProps}\n                            />\n                        </div>\n                    </FloatingPortal>\n                )}\n            </>\n        );\n    }\n);\n"],"mappings":"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"}

package/datePicker.cjs

@@ -0,0 +1,9 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_DatePickerTarget = require("./DatePickerTarget-D_gR7380.cjs");
+const require_datePicker = require("./datePicker-DaYegd15.cjs");
+exports.DatePicker = require_datePicker.DatePicker;
+exports.DatePickerTarget = require_DatePickerTarget.DatePickerTarget;

package/datePicker.d.cts

@@ -0,0 +1,3 @@
+import { t as DatePicker } from "./index-kchg551L.cjs";
+import { t as DatePickerTarget } from "./DatePickerTarget-BcX_noF3.cjs";
+export { DatePicker, DatePickerTarget };

package/datePicker.d.mts

@@ -0,0 +1,3 @@
+import { t as DatePicker } from "./index-3V0Y3AU3.mjs";
+import { t as DatePickerTarget } from "./DatePickerTarget-BcX_noF3.mjs";
+export { DatePicker, DatePickerTarget };

package/datePicker.mjs

@@ -0,0 +1,4 @@
+'use client';
+import { t as DatePickerTarget } from "./DatePickerTarget-CKni-6Rq.mjs";
+import { t as DatePicker } from "./datePicker-DQ32Z8yo.mjs";
+export { DatePicker, DatePickerTarget };

package/dateTimeInput/utils.cjs

@@ -0,0 +1,8 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_utils = require("../utils-CvmfGpqu.cjs");
+exports.getDisplayDate = require_utils.getDisplayDate;
+exports.getDisplayTime = require_utils.getDisplayTime;

package/dateTimeInput/utils.d.cts

@@ -0,0 +1,2 @@
+import { n as getDisplayDate, t as getDisplayTime } from "../index-C1knx8x3.cjs";
+export { getDisplayDate, getDisplayTime };

package/dateTimeInput/utils.d.mts

@@ -0,0 +1,2 @@
+import { n as getDisplayDate, t as getDisplayTime } from "../index-C1knx8x3.mjs";
+export { getDisplayDate, getDisplayTime };

package/dateTimeInput/utils.mjs

@@ -0,0 +1,3 @@
+'use client';
+import { n as getDisplayDate, t as getDisplayTime } from "../utils-C6Ngn6x9.mjs";
+export { getDisplayDate, getDisplayTime };

package/drawer.cjs

@@ -0,0 +1,7 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Drawer = require("./Drawer-9HFG45OA.cjs");
+exports.Drawer = require_Drawer.Drawer;

package/drawer.d.cts

@@ -0,0 +1,2 @@
+import { t as Drawer } from "./Drawer-CFZbwg0R.cjs";
+export { Drawer };

package/drawer.d.mts

@@ -0,0 +1,2 @@
+import { t as Drawer } from "./Drawer-CFZbwg0R.mjs";
+export { Drawer };

package/drawer.mjs

@@ -0,0 +1,3 @@
+'use client';
+import { t as Drawer } from "./Drawer-BkCPfK6P.mjs";
+export { Drawer };

package/educationalPopover.cjs

@@ -0,0 +1,110 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_Button = require("./Button.cjs");
+const require_Tooltip = require("./Tooltip.cjs");
+const require_IconButton = require("./IconButton.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/EducationalPopover/EducationalPopover.tsx
+const EducationalPopover = ({ icon: Icon, isOpen: isOpenProp = true, pages, showCloseButton = false, showStepCount = false, title, ...tooltipProps }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(isOpenProp);
+	const [currentPage, setCurrentPage] = (0, react.useState)(0);
+	const pageCount = pages.length;
+	const hasMultiplePages = pageCount > 1;
+	const isOnLastPage = currentPage + 1 === pageCount;
+	const showTopRow = Icon || title || showCloseButton;
+	const showLowerTitleRow = Icon && title;
+	const showBottomRow = hasMultiplePages;
+	const pageContent = (0, react.useMemo)(() => pages[currentPage], [currentPage, pages]);
+	const onClose = (0, react.useCallback)(() => {
+		setIsOpen(false);
+	}, []);
+	const onClickNextButton = (0, react.useCallback)(() => {
+		if (isOnLastPage) onClose();
+		else setCurrentPage((currentPage) => currentPage + 1);
+	}, [isOnLastPage, onClose]);
+	(0, react.useEffect)(() => {
+		setCurrentPage(0);
+	}, [isOpen, pages]);
+	(0, react.useEffect)(() => {
+		setIsOpen(isOpenProp);
+	}, [isOpenProp]);
+	if (pages.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		className: "!rounded-none",
+		isOpen,
+		style: { minWidth: "314px" },
+		...tooltipProps,
+		clickable: true,
+		globalCloseEvents: {
+			clickOutsideAnchor: true,
+			escape: true
+		},
+		setIsOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: "py-xs",
+			children: [
+				showTopRow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mb-xs flex items-center justify-between",
+					children: [
+						Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { color: tooltipProps.isInverse ? "inverse" : "primary" }),
+						!Icon && title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.H5, {
+							color: tooltipProps.isInverse ? "inverse" : "primary",
+							children: title
+						}),
+						showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+							icon: require_Icons.Close,
+							onClick: onClose,
+							style: tooltipProps.isInverse ? "inverse" : "neutral"
+						})
+					]
+				}),
+				showLowerTitleRow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.H5, {
+					className: "mb-xs",
+					color: tooltipProps.isInverse ? "inverse" : "primary",
+					children: title
+				}),
+				pageContent,
+				showBottomRow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, _evolve_ui_theme_system.cn)("mt-sm flex items-center", {
+						"justify-between": showStepCount || !isOnLastPage,
+						"justify-end": !(showStepCount || !isOnLastPage)
+					}),
+					children: [showStepCount && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography_Text.Caption, {
+						className: "items-start",
+						color: tooltipProps.isInverse ? "inverse" : "primary",
+						children: [
+							currentPage + 1,
+							" of ",
+							pageCount
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-end gap-sm",
+						children: [!isOnLastPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							onClick: onClose,
+							size: "sm",
+							style: tooltipProps.isInverse ? "inverse" : "primary",
+							variant: "transparent",
+							children: "Skip"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							onClick: onClickNextButton,
+							size: "sm",
+							style: tooltipProps.isInverse ? "inverse" : "primary",
+							children: isOnLastPage ? "Got It" : "Next"
+						})]
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+exports.EducationalPopover = EducationalPopover;
+
+//# sourceMappingURL=educationalPopover.cjs.map

package/educationalPopover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"educationalPopover.cjs","names":["Tooltip","H5","IconButton","Close","Caption","Button"],"sources":["../src/EducationalPopover/EducationalPopover.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ComponentProps, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Close } from '../Icons';\nimport { AnyIcon } from '../Icons/anyIcon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { Caption, H5 } from '../Typography/Text/Text';\n\ntype Props = Omit<ComponentProps<typeof Tooltip>, 'children'> & {\n    /**\n     * The icon to show in the top-left corner.\n     * - If populated, the title is shown right below it.\n     * - If not populated, the title will show there instead.\n     * @default undefined\n     */\n    icon?: AnyIcon;\n    /**\n     * Array of ReactElements that the user will click through to become educated.\n     */\n    pages: ReactElement[];\n    /**\n     * Should the close button be shown in the top-right corner?\n     * @default false\n     */\n    showCloseButton?: boolean;\n    /**\n     * Should the step counter be shown in the bottom-left corner?\n     * If there is only a single page, it will not be shown, even if this prop is true.\n     * @default false\n     */\n    showStepCount?: boolean;\n    /**\n     * Title of the educational modal.\n     * This will be shown over the main content of every page in the education flow.\n     * - If `icon` is populated, the title is shown right below it.\n     * - If `icon` is not populated, the title will show across from the close button instead.\n     */\n    title?: string;\n};\n\nexport const EducationalPopover = ({\n    icon: Icon,\n    isOpen: isOpenProp = true,\n    pages,\n    showCloseButton = false,\n    showStepCount = false,\n    title,\n    ...tooltipProps\n}: Props) => {\n    const [isOpen, setIsOpen] = useState(isOpenProp);\n\n    const [currentPage, setCurrentPage] = useState(0);\n    const pageCount = pages.length;\n    const hasMultiplePages = pageCount > 1;\n    const isOnLastPage = currentPage + 1 === pageCount;\n\n    const showTopRow = Icon || title || showCloseButton;\n    const showLowerTitleRow = Icon && title;\n    const showBottomRow = hasMultiplePages;\n\n    const pageContent = useMemo(() => pages[currentPage], [currentPage, pages]);\n\n    const onClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    const onClickNextButton: ComponentProps<typeof Button>['onClick'] = useCallback(() => {\n        // User pressed \"Got It\" and will close popover\n        if (isOnLastPage) {\n            onClose();\n        }\n        // User pressed \"Next\" and will go to next page\n        else {\n            setCurrentPage((currentPage) => currentPage + 1);\n        }\n    }, [isOnLastPage, onClose]);\n\n    useEffect(() => {\n        setCurrentPage(0);\n    }, [isOpen, pages]);\n\n    useEffect(() => {\n        setIsOpen(isOpenProp);\n    }, [isOpenProp]);\n\n    if (pages.length === 0) {\n        return null;\n    }\n\n    return (\n        <Tooltip\n            className=\"!rounded-none\"\n            isOpen={isOpen}\n            style={{ minWidth: '314px' }}\n            {...tooltipProps}\n            clickable\n            globalCloseEvents={{\n                clickOutsideAnchor: true,\n                escape: true,\n            }}\n            setIsOpen={setIsOpen}\n        >\n            <section className=\"py-xs\">\n                {/* icon / close button */}\n                {showTopRow && (\n                    <div className=\"mb-xs flex items-center justify-between\">\n                        {/* if icon exists, place it across from close button */}\n                        {Icon && <Icon color={tooltipProps.isInverse ? 'inverse' : 'primary'} />}\n                        {/* if icon does not exist, title is across from close button*/}\n                        {!Icon && title && <H5 color={tooltipProps.isInverse ? 'inverse' : 'primary'}>{title}</H5>}\n\n                        {showCloseButton && (\n                            <IconButton\n                                icon={Close}\n                                onClick={onClose}\n                                style={tooltipProps.isInverse ? 'inverse' : 'neutral'}\n                            />\n                        )}\n                    </div>\n                )}\n                {/* title is under icon if icon exists */}\n                {showLowerTitleRow && (\n                    <H5\n                        className=\"mb-xs\"\n                        color={tooltipProps.isInverse ? 'inverse' : 'primary'}\n                    >\n                        {title}\n                    </H5>\n                )}\n                {/* main educational info */}\n                {pageContent}\n                {/* bottom content */}\n                {showBottomRow && (\n                    <div\n                        className={cn('mt-sm flex items-center', {\n                            'justify-between': showStepCount || !isOnLastPage,\n                            'justify-end': !(showStepCount || !isOnLastPage),\n                        })}\n                    >\n                        {showStepCount && (\n                            <Caption\n                                className=\"items-start\"\n                                color={tooltipProps.isInverse ? 'inverse' : 'primary'}\n                            >\n                                {currentPage + 1} of {pageCount}\n                            </Caption>\n                        )}\n                        <div className=\"flex items-end gap-sm\">\n                            {!isOnLastPage && (\n                                <Button\n                                    onClick={onClose}\n                                    size=\"sm\"\n                                    style={tooltipProps.isInverse ? 'inverse' : 'primary'}\n                                    variant=\"transparent\"\n                                >\n                                    Skip\n                                </Button>\n                            )}\n                            <Button\n                                onClick={onClickNextButton}\n                                size=\"sm\"\n                                style={tooltipProps.isInverse ? 'inverse' : 'primary'}\n                            >\n                                {isOnLastPage ? 'Got It' : 'Next'}\n                            </Button>\n                        </div>\n                    </div>\n                )}\n            </section>\n        </Tooltip>\n    );\n};\n"],"mappings":"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"}

package/educationalPopover.d.cts

@@ -0,0 +1,2 @@
+import { t as EducationalPopover } from "./EducationalPopover-CLNgGomH.cjs";
+export { EducationalPopover };

package/educationalPopover.d.mts

@@ -0,0 +1,2 @@
+import { t as EducationalPopover } from "./EducationalPopover-DP63Yqlm.mjs";
+export { EducationalPopover };

package/educationalPopover.mjs

@@ -0,0 +1,106 @@
+'use client';
+import { Close } from "./Icons.mjs";
+import { Caption, H5 } from "./Typography/Text.mjs";
+import { Button } from "./Button.mjs";
+import { Tooltip } from "./Tooltip.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/EducationalPopover/EducationalPopover.tsx
+const EducationalPopover = ({ icon: Icon, isOpen: isOpenProp = true, pages, showCloseButton = false, showStepCount = false, title, ...tooltipProps }) => {
+	const [isOpen, setIsOpen] = useState(isOpenProp);
+	const [currentPage, setCurrentPage] = useState(0);
+	const pageCount = pages.length;
+	const hasMultiplePages = pageCount > 1;
+	const isOnLastPage = currentPage + 1 === pageCount;
+	const showTopRow = Icon || title || showCloseButton;
+	const showLowerTitleRow = Icon && title;
+	const showBottomRow = hasMultiplePages;
+	const pageContent = useMemo(() => pages[currentPage], [currentPage, pages]);
+	const onClose = useCallback(() => {
+		setIsOpen(false);
+	}, []);
+	const onClickNextButton = useCallback(() => {
+		if (isOnLastPage) onClose();
+		else setCurrentPage((currentPage) => currentPage + 1);
+	}, [isOnLastPage, onClose]);
+	useEffect(() => {
+		setCurrentPage(0);
+	}, [isOpen, pages]);
+	useEffect(() => {
+		setIsOpen(isOpenProp);
+	}, [isOpenProp]);
+	if (pages.length === 0) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		className: "!rounded-none",
+		isOpen,
+		style: { minWidth: "314px" },
+		...tooltipProps,
+		clickable: true,
+		globalCloseEvents: {
+			clickOutsideAnchor: true,
+			escape: true
+		},
+		setIsOpen,
+		children: /* @__PURE__ */ jsxs("section", {
+			className: "py-xs",
+			children: [
+				showTopRow && /* @__PURE__ */ jsxs("div", {
+					className: "mb-xs flex items-center justify-between",
+					children: [
+						Icon && /* @__PURE__ */ jsx(Icon, { color: tooltipProps.isInverse ? "inverse" : "primary" }),
+						!Icon && title && /* @__PURE__ */ jsx(H5, {
+							color: tooltipProps.isInverse ? "inverse" : "primary",
+							children: title
+						}),
+						showCloseButton && /* @__PURE__ */ jsx(IconButton, {
+							icon: Close,
+							onClick: onClose,
+							style: tooltipProps.isInverse ? "inverse" : "neutral"
+						})
+					]
+				}),
+				showLowerTitleRow && /* @__PURE__ */ jsx(H5, {
+					className: "mb-xs",
+					color: tooltipProps.isInverse ? "inverse" : "primary",
+					children: title
+				}),
+				pageContent,
+				showBottomRow && /* @__PURE__ */ jsxs("div", {
+					className: cn("mt-sm flex items-center", {
+						"justify-between": showStepCount || !isOnLastPage,
+						"justify-end": !(showStepCount || !isOnLastPage)
+					}),
+					children: [showStepCount && /* @__PURE__ */ jsxs(Caption, {
+						className: "items-start",
+						color: tooltipProps.isInverse ? "inverse" : "primary",
+						children: [
+							currentPage + 1,
+							" of ",
+							pageCount
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-end gap-sm",
+						children: [!isOnLastPage && /* @__PURE__ */ jsx(Button, {
+							onClick: onClose,
+							size: "sm",
+							style: tooltipProps.isInverse ? "inverse" : "primary",
+							variant: "transparent",
+							children: "Skip"
+						}), /* @__PURE__ */ jsx(Button, {
+							onClick: onClickNextButton,
+							size: "sm",
+							style: tooltipProps.isInverse ? "inverse" : "primary",
+							children: isOnLastPage ? "Got It" : "Next"
+						})]
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { EducationalPopover };
+
+//# sourceMappingURL=educationalPopover.mjs.map