@duskmoon-dev/components 0.3.1 → 0.4.0

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

@@ -1,5 +1,8 @@
 "use client";
 
+// src/components/dm-table/DmTable.tsx
+import { useMemo as useMemo8, useState as useState10 } from "react";
+
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -25,6 +28,25 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// 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/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -48,7 +70,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -68,11 +90,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 +111,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,29 +269,104 @@ 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)
     ]
   });
 }
@@ -166,359 +413,106 @@ 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,
-  ...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);
-    }
-    onOpenChange?.(nextOpen);
-  }
-  function emitChange(nextValue) {
-    if (nextValue && disabledDate?.(nextValue)) {
-      return;
-    }
-    if (!isValueControlled) {
-      setInnerValue(nextValue);
-    }
-    onChange?.(nextValue, nextValue ?? "");
-  }
-  const presetItems = useMemo(() => presets ?? [], [presets]);
-  return /* @__PURE__ */ jsxs2("div", {
-    ...props,
-    ref,
-    className: getDatePickerClasses({
-      size,
-      status,
-      picker,
-      open: visible,
-      disabled,
-      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"
-      }) : null,
-      /* @__PURE__ */ jsx3("span", {
-        className: datePickerIconClass,
-        "aria-hidden": "true"
-      }),
-      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
-        className: getDatePickerDropdownClasses({ open: visible }),
-        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
-        ]
-      }) : 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", {
-        type: "button",
-        className: datePickerClearClass,
-        "aria-label": "Clear date range",
-        onClick: () => emitChange([undefined, undefined]),
-        children: "x"
-      }) : 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/pagination/Pagination.tsx
-import {
-  forwardRef as forwardRef2,
-  useMemo as useMemo2,
-  useState as useState2
-} 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 jsx4, jsxs as jsxs3 } 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 getPageTokens(current, pageCount) {
-  if (pageCount <= 7) {
-    return Array.from({ length: pageCount }, (_, index) => index + 1);
+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) {
@@ -545,7 +539,7 @@ function getPageTokens(current, pageCount) {
 function getSizeOptions(pageSize) {
   return Array.from(new Set([...defaultPageSizeOptions, pageSize])).sort((first, second) => first - second);
 }
-var Pagination = forwardRef2(({
+var Pagination = forwardRef(({
   current,
   defaultCurrent = 1,
   pageSize,
@@ -563,13 +557,13 @@ var Pagination = forwardRef2(({
 }, ref) => {
   const isCurrentControlled = current !== undefined;
   const isPageSizeControlled = pageSize !== undefined;
-  const [internalCurrent, setInternalCurrent] = useState2(defaultCurrent);
-  const [internalPageSize, setInternalPageSize] = useState2(defaultPageSize);
-  const [quickJumpValue, setQuickJumpValue] = useState2("");
+  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 = useMemo2(() => getPageTokens(mergedCurrent, pageCount), [mergedCurrent, 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);
@@ -603,19 +597,19 @@ var Pagination = forwardRef2(({
   }
   const previousDisabled = disabled || mergedCurrent <= 1;
   const nextDisabled = disabled || mergedCurrent >= pageCount;
-  return /* @__PURE__ */ jsxs3("nav", {
+  return /* @__PURE__ */ jsxs2("nav", {
     ...props,
     ref,
     className: getPaginationClasses({ size, compact: simple, className }),
     children: [
-      showTotal ? /* @__PURE__ */ jsx4("div", {
+      showTotal ? /* @__PURE__ */ jsx3("div", {
         className: paginationInfoClass,
-        children: /* @__PURE__ */ jsx4("span", {
+        children: /* @__PURE__ */ jsx3("span", {
           className: paginationInfoTextClass,
           children: showTotal(total, range)
         })
       }) : null,
-      /* @__PURE__ */ jsx4("button", {
+      /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: paginationPrevClass,
         disabled: previousDisabled,
@@ -623,10 +617,10 @@ var Pagination = forwardRef2(({
         onClick: () => changePage(mergedCurrent - 1),
         children: "Prev"
       }),
-      simple ? /* @__PURE__ */ jsxs3("div", {
+      simple ? /* @__PURE__ */ jsxs2("div", {
         className: paginationInputClass,
         children: [
-          /* @__PURE__ */ jsx4("input", {
+          /* @__PURE__ */ jsx3("input", {
             "aria-label": "Current page",
             type: "number",
             min: 1,
@@ -641,7 +635,7 @@ var Pagination = forwardRef2(({
               }
             }
           }),
-          /* @__PURE__ */ jsxs3("span", {
+          /* @__PURE__ */ jsxs2("span", {
             className: paginationInfoTextClass,
             children: [
               "/ ",
@@ -649,10 +643,10 @@ var Pagination = forwardRef2(({
             ]
           })
         ]
-      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx4("span", {
+      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx3("span", {
         "aria-hidden": "true",
         className: paginationEllipsisClass
-      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx4("button", {
+      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: getPaginationItemClasses({
           active: pageToken === mergedCurrent,
@@ -664,7 +658,7 @@ var Pagination = forwardRef2(({
         onClick: () => changePage(pageToken),
         children: pageToken
       }, pageToken)),
-      /* @__PURE__ */ jsx4("button", {
+      /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: paginationNextClass,
         disabled: nextDisabled,
@@ -672,14 +666,14 @@ var Pagination = forwardRef2(({
         onClick: () => changePage(mergedCurrent + 1),
         children: "Next"
       }),
-      showSizeChanger ? /* @__PURE__ */ jsx4("div", {
+      showSizeChanger ? /* @__PURE__ */ jsx3("div", {
         className: paginationInputClass,
-        children: /* @__PURE__ */ jsx4("select", {
+        children: /* @__PURE__ */ jsx3("select", {
           "aria-label": "Page size",
           value: mergedPageSize,
           disabled,
           onChange: handlePageSizeChange,
-          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs3("option", {
+          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs2("option", {
             value: option,
             children: [
               option,
@@ -688,9 +682,9 @@ var Pagination = forwardRef2(({
           }, option))
         })
       }) : null,
-      showQuickJumper && !simple ? /* @__PURE__ */ jsx4("div", {
+      showQuickJumper && !simple ? /* @__PURE__ */ jsx3("div", {
         className: paginationInputClass,
-        children: /* @__PURE__ */ jsx4("input", {
+        children: /* @__PURE__ */ jsx3("input", {
           "aria-label": "Jump to page",
           type: "number",
           min: 1,
@@ -706,42 +700,7 @@ var Pagination = forwardRef2(({
 });
 Pagination.displayName = "Pagination";
 // src/components/dm-pagination/DmPagination.tsx
-import {
-  forwardRef as forwardRef3,
-  useEffect,
-  useMemo as useMemo3,
-  useRef,
-  useState as useState3
-} 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 jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultLocale = {
   refresh: "Refresh",
   showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
@@ -773,7 +732,7 @@ function getResponsiveSimple({
 }
 function useElementWidth() {
   const ref = useRef(null);
-  const [width, setWidth] = useState3(1000);
+  const [width, setWidth] = useState2(1000);
   useEffect(() => {
     const element = ref.current;
     if (!element || typeof ResizeObserver === "undefined")
@@ -789,12 +748,12 @@ function useElementWidth() {
 function renderSelected(selectedTotal, locale) {
   if (!selectedTotal)
     return null;
-  return /* @__PURE__ */ jsx5("span", {
+  return /* @__PURE__ */ jsx4("span", {
     className: dmPaginationSelectedClass,
     children: locale.selected(selectedTotal)
   });
 }
-var DmPagination = forwardRef3(({
+var DmPagination = forwardRef2(({
   selectedTotal = 0,
   loading = false,
   total = 0,
@@ -814,7 +773,7 @@ var DmPagination = forwardRef3(({
   ...props
 }, ref) => {
   const [measureRef, width] = useElementWidth();
-  const mergedLocale = useMemo3(() => ({ ...defaultLocale, ...locale }), [locale]);
+  const mergedLocale = useMemo2(() => ({ ...defaultLocale, ...locale }), [locale]);
   const isRefreshVisible = showRefresh && Boolean(refresh);
   const shouldRender = showPagination || isRefreshVisible;
   const responsiveSimpleMode = responsiveSimple ? getResponsiveSimple({
@@ -825,7 +784,7 @@ var DmPagination = forwardRef3(({
   }) : false;
   const mergedSimple = simple ?? responsiveSimpleMode;
   const mergedShowQuickJumper = showQuickJumper ?? !mergedSimple;
-  const totalRenderer = useMemo3(() => {
+  const totalRenderer = useMemo2(() => {
     if (showTotal)
       return showTotal;
     return (nextTotal, range) => {
@@ -833,7 +792,7 @@ var DmPagination = forwardRef3(({
         return "";
       const selected = renderSelected(selectedTotal, mergedLocale);
       const message = mergedSimple && !showTotalFullMessage ? mergedLocale.showTotalSimple(nextTotal, range, selectedTotal) : mergedLocale.showTotal(nextTotal, range, selectedTotal);
-      return /* @__PURE__ */ jsxs4("span", {
+      return /* @__PURE__ */ jsxs3("span", {
         title: `${mergedLocale.showTotal(nextTotal, range, selectedTotal)}${selectedTotal ? mergedLocale.selected(selectedTotal) : ""}`,
         children: [
           message,
@@ -850,7 +809,7 @@ var DmPagination = forwardRef3(({
   ]);
   if (!shouldRender)
     return null;
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     ref: (element) => {
       measureRef.current = element;
       if (typeof ref === "function") {
@@ -862,43 +821,858 @@ var DmPagination = forwardRef3(({
     className: getDmPaginationClasses({ align, className }),
     style: wrapperStyle,
     children: [
-      showPagination ? /* @__PURE__ */ jsx5("div", {
-        className: dmPaginationPagerClass,
-        children: /* @__PURE__ */ jsx5(Pagination, {
-          ...props,
-          total,
-          simple: mergedSimple,
-          showQuickJumper: mergedShowQuickJumper,
-          showSizeChanger,
-          showTotal: totalRenderer
-        })
+      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: 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
+    ]
+  });
+});
+DmPagination.displayName = "DmPagination";
+// src/components/dm-search/DmSearch.tsx
+import {
+  forwardRef as forwardRef7,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo6,
+  useState as useState8
+} 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/date-picker/DatePicker.tsx
+import { forwardRef as forwardRef4, useMemo as useMemo4, useState as useState5 } from "react";
+
+// src/components/calendar/Calendar.tsx
+import { forwardRef as forwardRef3, useMemo as useMemo3, useState as useState3 } from "react";
+
+// src/classes/calendar.ts
+var calendarBaseClass = "datepicker calendar";
+var calendarHeaderClass = "calendar-header";
+var calendarTitleClass = "calendar-title";
+var calendarControlsClass = "calendar-controls";
+var calendarNavClass = "calendar-nav";
+var calendarModeClass = "calendar-mode";
+var calendarWeekdaysClass = "calendar-weekdays";
+var calendarWeekdayClass = "calendar-weekday";
+var calendarBodyClass = "calendar-body";
+var calendarDateGridClass = "calendar-date-grid";
+var calendarMonthGridClass = "calendar-month-grid";
+var calendarCellContentClass = "calendar-cell-content";
+function getCalendarClasses({
+  fullscreen = true,
+  mode = "month",
+  className
+}) {
+  return cn(calendarBaseClass, fullscreen ? "calendar-fullscreen" : "calendar-card", mode === "year" && "calendar-year-mode", className);
+}
+function getCalendarCellClasses({
+  selected,
+  today,
+  outside,
+  disabled,
+  className
+}) {
+  return cn("calendar-cell", selected && "calendar-cell-selected", today && "calendar-cell-today", outside && "calendar-cell-outside", disabled && "calendar-cell-disabled", className);
+}
+
+// src/components/calendar/Calendar.tsx
+import { jsx as jsx5, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
+var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function formatMonth(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-01`;
+}
+function parseDate(value) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+  }
+  if (typeof value === "string" && value.length > 0) {
+    const [year, month = "1", day = "1"] = value.split("-");
+    const parsed = new Date(Number(year), Number(month) - 1, Number(day));
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed;
+    }
+  }
+  const today = new Date;
+  return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addYears(date, amount) {
+  return new Date(date.getFullYear() + amount, date.getMonth(), 1);
+}
+function startOfCalendarGrid(panelDate) {
+  const firstOfMonth = new Date(panelDate.getFullYear(), panelDate.getMonth(), 1);
+  const start = new Date(firstOfMonth);
+  start.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  return start;
+}
+function buildDateGrid(panelDate) {
+  const start = startOfCalendarGrid(panelDate);
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return date;
+  });
+}
+function isSameMonth(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+function isOutsideRange(date, validRange) {
+  if (!validRange) {
+    return false;
+  }
+  const current = formatDate(date);
+  const start = formatDate(parseDate(validRange[0]));
+  const end = formatDate(parseDate(validRange[1]));
+  return current < start || current > end;
+}
+function Header({
+  panelDate,
+  mode,
+  setPanelDate,
+  setMode
+}) {
+  const title = mode === "year" ? String(panelDate.getFullYear()) : `${MONTHS[panelDate.getMonth()]} ${panelDate.getFullYear()}`;
+  return /* @__PURE__ */ jsxs4("div", {
+    className: calendarHeaderClass,
+    children: [
+      /* @__PURE__ */ jsx5("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Previous panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, -1) : addMonths(panelDate, -1), mode),
+        children: /* @__PURE__ */ jsx5("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx5("path", {
+            d: "m15 18-6-6 6-6"
+          })
+        })
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: calendarControlsClass,
+        children: [
+          /* @__PURE__ */ jsx5("div", {
+            className: calendarTitleClass,
+            children: title
+          }),
+          /* @__PURE__ */ jsxs4("div", {
+            className: calendarModeClass,
+            children: [
+              /* @__PURE__ */ jsx5("button", {
+                type: "button",
+                "aria-pressed": mode === "month",
+                onClick: () => setMode("month"),
+                children: "Month"
+              }),
+              /* @__PURE__ */ jsx5("button", {
+                type: "button",
+                "aria-pressed": mode === "year",
+                onClick: () => setMode("year"),
+                children: "Year"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx5("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Next panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, 1) : addMonths(panelDate, 1), mode),
+        children: /* @__PURE__ */ jsx5("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx5("path", {
+            d: "m9 18 6-6-6-6"
+          })
+        })
+      })
+    ]
+  });
+}
+var Calendar = forwardRef3(({
+  className,
+  value,
+  defaultValue,
+  mode,
+  defaultMode = "month",
+  fullscreen = true,
+  validRange,
+  disabledDate,
+  dateCellRender,
+  dateFullCellRender,
+  monthCellRender,
+  monthFullCellRender,
+  cellRender,
+  fullCellRender,
+  headerRender,
+  onChange,
+  onSelect,
+  onPanelChange,
+  ...props
+}, ref) => {
+  const selectedDate = parseDate(value ?? defaultValue);
+  const [innerValue, setInnerValue] = useState3(() => formatDate(selectedDate));
+  const [panelDate, setInnerPanelDate] = useState3(selectedDate);
+  const [innerMode, setInnerMode] = useState3(mode ?? defaultMode);
+  const currentMode = mode ?? innerMode;
+  const currentValue = value === undefined ? innerValue : formatDate(parseDate(value));
+  const today = useMemo3(() => formatDate(new Date), []);
+  const dateGrid = useMemo3(() => buildDateGrid(panelDate), [panelDate]);
+  function emitPanelChange(nextDate, nextMode = currentMode) {
+    setInnerPanelDate(nextDate);
+    onPanelChange?.(formatDate(nextDate), nextMode);
+  }
+  function setCalendarMode(nextMode) {
+    if (mode === undefined) {
+      setInnerMode(nextMode);
+    }
+    onPanelChange?.(formatDate(panelDate), nextMode);
+  }
+  function commitValue(nextDate, source) {
+    const nextValue = source === "month" ? formatMonth(nextDate) : formatDate(nextDate);
+    if (disabledDate?.(nextValue) || isOutsideRange(nextDate, validRange)) {
+      return;
+    }
+    if (value === undefined) {
+      setInnerValue(nextValue);
+    }
+    setInnerPanelDate(nextDate);
+    onSelect?.(nextValue, { source });
+    onChange?.(nextValue);
+  }
+  function renderDateCell(date) {
+    const dateValue = formatDate(date);
+    const originNode = /* @__PURE__ */ jsxs4("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx5("span", {
+          children: date.getDate()
+        }),
+        dateCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "month"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? dateFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx5("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === currentValue,
+        today: dateValue === today,
+        outside: !isSameMonth(date, panelDate),
+        disabled
+      }),
+      onClick: () => commitValue(date, "date"),
+      children: content
+    }, dateValue);
+  }
+  function renderMonthCell(month) {
+    const date = new Date(panelDate.getFullYear(), month, 1);
+    const dateValue = formatMonth(date);
+    const originNode = /* @__PURE__ */ jsxs4("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx5("span", {
+          children: MONTHS[month]
+        }),
+        monthCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "year"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? monthFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx5("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === formatMonth(parseDate(currentValue)),
+        today: dateValue === formatMonth(new Date),
+        disabled
+      }),
+      onClick: () => commitValue(date, "month"),
+      children: content
+    }, dateValue);
+  }
+  return /* @__PURE__ */ jsxs4("div", {
+    ...props,
+    ref,
+    className: getCalendarClasses({
+      fullscreen,
+      mode: currentMode,
+      className
+    }),
+    children: [
+      headerRender ? headerRender({
+        value: formatDate(panelDate),
+        type: currentMode,
+        onChange: (nextValue) => emitPanelChange(parseDate(nextValue)),
+        onTypeChange: setCalendarMode
+      }) : /* @__PURE__ */ jsx5(Header, {
+        panelDate,
+        mode: currentMode,
+        setPanelDate: emitPanelChange,
+        setMode: setCalendarMode
+      }),
+      /* @__PURE__ */ jsx5("div", {
+        className: calendarBodyClass,
+        children: currentMode === "month" ? /* @__PURE__ */ jsxs4(Fragment2, {
+          children: [
+            /* @__PURE__ */ jsx5("div", {
+              className: calendarWeekdaysClass,
+              "aria-hidden": "true",
+              children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx5("span", {
+                className: calendarWeekdayClass,
+                children: weekday
+              }, weekday))
+            }),
+            /* @__PURE__ */ jsx5("div", {
+              className: calendarDateGridClass,
+              children: dateGrid.map(renderDateCell)
+            })
+          ]
+        }) : /* @__PURE__ */ jsx5("div", {
+          className: calendarMonthGridClass,
+          children: MONTHS.map((_, month) => renderMonthCell(month))
+        })
+      })
+    ]
+  });
+});
+Calendar.displayName = "Calendar";
+// src/components/date-picker/usePickerDropdown.ts
+import { useEffect as useEffect2, useId, useImperativeHandle, useRef as useRef2, useState as useState4 } from "react";
+function usePickerDropdown({
+  open,
+  defaultOpen,
+  disabled,
+  onOpenChange,
+  ref
+}) {
+  const rootRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const skipFocus = useRef2(false);
+  const panelId = useId();
+  const [innerOpen, setInnerOpen] = useState4(Boolean(defaultOpen));
+  const visible = !disabled && (open ?? innerOpen);
+  useImperativeHandle(ref, () => rootRef.current, []);
+  function setVisible(next) {
+    if (disabled || next === visible)
+      return;
+    if (open === undefined)
+      setInnerOpen(next);
+    onOpenChange?.(next);
+  }
+  function closeAndFocus() {
+    skipFocus.current = true;
+    inputRef.current?.focus();
+    skipFocus.current = false;
+    setVisible(false);
+  }
+  useEffect2(() => {
+    function handleOutside(event) {
+      if (visible && !rootRef.current?.contains(event.target))
+        setVisible(false);
+    }
+    function handleKeyDown(event) {
+      if (event.defaultPrevented || !rootRef.current?.contains(event.target))
+        return;
+      if (event.key === "Escape" && visible) {
+        event.preventDefault();
+        closeAndFocus();
+      } else if (event.key === "ArrowDown" && event.target === inputRef.current) {
+        event.preventDefault();
+        setVisible(true);
+      }
+    }
+    document.addEventListener("pointerdown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  return {
+    rootRef,
+    inputRef,
+    panelId,
+    visible,
+    setVisible,
+    closeAndFocus,
+    onInputFocus: () => {
+      if (!skipFocus.current)
+        setVisible(true);
+    },
+    onRootBlur: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget))
+        setVisible(false);
+    }
+  };
+}
+
+// src/classes/date-picker.ts
+var datePickerBaseClass = "datepicker";
+var datePickerInputClass = "datepicker-input";
+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 getDatePickerDropdownClasses({
+  open,
+  className
+}) {
+  return cn(datePickerDropdownClass, open && datePickerDropdownOpenClass, className);
+}
+
+// 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 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 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 normalizeDateValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+var DatePickerRoot = forwardRef4(({
+  allowClear,
+  className,
+  inputProps,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onBlur,
+  onChange,
+  onFocus,
+  onOpenChange,
+  open,
+  picker = "date",
+  placeholder,
+  presets,
+  showNow,
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  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;
+    }
+    if (!isValueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, nextValue ?? "");
+  }
+  function selectValue(nextValue) {
+    if (disabledDate?.(nextValue))
+      return;
+    emitChange(nextValue);
+    dropdown.closeAndFocus();
+  }
+  const presetItems = useMemo4(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs5("div", {
+    ...props,
+    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,
-      isRefreshVisible ? /* @__PURE__ */ jsxs4("button", {
+      /* @__PURE__ */ jsx6("button", {
         type: "button",
-        className: getDmPaginationRefreshClasses({ loading }),
-        disabled: loading || props.disabled,
-        "aria-busy": loading || undefined,
-        onClick: refresh,
+        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"
+            })
+          ]
+        })
+      }),
+      visible ? /* @__PURE__ */ jsxs5("div", {
+        id: dropdown.panelId,
+        role: "dialog",
+        "aria-label": "Choose date",
+        className: getDatePickerDropdownClasses({ open: visible }),
         children: [
-          /* @__PURE__ */ jsx5("span", {
-            "aria-hidden": "true",
-            children: "Reload"
+          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__ */ jsx5("span", {
-            children: mergedLocale.refresh
-          })
+          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
         ]
       }) : null
     ]
   });
 });
-DmPagination.displayName = "DmPagination";
+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,
+        type: inputType,
+        value: currentValue?.[0] ?? "",
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
+        onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
+      }),
+      /* @__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
+    ]
+  });
+});
+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,
-  useImperativeHandle,
-  useRef as useRef2,
-  useState as useState4
+  forwardRef as forwardRef5,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef3,
+  useState as useState6
 } from "react";
 
 // src/classes/input.ts
@@ -987,14 +1761,14 @@ function getTextAreaCountClasses({ exceeded }) {
 }
 
 // src/components/input/Input.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function toTextValue(value) {
   if (Array.isArray(value)) {
     return value.join(",");
   }
   return value == null ? "" : String(value);
 }
-var InputRoot = forwardRef4(({
+var InputRoot = forwardRef5(({
   allowClear,
   className,
   defaultValue,
@@ -1009,12 +1783,12 @@ var InputRoot = forwardRef4(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const inputRef = useRef2(null);
-  const [internalValue, setInternalValue] = useState4(() => toTextValue(defaultValue));
+  const inputRef = useRef3(null);
+  const [internalValue, setInternalValue] = useState6(() => toTextValue(defaultValue));
   const isControlled = value !== undefined;
   const currentValue = isControlled ? toTextValue(value) : internalValue;
   const hasAffix = prefix != null || suffix != null || allowClear;
-  useImperativeHandle(ref, () => inputRef.current);
+  useImperativeHandle2(ref, () => inputRef.current);
   function handleChange(event) {
     if (!isControlled) {
       setInternalValue(event.currentTarget.value);
@@ -1037,7 +1811,7 @@ var InputRoot = forwardRef4(({
     });
     input.focus();
   }
-  const control = /* @__PURE__ */ jsx6("input", {
+  const control = /* @__PURE__ */ jsx7("input", {
     ...props,
     ref: inputRef,
     type,
@@ -1050,22 +1824,22 @@ var InputRoot = forwardRef4(({
     return control;
   }
   const showClear = allowClear && !disabled && currentValue.length > 0;
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: getInputWrapperClasses({ affixed: hasAffix }),
     children: [
-      prefix != null ? /* @__PURE__ */ jsx6("span", {
+      prefix != null ? /* @__PURE__ */ jsx7("span", {
         className: inputPrefixClass,
         children: prefix
       }) : null,
       control,
-      showClear ? /* @__PURE__ */ jsx6("button", {
+      showClear ? /* @__PURE__ */ jsx7("button", {
         type: "button",
         className: inputClearClass,
         "aria-label": "Clear input",
         onClick: handleClear,
         children: "x"
       }) : null,
-      suffix != null ? /* @__PURE__ */ jsx6("span", {
+      suffix != null ? /* @__PURE__ */ jsx7("span", {
         className: inputSuffixClass,
         children: suffix
       }) : null
@@ -1073,7 +1847,7 @@ var InputRoot = forwardRef4(({
   });
 });
 InputRoot.displayName = "Input";
-var Search = forwardRef4(({
+var Search = forwardRef5(({
   className,
   disabled,
   enterButton,
@@ -1082,8 +1856,8 @@ var Search = forwardRef4(({
   onSearch,
   ...props
 }, ref) => {
-  const inputRef = useRef2(null);
-  useImperativeHandle(ref, () => inputRef.current);
+  const inputRef = useRef3(null);
+  useImperativeHandle2(ref, () => inputRef.current);
   function emitSearch(event) {
     onSearch?.(inputRef.current?.value ?? "", event);
   }
@@ -1094,16 +1868,16 @@ var Search = forwardRef4(({
     }
   }
   const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: getSearchWrapperClasses({ className }),
     children: [
-      /* @__PURE__ */ jsx6(InputRoot, {
+      /* @__PURE__ */ jsx7(InputRoot, {
         ...props,
         ref: inputRef,
         disabled,
         onKeyDown: handleKeyDown
       }),
-      enterButton || loading ? /* @__PURE__ */ jsx6("button", {
+      enterButton || loading ? /* @__PURE__ */ jsx7("button", {
         type: "button",
         className: inputSearchButtonClass,
         disabled: disabled || loading,
@@ -1115,10 +1889,10 @@ var Search = forwardRef4(({
   });
 });
 Search.displayName = "Input.Search";
-var Password = forwardRef4(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
-  const [visible, setVisible] = useState4(false);
+var Password = forwardRef5(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
+  const [visible, setVisible] = useState6(false);
   const type = visible ? "text" : "password";
-  const toggle = visibilityToggle ? /* @__PURE__ */ jsx6("button", {
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx7("button", {
     type: "button",
     className: inputPasswordToggleClass,
     disabled,
@@ -1128,9 +1902,9 @@ var Password = forwardRef4(({ className, disabled, visibilityToggle = true, ...p
     },
     children: visible ? "Hide" : "Show"
   }) : undefined;
-  return /* @__PURE__ */ jsx6("span", {
+  return /* @__PURE__ */ jsx7("span", {
     className: getPasswordWrapperClasses({ className }),
-    children: /* @__PURE__ */ jsx6(InputRoot, {
+    children: /* @__PURE__ */ jsx7(InputRoot, {
       ...props,
       ref,
       disabled,
@@ -1140,7 +1914,7 @@ var Password = forwardRef4(({ className, disabled, visibilityToggle = true, ...p
   });
 });
 Password.displayName = "Input.Password";
-var TextArea = forwardRef4(({
+var TextArea = forwardRef5(({
   autoSize,
   className,
   defaultValue,
@@ -1154,7 +1928,7 @@ var TextArea = forwardRef4(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const [internalValue, setInternalValue] = useState4(() => toTextValue(defaultValue));
+  const [internalValue, setInternalValue] = useState6(() => toTextValue(defaultValue));
   const isControlled = value !== undefined;
   const currentValue = isControlled ? toTextValue(value) : internalValue;
   const count = currentValue.length;
@@ -1165,7 +1939,7 @@ var TextArea = forwardRef4(({
     }
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ jsx6("textarea", {
+  const control = /* @__PURE__ */ jsx7("textarea", {
     ...props,
     ref,
     className: getTextAreaClasses({
@@ -1183,11 +1957,11 @@ var TextArea = forwardRef4(({
   if (!showCount) {
     return control;
   }
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: textAreaWrapperClass,
     children: [
       control,
-      /* @__PURE__ */ jsxs5("span", {
+      /* @__PURE__ */ jsxs6("span", {
         className: getTextAreaCountClasses({ exceeded }),
         children: [
           count,
@@ -1198,7 +1972,7 @@ var TextArea = forwardRef4(({
   });
 });
 TextArea.displayName = "Input.TextArea";
-var Group = forwardRef4(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx6("div", {
+var Group = forwardRef5(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
   ...props,
   ref,
   className: cn(inputGroupClass, className),
@@ -1212,7 +1986,7 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React5, { forwardRef as forwardRef5, useMemo as useMemo4, useState as useState5 } from "react";
+import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -1268,7 +2042,7 @@ function getSelectOptionClasses({
 }
 
 // src/components/select/Select.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function isGroup(option) {
   return "options" in option;
 }
@@ -1293,8 +2067,8 @@ function normalizeMultiValue(value) {
 }
 function optionsFromChildren(children) {
   const result = [];
-  React5.Children.forEach(children, (child) => {
-    if (!React5.isValidElement(child)) {
+  React7.Children.forEach(children, (child) => {
+    if (!React7.isValidElement(child)) {
       return;
     }
     if (child.type === Option) {
@@ -1344,19 +2118,19 @@ function filterOptions(options, searchValue, filterOption) {
 function renderValue(option) {
   return option ? optionLabel(option) : null;
 }
-var Option = forwardRef5(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
+var Option = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
   ...props,
   ref,
   children
 }));
 Option.displayName = "Select.Option";
-var OptGroup = forwardRef5(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
+var OptGroup = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
   ...props,
   ref,
   children
 }));
 OptGroup.displayName = "Select.OptGroup";
-var SelectRoot = forwardRef5(({
+var SelectRoot = forwardRef6(({
   allowClear,
   children,
   className,
@@ -1375,11 +2149,11 @@ var SelectRoot = forwardRef5(({
   ...props
 }, ref) => {
   const multiple = mode === "multiple" || mode === "tags";
-  const sourceOptions = useMemo4(() => options ?? optionsFromChildren(children), [children, options]);
-  const flatOptions = useMemo4(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState5(false);
-  const [searchValue, setSearchValue] = useState5("");
-  const [internalValue, setInternalValue] = useState5(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  const sourceOptions = useMemo5(() => options ?? optionsFromChildren(children), [children, options]);
+  const flatOptions = useMemo5(() => flattenOptions(sourceOptions), [sourceOptions]);
+  const [open, setOpen] = useState7(false);
+  const [searchValue, setSearchValue] = useState7("");
+  const [internalValue, setInternalValue] = useState7(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
   const controlled = value !== undefined;
   const currentValue = controlled ? value : internalValue;
   const selectedValues = multiple ? normalizeMultiValue(currentValue) : normalizeSingleValue(currentValue) === undefined ? [] : [normalizeSingleValue(currentValue)];
@@ -1436,7 +2210,7 @@ var SelectRoot = forwardRef5(({
   }
   function renderOption(option) {
     const selected = selectedKeys.has(valueKey(option.value));
-    return /* @__PURE__ */ jsx7("button", {
+    return /* @__PURE__ */ jsx8("button", {
       type: "button",
       role: "option",
       "aria-selected": selected,
@@ -1455,11 +2229,11 @@ var SelectRoot = forwardRef5(({
       if (!isGroup(option)) {
         return renderOption(option);
       }
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: cn(selectGroupClass, option.className),
         role: "group",
         children: [
-          /* @__PURE__ */ jsx7("div", {
+          /* @__PURE__ */ jsx8("div", {
             className: selectGroupLabelClass,
             children: option.label
           }),
@@ -1468,11 +2242,11 @@ var SelectRoot = forwardRef5(({
       }, `group-${index}`);
     });
   }
-  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx7("span", {
+  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx8("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     ...props,
     ref,
     className: getSelectContainerClasses({
@@ -1483,7 +2257,7 @@ var SelectRoot = forwardRef5(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsxs6("button", {
+      /* @__PURE__ */ jsxs7("button", {
         type: "button",
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
@@ -1491,33 +2265,33 @@ var SelectRoot = forwardRef5(({
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
         children: [
-          /* @__PURE__ */ jsx7("span", {
+          /* @__PURE__ */ jsx8("span", {
             className: selectSelectionClass,
-            children: hasValue ? selection : /* @__PURE__ */ jsx7("span", {
+            children: hasValue ? selection : /* @__PURE__ */ jsx8("span", {
               className: selectPlaceholderClass,
               children: placeholder
             })
           }),
-          /* @__PURE__ */ jsx7("span", {
+          /* @__PURE__ */ jsx8("span", {
             className: selectIconClass,
             "aria-hidden": "true",
             children: "v"
           })
         ]
       }),
-      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx7("button", {
+      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx8("button", {
         type: "button",
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
         children: "x"
       }) : null,
-      open ? /* @__PURE__ */ jsxs6("div", {
+      open ? /* @__PURE__ */ jsxs7("div", {
         className: selectDropdownClass,
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
         children: [
-          searchable ? /* @__PURE__ */ jsx7("input", {
+          searchable ? /* @__PURE__ */ jsx8("input", {
             className: selectSearchClass,
             value: searchValue,
             placeholder: typeof placeholder === "string" ? placeholder : undefined,
@@ -1529,7 +2303,7 @@ var SelectRoot = forwardRef5(({
               }
             }
           }) : null,
-          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx7("div", {
+          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx8("div", {
             className: selectEmptyClass,
             children: "No data"
           })
@@ -1543,32 +2317,7 @@ var Select = SelectRoot;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 // src/components/dm-search/DmSearch.tsx
-import {
-  forwardRef as forwardRef6,
-  useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo5,
-  useState as useState6
-} 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 jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function initialValues(items, searchParams, useSearchParams = true) {
   return items.reduce((acc, item) => {
     const defaultValue = item.search.extraProps?.value ?? item.search.formProps?.initialValue;
@@ -1592,7 +2341,7 @@ function renderField({
     return item.search.render?.(value, setValue, item) ?? null;
   }
   if (item.search.type === "select") {
-    return /* @__PURE__ */ jsx8(Select, {
+    return /* @__PURE__ */ jsx9(Select, {
       ...extraProps,
       disabled: Boolean(loading || extraProps.disabled),
       value,
@@ -1601,25 +2350,25 @@ function renderField({
     });
   }
   if (item.search.type === "dateRange") {
-    return /* @__PURE__ */ jsx8(DatePicker.RangePicker, {
+    return /* @__PURE__ */ jsx9(DatePicker.RangePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "date") {
-    return /* @__PURE__ */ jsx8(DatePicker, {
+    return /* @__PURE__ */ jsx9(DatePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "radio" || item.search.type === "checkbox") {
-    return /* @__PURE__ */ jsx8("div", {
+    return /* @__PURE__ */ jsx9("div", {
       role: item.search.type === "radio" ? "radiogroup" : "group",
-      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs7("label", {
+      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs8("label", {
         children: [
-          /* @__PURE__ */ jsx8("input", {
+          /* @__PURE__ */ jsx9("input", {
             type: item.search.type,
             disabled: loading,
             checked: item.search.type === "checkbox" ? Array.isArray(value) && value.includes(option.value) : value === option.value,
@@ -1637,7 +2386,7 @@ function renderField({
       }, String(option.value)))
     });
   }
-  return /* @__PURE__ */ jsx8(Input, {
+  return /* @__PURE__ */ jsx9(Input, {
     ...extraProps,
     type: item.search.type === "input-number" ? "number" : "text",
     disabled: Boolean(loading || extraProps.disabled),
@@ -1651,8 +2400,11 @@ function renderField({
     }
   });
 }
-var DmSearch = forwardRef6(({
+var DmSearch = forwardRef7(({
   items = [],
+  values: controlledValues,
+  onValuesChange,
+  onReset,
   onSearch,
   extra,
   fastFilterItem,
@@ -1661,27 +2413,37 @@ var DmSearch = forwardRef6(({
   compact = false,
   searchParams,
   loading = false,
+  noValidate,
   enableDefaultPlaceHolder = false,
   className
 }, ref) => {
-  const allItems = useMemo5(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
-  const [collapsed, setCollapsed] = useState6(defaultCollapsed);
-  const [values, setValues] = useState6(() => initialValues(allItems, searchParams));
+  const allItems = useMemo6(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
+  const [collapsed, setCollapsed] = useState8(defaultCollapsed);
+  const [internalValues, setValues] = useState8(() => initialValues(allItems, searchParams));
+  const controlled = controlledValues !== undefined;
+  const values = controlled ? controlledValues : internalValues;
   const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
-  useEffect2(() => {
-    setValues(initialValues(allItems, searchParams));
-  }, [allItems, searchParams]);
+  useEffect3(() => {
+    if (!controlled)
+      setValues(initialValues(allItems, searchParams));
+  }, [allItems, searchParams, controlled]);
   function reset(useSearchParams = false) {
     const nextValues = initialValues(allItems, searchParams, useSearchParams);
-    setValues(nextValues);
+    if (!controlled)
+      setValues(nextValues);
+    if (onReset)
+      onReset(nextValues);
+    else if (controlled)
+      onValuesChange?.(nextValues);
     return nextValues;
   }
-  useImperativeHandle2(ref, () => ({
+  useImperativeHandle3(ref, () => ({
     onReset: () => {
       reset(false);
     }
   }));
-  return /* @__PURE__ */ jsxs7("form", {
+  return /* @__PURE__ */ jsxs8("form", {
+    noValidate,
     id: "searchForm",
     className: getDmSearchClasses({ compact, collapsed, className }),
     onSubmit: (event) => {
@@ -1689,53 +2451,63 @@ var DmSearch = forwardRef6(({
       onSearch?.(values);
     },
     children: [
-      fastFilterItem ? /* @__PURE__ */ jsx8("div", {
+      fastFilterItem ? /* @__PURE__ */ jsx9("div", {
         className: dmSearchFastFilterClass,
         children: fastFilterItem.title
       }) : null,
-      /* @__PURE__ */ jsx8("div", {
+      /* @__PURE__ */ jsx9("div", {
         className: dmSearchFieldsClass,
-        children: visibleItems.map((item) => /* @__PURE__ */ jsxs7("label", {
-          className: dmSearchFieldClass,
-          children: [
-            compact ? null : /* @__PURE__ */ jsx8("span", {
-              children: item.title
-            }),
-            renderField({
-              item,
-              value: values[item.dataIndex],
-              loading,
-              enableDefaultPlaceHolder,
-              setValue: (value) => setValues((current) => ({
-                ...current,
-                [item.dataIndex]: value
-              }))
-            })
-          ]
-        }, item.key))
+        children: visibleItems.map((item) => {
+          const Field = item.search.type === "custom" ? "div" : "label";
+          return /* @__PURE__ */ jsxs8(Field, {
+            className: dmSearchFieldClass,
+            children: [
+              compact ? null : /* @__PURE__ */ jsx9("span", {
+                children: item.title
+              }),
+              renderField({
+                item,
+                value: values[item.dataIndex],
+                loading,
+                enableDefaultPlaceHolder,
+                setValue: (value) => {
+                  const nextValues = { ...values, [item.dataIndex]: value };
+                  if (!controlled)
+                    setValues(nextValues);
+                  onValuesChange?.(nextValues);
+                }
+              })
+            ]
+          }, item.key);
+        })
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: dmSearchActionsClass,
         children: [
-          /* @__PURE__ */ jsx8(Button, {
+          /* @__PURE__ */ jsx9(Button, {
             type: "submit",
             isLoading: loading,
             children: "Search"
           }),
-          /* @__PURE__ */ jsx8(Button, {
+          /* @__PURE__ */ jsx9(Button, {
             type: "button",
             color: "secondary",
             appearance: "outline",
-            onClick: () => onSearch?.(reset(false)),
+            onClick: () => {
+              const nextValues = reset(false);
+              if (!onReset)
+                onSearch?.(nextValues);
+            },
             children: "Reset"
           }),
-          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx8(Button, {
+          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx9(Button, {
             type: "button",
             color: "secondary",
             appearance: "text",
             onClick: () => {
               setCollapsed((current) => !current);
-              setValues(initialValues(allItems, searchParams));
+              if (!controlled)
+                setValues(initialValues(allItems, searchParams));
             },
             children: collapsed ? "Expand" : "Collapse"
           }) : null,
@@ -1747,10 +2519,10 @@ var DmSearch = forwardRef6(({
 });
 DmSearch.displayName = "DmSearch";
 // src/components/table/Table.tsx
-import React7, {
-  forwardRef as forwardRef7,
-  useMemo as useMemo6,
-  useState as useState7
+import React9, {
+  forwardRef as forwardRef8,
+  useMemo as useMemo7,
+  useState as useState9
 } from "react";
 
 // src/classes/table.ts
@@ -1800,7 +2572,7 @@ function getTableSorterClasses(active) {
 }
 
 // src/components/table/Table.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 import { createElement } from "react";
 var defaultPageSize = 10;
 var defaultSortDirections = ["ascend", "descend", null];
@@ -1833,8 +2605,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;
@@ -1916,24 +2688,24 @@ function selectedRowsForKeys(data, keys, rowKey) {
   const keySet = new Set(normalizeKeys(keys));
   return data.filter((record, index) => keySet.has(String(getRecordKey(record, index, rowKey))));
 }
-var Column = forwardRef7(() => null);
+var Column = forwardRef8(() => null);
 Column.displayName = "Table.Column";
-var ColumnGroup = forwardRef7(() => null);
+var ColumnGroup = forwardRef8(() => null);
 ColumnGroup.displayName = "Table.ColumnGroup";
-var SummaryRow = forwardRef7((props, ref) => /* @__PURE__ */ jsx9("tr", {
+var SummaryRow = forwardRef8((props, ref) => /* @__PURE__ */ jsx10("tr", {
   ...props,
   ref
 }));
 SummaryRow.displayName = "Table.Summary.Row";
-var SummaryCell = forwardRef7(({ index, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9("td", {
+var SummaryCell = forwardRef8(({ index, ...props }, ref) => {
+  return /* @__PURE__ */ jsx10("td", {
     ...props,
     ref
   });
 });
 SummaryCell.displayName = "Table.Summary.Cell";
-var Summary = Object.assign(forwardRef7(({ fixed, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9("tfoot", {
+var Summary = Object.assign(forwardRef8(({ fixed, ...props }, ref) => {
+  return /* @__PURE__ */ jsx10("tfoot", {
     ...props,
     ref
   });
@@ -1943,8 +2715,8 @@ var Summary = Object.assign(forwardRef7(({ fixed, ...props }, ref) => {
 });
 Summary.displayName = "Table.Summary";
 function columnsFromChildren(children) {
-  return React7.Children.toArray(children).flatMap((child) => {
-    if (!React7.isValidElement(child)) {
+  return React9.Children.toArray(children).flatMap((child) => {
+    if (!React9.isValidElement(child)) {
       return [];
     }
     if (child.type === Column) {
@@ -1970,12 +2742,12 @@ function renderSummary(summary, pageData, colSpan) {
     return null;
   }
   const node = summary(pageData);
-  if (React7.isValidElement(node) && node.type === Summary) {
+  if (React9.isValidElement(node) && node.type === Summary) {
     return node;
   }
-  return /* @__PURE__ */ jsx9("tfoot", {
-    children: /* @__PURE__ */ jsx9("tr", {
-      children: /* @__PURE__ */ jsx9("td", {
+  return /* @__PURE__ */ jsx10("tfoot", {
+    children: /* @__PURE__ */ jsx10("tr", {
+      children: /* @__PURE__ */ jsx10("td", {
         className: tableCellClass,
         colSpan,
         children: node
@@ -2019,18 +2791,18 @@ function TableRoot({
   className,
   ...props
 }, ref) {
-  const childColumns = useMemo6(() => columnsFromChildren(children), [children]);
-  const normalizedColumns = useMemo6(() => normalizeColumns(columns ?? childColumns), [childColumns, columns]);
-  const leaves = useMemo6(() => leafColumns(normalizedColumns), [normalizedColumns]);
-  const headerRows = useMemo6(() => buildHeaderRows(normalizedColumns, getDepth(normalizedColumns)), [normalizedColumns]);
-  const [sortStates, setSortStates] = useState7({});
-  const [filterStates, setFilterStates] = useState7({});
-  const [internalCurrent, setInternalCurrent] = useState7(1);
-  const [internalPageSize, setInternalPageSize] = useState7(defaultPageSize);
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState7(rowSelection?.defaultSelectedRowKeys ?? []);
-  const [internalExpandedKeys, setInternalExpandedKeys] = useState7(expandable?.defaultExpandedRowKeys ?? []);
+  const childColumns = useMemo7(() => columnsFromChildren(children), [children]);
+  const normalizedColumns = useMemo7(() => normalizeColumns(columns ?? childColumns), [childColumns, columns]);
+  const leaves = useMemo7(() => leafColumns(normalizedColumns), [normalizedColumns]);
+  const headerRows = useMemo7(() => buildHeaderRows(normalizedColumns, getDepth(normalizedColumns)), [normalizedColumns]);
+  const [sortStates, setSortStates] = useState9({});
+  const [filterStates, setFilterStates] = useState9({});
+  const [internalCurrent, setInternalCurrent] = useState9(1);
+  const [internalPageSize, setInternalPageSize] = useState9(defaultPageSize);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState9(rowSelection?.defaultSelectedRowKeys ?? []);
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState9(expandable?.defaultExpandedRowKeys ?? []);
   const spinning = typeof loading === "object" ? loading.spinning : Boolean(loading);
-  const activeFilters = useMemo6(() => {
+  const activeFilters = useMemo7(() => {
     return leaves.reduce((result, column) => {
       const value = filterValueFor(column, filterStates) ?? null;
       if (value !== null) {
@@ -2039,7 +2811,7 @@ function TableRoot({
       return result;
     }, {});
   }, [filterStates, leaves]);
-  const activeSorter = useMemo6(() => {
+  const activeSorter = useMemo7(() => {
     const column = leaves.find((item) => sortOrderFor(item, sortStates));
     if (!column) {
       return {};
@@ -2051,7 +2823,7 @@ function TableRoot({
       order: sortOrderFor(column, sortStates) ?? null
     };
   }, [leaves, sortStates]);
-  const filteredData = useMemo6(() => {
+  const filteredData = useMemo7(() => {
     return leaves.reduce((records, column) => {
       const values = filterValueFor(column, filterStates);
       if (!values?.length || !column.onFilter) {
@@ -2060,7 +2832,7 @@ function TableRoot({
       return records.filter((record) => values.some((value) => column.onFilter?.(value, record)));
     }, dataSource);
   }, [dataSource, filterStates, leaves]);
-  const sortedData = useMemo6(() => {
+  const sortedData = useMemo7(() => {
     const sorterColumn = leaves.find((column) => sortOrderFor(column, sortStates));
     const order = sorterColumn ? sortOrderFor(sorterColumn, sortStates) : null;
     const compare = sorterColumn ? sortCompare(sorterColumn.sorter) : undefined;
@@ -2203,18 +2975,18 @@ function TableRoot({
       return null;
     }
     if (rowSelection.type === "radio" || rowSelection.hideSelectAll) {
-      return /* @__PURE__ */ jsx9("th", {
+      return /* @__PURE__ */ jsx10("th", {
         className: cn(tableHeaderCellClass, tableSelectionCellClass),
         children: rowSelection.columnTitle
       });
     }
     const pageKeys = pageData.map((record, index) => getRecordKey(record, index, rowKey));
     const allSelected = pageKeys.length > 0 && pageKeys.every((key) => selectedKeySet.has(String(key)));
-    return /* @__PURE__ */ jsx9("th", {
+    return /* @__PURE__ */ jsx10("th", {
       className: cn(tableHeaderCellClass, tableSelectionCellClass),
-      children: /* @__PURE__ */ jsxs8("label", {
+      children: /* @__PURE__ */ jsxs9("label", {
         children: [
-          /* @__PURE__ */ jsx9("input", {
+          /* @__PURE__ */ jsx10("input", {
             type: "checkbox",
             "aria-label": "Select all rows",
             checked: allSelected,
@@ -2241,26 +3013,26 @@ function TableRoot({
         textAlign: column.align,
         ...headerProps.style
       }
-    }, /* @__PURE__ */ jsx9("span", {
+    }, /* @__PURE__ */ jsx10("span", {
       children: title
-    }), column.sorter ? /* @__PURE__ */ jsx9("button", {
+    }), column.sorter ? /* @__PURE__ */ jsx10("button", {
       type: "button",
       className: getTableSorterClasses(Boolean(sortOrder)),
       "aria-label": `Sort ${textFromNode(title, String(column.columnKey))}`,
       onClick: () => changeSorter(column),
       children: sortOrder === "ascend" ? "Asc" : sortOrder === "descend" ? "Desc" : "Sort"
-    }) : null, column.filters?.length ? /* @__PURE__ */ jsxs8("select", {
+    }) : null, column.filters?.length ? /* @__PURE__ */ jsxs9("select", {
       className: tableFilterClass,
       "aria-label": `Filter ${textFromNode(title, String(column.columnKey))}`,
       multiple: column.filterMultiple !== false,
       value: column.filterMultiple === false ? String((filterValueFor(column, filterStates) ?? [])[0] ?? "") : (filterValueFor(column, filterStates) ?? []).map(String),
       onChange: (event) => changeFilter(column, event),
       children: [
-        column.filterMultiple === false ? /* @__PURE__ */ jsx9("option", {
+        column.filterMultiple === false ? /* @__PURE__ */ jsx10("option", {
           value: "",
           children: "All"
         }) : null,
-        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx9("option", {
+        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx10("option", {
           value: String(filter.value),
           children: filter.text
         }, String(filter.value)))
@@ -2285,14 +3057,14 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const checked = selectedKeySet.has(String(key));
     const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {};
-    const originNode = /* @__PURE__ */ jsx9("input", {
+    const originNode = /* @__PURE__ */ jsx10("input", {
       ...checkboxProps,
       type: rowSelection.type === "radio" ? "radio" : "checkbox",
       "aria-label": `Select row ${index + 1}`,
       checked,
       onChange: (event) => toggleRowSelection(record, index, event)
     });
-    return /* @__PURE__ */ jsx9("td", {
+    return /* @__PURE__ */ jsx10("td", {
       className: cn(tableCellClass, tableSelectionCellClass),
       children: rowSelection.renderCell ? rowSelection.renderCell(checked, record, index, originNode) : originNode
     });
@@ -2304,9 +3076,9 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const expanded = expandedKeySet.has(String(key));
     const expandableRow = expandable.rowExpandable?.(record) ?? true;
-    return /* @__PURE__ */ jsx9("td", {
+    return /* @__PURE__ */ jsx10("td", {
       className: cn(tableCellClass, tableExpandCellClass),
-      children: expandableRow ? /* @__PURE__ */ jsx9("button", {
+      children: expandableRow ? /* @__PURE__ */ jsx10("button", {
         type: "button",
         className: tableExpandButtonClass,
         "aria-label": `${expanded ? "Collapse" : "Expand"} row ${index + 1}`,
@@ -2319,7 +3091,7 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const expanded = expandedKeySet.has(String(key));
     const selected = selectedKeySet.has(String(key));
-    const row = /* @__PURE__ */ jsxs8("tr", {
+    const row = /* @__PURE__ */ jsxs9("tr", {
       className: getTableRowClasses({ selected, expanded }),
       onClick: () => {
         if (expandable?.expandRowByClick) {
@@ -2335,12 +3107,12 @@ function TableRoot({
     if (!expanded || !expandable?.expandedRowRender) {
       return row;
     }
-    return /* @__PURE__ */ jsxs8(React7.Fragment, {
+    return /* @__PURE__ */ jsxs9(React9.Fragment, {
       children: [
         row,
-        /* @__PURE__ */ jsx9("tr", {
+        /* @__PURE__ */ jsx10("tr", {
           className: "table-expanded-row",
-          children: /* @__PURE__ */ jsx9("td", {
+          children: /* @__PURE__ */ jsx10("td", {
             className: tableCellClass,
             colSpan: structuralColumnCount,
             children: expandable.expandedRowRender(record, index, 0, expanded)
@@ -2349,15 +3121,15 @@ function TableRoot({
       ]
     }, String(key));
   }
-  const tableNode = /* @__PURE__ */ jsxs8("table", {
+  const tableNode = /* @__PURE__ */ jsxs9("table", {
     className: getTableClasses({ bordered, size }),
     style: { tableLayout },
     children: [
-      /* @__PURE__ */ jsx9("thead", {
-        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs8("tr", {
+      /* @__PURE__ */ jsx10("thead", {
+        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs9("tr", {
           children: [
             rowIndex === 0 ? renderSelectionHeader() : null,
-            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx9("th", {
+            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx10("th", {
               className: cn(tableHeaderCellClass, tableExpandCellClass),
               children: expandable?.columnTitle
             }) : null,
@@ -2365,9 +3137,9 @@ function TableRoot({
           ]
         }, rowIndex))
       }),
-      /* @__PURE__ */ jsx9("tbody", {
-        children: bodyEmpty ? /* @__PURE__ */ jsx9("tr", {
-          children: /* @__PURE__ */ jsx9("td", {
+      /* @__PURE__ */ jsx10("tbody", {
+        children: bodyEmpty ? /* @__PURE__ */ jsx10("tr", {
+          children: /* @__PURE__ */ jsx10("td", {
             className: tableEmptyClass,
             colSpan: structuralColumnCount,
             children: locale?.emptyText ?? "No data"
@@ -2377,12 +3149,12 @@ function TableRoot({
       renderSummary(summary, pageData, structuralColumnCount)
     ]
   });
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     ...props,
     ref,
     className: getTableWrapperClasses({ loading: spinning, className }),
     children: [
-      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx9("div", {
+      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx10("div", {
         style: {
           overflow: "auto",
           maxHeight: scroll.y,
@@ -2390,30 +3162,30 @@ function TableRoot({
         },
         children: tableNode
       }) : tableNode,
-      spinning ? /* @__PURE__ */ jsx9("div", {
+      spinning ? /* @__PURE__ */ jsx10("div", {
         className: tableLoadingIndicatorClass,
         role: "status",
         children: typeof loading === "object" && loading.indicator ? loading.indicator : "Loading"
       }) : null,
-      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs8("nav", {
+      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs9("nav", {
         className: tablePaginationClass,
         "aria-label": "Table pagination",
         children: [
-          /* @__PURE__ */ jsx9("button", {
+          /* @__PURE__ */ jsx10("button", {
             type: "button",
             className: tablePaginationButtonClass,
             disabled: paginationConfig.disabled || current <= 1,
             onClick: () => changePage(current - 1),
             children: "Previous"
           }),
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx10("span", {
             className: tablePaginationInfoClass,
             children: paginationConfig.showTotal ? paginationConfig.showTotal(paginationConfig.total ?? sortedData.length, [
               bodyEmpty ? 0 : (current - 1) * pageSize + 1,
               Math.min(current * pageSize, sortedData.length)
             ]) : `${current} / ${pageCount}`
           }),
-          /* @__PURE__ */ jsx9("button", {
+          /* @__PURE__ */ jsx10("button", {
             type: "button",
             className: tablePaginationButtonClass,
             disabled: paginationConfig.disabled || current >= pageCount,
@@ -2425,7 +3197,7 @@ function TableRoot({
     ]
   });
 }
-var TableWithRef = forwardRef7(TableRoot);
+var TableWithRef = forwardRef8(TableRoot);
 var Table = Object.assign(TableWithRef, {
   Column,
   ColumnGroup,
@@ -2438,25 +3210,7 @@ var Table = Object.assign(TableWithRef, {
 });
 Table.displayName = "Table";
 // src/components/dm-table/DmTable.tsx
-import { useMemo as useMemo7, useState as useState8 } 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 jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function mapAndFilter(list, mapper) {
   return list.map(mapper).filter((item) => item !== false && item != null);
 }
@@ -2507,9 +3261,9 @@ function DmTable({
   rowSelection,
   ...props
 }) {
-  const tableColumns = useMemo7(() => mapAndFilter(inputColumns, filterDmTableColumn), [inputColumns]);
-  const [columns, setColumns] = useState8(tableColumns);
-  const [columnSettingsOpen, setColumnSettingsOpen] = useState8(false);
+  const tableColumns = useMemo8(() => mapAndFilter(inputColumns, filterDmTableColumn), [inputColumns]);
+  const [columns, setColumns] = useState10(tableColumns);
+  const [columnSettingsOpen, setColumnSettingsOpen] = useState10(false);
   const items = searchProps?.items?.length ? searchProps.items : searchItems(inputColumns);
   const paginationObj = typeof pagination === "object" ? pagination : undefined;
   const paginationProps = paginationObj ? Object.fromEntries(Object.entries(paginationObj).filter(([key]) => key !== "ref")) : {};
@@ -2522,37 +3276,37 @@ function DmTable({
       globalThis.localStorage?.removeItem(columnState.persistenceKey);
     }
   }
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     className: getDmTableClasses({ className }),
     children: [
-      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx10(Card, {
+      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx11(Card, {
         className: dmTableSearchClass,
         padding: "md",
-        children: /* @__PURE__ */ jsx10(DmSearch, {
+        children: /* @__PURE__ */ jsx11(DmSearch, {
           ...searchProps,
           items
         })
       }) : null,
-      indicators ? /* @__PURE__ */ jsx10("div", {
+      indicators ? /* @__PURE__ */ jsx11("div", {
         className: dmTableIndicatorsClass,
         children: indicators
       }) : null,
-      /* @__PURE__ */ jsxs9(Card, {
+      /* @__PURE__ */ jsxs10(Card, {
         className: dmTableCardClass,
         padding: "md",
         children: [
-          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs9("div", {
+          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs10("div", {
             className: dmTableHeaderClass,
             children: [
-              /* @__PURE__ */ jsx10("div", {
+              /* @__PURE__ */ jsx11("div", {
                 className: dmTableTitleClass,
                 children: name
               }),
-              /* @__PURE__ */ jsxs9("div", {
+              /* @__PURE__ */ jsxs10("div", {
                 className: dmTableExtraClass,
                 children: [
                   extra,
-                  columnSettingVisible ? /* @__PURE__ */ jsx10(Button, {
+                  columnSettingVisible ? /* @__PURE__ */ jsx11(Button, {
                     type: "button",
                     color: "secondary",
                     appearance: "outline",
@@ -2564,20 +3318,20 @@ function DmTable({
               })
             ]
           }) : null,
-          columnSettingsOpen ? /* @__PURE__ */ jsx10("div", {
+          columnSettingsOpen ? /* @__PURE__ */ jsx11("div", {
             role: "dialog",
             "aria-label": "Column settings",
-            children: /* @__PURE__ */ jsx10(Button, {
+            children: /* @__PURE__ */ jsx11(Button, {
               type: "button",
               onClick: resetColumns,
               children: "Reset columns"
             })
           }) : null,
-          tableExtra ? /* @__PURE__ */ jsx10("div", {
+          tableExtra ? /* @__PURE__ */ jsx11("div", {
             className: dmTableTableExtraClass,
             children: tableExtra
           }) : null,
-          /* @__PURE__ */ jsx10(Table, {
+          /* @__PURE__ */ jsx11(Table, {
             ...props,
             dataSource,
             rowSelection,
@@ -2593,7 +3347,7 @@ function DmTable({
               onChange: paginationObj?.onChange
             } : false
           }),
-          pagination ? /* @__PURE__ */ jsx10(DmPagination, {
+          pagination ? /* @__PURE__ */ jsx11(DmPagination, {
             ...paginationProps,
             className: dmTablePaginationClass,
             total,
@@ -2607,6 +3361,6 @@ function DmTable({
 }
 DmTable.displayName = "DmTable";
 export {
-  filterDmTableColumn,
-  DmTable
+  DmTable,
+  filterDmTableColumn
 };