@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.0

package/DateTimePicker/DateTimePicker.js

@@ -1,121 +1,206 @@
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ClockIcon } from '@mezzanine-ui/icons';
-import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { CalendarTimeIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import DateTimePickerPanel from './DateTimePickerPanel.js';
+import TimePickerPanel from '../TimePicker/TimePickerPanel.js';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
-import { usePickerValue } from '../Picker/usePickerValue.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
 import Icon from '../Icon/Icon.js';
-import PickerTrigger from '../Picker/PickerTrigger.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
+import PickerTriggerWithSeparator from '../Picker/PickerTriggerWithSeparator.js';
+import DatePickerCalendar from '../DatePicker/DatePickerCalendar.js';
 
 /**
- * The react component for `mezzanine` time picker.
- * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ * The react component for `mezzanine` date-time picker.
+ * This component features two separate inputs for date and time,
+ * with independent calendar and time panels shown based on focus.
+ * Notice that any component related to date-time picker should be used along with `CalendarContext`.
  */
 const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultDateFormat, defaultTimeFormat, getNow, startOf } = useCalendarContext();
-    const defaultFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
-    const { calendarProps, className, clearable = true, confirmText, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
-    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
-    const formats = useMemo(() => [format, defaultFormat], [defaultFormat, format]);
-    /** Panel open control */
-    const [open, setOpen] = useState(false);
-    const preventOpen = readOnly;
-    const onPanelToggle = useCallback((nextOpen) => {
-        if (!preventOpen) {
-            setOpen(nextOpen);
-            if (onPanelToggleProp) {
-                onPanelToggleProp(nextOpen);
+    const { defaultDateFormat, defaultTimeFormat, formatToString, getNow, getHour, getMinute, getSecond, isValid, setHour, setMinute, setSecond, startOf, locale, } = useCalendarContext();
+    const { 
+    // Calendar props
+    calendarProps, calendarRef, disabledMonthSwitch = false, disableOnDoubleNext, disableOnDoublePrev, disableOnNext, disableOnPrev, disabledYearSwitch = false, displayMonthLocale, isDateDisabled, isHalfYearDisabled, isMonthDisabled, isQuarterDisabled, isWeekDisabled, isYearDisabled, mode = 'day', 
+    // Time panel props
+    hideHour, hideMinute, hideSecond, hourStep, minuteStep, secondStep, 
+    // DateTimePicker specific props
+    className, clearable = true, defaultValue, disabled = false, error = false, fadeProps, formatDate = defaultDateFormat, formatTime = hideSecond ? 'HH:mm' : defaultTimeFormat, fullWidth = false, onClear: onClearProp, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholderLeft = formatDate, placeholderRight = formatTime, popperProps, popperPropsTime, prefix, readOnly, referenceDate: referenceDateProp, required = false, size, value: valueProp, ...restTriggerProps } = props;
+    // Internal state
+    const [focusedInput, setFocusedInput] = useState(null);
+    const [dateValue, setDateValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+    const [timeValue, setTimeValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+    // Refs
+    const inputLeftRef = useRef(null);
+    const inputRightRef = useRef(null);
+    const anchorRef = useRef(null);
+    const calendarPanelRef = useRef(null);
+    const timePanelRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
+    // Reference date for calendar
+    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'day'));
+    // Sync external value
+    useEffect(() => {
+        if (valueProp !== undefined) {
+            setDateValue(valueProp);
+            setTimeValue(valueProp);
+            if (valueProp) {
+                setReferenceDate(startOf(valueProp, 'day'));
             }
         }
-    }, [onPanelToggleProp, preventOpen]);
-    const onFocus = useCallback((event) => {
-        if (onFocusProp) {
-            onFocusProp(event);
+    }, [valueProp, startOf]);
+    // Open state based on focused input
+    const openCalendar = focusedInput === 'left' && !readOnly;
+    const openTimePanel = focusedInput === 'right' && !readOnly;
+    // Format values for display
+    const displayDateValue = useMemo(() => {
+        if (!dateValue)
+            return '';
+        return formatToString(locale, dateValue, formatDate) || '';
+    }, [dateValue, formatDate, formatToString, locale]);
+    const displayTimeValue = useMemo(() => {
+        if (!timeValue)
+            return '';
+        return formatToString(locale, timeValue, formatTime) || '';
+    }, [timeValue, formatTime, formatToString, locale]);
+    // Panel toggle handler
+    const onPanelToggle = useCallback((open, input) => {
+        if (onPanelToggleProp) {
+            onPanelToggleProp(open, input);
         }
-        onPanelToggle(true);
-    }, [onFocusProp, onPanelToggle]);
-    /** Controlling input value and bind change handler */
-    const inputRef = useRef(null);
-    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
-        defaultValue,
-        format,
-        formats,
-        inputRef,
-        value: valueProp,
-    });
-    /** Panel confirm handler */
-    const onConfirm = useCallback(() => {
-        if (onChangeProp) {
-            onChangeProp(internalValue);
+    }, [onPanelToggleProp]);
+    // Focus handlers
+    const onFocusLeft = useCallback(() => {
+        if (!readOnly) {
+            setFocusedInput('left');
+            onPanelToggle(true, 'left');
         }
-        onPanelToggle(false);
-    }, [internalValue, onChangeProp, onPanelToggle]);
-    /** using internal reference date */
-    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'hour'));
-    useEffect(() => {
-        if (internalValue) {
-            setReferenceDate(internalValue);
+    }, [onPanelToggle, readOnly]);
+    const onFocusRight = useCallback(() => {
+        if (!readOnly) {
+            setFocusedInput('right');
+            onPanelToggle(true, 'right');
         }
-    }, [internalValue]);
-    /** Bind input props */
-    const onResolvedKeyDown = useCallback((event) => {
-        if (onKeyDownProp) {
-            onKeyDownProp(event);
+    }, [onPanelToggle, readOnly]);
+    // Combine date and time into a single value
+    const combineDateTime = useCallback((date, time) => {
+        if (!date)
+            return undefined;
+        const timeSource = time || getNow();
+        const result = setHour(setMinute(setSecond(date, getSecond(timeSource)), getMinute(timeSource)), getHour(timeSource));
+        return result;
+    }, [getNow, getHour, getMinute, getSecond, setHour, setMinute, setSecond]);
+    // Close handler
+    const onClose = useCallback(() => {
+        setFocusedInput(null);
+        onPanelToggle(false, null);
+    }, [onPanelToggle]);
+    // Trigger onChange when both date and time are set
+    const notifyChange = useCallback((date, time) => {
+        if (!onChangeProp)
+            return;
+        if (date && time) {
+            const combined = combineDateTime(date, time);
+            onChangeProp(combined);
         }
-        onKeyDown(event);
-        if (event.key === 'Enter') {
-            onConfirm();
+    }, [combineDateTime, onChangeProp]);
+    // Handle left complete - auto focus right
+    const onLeftComplete = useCallback(() => {
+        if (timeValue) {
+            onClose();
         }
-    }, [onConfirm, onKeyDown, onKeyDownProp]);
-    const onResolvedBlur = useCallback((event) => {
-        if (onBlurProp) {
-            onBlurProp(event);
+        else {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRightRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
         }
-        onBlur(event);
-    }, [onBlur, onBlurProp]);
-    const resolvedInputProps = {
-        ...restInputProp,
-        size: inputSize,
-        onFocus,
-        onKeyDown: onResolvedKeyDown,
-        onBlur: onResolvedBlur,
-    };
-    /** Popper positioning */
-    const anchorRef = useRef(null);
-    const panelRef = useRef(null);
-    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
-    /** Blur, click away and key down close */
-    const onClose = useCallback(() => {
-        onChange(valueProp);
-        onPanelToggle(false);
-    }, [onChange, onPanelToggle, valueProp]);
+    }, [timeValue, onClose]);
+    // Handle left complete - auto focus right
+    const onRightComplete = useCallback(() => {
+        if (dateValue) {
+            onClose();
+        }
+        else {
+            setTimeout(() => {
+                var _a;
+                (_a = inputLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [dateValue, onClose]);
+    // Handle date change from input
+    const onChangeLeft = useCallback((isoValue) => {
+        if (!isoValue) {
+            setDateValue(undefined);
+            return;
+        }
+        if (isValid(isoValue)) {
+            setDateValue(isoValue);
+            setReferenceDate(startOf(isoValue, 'day'));
+            notifyChange(isoValue, timeValue);
+        }
+    }, [isValid, notifyChange, startOf, timeValue]);
+    const onChangeRight = useCallback((isoValue) => {
+        if (!isoValue) {
+            setTimeValue(undefined);
+            return;
+        }
+        if (isValid(isoValue)) {
+            setTimeValue(isoValue);
+            notifyChange(dateValue, isoValue);
+        }
+    }, [dateValue, isValid, notifyChange]);
+    const onCalendarChange = useCallback((target) => {
+        setDateValue(target);
+        setReferenceDate(startOf(target, 'day'));
+        notifyChange(target, timeValue);
+        onLeftComplete();
+    }, [notifyChange, startOf, timeValue, onLeftComplete]);
+    // Handle time change from panel
+    const onTimePanelChange = useCallback((target) => {
+        if (!target)
+            return;
+        setTimeValue(target);
+        notifyChange(dateValue, target);
+        onRightComplete();
+    }, [dateValue, notifyChange, onRightComplete]);
+    // Document event close for calendar
     usePickerDocumentEventClose({
-        open,
         anchorRef,
-        popperRef: panelRef,
-        lastElementRefInFlow: inputRef,
+        lastElementRefInFlow: inputLeftRef,
+        onChangeClose: onClose,
         onClose,
+        open: openCalendar,
+        popperRef: calendarPanelRef,
+    });
+    // Document event close for time panel
+    usePickerDocumentEventClose({
+        anchorRef,
+        lastElementRefInFlow: inputRightRef,
         onChangeClose: onClose,
+        onClose,
+        open: openTimePanel,
+        popperRef: timePanelRef,
     });
-    /** Bind on change to on clear */
-    const onClear = () => {
-        onChange(undefined);
+    const onClear = useCallback((evt) => {
+        setDateValue(undefined);
+        setTimeValue(undefined);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
-    };
-    /** Icon */
-    const onIconClick = (e) => {
-        e.stopPropagation();
-        if (open) {
-            onChange(valueProp);
+        onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(evt);
+    }, [onChangeProp, onClearProp]);
+    const onCalendarIconClick = useCallback(() => {
+        var _a;
+        if (readOnly || disabled)
+            return;
+        if (focusedInput) {
+            setFocusedInput(null);
+            onPanelToggle(false, null);
+        }
+        else {
+            (_a = inputLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        onPanelToggle(!open);
-    };
-    const suffixActionIcon = jsx(Icon, { icon: ClockIcon, onClick: onIconClick });
-    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DateTimePickerPanel, { ref: panelRef, anchor: anchorRef, calendarProps: calendarProps, confirmText: confirmText, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
+    }, [disabled, focusedInput, onPanelToggle, readOnly]);
+    const suffix = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarTimeIcon, onClick: onCalendarIconClick }));
+    return (jsxs(Fragment, { children: [jsx(PickerTriggerWithSeparator, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, formatLeft: formatDate, formatRight: formatTime, fullWidth: fullWidth, inputLeftRef: inputLeftRef, inputRightRef: inputRightRef, onBlurLeft: () => { }, onBlurRight: () => { }, onChangeLeft: onChangeLeft, onChangeRight: onChangeRight, onClear: onClear, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onLeftComplete: onLeftComplete, onRightComplete: onRightComplete, placeholderLeft: placeholderLeft, placeholderRight: placeholderRight, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffix, valueLeft: displayDateValue, valueRight: displayTimeValue }), jsx(DatePickerCalendar, { ref: calendarPanelRef, anchor: anchorRef, calendarProps: calendarProps, calendarRef: calendarRef, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isHalfYearDisabled: isHalfYearDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: openCalendar, popperProps: popperProps, referenceDate: referenceDate, value: dateValue }), jsx(TimePickerPanel, { ref: timePanelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onTimePanelChange, open: openTimePanel, popperProps: popperPropsTime, secondStep: secondStep, value: timeValue })] }));
 });
 
 export { DateTimePicker as default };

package/DateTimePicker/index.d.ts

@@ -1,2 +1,2 @@
-export { DateTimePickerPanelProps, default as DateTimePickerPanel, } from './DateTimePickerPanel';
-export { DateTimePickerProps, default } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';
+export { default } from './DateTimePicker';

package/DateTimePicker/index.js

@@ -1,2 +1 @@
-export { default as DateTimePickerPanel } from './DateTimePickerPanel.js';
 export { default } from './DateTimePicker.js';

package/Drawer/Drawer.js

@@ -5,14 +5,14 @@ import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js'
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
-    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
+    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
     const slideFadeDirection = useMemo(() => ({
         top: 'down',
         left: 'right',
         right: 'left',
         bottom: 'up',
     }), []);
-    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
+    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
 });
 
 export { Drawer as default };

package/Drawer/index.d.ts

@@ -1,2 +1,3 @@
 export type { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-export { DrawerProps, default } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { default } from './Drawer';

package/Dropdown/Dropdown.js

@@ -1,29 +1,19 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
+import { size } from '@floating-ui/react-dom';
 import { useClickAway } from '../hooks/useClickAway.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Popper from '../Popper/Popper.js';
 
-const popperOptions = {
-    modifiers: [
-        {
-            name: 'sameWidth',
-            enabled: true,
-            phase: 'beforeWrite',
-            requires: ['computeStyles'],
-            fn: ({ state }) => {
-                const reassignState = state;
-                reassignState.styles.popper.width = 'auto';
-                reassignState.styles.popper.minWidth = `${state.rects.reference.width}px`;
-            },
-            effect: ({ state }) => {
-                const reassignState = state;
-                reassignState.elements.popper.style.width = 'auto';
-                reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
-            },
-        },
-    ],
-};
+// Middleware to make the dropdown menu have the same width as the reference element
+const sameWidthMiddleware = size({
+    apply({ rects, elements }) {
+        Object.assign(elements.floating.style, {
+            width: 'auto',
+            minWidth: `${rects.reference.width}px`,
+        });
+    },
+});
 const Dropdown = forwardRef(function Dropdown(props, ref) {
     var _a;
     const { children, disableClickAway = false, menu, onClose, popperProps, ...rest } = props;
@@ -31,7 +21,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     const popperRef = useRef(null);
     const composedRef = useComposeRefs([ref, popperRef]);
     const open = popperProps === null || popperProps === void 0 ? void 0 : popperProps.open;
-    const modifiers = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.modifiers) || [];
+    const middleware = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.middleware) || [];
     useClickAway(() => {
         if (!open || disableClickAway || !onClose) {
             return;
@@ -45,7 +35,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     return (jsxs(Fragment, { children: [children(anchor), jsx(Popper, { ...popperProps, ref: composedRef, ...rest, anchor: anchor, options: {
                     placement: 'top-start',
                     ...popperProps === null || popperProps === void 0 ? void 0 : popperProps.options,
-                    modifiers: [...(popperOptions.modifiers || []), ...modifiers],
+                    middleware: [sameWidthMiddleware, ...middleware],
                 }, children: menu })] }));
 });
 

package/Dropdown/index.d.ts

@@ -1 +1,2 @@
-export { DropdownProps, default } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+export { default } from './Dropdown';

package/Empty/Empty.d.ts

@@ -1,18 +1,3 @@
-import { ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface EmptyProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
-    /**
-     * if true, the empty component will be 100% height of it's parent
-     */
-    fullHeight?: boolean;
-    /**
-     * Override default icon.
-     */
-    image?: ReactNode;
-    /**
-     * Optionally given a title. If not required, simply use react children to display description.
-     */
-    title?: ReactNode;
-}
+import { EmptyProps } from '.';
 declare const Empty: import("react").ForwardRefExoticComponent<EmptyProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Empty;

package/Empty/Empty.js

@@ -1,15 +1,44 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { emptyClasses } from '@mezzanine-ui/core/empty';
-import { FolderOpenIcon } from '@mezzanine-ui/icons';
+import { SystemIcon, FolderOpenIcon, NotificationIcon, BoxIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import { EmptyMainInitialDataIcon } from './icons/EmptyMainInitialDataIcon.js';
+import { EmptyMainResultIcon } from './icons/EmptyMainResultIcon.js';
+import { EmptyMainSystemIcon } from './icons/EmptyMainSystemIcon.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
+const iconMap = {
+    custom: null,
+    'initial-data': BoxIcon,
+    notification: NotificationIcon,
+    result: FolderOpenIcon,
+    system: SystemIcon,
+};
+const mainIconMap = {
+    custom: null,
+    'initial-data': jsx(EmptyMainInitialDataIcon, { className: emptyClasses.icon }),
+    notification: null,
+    result: jsx(EmptyMainResultIcon, { className: emptyClasses.icon }),
+    system: jsx(EmptyMainSystemIcon, { className: emptyClasses.icon }),
+};
+const renderButtonOrElement = (button, size, variant) => {
+    if (!button)
+        return null;
+    if (isValidElement(button)) {
+        return cloneElement(button, { size, variant });
+    }
+    return jsx(Button, { ...button, size: size, variant: variant });
+};
 const Empty = forwardRef(function Empty(props, ref) {
-    const { children, className, fullHeight, image = jsx(Icon, { className: emptyClasses.icon, icon: FolderOpenIcon }), title, ...rest } = props;
-    return (jsxs("div", { ref: ref, ...rest, className: cx(emptyClasses.host, {
-            [emptyClasses.fullHeight]: fullHeight,
-        }, className), children: [image, title && jsx("div", { className: emptyClasses.title, children: title }), children && jsx("div", { className: emptyClasses.description, children: children })] }));
+    const { actions, className, description, pictogram, size = 'main', title, type = 'initial-data', ...rest } = props;
+    const icon = (size === 'main'
+        ? mainIconMap[type]
+        : iconMap[type] && (jsx(Icon, { className: emptyClasses.icon, icon: iconMap[type] }))) || null;
+    const fragmentButtons = actions && 'secondaryButton' in actions ? (jsxs(Fragment, { children: [renderButtonOrElement(actions.secondaryButton, size, 'base-secondary'), renderButtonOrElement(actions.primaryButton, size, 'base-primary')] })) : (renderButtonOrElement(actions, size, 'base-secondary'));
+    return (jsx("div", { ...rest, className: cx(emptyClasses.host, emptyClasses.size(size), className), ref: ref, children: jsxs("div", { className: emptyClasses.container, children: [pictogram ? jsx("div", { className: emptyClasses.icon, children: pictogram }) : icon, jsx("p", { className: emptyClasses.title, children: title }), description && jsx("p", { className: emptyClasses.description, children: description }), actions && size !== 'minor' && (jsx(ButtonGroup, { className: emptyClasses.actions, children: fragmentButtons }))] }) }));
 });
 
 export { Empty as default };

package/Empty/icons/EmptyMainInitialDataIcon.d.ts

@@ -0,0 +1,4 @@
+export interface EmptyMainInitialDataIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const EmptyMainInitialDataIcon: import("react").ForwardRefExoticComponent<Omit<EmptyMainInitialDataIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/Empty/icons/EmptyMainInitialDataIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const EmptyMainInitialDataIcon = forwardRef(function EmptyInitialDataIcon(props, ref) {
+    const { className, size = 64, ...rest } = props;
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_15033_10920", x1: "27.52", x2: "5.12", y1: "11.7333", y2: "52.6933", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_15033_10920", x1: "43.2", x2: "38.2673", y1: "11.7333", y2: "52.0904", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsx("clipPath", { id: "clip0_15033_10920", children: jsx("rect", { fill: "white", height: "64", width: "64" }) })] }), jsxs("g", { clipPath: "url(#clip0_15033_10920)", children: [jsx("path", { d: "M5.12 11.7333H27.52V52.6933H6.11999C5.56771 52.6933 5.12 52.2456 5.12 51.6933V11.7333Z", fill: "url(#paint0_linear_15033_10920)" }), jsx("path", { d: "M5.10416 11.7333H27.4282L22.3184 27.5737C22.1852 27.9867 21.8007 28.2667 21.3667 28.2667H1.14414C0.465656 28.2667 -0.0158672 27.6054 0.192428 26.9597L5.10416 11.7333Z", fill: "#E5E7EB" }), jsx("path", { d: "M27.52 11.7333H58.88V51.6933C58.88 52.2456 58.4323 52.6933 57.88 52.6933H27.52V11.7333Z", fill: "url(#paint1_linear_15033_10920)" }), jsx("path", { d: "M27.4282 11.7333H58.8871L63.7988 26.9597C64.0071 27.6054 63.5255 28.2667 62.8471 28.2667H33.4897C33.0557 28.2667 32.6712 27.9867 32.5379 27.5737L27.4282 11.7333Z", fill: "#E5E7EB" })] })] }));
+});
+
+export { EmptyMainInitialDataIcon };

package/Empty/icons/EmptyMainResultIcon.d.ts

@@ -0,0 +1,4 @@
+export interface EmptyMainResultIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const EmptyMainResultIcon: import("react").ForwardRefExoticComponent<Omit<EmptyMainResultIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/Empty/icons/EmptyMainResultIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const EmptyMainResultIcon = forwardRef(function EmptyResultIcon(props, ref) {
+    const { className, size = 64, ...rest } = props;
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_14988_13929", x1: "28.9684", x2: "24.6011", y1: "-4.50146", y2: "54.5206", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_14988_13929", x1: "32", x2: "30.1462", y1: "23.8542", y2: "64.7656", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsx("clipPath", { id: "clip0_14988_13929", children: jsx("rect", { fill: "white", height: "64", width: "64" }) })] }), jsxs("g", { clipPath: "url(#clip0_14988_13929)", children: [jsx("path", { d: "M0 10.0332V53.8437C0 54.396 0.447713 54.8437 0.999998 54.8437L56.9368 54.8437C57.4891 54.8437 57.9368 54.396 57.9368 53.8437V14.8554C57.9368 14.3031 57.4891 13.8554 56.9368 13.8554H30.1099C29.8426 13.8554 29.5864 13.7483 29.3985 13.5582L25.2219 9.33041C25.034 9.14024 24.7778 9.0332 24.5105 9.0332H1C0.447715 9.0332 0 9.48092 0 10.0332Z", fill: "url(#paint0_linear_14988_13929)" }), jsx("path", { d: "M5.90507 24.6622C5.9969 24.1929 6.40821 23.8542 6.88646 23.8542H62.7854C63.4147 23.8542 63.8876 24.4286 63.7668 25.0463L58.0949 54.0357C58.0031 54.5051 57.5918 54.8437 57.1135 54.8437H1.21461C0.58527 54.8437 0.112379 54.2693 0.23322 53.6517L5.90507 24.6622Z", fill: "url(#paint1_linear_14988_13929)" })] })] }));
+});
+
+export { EmptyMainResultIcon };

package/Empty/icons/EmptyMainSystemIcon.d.ts

@@ -0,0 +1,4 @@
+export interface EmptyMainSystemIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const EmptyMainSystemIcon: import("react").ForwardRefExoticComponent<Omit<EmptyMainSystemIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/Empty/icons/EmptyMainSystemIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const EmptyMainSystemIcon = forwardRef(function EmptySystemIcon(props, ref) {
+    const { className, size = 64, ...rest } = props;
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_15103_25151", x1: "20.9997", x2: "17.2887", y1: "22.9988", y2: "62.6527", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_15103_25151", x1: "46.9988", x2: "44.0018", y1: "0.845703", y2: "32.8715", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] })] }), jsx("path", { d: "M28.5453 24.2114C29.025 24.34 29.3377 24.8011 29.2796 25.2944L28.9089 28.4387C28.8618 28.8389 29.061 29.2259 29.4033 29.4385C30.3233 30.01 31.1807 30.6725 31.9633 31.4135C32.237 31.6727 32.628 31.7729 32.9875 31.6594L36.1757 30.6527C36.623 30.5114 37.1083 30.7001 37.3429 31.1063L39.6193 35.0496C39.8676 35.4796 39.7627 36.0268 39.3729 36.3345L36.8886 38.2954C36.5722 38.5452 36.4395 38.9599 36.5314 39.3524C36.8056 40.5238 36.9512 41.7448 36.9512 42.9998C36.9512 43.1076 37.0086 43.2069 37.1042 43.2566L40.4602 45.0005C40.8765 45.2168 41.0864 45.6935 40.965 46.1467L39.7864 50.545C39.6578 51.0248 39.1967 51.3375 38.7034 51.2793L35.5592 50.9087C35.1589 50.8615 34.7719 51.0608 34.5593 51.4032C33.9876 52.3238 33.3249 53.1817 32.5836 53.9647C32.3243 54.2386 32.224 54.6298 32.3378 54.9894L33.3456 58.1761C33.4871 58.6236 33.2985 59.1092 32.8921 59.3438L28.9482 61.6202C28.5181 61.8684 27.9711 61.7634 27.6634 61.3737L25.7024 58.8893C25.4526 58.5729 25.0379 58.4402 24.6454 58.5322C23.4743 58.8066 22.2536 58.9528 20.999 58.9529C20.8906 58.9529 20.7908 59.0106 20.7408 59.1068L18.9983 62.4608C18.7819 62.8771 18.3053 63.0871 17.852 62.9657L13.4535 61.7871C12.9739 61.6585 12.6612 61.1975 12.7192 60.7043L13.0893 57.5587C13.1364 57.1586 12.9372 56.7717 12.5949 56.5592C11.6746 55.9877 10.8168 55.3254 10.034 54.5843C9.76014 54.325 9.36898 54.2247 9.00937 54.3384L5.82349 55.3455C5.37613 55.487 4.8906 55.2983 4.65603 54.892L2.37963 50.9489C2.13136 50.5188 2.23626 49.9718 2.62599 49.6641L5.10963 47.7031C5.42595 47.4533 5.55855 47.0387 5.46669 46.6463C5.19255 45.4751 5.04691 44.2544 5.04688 42.9998C5.04688 42.8907 4.98784 42.7903 4.89111 42.7401L1.53887 40.998C1.12256 40.7817 0.912625 40.305 1.03405 39.8519L2.21267 35.4533C2.34121 34.9736 2.80227 34.661 3.29546 34.719L6.44003 35.089C6.84019 35.1361 7.22705 34.9369 7.43962 34.5946C8.01115 33.6743 8.67359 32.8164 9.41466 32.0336C9.67386 31.7598 9.77413 31.3688 9.66058 31.0093L8.65395 27.8221C8.51268 27.3748 8.70131 26.8894 9.10755 26.6549L13.0507 24.3785C13.4808 24.1302 14.028 24.2351 14.3357 24.625L16.2957 27.1082C16.5454 27.4246 16.9601 27.5573 17.3527 27.4655C18.5238 27.1916 19.7445 27.0467 20.999 27.0466C21.1074 27.0466 21.2073 26.9879 21.2573 26.8917L23.0007 23.5375C23.2171 23.1213 23.6937 22.9114 24.1468 23.0328L28.5453 24.2114ZM20.999 35.8386C17.0447 35.8389 13.839 39.0452 13.8389 42.9998C13.8391 46.9542 17.0448 50.1596 20.999 50.1599C24.9533 50.1597 28.1599 46.9542 28.1602 42.9998C28.16 39.0452 24.9534 35.8389 20.999 35.8386Z", fill: "url(#paint0_linear_15103_25151)" }), jsx("path", { d: "M51.5436 1.43766C52.0327 1.52392 52.3844 1.95611 52.3695 2.45257L52.3023 4.68433C52.2901 5.0873 52.5229 5.45489 52.8806 5.64086C53.5763 6.00255 54.234 6.42699 54.8475 6.90552C55.1449 7.13744 55.5428 7.20387 55.8912 7.05945L58.1098 6.13956C58.5431 5.95991 59.043 6.10557 59.312 6.48982L61.2159 9.20937C61.5007 9.61623 61.4437 10.1705 61.0822 10.5109L59.4567 12.0414C59.163 12.318 59.0677 12.7429 59.1898 13.1274C59.4235 13.863 59.5926 14.6272 59.69 15.4137C59.7364 15.7884 59.9711 16.1173 60.32 16.2615L62.534 17.1766C62.9676 17.3558 63.2184 17.8124 63.1369 18.2744L62.5604 21.5436C62.4741 22.0327 62.0419 22.3844 61.5455 22.3695L59.3127 22.3023C58.9097 22.2901 58.5422 22.5229 58.3562 22.8806C57.9946 23.5762 57.5703 24.2339 57.0918 24.8474C56.8597 25.1448 56.7933 25.5429 56.9379 25.8914L57.8582 28.1097C58.038 28.5431 57.8924 29.0431 57.5081 29.3122L54.7885 31.216C54.3817 31.5007 53.8276 31.4439 53.4871 31.0824L51.9556 29.4564C51.6791 29.1628 51.2543 29.0676 50.8699 29.1896C50.1346 29.423 49.3706 29.5918 48.5844 29.6891C48.2097 29.7355 47.8807 29.9701 47.7365 30.3191L46.8214 32.5339C46.6422 32.9676 46.1856 33.2183 45.7235 33.1369L42.4542 32.5603C41.9652 32.4741 41.6135 32.0421 41.6283 31.5457L41.695 29.3125C41.707 28.9097 41.4743 28.5422 41.1166 28.3564C40.4207 27.9947 39.7626 27.5704 39.1489 27.0918C38.8513 26.8598 38.4531 26.7934 38.1047 26.938L35.8884 27.858C35.455 28.0379 34.9549 27.8923 34.6858 27.5079L32.782 24.7884C32.4973 24.3817 32.5541 23.8276 32.9154 23.4871L34.5408 21.9556C34.8343 21.6791 34.9295 21.2543 34.8074 20.87C34.5738 20.1346 34.4045 19.3706 34.3071 18.5843C34.2606 18.2096 34.026 17.8807 33.6771 17.7365L31.4639 16.8215C31.0304 16.6423 30.7797 16.1857 30.8612 15.7237L31.4377 12.4542C31.5239 11.9652 31.956 11.6135 32.4523 11.6283L34.6846 11.695C35.0874 11.707 35.4549 11.4743 35.6407 11.1166C36.0024 10.4207 36.4267 9.76253 36.9054 9.14874C37.1373 8.85127 37.2038 8.45317 37.0592 8.10474L36.1397 5.88822C35.96 5.45493 36.1056 4.95495 36.4898 4.68589L39.2086 2.78214C39.6154 2.49733 40.1695 2.55412 40.51 2.91551L42.0414 4.54078C42.318 4.8343 42.7427 4.92944 43.1271 4.80734C43.8625 4.57374 44.6267 4.40454 45.413 4.30706C45.7876 4.26062 46.1164 4.02615 46.2607 3.67739L47.1764 1.46366C47.3558 1.03023 47.8122 0.779666 48.2742 0.861125L51.5436 1.43766ZM46.999 11.2578C43.8288 11.2578 41.258 13.8288 41.2578 16.999C41.258 20.1693 43.8287 22.7392 46.999 22.7393C50.169 22.7389 52.7391 20.1691 52.7393 16.999C52.739 13.829 50.169 11.2582 46.999 11.2578Z", fill: "url(#paint1_linear_15103_25151)" })] }));
+});
+
+export { EmptyMainSystemIcon };

package/Empty/index.d.ts

@@ -1 +1,2 @@
-export { EmptyProps, default } from './Empty';
+export type { EmptyProps } from './typings';
+export { default } from './Empty';

package/Empty/typings.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { ButtonGroupChild, ButtonProps } from '../Button';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface BaseEmptyProps {
+    /**
+     * The title text for the empty state.
+     * This is the main heading that describes the state.
+     */
+    title: string;
+}
+export interface PresetPictogramEmptyProps {
+    /**
+     * The type of empty state, which determines the icon and color theme.
+     * @default 'initial-data'
+     */
+    type?: 'initial-data' | 'result' | 'system';
+    /**
+     * Custom pictogram element.
+     */
+    pictogram?: ReactNode;
+}
+export interface CustomPictogramEmptyProps {
+    type?: 'notification' | 'custom';
+    pictogram?: ReactNode;
+}
+export interface MainOrSubEmptyProps {
+    /**
+     * Action buttons configuration for primary and secondary actions.
+     * Renders buttons in the order: secondary (left or only one), primary (right).
+     */
+    actions?: {
+        primaryButton?: ButtonProps | ButtonGroupChild;
+        secondaryButton: ButtonProps | ButtonGroupChild;
+    } | ButtonProps | ButtonGroupChild;
+    /**
+     * Optional description text displayed below the title.
+     * Provides additional context or details about the empty state.
+     */
+    description?: string;
+    /**
+     * The size variant of the empty state.
+     * Controls typography, spacing, and overall dimensions.
+     * @default 'main'
+     */
+    size?: 'main' | 'sub';
+}
+export interface MinorEmptyProps {
+    actions?: never;
+    description?: never;
+    size: 'minor';
+}
+export type EmptyProps = (MainOrSubEmptyProps | MinorEmptyProps) & (CustomPictogramEmptyProps | PresetPictogramEmptyProps) & BaseEmptyProps & Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'>;

package/Form/FormControlContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from 'react';
 
 const FormControlContext = createContext(undefined);