autocasting-ui-library-padimasso 1.6.7 → 1.6.9

package/dist/components/DataDisplay/Chips/ChoiceChip.js

@@ -2,7 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 
 function ChoiceChip({ label, selected = false, className, type = 'button', ...rest }) {
-    return (jsx("button", { type: type, className: clsx('px-4 py-1 rounded-full whitespace-nowrap cursor-pointer bg-transparent border-1', selected
+    const isDisabled = Boolean(rest.disabled);
+    return (jsx("button", { type: type, className: clsx('px-4 py-1 rounded-full whitespace-nowrap bg-transparent border-1', isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', selected
             ? 'text-(--color-primary-purple) border-(--color-primary-purple)'
             : 'text-(--color-secondary-grey-fonts) border-(--color-secondary-outline)', className), "aria-pressed": selected, ...rest, children: label }));
 }

package/dist/components/Feedback/Toast/Toast.js

@@ -22,10 +22,10 @@ const TOAST_ICON_BY_TYPE = {
     warning: { name: 'warning', variant: 'default' },
     danger: { name: 'info', variant: 'danger' },
 };
-function Toast({ title, description, type = 'default', className, titleClassName, descriptionClassName, iconClassName, role, ...rest }) {
+function Toast({ title, description, type = 'default', className, titleClassName, descriptionClassName, iconClassName, fullWidth = false, closable = false, onClose, role, ...rest }) {
     const styles = TYPE_STYLES[type];
     const icon = TOAST_ICON_BY_TYPE[type];
-    return (jsxs("article", { "data-toast-type": type, "data-toast-part": "root", role: role ?? (type === 'danger' ? 'alert' : 'status'), className: clsx('flex w-full max-w-[330px] flex-row items-center gap-3 rounded-lg p-3 shadow-md', styles.container, className), ...rest, children: [jsx(Icon, { name: icon.name, variant: icon.variant, "aria-hidden": "true", className: clsx('cursor-default', iconClassName) }), jsxs("div", { "data-toast-part": "content", className: "flex-1", children: [jsx("p", { "data-toast-part": "title", className: clsx('text-sm font-semibold', titleClassName), children: title }), description ? (jsx("p", { "data-toast-part": "description", className: clsx('text-sm font-light text-(--color-secondary-gray)', descriptionClassName), children: description })) : null] })] }));
+    return (jsxs("article", { "data-toast-type": type, "data-toast-part": "root", role: role ?? (type === 'danger' ? 'alert' : 'status'), className: clsx('flex w-full flex-row items-center gap-3 rounded-lg p-3 shadow-md', fullWidth ? 'max-w-[650px]' : 'max-w-[330px]', styles.container, className), ...rest, children: [jsx(Icon, { name: icon.name, variant: icon.variant, "aria-hidden": "true", className: clsx('cursor-default', iconClassName) }), jsxs("div", { "data-toast-part": "content", className: `flex min-w-0 flex-1 flex-col gap-1`, children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("p", { "data-toast-part": "title", className: clsx('text-sm font-semibold', titleClassName), children: title }), closable ? (jsx("button", { type: "button", "aria-label": "Close toast", className: "cursor-pointer", onClick: onClose, children: jsx(Icon, { name: "cross", variant: "default", "aria-hidden": "true", size: 10 }) })) : null] }), description ? (jsx("p", { "data-toast-part": "description", className: clsx('text-sm font-light text-(--color-secondary-gray)', descriptionClassName), children: description })) : null] })] }));
 }
 
 export { Toast as default };

package/dist/components/Feedback/Toast/ToastProvider.js

@@ -53,11 +53,11 @@ function ToastViewportItem({ toast, position, toastClassName, onDismiss, }) {
             window.clearTimeout(timeoutId);
         };
     }, [onDismiss, toast.durationMs, toast.id]);
-    return (jsx("div", { className: clsx('pointer-events-auto flex w-full', {
+    return (jsx("div", { className: clsx('pointer-events-none flex w-full', {
             'justify-start': position === 'top-left' || position === 'bottom-left',
             'justify-center': position === 'top-center' || position === 'bottom-center',
             'justify-end': position === 'top-right' || position === 'bottom-right',
-        }), children: jsx(Toast, { title: toast.title, description: toast.description, type: toast.type, className: clsx(toastClassName, toast.className) }) }));
+        }), children: jsx("div", { className: "pointer-events-auto", children: jsx(Toast, { title: toast.title, description: toast.description, type: toast.type, className: clsx(toastClassName, toast.className), fullWidth: toast.fullWidth, closable: toast.closable, onClose: () => onDismiss(toast.id) }) }) }));
 }
 function showToast(options) {
     const toastId = options.id ?? nextToastId();
@@ -88,13 +88,15 @@ function ToastProvider({ children, defaultDurationMs = 2500, maxToasts = 5, view
     const clearToastsInternal = useCallback(() => {
         setToasts([]);
     }, []);
-    const showToastInternal = useCallback(({ id, type = 'default', position = 'top-center', durationMs = defaultDurationMs, ...toastOptions }) => {
+    const showToastInternal = useCallback(({ id, type = 'default', position = 'top-center', durationMs = defaultDurationMs, fullWidth = false, closable = false, ...toastOptions }) => {
         const toastId = id ?? nextToastId();
         const nextToast = {
             id: toastId,
             type,
             position,
             durationMs,
+            fullWidth,
+            closable,
             ...toastOptions,
         };
         setToasts((currentToasts) => {
@@ -117,7 +119,7 @@ function ToastProvider({ children, defaultDurationMs = 2500, maxToasts = 5, view
                         const positionedToasts = toasts.filter((toast) => toast.position === position);
                         if (positionedToasts.length === 0)
                             return null;
-                        return (jsx("div", { "aria-live": "polite", "aria-atomic": "false", "data-toast-position": position, "data-toast-part": "viewport", className: clsx('pointer-events-none fixed z-[1100] flex w-[calc(100%-2rem)] max-w-sm flex-col gap-3', VIEWPORT_POSITION_CLASSES[position], viewportClassName), children: positionedToasts.map((toast) => (jsx(ToastViewportItem, { toast: toast, position: position, toastClassName: toastClassName, onDismiss: dismissToastInternal }, toast.id))) }, position));
+                        return (jsx("div", { "aria-live": "polite", "aria-atomic": "false", "data-toast-position": position, "data-toast-part": "viewport", className: clsx('pointer-events-none fixed z-[1100] flex w-[calc(100%-2rem)] max-w-[1400px] flex-col gap-3', VIEWPORT_POSITION_CLASSES[position], viewportClassName), children: positionedToasts.map((toast) => (jsx(ToastViewportItem, { toast: toast, position: position, toastClassName: toastClassName, onDismiss: dismissToastInternal }, toast.id))) }, position));
                     }) }), document.body)
                 : null] }));
 }

package/dist/components/Flows/Wizard/WizardLayout.js

@@ -16,10 +16,10 @@ function WizardBody({ children, className }) {
 function WizardFooter({ children, className }) {
     return jsx("footer", { className: clsx('shrink-0', className), children: children });
 }
-function WizardActions({ primaryAction, secondaryAction, tertiaryAction, className, actionsClassName, }) {
-    if (!primaryAction && !secondaryAction && !tertiaryAction)
+function WizardActions({ primaryAction, secondaryAction, className }) {
+    if (!primaryAction && !secondaryAction)
         return null;
-    return (jsxs("div", { className: clsx('flex w-full min-w-0 items-center justify-between gap-4', className), children: [jsx("div", { className: "min-w-0 shrink-0", children: tertiaryAction }), jsxs("div", { className: clsx('flex min-w-0 items-center gap-4', actionsClassName), children: [secondaryAction ? jsx("div", { className: "shrink-0", children: secondaryAction }) : null, primaryAction ? jsx("div", { className: "shrink-0", children: primaryAction }) : null] })] }));
+    return (jsxs("div", { className: clsx('flex flex-col gap-2 sm:flex-row items-center justify-between', className), children: [secondaryAction, primaryAction] }));
 }
 
 export { WizardActions, WizardBody, WizardFooter, WizardHeader, WizardLayout };

package/dist/components/Forms/Selection/RangeCalendar.js

@@ -1,80 +1,200 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useEffect } from 'react';
 import { DayPicker, formatCaption } from 'react-day-picker';
 
-const startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
-const getTargetMonth = (range) => {
-    if (range?.from)
-        return startOfMonth(range.from);
-    if (range?.to)
-        return startOfMonth(range.to);
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const isSameDay = (left, right) => !!left &&
+    !!right &&
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate();
+const isSingleProps = (props) => props.selectionMode === 'single';
+const isRangeProps = (props) => props.selectionMode === 'range';
+const getTargetMonth = (value) => {
+    if (!value)
+        return startOfMonth(new Date());
+    if (value instanceof Date)
+        return startOfMonth(value);
+    if (value?.from)
+        return startOfMonth(value.from);
+    if (value?.to)
+        return startOfMonth(value.to);
     return startOfMonth(new Date());
 };
-function RangeCalendar({ label, value, onChange, onCommit, weekStartsOn = 1, className, required = false, locale, language = 'en', weekdayLabels, }) {
+function RangeCalendar(props) {
+    const { label, weekStartsOn = 1, className, required = false, locale, language = 'en', weekdayLabels, displayMode = 'inline', placeholder = 'Seleccionar', closeOnCommit = true, } = props;
     const minDate = React.useMemo(() => {
-        const d = new Date();
-        d.setHours(0, 0, 0, 0);
-        return d;
+        const date = new Date();
+        date.setHours(0, 0, 0, 0);
+        return date;
     }, []);
     const maxDate = React.useMemo(() => {
-        const d = new Date(minDate);
-        d.setFullYear(d.getFullYear() + 2);
-        return d;
+        const date = new Date(minDate);
+        date.setFullYear(date.getFullYear() + 2);
+        return date;
     }, [minDate]);
     const startMonthLimit = React.useMemo(() => startOfMonth(minDate), [minDate]);
     const endMonthLimit = React.useMemo(() => startOfMonth(maxDate), [maxDate]);
-    const [month, setMonth] = React.useState(() => getTargetMonth(value));
+    const [month, setMonth] = React.useState(() => getTargetMonth(props.value));
+    const [isOpen, setIsOpen] = React.useState(false);
+    const rootRef = React.useRef(null);
+    const skipNextSingleSelectRef = React.useRef(false);
     useEffect(() => {
-        const next = getTargetMonth(value);
+        const next = getTargetMonth(props.value);
         setMonth((prev) => {
             if (prev.getFullYear() === next.getFullYear() && prev.getMonth() === next.getMonth())
                 return prev;
             return next;
         });
-    }, [value?.from?.getTime(), value?.to?.getTime()]);
-    const handleSelect = React.useCallback((next) => {
-        onChange(next);
+    }, [props.value]);
+    useEffect(() => {
+        if (displayMode !== 'dropdown' || !isOpen)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            if (rootRef.current?.contains(target))
+                return;
+            setIsOpen(false);
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('touchstart', handlePointerDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('touchstart', handlePointerDown);
+        };
+    }, [displayMode, isOpen]);
+    const triggerLabel = React.useMemo(() => {
+        const formatter = new Intl.DateTimeFormat(language, {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+        });
+        if (isSingleProps(props)) {
+            return props.value ? formatter.format(props.value) : placeholder;
+        }
+        const rangeValue = props.value;
+        if (!rangeValue?.from && !rangeValue?.to)
+            return placeholder;
+        if (rangeValue?.from && rangeValue?.to)
+            return `${formatter.format(rangeValue.from)} - ${formatter.format(rangeValue.to)}`;
+        if (rangeValue?.from)
+            return formatter.format(rangeValue.from);
+        if (rangeValue?.to)
+            return formatter.format(rangeValue.to);
+        return placeholder;
+    }, [language, placeholder, props]);
+    const sharedDayPickerProps = {
+        navLayout: 'around',
+        weekStartsOn,
+        month,
+        onMonthChange: setMonth,
+        locale,
+        startMonth: startMonthLimit,
+        endMonth: endMonthLimit,
+        disabled: [{ before: minDate }, { after: maxDate }],
+        formatters: {
+            formatWeekdayName: (date) => weekdayLabels?.[date.getDay()] ?? date.toLocaleDateString(language, { weekday: 'short' }),
+            formatCaption: (date, options, dateLib) => {
+                const text = formatCaption(date, options, dateLib);
+                return text ? text[0].toLocaleUpperCase(language) + text.slice(1) : text;
+            },
+        },
+        className: 'w-full p-2',
+        classNames: {
+            chevron: 'rdp-chevron fill-[var(--color-primary-black)]',
+            month_caption: 'rdp-month_caption text-sm font-semibold',
+            caption_label: 'rdp-caption_label text-sm font-semibold',
+        },
+        styles: {
+            root: { width: '100%' },
+            months: { width: '100%' },
+            month: { width: '100%' },
+            month_grid: { width: '100%', tableLayout: 'fixed' },
+        },
+        style: {
+            '--rdp-accent-color': 'var(--color-primary-purple)',
+            '--rdp-accent-background-color': 'var(--color-secondary-offwhite)',
+        },
+    };
+    const handleRangeSelect = React.useCallback((next) => {
+        if (!isRangeProps(props))
+            return;
+        const current = props.value;
+        const isClearingSameSingleAnchor = !!current?.from && !current?.to && !!next?.from && !next?.to && current.from.getTime() === next.from.getTime();
+        const isClearingFromCompletedRange = !!current?.from &&
+            !!current?.to &&
+            !!next?.from &&
+            !next?.to &&
+            (current.from.getTime() === next.from.getTime() || current.to.getTime() === next.from.getTime());
+        if (isClearingSameSingleAnchor || isClearingFromCompletedRange) {
+            props.onChange(undefined);
+            return;
+        }
+        props.onChange(next);
+        const target = getTargetMonth(next);
+        if (month.getFullYear() !== target.getFullYear() || month.getMonth() !== target.getMonth()) {
+            setMonth(target);
+        }
+        if (next?.from && next?.to) {
+            props.onCommit?.(next.from, next.to);
+            if (displayMode === 'dropdown' && closeOnCommit)
+                setIsOpen(false);
+        }
+    }, [closeOnCommit, displayMode, month, props]);
+    const handleSingleSelect = React.useCallback((next) => {
+        if (!isSingleProps(props))
+            return;
+        if (skipNextSingleSelectRef.current) {
+            skipNextSingleSelectRef.current = false;
+            return;
+        }
+        if (next && props.value && next.getTime() === props.value.getTime()) {
+            props.onChange(undefined);
+            return;
+        }
+        props.onChange(next);
         const target = getTargetMonth(next);
         if (month.getFullYear() !== target.getFullYear() || month.getMonth() !== target.getMonth()) {
             setMonth(target);
         }
-        if (next?.from && next?.to)
-            onCommit?.(next.from, next.to);
-    }, [onChange, onCommit, month]);
-    return (jsxs("div", { className: `${className ?? ''} flex flex-col w-full lg:max-w-[350px]`, children: [label ? (jsxs("div", { className: "mb-2 text-sm font-semibold", children: [label, required ? (jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })) : null] })) : null, jsx("div", { className: "w-full bg-(--color-secondary-white) rounded-2xl border border-(--color-secondary-outline) overflow-hidden", children: jsx(DayPicker, { mode: "range", navLayout: "around", weekStartsOn: weekStartsOn, month: month, onMonthChange: setMonth, selected: value, onSelect: handleSelect, resetOnSelect: true, numberOfMonths: 1, locale: locale, startMonth: startMonthLimit, endMonth: endMonthLimit, disabled: [{ before: minDate }, { after: maxDate }], formatters: {
-                        formatWeekdayName: (date) => weekdayLabels?.[date.getDay()] ?? date.toLocaleDateString(language, { weekday: 'short' }),
-                        formatCaption: (date, options, dateLib) => {
-                            const s = formatCaption(date, options, dateLib);
-                            return s ? s[0].toLocaleUpperCase(language) + s.slice(1) : s;
-                        },
-                    }, className: "w-full p-2", classNames: {
-                        chevron: 'rdp-chevron fill-[var(--color-primary-black)]',
-                        month_caption: 'rdp-month_caption text-sm font-semibold',
-                        caption_label: 'rdp-caption_label text-sm font-semibold',
-                    }, styles: {
-                        root: { width: '100%' },
-                        months: { width: '100%' },
-                        month: { width: '100%' },
-                        month_grid: { width: '100%', tableLayout: 'fixed' },
-                    }, style: {
-                        '--rdp-accent-color': 'var(--color-primary-purple)',
-                        '--rdp-accent-background-color': 'var(--color-secondary-offwhite)',
-                    } }) })] }));
+        if (next) {
+            props.onCommit?.(next);
+            if (displayMode === 'dropdown' && closeOnCommit)
+                setIsOpen(false);
+        }
+    }, [closeOnCommit, displayMode, month, props]);
+    const calendar = (jsx("div", { className: "w-full overflow-hidden rounded-2xl border border-(--color-secondary-outline) bg-(--color-secondary-white)", children: isSingleProps(props) ? (jsx(DayPicker, { ...sharedDayPickerProps, mode: "single", selected: props.value, onSelect: handleSingleSelect, onDayClick: (day) => {
+                if (isSameDay(day, props.value)) {
+                    skipNextSingleSelectRef.current = true;
+                    props.onChange(undefined);
+                    if (displayMode === 'dropdown' && closeOnCommit)
+                        setIsOpen(false);
+                }
+            }, numberOfMonths: 1 })) : (jsx(DayPicker, { ...sharedDayPickerProps, mode: "range", selected: props.value, onSelect: handleRangeSelect, resetOnSelect: true, numberOfMonths: 1 })) }));
+    return (jsxs("div", { ref: rootRef, className: `${className ?? ''} flex w-full flex-col lg:max-w-[350px]`, children: [label ? (jsxs("div", { className: "mb-2 text-sm font-semibold", children: [label, required ? (jsx("span", { className: "ml-1 text-red-500", "aria-hidden": "true", children: "*" })) : null] })) : null, displayMode === 'dropdown' ? (jsxs("div", { className: "relative", children: [jsxs("button", { type: "button", onClick: () => setIsOpen((prev) => !prev), className: `relative h-12 w-full rounded-xl border border-(--color-secondary-outline) px-5 pr-10 text-left text-base transition-colors duration-100 ease-in-out focus:border-(--color-primary-purple) focus:outline-none focus:ring-0 ${isSingleProps(props)
+                            ? !props.value
+                                ? 'text-(--color-secondary-grey)'
+                                : 'text-(--color-primary-black)'
+                            : !props.value?.from && !props.value?.to
+                                ? 'text-(--color-secondary-grey)'
+                                : 'text-(--color-primary-black)'}`, "aria-expanded": isOpen, children: [triggerLabel, jsx("svg", { className: "pointer-events-none absolute right-4 top-1/2 h-5 w-5 -translate-y-1/2", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }) })] }), isOpen ? jsx("div", { className: "absolute left-0 right-0 top-[calc(100%+12px)] z-20", children: calendar }) : null] })) : (calendar)] }));
 }
-const toLocalISO = (d) => {
-    const y = d.getFullYear();
-    const m = String(d.getMonth() + 1).padStart(2, '0');
-    const day = String(d.getDate()).padStart(2, '0');
-    return `${y}-${m}-${day}`;
+const toLocalISO = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
 };
 const parseLocalISODate = (iso) => {
     if (!iso)
         return undefined;
-    const [y, m, d] = iso.split('-').map(Number);
-    if (!y || !m || !d)
+    const [year, month, day] = iso.split('-').map(Number);
+    if (!year || !month || !day)
         return undefined;
-    return new Date(y, m - 1, d);
+    return new Date(year, month - 1, day);
 };
 
 export { RangeCalendar as default, parseLocalISODate, toLocalISO };

package/dist/components/Layout/MasterDetail/MasterDetailShell.js

@@ -3,11 +3,11 @@ import { useChromeBoxHeights } from '../../../hooks/useChromeBoxHeights.js';
 import { useMedia, LG_SCREEN_SIZE } from '../../../hooks/useMedia.js';
 import SectionCard from '../SectionCard/SectionCard.js';
 
-function MasterDetailShell({ menu, content, contentHeader, contentActions, menuContentRef, desktopPaneHeight, }) {
+function MasterDetailShell({ menuHeader, menuContent, menuFooter, content, contentHeader, contentActions, menuContentRef, desktopPaneHeight, }) {
     const isDesktop = useMedia(LG_SCREEN_SIZE);
     const { header, footer } = useChromeBoxHeights();
     const desktopViewportHeight = desktopPaneHeight ?? `calc(var(--app-vh, 1vh) * 100 - ${header + footer}px)`;
-    return (jsx("section", { className: "w-full h-full min-h-0 bg-transparent", children: jsx("div", { className: "flex h-full min-h-0 w-full flex-col", children: jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 lg:flex-row lg:items-stretch", style: isDesktop ? { height: desktopViewportHeight } : undefined, children: [jsx("aside", { className: "flex min-h-0 flex-col overflow-hidden rounded-none border-0 bg-transparent lg:w-[365px]", children: jsx("div", { ref: menuContentRef, className: "scrollbar-hide min-h-0 flex-1 overflow-y-auto", children: menu }) }), jsx(SectionCard, { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", withContentWrapper: false, children: jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: jsxs("div", { className: "flex min-h-full flex-col", children: [(contentHeader || contentActions) && (jsxs("header", { className: "sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-(--color-secondary-outline) bg-(--color-primary-white) px-6 py-5", children: [contentHeader ? jsx("div", { className: "min-w-0", children: contentHeader }) : jsx("div", {}), contentActions ? jsx("div", { className: "shrink-0", children: contentActions }) : null] })), jsx("div", { className: "flex-1 p-6", children: content })] }) }) })] }) }) }));
+    return (jsx("section", { className: "w-full h-full min-h-0 bg-transparent", children: jsx("div", { className: "flex h-full min-h-0 w-full flex-col", children: jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 lg:flex-row lg:items-stretch", style: isDesktop ? { height: desktopViewportHeight } : undefined, children: [jsxs("aside", { className: "flex min-h-0 flex-col overflow-hidden rounded-none border-0 bg-transparent lg:w-[365px]", children: [menuHeader ? jsx("div", { className: "shrink-0", children: menuHeader }) : null, jsx("div", { ref: menuContentRef, className: "min-h-0 flex-1 overflow-y-auto", children: menuContent }), menuFooter ? jsx("div", { className: "shrink-0 pt-4", children: menuFooter }) : null] }), jsx(SectionCard, { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", withContentWrapper: false, children: jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: jsxs("div", { className: "flex min-h-full flex-col", children: [(contentHeader || contentActions) && (jsxs("header", { className: "sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-(--color-secondary-outline) bg-(--color-primary-white) px-6 py-5", children: [contentHeader ? jsx("div", { className: "min-w-0", children: contentHeader }) : jsx("div", {}), contentActions ? jsx("div", { className: "shrink-0", children: contentActions }) : null] })), jsx("div", { className: "flex-1 p-6", children: content })] }) }) })] }) }) }));
 }
 
 export { MasterDetailShell as default };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ImgHTMLAttributes, ReactNode, Ref, ComponentPropsWithoutRef, ButtonHTMLAttributes, CSSProperties, HTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DateRange, DayPicker } from 'react-day-picker';
+import { DayPicker, DateRange } from 'react-day-picker';
 
 type PillKeyBase = string;
 type CountGetters<K extends PillKeyBase, D> = Partial<Record<K, (data: D) => number | undefined>>;
@@ -252,14 +252,16 @@ type DashboardShellContextValue = {
 declare function useDashboardShell(): DashboardShellContextValue;
 
 type MasterDetailShellProps = {
-    menu: ReactNode;
+    menuHeader?: ReactNode;
+    menuContent: ReactNode;
+    menuFooter?: ReactNode;
     content: ReactNode;
     contentHeader?: ReactNode;
     contentActions?: ReactNode;
     menuContentRef?: Ref<HTMLDivElement>;
     desktopPaneHeight?: string;
 };
-declare function MasterDetailShell({ menu, content, contentHeader, contentActions, menuContentRef, desktopPaneHeight, }: MasterDetailShellProps): react_jsx_runtime.JSX.Element;
+declare function MasterDetailShell({ menuHeader, menuContent, menuFooter, content, contentHeader, contentActions, menuContentRef, desktopPaneHeight, }: MasterDetailShellProps): react_jsx_runtime.JSX.Element;
 
 type MobileBottomBarProps = ComponentPropsWithoutRef<'div'> & {
     children: ReactNode;
@@ -462,6 +464,8 @@ type ShowToastOptions = ToastContent & {
     position?: ToastPosition;
     durationMs?: number;
     className?: string;
+    fullWidth?: boolean;
+    closable?: boolean;
 };
 type ToastRecord = ToastContent & {
     id: string;
@@ -469,6 +473,8 @@ type ToastRecord = ToastContent & {
     position: ToastPosition;
     durationMs: number;
     className?: string;
+    fullWidth: boolean;
+    closable: boolean;
 };
 type ToastContextValue = {
     showToast: (options: ShowToastOptions) => string;
@@ -483,8 +489,11 @@ type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
     titleClassName?: string;
     descriptionClassName?: string;
     iconClassName?: string;
+    fullWidth?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
 };
-declare function Toast({ title, description, type, className, titleClassName, descriptionClassName, iconClassName, role, ...rest }: ToastProps): react_jsx_runtime.JSX.Element;
+declare function Toast({ title, description, type, className, titleClassName, descriptionClassName, iconClassName, fullWidth, closable, onClose, role, ...rest }: ToastProps): react_jsx_runtime.JSX.Element;
 
 type ToastProviderProps = {
     children: ReactNode;
@@ -702,20 +711,33 @@ type SingleSelectProps = {
 type MultiSelectDropdownProps<T> = BaseProps<T> & (MultipleSelectProps | SingleSelectProps);
 declare function MultiSelectDropdown<T>({ title, options, getId, getLabel, maxPanelHeight, className, error, forwardScrollToRef, required, hideSelectAll, disableCloseOnClickOutside, selectAllLabel, selectionsLabel, ...rest }: MultiSelectDropdownProps<T>): react_jsx_runtime.JSX.Element;
 
-type RangeCalendarProps = {
+type SharedProps = {
     label?: string;
-    value: DateRange | undefined;
-    onChange: (next: DateRange | undefined) => void;
-    onCommit?: (from: Date, to: Date) => void;
     weekStartsOn?: 0 | 1;
     className?: string;
     required?: boolean;
     locale?: React$1.ComponentProps<typeof DayPicker>['locale'];
     language?: string;
     weekdayLabels?: string[];
+    displayMode?: 'inline' | 'dropdown';
+    placeholder?: string;
+    closeOnCommit?: boolean;
+};
+type SingleProps = SharedProps & {
+    selectionMode: 'single';
+    value: Date | undefined;
+    onChange: (next: Date | undefined) => void;
+    onCommit?: (date: Date) => void;
+};
+type RangeProps = SharedProps & {
+    selectionMode: 'range';
+    value: DateRange | undefined;
+    onChange: (next: DateRange | undefined) => void;
+    onCommit?: (from: Date, to: Date) => void;
 };
-declare function RangeCalendar({ label, value, onChange, onCommit, weekStartsOn, className, required, locale, language, weekdayLabels, }: RangeCalendarProps): react_jsx_runtime.JSX.Element;
-declare const toLocalISO: (d: Date) => string;
+type RangeCalendarProps = SingleProps | RangeProps;
+declare function RangeCalendar(props: RangeCalendarProps): react_jsx_runtime.JSX.Element;
+declare const toLocalISO: (date: Date) => string;
 declare const parseLocalISODate: (iso?: string | null) => Date | undefined;
 
 type LooseChangeHandler = React.ChangeEventHandler<HTMLInputElement> | React.ChangeEventHandler<HTMLTextAreaElement>;
@@ -954,7 +976,7 @@ type WizardActionsProps = {
     className?: string;
     actionsClassName?: string;
 };
-declare function WizardActions({ primaryAction, secondaryAction, tertiaryAction, className, actionsClassName, }: WizardActionsProps): react_jsx_runtime.JSX.Element | null;
+declare function WizardActions({ primaryAction, secondaryAction, className }: WizardActionsProps): react_jsx_runtime.JSX.Element | null;
 
 export { BooleanRadioGroup, Button, ButtonRow, CheckboxField, ChevronLeft, ChevronRight, ChevronUpDown, ChoiceChip, CurrencyInput, DashboardLoadingLabel, DashboardSection$1 as DashboardSection, DashboardShell, DataGrid, DetailsView, DocumentScrollLayoutShell, EmptyLayoutShell, FilterSection, FormCurrencyField, FormInputField, FormPasswordField, FormSelectField, FullscreenCenter, GoogleButton, HilighterSvg, Icon, IconViewSwitcher, ImageCarousel, InfoCarousel, InlineList, Input, LG_SCREEN_SIZE, Label, Logo, MasterDetailShell, MobileBottomBar, Modal, MultiRadioGroupField, MultiSelectDropdown, NavbarDropdown, NoNavigationLayoutShell, OverflowMenu, PageLoading, PasswordInput, PhotoZoomOverlay, Pills, RadioGroupField, RangeCalendar, ScrollToTop, SearchInput, SearchWithSuggestions, SectionCard, Select, Separator, Skeleton, Spinner, StatusChip, TagChip, TextDropdownTrigger, TextareaField, Toast, ToastProvider, Tooltip, UniversalVideoPlayer, UploadTile, VideoPreviewCard, Wizard, WizardActions, WizardBody, WizardFooter, WizardHeader, WizardLayout, WizardStep, XL_SCREEN_SIZE, clearToasts, dismissToast, parseLocalISODate, showToast, toLocalISO, useCarouselPills, useChromeBoxHeights, useCommittedNullableBooleanValue, useDashboardShell, useDebouncedValue, useMedia, usePendingAction, useScrollExitOnEdge, useToast, useViewportVhVar };
 export type { BooleanRadioGroupProps, ChoiceChipProps, CountGetters, DashboardSection as DashboardShellSection, DataGridActions, DataGridColumn, DataGridPagination, DataGridSelection, IconName, IconVariant, InlineListItem, MasterDetailShellProps, MenuItem, MultiSelectDropdownProps, OverflowMenuAlign, OverflowMenuItem, OverflowMenuProps, OverflowMenuSide, PillItem, PillKeyBase, RadioOption, RangeCalendarProps, ShowToastOptions, StatusChipProps, TagChipProps, TextareaFieldProps, ToastContent, ToastContextValue, ToastPosition, ToastProps, ToastRecord, ToastType, TooltipPosition, TooltipProps, UniversalVideoPlayerProps, VideoProvider, WizardStepProps };