@duskmoon-dev/components 0.3.1 → 0.4.0

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

@@ -25,6 +25,20 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/dm-pro-table.ts
+var dmProTableBaseClass = "dm-pro-table";
+var dmProTableHeaderClass = "dm-pro-table-header";
+var dmProTableTitleClass = "dm-pro-table-title";
+var dmProTableToolbarClass = "dm-pro-table-toolbar";
+var dmProTableColumnSettingClass = "dm-pro-table-column-setting";
+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 = {
@@ -48,7 +62,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -68,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",
@@ -86,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,
@@ -97,32 +261,125 @@ 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 useMemo8, useState as useState10 } from "react";
+
+// src/classes/dm-table.ts
+var dmTableBaseClass = "dm-table";
+var dmTableSearchClass = "dm-table-search";
+var dmTableCardClass = "dm-table-card";
+var dmTableHeaderClass = "dm-table-header";
+var dmTableTitleClass = "dm-table-title";
+var dmTableExtraClass = "dm-table-extra";
+var dmTableIndicatorsClass = "dm-table-indicators";
+var dmTableTableExtraClass = "dm-table-table-extra";
+var dmTableColumnSettingClass = "dm-table-column-setting";
+var dmTablePaginationClass = "dm-table-pagination";
+function getDmTableClasses({ className }) {
+  return cn(dmTableBaseClass, className);
+}
+
 // src/classes/card.ts
 var cardBaseClass = "card";
 var cardAppearanceClasses = {
@@ -166,1154 +423,1288 @@ function Card({
     children
   });
 }
-// src/components/date-picker/DatePicker.tsx
-import { forwardRef, useMemo, useState } from "react";
+// src/components/dm-pagination/DmPagination.tsx
+import {
+  forwardRef as forwardRef2,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState as useState2
+} from "react";
 
-// src/classes/date-picker.ts
-var datePickerBaseClass = "datepicker";
-var datePickerInputClass = "datepicker-input";
-var datePickerIconClass = "datepicker-icon";
-var datePickerDropdownClass = "datepicker-dropdown";
-var datePickerDropdownOpenClass = "datepicker-dropdown-open";
-var datePickerFooterClass = "datepicker-footer";
-var datePickerPresetClass = "datepicker-preset";
-var datePickerRangeClass = "datepicker-range";
-var datePickerSeparatorClass = "datepicker-range-separator";
-var datePickerClearClass = "datepicker-clear";
-var datePickerSizeClasses = {
-  sm: "datepicker-sm",
-  md: "",
-  lg: "datepicker-lg"
-};
-var datePickerStatusClasses = {
-  error: "datepicker-error",
-  success: "datepicker-success"
+// src/classes/dm-pagination.ts
+var dmPaginationBaseClass = "dm-pagination";
+var dmPaginationHiddenClass = "dm-pagination-hidden";
+var dmPaginationPagerClass = "dm-pagination-pager";
+var dmPaginationRefreshClass = "dm-pagination-refresh";
+var dmPaginationRefreshLoadingClass = "dm-pagination-refresh-loading";
+var dmPaginationSelectedClass = "dm-pagination-selected";
+var dmPaginationAlignClasses = {
+  left: "dm-pagination-left",
+  center: "dm-pagination-center",
+  right: "dm-pagination-right"
 };
-var datePickerPickerClasses = {
-  date: "",
-  week: "datepicker-week",
-  month: "datepicker-month-picker",
-  quarter: "datepicker-quarter-picker",
-  year: "datepicker-year-picker",
-  time: "datepicker-time-picker"
+function getDmPaginationClasses({
+  align = "right",
+  hidden,
+  className
+}) {
+  return cn(dmPaginationBaseClass, dmPaginationAlignClasses[align], hidden && dmPaginationHiddenClass, className);
+}
+function getDmPaginationRefreshClasses({
+  loading,
+  className
+}) {
+  return cn(dmPaginationRefreshClass, loading && dmPaginationRefreshLoadingClass, className);
+}
+
+// src/components/pagination/Pagination.tsx
+import {
+  forwardRef,
+  useMemo,
+  useState
+} from "react";
+
+// src/classes/pagination.ts
+var paginationBaseClass = "pagination";
+var paginationItemClass = "pagination-item";
+var paginationItemActiveClass = "pagination-item-active";
+var paginationItemDisabledClass = "pagination-item-disabled";
+var paginationPrevClass = "pagination-prev";
+var paginationNextClass = "pagination-next";
+var paginationEllipsisClass = "pagination-ellipsis";
+var paginationCompactClass = "pagination-compact";
+var paginationInfoClass = "pagination-info";
+var paginationInfoTextClass = "pagination-info-text";
+var paginationInputClass = "pagination-input";
+var paginationResponsiveClass = "pagination-responsive";
+var paginationSizeClasses = {
+  sm: "pagination-sm",
+  md: "",
+  lg: "pagination-lg"
 };
-function getDatePickerClasses({
+function getPaginationClasses({
   size = "md",
-  status,
-  picker = "date",
-  open,
-  disabled,
-  range,
+  compact,
   className
 }) {
-  return cn(datePickerBaseClass, datePickerSizeClasses[size], status && datePickerStatusClasses[status], datePickerPickerClasses[picker], open && "datepicker-open", disabled && "datepicker-disabled", range && datePickerRangeClass, className);
+  return cn(paginationBaseClass, paginationResponsiveClass, paginationSizeClasses[size], compact && paginationCompactClass, className);
 }
-function getDatePickerDropdownClasses({
-  open,
-  className
+function getPaginationItemClasses({
+  active,
+  disabled
 }) {
-  return cn(datePickerDropdownClass, open && datePickerDropdownOpenClass, className);
+  return cn(paginationItemClass, active && paginationItemActiveClass, disabled && paginationItemDisabledClass);
 }
 
-// src/components/date-picker/DatePicker.tsx
+// src/components/pagination/Pagination.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function todayValue(picker) {
-  const today = new Date;
-  const year = today.getFullYear();
-  const month = String(today.getMonth() + 1).padStart(2, "0");
-  const day = String(today.getDate()).padStart(2, "0");
-  if (picker === "month")
-    return `${year}-${month}`;
-  if (picker === "year")
-    return String(year);
-  if (picker === "time")
-    return "00:00";
-  return `${year}-${month}-${day}`;
+var defaultPageSizeOptions = [10, 20, 50, 100];
+function toPositiveInteger(value, fallback) {
+  if (!Number.isFinite(value) || value === undefined) {
+    return fallback;
+  }
+  return Math.max(1, Math.floor(value));
 }
-function inputTypeForPicker(picker) {
-  if (picker === "month")
-    return "month";
-  if (picker === "week")
-    return "week";
-  if (picker === "time")
-    return "time";
-  return picker === "year" || picker === "quarter" ? "text" : "date";
+function clampPage(page, pageCount) {
+  return Math.min(pageCount, Math.max(1, Math.floor(page)));
 }
-function placeholderForPicker(picker) {
-  if (picker === "month")
-    return "Select month";
-  if (picker === "week")
-    return "Select week";
-  if (picker === "quarter")
-    return "Select quarter";
-  if (picker === "year")
-    return "Select year";
-  if (picker === "time")
-    return "Select time";
-  return "Select date";
+function getPageCount(total, pageSize) {
+  return Math.max(1, Math.ceil(Math.max(0, total) / pageSize));
 }
-function normalizeDateValue(value) {
-  return typeof value === "string" && value.length > 0 ? value : undefined;
+function getRange(current, pageSize, total) {
+  if (total <= 0) {
+    return [0, 0];
+  }
+  const start = (current - 1) * pageSize + 1;
+  const end = Math.min(total, current * pageSize);
+  return [start, end];
 }
-var DatePickerRoot = forwardRef(({
-  allowClear,
-  className,
-  defaultOpen,
-  defaultValue,
-  disabled,
-  disabledDate,
-  onBlur,
-  onChange,
-  onFocus,
-  onOpenChange,
-  open,
-  picker = "date",
-  placeholder,
-  presets,
-  showNow,
-  size = "md",
-  status,
-  value,
+function getPageTokens(current, pageCount) {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+  const pages = new Set([1, pageCount, current - 1, current, current + 1]);
+  if (current <= 4) {
+    [2, 3, 4, 5].forEach((page) => pages.add(page));
+  }
+  if (current >= pageCount - 3) {
+    [pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1].forEach((page) => pages.add(page));
+  }
+  const sortedPages = Array.from(pages).filter((page) => page >= 1 && page <= pageCount).sort((first, second) => first - second);
+  return sortedPages.reduce((tokens, page) => {
+    const previous = tokens[tokens.length - 1];
+    if (typeof previous === "number") {
+      const gap = page - previous;
+      if (gap === 2) {
+        tokens.push(previous + 1);
+      } else if (gap > 2) {
+        tokens.push("ellipsis");
+      }
+    }
+    tokens.push(page);
+    return tokens;
+  }, []);
+}
+function getSizeOptions(pageSize) {
+  return Array.from(new Set([...defaultPageSizeOptions, pageSize])).sort((first, second) => first - second);
+}
+var Pagination = forwardRef(({
+  current,
+  defaultCurrent = 1,
+  pageSize,
+  defaultPageSize = 10,
+  total = 0,
+  onChange,
+  disabled,
+  simple,
+  showSizeChanger,
+  showQuickJumper,
+  showTotal,
+  size = "md",
+  className,
   ...props
 }, ref) => {
-  const isValueControlled = value !== undefined;
-  const isOpenControlled = open !== undefined;
-  const [innerValue, setInnerValue] = useState(() => normalizeDateValue(defaultValue));
-  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
-  const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
-  const visible = isOpenControlled ? Boolean(open) : innerOpen;
-  const inputType = inputTypeForPicker(picker);
-  function setVisible(nextOpen) {
-    if (!isOpenControlled) {
-      setInnerOpen(nextOpen);
+  const isCurrentControlled = current !== undefined;
+  const isPageSizeControlled = pageSize !== undefined;
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const [quickJumpValue, setQuickJumpValue] = useState("");
+  const mergedPageSize = toPositiveInteger(pageSize ?? internalPageSize, defaultPageSize);
+  const pageCount = getPageCount(total, mergedPageSize);
+  const mergedCurrent = clampPage(toPositiveInteger(current ?? internalCurrent, defaultCurrent), pageCount);
+  const pageTokens = useMemo(() => getPageTokens(mergedCurrent, pageCount), [mergedCurrent, pageCount]);
+  const range = getRange(mergedCurrent, mergedPageSize, total);
+  function changePage(nextPage, nextPageSize = mergedPageSize) {
+    const nextPageCount = getPageCount(total, nextPageSize);
+    const normalizedPage = clampPage(nextPage, nextPageCount);
+    if (!isCurrentControlled) {
+      setInternalCurrent(normalizedPage);
     }
-    onOpenChange?.(nextOpen);
+    if (!isPageSizeControlled) {
+      setInternalPageSize(nextPageSize);
+    }
+    onChange?.(normalizedPage, nextPageSize);
   }
-  function emitChange(nextValue) {
-    if (nextValue && disabledDate?.(nextValue)) {
+  function handlePageSizeChange(event) {
+    const nextPageSize = toPositiveInteger(Number(event.currentTarget.value), mergedPageSize);
+    const nextPage = clampPage(mergedCurrent, getPageCount(total, nextPageSize));
+    changePage(nextPage, nextPageSize);
+  }
+  function jumpToInputPage(value) {
+    const nextPage = Number(value);
+    if (!Number.isFinite(nextPage)) {
       return;
     }
-    if (!isValueControlled) {
-      setInnerValue(nextValue);
+    changePage(nextPage);
+    setQuickJumpValue("");
+  }
+  function handleQuickJumpKeyDown(event) {
+    if (event.key !== "Enter") {
+      return;
     }
-    onChange?.(nextValue, nextValue ?? "");
+    jumpToInputPage(event.currentTarget.value);
   }
-  const presetItems = useMemo(() => presets ?? [], [presets]);
-  return /* @__PURE__ */ jsxs2("div", {
+  const previousDisabled = disabled || mergedCurrent <= 1;
+  const nextDisabled = disabled || mergedCurrent >= pageCount;
+  return /* @__PURE__ */ jsxs2("nav", {
     ...props,
     ref,
-    className: getDatePickerClasses({
-      size,
-      status,
-      picker,
-      open: visible,
-      disabled,
-      className
-    }),
+    className: getPaginationClasses({ size, compact: simple, className }),
     children: [
-      /* @__PURE__ */ jsx3("input", {
-        className: datePickerInputClass,
-        disabled,
-        type: inputType,
-        value: currentValue ?? "",
-        placeholder: placeholder ?? placeholderForPicker(picker),
-        onFocus: (event) => {
-          onFocus?.(event);
-          setVisible(true);
-        },
-        onBlur: (event) => {
-          onBlur?.(event);
-          setVisible(false);
-        },
-        onChange: (event) => emitChange(event.currentTarget.value || undefined)
-      }),
-      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        className: datePickerClearClass,
-        "aria-label": "Clear date",
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => emitChange(undefined),
-        children: "x"
+      showTotal ? /* @__PURE__ */ jsx3("div", {
+        className: paginationInfoClass,
+        children: /* @__PURE__ */ jsx3("span", {
+          className: paginationInfoTextClass,
+          children: showTotal(total, range)
+        })
       }) : null,
-      /* @__PURE__ */ jsx3("span", {
-        className: datePickerIconClass,
-        "aria-hidden": "true"
+      /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: paginationPrevClass,
+        disabled: previousDisabled,
+        "aria-label": "Previous page",
+        onClick: () => changePage(mergedCurrent - 1),
+        children: "Prev"
       }),
-      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
-        className: getDatePickerDropdownClasses({ open: visible }),
+      simple ? /* @__PURE__ */ jsxs2("div", {
+        className: paginationInputClass,
         children: [
-          presetItems.map((preset, index) => /* @__PURE__ */ jsx3("button", {
-            type: "button",
-            className: datePickerPresetClass,
-            onMouseDown: (event) => event.preventDefault(),
-            onClick: () => emitChange(preset.value),
-            children: preset.label
-          }, index)),
-          showNow ? /* @__PURE__ */ jsx3("div", {
-            className: datePickerFooterClass,
-            children: /* @__PURE__ */ jsx3("button", {
-              type: "button",
-              onMouseDown: (event) => event.preventDefault(),
-              onClick: () => emitChange(todayValue(picker)),
-              children: "Now"
-            })
-          }) : null
+          /* @__PURE__ */ jsx3("input", {
+            "aria-label": "Current page",
+            type: "number",
+            min: 1,
+            max: pageCount,
+            value: quickJumpValue || String(mergedCurrent),
+            disabled,
+            onChange: (event) => setQuickJumpValue(event.currentTarget.value),
+            onKeyDown: handleQuickJumpKeyDown,
+            onBlur: (event) => {
+              if (event.currentTarget.value !== String(mergedCurrent)) {
+                jumpToInputPage(event.currentTarget.value);
+              }
+            }
+          }),
+          /* @__PURE__ */ jsxs2("span", {
+            className: paginationInfoTextClass,
+            children: [
+              "/ ",
+              pageCount
+            ]
+          })
         ]
+      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx3("span", {
+        "aria-hidden": "true",
+        className: paginationEllipsisClass
+      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: getPaginationItemClasses({
+          active: pageToken === mergedCurrent,
+          disabled
+        }),
+        disabled,
+        "aria-current": pageToken === mergedCurrent ? "page" : undefined,
+        "aria-label": `Page ${pageToken}`,
+        onClick: () => changePage(pageToken),
+        children: pageToken
+      }, pageToken)),
+      /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: paginationNextClass,
+        disabled: nextDisabled,
+        "aria-label": "Next page",
+        onClick: () => changePage(mergedCurrent + 1),
+        children: "Next"
+      }),
+      showSizeChanger ? /* @__PURE__ */ jsx3("div", {
+        className: paginationInputClass,
+        children: /* @__PURE__ */ jsx3("select", {
+          "aria-label": "Page size",
+          value: mergedPageSize,
+          disabled,
+          onChange: handlePageSizeChange,
+          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs2("option", {
+            value: option,
+            children: [
+              option,
+              " / page"
+            ]
+          }, option))
+        })
+      }) : null,
+      showQuickJumper && !simple ? /* @__PURE__ */ jsx3("div", {
+        className: paginationInputClass,
+        children: /* @__PURE__ */ jsx3("input", {
+          "aria-label": "Jump to page",
+          type: "number",
+          min: 1,
+          max: pageCount,
+          value: quickJumpValue,
+          disabled,
+          onChange: (event) => setQuickJumpValue(event.currentTarget.value),
+          onKeyDown: handleQuickJumpKeyDown
+        })
       }) : null
     ]
   });
 });
-DatePickerRoot.displayName = "DatePicker";
-var RangePicker = forwardRef(({
-  allowClear,
-  className,
-  defaultValue,
-  disabled,
-  disabledDate,
-  onChange,
-  picker = "date",
-  placeholder,
-  separator = "-",
-  size = "md",
-  status,
-  value,
-  ...props
-}, ref) => {
-  const isControlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
-  const currentValue = isControlled ? value : innerValue;
-  const inputType = inputTypeForPicker(picker);
-  function emitChange(nextValue) {
-    if (nextValue.some((item) => item !== undefined && Boolean(disabledDate?.(item)))) {
-      return;
-    }
-    if (!isControlled) {
-      setInnerValue(nextValue);
-    }
-    onChange?.(nextValue, [nextValue[0] ?? "", nextValue[1] ?? ""]);
-  }
-  function updateIndex(index, nextItem) {
-    emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
-  }
-  return /* @__PURE__ */ jsxs2("div", {
-    ...props,
-    ref,
-    className: getDatePickerClasses({
-      size,
-      status,
-      picker,
-      disabled,
-      range: true,
-      className
-    }),
-    children: [
-      /* @__PURE__ */ jsx3("input", {
-        className: datePickerInputClass,
-        disabled,
-        type: inputType,
-        value: currentValue?.[0] ?? "",
-        placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
-        onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
-      }),
-      /* @__PURE__ */ jsx3("span", {
-        className: datePickerSeparatorClass,
-        children: separator
-      }),
-      /* @__PURE__ */ jsx3("input", {
-        className: datePickerInputClass,
-        disabled,
-        type: inputType,
-        value: currentValue?.[1] ?? "",
-        placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
-        onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
-      }),
-      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx3("button", {
+Pagination.displayName = "Pagination";
+// src/components/dm-pagination/DmPagination.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultLocale = {
+  refresh: "Refresh",
+  showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
+  showTotalSimple: (total, range) => `${range[0]}-${range[1]} / ${total}`,
+  selected: (selectedTotal) => `, ${selectedTotal} selected`
+};
+function getResponsiveSimple({
+  width,
+  total,
+  showRefresh,
+  showSizeChanger
+}) {
+  let reservedWidth = 0;
+  if (!showRefresh)
+    reservedWidth += 100;
+  if (!showSizeChanger)
+    reservedWidth += 100;
+  if (width < 900 - reservedWidth)
+    return total >= 100;
+  if (width < 1100 - reservedWidth)
+    return total >= 1000;
+  if (width < 1220 - reservedWidth)
+    return total >= 99999;
+  if (width < 1300 - reservedWidth)
+    return total >= 999999;
+  if (width < 1450 - reservedWidth)
+    return total >= 9999999;
+  return false;
+}
+function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState2(1000);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(([entry]) => {
+      setWidth(entry?.contentRect.width || element.getBoundingClientRect().width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function renderSelected(selectedTotal, locale) {
+  if (!selectedTotal)
+    return null;
+  return /* @__PURE__ */ jsx4("span", {
+    className: dmPaginationSelectedClass,
+    children: locale.selected(selectedTotal)
+  });
+}
+var DmPagination = forwardRef2(({
+  selectedTotal = 0,
+  loading = false,
+  total = 0,
+  showRefresh = true,
+  showPagination = true,
+  wrapperStyle,
+  className,
+  align = "right",
+  showTotalFullMessage = false,
+  showSizeChanger = true,
+  responsiveSimple = true,
+  refresh,
+  simple,
+  showQuickJumper,
+  showTotal,
+  locale,
+  ...props
+}, ref) => {
+  const [measureRef, width] = useElementWidth();
+  const mergedLocale = useMemo2(() => ({ ...defaultLocale, ...locale }), [locale]);
+  const isRefreshVisible = showRefresh && Boolean(refresh);
+  const shouldRender = showPagination || isRefreshVisible;
+  const responsiveSimpleMode = responsiveSimple ? getResponsiveSimple({
+    width,
+    total,
+    showRefresh,
+    showSizeChanger
+  }) : false;
+  const mergedSimple = simple ?? responsiveSimpleMode;
+  const mergedShowQuickJumper = showQuickJumper ?? !mergedSimple;
+  const totalRenderer = useMemo2(() => {
+    if (showTotal)
+      return showTotal;
+    return (nextTotal, range) => {
+      if (Number(nextTotal) === 0)
+        return "";
+      const selected = renderSelected(selectedTotal, mergedLocale);
+      const message = mergedSimple && !showTotalFullMessage ? mergedLocale.showTotalSimple(nextTotal, range, selectedTotal) : mergedLocale.showTotal(nextTotal, range, selectedTotal);
+      return /* @__PURE__ */ jsxs3("span", {
+        title: `${mergedLocale.showTotal(nextTotal, range, selectedTotal)}${selectedTotal ? mergedLocale.selected(selectedTotal) : ""}`,
+        children: [
+          message,
+          selected
+        ]
+      });
+    };
+  }, [
+    mergedLocale,
+    mergedSimple,
+    selectedTotal,
+    showTotal,
+    showTotalFullMessage
+  ]);
+  if (!shouldRender)
+    return null;
+  return /* @__PURE__ */ jsxs3("div", {
+    ref: (element) => {
+      measureRef.current = element;
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref) {
+        ref.current = element;
+      }
+    },
+    className: getDmPaginationClasses({ align, className }),
+    style: wrapperStyle,
+    children: [
+      showPagination ? /* @__PURE__ */ jsx4("div", {
+        className: dmPaginationPagerClass,
+        children: /* @__PURE__ */ jsx4(Pagination, {
+          ...props,
+          total,
+          simple: mergedSimple,
+          showQuickJumper: mergedShowQuickJumper,
+          showSizeChanger,
+          showTotal: totalRenderer
+        })
+      }) : null,
+      isRefreshVisible ? /* @__PURE__ */ jsxs3("button", {
         type: "button",
-        className: datePickerClearClass,
-        "aria-label": "Clear date range",
-        onClick: () => emitChange([undefined, undefined]),
-        children: "x"
+        className: getDmPaginationRefreshClasses({ loading }),
+        disabled: loading || props.disabled,
+        "aria-busy": loading || undefined,
+        onClick: refresh,
+        children: [
+          /* @__PURE__ */ jsx4("span", {
+            "aria-hidden": "true",
+            children: "Reload"
+          }),
+          /* @__PURE__ */ jsx4("span", {
+            children: mergedLocale.refresh
+          })
+        ]
       }) : null
     ]
   });
 });
-RangePicker.displayName = "DatePicker.RangePicker";
-function withPicker(picker, displayName) {
-  const Picker = forwardRef((props, ref) => /* @__PURE__ */ jsx3(DatePickerRoot, {
-    ...props,
-    ref,
-    picker
-  }));
-  Picker.displayName = displayName;
-  return Picker;
-}
-var DatePicker = Object.assign(DatePickerRoot, {
-  RangePicker,
-  WeekPicker: withPicker("week", "DatePicker.WeekPicker"),
-  MonthPicker: withPicker("month", "DatePicker.MonthPicker"),
-  QuarterPicker: withPicker("quarter", "DatePicker.QuarterPicker"),
-  YearPicker: withPicker("year", "DatePicker.YearPicker")
-});
-// src/components/dropdown/Dropdown.tsx
+DmPagination.displayName = "DmPagination";
+// src/components/dm-search/DmSearch.tsx
 import {
-  cloneElement,
-  forwardRef as forwardRef2,
-  isValidElement,
-  useId,
-  useState as useState2
+  forwardRef as forwardRef7,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo6,
+  useState as useState8
 } 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 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"
-};
-function getDropdownClasses({
-  placement = "bottomLeft",
-  open,
-  arrow,
+// src/classes/dm-search.ts
+var dmSearchBaseClass = "dm-search";
+var dmSearchCompactClass = "dm-search-compact";
+var dmSearchCollapsedClass = "dm-search-collapsed";
+var dmSearchFieldsClass = "dm-search-fields";
+var dmSearchFieldClass = "dm-search-field";
+var dmSearchActionsClass = "dm-search-actions";
+var dmSearchFastFilterClass = "dm-search-fast-filter";
+function getDmSearchClasses({
+  compact,
+  collapsed,
   className
 }) {
-  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+  return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
 }
 
-// src/classes/menu.ts
-var menuBaseClass = "menu";
-var menuShowClass = "menu-show";
-var menuItemClass = "menu-item";
-var menuItemActiveClass = "menu-item-active";
-var menuItemDisabledClass = "menu-item-disabled";
-var menuItemIconClass = "menu-item-icon";
-var menuItemTrailingClass = "menu-item-trailing";
-var menuItemSubmenuClass = "menu-item-submenu";
-var menuDividerClass = "menu-divider";
-var menuLabelClass = "menu-label";
-var menuSubmenuClass = "menu-submenu";
-var menuCompactClass = "menu-compact";
-var menuWideClass = "menu-wide";
-var menuModeClasses = {
-  vertical: "menu-vertical",
-  horizontal: "menu-horizontal",
-  inline: "menu-inline"
-};
-var menuThemeClasses = {
-  light: "",
-  dark: "menu-dark menu-surface-container-highest"
-};
-var menuSizeClasses = {
-  sm: menuCompactClass,
-  md: "",
-  lg: menuWideClass
-};
-function getMenuClasses({
-  mode = "vertical",
-  theme = "light",
-  size = "md",
-  inlineCollapsed,
-  disabled,
+// 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(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+  return cn(calendarBaseClass, fullscreen ? "calendar-fullscreen" : "calendar-card", mode === "year" && "calendar-year-mode", className);
 }
-function getMenuItemClasses({
-  active,
+function getCalendarCellClasses({
+  selected,
+  today,
+  outside,
   disabled,
-  danger,
-  submenu,
   className
 }) {
-  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+  return cn("calendar-cell", selected && "calendar-cell-selected", today && "calendar-cell-today", outside && "calendar-cell-outside", disabled && "calendar-cell-disabled", className);
 }
 
-// src/components/dropdown/Dropdown.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function hasTrigger(triggers, trigger) {
-  return (triggers ?? ["hover"]).includes(trigger);
+// 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 callHandler(handler, event) {
-  handler?.(event);
+function isSameMonth(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
 }
-function renderMenuItem(item, onClick, close) {
-  if (item.type === "divider") {
-    return /* @__PURE__ */ jsx4("li", {
-      className: menuDividerClass
-    }, String(item.key));
+function isOutsideRange(date, validRange) {
+  if (!validRange) {
+    return false;
   }
-  return /* @__PURE__ */ jsx4("li", {
-    children: /* @__PURE__ */ jsxs3("button", {
-      type: "button",
-      className: cn(menuItemClass, item.danger && "menu-item-danger", item.className),
-      disabled: item.disabled,
-      onClick: (event) => {
-        onClick?.({ key: String(item.key), item, domEvent: event });
-        close();
-      },
-      children: [
-        item.icon ? /* @__PURE__ */ jsx4("span", {
-          className: "menu-item-icon",
-          children: item.icon
-        }) : null,
-        /* @__PURE__ */ jsx4("span", {
-          children: item.label
+  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"
+          })
         })
-      ]
-    })
-  }, String(item.key));
+      }),
+      /* @__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 DropdownRoot = forwardRef2(({
-  arrow,
-  children,
+var Calendar = forwardRef3(({
   className,
-  defaultOpen,
-  destroyPopupOnHide,
-  disabled,
-  dropdownRender,
-  menu,
-  onContextMenu,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  onOpenChange,
-  open,
-  overlay,
-  placement = "bottomLeft",
-  trigger = ["hover"],
+  value,
+  defaultValue,
+  mode,
+  defaultMode = "month",
+  fullscreen = true,
+  validRange,
+  disabledDate,
+  dateCellRender,
+  dateFullCellRender,
+  monthCellRender,
+  monthFullCellRender,
+  cellRender,
+  fullCellRender,
+  headerRender,
+  onChange,
+  onSelect,
+  onPanelChange,
   ...props
 }, ref) => {
-  const [internalOpen, setInternalOpen] = useState2(Boolean(defaultOpen));
-  const isControlled = open !== undefined;
-  const visible = isControlled ? open : internalOpen;
-  const overlayId = useId();
-  function setVisible(nextOpen) {
-    if (disabled)
-      return;
-    if (!isControlled) {
-      setInternalOpen(nextOpen);
+  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);
     }
-    onOpenChange?.(nextOpen);
+    onPanelChange?.(formatDate(panelDate), nextMode);
   }
-  const close = () => setVisible(false);
-  const toggleVisible = () => setVisible(!visible);
-  const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx4("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 triggerNode = isValidElement(children) ? cloneElement(children, {
-    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
-    onMouseEnter: (event) => {
-      callHandler(children.props.onMouseEnter, event);
-      triggerProps.onMouseEnter?.();
-      onMouseEnter?.(event);
-    },
-    onMouseLeave: (event) => {
-      callHandler(children.props.onMouseLeave, event);
-      triggerProps.onMouseLeave?.();
-      onMouseLeave?.(event);
-    },
-    onClick: (event) => {
-      callHandler(children.props.onClick, event);
-      triggerProps.onClick?.();
-      onClick?.(event);
-    },
-    onContextMenu: (event) => {
-      callHandler(children.props.onContextMenu, event);
-      triggerProps.onContextMenu?.(event);
-      onContextMenu?.(event);
+  function commitValue(nextDate, source) {
+    const nextValue = source === "month" ? formatMonth(nextDate) : formatDate(nextDate);
+    if (disabledDate?.(nextValue) || isOutsideRange(nextDate, validRange)) {
+      return;
     }
-  }) : /* @__PURE__ */ jsx4("span", {
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    "aria-disabled": disabled || undefined,
-    "aria-controls": triggerProps["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"],
-    onMouseEnter: (event) => {
-      triggerProps.onMouseEnter?.();
-      onMouseEnter?.(event);
-    },
-    onMouseLeave: (event) => {
-      triggerProps.onMouseLeave?.();
-      onMouseLeave?.(event);
-    },
-    onClick: (event) => {
-      triggerProps.onClick?.();
-      onClick?.(event);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        triggerProps.onClick?.();
-      }
-    },
-    onContextMenu: (event) => {
-      triggerProps.onContextMenu?.(event);
-      onContextMenu?.(event);
-    },
-    children
-  });
-  return /* @__PURE__ */ jsxs3("span", {
+    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: dropdownWrapperClass,
+    className: getCalendarClasses({
+      fullscreen,
+      mode: currentMode,
+      className
+    }),
     children: [
-      triggerNode,
-      shouldRenderPopup ? /* @__PURE__ */ jsxs3("span", {
-        id: overlayId,
-        role: "menu",
-        className: getDropdownClasses({
-          placement,
-          open: visible,
-          arrow,
-          className
-        }),
-        children: [
-          popup,
-          arrow ? /* @__PURE__ */ jsx4("span", {
-            className: dropdownArrowClass
-          }) : null
-        ]
-      }) : null
+      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))
+        })
+      })
     ]
   });
 });
-DropdownRoot.displayName = "Dropdown";
-var DropdownButton = forwardRef2(({
-  buttonsRender,
-  children,
+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,
-  menu,
-  onClick,
-  trigger = ["click"],
-  ...props
-}, ref) => {
-  const buttons = [
-    /* @__PURE__ */ jsx4(Button, {
-      disabled,
-      onClick,
-      children
-    }, "primary"),
-    /* @__PURE__ */ jsx4(Button, {
-      "aria-label": "Open dropdown",
-      disabled,
-      children: "v"
-    }, "trigger")
-  ];
-  const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
-  return /* @__PURE__ */ jsx4(DropdownRoot, {
-    ...props,
-    ref,
-    menu,
-    trigger,
-    disabled,
-    children: /* @__PURE__ */ jsx4("span", {
-      className: dropdownButtonClass,
-      children: renderedButtons
-    })
+  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);
+    };
   });
-});
-DropdownButton.displayName = "Dropdown.Button";
-var Dropdown = Object.assign(DropdownRoot, {
-  Button: DropdownButton
-});
-// src/components/dm-toolbar/DmToolbar.tsx
-import { useMemo as useMemo2 } from "react";
+  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/dm-toolbar.ts
-var dmToolbarBaseClass = "dm-toolbar";
-var dmToolbarItemClass = "dm-toolbar-item";
-var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
-var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
-var dmToolbarMoreClass = "dm-toolbar-more";
-function getDmToolbarClasses({ className }) {
-  return cn(dmToolbarBaseClass, className);
+// src/classes/date-picker.ts
+var datePickerBaseClass = "datepicker";
+var datePickerInputClass = "datepicker-input";
+var datePickerIconClass = "datepicker-icon";
+var datePickerDropdownClass = "datepicker-dropdown";
+var datePickerDropdownOpenClass = "datepicker-dropdown-open";
+var datePickerFooterClass = "datepicker-footer";
+var datePickerPresetClass = "datepicker-preset";
+var datePickerRangeClass = "datepicker-range";
+var datePickerSeparatorClass = "datepicker-range-separator";
+var datePickerClearClass = "datepicker-clear";
+var datePickerSizeClasses = {
+  sm: "datepicker-sm",
+  md: "",
+  lg: "datepicker-lg"
+};
+var datePickerStatusClasses = {
+  error: "datepicker-error",
+  success: "datepicker-success"
+};
+var datePickerPickerClasses = {
+  date: "",
+  week: "datepicker-week",
+  month: "datepicker-month-picker",
+  quarter: "datepicker-quarter-picker",
+  year: "datepicker-year-picker",
+  time: "datepicker-time-picker"
+};
+function getDatePickerClasses({
+  size = "md",
+  status,
+  picker = "date",
+  open,
+  disabled,
+  range,
+  className
+}) {
+  return cn(datePickerBaseClass, datePickerSizeClasses[size], status && datePickerStatusClasses[status], datePickerPickerClasses[picker], open && "datepicker-open", disabled && "datepicker-disabled", range && datePickerRangeClass, className);
 }
-function getDmToolbarItemClasses({
-  primary,
+function getDatePickerDropdownClasses({
+  open,
   className
 }) {
-  return cn(dmToolbarItemClass, primary ? dmToolbarPrimaryItemClass : dmToolbarSecondaryItemClass, className);
+  return cn(datePickerDropdownClass, open && datePickerDropdownOpenClass, className);
 }
 
-// src/components/dm-toolbar/DmToolbar.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function isPrimary(item) {
-  return item.type === "primary";
+// src/components/date-picker/DatePicker.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function todayValue(picker) {
+  const today = new Date;
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+  const day = String(today.getDate()).padStart(2, "0");
+  if (picker === "month")
+    return `${year}-${month}`;
+  if (picker === "year")
+    return String(year);
+  if (picker === "time")
+    return "00:00";
+  return `${year}-${month}-${day}`;
 }
-function renderToolbarItem(item, index) {
-  const {
-    title,
-    menu,
-    type,
-    htmlType = "button",
-    color,
-    appearance,
-    ...buttonPropsWithKey
-  } = item;
-  const buttonProps = { ...buttonPropsWithKey };
-  delete buttonProps.key;
-  const button = /* @__PURE__ */ jsx5(Button, {
-    ...buttonProps,
-    type: htmlType,
-    color: color ?? (type === "primary" ? "primary" : "secondary"),
-    appearance: appearance ?? (type === "primary" ? "filled" : "outline"),
-    children: title
-  });
-  if (!menu?.items?.length)
-    return button;
-  return /* @__PURE__ */ jsx5(Dropdown, {
-    trigger: ["click"],
-    menu,
-    children: button
-  }, `dropdown-${index}`);
-}
-function toOverflowMenu(items) {
-  return {
-    items: items.map((item, index) => ({
-      key: item.key ?? index,
-      label: item.title,
-      disabled: item.disabled
-    })),
-    onClick: ({ key, domEvent }) => {
-      const target = items.find((item, index) => String(item.key ?? index) === key);
-      target?.onClick?.(domEvent);
-    }
-  };
-}
-function DmToolbar({
-  items = [],
-  className,
-  style,
-  moreText = "More",
-  maxVisibleSecondaryItems
-}) {
-  const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo2(() => {
-    const primaryItems2 = items.filter(isPrimary);
-    const secondaryItems = items.filter((item) => !isPrimary(item));
-    const visibleLimit = maxVisibleSecondaryItems === undefined ? secondaryItems.length : Math.max(0, maxVisibleSecondaryItems);
-    const visibleSecondaryItems2 = visibleLimit === 0 ? [] : secondaryItems.slice(-visibleLimit);
-    const overflowSecondaryItems2 = visibleLimit >= secondaryItems.length ? [] : secondaryItems.slice(0, secondaryItems.length - visibleLimit);
-    return { visibleSecondaryItems: visibleSecondaryItems2, overflowSecondaryItems: overflowSecondaryItems2, primaryItems: primaryItems2 };
-  }, [items, maxVisibleSecondaryItems]);
-  const showMore = overflowSecondaryItems.length > 0;
-  return /* @__PURE__ */ jsxs4("div", {
-    className: getDmToolbarClasses({ className }),
-    style,
-    children: [
-      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx5("span", {
-        className: getDmToolbarItemClasses({}),
-        children: renderToolbarItem(item, index)
-      }, item.key ?? `secondary-${index}`)),
-      showMore ? /* @__PURE__ */ jsx5(Dropdown, {
-        trigger: ["click"],
-        menu: toOverflowMenu(overflowSecondaryItems),
-        children: /* @__PURE__ */ jsx5(Button, {
-          type: "button",
-          className: dmToolbarMoreClass,
-          color: "secondary",
-          appearance: "outline",
-          children: moreText
-        })
-      }) : null,
-      primaryItems.map((item, index) => /* @__PURE__ */ jsx5("span", {
-        className: getDmToolbarItemClasses({ primary: true }),
-        children: renderToolbarItem(item, index)
-      }, item.key ?? `primary-${index}`))
-    ]
-  });
-}
-DmToolbar.displayName = "DmToolbar";
-// src/components/pagination/Pagination.tsx
-import {
-  forwardRef as forwardRef3,
-  useMemo as useMemo3,
-  useState as useState3
-} from "react";
-
-// src/classes/pagination.ts
-var paginationBaseClass = "pagination";
-var paginationItemClass = "pagination-item";
-var paginationItemActiveClass = "pagination-item-active";
-var paginationItemDisabledClass = "pagination-item-disabled";
-var paginationPrevClass = "pagination-prev";
-var paginationNextClass = "pagination-next";
-var paginationEllipsisClass = "pagination-ellipsis";
-var paginationCompactClass = "pagination-compact";
-var paginationInfoClass = "pagination-info";
-var paginationInfoTextClass = "pagination-info-text";
-var paginationInputClass = "pagination-input";
-var paginationResponsiveClass = "pagination-responsive";
-var paginationSizeClasses = {
-  sm: "pagination-sm",
-  md: "",
-  lg: "pagination-lg"
-};
-function getPaginationClasses({
-  size = "md",
-  compact,
-  className
-}) {
-  return cn(paginationBaseClass, paginationResponsiveClass, paginationSizeClasses[size], compact && paginationCompactClass, className);
-}
-function getPaginationItemClasses({
-  active,
-  disabled
-}) {
-  return cn(paginationItemClass, active && paginationItemActiveClass, disabled && paginationItemDisabledClass);
-}
-
-// src/components/pagination/Pagination.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var defaultPageSizeOptions = [10, 20, 50, 100];
-function toPositiveInteger(value, fallback) {
-  if (!Number.isFinite(value) || value === undefined) {
-    return fallback;
-  }
-  return Math.max(1, Math.floor(value));
-}
-function clampPage(page, pageCount) {
-  return Math.min(pageCount, Math.max(1, Math.floor(page)));
-}
-function getPageCount(total, pageSize) {
-  return Math.max(1, Math.ceil(Math.max(0, total) / pageSize));
-}
-function getRange(current, pageSize, total) {
-  if (total <= 0) {
-    return [0, 0];
-  }
-  const start = (current - 1) * pageSize + 1;
-  const end = Math.min(total, current * pageSize);
-  return [start, end];
+function inputTypeForPicker(picker) {
+  if (picker === "month")
+    return "month";
+  if (picker === "week")
+    return "week";
+  if (picker === "time")
+    return "time";
+  return picker === "year" || picker === "quarter" ? "text" : "date";
 }
-function getPageTokens(current, pageCount) {
-  if (pageCount <= 7) {
-    return Array.from({ length: pageCount }, (_, index) => index + 1);
-  }
-  const pages = new Set([1, pageCount, current - 1, current, current + 1]);
-  if (current <= 4) {
-    [2, 3, 4, 5].forEach((page) => pages.add(page));
-  }
-  if (current >= pageCount - 3) {
-    [pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1].forEach((page) => pages.add(page));
-  }
-  const sortedPages = Array.from(pages).filter((page) => page >= 1 && page <= pageCount).sort((first, second) => first - second);
-  return sortedPages.reduce((tokens, page) => {
-    const previous = tokens[tokens.length - 1];
-    if (typeof previous === "number") {
-      const gap = page - previous;
-      if (gap === 2) {
-        tokens.push(previous + 1);
-      } else if (gap > 2) {
-        tokens.push("ellipsis");
-      }
-    }
-    tokens.push(page);
-    return tokens;
-  }, []);
+function placeholderForPicker(picker) {
+  if (picker === "month")
+    return "Select month";
+  if (picker === "week")
+    return "Select week";
+  if (picker === "quarter")
+    return "Select quarter";
+  if (picker === "year")
+    return "Select year";
+  if (picker === "time")
+    return "Select time";
+  return "Select date";
 }
-function getSizeOptions(pageSize) {
-  return Array.from(new Set([...defaultPageSizeOptions, pageSize])).sort((first, second) => first - second);
+function normalizeDateValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
 }
-var Pagination = forwardRef3(({
-  current,
-  defaultCurrent = 1,
-  pageSize,
-  defaultPageSize = 10,
-  total = 0,
-  onChange,
+var DatePickerRoot = forwardRef4(({
+  allowClear,
+  className,
+  inputProps,
+  defaultOpen,
+  defaultValue,
   disabled,
-  simple,
-  showSizeChanger,
-  showQuickJumper,
-  showTotal,
+  disabledDate,
+  onBlur,
+  onChange,
+  onFocus,
+  onOpenChange,
+  open,
+  picker = "date",
+  placeholder,
+  presets,
+  showNow,
   size = "md",
-  className,
+  status,
+  value,
   ...props
 }, ref) => {
-  const isCurrentControlled = current !== undefined;
-  const isPageSizeControlled = pageSize !== undefined;
-  const [internalCurrent, setInternalCurrent] = useState3(defaultCurrent);
-  const [internalPageSize, setInternalPageSize] = useState3(defaultPageSize);
-  const [quickJumpValue, setQuickJumpValue] = useState3("");
-  const mergedPageSize = toPositiveInteger(pageSize ?? internalPageSize, defaultPageSize);
-  const pageCount = getPageCount(total, mergedPageSize);
-  const mergedCurrent = clampPage(toPositiveInteger(current ?? internalCurrent, defaultCurrent), pageCount);
-  const pageTokens = useMemo3(() => getPageTokens(mergedCurrent, pageCount), [mergedCurrent, pageCount]);
-  const range = getRange(mergedCurrent, mergedPageSize, total);
-  function changePage(nextPage, nextPageSize = mergedPageSize) {
-    const nextPageCount = getPageCount(total, nextPageSize);
-    const normalizedPage = clampPage(nextPage, nextPageCount);
-    if (!isCurrentControlled) {
-      setInternalCurrent(normalizedPage);
-    }
-    if (!isPageSizeControlled) {
-      setInternalPageSize(nextPageSize);
-    }
-    onChange?.(normalizedPage, nextPageSize);
-  }
-  function handlePageSizeChange(event) {
-    const nextPageSize = toPositiveInteger(Number(event.currentTarget.value), mergedPageSize);
-    const nextPage = clampPage(mergedCurrent, getPageCount(total, nextPageSize));
-    changePage(nextPage, nextPageSize);
-  }
-  function jumpToInputPage(value) {
-    const nextPage = Number(value);
-    if (!Number.isFinite(nextPage)) {
+  const [calendarMode, setCalendarMode] = useState5("month");
+  const isValueControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState5(() => normalizeDateValue(defaultValue));
+  const dropdown = usePickerDropdown({
+    open,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    ref
+  });
+  const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
+  const { visible, setVisible } = dropdown;
+  const inputType = inputTypeForPicker(picker);
+  function emitChange(nextValue) {
+    if (nextValue && disabledDate?.(nextValue)) {
       return;
     }
-    changePage(nextPage);
-    setQuickJumpValue("");
+    if (!isValueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, nextValue ?? "");
   }
-  function handleQuickJumpKeyDown(event) {
-    if (event.key !== "Enter") {
+  function selectValue(nextValue) {
+    if (disabledDate?.(nextValue))
       return;
-    }
-    jumpToInputPage(event.currentTarget.value);
+    emitChange(nextValue);
+    dropdown.closeAndFocus();
   }
-  const previousDisabled = disabled || mergedCurrent <= 1;
-  const nextDisabled = disabled || mergedCurrent >= pageCount;
-  return /* @__PURE__ */ jsxs5("nav", {
+  const presetItems = useMemo4(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs5("div", {
     ...props,
-    ref,
-    className: getPaginationClasses({ size, compact: simple, className }),
-    children: [
-      showTotal ? /* @__PURE__ */ jsx6("div", {
-        className: paginationInfoClass,
-        children: /* @__PURE__ */ jsx6("span", {
-          className: paginationInfoTextClass,
-          children: showTotal(total, range)
-        })
-      }) : null,
+    ref: dropdown.rootRef,
+    onBlur: dropdown.onRootBlur,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      open: visible,
+      disabled,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx6("input", {
+        ...inputProps,
+        ref: dropdown.inputRef,
+        "aria-haspopup": "dialog",
+        "aria-controls": visible ? dropdown.panelId : undefined,
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue ?? "",
+        placeholder: placeholder ?? placeholderForPicker(picker),
+        onFocus: (event) => {
+          onFocus?.(event);
+          dropdown.onInputFocus();
+        },
+        onBlur: (event) => {
+          onBlur?.(event);
+        },
+        onClick: () => setVisible(true),
+        onChange: (event) => emitChange(event.currentTarget.value || undefined)
+      }),
+      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx6("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => emitChange(undefined),
+        children: "x"
+      }) : null,
       /* @__PURE__ */ jsx6("button", {
         type: "button",
-        className: paginationPrevClass,
-        disabled: previousDisabled,
-        "aria-label": "Previous page",
-        onClick: () => changePage(mergedCurrent - 1),
-        children: "Prev"
+        className: datePickerIconClass,
+        "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"
+            })
+          ]
+        })
       }),
-      simple ? /* @__PURE__ */ jsxs5("div", {
-        className: paginationInputClass,
+      visible ? /* @__PURE__ */ jsxs5("div", {
+        id: dropdown.panelId,
+        role: "dialog",
+        "aria-label": "Choose date",
+        className: getDatePickerDropdownClasses({ open: visible }),
         children: [
-          /* @__PURE__ */ jsx6("input", {
-            "aria-label": "Current page",
-            type: "number",
-            min: 1,
-            max: pageCount,
-            value: quickJumpValue || String(mergedCurrent),
-            disabled,
-            onChange: (event) => setQuickJumpValue(event.currentTarget.value),
-            onKeyDown: handleQuickJumpKeyDown,
-            onBlur: (event) => {
-              if (event.currentTarget.value !== String(mergedCurrent)) {
-                jumpToInputPage(event.currentTarget.value);
+          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)
           }),
-          /* @__PURE__ */ jsxs5("span", {
-            className: paginationInfoTextClass,
-            children: [
-              "/ ",
-              pageCount
-            ]
-          })
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx6("button", {
+            type: "button",
+            className: datePickerPresetClass,
+            onMouseDown: (event) => event.preventDefault(),
+            disabled: Boolean(disabledDate?.(preset.value)),
+            onClick: () => selectValue(preset.value),
+            children: preset.label
+          }, index)),
+          showNow ? /* @__PURE__ */ jsx6("div", {
+            className: datePickerFooterClass,
+            children: /* @__PURE__ */ jsx6("button", {
+              type: "button",
+              onMouseDown: (event) => event.preventDefault(),
+              disabled: Boolean(disabledDate?.(todayValue(picker))),
+              onClick: () => selectValue(todayValue(picker)),
+              children: "Now"
+            })
+          }) : null
         ]
-      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx6("span", {
-        "aria-hidden": "true",
-        className: paginationEllipsisClass
-      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx6("button", {
-        type: "button",
-        className: getPaginationItemClasses({
-          active: pageToken === mergedCurrent,
-          disabled
-        }),
+      }) : null
+    ]
+  });
+});
+DatePickerRoot.displayName = "DatePicker";
+var RangePicker = forwardRef4(({
+  allowClear,
+  className,
+  inputProps,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onChange,
+  picker = "date",
+  placeholder,
+  separator = "-",
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState5(defaultValue ?? [undefined, undefined]);
+  const currentValue = isControlled ? value : innerValue;
+  const inputType = inputTypeForPicker(picker);
+  function emitChange(nextValue) {
+    if (nextValue.some((item) => item !== undefined && Boolean(disabledDate?.(item)))) {
+      return;
+    }
+    if (!isControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, [nextValue[0] ?? "", nextValue[1] ?? ""]);
+  }
+  function updateIndex(index, nextItem) {
+    emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
+  }
+  return /* @__PURE__ */ jsxs5("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      disabled,
+      range: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx6("input", {
+        ...inputProps,
+        className: datePickerInputClass,
         disabled,
-        "aria-current": pageToken === mergedCurrent ? "page" : undefined,
-        "aria-label": `Page ${pageToken}`,
-        onClick: () => changePage(pageToken),
-        children: pageToken
-      }, pageToken)),
-      /* @__PURE__ */ jsx6("button", {
-        type: "button",
-        className: paginationNextClass,
-        disabled: nextDisabled,
-        "aria-label": "Next page",
-        onClick: () => changePage(mergedCurrent + 1),
-        children: "Next"
+        type: inputType,
+        value: currentValue?.[0] ?? "",
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
+        onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
       }),
-      showSizeChanger ? /* @__PURE__ */ jsx6("div", {
-        className: paginationInputClass,
-        children: /* @__PURE__ */ jsx6("select", {
-          "aria-label": "Page size",
-          value: mergedPageSize,
-          disabled,
-          onChange: handlePageSizeChange,
-          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs5("option", {
-            value: option,
-            children: [
-              option,
-              " / page"
-            ]
-          }, option))
-        })
-      }) : null,
-      showQuickJumper && !simple ? /* @__PURE__ */ jsx6("div", {
-        className: paginationInputClass,
-        children: /* @__PURE__ */ jsx6("input", {
-          "aria-label": "Jump to page",
-          type: "number",
-          min: 1,
-          max: pageCount,
-          value: quickJumpValue,
-          disabled,
-          onChange: (event) => setQuickJumpValue(event.currentTarget.value),
-          onKeyDown: handleQuickJumpKeyDown
-        })
+      /* @__PURE__ */ jsx6("span", {
+        className: datePickerSeparatorClass,
+        children: separator
+      }),
+      /* @__PURE__ */ jsx6("input", {
+        ...inputProps,
+        id: inputProps?.id ? `${inputProps.id}-end` : undefined,
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue?.[1] ?? "",
+        placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
+        onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
+      }),
+      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx6("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date range",
+        onClick: () => emitChange([undefined, undefined]),
+        children: "x"
       }) : null
     ]
   });
 });
-Pagination.displayName = "Pagination";
-// src/components/dm-pagination/DmPagination.tsx
+RangePicker.displayName = "DatePicker.RangePicker";
+function withPicker(picker, displayName) {
+  const Picker = forwardRef4((props, ref) => /* @__PURE__ */ jsx6(DatePickerRoot, {
+    ...props,
+    ref,
+    picker
+  }));
+  Picker.displayName = displayName;
+  return Picker;
+}
+var DatePicker = Object.assign(DatePickerRoot, {
+  RangePicker,
+  WeekPicker: withPicker("week", "DatePicker.WeekPicker"),
+  MonthPicker: withPicker("month", "DatePicker.MonthPicker"),
+  QuarterPicker: withPicker("quarter", "DatePicker.QuarterPicker"),
+  YearPicker: withPicker("year", "DatePicker.YearPicker")
+});
+// src/components/input/Input.tsx
 import {
-  forwardRef as forwardRef4,
-  useEffect,
-  useMemo as useMemo4,
-  useRef,
-  useState as useState4
+  forwardRef as forwardRef5,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef3,
+  useState as useState6
 } from "react";
 
-// src/classes/dm-pagination.ts
-var dmPaginationBaseClass = "dm-pagination";
-var dmPaginationHiddenClass = "dm-pagination-hidden";
-var dmPaginationPagerClass = "dm-pagination-pager";
-var dmPaginationRefreshClass = "dm-pagination-refresh";
-var dmPaginationRefreshLoadingClass = "dm-pagination-refresh-loading";
-var dmPaginationSelectedClass = "dm-pagination-selected";
-var dmPaginationAlignClasses = {
-  left: "dm-pagination-left",
-  center: "dm-pagination-center",
-  right: "dm-pagination-right"
-};
-function getDmPaginationClasses({
-  align = "right",
-  hidden,
-  className
-}) {
-  return cn(dmPaginationBaseClass, dmPaginationAlignClasses[align], hidden && dmPaginationHiddenClass, className);
-}
-function getDmPaginationRefreshClasses({
-  loading,
-  className
-}) {
-  return cn(dmPaginationRefreshClass, loading && dmPaginationRefreshLoadingClass, className);
-}
-
-// src/components/dm-pagination/DmPagination.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var defaultLocale = {
-  refresh: "Refresh",
-  showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
-  showTotalSimple: (total, range) => `${range[0]}-${range[1]} / ${total}`,
-  selected: (selectedTotal) => `, ${selectedTotal} selected`
-};
-function getResponsiveSimple({
-  width,
-  total,
-  showRefresh,
-  showSizeChanger
-}) {
-  let reservedWidth = 0;
-  if (!showRefresh)
-    reservedWidth += 100;
-  if (!showSizeChanger)
-    reservedWidth += 100;
-  if (width < 900 - reservedWidth)
-    return total >= 100;
-  if (width < 1100 - reservedWidth)
-    return total >= 1000;
-  if (width < 1220 - reservedWidth)
-    return total >= 99999;
-  if (width < 1300 - reservedWidth)
-    return total >= 999999;
-  if (width < 1450 - reservedWidth)
-    return total >= 9999999;
-  return false;
-}
-function useElementWidth() {
-  const ref = useRef(null);
-  const [width, setWidth] = useState4(1000);
-  useEffect(() => {
-    const element = ref.current;
-    if (!element || typeof ResizeObserver === "undefined")
-      return;
-    const observer = new ResizeObserver(([entry]) => {
-      setWidth(entry?.contentRect.width || element.getBoundingClientRect().width);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, []);
-  return [ref, width];
-}
-function renderSelected(selectedTotal, locale) {
-  if (!selectedTotal)
-    return null;
-  return /* @__PURE__ */ jsx7("span", {
-    className: dmPaginationSelectedClass,
-    children: locale.selected(selectedTotal)
-  });
-}
-var DmPagination = forwardRef4(({
-  selectedTotal = 0,
-  loading = false,
-  total = 0,
-  showRefresh = true,
-  showPagination = true,
-  wrapperStyle,
-  className,
-  align = "right",
-  showTotalFullMessage = false,
-  showSizeChanger = true,
-  responsiveSimple = true,
-  refresh,
-  simple,
-  showQuickJumper,
-  showTotal,
-  locale,
-  ...props
-}, ref) => {
-  const [measureRef, width] = useElementWidth();
-  const mergedLocale = useMemo4(() => ({ ...defaultLocale, ...locale }), [locale]);
-  const isRefreshVisible = showRefresh && Boolean(refresh);
-  const shouldRender = showPagination || isRefreshVisible;
-  const responsiveSimpleMode = responsiveSimple ? getResponsiveSimple({
-    width,
-    total,
-    showRefresh,
-    showSizeChanger
-  }) : false;
-  const mergedSimple = simple ?? responsiveSimpleMode;
-  const mergedShowQuickJumper = showQuickJumper ?? !mergedSimple;
-  const totalRenderer = useMemo4(() => {
-    if (showTotal)
-      return showTotal;
-    return (nextTotal, range) => {
-      if (Number(nextTotal) === 0)
-        return "";
-      const selected = renderSelected(selectedTotal, mergedLocale);
-      const message = mergedSimple && !showTotalFullMessage ? mergedLocale.showTotalSimple(nextTotal, range, selectedTotal) : mergedLocale.showTotal(nextTotal, range, selectedTotal);
-      return /* @__PURE__ */ jsxs6("span", {
-        title: `${mergedLocale.showTotal(nextTotal, range, selectedTotal)}${selectedTotal ? mergedLocale.selected(selectedTotal) : ""}`,
-        children: [
-          message,
-          selected
-        ]
-      });
-    };
-  }, [
-    mergedLocale,
-    mergedSimple,
-    selectedTotal,
-    showTotal,
-    showTotalFullMessage
-  ]);
-  if (!shouldRender)
-    return null;
-  return /* @__PURE__ */ jsxs6("div", {
-    ref: (element) => {
-      measureRef.current = element;
-      if (typeof ref === "function") {
-        ref(element);
-      } else if (ref) {
-        ref.current = element;
-      }
-    },
-    className: getDmPaginationClasses({ align, className }),
-    style: wrapperStyle,
-    children: [
-      showPagination ? /* @__PURE__ */ jsx7("div", {
-        className: dmPaginationPagerClass,
-        children: /* @__PURE__ */ jsx7(Pagination, {
-          ...props,
-          total,
-          simple: mergedSimple,
-          showQuickJumper: mergedShowQuickJumper,
-          showSizeChanger,
-          showTotal: totalRenderer
-        })
-      }) : null,
-      isRefreshVisible ? /* @__PURE__ */ jsxs6("button", {
-        type: "button",
-        className: getDmPaginationRefreshClasses({ loading }),
-        disabled: loading || props.disabled,
-        "aria-busy": loading || undefined,
-        onClick: refresh,
-        children: [
-          /* @__PURE__ */ jsx7("span", {
-            "aria-hidden": "true",
-            children: "Reload"
-          }),
-          /* @__PURE__ */ jsx7("span", {
-            children: mergedLocale.refresh
-          })
-        ]
-      }) : null
-    ]
-  });
-});
-DmPagination.displayName = "DmPagination";
-// src/components/input/Input.tsx
-import {
-  forwardRef as forwardRef5,
-  useImperativeHandle,
-  useRef as useRef2,
-  useState as useState5
-} from "react";
-
-// src/classes/input.ts
-var inputBaseClass = "input";
-var inputWrapperClass = "input-wrapper";
-var inputAffixWrapperClass = "input-affix-wrapper";
-var inputPrefixClass = "input-prefix";
-var inputSuffixClass = "input-suffix";
-var inputClearClass = "input-clear";
-var inputSearchClass = "input-search";
-var inputSearchButtonClass = "input-search-button";
-var inputPasswordClass = "input-password";
-var inputPasswordToggleClass = "input-password-toggle";
-var inputGroupClass = "input-group";
-var textAreaBaseClass = "textarea";
-var textAreaWrapperClass = "textarea-wrapper";
-var textAreaCountClass = "textarea-counter";
-var textAreaCountExceededClass = "textarea-counter-exceeded";
-var textAreaAutoSizeClass = "textarea-auto-resize";
-var inputVariantClasses = {
-  filled: "input-filled",
-  outlined: "input-outlined"
+// src/classes/input.ts
+var inputBaseClass = "input";
+var inputWrapperClass = "input-wrapper";
+var inputAffixWrapperClass = "input-affix-wrapper";
+var inputPrefixClass = "input-prefix";
+var inputSuffixClass = "input-suffix";
+var inputClearClass = "input-clear";
+var inputSearchClass = "input-search";
+var inputSearchButtonClass = "input-search-button";
+var inputPasswordClass = "input-password";
+var inputPasswordToggleClass = "input-password-toggle";
+var inputGroupClass = "input-group";
+var textAreaBaseClass = "textarea";
+var textAreaWrapperClass = "textarea-wrapper";
+var textAreaCountClass = "textarea-counter";
+var textAreaCountExceededClass = "textarea-counter-exceeded";
+var textAreaAutoSizeClass = "textarea-auto-resize";
+var inputVariantClasses = {
+  filled: "input-filled",
+  outlined: "input-outlined"
 };
 var inputSizeClasses = {
   sm: "input-sm",
@@ -1380,7 +1771,7 @@ function getTextAreaCountClasses({ exceeded }) {
 }
 
 // src/components/input/Input.tsx
-import { jsx as jsx8, jsxs as jsxs7 } 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(",");
@@ -1402,12 +1793,12 @@ var InputRoot = forwardRef5(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const inputRef = useRef2(null);
-  const [internalValue, setInternalValue] = useState5(() => 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);
@@ -1430,7 +1821,7 @@ var InputRoot = forwardRef5(({
     });
     input.focus();
   }
-  const control = /* @__PURE__ */ jsx8("input", {
+  const control = /* @__PURE__ */ jsx7("input", {
     ...props,
     ref: inputRef,
     type,
@@ -1443,22 +1834,22 @@ var InputRoot = forwardRef5(({
     return control;
   }
   const showClear = allowClear && !disabled && currentValue.length > 0;
-  return /* @__PURE__ */ jsxs7("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: getInputWrapperClasses({ affixed: hasAffix }),
     children: [
-      prefix != null ? /* @__PURE__ */ jsx8("span", {
+      prefix != null ? /* @__PURE__ */ jsx7("span", {
         className: inputPrefixClass,
         children: prefix
       }) : null,
       control,
-      showClear ? /* @__PURE__ */ jsx8("button", {
+      showClear ? /* @__PURE__ */ jsx7("button", {
         type: "button",
         className: inputClearClass,
         "aria-label": "Clear input",
         onClick: handleClear,
         children: "x"
       }) : null,
-      suffix != null ? /* @__PURE__ */ jsx8("span", {
+      suffix != null ? /* @__PURE__ */ jsx7("span", {
         className: inputSuffixClass,
         children: suffix
       }) : null
@@ -1475,8 +1866,8 @@ var Search = forwardRef5(({
   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);
   }
@@ -1487,16 +1878,16 @@ var Search = forwardRef5(({
     }
   }
   const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
-  return /* @__PURE__ */ jsxs7("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: getSearchWrapperClasses({ className }),
     children: [
-      /* @__PURE__ */ jsx8(InputRoot, {
+      /* @__PURE__ */ jsx7(InputRoot, {
         ...props,
         ref: inputRef,
         disabled,
         onKeyDown: handleKeyDown
       }),
-      enterButton || loading ? /* @__PURE__ */ jsx8("button", {
+      enterButton || loading ? /* @__PURE__ */ jsx7("button", {
         type: "button",
         className: inputSearchButtonClass,
         disabled: disabled || loading,
@@ -1509,9 +1900,9 @@ var Search = forwardRef5(({
 });
 Search.displayName = "Input.Search";
 var Password = forwardRef5(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
-  const [visible, setVisible] = useState5(false);
+  const [visible, setVisible] = useState6(false);
   const type = visible ? "text" : "password";
-  const toggle = visibilityToggle ? /* @__PURE__ */ jsx8("button", {
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx7("button", {
     type: "button",
     className: inputPasswordToggleClass,
     disabled,
@@ -1521,9 +1912,9 @@ var Password = forwardRef5(({ className, disabled, visibilityToggle = true, ...p
     },
     children: visible ? "Hide" : "Show"
   }) : undefined;
-  return /* @__PURE__ */ jsx8("span", {
+  return /* @__PURE__ */ jsx7("span", {
     className: getPasswordWrapperClasses({ className }),
-    children: /* @__PURE__ */ jsx8(InputRoot, {
+    children: /* @__PURE__ */ jsx7(InputRoot, {
       ...props,
       ref,
       disabled,
@@ -1547,7 +1938,7 @@ var TextArea = forwardRef5(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const [internalValue, setInternalValue] = useState5(() => toTextValue(defaultValue));
+  const [internalValue, setInternalValue] = useState6(() => toTextValue(defaultValue));
   const isControlled = value !== undefined;
   const currentValue = isControlled ? toTextValue(value) : internalValue;
   const count = currentValue.length;
@@ -1558,7 +1949,7 @@ var TextArea = forwardRef5(({
     }
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ jsx8("textarea", {
+  const control = /* @__PURE__ */ jsx7("textarea", {
     ...props,
     ref,
     className: getTextAreaClasses({
@@ -1576,11 +1967,11 @@ var TextArea = forwardRef5(({
   if (!showCount) {
     return control;
   }
-  return /* @__PURE__ */ jsxs7("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: textAreaWrapperClass,
     children: [
       control,
-      /* @__PURE__ */ jsxs7("span", {
+      /* @__PURE__ */ jsxs6("span", {
         className: getTextAreaCountClasses({ exceeded }),
         children: [
           count,
@@ -1591,7 +1982,7 @@ var TextArea = forwardRef5(({
   });
 });
 TextArea.displayName = "Input.TextArea";
-var Group = forwardRef5(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
+var Group = forwardRef5(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
   ...props,
   ref,
   className: cn(inputGroupClass, className),
@@ -1605,7 +1996,7 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useState as useState6 } from "react";
+import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -1661,7 +2052,7 @@ function getSelectOptionClasses({
 }
 
 // src/components/select/Select.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function isGroup(option) {
   return "options" in option;
 }
@@ -1737,13 +2128,13 @@ function filterOptions(options, searchValue, filterOption) {
 function renderValue(option) {
   return option ? optionLabel(option) : null;
 }
-var Option = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx9("div", {
+var Option = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
   ...props,
   ref,
   children
 }));
 Option.displayName = "Select.Option";
-var OptGroup = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx9("div", {
+var OptGroup = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
   ...props,
   ref,
   children
@@ -1770,9 +2161,9 @@ var SelectRoot = forwardRef6(({
   const multiple = mode === "multiple" || mode === "tags";
   const sourceOptions = useMemo5(() => options ?? optionsFromChildren(children), [children, options]);
   const flatOptions = useMemo5(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState6(false);
-  const [searchValue, setSearchValue] = useState6("");
-  const [internalValue, setInternalValue] = useState6(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  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)];
@@ -1829,7 +2220,7 @@ var SelectRoot = forwardRef6(({
   }
   function renderOption(option) {
     const selected = selectedKeys.has(valueKey(option.value));
-    return /* @__PURE__ */ jsx9("button", {
+    return /* @__PURE__ */ jsx8("button", {
       type: "button",
       role: "option",
       "aria-selected": selected,
@@ -1848,11 +2239,11 @@ var SelectRoot = forwardRef6(({
       if (!isGroup(option)) {
         return renderOption(option);
       }
-      return /* @__PURE__ */ jsxs8("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: cn(selectGroupClass, option.className),
         role: "group",
         children: [
-          /* @__PURE__ */ jsx9("div", {
+          /* @__PURE__ */ jsx8("div", {
             className: selectGroupLabelClass,
             children: option.label
           }),
@@ -1861,11 +2252,11 @@ var SelectRoot = forwardRef6(({
       }, `group-${index}`);
     });
   }
-  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx9("span", {
+  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx8("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     ...props,
     ref,
     className: getSelectContainerClasses({
@@ -1876,7 +2267,7 @@ var SelectRoot = forwardRef6(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsxs8("button", {
+      /* @__PURE__ */ jsxs7("button", {
         type: "button",
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
@@ -1884,33 +2275,33 @@ var SelectRoot = forwardRef6(({
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
         children: [
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx8("span", {
             className: selectSelectionClass,
-            children: hasValue ? selection : /* @__PURE__ */ jsx9("span", {
+            children: hasValue ? selection : /* @__PURE__ */ jsx8("span", {
               className: selectPlaceholderClass,
               children: placeholder
             })
           }),
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx8("span", {
             className: selectIconClass,
             "aria-hidden": "true",
             children: "v"
           })
         ]
       }),
-      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx9("button", {
+      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx8("button", {
         type: "button",
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
         children: "x"
       }) : null,
-      open ? /* @__PURE__ */ jsxs8("div", {
+      open ? /* @__PURE__ */ jsxs7("div", {
         className: selectDropdownClass,
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
         children: [
-          searchable ? /* @__PURE__ */ jsx9("input", {
+          searchable ? /* @__PURE__ */ jsx8("input", {
             className: selectSearchClass,
             value: searchValue,
             placeholder: typeof placeholder === "string" ? placeholder : undefined,
@@ -1922,7 +2313,7 @@ var SelectRoot = forwardRef6(({
               }
             }
           }) : null,
-          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx9("div", {
+          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx8("div", {
             className: selectEmptyClass,
             children: "No data"
           })
@@ -1936,32 +2327,7 @@ var Select = SelectRoot;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 // src/components/dm-search/DmSearch.tsx
-import {
-  forwardRef as forwardRef7,
-  useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo6,
-  useState as useState7
-} from "react";
-
-// src/classes/dm-search.ts
-var dmSearchBaseClass = "dm-search";
-var dmSearchCompactClass = "dm-search-compact";
-var dmSearchCollapsedClass = "dm-search-collapsed";
-var dmSearchFieldsClass = "dm-search-fields";
-var dmSearchFieldClass = "dm-search-field";
-var dmSearchActionsClass = "dm-search-actions";
-var dmSearchFastFilterClass = "dm-search-fast-filter";
-function getDmSearchClasses({
-  compact,
-  collapsed,
-  className
-}) {
-  return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
-}
-
-// src/components/dm-search/DmSearch.tsx
-import { jsx as jsx10, jsxs as jsxs9 } 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;
@@ -1985,7 +2351,7 @@ function renderField({
     return item.search.render?.(value, setValue, item) ?? null;
   }
   if (item.search.type === "select") {
-    return /* @__PURE__ */ jsx10(Select, {
+    return /* @__PURE__ */ jsx9(Select, {
       ...extraProps,
       disabled: Boolean(loading || extraProps.disabled),
       value,
@@ -1994,25 +2360,25 @@ function renderField({
     });
   }
   if (item.search.type === "dateRange") {
-    return /* @__PURE__ */ jsx10(DatePicker.RangePicker, {
+    return /* @__PURE__ */ jsx9(DatePicker.RangePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "date") {
-    return /* @__PURE__ */ jsx10(DatePicker, {
+    return /* @__PURE__ */ jsx9(DatePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "radio" || item.search.type === "checkbox") {
-    return /* @__PURE__ */ jsx10("div", {
+    return /* @__PURE__ */ jsx9("div", {
       role: item.search.type === "radio" ? "radiogroup" : "group",
-      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs9("label", {
+      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs8("label", {
         children: [
-          /* @__PURE__ */ jsx10("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,
@@ -2030,7 +2396,7 @@ function renderField({
       }, String(option.value)))
     });
   }
-  return /* @__PURE__ */ jsx10(Input, {
+  return /* @__PURE__ */ jsx9(Input, {
     ...extraProps,
     type: item.search.type === "input-number" ? "number" : "text",
     disabled: Boolean(loading || extraProps.disabled),
@@ -2046,6 +2412,9 @@ function renderField({
 }
 var DmSearch = forwardRef7(({
   items = [],
+  values: controlledValues,
+  onValuesChange,
+  onReset,
   onSearch,
   extra,
   fastFilterItem,
@@ -2054,27 +2423,37 @@ var DmSearch = forwardRef7(({
   compact = false,
   searchParams,
   loading = false,
+  noValidate,
   enableDefaultPlaceHolder = false,
   className
 }, ref) => {
   const allItems = useMemo6(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
-  const [collapsed, setCollapsed] = useState7(defaultCollapsed);
-  const [values, setValues] = useState7(() => initialValues(allItems, searchParams));
+  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__ */ jsxs9("form", {
+  return /* @__PURE__ */ jsxs8("form", {
+    noValidate,
     id: "searchForm",
     className: getDmSearchClasses({ compact, collapsed, className }),
     onSubmit: (event) => {
@@ -2082,53 +2461,63 @@ var DmSearch = forwardRef7(({
       onSearch?.(values);
     },
     children: [
-      fastFilterItem ? /* @__PURE__ */ jsx10("div", {
+      fastFilterItem ? /* @__PURE__ */ jsx9("div", {
         className: dmSearchFastFilterClass,
         children: fastFilterItem.title
       }) : null,
-      /* @__PURE__ */ jsx10("div", {
+      /* @__PURE__ */ jsx9("div", {
         className: dmSearchFieldsClass,
-        children: visibleItems.map((item) => /* @__PURE__ */ jsxs9("label", {
-          className: dmSearchFieldClass,
-          children: [
-            compact ? null : /* @__PURE__ */ jsx10("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__ */ jsxs9("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: dmSearchActionsClass,
         children: [
-          /* @__PURE__ */ jsx10(Button, {
+          /* @__PURE__ */ jsx9(Button, {
             type: "submit",
             isLoading: loading,
             children: "Search"
           }),
-          /* @__PURE__ */ jsx10(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__ */ jsx10(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,
@@ -2143,7 +2532,7 @@ DmSearch.displayName = "DmSearch";
 import React9, {
   forwardRef as forwardRef8,
   useMemo as useMemo7,
-  useState as useState8
+  useState as useState9
 } from "react";
 
 // src/classes/table.ts
@@ -2193,7 +2582,7 @@ function getTableSorterClasses(active) {
 }
 
 // src/components/table/Table.tsx
-import { jsx as jsx11, jsxs as jsxs10 } 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];
@@ -2226,8 +2615,8 @@ function getRecordKey(record, index, rowKey) {
     return rowKey(record, index);
   }
   if (rowKey) {
-    const key2 = record[rowKey];
-    return typeof key2 === "string" || typeof key2 === "number" ? key2 : index;
+    const key = record[rowKey];
+    return typeof key === "string" || typeof key === "number" ? key : index;
   }
   const key = record.key;
   return typeof key === "string" || typeof key === "number" ? key : index;
@@ -2313,20 +2702,20 @@ var Column = forwardRef8(() => null);
 Column.displayName = "Table.Column";
 var ColumnGroup = forwardRef8(() => null);
 ColumnGroup.displayName = "Table.ColumnGroup";
-var SummaryRow = forwardRef8((props, ref) => /* @__PURE__ */ jsx11("tr", {
+var SummaryRow = forwardRef8((props, ref) => /* @__PURE__ */ jsx10("tr", {
   ...props,
   ref
 }));
 SummaryRow.displayName = "Table.Summary.Row";
 var SummaryCell = forwardRef8(({ index, ...props }, ref) => {
-  return /* @__PURE__ */ jsx11("td", {
+  return /* @__PURE__ */ jsx10("td", {
     ...props,
     ref
   });
 });
 SummaryCell.displayName = "Table.Summary.Cell";
 var Summary = Object.assign(forwardRef8(({ fixed, ...props }, ref) => {
-  return /* @__PURE__ */ jsx11("tfoot", {
+  return /* @__PURE__ */ jsx10("tfoot", {
     ...props,
     ref
   });
@@ -2366,9 +2755,9 @@ function renderSummary(summary, pageData, colSpan) {
   if (React9.isValidElement(node) && node.type === Summary) {
     return node;
   }
-  return /* @__PURE__ */ jsx11("tfoot", {
-    children: /* @__PURE__ */ jsx11("tr", {
-      children: /* @__PURE__ */ jsx11("td", {
+  return /* @__PURE__ */ jsx10("tfoot", {
+    children: /* @__PURE__ */ jsx10("tr", {
+      children: /* @__PURE__ */ jsx10("td", {
         className: tableCellClass,
         colSpan,
         children: node
@@ -2416,12 +2805,12 @@ function TableRoot({
   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] = useState8({});
-  const [filterStates, setFilterStates] = useState8({});
-  const [internalCurrent, setInternalCurrent] = useState8(1);
-  const [internalPageSize, setInternalPageSize] = useState8(defaultPageSize);
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState8(rowSelection?.defaultSelectedRowKeys ?? []);
-  const [internalExpandedKeys, setInternalExpandedKeys] = useState8(expandable?.defaultExpandedRowKeys ?? []);
+  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 = useMemo7(() => {
     return leaves.reduce((result, column) => {
@@ -2596,18 +2985,18 @@ function TableRoot({
       return null;
     }
     if (rowSelection.type === "radio" || rowSelection.hideSelectAll) {
-      return /* @__PURE__ */ jsx11("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__ */ jsx11("th", {
+    return /* @__PURE__ */ jsx10("th", {
       className: cn(tableHeaderCellClass, tableSelectionCellClass),
-      children: /* @__PURE__ */ jsxs10("label", {
+      children: /* @__PURE__ */ jsxs9("label", {
         children: [
-          /* @__PURE__ */ jsx11("input", {
+          /* @__PURE__ */ jsx10("input", {
             type: "checkbox",
             "aria-label": "Select all rows",
             checked: allSelected,
@@ -2618,399 +3007,825 @@ function TableRoot({
       })
     });
   }
-  function renderHeaderCell(cell, index) {
-    const { column } = cell;
-    const title = column.title ?? dataIndexKey(column.dataIndex) ?? index + 1;
-    const sortOrder = sortOrderFor(column, sortStates);
-    const headerProps = column.onHeaderCell?.(column) ?? {};
-    return /* @__PURE__ */ createElement("th", {
-      ...headerProps,
-      key: String(column.columnKey),
-      className: cn(tableHeaderCellClass, column.className, headerProps.className),
-      colSpan: cell.colSpan,
-      rowSpan: cell.rowSpan,
-      style: {
-        width: column.width,
-        textAlign: column.align,
-        ...headerProps.style
-      }
-    }, /* @__PURE__ */ jsx11("span", {
-      children: title
-    }), column.sorter ? /* @__PURE__ */ jsx11("button", {
+  function renderHeaderCell(cell, index) {
+    const { column } = cell;
+    const title = column.title ?? dataIndexKey(column.dataIndex) ?? index + 1;
+    const sortOrder = sortOrderFor(column, sortStates);
+    const headerProps = column.onHeaderCell?.(column) ?? {};
+    return /* @__PURE__ */ createElement("th", {
+      ...headerProps,
+      key: String(column.columnKey),
+      className: cn(tableHeaderCellClass, column.className, headerProps.className),
+      colSpan: cell.colSpan,
+      rowSpan: cell.rowSpan,
+      style: {
+        width: column.width,
+        textAlign: column.align,
+        ...headerProps.style
+      }
+    }, /* @__PURE__ */ jsx10("span", {
+      children: title
+    }), 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__ */ 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__ */ jsx10("option", {
+          value: "",
+          children: "All"
+        }) : null,
+        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx10("option", {
+          value: String(filter.value),
+          children: filter.text
+        }, String(filter.value)))
+      ]
+    }) : null);
+  }
+  function renderCell(record, recordIndex, column) {
+    const value = getValue(record, column.dataIndex);
+    const rendered = column.render ? column.render(value, record, recordIndex) : value;
+    const cellProps = column.onCell?.(record, recordIndex) ?? {};
+    return /* @__PURE__ */ createElement("td", {
+      ...cellProps,
+      key: String(column.columnKey),
+      className: cn(tableCellClass, column.className, cellProps.className),
+      style: { textAlign: column.align, ...cellProps.style }
+    }, hasNode(rendered) ? rendered : null);
+  }
+  function renderSelectionCell(record, index) {
+    if (!rowSelection) {
+      return null;
+    }
+    const key = getRecordKey(record, index, rowKey);
+    const checked = selectedKeySet.has(String(key));
+    const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {};
+    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__ */ jsx10("td", {
+      className: cn(tableCellClass, tableSelectionCellClass),
+      children: rowSelection.renderCell ? rowSelection.renderCell(checked, record, index, originNode) : originNode
+    });
+  }
+  function renderExpandCell(record, index) {
+    if (!expandable?.expandedRowRender) {
+      return null;
+    }
+    const key = getRecordKey(record, index, rowKey);
+    const expanded = expandedKeySet.has(String(key));
+    const expandableRow = expandable.rowExpandable?.(record) ?? true;
+    return /* @__PURE__ */ jsx10("td", {
+      className: cn(tableCellClass, tableExpandCellClass),
+      children: expandableRow ? /* @__PURE__ */ jsx10("button", {
+        type: "button",
+        className: tableExpandButtonClass,
+        "aria-label": `${expanded ? "Collapse" : "Expand"} row ${index + 1}`,
+        onClick: () => toggleExpand(record, index),
+        children: expanded ? "-" : "+"
+      }) : null
+    });
+  }
+  function renderRow(record, index) {
+    const key = getRecordKey(record, index, rowKey);
+    const expanded = expandedKeySet.has(String(key));
+    const selected = selectedKeySet.has(String(key));
+    const row = /* @__PURE__ */ jsxs9("tr", {
+      className: getTableRowClasses({ selected, expanded }),
+      onClick: () => {
+        if (expandable?.expandRowByClick) {
+          toggleExpand(record, index);
+        }
+      },
+      children: [
+        renderSelectionCell(record, index),
+        renderExpandCell(record, index),
+        leaves.map((column) => renderCell(record, index, column))
+      ]
+    }, String(key));
+    if (!expanded || !expandable?.expandedRowRender) {
+      return row;
+    }
+    return /* @__PURE__ */ jsxs9(React9.Fragment, {
+      children: [
+        row,
+        /* @__PURE__ */ jsx10("tr", {
+          className: "table-expanded-row",
+          children: /* @__PURE__ */ jsx10("td", {
+            className: tableCellClass,
+            colSpan: structuralColumnCount,
+            children: expandable.expandedRowRender(record, index, 0, expanded)
+          })
+        })
+      ]
+    }, String(key));
+  }
+  const tableNode = /* @__PURE__ */ jsxs9("table", {
+    className: getTableClasses({ bordered, size }),
+    style: { tableLayout },
+    children: [
+      /* @__PURE__ */ jsx10("thead", {
+        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs9("tr", {
+          children: [
+            rowIndex === 0 ? renderSelectionHeader() : null,
+            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx10("th", {
+              className: cn(tableHeaderCellClass, tableExpandCellClass),
+              children: expandable?.columnTitle
+            }) : null,
+            row.map(renderHeaderCell)
+          ]
+        }, rowIndex))
+      }),
+      /* @__PURE__ */ jsx10("tbody", {
+        children: bodyEmpty ? /* @__PURE__ */ jsx10("tr", {
+          children: /* @__PURE__ */ jsx10("td", {
+            className: tableEmptyClass,
+            colSpan: structuralColumnCount,
+            children: locale?.emptyText ?? "No data"
+          })
+        }) : pageData.map(renderRow)
+      }),
+      renderSummary(summary, pageData, structuralColumnCount)
+    ]
+  });
+  return /* @__PURE__ */ jsxs9("div", {
+    ...props,
+    ref,
+    className: getTableWrapperClasses({ loading: spinning, className }),
+    children: [
+      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx10("div", {
+        style: {
+          overflow: "auto",
+          maxHeight: scroll.y,
+          width: scroll.x === true ? "100%" : scroll.x
+        },
+        children: tableNode
+      }) : tableNode,
+      spinning ? /* @__PURE__ */ jsx10("div", {
+        className: tableLoadingIndicatorClass,
+        role: "status",
+        children: typeof loading === "object" && loading.indicator ? loading.indicator : "Loading"
+      }) : null,
+      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs9("nav", {
+        className: tablePaginationClass,
+        "aria-label": "Table pagination",
+        children: [
+          /* @__PURE__ */ jsx10("button", {
+            type: "button",
+            className: tablePaginationButtonClass,
+            disabled: paginationConfig.disabled || current <= 1,
+            onClick: () => changePage(current - 1),
+            children: "Previous"
+          }),
+          /* @__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__ */ jsx10("button", {
+            type: "button",
+            className: tablePaginationButtonClass,
+            disabled: paginationConfig.disabled || current >= pageCount,
+            onClick: () => changePage(current + 1),
+            children: "Next"
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+var TableWithRef = forwardRef8(TableRoot);
+var Table = Object.assign(TableWithRef, {
+  Column,
+  ColumnGroup,
+  Summary,
+  SELECTION_ALL: "SELECT_ALL",
+  SELECTION_INVERT: "SELECT_INVERT",
+  SELECTION_NONE: "SELECT_NONE",
+  SELECTION_COLUMN: "SELECTION_COLUMN",
+  EXPAND_COLUMN: "EXPAND_COLUMN"
+});
+Table.displayName = "Table";
+// src/components/dm-table/DmTable.tsx
+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);
+}
+function filterDmTableColumn(column) {
+  if (column.onlySearch || column.hideInTable)
+    return false;
+  if (Array.isArray(column.children)) {
+    const children = mapAndFilter(column.children, filterDmTableColumn);
+    return children.length > 0 ? { ...column, children } : null;
+  }
+  return column;
+}
+function filterSearchColumn(column) {
+  if (Array.isArray(column.children)) {
+    const children = mapAndFilter(column.children, filterSearchColumn);
+    return children.length > 0 ? { ...column, children } : null;
+  }
+  return column.search ? column : false;
+}
+function flattenSearchColumns(column) {
+  return Array.isArray(column.children) ? column.children.flatMap(flattenSearchColumns) : [column];
+}
+function searchItems(columns) {
+  return mapAndFilter(columns, filterSearchColumn).flatMap(flattenSearchColumns).map((column) => ({
+    key: String(column.key ?? column.dataIndex),
+    title: column.title,
+    dataIndex: String(column.dataIndex ?? column.key),
+    search: column.search || {
+      type: "input",
+      extraProps: {},
+      formProps: {}
+    }
+  }));
+}
+function DmTable({
+  name,
+  extra,
+  indicators,
+  pagination,
+  columns: inputColumns,
+  columnSettingVisible = true,
+  onColumnsChange,
+  columnState,
+  searchProps,
+  tableExtra,
+  className,
+  dataSource,
+  rowSelection,
+  ...props
+}) {
+  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")) : {};
+  const total = paginationObj?.total ?? dataSource?.length ?? 0;
+  const selectedTotal = rowSelection?.selectedRowKeys?.length ?? 0;
+  function resetColumns() {
+    setColumns(tableColumns);
+    onColumnsChange?.(tableColumns);
+    if (columnState?.persistenceKey) {
+      globalThis.localStorage?.removeItem(columnState.persistenceKey);
+    }
+  }
+  return /* @__PURE__ */ jsxs10("div", {
+    className: getDmTableClasses({ className }),
+    children: [
+      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx11(Card, {
+        className: dmTableSearchClass,
+        padding: "md",
+        children: /* @__PURE__ */ jsx11(DmSearch, {
+          ...searchProps,
+          items
+        })
+      }) : null,
+      indicators ? /* @__PURE__ */ jsx11("div", {
+        className: dmTableIndicatorsClass,
+        children: indicators
+      }) : null,
+      /* @__PURE__ */ jsxs10(Card, {
+        className: dmTableCardClass,
+        padding: "md",
+        children: [
+          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs10("div", {
+            className: dmTableHeaderClass,
+            children: [
+              /* @__PURE__ */ jsx11("div", {
+                className: dmTableTitleClass,
+                children: name
+              }),
+              /* @__PURE__ */ jsxs10("div", {
+                className: dmTableExtraClass,
+                children: [
+                  extra,
+                  columnSettingVisible ? /* @__PURE__ */ jsx11(Button, {
+                    type: "button",
+                    color: "secondary",
+                    appearance: "outline",
+                    className: dmTableColumnSettingClass,
+                    onClick: () => setColumnSettingsOpen((open) => !open),
+                    children: "Columns"
+                  }) : null
+                ]
+              })
+            ]
+          }) : null,
+          columnSettingsOpen ? /* @__PURE__ */ jsx11("div", {
+            role: "dialog",
+            "aria-label": "Column settings",
+            children: /* @__PURE__ */ jsx11(Button, {
+              type: "button",
+              onClick: resetColumns,
+              children: "Reset columns"
+            })
+          }) : null,
+          tableExtra ? /* @__PURE__ */ jsx11("div", {
+            className: dmTableTableExtraClass,
+            children: tableExtra
+          }) : null,
+          /* @__PURE__ */ jsx11(Table, {
+            ...props,
+            dataSource,
+            rowSelection,
+            size: props.size ?? "small",
+            scroll: props.scroll ?? { x: 680 },
+            columns,
+            pagination: pagination ? {
+              current: paginationObj?.current,
+              defaultCurrent: paginationObj?.defaultCurrent,
+              pageSize: paginationObj?.pageSize,
+              defaultPageSize: paginationObj?.defaultPageSize,
+              total,
+              onChange: paginationObj?.onChange
+            } : false
+          }),
+          pagination ? /* @__PURE__ */ jsx11(DmPagination, {
+            ...paginationProps,
+            className: dmTablePaginationClass,
+            total,
+            selectedTotal,
+            showSizeChanger: true
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+DmTable.displayName = "DmTable";
+// src/components/dm-toolbar/DmToolbar.tsx
+import { useMemo as useMemo9 } from "react";
+
+// src/classes/dm-toolbar.ts
+var dmToolbarBaseClass = "dm-toolbar";
+var dmToolbarItemClass = "dm-toolbar-item";
+var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
+var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
+var dmToolbarMoreClass = "dm-toolbar-more";
+function getDmToolbarClasses({ className }) {
+  return cn(dmToolbarBaseClass, className);
+}
+function getDmToolbarItemClasses({
+  primary,
+  className
+}) {
+  return cn(dmToolbarItemClass, primary ? dmToolbarPrimaryItemClass : dmToolbarSecondaryItemClass, className);
+}
+
+// src/components/dropdown/Dropdown.tsx
+import {
+  cloneElement,
+  forwardRef as forwardRef9,
+  isValidElement,
+  useEffect as useEffect4,
+  useId as useId2,
+  useRef as useRef4,
+  useState as useState11
+} from "react";
+
+// src/classes/dropdown.ts
+var dropdownWrapperClass = "dropdown";
+var dropdownBaseClass = "dropdown-content";
+var dropdownArrowClass = "dropdown-arrow";
+var dropdownMenuClass = "menu dropdown-menu";
+var dropdownButtonClass = "dropdown-button";
+var dropdownPlacementClasses = {
+  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({
+  className
+}) {
+  return cn(dropdownBaseClass, className);
+}
+
+// src/classes/menu.ts
+var menuBaseClass = "menu";
+var menuShowClass = "menu-show";
+var menuItemClass = "menu-item";
+var menuItemActiveClass = "menu-item-active";
+var menuItemDisabledClass = "menu-item-disabled";
+var menuItemIconClass = "menu-item-icon";
+var menuItemTrailingClass = "menu-item-trailing";
+var menuItemSubmenuClass = "menu-item-submenu";
+var menuDividerClass = "menu-divider";
+var menuLabelClass = "menu-label";
+var menuSubmenuClass = "menu-submenu";
+var menuCompactClass = "menu-compact";
+var menuWideClass = "menu-wide";
+var menuModeClasses = {
+  vertical: "menu-vertical",
+  horizontal: "menu-horizontal",
+  inline: "menu-inline"
+};
+var menuThemeClasses = {
+  light: "",
+  dark: "menu-dark menu-surface-container-highest"
+};
+var menuSizeClasses = {
+  sm: menuCompactClass,
+  md: "",
+  lg: menuWideClass
+};
+function getMenuClasses({
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  inlineCollapsed,
+  disabled,
+  className
+}) {
+  return cn(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+}
+function getMenuItemClasses({
+  active,
+  disabled,
+  danger,
+  submenu,
+  className
+}) {
+  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+}
+
+// src/components/dropdown/Dropdown.tsx
+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__ */ jsx12("li", {
+      className: menuDividerClass
+    }, String(item.key));
+  }
+  return /* @__PURE__ */ jsx12("li", {
+    children: /* @__PURE__ */ jsxs11("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__ */ jsxs10("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),
+      className: cn(menuItemClass, item.danger && "menu-item-danger", item.className),
+      disabled: item.disabled,
+      onClick: (event) => {
+        onClick?.({ key: String(item.key), item, domEvent: event });
+        close();
+      },
       children: [
-        column.filterMultiple === false ? /* @__PURE__ */ jsx11("option", {
-          value: "",
-          children: "All"
+        item.icon ? /* @__PURE__ */ jsx12("span", {
+          className: "menu-item-icon",
+          children: item.icon
         }) : null,
-        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx11("option", {
-          value: String(filter.value),
-          children: filter.text
-        }, String(filter.value)))
+        /* @__PURE__ */ jsx12("span", {
+          children: item.label
+        })
       ]
-    }) : null);
-  }
-  function renderCell(record, recordIndex, column) {
-    const value = getValue(record, column.dataIndex);
-    const rendered = column.render ? column.render(value, record, recordIndex) : value;
-    const cellProps = column.onCell?.(record, recordIndex) ?? {};
-    return /* @__PURE__ */ createElement("td", {
-      ...cellProps,
-      key: String(column.columnKey),
-      className: cn(tableCellClass, column.className, cellProps.className),
-      style: { textAlign: column.align, ...cellProps.style }
-    }, hasNode(rendered) ? rendered : null);
-  }
-  function renderSelectionCell(record, index) {
-    if (!rowSelection) {
-      return null;
-    }
-    const key = getRecordKey(record, index, rowKey);
-    const checked = selectedKeySet.has(String(key));
-    const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {};
-    const originNode = /* @__PURE__ */ jsx11("input", {
-      ...checkboxProps,
-      type: rowSelection.type === "radio" ? "radio" : "checkbox",
-      "aria-label": `Select row ${index + 1}`,
-      checked,
-      onChange: (event) => toggleRowSelection(record, index, event)
-    });
-    return /* @__PURE__ */ jsx11("td", {
-      className: cn(tableCellClass, tableSelectionCellClass),
-      children: rowSelection.renderCell ? rowSelection.renderCell(checked, record, index, originNode) : originNode
-    });
+    })
+  }, String(item.key));
+}
+var DropdownRoot = forwardRef9(({
+  arrow,
+  children,
+  className,
+  defaultOpen,
+  destroyPopupOnHide,
+  disabled,
+  dropdownRender,
+  menu,
+  onContextMenu,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onOpenChange,
+  open,
+  overlay,
+  placement = "bottomLeft",
+  trigger = ["hover"],
+  ...props
+}, ref) => {
+  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 (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);
   }
-  function renderExpandCell(record, index) {
-    if (!expandable?.expandedRowRender) {
-      return null;
-    }
-    const key = getRecordKey(record, index, rowKey);
-    const expanded = expandedKeySet.has(String(key));
-    const expandableRow = expandable.rowExpandable?.(record) ?? true;
-    return /* @__PURE__ */ jsx11("td", {
-      className: cn(tableCellClass, tableExpandCellClass),
-      children: expandableRow ? /* @__PURE__ */ jsx11("button", {
-        type: "button",
-        className: tableExpandButtonClass,
-        "aria-label": `${expanded ? "Collapse" : "Expand"} row ${index + 1}`,
-        onClick: () => toggleExpand(record, index),
-        children: expanded ? "-" : "+"
-      }) : null
-    });
+  function close() {
+    const popup = popupRef.current;
+    if (popup?.matches(":popover-open"))
+      popup.hidePopover();
+    else
+      setVisible(false);
   }
-  function renderRow(record, index) {
-    const key = getRecordKey(record, index, rowKey);
-    const expanded = expandedKeySet.has(String(key));
-    const selected = selectedKeySet.has(String(key));
-    const row = /* @__PURE__ */ jsxs10("tr", {
-      className: getTableRowClasses({ selected, expanded }),
-      onClick: () => {
-        if (expandable?.expandRowByClick) {
-          toggleExpand(record, index);
-        }
-      },
-      children: [
-        renderSelectionCell(record, index),
-        renderExpandCell(record, index),
-        leaves.map((column) => renderCell(record, index, column))
-      ]
-    }, String(key));
-    if (!expanded || !expandable?.expandedRowRender) {
-      return row;
+  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 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, {
+    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);
+      if (trigger.includes("hover"))
+        show();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      callHandler(children.props.onMouseLeave, event);
+      onMouseLeave?.(event);
+    },
+    onClick: (event) => {
+      callHandler(children.props.onClick, event);
+      onClick?.(event);
+      if (!childIsButton && clickTrigger && !event.defaultPrevented)
+        toggle();
+    },
+    onContextMenu: (event) => {
+      callHandler(children.props.onContextMenu, event);
+      if (trigger.includes("contextMenu")) {
+        event.preventDefault();
+        toggle();
+      }
+      onContextMenu?.(event);
     }
-    return /* @__PURE__ */ jsxs10(React9.Fragment, {
-      children: [
-        row,
-        /* @__PURE__ */ jsx11("tr", {
-          className: "table-expanded-row",
-          children: /* @__PURE__ */ jsx11("td", {
-            className: tableCellClass,
-            colSpan: structuralColumnCount,
-            children: expandable.expandedRowRender(record, index, 0, expanded)
-          })
-        })
-      ]
-    }, String(key));
-  }
-  const tableNode = /* @__PURE__ */ jsxs10("table", {
-    className: getTableClasses({ bordered, size }),
-    style: { tableLayout },
-    children: [
-      /* @__PURE__ */ jsx11("thead", {
-        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs10("tr", {
-          children: [
-            rowIndex === 0 ? renderSelectionHeader() : null,
-            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx11("th", {
-              className: cn(tableHeaderCellClass, tableExpandCellClass),
-              children: expandable?.columnTitle
-            }) : null,
-            row.map(renderHeaderCell)
-          ]
-        }, rowIndex))
-      }),
-      /* @__PURE__ */ jsx11("tbody", {
-        children: bodyEmpty ? /* @__PURE__ */ jsx11("tr", {
-          children: /* @__PURE__ */ jsx11("td", {
-            className: tableEmptyClass,
-            colSpan: structuralColumnCount,
-            children: locale?.emptyText ?? "No data"
-          })
-        }) : pageData.map(renderRow)
-      }),
-      renderSummary(summary, pageData, structuralColumnCount)
-    ]
+  }) : /* @__PURE__ */ jsx12("button", {
+    type: "button",
+    disabled,
+    popoverTarget: clickTrigger && !disabled ? popupId : undefined,
+    style: { anchorName },
+    "aria-controls": popupId,
+    "aria-expanded": nativeOpen,
+    onMouseEnter: (event) => {
+      if (trigger.includes("hover"))
+        show();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      onMouseLeave?.(event);
+    },
+    onClick,
+    onContextMenu: (event) => {
+      if (trigger.includes("contextMenu")) {
+        event.preventDefault();
+        toggle();
+      }
+      onContextMenu?.(event);
+    },
+    children
   });
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs11("span", {
     ...props,
     ref,
-    className: getTableWrapperClasses({ loading: spinning, className }),
+    className: cn(dropdownWrapperClass, dropdownPlacementClasses[placement]),
+    onMouseLeave: trigger.includes("hover") ? hide : undefined,
     children: [
-      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx11("div", {
-        style: {
-          overflow: "auto",
-          maxHeight: scroll.y,
-          width: scroll.x === true ? "100%" : scroll.x
+      triggerNode,
+      /* @__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: tableNode
-      }) : tableNode,
-      spinning ? /* @__PURE__ */ jsx11("div", {
-        className: tableLoadingIndicatorClass,
-        role: "status",
-        children: typeof loading === "object" && loading.indicator ? loading.indicator : "Loading"
-      }) : null,
-      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs10("nav", {
-        className: tablePaginationClass,
-        "aria-label": "Table pagination",
         children: [
-          /* @__PURE__ */ jsx11("button", {
-            type: "button",
-            className: tablePaginationButtonClass,
-            disabled: paginationConfig.disabled || current <= 1,
-            onClick: () => changePage(current - 1),
-            children: "Previous"
+          !destroyPopupOnHide || visible ? popup : null,
+          arrow ? /* @__PURE__ */ jsx12("span", {
+            className: dropdownArrowClass
+          }) : null
+        ]
+      })
+    ]
+  });
+});
+DropdownRoot.displayName = "Dropdown";
+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__ */ jsx12(Button, {
+      ...buttonStyle,
+      disabled,
+      isLoading,
+      leftIcon,
+      rightIcon,
+      confirm,
+      onClick,
+      children
+    }, "primary"),
+    /* @__PURE__ */ jsx12(Button, {
+      ...buttonStyle,
+      type: "button",
+      "aria-label": "Open dropdown",
+      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__ */ jsx11("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__ */ jsx12("circle", {
+            cx: "12",
+            cy: "12",
+            r: "1.75"
           }),
-          /* @__PURE__ */ jsx11("button", {
-            type: "button",
-            className: tablePaginationButtonClass,
-            disabled: paginationConfig.disabled || current >= pageCount,
-            onClick: () => changePage(current + 1),
-            children: "Next"
+          /* @__PURE__ */ jsx12("circle", {
+            cx: "19",
+            cy: "12",
+            r: "1.75"
           })
         ]
-      }) : null
+      })
+    }, "trigger")
+  ];
+  const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
+  return /* @__PURE__ */ jsxs11("span", {
+    ref,
+    className: cn(dropdownButtonClass, block && "dropdown-button-block"),
+    children: [
+      renderedButtons[0],
+      /* @__PURE__ */ jsx12(DropdownRoot, {
+        ...props,
+        menu,
+        trigger,
+        disabled: disabled || isLoading,
+        children: renderedButtons[1]
+      })
     ]
   });
-}
-var TableWithRef = forwardRef8(TableRoot);
-var Table = Object.assign(TableWithRef, {
-  Column,
-  ColumnGroup,
-  Summary,
-  SELECTION_ALL: "SELECT_ALL",
-  SELECTION_INVERT: "SELECT_INVERT",
-  SELECTION_NONE: "SELECT_NONE",
-  SELECTION_COLUMN: "SELECTION_COLUMN",
-  EXPAND_COLUMN: "EXPAND_COLUMN"
 });
-Table.displayName = "Table";
-// src/components/dm-table/DmTable.tsx
-import { useMemo as useMemo8, useState as useState9 } from "react";
-
-// src/classes/dm-table.ts
-var dmTableBaseClass = "dm-table";
-var dmTableSearchClass = "dm-table-search";
-var dmTableCardClass = "dm-table-card";
-var dmTableHeaderClass = "dm-table-header";
-var dmTableTitleClass = "dm-table-title";
-var dmTableExtraClass = "dm-table-extra";
-var dmTableIndicatorsClass = "dm-table-indicators";
-var dmTableTableExtraClass = "dm-table-table-extra";
-var dmTableColumnSettingClass = "dm-table-column-setting";
-var dmTablePaginationClass = "dm-table-pagination";
-function getDmTableClasses({ className }) {
-  return cn(dmTableBaseClass, className);
-}
-
-// src/components/dm-table/DmTable.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function mapAndFilter(list, mapper) {
-  return list.map(mapper).filter((item) => item !== false && item != null);
-}
-function filterDmTableColumn(column) {
-  if (column.onlySearch || column.hideInTable)
-    return false;
-  if (Array.isArray(column.children)) {
-    const children = mapAndFilter(column.children, filterDmTableColumn);
-    return children.length > 0 ? { ...column, children } : null;
-  }
-  return column;
-}
-function filterSearchColumn(column) {
-  if (Array.isArray(column.children)) {
-    const children = mapAndFilter(column.children, filterSearchColumn);
-    return children.length > 0 ? { ...column, children } : null;
-  }
-  return column.search ? column : false;
+DropdownButton.displayName = "Dropdown.Button";
+var Dropdown = Object.assign(DropdownRoot, {
+  Button: DropdownButton
+});
+// src/components/dm-toolbar/DmToolbar.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function isPrimary(item) {
+  return item.type === "primary";
 }
-function flattenSearchColumns(column) {
-  return Array.isArray(column.children) ? column.children.flatMap(flattenSearchColumns) : [column];
+function renderToolbarItem(item, index) {
+  const {
+    title,
+    menu,
+    type,
+    htmlType = "button",
+    color,
+    appearance,
+    ...buttonPropsWithKey
+  } = item;
+  const buttonProps = { ...buttonPropsWithKey };
+  delete buttonProps.key;
+  const button = /* @__PURE__ */ jsx13(Button, {
+    ...buttonProps,
+    type: htmlType,
+    color: color ?? (type === "primary" ? "primary" : "secondary"),
+    appearance: appearance ?? (type === "primary" ? "filled" : "outline"),
+    children: title
+  });
+  if (!menu?.items?.length)
+    return button;
+  return /* @__PURE__ */ jsx13(Dropdown, {
+    trigger: ["click"],
+    menu,
+    children: button
+  }, `dropdown-${index}`);
 }
-function searchItems(columns) {
-  return mapAndFilter(columns, filterSearchColumn).flatMap(flattenSearchColumns).map((column) => ({
-    key: String(column.key ?? column.dataIndex),
-    title: column.title,
-    dataIndex: String(column.dataIndex ?? column.key),
-    search: column.search || {
-      type: "input",
-      extraProps: {},
-      formProps: {}
+function toOverflowMenu(items) {
+  return {
+    items: items.map((item, index) => ({
+      key: item.key ?? index,
+      label: item.title,
+      disabled: item.disabled
+    })),
+    onClick: ({ key, domEvent }) => {
+      const target = items.find((item, index) => String(item.key ?? index) === key);
+      target?.onClick?.(domEvent);
     }
-  }));
+  };
 }
-function DmTable({
-  name,
-  extra,
-  indicators,
-  pagination,
-  columns: inputColumns,
-  columnSettingVisible = true,
-  onColumnsChange,
-  columnState,
-  searchProps,
-  tableExtra,
+function DmToolbar({
+  items = [],
   className,
-  dataSource,
-  rowSelection,
-  ...props
+  style,
+  moreText = "More",
+  maxVisibleSecondaryItems
 }) {
-  const tableColumns = useMemo8(() => mapAndFilter(inputColumns, filterDmTableColumn), [inputColumns]);
-  const [columns, setColumns] = useState9(tableColumns);
-  const [columnSettingsOpen, setColumnSettingsOpen] = useState9(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")) : {};
-  const total = paginationObj?.total ?? dataSource?.length ?? 0;
-  const selectedTotal = rowSelection?.selectedRowKeys?.length ?? 0;
-  function resetColumns() {
-    setColumns(tableColumns);
-    onColumnsChange?.(tableColumns);
-    if (columnState?.persistenceKey) {
-      globalThis.localStorage?.removeItem(columnState.persistenceKey);
-    }
-  }
-  return /* @__PURE__ */ jsxs11("div", {
-    className: getDmTableClasses({ className }),
+  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);
+    const visibleSecondaryItems = visibleLimit === 0 ? [] : secondaryItems.slice(-visibleLimit);
+    const overflowSecondaryItems = visibleLimit >= secondaryItems.length ? [] : secondaryItems.slice(0, secondaryItems.length - visibleLimit);
+    return { visibleSecondaryItems, overflowSecondaryItems, primaryItems };
+  }, [items, maxVisibleSecondaryItems]);
+  const showMore = overflowSecondaryItems.length > 0;
+  return /* @__PURE__ */ jsxs12("div", {
+    className: getDmToolbarClasses({ className }),
+    style,
     children: [
-      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx12(Card, {
-        className: dmTableSearchClass,
-        padding: "md",
-        children: /* @__PURE__ */ jsx12(DmSearch, {
-          ...searchProps,
-          items
+      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx13("span", {
+        className: getDmToolbarItemClasses({}),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `secondary-${index}`)),
+      showMore ? /* @__PURE__ */ jsx13(Dropdown, {
+        trigger: ["click"],
+        menu: toOverflowMenu(overflowSecondaryItems),
+        children: /* @__PURE__ */ jsx13(Button, {
+          type: "button",
+          className: dmToolbarMoreClass,
+          color: "secondary",
+          appearance: "outline",
+          children: moreText
         })
       }) : null,
-      indicators ? /* @__PURE__ */ jsx12("div", {
-        className: dmTableIndicatorsClass,
-        children: indicators
-      }) : null,
-      /* @__PURE__ */ jsxs11(Card, {
-        className: dmTableCardClass,
-        padding: "md",
-        children: [
-          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs11("div", {
-            className: dmTableHeaderClass,
-            children: [
-              /* @__PURE__ */ jsx12("div", {
-                className: dmTableTitleClass,
-                children: name
-              }),
-              /* @__PURE__ */ jsxs11("div", {
-                className: dmTableExtraClass,
-                children: [
-                  extra,
-                  columnSettingVisible ? /* @__PURE__ */ jsx12(Button, {
-                    type: "button",
-                    color: "secondary",
-                    appearance: "outline",
-                    className: dmTableColumnSettingClass,
-                    onClick: () => setColumnSettingsOpen((open) => !open),
-                    children: "Columns"
-                  }) : null
-                ]
-              })
-            ]
-          }) : null,
-          columnSettingsOpen ? /* @__PURE__ */ jsx12("div", {
-            role: "dialog",
-            "aria-label": "Column settings",
-            children: /* @__PURE__ */ jsx12(Button, {
-              type: "button",
-              onClick: resetColumns,
-              children: "Reset columns"
-            })
-          }) : null,
-          tableExtra ? /* @__PURE__ */ jsx12("div", {
-            className: dmTableTableExtraClass,
-            children: tableExtra
-          }) : null,
-          /* @__PURE__ */ jsx12(Table, {
-            ...props,
-            dataSource,
-            rowSelection,
-            size: props.size ?? "small",
-            scroll: props.scroll ?? { x: 680 },
-            columns,
-            pagination: pagination ? {
-              current: paginationObj?.current,
-              defaultCurrent: paginationObj?.defaultCurrent,
-              pageSize: paginationObj?.pageSize,
-              defaultPageSize: paginationObj?.defaultPageSize,
-              total,
-              onChange: paginationObj?.onChange
-            } : false
-          }),
-          pagination ? /* @__PURE__ */ jsx12(DmPagination, {
-            ...paginationProps,
-            className: dmTablePaginationClass,
-            total,
-            selectedTotal,
-            showSizeChanger: true
-          }) : null
-        ]
-      })
+      primaryItems.map((item, index) => /* @__PURE__ */ jsx13("span", {
+        className: getDmToolbarItemClasses({ primary: true }),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `primary-${index}`))
     ]
   });
 }
-DmTable.displayName = "DmTable";
-// src/classes/dm-pro-table.ts
-var dmProTableBaseClass = "dm-pro-table";
-var dmProTableHeaderClass = "dm-pro-table-header";
-var dmProTableTitleClass = "dm-pro-table-title";
-var dmProTableToolbarClass = "dm-pro-table-toolbar";
-var dmProTableColumnSettingClass = "dm-pro-table-column-setting";
-function getDmProTableClasses({ className }) {
-  return cn(dmProTableBaseClass, className);
-}
-
+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