@duskmoon-dev/components 0.3.3 → 0.4.0

package/dist/components/dm-pro-table/index.js

@@ -35,6 +35,10 @@ function getDmProTableClasses({ className }) {
   return cn(dmProTableBaseClass, className);
 }
 
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -58,7 +62,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -78,11 +82,14 @@ function getButtonClasses({
   isLoading,
   className
 }) {
-  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], shape === "circle" && size === "xs" && "btn-icon-sm", shape === "circle" && size === "sm" && "btn-icon-sm", shape === "circle" && size === "lg" && "btn-icon-lg", block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
 }
 
 // src/components/button/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function isPromiseLike(value) {
+  return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
 function Button({
   color = "primary",
   appearance = "filled",
@@ -96,8 +103,155 @@ function Button({
   children,
   disabled,
   ref,
+  confirm,
+  onClick,
   ...props
 }) {
+  const buttonRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const cancelRef = React.useRef(null);
+  const approvalRef = React.useRef("idle");
+  const pendingRef = React.useRef(false);
+  const actionRef = React.useRef(0);
+  const operationRef = React.useRef(0);
+  const mountedRef = React.useRef(false);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [confirmError, setConfirmError] = React.useState(false);
+  const generatedId = React.useId().replace(/:/g, "");
+  const popoverId = `button-confirm-${generatedId}`;
+  const titleId = `${popoverId}-title`;
+  const descriptionId = `${popoverId}-description`;
+  const anchor = `--${popoverId}-anchor`;
+  const hasConfirm = Boolean(confirm);
+  const confirmation = confirm && typeof confirm === "object" ? confirm : undefined;
+  const title = confirmation ? confirmation.title : "Confirm action";
+  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
+  const content = confirmation?.component ?? confirmation?.message ?? confirmation?.description;
+  const hasContent = content !== undefined && content !== null && content !== false && content !== "";
+  const mergedRef = React.useCallback((node) => {
+    buttonRef.current = node;
+    if (!node) {
+      if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+      return;
+    }
+    const cleanup = typeof ref === "function" ? ref(node) : undefined;
+    if (ref && typeof ref !== "function")
+      ref.current = node;
+    return () => {
+      buttonRef.current = null;
+      if (typeof cleanup === "function")
+        cleanup();
+      else if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+    };
+  }, [ref]);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React.useEffect(() => {
+    operationRef.current += 1;
+    approvalRef.current = "idle";
+    setConfirmError(false);
+    setPortalTarget(hasConfirm ? document.body : null);
+  }, [hasConfirm]);
+  function closePopover() {
+    if (popoverRef.current?.matches(":popover-open")) {
+      popoverRef.current.hidePopover();
+    }
+    buttonRef.current?.focus();
+  }
+  function handleClick(event) {
+    if (!confirm) {
+      onClick?.(event);
+      return;
+    }
+    if (approvalRef.current === "native") {
+      approvalRef.current = "idle";
+      return;
+    }
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      let result;
+      try {
+        result = onClick?.(event);
+      } catch {
+        event.preventDefault();
+        pendingRef.current = false;
+        setConfirmError(true);
+        return;
+      }
+      if (!isPromiseLike(result)) {
+        pendingRef.current = false;
+        closePopover();
+        return;
+      }
+      const userPreventedDefault = event.defaultPrevented;
+      event.preventDefault();
+      setConfirmLoading(true);
+      const action = actionRef.current;
+      const operation = operationRef.current;
+      Promise.resolve(result).then(() => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        closePopover();
+        if (!userPreventedDefault && !buttonRef.current?.disabled) {
+          approvalRef.current = "native";
+          buttonRef.current?.click();
+          approvalRef.current = "idle";
+        }
+      }, () => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        setConfirmError(true);
+        cancelRef.current?.focus();
+      });
+      return;
+    }
+    event.preventDefault();
+    if (disabled || isLoading || pendingRef.current)
+      return;
+    if (popoverRef.current?.matches(":popover-open")) {
+      closePopover();
+      return;
+    }
+    setConfirmError(false);
+    popoverRef.current?.showPopover();
+    cancelRef.current?.focus();
+  }
+  function handleConfirm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = buttonRef.current;
+    if (disabled || isLoading || pendingRef.current || !trigger || trigger.disabled || !event.currentTarget.matches(":popover-open"))
+      return;
+    setConfirmError(false);
+    pendingRef.current = true;
+    actionRef.current += 1;
+    approvalRef.current = "action";
+    trigger.click();
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      pendingRef.current = false;
+    }
+  }
   const classes = getButtonClasses({
     color,
     appearance,
@@ -107,34 +261,109 @@ function Button({
     isLoading,
     className
   });
-  return /* @__PURE__ */ jsxs("button", {
-    ref,
-    className: classes,
-    disabled: disabled || isLoading,
-    "aria-busy": isLoading,
-    "aria-disabled": disabled || isLoading,
-    ...props,
+  const confirmClasses = getButtonClasses({
+    color,
+    size: "sm",
+    isLoading: confirmLoading
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      isLoading && /* @__PURE__ */ jsx("span", {
-        className: "btn-spinner"
-      }),
-      !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
-        className: "btn-icon-left",
-        children: leftIcon
-      }),
-      /* @__PURE__ */ jsx("span", {
-        className: "btn-content",
-        children
+      /* @__PURE__ */ jsxs("button", {
+        ref: confirm ? mergedRef : ref,
+        className: classes,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-disabled": disabled || isLoading,
+        ...props,
+        style: confirm ? { ...props.style, anchorName: anchor } : props.style,
+        "aria-haspopup": confirm ? "dialog" : props["aria-haspopup"],
+        "aria-controls": confirm ? popoverId : props["aria-controls"],
+        onClick: confirm ? handleClick : onClick,
+        children: [
+          isLoading && /* @__PURE__ */ jsx("span", {
+            className: "btn-spinner"
+          }),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-left",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "btn-content",
+            children
+          }),
+          !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-right",
+            children: rightIcon
+          })
+        ]
       }),
-      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
-        className: "btn-icon-right",
-        children: rightIcon
-      })
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs("form", {
+        id: popoverId,
+        ref: popoverRef,
+        popover: "auto",
+        role: "dialog",
+        "aria-labelledby": hasTitle ? titleId : undefined,
+        "aria-label": hasTitle ? undefined : "Confirm action",
+        "aria-describedby": hasContent ? descriptionId : undefined,
+        className: "popover popover-confirm popover-bottom",
+        style: { positionAnchor: anchor },
+        onSubmit: handleConfirm,
+        onClick: (event) => event.stopPropagation(),
+        onToggle: (event) => {
+          if (!event.currentTarget.matches(":popover-open")) {
+            operationRef.current += 1;
+            if (event.currentTarget.contains(document.activeElement) || document.activeElement === document.body) {
+              buttonRef.current?.focus();
+            }
+          }
+        },
+        children: [
+          hasTitle && /* @__PURE__ */ jsx("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
     ]
   });
 }
 // src/components/dm-table/DmTable.tsx
-import { useMemo as useMemo7, useState as useState8 } from "react";
+import { useMemo as useMemo8, useState as useState10 } from "react";
 
 // src/classes/dm-table.ts
 var dmTableBaseClass = "dm-table";
@@ -635,11 +864,11 @@ var DmPagination = forwardRef2(({
 DmPagination.displayName = "DmPagination";
 // src/components/dm-search/DmSearch.tsx
 import {
-  forwardRef as forwardRef6,
-  useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo5,
-  useState as useState6
+  forwardRef as forwardRef7,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo6,
+  useState as useState8
 } from "react";
 
 // src/classes/dm-search.ts
@@ -659,8 +888,425 @@ function getDmSearchClasses({
 }
 
 // src/components/date-picker/DatePicker.tsx
+import { forwardRef as forwardRef4, useMemo as useMemo4, useState as useState5 } from "react";
+
+// src/components/calendar/Calendar.tsx
 import { forwardRef as forwardRef3, useMemo as useMemo3, useState as useState3 } from "react";
 
+// src/classes/calendar.ts
+var calendarBaseClass = "datepicker calendar";
+var calendarHeaderClass = "calendar-header";
+var calendarTitleClass = "calendar-title";
+var calendarControlsClass = "calendar-controls";
+var calendarNavClass = "calendar-nav";
+var calendarModeClass = "calendar-mode";
+var calendarWeekdaysClass = "calendar-weekdays";
+var calendarWeekdayClass = "calendar-weekday";
+var calendarBodyClass = "calendar-body";
+var calendarDateGridClass = "calendar-date-grid";
+var calendarMonthGridClass = "calendar-month-grid";
+var calendarCellContentClass = "calendar-cell-content";
+function getCalendarClasses({
+  fullscreen = true,
+  mode = "month",
+  className
+}) {
+  return cn(calendarBaseClass, fullscreen ? "calendar-fullscreen" : "calendar-card", mode === "year" && "calendar-year-mode", className);
+}
+function getCalendarCellClasses({
+  selected,
+  today,
+  outside,
+  disabled,
+  className
+}) {
+  return cn("calendar-cell", selected && "calendar-cell-selected", today && "calendar-cell-today", outside && "calendar-cell-outside", disabled && "calendar-cell-disabled", className);
+}
+
+// src/components/calendar/Calendar.tsx
+import { jsx as jsx5, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
+var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function formatMonth(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-01`;
+}
+function parseDate(value) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+  }
+  if (typeof value === "string" && value.length > 0) {
+    const [year, month = "1", day = "1"] = value.split("-");
+    const parsed = new Date(Number(year), Number(month) - 1, Number(day));
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed;
+    }
+  }
+  const today = new Date;
+  return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addYears(date, amount) {
+  return new Date(date.getFullYear() + amount, date.getMonth(), 1);
+}
+function startOfCalendarGrid(panelDate) {
+  const firstOfMonth = new Date(panelDate.getFullYear(), panelDate.getMonth(), 1);
+  const start = new Date(firstOfMonth);
+  start.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  return start;
+}
+function buildDateGrid(panelDate) {
+  const start = startOfCalendarGrid(panelDate);
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return date;
+  });
+}
+function isSameMonth(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+function isOutsideRange(date, validRange) {
+  if (!validRange) {
+    return false;
+  }
+  const current = formatDate(date);
+  const start = formatDate(parseDate(validRange[0]));
+  const end = formatDate(parseDate(validRange[1]));
+  return current < start || current > end;
+}
+function Header({
+  panelDate,
+  mode,
+  setPanelDate,
+  setMode
+}) {
+  const title = mode === "year" ? String(panelDate.getFullYear()) : `${MONTHS[panelDate.getMonth()]} ${panelDate.getFullYear()}`;
+  return /* @__PURE__ */ jsxs4("div", {
+    className: calendarHeaderClass,
+    children: [
+      /* @__PURE__ */ jsx5("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Previous panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, -1) : addMonths(panelDate, -1), mode),
+        children: /* @__PURE__ */ jsx5("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx5("path", {
+            d: "m15 18-6-6 6-6"
+          })
+        })
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: calendarControlsClass,
+        children: [
+          /* @__PURE__ */ jsx5("div", {
+            className: calendarTitleClass,
+            children: title
+          }),
+          /* @__PURE__ */ jsxs4("div", {
+            className: calendarModeClass,
+            children: [
+              /* @__PURE__ */ jsx5("button", {
+                type: "button",
+                "aria-pressed": mode === "month",
+                onClick: () => setMode("month"),
+                children: "Month"
+              }),
+              /* @__PURE__ */ jsx5("button", {
+                type: "button",
+                "aria-pressed": mode === "year",
+                onClick: () => setMode("year"),
+                children: "Year"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx5("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Next panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, 1) : addMonths(panelDate, 1), mode),
+        children: /* @__PURE__ */ jsx5("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx5("path", {
+            d: "m9 18 6-6-6-6"
+          })
+        })
+      })
+    ]
+  });
+}
+var Calendar = forwardRef3(({
+  className,
+  value,
+  defaultValue,
+  mode,
+  defaultMode = "month",
+  fullscreen = true,
+  validRange,
+  disabledDate,
+  dateCellRender,
+  dateFullCellRender,
+  monthCellRender,
+  monthFullCellRender,
+  cellRender,
+  fullCellRender,
+  headerRender,
+  onChange,
+  onSelect,
+  onPanelChange,
+  ...props
+}, ref) => {
+  const selectedDate = parseDate(value ?? defaultValue);
+  const [innerValue, setInnerValue] = useState3(() => formatDate(selectedDate));
+  const [panelDate, setInnerPanelDate] = useState3(selectedDate);
+  const [innerMode, setInnerMode] = useState3(mode ?? defaultMode);
+  const currentMode = mode ?? innerMode;
+  const currentValue = value === undefined ? innerValue : formatDate(parseDate(value));
+  const today = useMemo3(() => formatDate(new Date), []);
+  const dateGrid = useMemo3(() => buildDateGrid(panelDate), [panelDate]);
+  function emitPanelChange(nextDate, nextMode = currentMode) {
+    setInnerPanelDate(nextDate);
+    onPanelChange?.(formatDate(nextDate), nextMode);
+  }
+  function setCalendarMode(nextMode) {
+    if (mode === undefined) {
+      setInnerMode(nextMode);
+    }
+    onPanelChange?.(formatDate(panelDate), nextMode);
+  }
+  function commitValue(nextDate, source) {
+    const nextValue = source === "month" ? formatMonth(nextDate) : formatDate(nextDate);
+    if (disabledDate?.(nextValue) || isOutsideRange(nextDate, validRange)) {
+      return;
+    }
+    if (value === undefined) {
+      setInnerValue(nextValue);
+    }
+    setInnerPanelDate(nextDate);
+    onSelect?.(nextValue, { source });
+    onChange?.(nextValue);
+  }
+  function renderDateCell(date) {
+    const dateValue = formatDate(date);
+    const originNode = /* @__PURE__ */ jsxs4("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx5("span", {
+          children: date.getDate()
+        }),
+        dateCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "month"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? dateFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx5("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === currentValue,
+        today: dateValue === today,
+        outside: !isSameMonth(date, panelDate),
+        disabled
+      }),
+      onClick: () => commitValue(date, "date"),
+      children: content
+    }, dateValue);
+  }
+  function renderMonthCell(month) {
+    const date = new Date(panelDate.getFullYear(), month, 1);
+    const dateValue = formatMonth(date);
+    const originNode = /* @__PURE__ */ jsxs4("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx5("span", {
+          children: MONTHS[month]
+        }),
+        monthCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "year"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? monthFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx5("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === formatMonth(parseDate(currentValue)),
+        today: dateValue === formatMonth(new Date),
+        disabled
+      }),
+      onClick: () => commitValue(date, "month"),
+      children: content
+    }, dateValue);
+  }
+  return /* @__PURE__ */ jsxs4("div", {
+    ...props,
+    ref,
+    className: getCalendarClasses({
+      fullscreen,
+      mode: currentMode,
+      className
+    }),
+    children: [
+      headerRender ? headerRender({
+        value: formatDate(panelDate),
+        type: currentMode,
+        onChange: (nextValue) => emitPanelChange(parseDate(nextValue)),
+        onTypeChange: setCalendarMode
+      }) : /* @__PURE__ */ jsx5(Header, {
+        panelDate,
+        mode: currentMode,
+        setPanelDate: emitPanelChange,
+        setMode: setCalendarMode
+      }),
+      /* @__PURE__ */ jsx5("div", {
+        className: calendarBodyClass,
+        children: currentMode === "month" ? /* @__PURE__ */ jsxs4(Fragment2, {
+          children: [
+            /* @__PURE__ */ jsx5("div", {
+              className: calendarWeekdaysClass,
+              "aria-hidden": "true",
+              children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx5("span", {
+                className: calendarWeekdayClass,
+                children: weekday
+              }, weekday))
+            }),
+            /* @__PURE__ */ jsx5("div", {
+              className: calendarDateGridClass,
+              children: dateGrid.map(renderDateCell)
+            })
+          ]
+        }) : /* @__PURE__ */ jsx5("div", {
+          className: calendarMonthGridClass,
+          children: MONTHS.map((_, month) => renderMonthCell(month))
+        })
+      })
+    ]
+  });
+});
+Calendar.displayName = "Calendar";
+// src/components/date-picker/usePickerDropdown.ts
+import { useEffect as useEffect2, useId, useImperativeHandle, useRef as useRef2, useState as useState4 } from "react";
+function usePickerDropdown({
+  open,
+  defaultOpen,
+  disabled,
+  onOpenChange,
+  ref
+}) {
+  const rootRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const skipFocus = useRef2(false);
+  const panelId = useId();
+  const [innerOpen, setInnerOpen] = useState4(Boolean(defaultOpen));
+  const visible = !disabled && (open ?? innerOpen);
+  useImperativeHandle(ref, () => rootRef.current, []);
+  function setVisible(next) {
+    if (disabled || next === visible)
+      return;
+    if (open === undefined)
+      setInnerOpen(next);
+    onOpenChange?.(next);
+  }
+  function closeAndFocus() {
+    skipFocus.current = true;
+    inputRef.current?.focus();
+    skipFocus.current = false;
+    setVisible(false);
+  }
+  useEffect2(() => {
+    function handleOutside(event) {
+      if (visible && !rootRef.current?.contains(event.target))
+        setVisible(false);
+    }
+    function handleKeyDown(event) {
+      if (event.defaultPrevented || !rootRef.current?.contains(event.target))
+        return;
+      if (event.key === "Escape" && visible) {
+        event.preventDefault();
+        closeAndFocus();
+      } else if (event.key === "ArrowDown" && event.target === inputRef.current) {
+        event.preventDefault();
+        setVisible(true);
+      }
+    }
+    document.addEventListener("pointerdown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  return {
+    rootRef,
+    inputRef,
+    panelId,
+    visible,
+    setVisible,
+    closeAndFocus,
+    onInputFocus: () => {
+      if (!skipFocus.current)
+        setVisible(true);
+    },
+    onRootBlur: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget))
+        setVisible(false);
+    }
+  };
+}
+
 // src/classes/date-picker.ts
 var datePickerBaseClass = "datepicker";
 var datePickerInputClass = "datepicker-input";
@@ -708,7 +1354,7 @@ function getDatePickerDropdownClasses({
 }
 
 // src/components/date-picker/DatePicker.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function todayValue(picker) {
   const today = new Date;
   const year = today.getFullYear();
@@ -747,9 +1393,10 @@ function placeholderForPicker(picker) {
 function normalizeDateValue(value) {
   return typeof value === "string" && value.length > 0 ? value : undefined;
 }
-var DatePickerRoot = forwardRef3(({
+var DatePickerRoot = forwardRef4(({
   allowClear,
   className,
+  inputProps,
   defaultOpen,
   defaultValue,
   disabled,
@@ -768,19 +1415,19 @@ var DatePickerRoot = forwardRef3(({
   value,
   ...props
 }, ref) => {
+  const [calendarMode, setCalendarMode] = useState5("month");
   const isValueControlled = value !== undefined;
-  const isOpenControlled = open !== undefined;
-  const [innerValue, setInnerValue] = useState3(() => normalizeDateValue(defaultValue));
-  const [innerOpen, setInnerOpen] = useState3(Boolean(defaultOpen));
+  const [innerValue, setInnerValue] = useState5(() => normalizeDateValue(defaultValue));
+  const dropdown = usePickerDropdown({
+    open,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    ref
+  });
   const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
-  const visible = isOpenControlled ? Boolean(open) : innerOpen;
+  const { visible, setVisible } = dropdown;
   const inputType = inputTypeForPicker(picker);
-  function setVisible(nextOpen) {
-    if (!isOpenControlled) {
-      setInnerOpen(nextOpen);
-    }
-    onOpenChange?.(nextOpen);
-  }
   function emitChange(nextValue) {
     if (nextValue && disabledDate?.(nextValue)) {
       return;
@@ -790,10 +1437,17 @@ var DatePickerRoot = forwardRef3(({
     }
     onChange?.(nextValue, nextValue ?? "");
   }
-  const presetItems = useMemo3(() => presets ?? [], [presets]);
-  return /* @__PURE__ */ jsxs4("div", {
+  function selectValue(nextValue) {
+    if (disabledDate?.(nextValue))
+      return;
+    emitChange(nextValue);
+    dropdown.closeAndFocus();
+  }
+  const presetItems = useMemo4(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs5("div", {
     ...props,
-    ref,
+    ref: dropdown.rootRef,
+    onBlur: dropdown.onRootBlur,
     className: getDatePickerClasses({
       size,
       status,
@@ -803,7 +1457,11 @@ var DatePickerRoot = forwardRef3(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx5("input", {
+      /* @__PURE__ */ jsx6("input", {
+        ...inputProps,
+        ref: dropdown.inputRef,
+        "aria-haspopup": "dialog",
+        "aria-controls": visible ? dropdown.panelId : undefined,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -811,15 +1469,15 @@ var DatePickerRoot = forwardRef3(({
         placeholder: placeholder ?? placeholderForPicker(picker),
         onFocus: (event) => {
           onFocus?.(event);
-          setVisible(true);
+          dropdown.onInputFocus();
         },
         onBlur: (event) => {
           onBlur?.(event);
-          setVisible(false);
         },
+        onClick: () => setVisible(true),
         onChange: (event) => emitChange(event.currentTarget.value || undefined)
       }),
-      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx5("button", {
+      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx6("button", {
         type: "button",
         className: datePickerClearClass,
         "aria-label": "Clear date",
@@ -827,26 +1485,95 @@ var DatePickerRoot = forwardRef3(({
         onClick: () => emitChange(undefined),
         children: "x"
       }) : null,
-      /* @__PURE__ */ jsx5("span", {
+      /* @__PURE__ */ jsx6("button", {
+        type: "button",
         className: datePickerIconClass,
-        "aria-hidden": "true"
+        "aria-label": "Open date picker",
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-controls": visible ? dropdown.panelId : undefined,
+        disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => setVisible(!visible),
+        children: /* @__PURE__ */ jsxs5("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "18",
+          height: "18",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx6("rect", {
+              x: "3",
+              y: "5",
+              width: "18",
+              height: "16",
+              rx: "2"
+            }),
+            /* @__PURE__ */ jsx6("path", {
+              d: "M8 3v4M16 3v4M3 10h18"
+            })
+          ]
+        })
       }),
-      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs4("div", {
+      visible ? /* @__PURE__ */ jsxs5("div", {
+        id: dropdown.panelId,
+        role: "dialog",
+        "aria-label": "Choose date",
         className: getDatePickerDropdownClasses({ open: visible }),
         children: [
-          presetItems.map((preset, index) => /* @__PURE__ */ jsx5("button", {
+          picker === "date" || picker === "month" ? /* @__PURE__ */ jsx6(Calendar, {
+            fullscreen: false,
+            value: currentValue,
+            mode: picker === "month" ? "year" : calendarMode,
+            onPanelChange: (_, mode) => {
+              if (picker === "date")
+                setCalendarMode(mode);
+            },
+            disabledDate: (date) => {
+              if (!disabledDate)
+                return false;
+              if (picker === "month")
+                return disabledDate(date.slice(0, 7));
+              if (calendarMode === "year") {
+                const [year, month] = date.split("-").map(Number);
+                const days = new Date(year, month, 0).getDate();
+                return Array.from({ length: days }, (_, index) => `${date.slice(0, 7)}-${String(index + 1).padStart(2, "0")}`).every((day) => disabledDate(day));
+              }
+              return disabledDate(date);
+            },
+            onSelect: (date, info) => {
+              if (picker === "date" && info.source === "month") {
+                setCalendarMode("month");
+                return;
+              }
+              selectValue(picker === "month" ? date.slice(0, 7) : date);
+            }
+          }) : /* @__PURE__ */ jsx6("input", {
+            type: inputType,
+            "aria-label": placeholderForPicker(picker),
+            value: currentValue ?? "",
+            onChange: (event) => selectValue(event.currentTarget.value)
+          }),
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx6("button", {
             type: "button",
             className: datePickerPresetClass,
             onMouseDown: (event) => event.preventDefault(),
-            onClick: () => emitChange(preset.value),
+            disabled: Boolean(disabledDate?.(preset.value)),
+            onClick: () => selectValue(preset.value),
             children: preset.label
           }, index)),
-          showNow ? /* @__PURE__ */ jsx5("div", {
+          showNow ? /* @__PURE__ */ jsx6("div", {
             className: datePickerFooterClass,
-            children: /* @__PURE__ */ jsx5("button", {
+            children: /* @__PURE__ */ jsx6("button", {
               type: "button",
               onMouseDown: (event) => event.preventDefault(),
-              onClick: () => emitChange(todayValue(picker)),
+              disabled: Boolean(disabledDate?.(todayValue(picker))),
+              onClick: () => selectValue(todayValue(picker)),
               children: "Now"
             })
           }) : null
@@ -856,9 +1583,10 @@ var DatePickerRoot = forwardRef3(({
   });
 });
 DatePickerRoot.displayName = "DatePicker";
-var RangePicker = forwardRef3(({
+var RangePicker = forwardRef4(({
   allowClear,
   className,
+  inputProps,
   defaultValue,
   disabled,
   disabledDate,
@@ -872,7 +1600,7 @@ var RangePicker = forwardRef3(({
   ...props
 }, ref) => {
   const isControlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState3(defaultValue ?? [undefined, undefined]);
+  const [innerValue, setInnerValue] = useState5(defaultValue ?? [undefined, undefined]);
   const currentValue = isControlled ? value : innerValue;
   const inputType = inputTypeForPicker(picker);
   function emitChange(nextValue) {
@@ -887,7 +1615,7 @@ var RangePicker = forwardRef3(({
   function updateIndex(index, nextItem) {
     emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
   }
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs5("div", {
     ...props,
     ref,
     className: getDatePickerClasses({
@@ -899,7 +1627,8 @@ var RangePicker = forwardRef3(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx5("input", {
+      /* @__PURE__ */ jsx6("input", {
+        ...inputProps,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -907,11 +1636,13 @@ var RangePicker = forwardRef3(({
         placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
         onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
       }),
-      /* @__PURE__ */ jsx5("span", {
+      /* @__PURE__ */ jsx6("span", {
         className: datePickerSeparatorClass,
         children: separator
       }),
-      /* @__PURE__ */ jsx5("input", {
+      /* @__PURE__ */ jsx6("input", {
+        ...inputProps,
+        id: inputProps?.id ? `${inputProps.id}-end` : undefined,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -919,7 +1650,7 @@ var RangePicker = forwardRef3(({
         placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
         onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
       }),
-      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx5("button", {
+      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx6("button", {
         type: "button",
         className: datePickerClearClass,
         "aria-label": "Clear date range",
@@ -931,7 +1662,7 @@ var RangePicker = forwardRef3(({
 });
 RangePicker.displayName = "DatePicker.RangePicker";
 function withPicker(picker, displayName) {
-  const Picker = forwardRef3((props, ref) => /* @__PURE__ */ jsx5(DatePickerRoot, {
+  const Picker = forwardRef4((props, ref) => /* @__PURE__ */ jsx6(DatePickerRoot, {
     ...props,
     ref,
     picker
@@ -948,10 +1679,10 @@ var DatePicker = Object.assign(DatePickerRoot, {
 });
 // src/components/input/Input.tsx
 import {
-  forwardRef as forwardRef4,
-  useImperativeHandle,
-  useRef as useRef2,
-  useState as useState4
+  forwardRef as forwardRef5,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef3,
+  useState as useState6
 } from "react";
 
 // src/classes/input.ts
@@ -1040,14 +1771,14 @@ function getTextAreaCountClasses({ exceeded }) {
 }
 
 // src/components/input/Input.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function toTextValue(value) {
   if (Array.isArray(value)) {
     return value.join(",");
   }
   return value == null ? "" : String(value);
 }
-var InputRoot = forwardRef4(({
+var InputRoot = forwardRef5(({
   allowClear,
   className,
   defaultValue,
@@ -1062,12 +1793,12 @@ var InputRoot = forwardRef4(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const inputRef = useRef2(null);
-  const [internalValue, setInternalValue] = useState4(() => toTextValue(defaultValue));
+  const inputRef = useRef3(null);
+  const [internalValue, setInternalValue] = useState6(() => toTextValue(defaultValue));
   const isControlled = value !== undefined;
   const currentValue = isControlled ? toTextValue(value) : internalValue;
   const hasAffix = prefix != null || suffix != null || allowClear;
-  useImperativeHandle(ref, () => inputRef.current);
+  useImperativeHandle2(ref, () => inputRef.current);
   function handleChange(event) {
     if (!isControlled) {
       setInternalValue(event.currentTarget.value);
@@ -1090,7 +1821,7 @@ var InputRoot = forwardRef4(({
     });
     input.focus();
   }
-  const control = /* @__PURE__ */ jsx6("input", {
+  const control = /* @__PURE__ */ jsx7("input", {
     ...props,
     ref: inputRef,
     type,
@@ -1103,22 +1834,22 @@ var InputRoot = forwardRef4(({
     return control;
   }
   const showClear = allowClear && !disabled && currentValue.length > 0;
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: getInputWrapperClasses({ affixed: hasAffix }),
     children: [
-      prefix != null ? /* @__PURE__ */ jsx6("span", {
+      prefix != null ? /* @__PURE__ */ jsx7("span", {
         className: inputPrefixClass,
         children: prefix
       }) : null,
       control,
-      showClear ? /* @__PURE__ */ jsx6("button", {
+      showClear ? /* @__PURE__ */ jsx7("button", {
         type: "button",
         className: inputClearClass,
         "aria-label": "Clear input",
         onClick: handleClear,
         children: "x"
       }) : null,
-      suffix != null ? /* @__PURE__ */ jsx6("span", {
+      suffix != null ? /* @__PURE__ */ jsx7("span", {
         className: inputSuffixClass,
         children: suffix
       }) : null
@@ -1126,7 +1857,7 @@ var InputRoot = forwardRef4(({
   });
 });
 InputRoot.displayName = "Input";
-var Search = forwardRef4(({
+var Search = forwardRef5(({
   className,
   disabled,
   enterButton,
@@ -1135,8 +1866,8 @@ var Search = forwardRef4(({
   onSearch,
   ...props
 }, ref) => {
-  const inputRef = useRef2(null);
-  useImperativeHandle(ref, () => inputRef.current);
+  const inputRef = useRef3(null);
+  useImperativeHandle2(ref, () => inputRef.current);
   function emitSearch(event) {
     onSearch?.(inputRef.current?.value ?? "", event);
   }
@@ -1147,16 +1878,16 @@ var Search = forwardRef4(({
     }
   }
   const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: getSearchWrapperClasses({ className }),
     children: [
-      /* @__PURE__ */ jsx6(InputRoot, {
+      /* @__PURE__ */ jsx7(InputRoot, {
         ...props,
         ref: inputRef,
         disabled,
         onKeyDown: handleKeyDown
       }),
-      enterButton || loading ? /* @__PURE__ */ jsx6("button", {
+      enterButton || loading ? /* @__PURE__ */ jsx7("button", {
         type: "button",
         className: inputSearchButtonClass,
         disabled: disabled || loading,
@@ -1168,10 +1899,10 @@ var Search = forwardRef4(({
   });
 });
 Search.displayName = "Input.Search";
-var Password = forwardRef4(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
-  const [visible, setVisible] = useState4(false);
+var Password = forwardRef5(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
+  const [visible, setVisible] = useState6(false);
   const type = visible ? "text" : "password";
-  const toggle = visibilityToggle ? /* @__PURE__ */ jsx6("button", {
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx7("button", {
     type: "button",
     className: inputPasswordToggleClass,
     disabled,
@@ -1181,9 +1912,9 @@ var Password = forwardRef4(({ className, disabled, visibilityToggle = true, ...p
     },
     children: visible ? "Hide" : "Show"
   }) : undefined;
-  return /* @__PURE__ */ jsx6("span", {
+  return /* @__PURE__ */ jsx7("span", {
     className: getPasswordWrapperClasses({ className }),
-    children: /* @__PURE__ */ jsx6(InputRoot, {
+    children: /* @__PURE__ */ jsx7(InputRoot, {
       ...props,
       ref,
       disabled,
@@ -1193,7 +1924,7 @@ var Password = forwardRef4(({ className, disabled, visibilityToggle = true, ...p
   });
 });
 Password.displayName = "Input.Password";
-var TextArea = forwardRef4(({
+var TextArea = forwardRef5(({
   autoSize,
   className,
   defaultValue,
@@ -1207,7 +1938,7 @@ var TextArea = forwardRef4(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const [internalValue, setInternalValue] = useState4(() => toTextValue(defaultValue));
+  const [internalValue, setInternalValue] = useState6(() => toTextValue(defaultValue));
   const isControlled = value !== undefined;
   const currentValue = isControlled ? toTextValue(value) : internalValue;
   const count = currentValue.length;
@@ -1218,7 +1949,7 @@ var TextArea = forwardRef4(({
     }
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ jsx6("textarea", {
+  const control = /* @__PURE__ */ jsx7("textarea", {
     ...props,
     ref,
     className: getTextAreaClasses({
@@ -1236,11 +1967,11 @@ var TextArea = forwardRef4(({
   if (!showCount) {
     return control;
   }
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: textAreaWrapperClass,
     children: [
       control,
-      /* @__PURE__ */ jsxs5("span", {
+      /* @__PURE__ */ jsxs6("span", {
         className: getTextAreaCountClasses({ exceeded }),
         children: [
           count,
@@ -1251,7 +1982,7 @@ var TextArea = forwardRef4(({
   });
 });
 TextArea.displayName = "Input.TextArea";
-var Group = forwardRef4(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx6("div", {
+var Group = forwardRef5(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
   ...props,
   ref,
   className: cn(inputGroupClass, className),
@@ -1265,7 +1996,7 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React5, { forwardRef as forwardRef5, useMemo as useMemo4, useState as useState5 } from "react";
+import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -1321,7 +2052,7 @@ function getSelectOptionClasses({
 }
 
 // src/components/select/Select.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function isGroup(option) {
   return "options" in option;
 }
@@ -1346,8 +2077,8 @@ function normalizeMultiValue(value) {
 }
 function optionsFromChildren(children) {
   const result = [];
-  React5.Children.forEach(children, (child) => {
-    if (!React5.isValidElement(child)) {
+  React7.Children.forEach(children, (child) => {
+    if (!React7.isValidElement(child)) {
       return;
     }
     if (child.type === Option) {
@@ -1397,19 +2128,19 @@ function filterOptions(options, searchValue, filterOption) {
 function renderValue(option) {
   return option ? optionLabel(option) : null;
 }
-var Option = forwardRef5(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
+var Option = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
   ...props,
   ref,
   children
 }));
 Option.displayName = "Select.Option";
-var OptGroup = forwardRef5(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
+var OptGroup = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
   ...props,
   ref,
   children
 }));
 OptGroup.displayName = "Select.OptGroup";
-var SelectRoot = forwardRef5(({
+var SelectRoot = forwardRef6(({
   allowClear,
   children,
   className,
@@ -1428,11 +2159,11 @@ var SelectRoot = forwardRef5(({
   ...props
 }, ref) => {
   const multiple = mode === "multiple" || mode === "tags";
-  const sourceOptions = useMemo4(() => options ?? optionsFromChildren(children), [children, options]);
-  const flatOptions = useMemo4(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState5(false);
-  const [searchValue, setSearchValue] = useState5("");
-  const [internalValue, setInternalValue] = useState5(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  const sourceOptions = useMemo5(() => options ?? optionsFromChildren(children), [children, options]);
+  const flatOptions = useMemo5(() => flattenOptions(sourceOptions), [sourceOptions]);
+  const [open, setOpen] = useState7(false);
+  const [searchValue, setSearchValue] = useState7("");
+  const [internalValue, setInternalValue] = useState7(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
   const controlled = value !== undefined;
   const currentValue = controlled ? value : internalValue;
   const selectedValues = multiple ? normalizeMultiValue(currentValue) : normalizeSingleValue(currentValue) === undefined ? [] : [normalizeSingleValue(currentValue)];
@@ -1489,7 +2220,7 @@ var SelectRoot = forwardRef5(({
   }
   function renderOption(option) {
     const selected = selectedKeys.has(valueKey(option.value));
-    return /* @__PURE__ */ jsx7("button", {
+    return /* @__PURE__ */ jsx8("button", {
       type: "button",
       role: "option",
       "aria-selected": selected,
@@ -1508,11 +2239,11 @@ var SelectRoot = forwardRef5(({
       if (!isGroup(option)) {
         return renderOption(option);
       }
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: cn(selectGroupClass, option.className),
         role: "group",
         children: [
-          /* @__PURE__ */ jsx7("div", {
+          /* @__PURE__ */ jsx8("div", {
             className: selectGroupLabelClass,
             children: option.label
           }),
@@ -1521,11 +2252,11 @@ var SelectRoot = forwardRef5(({
       }, `group-${index}`);
     });
   }
-  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx7("span", {
+  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx8("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     ...props,
     ref,
     className: getSelectContainerClasses({
@@ -1536,7 +2267,7 @@ var SelectRoot = forwardRef5(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsxs6("button", {
+      /* @__PURE__ */ jsxs7("button", {
         type: "button",
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
@@ -1544,33 +2275,33 @@ var SelectRoot = forwardRef5(({
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
         children: [
-          /* @__PURE__ */ jsx7("span", {
+          /* @__PURE__ */ jsx8("span", {
             className: selectSelectionClass,
-            children: hasValue ? selection : /* @__PURE__ */ jsx7("span", {
+            children: hasValue ? selection : /* @__PURE__ */ jsx8("span", {
               className: selectPlaceholderClass,
               children: placeholder
             })
           }),
-          /* @__PURE__ */ jsx7("span", {
+          /* @__PURE__ */ jsx8("span", {
             className: selectIconClass,
             "aria-hidden": "true",
             children: "v"
           })
         ]
       }),
-      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx7("button", {
+      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx8("button", {
         type: "button",
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
         children: "x"
       }) : null,
-      open ? /* @__PURE__ */ jsxs6("div", {
+      open ? /* @__PURE__ */ jsxs7("div", {
         className: selectDropdownClass,
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
         children: [
-          searchable ? /* @__PURE__ */ jsx7("input", {
+          searchable ? /* @__PURE__ */ jsx8("input", {
             className: selectSearchClass,
             value: searchValue,
             placeholder: typeof placeholder === "string" ? placeholder : undefined,
@@ -1582,7 +2313,7 @@ var SelectRoot = forwardRef5(({
               }
             }
           }) : null,
-          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx7("div", {
+          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx8("div", {
             className: selectEmptyClass,
             children: "No data"
           })
@@ -1596,7 +2327,7 @@ var Select = SelectRoot;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 // src/components/dm-search/DmSearch.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function initialValues(items, searchParams, useSearchParams = true) {
   return items.reduce((acc, item) => {
     const defaultValue = item.search.extraProps?.value ?? item.search.formProps?.initialValue;
@@ -1620,7 +2351,7 @@ function renderField({
     return item.search.render?.(value, setValue, item) ?? null;
   }
   if (item.search.type === "select") {
-    return /* @__PURE__ */ jsx8(Select, {
+    return /* @__PURE__ */ jsx9(Select, {
       ...extraProps,
       disabled: Boolean(loading || extraProps.disabled),
       value,
@@ -1629,25 +2360,25 @@ function renderField({
     });
   }
   if (item.search.type === "dateRange") {
-    return /* @__PURE__ */ jsx8(DatePicker.RangePicker, {
+    return /* @__PURE__ */ jsx9(DatePicker.RangePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "date") {
-    return /* @__PURE__ */ jsx8(DatePicker, {
+    return /* @__PURE__ */ jsx9(DatePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "radio" || item.search.type === "checkbox") {
-    return /* @__PURE__ */ jsx8("div", {
+    return /* @__PURE__ */ jsx9("div", {
       role: item.search.type === "radio" ? "radiogroup" : "group",
-      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs7("label", {
+      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs8("label", {
         children: [
-          /* @__PURE__ */ jsx8("input", {
+          /* @__PURE__ */ jsx9("input", {
             type: item.search.type,
             disabled: loading,
             checked: item.search.type === "checkbox" ? Array.isArray(value) && value.includes(option.value) : value === option.value,
@@ -1665,7 +2396,7 @@ function renderField({
       }, String(option.value)))
     });
   }
-  return /* @__PURE__ */ jsx8(Input, {
+  return /* @__PURE__ */ jsx9(Input, {
     ...extraProps,
     type: item.search.type === "input-number" ? "number" : "text",
     disabled: Boolean(loading || extraProps.disabled),
@@ -1679,8 +2410,11 @@ function renderField({
     }
   });
 }
-var DmSearch = forwardRef6(({
+var DmSearch = forwardRef7(({
   items = [],
+  values: controlledValues,
+  onValuesChange,
+  onReset,
   onSearch,
   extra,
   fastFilterItem,
@@ -1689,27 +2423,37 @@ var DmSearch = forwardRef6(({
   compact = false,
   searchParams,
   loading = false,
+  noValidate,
   enableDefaultPlaceHolder = false,
   className
 }, ref) => {
-  const allItems = useMemo5(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
-  const [collapsed, setCollapsed] = useState6(defaultCollapsed);
-  const [values, setValues] = useState6(() => initialValues(allItems, searchParams));
+  const allItems = useMemo6(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
+  const [collapsed, setCollapsed] = useState8(defaultCollapsed);
+  const [internalValues, setValues] = useState8(() => initialValues(allItems, searchParams));
+  const controlled = controlledValues !== undefined;
+  const values = controlled ? controlledValues : internalValues;
   const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
-  useEffect2(() => {
-    setValues(initialValues(allItems, searchParams));
-  }, [allItems, searchParams]);
+  useEffect3(() => {
+    if (!controlled)
+      setValues(initialValues(allItems, searchParams));
+  }, [allItems, searchParams, controlled]);
   function reset(useSearchParams = false) {
     const nextValues = initialValues(allItems, searchParams, useSearchParams);
-    setValues(nextValues);
+    if (!controlled)
+      setValues(nextValues);
+    if (onReset)
+      onReset(nextValues);
+    else if (controlled)
+      onValuesChange?.(nextValues);
     return nextValues;
   }
-  useImperativeHandle2(ref, () => ({
+  useImperativeHandle3(ref, () => ({
     onReset: () => {
       reset(false);
     }
   }));
-  return /* @__PURE__ */ jsxs7("form", {
+  return /* @__PURE__ */ jsxs8("form", {
+    noValidate,
     id: "searchForm",
     className: getDmSearchClasses({ compact, collapsed, className }),
     onSubmit: (event) => {
@@ -1717,53 +2461,63 @@ var DmSearch = forwardRef6(({
       onSearch?.(values);
     },
     children: [
-      fastFilterItem ? /* @__PURE__ */ jsx8("div", {
+      fastFilterItem ? /* @__PURE__ */ jsx9("div", {
         className: dmSearchFastFilterClass,
         children: fastFilterItem.title
       }) : null,
-      /* @__PURE__ */ jsx8("div", {
+      /* @__PURE__ */ jsx9("div", {
         className: dmSearchFieldsClass,
-        children: visibleItems.map((item) => /* @__PURE__ */ jsxs7("label", {
-          className: dmSearchFieldClass,
-          children: [
-            compact ? null : /* @__PURE__ */ jsx8("span", {
-              children: item.title
-            }),
-            renderField({
-              item,
-              value: values[item.dataIndex],
-              loading,
-              enableDefaultPlaceHolder,
-              setValue: (value) => setValues((current) => ({
-                ...current,
-                [item.dataIndex]: value
-              }))
-            })
-          ]
-        }, item.key))
+        children: visibleItems.map((item) => {
+          const Field = item.search.type === "custom" ? "div" : "label";
+          return /* @__PURE__ */ jsxs8(Field, {
+            className: dmSearchFieldClass,
+            children: [
+              compact ? null : /* @__PURE__ */ jsx9("span", {
+                children: item.title
+              }),
+              renderField({
+                item,
+                value: values[item.dataIndex],
+                loading,
+                enableDefaultPlaceHolder,
+                setValue: (value) => {
+                  const nextValues = { ...values, [item.dataIndex]: value };
+                  if (!controlled)
+                    setValues(nextValues);
+                  onValuesChange?.(nextValues);
+                }
+              })
+            ]
+          }, item.key);
+        })
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: dmSearchActionsClass,
         children: [
-          /* @__PURE__ */ jsx8(Button, {
+          /* @__PURE__ */ jsx9(Button, {
             type: "submit",
             isLoading: loading,
             children: "Search"
           }),
-          /* @__PURE__ */ jsx8(Button, {
+          /* @__PURE__ */ jsx9(Button, {
             type: "button",
             color: "secondary",
             appearance: "outline",
-            onClick: () => onSearch?.(reset(false)),
+            onClick: () => {
+              const nextValues = reset(false);
+              if (!onReset)
+                onSearch?.(nextValues);
+            },
             children: "Reset"
           }),
-          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx8(Button, {
+          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx9(Button, {
             type: "button",
             color: "secondary",
             appearance: "text",
             onClick: () => {
               setCollapsed((current) => !current);
-              setValues(initialValues(allItems, searchParams));
+              if (!controlled)
+                setValues(initialValues(allItems, searchParams));
             },
             children: collapsed ? "Expand" : "Collapse"
           }) : null,
@@ -1775,10 +2529,10 @@ var DmSearch = forwardRef6(({
 });
 DmSearch.displayName = "DmSearch";
 // src/components/table/Table.tsx
-import React7, {
-  forwardRef as forwardRef7,
-  useMemo as useMemo6,
-  useState as useState7
+import React9, {
+  forwardRef as forwardRef8,
+  useMemo as useMemo7,
+  useState as useState9
 } from "react";
 
 // src/classes/table.ts
@@ -1828,7 +2582,7 @@ function getTableSorterClasses(active) {
 }
 
 // src/components/table/Table.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 import { createElement } from "react";
 var defaultPageSize = 10;
 var defaultSortDirections = ["ascend", "descend", null];
@@ -1944,24 +2698,24 @@ function selectedRowsForKeys(data, keys, rowKey) {
   const keySet = new Set(normalizeKeys(keys));
   return data.filter((record, index) => keySet.has(String(getRecordKey(record, index, rowKey))));
 }
-var Column = forwardRef7(() => null);
+var Column = forwardRef8(() => null);
 Column.displayName = "Table.Column";
-var ColumnGroup = forwardRef7(() => null);
+var ColumnGroup = forwardRef8(() => null);
 ColumnGroup.displayName = "Table.ColumnGroup";
-var SummaryRow = forwardRef7((props, ref) => /* @__PURE__ */ jsx9("tr", {
+var SummaryRow = forwardRef8((props, ref) => /* @__PURE__ */ jsx10("tr", {
   ...props,
   ref
 }));
 SummaryRow.displayName = "Table.Summary.Row";
-var SummaryCell = forwardRef7(({ index, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9("td", {
+var SummaryCell = forwardRef8(({ index, ...props }, ref) => {
+  return /* @__PURE__ */ jsx10("td", {
     ...props,
     ref
   });
 });
 SummaryCell.displayName = "Table.Summary.Cell";
-var Summary = Object.assign(forwardRef7(({ fixed, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9("tfoot", {
+var Summary = Object.assign(forwardRef8(({ fixed, ...props }, ref) => {
+  return /* @__PURE__ */ jsx10("tfoot", {
     ...props,
     ref
   });
@@ -1971,8 +2725,8 @@ var Summary = Object.assign(forwardRef7(({ fixed, ...props }, ref) => {
 });
 Summary.displayName = "Table.Summary";
 function columnsFromChildren(children) {
-  return React7.Children.toArray(children).flatMap((child) => {
-    if (!React7.isValidElement(child)) {
+  return React9.Children.toArray(children).flatMap((child) => {
+    if (!React9.isValidElement(child)) {
       return [];
     }
     if (child.type === Column) {
@@ -1998,12 +2752,12 @@ function renderSummary(summary, pageData, colSpan) {
     return null;
   }
   const node = summary(pageData);
-  if (React7.isValidElement(node) && node.type === Summary) {
+  if (React9.isValidElement(node) && node.type === Summary) {
     return node;
   }
-  return /* @__PURE__ */ jsx9("tfoot", {
-    children: /* @__PURE__ */ jsx9("tr", {
-      children: /* @__PURE__ */ jsx9("td", {
+  return /* @__PURE__ */ jsx10("tfoot", {
+    children: /* @__PURE__ */ jsx10("tr", {
+      children: /* @__PURE__ */ jsx10("td", {
         className: tableCellClass,
         colSpan,
         children: node
@@ -2047,18 +2801,18 @@ function TableRoot({
   className,
   ...props
 }, ref) {
-  const childColumns = useMemo6(() => columnsFromChildren(children), [children]);
-  const normalizedColumns = useMemo6(() => normalizeColumns(columns ?? childColumns), [childColumns, columns]);
-  const leaves = useMemo6(() => leafColumns(normalizedColumns), [normalizedColumns]);
-  const headerRows = useMemo6(() => buildHeaderRows(normalizedColumns, getDepth(normalizedColumns)), [normalizedColumns]);
-  const [sortStates, setSortStates] = useState7({});
-  const [filterStates, setFilterStates] = useState7({});
-  const [internalCurrent, setInternalCurrent] = useState7(1);
-  const [internalPageSize, setInternalPageSize] = useState7(defaultPageSize);
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState7(rowSelection?.defaultSelectedRowKeys ?? []);
-  const [internalExpandedKeys, setInternalExpandedKeys] = useState7(expandable?.defaultExpandedRowKeys ?? []);
+  const childColumns = useMemo7(() => columnsFromChildren(children), [children]);
+  const normalizedColumns = useMemo7(() => normalizeColumns(columns ?? childColumns), [childColumns, columns]);
+  const leaves = useMemo7(() => leafColumns(normalizedColumns), [normalizedColumns]);
+  const headerRows = useMemo7(() => buildHeaderRows(normalizedColumns, getDepth(normalizedColumns)), [normalizedColumns]);
+  const [sortStates, setSortStates] = useState9({});
+  const [filterStates, setFilterStates] = useState9({});
+  const [internalCurrent, setInternalCurrent] = useState9(1);
+  const [internalPageSize, setInternalPageSize] = useState9(defaultPageSize);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState9(rowSelection?.defaultSelectedRowKeys ?? []);
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState9(expandable?.defaultExpandedRowKeys ?? []);
   const spinning = typeof loading === "object" ? loading.spinning : Boolean(loading);
-  const activeFilters = useMemo6(() => {
+  const activeFilters = useMemo7(() => {
     return leaves.reduce((result, column) => {
       const value = filterValueFor(column, filterStates) ?? null;
       if (value !== null) {
@@ -2067,7 +2821,7 @@ function TableRoot({
       return result;
     }, {});
   }, [filterStates, leaves]);
-  const activeSorter = useMemo6(() => {
+  const activeSorter = useMemo7(() => {
     const column = leaves.find((item) => sortOrderFor(item, sortStates));
     if (!column) {
       return {};
@@ -2079,7 +2833,7 @@ function TableRoot({
       order: sortOrderFor(column, sortStates) ?? null
     };
   }, [leaves, sortStates]);
-  const filteredData = useMemo6(() => {
+  const filteredData = useMemo7(() => {
     return leaves.reduce((records, column) => {
       const values = filterValueFor(column, filterStates);
       if (!values?.length || !column.onFilter) {
@@ -2088,7 +2842,7 @@ function TableRoot({
       return records.filter((record) => values.some((value) => column.onFilter?.(value, record)));
     }, dataSource);
   }, [dataSource, filterStates, leaves]);
-  const sortedData = useMemo6(() => {
+  const sortedData = useMemo7(() => {
     const sorterColumn = leaves.find((column) => sortOrderFor(column, sortStates));
     const order = sorterColumn ? sortOrderFor(sorterColumn, sortStates) : null;
     const compare = sorterColumn ? sortCompare(sorterColumn.sorter) : undefined;
@@ -2231,18 +2985,18 @@ function TableRoot({
       return null;
     }
     if (rowSelection.type === "radio" || rowSelection.hideSelectAll) {
-      return /* @__PURE__ */ jsx9("th", {
+      return /* @__PURE__ */ jsx10("th", {
         className: cn(tableHeaderCellClass, tableSelectionCellClass),
         children: rowSelection.columnTitle
       });
     }
     const pageKeys = pageData.map((record, index) => getRecordKey(record, index, rowKey));
     const allSelected = pageKeys.length > 0 && pageKeys.every((key) => selectedKeySet.has(String(key)));
-    return /* @__PURE__ */ jsx9("th", {
+    return /* @__PURE__ */ jsx10("th", {
       className: cn(tableHeaderCellClass, tableSelectionCellClass),
-      children: /* @__PURE__ */ jsxs8("label", {
+      children: /* @__PURE__ */ jsxs9("label", {
         children: [
-          /* @__PURE__ */ jsx9("input", {
+          /* @__PURE__ */ jsx10("input", {
             type: "checkbox",
             "aria-label": "Select all rows",
             checked: allSelected,
@@ -2269,26 +3023,26 @@ function TableRoot({
         textAlign: column.align,
         ...headerProps.style
       }
-    }, /* @__PURE__ */ jsx9("span", {
+    }, /* @__PURE__ */ jsx10("span", {
       children: title
-    }), column.sorter ? /* @__PURE__ */ jsx9("button", {
+    }), column.sorter ? /* @__PURE__ */ jsx10("button", {
       type: "button",
       className: getTableSorterClasses(Boolean(sortOrder)),
       "aria-label": `Sort ${textFromNode(title, String(column.columnKey))}`,
       onClick: () => changeSorter(column),
       children: sortOrder === "ascend" ? "Asc" : sortOrder === "descend" ? "Desc" : "Sort"
-    }) : null, column.filters?.length ? /* @__PURE__ */ jsxs8("select", {
+    }) : null, column.filters?.length ? /* @__PURE__ */ jsxs9("select", {
       className: tableFilterClass,
       "aria-label": `Filter ${textFromNode(title, String(column.columnKey))}`,
       multiple: column.filterMultiple !== false,
       value: column.filterMultiple === false ? String((filterValueFor(column, filterStates) ?? [])[0] ?? "") : (filterValueFor(column, filterStates) ?? []).map(String),
       onChange: (event) => changeFilter(column, event),
       children: [
-        column.filterMultiple === false ? /* @__PURE__ */ jsx9("option", {
+        column.filterMultiple === false ? /* @__PURE__ */ jsx10("option", {
           value: "",
           children: "All"
         }) : null,
-        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx9("option", {
+        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx10("option", {
           value: String(filter.value),
           children: filter.text
         }, String(filter.value)))
@@ -2313,14 +3067,14 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const checked = selectedKeySet.has(String(key));
     const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {};
-    const originNode = /* @__PURE__ */ jsx9("input", {
+    const originNode = /* @__PURE__ */ jsx10("input", {
       ...checkboxProps,
       type: rowSelection.type === "radio" ? "radio" : "checkbox",
       "aria-label": `Select row ${index + 1}`,
       checked,
       onChange: (event) => toggleRowSelection(record, index, event)
     });
-    return /* @__PURE__ */ jsx9("td", {
+    return /* @__PURE__ */ jsx10("td", {
       className: cn(tableCellClass, tableSelectionCellClass),
       children: rowSelection.renderCell ? rowSelection.renderCell(checked, record, index, originNode) : originNode
     });
@@ -2332,9 +3086,9 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const expanded = expandedKeySet.has(String(key));
     const expandableRow = expandable.rowExpandable?.(record) ?? true;
-    return /* @__PURE__ */ jsx9("td", {
+    return /* @__PURE__ */ jsx10("td", {
       className: cn(tableCellClass, tableExpandCellClass),
-      children: expandableRow ? /* @__PURE__ */ jsx9("button", {
+      children: expandableRow ? /* @__PURE__ */ jsx10("button", {
         type: "button",
         className: tableExpandButtonClass,
         "aria-label": `${expanded ? "Collapse" : "Expand"} row ${index + 1}`,
@@ -2347,7 +3101,7 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const expanded = expandedKeySet.has(String(key));
     const selected = selectedKeySet.has(String(key));
-    const row = /* @__PURE__ */ jsxs8("tr", {
+    const row = /* @__PURE__ */ jsxs9("tr", {
       className: getTableRowClasses({ selected, expanded }),
       onClick: () => {
         if (expandable?.expandRowByClick) {
@@ -2363,12 +3117,12 @@ function TableRoot({
     if (!expanded || !expandable?.expandedRowRender) {
       return row;
     }
-    return /* @__PURE__ */ jsxs8(React7.Fragment, {
+    return /* @__PURE__ */ jsxs9(React9.Fragment, {
       children: [
         row,
-        /* @__PURE__ */ jsx9("tr", {
+        /* @__PURE__ */ jsx10("tr", {
           className: "table-expanded-row",
-          children: /* @__PURE__ */ jsx9("td", {
+          children: /* @__PURE__ */ jsx10("td", {
             className: tableCellClass,
             colSpan: structuralColumnCount,
             children: expandable.expandedRowRender(record, index, 0, expanded)
@@ -2377,15 +3131,15 @@ function TableRoot({
       ]
     }, String(key));
   }
-  const tableNode = /* @__PURE__ */ jsxs8("table", {
+  const tableNode = /* @__PURE__ */ jsxs9("table", {
     className: getTableClasses({ bordered, size }),
     style: { tableLayout },
     children: [
-      /* @__PURE__ */ jsx9("thead", {
-        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs8("tr", {
+      /* @__PURE__ */ jsx10("thead", {
+        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs9("tr", {
           children: [
             rowIndex === 0 ? renderSelectionHeader() : null,
-            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx9("th", {
+            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx10("th", {
               className: cn(tableHeaderCellClass, tableExpandCellClass),
               children: expandable?.columnTitle
             }) : null,
@@ -2393,9 +3147,9 @@ function TableRoot({
           ]
         }, rowIndex))
       }),
-      /* @__PURE__ */ jsx9("tbody", {
-        children: bodyEmpty ? /* @__PURE__ */ jsx9("tr", {
-          children: /* @__PURE__ */ jsx9("td", {
+      /* @__PURE__ */ jsx10("tbody", {
+        children: bodyEmpty ? /* @__PURE__ */ jsx10("tr", {
+          children: /* @__PURE__ */ jsx10("td", {
             className: tableEmptyClass,
             colSpan: structuralColumnCount,
             children: locale?.emptyText ?? "No data"
@@ -2405,12 +3159,12 @@ function TableRoot({
       renderSummary(summary, pageData, structuralColumnCount)
     ]
   });
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     ...props,
     ref,
     className: getTableWrapperClasses({ loading: spinning, className }),
     children: [
-      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx9("div", {
+      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx10("div", {
         style: {
           overflow: "auto",
           maxHeight: scroll.y,
@@ -2418,30 +3172,30 @@ function TableRoot({
         },
         children: tableNode
       }) : tableNode,
-      spinning ? /* @__PURE__ */ jsx9("div", {
+      spinning ? /* @__PURE__ */ jsx10("div", {
         className: tableLoadingIndicatorClass,
         role: "status",
         children: typeof loading === "object" && loading.indicator ? loading.indicator : "Loading"
       }) : null,
-      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs8("nav", {
+      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs9("nav", {
         className: tablePaginationClass,
         "aria-label": "Table pagination",
         children: [
-          /* @__PURE__ */ jsx9("button", {
+          /* @__PURE__ */ jsx10("button", {
             type: "button",
             className: tablePaginationButtonClass,
             disabled: paginationConfig.disabled || current <= 1,
             onClick: () => changePage(current - 1),
             children: "Previous"
           }),
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx10("span", {
             className: tablePaginationInfoClass,
             children: paginationConfig.showTotal ? paginationConfig.showTotal(paginationConfig.total ?? sortedData.length, [
               bodyEmpty ? 0 : (current - 1) * pageSize + 1,
               Math.min(current * pageSize, sortedData.length)
             ]) : `${current} / ${pageCount}`
           }),
-          /* @__PURE__ */ jsx9("button", {
+          /* @__PURE__ */ jsx10("button", {
             type: "button",
             className: tablePaginationButtonClass,
             disabled: paginationConfig.disabled || current >= pageCount,
@@ -2453,7 +3207,7 @@ function TableRoot({
     ]
   });
 }
-var TableWithRef = forwardRef7(TableRoot);
+var TableWithRef = forwardRef8(TableRoot);
 var Table = Object.assign(TableWithRef, {
   Column,
   ColumnGroup,
@@ -2466,7 +3220,7 @@ var Table = Object.assign(TableWithRef, {
 });
 Table.displayName = "Table";
 // src/components/dm-table/DmTable.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function mapAndFilter(list, mapper) {
   return list.map(mapper).filter((item) => item !== false && item != null);
 }
@@ -2517,9 +3271,9 @@ function DmTable({
   rowSelection,
   ...props
 }) {
-  const tableColumns = useMemo7(() => mapAndFilter(inputColumns, filterDmTableColumn), [inputColumns]);
-  const [columns, setColumns] = useState8(tableColumns);
-  const [columnSettingsOpen, setColumnSettingsOpen] = useState8(false);
+  const tableColumns = useMemo8(() => mapAndFilter(inputColumns, filterDmTableColumn), [inputColumns]);
+  const [columns, setColumns] = useState10(tableColumns);
+  const [columnSettingsOpen, setColumnSettingsOpen] = useState10(false);
   const items = searchProps?.items?.length ? searchProps.items : searchItems(inputColumns);
   const paginationObj = typeof pagination === "object" ? pagination : undefined;
   const paginationProps = paginationObj ? Object.fromEntries(Object.entries(paginationObj).filter(([key]) => key !== "ref")) : {};
@@ -2532,37 +3286,37 @@ function DmTable({
       globalThis.localStorage?.removeItem(columnState.persistenceKey);
     }
   }
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     className: getDmTableClasses({ className }),
     children: [
-      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx10(Card, {
+      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx11(Card, {
         className: dmTableSearchClass,
         padding: "md",
-        children: /* @__PURE__ */ jsx10(DmSearch, {
+        children: /* @__PURE__ */ jsx11(DmSearch, {
           ...searchProps,
           items
         })
       }) : null,
-      indicators ? /* @__PURE__ */ jsx10("div", {
+      indicators ? /* @__PURE__ */ jsx11("div", {
         className: dmTableIndicatorsClass,
         children: indicators
       }) : null,
-      /* @__PURE__ */ jsxs9(Card, {
+      /* @__PURE__ */ jsxs10(Card, {
         className: dmTableCardClass,
         padding: "md",
         children: [
-          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs9("div", {
+          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs10("div", {
             className: dmTableHeaderClass,
             children: [
-              /* @__PURE__ */ jsx10("div", {
+              /* @__PURE__ */ jsx11("div", {
                 className: dmTableTitleClass,
                 children: name
               }),
-              /* @__PURE__ */ jsxs9("div", {
+              /* @__PURE__ */ jsxs10("div", {
                 className: dmTableExtraClass,
                 children: [
                   extra,
-                  columnSettingVisible ? /* @__PURE__ */ jsx10(Button, {
+                  columnSettingVisible ? /* @__PURE__ */ jsx11(Button, {
                     type: "button",
                     color: "secondary",
                     appearance: "outline",
@@ -2574,20 +3328,20 @@ function DmTable({
               })
             ]
           }) : null,
-          columnSettingsOpen ? /* @__PURE__ */ jsx10("div", {
+          columnSettingsOpen ? /* @__PURE__ */ jsx11("div", {
             role: "dialog",
             "aria-label": "Column settings",
-            children: /* @__PURE__ */ jsx10(Button, {
+            children: /* @__PURE__ */ jsx11(Button, {
               type: "button",
               onClick: resetColumns,
               children: "Reset columns"
             })
           }) : null,
-          tableExtra ? /* @__PURE__ */ jsx10("div", {
+          tableExtra ? /* @__PURE__ */ jsx11("div", {
             className: dmTableTableExtraClass,
             children: tableExtra
           }) : null,
-          /* @__PURE__ */ jsx10(Table, {
+          /* @__PURE__ */ jsx11(Table, {
             ...props,
             dataSource,
             rowSelection,
@@ -2603,7 +3357,7 @@ function DmTable({
               onChange: paginationObj?.onChange
             } : false
           }),
-          pagination ? /* @__PURE__ */ jsx10(DmPagination, {
+          pagination ? /* @__PURE__ */ jsx11(DmPagination, {
             ...paginationProps,
             className: dmTablePaginationClass,
             total,
@@ -2617,7 +3371,7 @@ function DmTable({
 }
 DmTable.displayName = "DmTable";
 // src/components/dm-toolbar/DmToolbar.tsx
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // src/classes/dm-toolbar.ts
 var dmToolbarBaseClass = "dm-toolbar";
@@ -2638,36 +3392,34 @@ function getDmToolbarItemClasses({
 // src/components/dropdown/Dropdown.tsx
 import {
   cloneElement,
-  forwardRef as forwardRef8,
+  forwardRef as forwardRef9,
   isValidElement,
-  useId,
-  useState as useState9
+  useEffect as useEffect4,
+  useId as useId2,
+  useRef as useRef4,
+  useState as useState11
 } from "react";
 
 // src/classes/dropdown.ts
-var dropdownWrapperClass = "dropdown-wrapper";
-var dropdownBaseClass = "popover dropdown";
-var dropdownOpenClass = "popover-show dropdown-open";
-var dropdownArrowClass = "popover-arrow dropdown-arrow";
+var dropdownWrapperClass = "dropdown";
+var dropdownBaseClass = "dropdown-content";
+var dropdownArrowClass = "dropdown-arrow";
 var dropdownMenuClass = "menu dropdown-menu";
 var dropdownButtonClass = "dropdown-button";
 var dropdownPlacementClasses = {
-  top: "popover-top dropdown-top",
-  bottom: "popover-bottom dropdown-bottom",
-  left: "popover-left dropdown-left",
-  right: "popover-right dropdown-right",
-  topLeft: "popover-top dropdown-top-left",
-  topRight: "popover-top dropdown-top-right",
-  bottomLeft: "popover-bottom dropdown-bottom-left",
-  bottomRight: "popover-bottom dropdown-bottom-right"
+  top: "dropdown-block-start",
+  bottom: "dropdown-block-end",
+  left: "dropdown-inline-start",
+  right: "dropdown-inline-end",
+  topLeft: "dropdown-block-start",
+  topRight: "dropdown-block-start",
+  bottomLeft: "dropdown-block-end",
+  bottomRight: "dropdown-block-end"
 };
 function getDropdownClasses({
-  placement = "bottomLeft",
-  open,
-  arrow,
   className
 }) {
-  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+  return cn(dropdownBaseClass, className);
 }
 
 // src/classes/menu.ts
@@ -2719,21 +3471,18 @@ function getMenuItemClasses({
 }
 
 // src/components/dropdown/Dropdown.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-function hasTrigger(triggers, trigger) {
-  return (triggers ?? ["hover"]).includes(trigger);
-}
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function callHandler(handler, event) {
   handler?.(event);
 }
 function renderMenuItem(item, onClick, close) {
   if (item.type === "divider") {
-    return /* @__PURE__ */ jsx11("li", {
+    return /* @__PURE__ */ jsx12("li", {
       className: menuDividerClass
     }, String(item.key));
   }
-  return /* @__PURE__ */ jsx11("li", {
-    children: /* @__PURE__ */ jsxs10("button", {
+  return /* @__PURE__ */ jsx12("li", {
+    children: /* @__PURE__ */ jsxs11("button", {
       type: "button",
       className: cn(menuItemClass, item.danger && "menu-item-danger", item.className),
       disabled: item.disabled,
@@ -2742,18 +3491,18 @@ function renderMenuItem(item, onClick, close) {
         close();
       },
       children: [
-        item.icon ? /* @__PURE__ */ jsx11("span", {
+        item.icon ? /* @__PURE__ */ jsx12("span", {
           className: "menu-item-icon",
           children: item.icon
         }) : null,
-        /* @__PURE__ */ jsx11("span", {
+        /* @__PURE__ */ jsx12("span", {
           children: item.label
         })
       ]
     })
   }, String(item.key));
 }
-var DropdownRoot = forwardRef8(({
+var DropdownRoot = forwardRef9(({
   arrow,
   children,
   className,
@@ -2773,148 +3522,214 @@ var DropdownRoot = forwardRef8(({
   trigger = ["hover"],
   ...props
 }, ref) => {
-  const [internalOpen, setInternalOpen] = useState9(Boolean(defaultOpen));
-  const isControlled = open !== undefined;
-  const visible = isControlled ? open : internalOpen;
-  const overlayId = useId();
-  function setVisible(nextOpen) {
-    if (disabled)
+  const [internalOpen, setInternalOpen] = useState11(Boolean(defaultOpen));
+  const [nativeOpen, setNativeOpen] = useState11(Boolean(open ?? defaultOpen));
+  const visible = open ?? internalOpen;
+  const popupRef = useRef4(null);
+  const popupId = useId2();
+  const anchorName = `--dm-dropdown-${popupId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const clickTrigger = trigger.includes("click") || trigger.includes("hover");
+  useEffect4(() => {
+    const popup = popupRef.current;
+    if (!popup?.showPopover || !popup?.hidePopover)
       return;
-    if (!isControlled) {
+    if (visible && !popup.matches(":popover-open"))
+      popup.showPopover();
+    if (!visible && popup.matches(":popover-open"))
+      popup.hidePopover();
+  }, [visible]);
+  function setVisible(nextOpen) {
+    if (open === undefined)
       setInternalOpen(nextOpen);
-    }
     onOpenChange?.(nextOpen);
   }
-  const close = () => setVisible(false);
-  const toggleVisible = () => setVisible(!visible);
-  const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx11("ul", {
+  function close() {
+    const popup = popupRef.current;
+    if (popup?.matches(":popover-open"))
+      popup.hidePopover();
+    else
+      setVisible(false);
+  }
+  const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx12("ul", {
     className: dropdownMenuClass,
     children: menu.items.map((item) => renderMenuItem(item, menu.onClick, close))
   }) : null);
   const popup = dropdownRender ? dropdownRender(menuNode) : menuNode;
-  const shouldRenderPopup = !destroyPopupOnHide || visible;
-  const triggerProps = {
-    "aria-controls": visible ? overlayId : undefined,
-    "aria-expanded": visible || undefined,
-    onMouseEnter: hasTrigger(trigger, "hover") ? () => setVisible(true) : undefined,
-    onMouseLeave: hasTrigger(trigger, "hover") ? () => setVisible(false) : undefined,
-    onClick: hasTrigger(trigger, "click") ? toggleVisible : undefined,
-    onContextMenu: hasTrigger(trigger, "contextMenu") ? (event) => {
-      event.preventDefault();
-      toggleVisible();
-    } : undefined
+  const show = () => !disabled && popupRef.current?.showPopover?.();
+  const hide = () => !disabled && popupRef.current?.hidePopover?.();
+  const toggle = () => {
+    if (disabled)
+      return;
+    if (popupRef.current?.matches(":popover-open"))
+      hide();
+    else
+      show();
   };
+  const childIsButton = isValidElement(children) && (children.type === "button" || children.type === Button);
   const triggerNode = isValidElement(children) ? cloneElement(children, {
-    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
+    popoverTarget: childIsButton && clickTrigger && !disabled ? popupId : undefined,
+    style: {
+      ...children.props.style,
+      anchorName
+    },
+    "aria-controls": popupId,
+    "aria-expanded": nativeOpen,
+    disabled: disabled || children.props.disabled,
     onMouseEnter: (event) => {
       callHandler(children.props.onMouseEnter, event);
-      triggerProps.onMouseEnter?.();
+      if (trigger.includes("hover"))
+        show();
       onMouseEnter?.(event);
     },
     onMouseLeave: (event) => {
       callHandler(children.props.onMouseLeave, event);
-      triggerProps.onMouseLeave?.();
       onMouseLeave?.(event);
     },
     onClick: (event) => {
       callHandler(children.props.onClick, event);
-      triggerProps.onClick?.();
       onClick?.(event);
+      if (!childIsButton && clickTrigger && !event.defaultPrevented)
+        toggle();
     },
     onContextMenu: (event) => {
       callHandler(children.props.onContextMenu, event);
-      triggerProps.onContextMenu?.(event);
+      if (trigger.includes("contextMenu")) {
+        event.preventDefault();
+        toggle();
+      }
       onContextMenu?.(event);
     }
-  }) : /* @__PURE__ */ jsx11("span", {
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    "aria-disabled": disabled || undefined,
-    "aria-controls": triggerProps["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"],
+  }) : /* @__PURE__ */ jsx12("button", {
+    type: "button",
+    disabled,
+    popoverTarget: clickTrigger && !disabled ? popupId : undefined,
+    style: { anchorName },
+    "aria-controls": popupId,
+    "aria-expanded": nativeOpen,
     onMouseEnter: (event) => {
-      triggerProps.onMouseEnter?.();
+      if (trigger.includes("hover"))
+        show();
       onMouseEnter?.(event);
     },
     onMouseLeave: (event) => {
-      triggerProps.onMouseLeave?.();
       onMouseLeave?.(event);
     },
-    onClick: (event) => {
-      triggerProps.onClick?.();
-      onClick?.(event);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "Enter" || event.key === " ") {
+    onClick,
+    onContextMenu: (event) => {
+      if (trigger.includes("contextMenu")) {
         event.preventDefault();
-        triggerProps.onClick?.();
+        toggle();
       }
-    },
-    onContextMenu: (event) => {
-      triggerProps.onContextMenu?.(event);
       onContextMenu?.(event);
     },
     children
   });
-  return /* @__PURE__ */ jsxs10("span", {
+  return /* @__PURE__ */ jsxs11("span", {
     ...props,
     ref,
-    className: dropdownWrapperClass,
+    className: cn(dropdownWrapperClass, dropdownPlacementClasses[placement]),
+    onMouseLeave: trigger.includes("hover") ? hide : undefined,
     children: [
       triggerNode,
-      shouldRenderPopup ? /* @__PURE__ */ jsxs10("span", {
-        id: overlayId,
-        role: "menu",
-        className: getDropdownClasses({
-          placement,
-          open: visible,
-          arrow,
-          className
-        }),
+      /* @__PURE__ */ jsxs11("span", {
+        id: popupId,
+        ref: popupRef,
+        popover: "auto",
+        style: { positionAnchor: anchorName },
+        className: getDropdownClasses({ className, arrow }),
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.nativeEvent.newState === "open";
+          setNativeOpen(nextOpen);
+          setVisible(nextOpen);
+        },
         children: [
-          popup,
-          arrow ? /* @__PURE__ */ jsx11("span", {
+          !destroyPopupOnHide || visible ? popup : null,
+          arrow ? /* @__PURE__ */ jsx12("span", {
             className: dropdownArrowClass
           }) : null
         ]
-      }) : null
+      })
     ]
   });
 });
 DropdownRoot.displayName = "Dropdown";
-var DropdownButton = forwardRef8(({
+var DropdownButton = forwardRef9(({
   buttonsRender,
   children,
   disabled,
   menu,
   onClick,
   trigger = ["click"],
+  color = "base",
+  appearance = "outline",
+  size,
+  shape,
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  confirm,
   ...props
 }, ref) => {
+  const buttonStyle = { color, appearance, size, shape };
   const buttons = [
-    /* @__PURE__ */ jsx11(Button, {
+    /* @__PURE__ */ jsx12(Button, {
+      ...buttonStyle,
       disabled,
+      isLoading,
+      leftIcon,
+      rightIcon,
+      confirm,
       onClick,
       children
     }, "primary"),
-    /* @__PURE__ */ jsx11(Button, {
+    /* @__PURE__ */ jsx12(Button, {
+      ...buttonStyle,
+      type: "button",
       "aria-label": "Open dropdown",
-      disabled,
-      children: "v"
+      disabled: disabled || isLoading,
+      children: /* @__PURE__ */ jsxs11("svg", {
+        "aria-hidden": "true",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        children: [
+          /* @__PURE__ */ jsx12("circle", {
+            cx: "5",
+            cy: "12",
+            r: "1.75"
+          }),
+          /* @__PURE__ */ jsx12("circle", {
+            cx: "12",
+            cy: "12",
+            r: "1.75"
+          }),
+          /* @__PURE__ */ jsx12("circle", {
+            cx: "19",
+            cy: "12",
+            r: "1.75"
+          })
+        ]
+      })
     }, "trigger")
   ];
   const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
-  return /* @__PURE__ */ jsx11(DropdownRoot, {
-    ...props,
+  return /* @__PURE__ */ jsxs11("span", {
     ref,
-    menu,
-    trigger,
-    disabled,
-    children: /* @__PURE__ */ jsx11("span", {
-      className: dropdownButtonClass,
-      children: renderedButtons
-    })
+    className: cn(dropdownButtonClass, block && "dropdown-button-block"),
+    children: [
+      renderedButtons[0],
+      /* @__PURE__ */ jsx12(DropdownRoot, {
+        ...props,
+        menu,
+        trigger,
+        disabled: disabled || isLoading,
+        children: renderedButtons[1]
+      })
+    ]
   });
 });
 DropdownButton.displayName = "Dropdown.Button";
@@ -2922,7 +3737,7 @@ var Dropdown = Object.assign(DropdownRoot, {
   Button: DropdownButton
 });
 // src/components/dm-toolbar/DmToolbar.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function isPrimary(item) {
   return item.type === "primary";
 }
@@ -2938,7 +3753,7 @@ function renderToolbarItem(item, index) {
   } = item;
   const buttonProps = { ...buttonPropsWithKey };
   delete buttonProps.key;
-  const button = /* @__PURE__ */ jsx12(Button, {
+  const button = /* @__PURE__ */ jsx13(Button, {
     ...buttonProps,
     type: htmlType,
     color: color ?? (type === "primary" ? "primary" : "secondary"),
@@ -2947,7 +3762,7 @@ function renderToolbarItem(item, index) {
   });
   if (!menu?.items?.length)
     return button;
-  return /* @__PURE__ */ jsx12(Dropdown, {
+  return /* @__PURE__ */ jsx13(Dropdown, {
     trigger: ["click"],
     menu,
     children: button
@@ -2973,7 +3788,7 @@ function DmToolbar({
   moreText = "More",
   maxVisibleSecondaryItems
 }) {
-  const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo8(() => {
+  const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo9(() => {
     const primaryItems = items.filter(isPrimary);
     const secondaryItems = items.filter((item) => !isPrimary(item));
     const visibleLimit = maxVisibleSecondaryItems === undefined ? secondaryItems.length : Math.max(0, maxVisibleSecondaryItems);
@@ -2982,18 +3797,18 @@ function DmToolbar({
     return { visibleSecondaryItems, overflowSecondaryItems, primaryItems };
   }, [items, maxVisibleSecondaryItems]);
   const showMore = overflowSecondaryItems.length > 0;
-  return /* @__PURE__ */ jsxs11("div", {
+  return /* @__PURE__ */ jsxs12("div", {
     className: getDmToolbarClasses({ className }),
     style,
     children: [
-      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx12("span", {
+      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx13("span", {
         className: getDmToolbarItemClasses({}),
         children: renderToolbarItem(item, index)
       }, item.key ?? `secondary-${index}`)),
-      showMore ? /* @__PURE__ */ jsx12(Dropdown, {
+      showMore ? /* @__PURE__ */ jsx13(Dropdown, {
         trigger: ["click"],
         menu: toOverflowMenu(overflowSecondaryItems),
-        children: /* @__PURE__ */ jsx12(Button, {
+        children: /* @__PURE__ */ jsx13(Button, {
           type: "button",
           className: dmToolbarMoreClass,
           color: "secondary",
@@ -3001,7 +3816,7 @@ function DmToolbar({
           children: moreText
         })
       }) : null,
-      primaryItems.map((item, index) => /* @__PURE__ */ jsx12("span", {
+      primaryItems.map((item, index) => /* @__PURE__ */ jsx13("span", {
         className: getDmToolbarItemClasses({ primary: true }),
         children: renderToolbarItem(item, index)
       }, item.key ?? `primary-${index}`))
@@ -3010,7 +3825,7 @@ function DmToolbar({
 }
 DmToolbar.displayName = "DmToolbar";
 // src/components/dm-pro-table/DmProTable.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function renderToolbar(toolBarRender) {
   if (typeof toolBarRender === "function")
     return toolBarRender();
@@ -3026,23 +3841,23 @@ function DmProTable({
   rowData,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs12("div", {
+  return /* @__PURE__ */ jsxs13("div", {
     className: getDmProTableClasses({ className }),
     children: [
-      showTitleBar ? /* @__PURE__ */ jsxs12("div", {
+      showTitleBar ? /* @__PURE__ */ jsxs13("div", {
         className: dmProTableHeaderClass,
         children: [
-          /* @__PURE__ */ jsx13("div", {
+          /* @__PURE__ */ jsx14("div", {
             className: dmProTableTitleClass,
             children: headerTitle
           }),
-          /* @__PURE__ */ jsxs12("div", {
+          /* @__PURE__ */ jsxs13("div", {
             className: dmProTableToolbarClass,
             children: [
-              toolbarItems?.length ? /* @__PURE__ */ jsx13(DmToolbar, {
+              toolbarItems?.length ? /* @__PURE__ */ jsx14(DmToolbar, {
                 items: toolbarItems
               }) : renderToolbar(toolBarRender),
-              columnSettingVisible ? /* @__PURE__ */ jsx13(Button, {
+              columnSettingVisible ? /* @__PURE__ */ jsx14(Button, {
                 type: "button",
                 color: "secondary",
                 appearance: "outline",
@@ -3053,7 +3868,7 @@ function DmProTable({
           })
         ]
       }) : null,
-      /* @__PURE__ */ jsx13(DmTable, {
+      /* @__PURE__ */ jsx14(DmTable, {
         ...props,
         columnSettingVisible: showTitleBar ? false : columnSettingVisible,
         dataSource: rowData