@duskmoon-dev/components 0.3.1 → 0.3.3

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

@@ -25,6 +25,16 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/dm-pro-table.ts
+var dmProTableBaseClass = "dm-pro-table";
+var dmProTableHeaderClass = "dm-pro-table-header";
+var dmProTableTitleClass = "dm-pro-table-title";
+var dmProTableToolbarClass = "dm-pro-table-toolbar";
+var dmProTableColumnSettingClass = "dm-pro-table-column-setting";
+function getDmProTableClasses({ className }) {
+  return cn(dmProTableBaseClass, className);
+}
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -123,6 +133,24 @@ function Button({
     ]
   });
 }
+// 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/classes/card.ts
 var cardBaseClass = "card";
 var cardAppearanceClasses = {
@@ -166,1388 +194,1020 @@ 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,
+function getPageTokens(current, pageCount) {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+  const pages = new Set([1, pageCount, current - 1, current, current + 1]);
+  if (current <= 4) {
+    [2, 3, 4, 5].forEach((page) => pages.add(page));
+  }
+  if (current >= pageCount - 3) {
+    [pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1].forEach((page) => pages.add(page));
+  }
+  const sortedPages = Array.from(pages).filter((page) => page >= 1 && page <= pageCount).sort((first, second) => first - second);
+  return sortedPages.reduce((tokens, page) => {
+    const previous = tokens[tokens.length - 1];
+    if (typeof previous === "number") {
+      const gap = page - previous;
+      if (gap === 2) {
+        tokens.push(previous + 1);
+      } else if (gap > 2) {
+        tokens.push("ellipsis");
+      }
+    }
+    tokens.push(page);
+    return tokens;
+  }, []);
+}
+function getSizeOptions(pageSize) {
+  return Array.from(new Set([...defaultPageSizeOptions, pageSize])).sort((first, second) => first - second);
+}
+var Pagination = forwardRef(({
+  current,
+  defaultCurrent = 1,
+  pageSize,
+  defaultPageSize = 10,
+  total = 0,
   onChange,
-  onFocus,
-  onOpenChange,
-  open,
-  picker = "date",
-  placeholder,
-  presets,
-  showNow,
+  disabled,
+  simple,
+  showSizeChanger,
+  showQuickJumper,
+  showTotal,
   size = "md",
-  status,
-  value,
+  className,
   ...props
 }, ref) => {
-  const isValueControlled = value !== undefined;
-  const isOpenControlled = open !== undefined;
-  const [innerValue, setInnerValue] = useState(() => normalizeDateValue(defaultValue));
-  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
-  const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
-  const visible = isOpenControlled ? Boolean(open) : innerOpen;
-  const inputType = inputTypeForPicker(picker);
-  function setVisible(nextOpen) {
-    if (!isOpenControlled) {
-      setInnerOpen(nextOpen);
+  const isCurrentControlled = current !== undefined;
+  const isPageSizeControlled = pageSize !== undefined;
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const [quickJumpValue, setQuickJumpValue] = useState("");
+  const mergedPageSize = toPositiveInteger(pageSize ?? internalPageSize, defaultPageSize);
+  const pageCount = getPageCount(total, mergedPageSize);
+  const mergedCurrent = clampPage(toPositiveInteger(current ?? internalCurrent, defaultCurrent), pageCount);
+  const pageTokens = useMemo(() => getPageTokens(mergedCurrent, pageCount), [mergedCurrent, pageCount]);
+  const range = getRange(mergedCurrent, mergedPageSize, total);
+  function changePage(nextPage, nextPageSize = mergedPageSize) {
+    const nextPageCount = getPageCount(total, nextPageSize);
+    const normalizedPage = clampPage(nextPage, nextPageCount);
+    if (!isCurrentControlled) {
+      setInternalCurrent(normalizedPage);
     }
-    onOpenChange?.(nextOpen);
-  }
-  function emitChange(nextValue) {
-    if (nextValue && disabledDate?.(nextValue)) {
+    if (!isPageSizeControlled) {
+      setInternalPageSize(nextPageSize);
+    }
+    onChange?.(normalizedPage, nextPageSize);
+  }
+  function handlePageSizeChange(event) {
+    const nextPageSize = toPositiveInteger(Number(event.currentTarget.value), mergedPageSize);
+    const nextPage = clampPage(mergedCurrent, getPageCount(total, nextPageSize));
+    changePage(nextPage, nextPageSize);
+  }
+  function jumpToInputPage(value) {
+    const nextPage = Number(value);
+    if (!Number.isFinite(nextPage)) {
       return;
     }
-    if (!isValueControlled) {
-      setInnerValue(nextValue);
+    changePage(nextPage);
+    setQuickJumpValue("");
+  }
+  function handleQuickJumpKeyDown(event) {
+    if (event.key !== "Enter") {
+      return;
     }
-    onChange?.(nextValue, nextValue ?? "");
+    jumpToInputPage(event.currentTarget.value);
   }
-  const presetItems = useMemo(() => presets ?? [], [presets]);
-  return /* @__PURE__ */ jsxs2("div", {
+  const previousDisabled = disabled || mergedCurrent <= 1;
+  const nextDisabled = disabled || mergedCurrent >= pageCount;
+  return /* @__PURE__ */ jsxs2("nav", {
     ...props,
     ref,
-    className: getDatePickerClasses({
-      size,
-      status,
-      picker,
-      open: visible,
-      disabled,
-      className
-    }),
+    className: getPaginationClasses({ size, compact: simple, className }),
     children: [
-      /* @__PURE__ */ jsx3("input", {
-        className: datePickerInputClass,
-        disabled,
-        type: inputType,
-        value: currentValue ?? "",
-        placeholder: placeholder ?? placeholderForPicker(picker),
-        onFocus: (event) => {
-          onFocus?.(event);
-          setVisible(true);
-        },
-        onBlur: (event) => {
-          onBlur?.(event);
-          setVisible(false);
-        },
-        onChange: (event) => emitChange(event.currentTarget.value || undefined)
-      }),
-      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        className: datePickerClearClass,
-        "aria-label": "Clear date",
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => emitChange(undefined),
-        children: "x"
+      showTotal ? /* @__PURE__ */ jsx3("div", {
+        className: paginationInfoClass,
+        children: /* @__PURE__ */ jsx3("span", {
+          className: paginationInfoTextClass,
+          children: showTotal(total, range)
+        })
       }) : null,
-      /* @__PURE__ */ jsx3("span", {
-        className: datePickerIconClass,
-        "aria-hidden": "true"
+      /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: paginationPrevClass,
+        disabled: previousDisabled,
+        "aria-label": "Previous page",
+        onClick: () => changePage(mergedCurrent - 1),
+        children: "Prev"
       }),
-      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
-        className: getDatePickerDropdownClasses({ open: visible }),
+      simple ? /* @__PURE__ */ jsxs2("div", {
+        className: paginationInputClass,
         children: [
-          presetItems.map((preset, index) => /* @__PURE__ */ jsx3("button", {
-            type: "button",
-            className: datePickerPresetClass,
-            onMouseDown: (event) => event.preventDefault(),
-            onClick: () => emitChange(preset.value),
-            children: preset.label
-          }, index)),
-          showNow ? /* @__PURE__ */ jsx3("div", {
-            className: datePickerFooterClass,
-            children: /* @__PURE__ */ jsx3("button", {
-              type: "button",
-              onMouseDown: (event) => event.preventDefault(),
-              onClick: () => emitChange(todayValue(picker)),
-              children: "Now"
-            })
-          }) : null
+          /* @__PURE__ */ jsx3("input", {
+            "aria-label": "Current page",
+            type: "number",
+            min: 1,
+            max: pageCount,
+            value: quickJumpValue || String(mergedCurrent),
+            disabled,
+            onChange: (event) => setQuickJumpValue(event.currentTarget.value),
+            onKeyDown: handleQuickJumpKeyDown,
+            onBlur: (event) => {
+              if (event.currentTarget.value !== String(mergedCurrent)) {
+                jumpToInputPage(event.currentTarget.value);
+              }
+            }
+          }),
+          /* @__PURE__ */ jsxs2("span", {
+            className: paginationInfoTextClass,
+            children: [
+              "/ ",
+              pageCount
+            ]
+          })
         ]
-      }) : 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,
+      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx3("span", {
+        "aria-hidden": "true",
+        className: paginationEllipsisClass
+      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: getPaginationItemClasses({
+          active: pageToken === mergedCurrent,
+          disabled
+        }),
         disabled,
-        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", {
+        "aria-current": pageToken === mergedCurrent ? "page" : undefined,
+        "aria-label": `Page ${pageToken}`,
+        onClick: () => changePage(pageToken),
+        children: pageToken
+      }, pageToken)),
+      /* @__PURE__ */ jsx3("button", {
         type: "button",
-        className: datePickerClearClass,
-        "aria-label": "Clear date range",
-        onClick: () => emitChange([undefined, undefined]),
-        children: "x"
+        className: paginationNextClass,
+        disabled: nextDisabled,
+        "aria-label": "Next page",
+        onClick: () => changePage(mergedCurrent + 1),
+        children: "Next"
+      }),
+      showSizeChanger ? /* @__PURE__ */ jsx3("div", {
+        className: paginationInputClass,
+        children: /* @__PURE__ */ jsx3("select", {
+          "aria-label": "Page size",
+          value: mergedPageSize,
+          disabled,
+          onChange: handlePageSizeChange,
+          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs2("option", {
+            value: option,
+            children: [
+              option,
+              " / page"
+            ]
+          }, option))
+        })
+      }) : null,
+      showQuickJumper && !simple ? /* @__PURE__ */ jsx3("div", {
+        className: paginationInputClass,
+        children: /* @__PURE__ */ jsx3("input", {
+          "aria-label": "Jump to page",
+          type: "number",
+          min: 1,
+          max: pageCount,
+          value: quickJumpValue,
+          disabled,
+          onChange: (event) => setQuickJumpValue(event.currentTarget.value),
+          onKeyDown: handleQuickJumpKeyDown
+        })
       }) : null
     ]
   });
 });
-RangePicker.displayName = "DatePicker.RangePicker";
-function withPicker(picker, displayName) {
-  const Picker = forwardRef((props, ref) => /* @__PURE__ */ jsx3(DatePickerRoot, {
-    ...props,
-    ref,
-    picker
-  }));
-  Picker.displayName = displayName;
-  return Picker;
+Pagination.displayName = "Pagination";
+// src/components/dm-pagination/DmPagination.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultLocale = {
+  refresh: "Refresh",
+  showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
+  showTotalSimple: (total, range) => `${range[0]}-${range[1]} / ${total}`,
+  selected: (selectedTotal) => `, ${selectedTotal} selected`
+};
+function getResponsiveSimple({
+  width,
+  total,
+  showRefresh,
+  showSizeChanger
+}) {
+  let reservedWidth = 0;
+  if (!showRefresh)
+    reservedWidth += 100;
+  if (!showSizeChanger)
+    reservedWidth += 100;
+  if (width < 900 - reservedWidth)
+    return total >= 100;
+  if (width < 1100 - reservedWidth)
+    return total >= 1000;
+  if (width < 1220 - reservedWidth)
+    return total >= 99999;
+  if (width < 1300 - reservedWidth)
+    return total >= 999999;
+  if (width < 1450 - reservedWidth)
+    return total >= 9999999;
+  return false;
 }
-var DatePicker = Object.assign(DatePickerRoot, {
-  RangePicker,
-  WeekPicker: withPicker("week", "DatePicker.WeekPicker"),
-  MonthPicker: withPicker("month", "DatePicker.MonthPicker"),
-  QuarterPicker: withPicker("quarter", "DatePicker.QuarterPicker"),
-  YearPicker: withPicker("year", "DatePicker.YearPicker")
-});
-// src/components/dropdown/Dropdown.tsx
+function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState2(1000);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(([entry]) => {
+      setWidth(entry?.contentRect.width || element.getBoundingClientRect().width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function renderSelected(selectedTotal, locale) {
+  if (!selectedTotal)
+    return null;
+  return /* @__PURE__ */ jsx4("span", {
+    className: dmPaginationSelectedClass,
+    children: locale.selected(selectedTotal)
+  });
+}
+var DmPagination = forwardRef2(({
+  selectedTotal = 0,
+  loading = false,
+  total = 0,
+  showRefresh = true,
+  showPagination = true,
+  wrapperStyle,
+  className,
+  align = "right",
+  showTotalFullMessage = false,
+  showSizeChanger = true,
+  responsiveSimple = true,
+  refresh,
+  simple,
+  showQuickJumper,
+  showTotal,
+  locale,
+  ...props
+}, ref) => {
+  const [measureRef, width] = useElementWidth();
+  const mergedLocale = useMemo2(() => ({ ...defaultLocale, ...locale }), [locale]);
+  const isRefreshVisible = showRefresh && Boolean(refresh);
+  const shouldRender = showPagination || isRefreshVisible;
+  const responsiveSimpleMode = responsiveSimple ? getResponsiveSimple({
+    width,
+    total,
+    showRefresh,
+    showSizeChanger
+  }) : false;
+  const mergedSimple = simple ?? responsiveSimpleMode;
+  const mergedShowQuickJumper = showQuickJumper ?? !mergedSimple;
+  const totalRenderer = useMemo2(() => {
+    if (showTotal)
+      return showTotal;
+    return (nextTotal, range) => {
+      if (Number(nextTotal) === 0)
+        return "";
+      const selected = renderSelected(selectedTotal, mergedLocale);
+      const message = mergedSimple && !showTotalFullMessage ? mergedLocale.showTotalSimple(nextTotal, range, selectedTotal) : mergedLocale.showTotal(nextTotal, range, selectedTotal);
+      return /* @__PURE__ */ jsxs3("span", {
+        title: `${mergedLocale.showTotal(nextTotal, range, selectedTotal)}${selectedTotal ? mergedLocale.selected(selectedTotal) : ""}`,
+        children: [
+          message,
+          selected
+        ]
+      });
+    };
+  }, [
+    mergedLocale,
+    mergedSimple,
+    selectedTotal,
+    showTotal,
+    showTotalFullMessage
+  ]);
+  if (!shouldRender)
+    return null;
+  return /* @__PURE__ */ jsxs3("div", {
+    ref: (element) => {
+      measureRef.current = element;
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref) {
+        ref.current = element;
+      }
+    },
+    className: getDmPaginationClasses({ align, className }),
+    style: wrapperStyle,
+    children: [
+      showPagination ? /* @__PURE__ */ jsx4("div", {
+        className: dmPaginationPagerClass,
+        children: /* @__PURE__ */ jsx4(Pagination, {
+          ...props,
+          total,
+          simple: mergedSimple,
+          showQuickJumper: mergedShowQuickJumper,
+          showSizeChanger,
+          showTotal: totalRenderer
+        })
+      }) : null,
+      isRefreshVisible ? /* @__PURE__ */ jsxs3("button", {
+        type: "button",
+        className: 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 {
-  cloneElement,
-  forwardRef as forwardRef2,
-  isValidElement,
-  useId,
-  useState as useState2
+  forwardRef as forwardRef6,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo5,
+  useState as useState6
 } from "react";
 
-// src/classes/dropdown.ts
-var dropdownWrapperClass = "dropdown-wrapper";
-var dropdownBaseClass = "popover dropdown";
-var dropdownOpenClass = "popover-show dropdown-open";
-var dropdownArrowClass = "popover-arrow dropdown-arrow";
-var dropdownMenuClass = "menu dropdown-menu";
-var dropdownButtonClass = "dropdown-button";
-var dropdownPlacementClasses = {
-  top: "popover-top dropdown-top",
-  bottom: "popover-bottom dropdown-bottom",
-  left: "popover-left dropdown-left",
-  right: "popover-right dropdown-right",
-  topLeft: "popover-top dropdown-top-left",
-  topRight: "popover-top dropdown-top-right",
-  bottomLeft: "popover-bottom dropdown-bottom-left",
-  bottomRight: "popover-bottom dropdown-bottom-right"
-};
-function getDropdownClasses({
-  placement = "bottomLeft",
-  open,
-  arrow,
+// src/classes/dm-search.ts
+var dmSearchBaseClass = "dm-search";
+var dmSearchCompactClass = "dm-search-compact";
+var dmSearchCollapsedClass = "dm-search-collapsed";
+var dmSearchFieldsClass = "dm-search-fields";
+var dmSearchFieldClass = "dm-search-field";
+var dmSearchActionsClass = "dm-search-actions";
+var dmSearchFastFilterClass = "dm-search-fast-filter";
+function getDmSearchClasses({
+  compact,
+  collapsed,
   className
 }) {
-  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+  return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
 }
 
-// src/classes/menu.ts
-var menuBaseClass = "menu";
-var menuShowClass = "menu-show";
-var menuItemClass = "menu-item";
-var menuItemActiveClass = "menu-item-active";
-var menuItemDisabledClass = "menu-item-disabled";
-var menuItemIconClass = "menu-item-icon";
-var menuItemTrailingClass = "menu-item-trailing";
-var menuItemSubmenuClass = "menu-item-submenu";
-var menuDividerClass = "menu-divider";
-var menuLabelClass = "menu-label";
-var menuSubmenuClass = "menu-submenu";
-var menuCompactClass = "menu-compact";
-var menuWideClass = "menu-wide";
-var menuModeClasses = {
-  vertical: "menu-vertical",
-  horizontal: "menu-horizontal",
-  inline: "menu-inline"
+// src/components/date-picker/DatePicker.tsx
+import { forwardRef as forwardRef3, useMemo as useMemo3, useState as useState3 } 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 menuThemeClasses = {
-  light: "",
-  dark: "menu-dark menu-surface-container-highest"
+var datePickerStatusClasses = {
+  error: "datepicker-error",
+  success: "datepicker-success"
 };
-var menuSizeClasses = {
-  sm: menuCompactClass,
-  md: "",
-  lg: menuWideClass
+var datePickerPickerClasses = {
+  date: "",
+  week: "datepicker-week",
+  month: "datepicker-month-picker",
+  quarter: "datepicker-quarter-picker",
+  year: "datepicker-year-picker",
+  time: "datepicker-time-picker"
 };
-function getMenuClasses({
-  mode = "vertical",
-  theme = "light",
+function getDatePickerClasses({
   size = "md",
-  inlineCollapsed,
+  status,
+  picker = "date",
+  open,
   disabled,
+  range,
   className
 }) {
-  return cn(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+  return cn(datePickerBaseClass, datePickerSizeClasses[size], status && datePickerStatusClasses[status], datePickerPickerClasses[picker], open && "datepicker-open", disabled && "datepicker-disabled", range && datePickerRangeClass, className);
 }
-function getMenuItemClasses({
-  active,
-  disabled,
-  danger,
-  submenu,
+function getDatePickerDropdownClasses({
+  open,
   className
 }) {
-  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+  return cn(datePickerDropdownClass, open && datePickerDropdownOpenClass, className);
 }
 
-// src/components/dropdown/Dropdown.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function hasTrigger(triggers, trigger) {
-  return (triggers ?? ["hover"]).includes(trigger);
+// src/components/date-picker/DatePicker.tsx
+import { jsx as jsx5, jsxs as jsxs4 } 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 callHandler(handler, event) {
-  handler?.(event);
+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 renderMenuItem(item, onClick, close) {
-  if (item.type === "divider") {
-    return /* @__PURE__ */ jsx4("li", {
-      className: menuDividerClass
-    }, String(item.key));
-  }
-  return /* @__PURE__ */ jsx4("li", {
-    children: /* @__PURE__ */ jsxs3("button", {
-      type: "button",
-      className: cn(menuItemClass, item.danger && "menu-item-danger", item.className),
-      disabled: item.disabled,
-      onClick: (event) => {
-        onClick?.({ key: String(item.key), item, domEvent: event });
-        close();
-      },
-      children: [
-        item.icon ? /* @__PURE__ */ jsx4("span", {
-          className: "menu-item-icon",
-          children: item.icon
-        }) : null,
-        /* @__PURE__ */ jsx4("span", {
-          children: item.label
-        })
-      ]
-    })
-  }, String(item.key));
+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";
 }
-var DropdownRoot = forwardRef2(({
-  arrow,
-  children,
+function normalizeDateValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+var DatePickerRoot = forwardRef3(({
+  allowClear,
   className,
   defaultOpen,
-  destroyPopupOnHide,
+  defaultValue,
   disabled,
-  dropdownRender,
-  menu,
-  onContextMenu,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
+  disabledDate,
+  onBlur,
+  onChange,
+  onFocus,
   onOpenChange,
   open,
-  overlay,
-  placement = "bottomLeft",
-  trigger = ["hover"],
+  picker = "date",
+  placeholder,
+  presets,
+  showNow,
+  size = "md",
+  status,
+  value,
   ...props
 }, ref) => {
-  const [internalOpen, setInternalOpen] = useState2(Boolean(defaultOpen));
-  const isControlled = open !== undefined;
-  const visible = isControlled ? open : internalOpen;
-  const overlayId = useId();
+  const isValueControlled = value !== undefined;
+  const isOpenControlled = open !== undefined;
+  const [innerValue, setInnerValue] = useState3(() => normalizeDateValue(defaultValue));
+  const [innerOpen, setInnerOpen] = useState3(Boolean(defaultOpen));
+  const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
+  const visible = isOpenControlled ? Boolean(open) : innerOpen;
+  const inputType = inputTypeForPicker(picker);
   function setVisible(nextOpen) {
-    if (disabled)
-      return;
-    if (!isControlled) {
-      setInternalOpen(nextOpen);
+    if (!isOpenControlled) {
+      setInnerOpen(nextOpen);
     }
     onOpenChange?.(nextOpen);
   }
-  const close = () => setVisible(false);
-  const toggleVisible = () => setVisible(!visible);
-  const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx4("ul", {
-    className: dropdownMenuClass,
-    children: menu.items.map((item) => renderMenuItem(item, menu.onClick, close))
-  }) : null);
-  const popup = dropdownRender ? dropdownRender(menuNode) : menuNode;
-  const shouldRenderPopup = !destroyPopupOnHide || visible;
-  const triggerProps = {
-    "aria-controls": visible ? overlayId : undefined,
-    "aria-expanded": visible || undefined,
-    onMouseEnter: hasTrigger(trigger, "hover") ? () => setVisible(true) : undefined,
-    onMouseLeave: hasTrigger(trigger, "hover") ? () => setVisible(false) : undefined,
-    onClick: hasTrigger(trigger, "click") ? toggleVisible : undefined,
-    onContextMenu: hasTrigger(trigger, "contextMenu") ? (event) => {
-      event.preventDefault();
-      toggleVisible();
-    } : undefined
-  };
-  const triggerNode = isValidElement(children) ? cloneElement(children, {
-    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
-    onMouseEnter: (event) => {
-      callHandler(children.props.onMouseEnter, event);
-      triggerProps.onMouseEnter?.();
-      onMouseEnter?.(event);
-    },
-    onMouseLeave: (event) => {
-      callHandler(children.props.onMouseLeave, event);
-      triggerProps.onMouseLeave?.();
-      onMouseLeave?.(event);
-    },
-    onClick: (event) => {
-      callHandler(children.props.onClick, event);
-      triggerProps.onClick?.();
-      onClick?.(event);
-    },
-    onContextMenu: (event) => {
-      callHandler(children.props.onContextMenu, event);
-      triggerProps.onContextMenu?.(event);
-      onContextMenu?.(event);
+  function emitChange(nextValue) {
+    if (nextValue && disabledDate?.(nextValue)) {
+      return;
     }
-  }) : /* @__PURE__ */ jsx4("span", {
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    "aria-disabled": disabled || undefined,
-    "aria-controls": triggerProps["aria-controls"],
-    "aria-expanded": triggerProps["aria-expanded"],
-    onMouseEnter: (event) => {
-      triggerProps.onMouseEnter?.();
-      onMouseEnter?.(event);
-    },
-    onMouseLeave: (event) => {
-      triggerProps.onMouseLeave?.();
-      onMouseLeave?.(event);
-    },
-    onClick: (event) => {
-      triggerProps.onClick?.();
-      onClick?.(event);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        triggerProps.onClick?.();
-      }
-    },
-    onContextMenu: (event) => {
-      triggerProps.onContextMenu?.(event);
-      onContextMenu?.(event);
-    },
-    children
-  });
-  return /* @__PURE__ */ jsxs3("span", {
+    if (!isValueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, nextValue ?? "");
+  }
+  const presetItems = useMemo3(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs4("div", {
     ...props,
     ref,
-    className: dropdownWrapperClass,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      open: visible,
+      disabled,
+      className
+    }),
     children: [
-      triggerNode,
-      shouldRenderPopup ? /* @__PURE__ */ jsxs3("span", {
-        id: overlayId,
-        role: "menu",
-        className: getDropdownClasses({
-          placement,
-          open: visible,
-          arrow,
-          className
-        }),
+      /* @__PURE__ */ jsx5("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__ */ jsx5("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => emitChange(undefined),
+        children: "x"
+      }) : null,
+      /* @__PURE__ */ jsx5("span", {
+        className: datePickerIconClass,
+        "aria-hidden": "true"
+      }),
+      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs4("div", {
+        className: getDatePickerDropdownClasses({ open: visible }),
         children: [
-          popup,
-          arrow ? /* @__PURE__ */ jsx4("span", {
-            className: dropdownArrowClass
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx5("button", {
+            type: "button",
+            className: datePickerPresetClass,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => emitChange(preset.value),
+            children: preset.label
+          }, index)),
+          showNow ? /* @__PURE__ */ jsx5("div", {
+            className: datePickerFooterClass,
+            children: /* @__PURE__ */ jsx5("button", {
+              type: "button",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => emitChange(todayValue(picker)),
+              children: "Now"
+            })
           }) : null
         ]
       }) : null
     ]
   });
 });
-DropdownRoot.displayName = "Dropdown";
-var DropdownButton = forwardRef2(({
-  buttonsRender,
-  children,
+DatePickerRoot.displayName = "DatePicker";
+var RangePicker = forwardRef3(({
+  allowClear,
+  className,
+  defaultValue,
   disabled,
-  menu,
-  onClick,
-  trigger = ["click"],
+  disabledDate,
+  onChange,
+  picker = "date",
+  placeholder,
+  separator = "-",
+  size = "md",
+  status,
+  value,
   ...props
 }, ref) => {
-  const buttons = [
-    /* @__PURE__ */ jsx4(Button, {
-      disabled,
-      onClick,
-      children
-    }, "primary"),
-    /* @__PURE__ */ jsx4(Button, {
-      "aria-label": "Open dropdown",
-      disabled,
-      children: "v"
-    }, "trigger")
-  ];
-  const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
-  return /* @__PURE__ */ jsx4(DropdownRoot, {
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState3(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__ */ jsxs4("div", {
     ...props,
     ref,
-    menu,
-    trigger,
-    disabled,
-    children: /* @__PURE__ */ jsx4("span", {
-      className: dropdownButtonClass,
-      children: renderedButtons
-    })
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      disabled,
+      range: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx5("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__ */ jsx5("span", {
+        className: datePickerSeparatorClass,
+        children: separator
+      }),
+      /* @__PURE__ */ jsx5("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__ */ jsx5("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date range",
+        onClick: () => emitChange([undefined, undefined]),
+        children: "x"
+      }) : null
+    ]
   });
 });
-DropdownButton.displayName = "Dropdown.Button";
-var Dropdown = Object.assign(DropdownRoot, {
-  Button: DropdownButton
+RangePicker.displayName = "DatePicker.RangePicker";
+function withPicker(picker, displayName) {
+  const Picker = forwardRef3((props, ref) => /* @__PURE__ */ jsx5(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/dm-toolbar/DmToolbar.tsx
-import { useMemo as useMemo2 } from "react";
+// src/components/input/Input.tsx
+import {
+  forwardRef as forwardRef4,
+  useImperativeHandle,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
 
-// src/classes/dm-toolbar.ts
-var dmToolbarBaseClass = "dm-toolbar";
-var dmToolbarItemClass = "dm-toolbar-item";
-var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
-var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
-var dmToolbarMoreClass = "dm-toolbar-more";
-function getDmToolbarClasses({ className }) {
-  return cn(dmToolbarBaseClass, className);
-}
-function getDmToolbarItemClasses({
-  primary,
+// src/classes/input.ts
+var inputBaseClass = "input";
+var inputWrapperClass = "input-wrapper";
+var inputAffixWrapperClass = "input-affix-wrapper";
+var inputPrefixClass = "input-prefix";
+var inputSuffixClass = "input-suffix";
+var inputClearClass = "input-clear";
+var inputSearchClass = "input-search";
+var inputSearchButtonClass = "input-search-button";
+var inputPasswordClass = "input-password";
+var inputPasswordToggleClass = "input-password-toggle";
+var inputGroupClass = "input-group";
+var textAreaBaseClass = "textarea";
+var textAreaWrapperClass = "textarea-wrapper";
+var textAreaCountClass = "textarea-counter";
+var textAreaCountExceededClass = "textarea-counter-exceeded";
+var textAreaAutoSizeClass = "textarea-auto-resize";
+var inputVariantClasses = {
+  filled: "input-filled",
+  outlined: "input-outlined"
+};
+var inputSizeClasses = {
+  sm: "input-sm",
+  md: "input-md",
+  lg: "input-lg"
+};
+var inputStatusClasses = {
+  error: "input-error",
+  success: "input-success"
+};
+var textAreaVariantClasses = {
+  filled: "textarea-filled",
+  outlined: "textarea-outlined"
+};
+var textAreaSizeClasses = {
+  sm: "textarea-sm",
+  md: "",
+  lg: "textarea-lg"
+};
+var textAreaStatusClasses = {
+  error: "textarea-error",
+  success: "textarea-success"
+};
+var textAreaResizeClasses = {
+  none: "textarea-resize-none",
+  both: "textarea-resize-both",
+  horizontal: "textarea-resize-horizontal",
+  vertical: "textarea-resize-vertical"
+};
+function getInputClasses({
+  size = "md",
+  status,
+  variant = "outlined",
   className
 }) {
-  return cn(dmToolbarItemClass, primary ? dmToolbarPrimaryItemClass : dmToolbarSecondaryItemClass, className);
-}
-
-// src/components/dm-toolbar/DmToolbar.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function isPrimary(item) {
-  return item.type === "primary";
+  return cn(inputBaseClass, inputVariantClasses[variant], inputSizeClasses[size], status && inputStatusClasses[status], className);
 }
-function renderToolbarItem(item, index) {
-  const {
-    title,
-    menu,
-    type,
-    htmlType = "button",
-    color,
-    appearance,
-    ...buttonPropsWithKey
-  } = item;
-  const buttonProps = { ...buttonPropsWithKey };
-  delete buttonProps.key;
-  const button = /* @__PURE__ */ jsx5(Button, {
-    ...buttonProps,
-    type: htmlType,
-    color: color ?? (type === "primary" ? "primary" : "secondary"),
-    appearance: appearance ?? (type === "primary" ? "filled" : "outline"),
-    children: title
-  });
-  if (!menu?.items?.length)
-    return button;
-  return /* @__PURE__ */ jsx5(Dropdown, {
-    trigger: ["click"],
-    menu,
-    children: button
-  }, `dropdown-${index}`);
+function getInputWrapperClasses({
+  affixed,
+  className
+}) {
+  return cn(inputWrapperClass, affixed && inputAffixWrapperClass, className);
 }
-function toOverflowMenu(items) {
-  return {
-    items: items.map((item, index) => ({
-      key: item.key ?? index,
-      label: item.title,
-      disabled: item.disabled
-    })),
-    onClick: ({ key, domEvent }) => {
-      const target = items.find((item, index) => String(item.key ?? index) === key);
-      target?.onClick?.(domEvent);
-    }
-  };
+function getSearchWrapperClasses({ className }) {
+  return cn(inputSearchClass, className);
 }
-function DmToolbar({
-  items = [],
-  className,
-  style,
-  moreText = "More",
-  maxVisibleSecondaryItems
+function getPasswordWrapperClasses({
+  className
 }) {
-  const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo2(() => {
-    const primaryItems2 = items.filter(isPrimary);
-    const secondaryItems = items.filter((item) => !isPrimary(item));
-    const visibleLimit = maxVisibleSecondaryItems === undefined ? secondaryItems.length : Math.max(0, maxVisibleSecondaryItems);
-    const visibleSecondaryItems2 = visibleLimit === 0 ? [] : secondaryItems.slice(-visibleLimit);
-    const overflowSecondaryItems2 = visibleLimit >= secondaryItems.length ? [] : secondaryItems.slice(0, secondaryItems.length - visibleLimit);
-    return { visibleSecondaryItems: visibleSecondaryItems2, overflowSecondaryItems: overflowSecondaryItems2, primaryItems: primaryItems2 };
-  }, [items, maxVisibleSecondaryItems]);
-  const showMore = overflowSecondaryItems.length > 0;
-  return /* @__PURE__ */ jsxs4("div", {
-    className: getDmToolbarClasses({ className }),
-    style,
-    children: [
-      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx5("span", {
-        className: getDmToolbarItemClasses({}),
-        children: renderToolbarItem(item, index)
-      }, item.key ?? `secondary-${index}`)),
-      showMore ? /* @__PURE__ */ jsx5(Dropdown, {
-        trigger: ["click"],
-        menu: toOverflowMenu(overflowSecondaryItems),
-        children: /* @__PURE__ */ jsx5(Button, {
-          type: "button",
-          className: dmToolbarMoreClass,
-          color: "secondary",
-          appearance: "outline",
-          children: moreText
-        })
-      }) : null,
-      primaryItems.map((item, index) => /* @__PURE__ */ jsx5("span", {
-        className: getDmToolbarItemClasses({ primary: true }),
-        children: renderToolbarItem(item, index)
-      }, item.key ?? `primary-${index}`))
-    ]
-  });
+  return cn(inputPasswordClass, className);
 }
-DmToolbar.displayName = "DmToolbar";
-// src/components/pagination/Pagination.tsx
-import {
-  forwardRef as forwardRef3,
-  useMemo as useMemo3,
-  useState as useState3
-} from "react";
-
-// src/classes/pagination.ts
-var paginationBaseClass = "pagination";
-var paginationItemClass = "pagination-item";
-var paginationItemActiveClass = "pagination-item-active";
-var paginationItemDisabledClass = "pagination-item-disabled";
-var paginationPrevClass = "pagination-prev";
-var paginationNextClass = "pagination-next";
-var paginationEllipsisClass = "pagination-ellipsis";
-var paginationCompactClass = "pagination-compact";
-var paginationInfoClass = "pagination-info";
-var paginationInfoTextClass = "pagination-info-text";
-var paginationInputClass = "pagination-input";
-var paginationResponsiveClass = "pagination-responsive";
-var paginationSizeClasses = {
-  sm: "pagination-sm",
-  md: "",
-  lg: "pagination-lg"
-};
-function getPaginationClasses({
+function getTextAreaClasses({
   size = "md",
-  compact,
+  status,
+  variant = "outlined",
+  resize = "vertical",
+  autoSize,
   className
 }) {
-  return cn(paginationBaseClass, paginationResponsiveClass, paginationSizeClasses[size], compact && paginationCompactClass, className);
+  return cn(textAreaBaseClass, textAreaVariantClasses[variant], textAreaSizeClasses[size], status && textAreaStatusClasses[status], textAreaResizeClasses[resize], autoSize && textAreaAutoSizeClass, className);
 }
-function getPaginationItemClasses({
-  active,
-  disabled
-}) {
-  return cn(paginationItemClass, active && paginationItemActiveClass, disabled && paginationItemDisabledClass);
+function getTextAreaCountClasses({ exceeded }) {
+  return cn(textAreaCountClass, exceeded && textAreaCountExceededClass);
 }
 
-// src/components/pagination/Pagination.tsx
+// src/components/input/Input.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var defaultPageSizeOptions = [10, 20, 50, 100];
-function toPositiveInteger(value, fallback) {
-  if (!Number.isFinite(value) || value === undefined) {
-    return fallback;
-  }
-  return Math.max(1, Math.floor(value));
-}
-function clampPage(page, pageCount) {
-  return Math.min(pageCount, Math.max(1, Math.floor(page)));
-}
-function getPageCount(total, pageSize) {
-  return Math.max(1, Math.ceil(Math.max(0, total) / pageSize));
-}
-function getRange(current, pageSize, total) {
-  if (total <= 0) {
-    return [0, 0];
-  }
-  const start = (current - 1) * pageSize + 1;
-  const end = Math.min(total, current * pageSize);
-  return [start, end];
-}
-function getPageTokens(current, pageCount) {
-  if (pageCount <= 7) {
-    return Array.from({ length: pageCount }, (_, index) => index + 1);
-  }
-  const pages = new Set([1, pageCount, current - 1, current, current + 1]);
-  if (current <= 4) {
-    [2, 3, 4, 5].forEach((page) => pages.add(page));
-  }
-  if (current >= pageCount - 3) {
-    [pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1].forEach((page) => pages.add(page));
+function toTextValue(value) {
+  if (Array.isArray(value)) {
+    return value.join(",");
   }
-  const sortedPages = Array.from(pages).filter((page) => page >= 1 && page <= pageCount).sort((first, second) => first - second);
-  return sortedPages.reduce((tokens, page) => {
-    const previous = tokens[tokens.length - 1];
-    if (typeof previous === "number") {
-      const gap = page - previous;
-      if (gap === 2) {
-        tokens.push(previous + 1);
-      } else if (gap > 2) {
-        tokens.push("ellipsis");
-      }
-    }
-    tokens.push(page);
-    return tokens;
-  }, []);
-}
-function getSizeOptions(pageSize) {
-  return Array.from(new Set([...defaultPageSizeOptions, pageSize])).sort((first, second) => first - second);
+  return value == null ? "" : String(value);
 }
-var Pagination = forwardRef3(({
-  current,
-  defaultCurrent = 1,
-  pageSize,
-  defaultPageSize = 10,
-  total = 0,
-  onChange,
+var InputRoot = forwardRef4(({
+  allowClear,
+  className,
+  defaultValue,
   disabled,
-  simple,
-  showSizeChanger,
-  showQuickJumper,
-  showTotal,
+  onChange,
+  prefix,
   size = "md",
-  className,
+  status,
+  suffix,
+  type = "text",
+  value,
+  variant = "outlined",
   ...props
 }, ref) => {
-  const isCurrentControlled = current !== undefined;
-  const isPageSizeControlled = pageSize !== undefined;
-  const [internalCurrent, setInternalCurrent] = useState3(defaultCurrent);
-  const [internalPageSize, setInternalPageSize] = useState3(defaultPageSize);
-  const [quickJumpValue, setQuickJumpValue] = useState3("");
-  const mergedPageSize = toPositiveInteger(pageSize ?? internalPageSize, defaultPageSize);
-  const pageCount = getPageCount(total, mergedPageSize);
-  const mergedCurrent = clampPage(toPositiveInteger(current ?? internalCurrent, defaultCurrent), pageCount);
-  const pageTokens = useMemo3(() => getPageTokens(mergedCurrent, pageCount), [mergedCurrent, pageCount]);
-  const range = getRange(mergedCurrent, mergedPageSize, total);
-  function changePage(nextPage, nextPageSize = mergedPageSize) {
-    const nextPageCount = getPageCount(total, nextPageSize);
-    const normalizedPage = clampPage(nextPage, nextPageCount);
-    if (!isCurrentControlled) {
-      setInternalCurrent(normalizedPage);
-    }
-    if (!isPageSizeControlled) {
-      setInternalPageSize(nextPageSize);
+  const inputRef = useRef2(null);
+  const [internalValue, setInternalValue] = useState4(() => toTextValue(defaultValue));
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? toTextValue(value) : internalValue;
+  const hasAffix = prefix != null || suffix != null || allowClear;
+  useImperativeHandle(ref, () => inputRef.current);
+  function handleChange(event) {
+    if (!isControlled) {
+      setInternalValue(event.currentTarget.value);
     }
-    onChange?.(normalizedPage, nextPageSize);
-  }
-  function handlePageSizeChange(event) {
-    const nextPageSize = toPositiveInteger(Number(event.currentTarget.value), mergedPageSize);
-    const nextPage = clampPage(mergedCurrent, getPageCount(total, nextPageSize));
-    changePage(nextPage, nextPageSize);
+    onChange?.(event);
   }
-  function jumpToInputPage(value) {
-    const nextPage = Number(value);
-    if (!Number.isFinite(nextPage)) {
+  function handleClear() {
+    const input = inputRef.current;
+    if (!input || disabled) {
       return;
     }
-    changePage(nextPage);
-    setQuickJumpValue("");
-  }
-  function handleQuickJumpKeyDown(event) {
-    if (event.key !== "Enter") {
-      return;
+    input.value = "";
+    if (!isControlled) {
+      setInternalValue("");
     }
-    jumpToInputPage(event.currentTarget.value);
+    onChange?.({
+      currentTarget: input,
+      target: input,
+      type: "change"
+    });
+    input.focus();
   }
-  const previousDisabled = disabled || mergedCurrent <= 1;
-  const nextDisabled = disabled || mergedCurrent >= pageCount;
-  return /* @__PURE__ */ jsxs5("nav", {
+  const control = /* @__PURE__ */ jsx6("input", {
     ...props,
-    ref,
-    className: getPaginationClasses({ size, compact: simple, className }),
+    ref: inputRef,
+    type,
+    className: getInputClasses({ size, status, variant, className }),
+    disabled,
+    value: currentValue,
+    onChange: handleChange
+  });
+  if (!hasAffix) {
+    return control;
+  }
+  const showClear = allowClear && !disabled && currentValue.length > 0;
+  return /* @__PURE__ */ jsxs5("span", {
+    className: getInputWrapperClasses({ affixed: hasAffix }),
     children: [
-      showTotal ? /* @__PURE__ */ jsx6("div", {
-        className: paginationInfoClass,
-        children: /* @__PURE__ */ jsx6("span", {
-          className: paginationInfoTextClass,
-          children: showTotal(total, range)
-        })
+      prefix != null ? /* @__PURE__ */ jsx6("span", {
+        className: inputPrefixClass,
+        children: prefix
       }) : null,
-      /* @__PURE__ */ jsx6("button", {
-        type: "button",
-        className: paginationPrevClass,
-        disabled: previousDisabled,
-        "aria-label": "Previous page",
-        onClick: () => changePage(mergedCurrent - 1),
-        children: "Prev"
-      }),
-      simple ? /* @__PURE__ */ jsxs5("div", {
-        className: paginationInputClass,
-        children: [
-          /* @__PURE__ */ jsx6("input", {
-            "aria-label": "Current page",
-            type: "number",
-            min: 1,
-            max: pageCount,
-            value: quickJumpValue || String(mergedCurrent),
-            disabled,
-            onChange: (event) => setQuickJumpValue(event.currentTarget.value),
-            onKeyDown: handleQuickJumpKeyDown,
-            onBlur: (event) => {
-              if (event.currentTarget.value !== String(mergedCurrent)) {
-                jumpToInputPage(event.currentTarget.value);
-              }
-            }
-          }),
-          /* @__PURE__ */ jsxs5("span", {
-            className: paginationInfoTextClass,
-            children: [
-              "/ ",
-              pageCount
-            ]
-          })
-        ]
-      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx6("span", {
-        "aria-hidden": "true",
-        className: paginationEllipsisClass
-      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx6("button", {
-        type: "button",
-        className: getPaginationItemClasses({
-          active: pageToken === mergedCurrent,
-          disabled
-        }),
-        disabled,
-        "aria-current": pageToken === mergedCurrent ? "page" : undefined,
-        "aria-label": `Page ${pageToken}`,
-        onClick: () => changePage(pageToken),
-        children: pageToken
-      }, pageToken)),
-      /* @__PURE__ */ jsx6("button", {
+      control,
+      showClear ? /* @__PURE__ */ jsx6("button", {
         type: "button",
-        className: paginationNextClass,
-        disabled: nextDisabled,
-        "aria-label": "Next page",
-        onClick: () => changePage(mergedCurrent + 1),
-        children: "Next"
-      }),
-      showSizeChanger ? /* @__PURE__ */ jsx6("div", {
-        className: paginationInputClass,
-        children: /* @__PURE__ */ jsx6("select", {
-          "aria-label": "Page size",
-          value: mergedPageSize,
-          disabled,
-          onChange: handlePageSizeChange,
-          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs5("option", {
-            value: option,
-            children: [
-              option,
-              " / page"
-            ]
-          }, option))
-        })
+        className: inputClearClass,
+        "aria-label": "Clear input",
+        onClick: handleClear,
+        children: "x"
       }) : null,
-      showQuickJumper && !simple ? /* @__PURE__ */ jsx6("div", {
-        className: paginationInputClass,
-        children: /* @__PURE__ */ jsx6("input", {
-          "aria-label": "Jump to page",
-          type: "number",
-          min: 1,
-          max: pageCount,
-          value: quickJumpValue,
-          disabled,
-          onChange: (event) => setQuickJumpValue(event.currentTarget.value),
-          onKeyDown: handleQuickJumpKeyDown
-        })
+      suffix != null ? /* @__PURE__ */ jsx6("span", {
+        className: inputSuffixClass,
+        children: suffix
       }) : null
     ]
   });
 });
-Pagination.displayName = "Pagination";
-// src/components/dm-pagination/DmPagination.tsx
-import {
-  forwardRef as forwardRef4,
-  useEffect,
-  useMemo as useMemo4,
-  useRef,
-  useState as useState4
-} 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({
+InputRoot.displayName = "Input";
+var Search = forwardRef4(({
+  className,
+  disabled,
+  enterButton,
   loading,
-  className
-}) {
-  return cn(dmPaginationRefreshClass, loading && dmPaginationRefreshLoadingClass, className);
-}
-
-// src/components/dm-pagination/DmPagination.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var defaultLocale = {
-  refresh: "Refresh",
-  showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
-  showTotalSimple: (total, range) => `${range[0]}-${range[1]} / ${total}`,
-  selected: (selectedTotal) => `, ${selectedTotal} selected`
-};
-function getResponsiveSimple({
-  width,
-  total,
-  showRefresh,
-  showSizeChanger
-}) {
-  let reservedWidth = 0;
-  if (!showRefresh)
-    reservedWidth += 100;
-  if (!showSizeChanger)
-    reservedWidth += 100;
-  if (width < 900 - reservedWidth)
-    return total >= 100;
-  if (width < 1100 - reservedWidth)
-    return total >= 1000;
-  if (width < 1220 - reservedWidth)
-    return total >= 99999;
-  if (width < 1300 - reservedWidth)
-    return total >= 999999;
-  if (width < 1450 - reservedWidth)
-    return total >= 9999999;
-  return false;
-}
-function useElementWidth() {
-  const ref = useRef(null);
-  const [width, setWidth] = useState4(1000);
-  useEffect(() => {
-    const element = ref.current;
-    if (!element || typeof ResizeObserver === "undefined")
-      return;
-    const observer = new ResizeObserver(([entry]) => {
-      setWidth(entry?.contentRect.width || element.getBoundingClientRect().width);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, []);
-  return [ref, width];
-}
-function renderSelected(selectedTotal, locale) {
-  if (!selectedTotal)
-    return null;
-  return /* @__PURE__ */ jsx7("span", {
-    className: dmPaginationSelectedClass,
-    children: locale.selected(selectedTotal)
-  });
-}
-var DmPagination = forwardRef4(({
-  selectedTotal = 0,
-  loading = false,
-  total = 0,
-  showRefresh = true,
-  showPagination = true,
-  wrapperStyle,
-  className,
-  align = "right",
-  showTotalFullMessage = false,
-  showSizeChanger = true,
-  responsiveSimple = true,
-  refresh,
-  simple,
-  showQuickJumper,
-  showTotal,
-  locale,
+  onKeyDown,
+  onSearch,
   ...props
 }, ref) => {
-  const [measureRef, width] = useElementWidth();
-  const mergedLocale = useMemo4(() => ({ ...defaultLocale, ...locale }), [locale]);
-  const isRefreshVisible = showRefresh && Boolean(refresh);
-  const shouldRender = showPagination || isRefreshVisible;
-  const responsiveSimpleMode = responsiveSimple ? getResponsiveSimple({
-    width,
-    total,
-    showRefresh,
-    showSizeChanger
-  }) : false;
-  const mergedSimple = simple ?? responsiveSimpleMode;
-  const mergedShowQuickJumper = showQuickJumper ?? !mergedSimple;
-  const totalRenderer = useMemo4(() => {
-    if (showTotal)
-      return showTotal;
-    return (nextTotal, range) => {
-      if (Number(nextTotal) === 0)
-        return "";
-      const selected = renderSelected(selectedTotal, mergedLocale);
-      const message = mergedSimple && !showTotalFullMessage ? mergedLocale.showTotalSimple(nextTotal, range, selectedTotal) : mergedLocale.showTotal(nextTotal, range, selectedTotal);
-      return /* @__PURE__ */ jsxs6("span", {
-        title: `${mergedLocale.showTotal(nextTotal, range, selectedTotal)}${selectedTotal ? mergedLocale.selected(selectedTotal) : ""}`,
-        children: [
-          message,
-          selected
-        ]
-      });
-    };
-  }, [
-    mergedLocale,
-    mergedSimple,
-    selectedTotal,
-    showTotal,
-    showTotalFullMessage
-  ]);
-  if (!shouldRender)
-    return null;
-  return /* @__PURE__ */ jsxs6("div", {
-    ref: (element) => {
-      measureRef.current = element;
-      if (typeof ref === "function") {
-        ref(element);
-      } else if (ref) {
-        ref.current = element;
-      }
-    },
-    className: getDmPaginationClasses({ align, className }),
-    style: wrapperStyle,
+  const inputRef = useRef2(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  function emitSearch(event) {
+    onSearch?.(inputRef.current?.value ?? "", event);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "Enter") {
+      emitSearch(event);
+    }
+  }
+  const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
+  return /* @__PURE__ */ jsxs5("span", {
+    className: getSearchWrapperClasses({ className }),
     children: [
-      showPagination ? /* @__PURE__ */ jsx7("div", {
-        className: dmPaginationPagerClass,
-        children: /* @__PURE__ */ jsx7(Pagination, {
-          ...props,
-          total,
-          simple: mergedSimple,
-          showQuickJumper: mergedShowQuickJumper,
-          showSizeChanger,
-          showTotal: totalRenderer
-        })
-      }) : null,
-      isRefreshVisible ? /* @__PURE__ */ jsxs6("button", {
+      /* @__PURE__ */ jsx6(InputRoot, {
+        ...props,
+        ref: inputRef,
+        disabled,
+        onKeyDown: handleKeyDown
+      }),
+      enterButton || loading ? /* @__PURE__ */ jsx6("button", {
         type: "button",
-        className: getDmPaginationRefreshClasses({ loading }),
-        disabled: loading || props.disabled,
+        className: inputSearchButtonClass,
+        disabled: disabled || loading,
         "aria-busy": loading || undefined,
-        onClick: refresh,
-        children: [
-          /* @__PURE__ */ jsx7("span", {
-            "aria-hidden": "true",
-            children: "Reload"
-          }),
-          /* @__PURE__ */ jsx7("span", {
-            children: mergedLocale.refresh
-          })
-        ]
+        onClick: emitSearch,
+        children: loading ? "Loading" : buttonContent
       }) : null
     ]
   });
 });
-DmPagination.displayName = "DmPagination";
-// src/components/input/Input.tsx
-import {
-  forwardRef as forwardRef5,
-  useImperativeHandle,
-  useRef as useRef2,
-  useState as useState5
-} from "react";
-
-// src/classes/input.ts
-var inputBaseClass = "input";
-var inputWrapperClass = "input-wrapper";
-var inputAffixWrapperClass = "input-affix-wrapper";
-var inputPrefixClass = "input-prefix";
-var inputSuffixClass = "input-suffix";
-var inputClearClass = "input-clear";
-var inputSearchClass = "input-search";
-var inputSearchButtonClass = "input-search-button";
-var inputPasswordClass = "input-password";
-var inputPasswordToggleClass = "input-password-toggle";
-var inputGroupClass = "input-group";
-var textAreaBaseClass = "textarea";
-var textAreaWrapperClass = "textarea-wrapper";
-var textAreaCountClass = "textarea-counter";
-var textAreaCountExceededClass = "textarea-counter-exceeded";
-var textAreaAutoSizeClass = "textarea-auto-resize";
-var inputVariantClasses = {
-  filled: "input-filled",
-  outlined: "input-outlined"
-};
-var inputSizeClasses = {
-  sm: "input-sm",
-  md: "input-md",
-  lg: "input-lg"
-};
-var inputStatusClasses = {
-  error: "input-error",
-  success: "input-success"
-};
-var textAreaVariantClasses = {
-  filled: "textarea-filled",
-  outlined: "textarea-outlined"
-};
-var textAreaSizeClasses = {
-  sm: "textarea-sm",
-  md: "",
-  lg: "textarea-lg"
-};
-var textAreaStatusClasses = {
-  error: "textarea-error",
-  success: "textarea-success"
-};
-var textAreaResizeClasses = {
-  none: "textarea-resize-none",
-  both: "textarea-resize-both",
-  horizontal: "textarea-resize-horizontal",
-  vertical: "textarea-resize-vertical"
-};
-function getInputClasses({
+Search.displayName = "Input.Search";
+var Password = forwardRef4(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
+  const [visible, setVisible] = useState4(false);
+  const type = visible ? "text" : "password";
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx6("button", {
+    type: "button",
+    className: inputPasswordToggleClass,
+    disabled,
+    "aria-label": visible ? "Hide password" : "Show password",
+    onClick: () => {
+      setVisible((current) => !current);
+    },
+    children: visible ? "Hide" : "Show"
+  }) : undefined;
+  return /* @__PURE__ */ jsx6("span", {
+    className: getPasswordWrapperClasses({ className }),
+    children: /* @__PURE__ */ jsx6(InputRoot, {
+      ...props,
+      ref,
+      disabled,
+      type,
+      suffix: toggle
+    })
+  });
+});
+Password.displayName = "Input.Password";
+var TextArea = forwardRef4(({
+  autoSize,
+  className,
+  defaultValue,
+  maxLength,
+  onChange,
+  resize = "vertical",
+  showCount,
   size = "md",
   status,
-  variant = "outlined",
-  className
-}) {
-  return cn(inputBaseClass, inputVariantClasses[variant], inputSizeClasses[size], status && inputStatusClasses[status], className);
-}
-function getInputWrapperClasses({
-  affixed,
-  className
-}) {
-  return cn(inputWrapperClass, affixed && inputAffixWrapperClass, className);
-}
-function getSearchWrapperClasses({ className }) {
-  return cn(inputSearchClass, className);
-}
-function getPasswordWrapperClasses({
-  className
-}) {
-  return cn(inputPasswordClass, className);
-}
-function getTextAreaClasses({
-  size = "md",
-  status,
-  variant = "outlined",
-  resize = "vertical",
-  autoSize,
-  className
-}) {
-  return cn(textAreaBaseClass, textAreaVariantClasses[variant], textAreaSizeClasses[size], status && textAreaStatusClasses[status], textAreaResizeClasses[resize], autoSize && textAreaAutoSizeClass, className);
-}
-function getTextAreaCountClasses({ exceeded }) {
-  return cn(textAreaCountClass, exceeded && textAreaCountExceededClass);
-}
-
-// src/components/input/Input.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function toTextValue(value) {
-  if (Array.isArray(value)) {
-    return value.join(",");
-  }
-  return value == null ? "" : String(value);
-}
-var InputRoot = forwardRef5(({
-  allowClear,
-  className,
-  defaultValue,
-  disabled,
-  onChange,
-  prefix,
-  size = "md",
-  status,
-  suffix,
-  type = "text",
-  value,
-  variant = "outlined",
-  ...props
-}, ref) => {
-  const inputRef = useRef2(null);
-  const [internalValue, setInternalValue] = useState5(() => toTextValue(defaultValue));
-  const isControlled = value !== undefined;
-  const currentValue = isControlled ? toTextValue(value) : internalValue;
-  const hasAffix = prefix != null || suffix != null || allowClear;
-  useImperativeHandle(ref, () => inputRef.current);
-  function handleChange(event) {
-    if (!isControlled) {
-      setInternalValue(event.currentTarget.value);
-    }
-    onChange?.(event);
-  }
-  function handleClear() {
-    const input = inputRef.current;
-    if (!input || disabled) {
-      return;
-    }
-    input.value = "";
-    if (!isControlled) {
-      setInternalValue("");
-    }
-    onChange?.({
-      currentTarget: input,
-      target: input,
-      type: "change"
-    });
-    input.focus();
-  }
-  const control = /* @__PURE__ */ jsx8("input", {
-    ...props,
-    ref: inputRef,
-    type,
-    className: getInputClasses({ size, status, variant, className }),
-    disabled,
-    value: currentValue,
-    onChange: handleChange
-  });
-  if (!hasAffix) {
-    return control;
-  }
-  const showClear = allowClear && !disabled && currentValue.length > 0;
-  return /* @__PURE__ */ jsxs7("span", {
-    className: getInputWrapperClasses({ affixed: hasAffix }),
-    children: [
-      prefix != null ? /* @__PURE__ */ jsx8("span", {
-        className: inputPrefixClass,
-        children: prefix
-      }) : null,
-      control,
-      showClear ? /* @__PURE__ */ jsx8("button", {
-        type: "button",
-        className: inputClearClass,
-        "aria-label": "Clear input",
-        onClick: handleClear,
-        children: "x"
-      }) : null,
-      suffix != null ? /* @__PURE__ */ jsx8("span", {
-        className: inputSuffixClass,
-        children: suffix
-      }) : null
-    ]
-  });
-});
-InputRoot.displayName = "Input";
-var Search = forwardRef5(({
-  className,
-  disabled,
-  enterButton,
-  loading,
-  onKeyDown,
-  onSearch,
-  ...props
-}, ref) => {
-  const inputRef = useRef2(null);
-  useImperativeHandle(ref, () => inputRef.current);
-  function emitSearch(event) {
-    onSearch?.(inputRef.current?.value ?? "", event);
-  }
-  function handleKeyDown(event) {
-    onKeyDown?.(event);
-    if (!event.defaultPrevented && event.key === "Enter") {
-      emitSearch(event);
-    }
-  }
-  const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
-  return /* @__PURE__ */ jsxs7("span", {
-    className: getSearchWrapperClasses({ className }),
-    children: [
-      /* @__PURE__ */ jsx8(InputRoot, {
-        ...props,
-        ref: inputRef,
-        disabled,
-        onKeyDown: handleKeyDown
-      }),
-      enterButton || loading ? /* @__PURE__ */ jsx8("button", {
-        type: "button",
-        className: inputSearchButtonClass,
-        disabled: disabled || loading,
-        "aria-busy": loading || undefined,
-        onClick: emitSearch,
-        children: loading ? "Loading" : buttonContent
-      }) : null
-    ]
-  });
-});
-Search.displayName = "Input.Search";
-var Password = forwardRef5(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
-  const [visible, setVisible] = useState5(false);
-  const type = visible ? "text" : "password";
-  const toggle = visibilityToggle ? /* @__PURE__ */ jsx8("button", {
-    type: "button",
-    className: inputPasswordToggleClass,
-    disabled,
-    "aria-label": visible ? "Hide password" : "Show password",
-    onClick: () => {
-      setVisible((current) => !current);
-    },
-    children: visible ? "Hide" : "Show"
-  }) : undefined;
-  return /* @__PURE__ */ jsx8("span", {
-    className: getPasswordWrapperClasses({ className }),
-    children: /* @__PURE__ */ jsx8(InputRoot, {
-      ...props,
-      ref,
-      disabled,
-      type,
-      suffix: toggle
-    })
-  });
-});
-Password.displayName = "Input.Password";
-var TextArea = forwardRef5(({
-  autoSize,
-  className,
-  defaultValue,
-  maxLength,
-  onChange,
-  resize = "vertical",
-  showCount,
-  size = "md",
-  status,
-  value,
+  value,
   variant = "outlined",
   ...props
 }, ref) => {
-  const [internalValue, setInternalValue] = useState5(() => toTextValue(defaultValue));
+  const [internalValue, setInternalValue] = useState4(() => toTextValue(defaultValue));
   const isControlled = value !== undefined;
   const currentValue = isControlled ? toTextValue(value) : internalValue;
   const count = currentValue.length;
@@ -1558,7 +1218,7 @@ var TextArea = forwardRef5(({
     }
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ jsx8("textarea", {
+  const control = /* @__PURE__ */ jsx6("textarea", {
     ...props,
     ref,
     className: getTextAreaClasses({
@@ -1576,11 +1236,11 @@ var TextArea = forwardRef5(({
   if (!showCount) {
     return control;
   }
-  return /* @__PURE__ */ jsxs7("span", {
+  return /* @__PURE__ */ jsxs5("span", {
     className: textAreaWrapperClass,
     children: [
       control,
-      /* @__PURE__ */ jsxs7("span", {
+      /* @__PURE__ */ jsxs5("span", {
         className: getTextAreaCountClasses({ exceeded }),
         children: [
           count,
@@ -1591,7 +1251,7 @@ var TextArea = forwardRef5(({
   });
 });
 TextArea.displayName = "Input.TextArea";
-var Group = forwardRef5(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx8("div", {
+var Group = forwardRef4(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx6("div", {
   ...props,
   ref,
   className: cn(inputGroupClass, className),
@@ -1605,7 +1265,7 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useState as useState6 } from "react";
+import React5, { forwardRef as forwardRef5, useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -1661,7 +1321,7 @@ function getSelectOptionClasses({
 }
 
 // src/components/select/Select.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function isGroup(option) {
   return "options" in option;
 }
@@ -1686,8 +1346,8 @@ function normalizeMultiValue(value) {
 }
 function optionsFromChildren(children) {
   const result = [];
-  React7.Children.forEach(children, (child) => {
-    if (!React7.isValidElement(child)) {
+  React5.Children.forEach(children, (child) => {
+    if (!React5.isValidElement(child)) {
       return;
     }
     if (child.type === Option) {
@@ -1737,19 +1397,19 @@ function filterOptions(options, searchValue, filterOption) {
 function renderValue(option) {
   return option ? optionLabel(option) : null;
 }
-var Option = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx9("div", {
+var Option = forwardRef5(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
   ...props,
   ref,
   children
 }));
 Option.displayName = "Select.Option";
-var OptGroup = forwardRef6(({ children, ...props }, ref) => /* @__PURE__ */ jsx9("div", {
+var OptGroup = forwardRef5(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("div", {
   ...props,
   ref,
   children
 }));
 OptGroup.displayName = "Select.OptGroup";
-var SelectRoot = forwardRef6(({
+var SelectRoot = forwardRef5(({
   allowClear,
   children,
   className,
@@ -1768,11 +1428,11 @@ var SelectRoot = forwardRef6(({
   ...props
 }, ref) => {
   const multiple = mode === "multiple" || mode === "tags";
-  const sourceOptions = useMemo5(() => options ?? optionsFromChildren(children), [children, options]);
-  const flatOptions = useMemo5(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState6(false);
-  const [searchValue, setSearchValue] = useState6("");
-  const [internalValue, setInternalValue] = useState6(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  const 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 controlled = value !== undefined;
   const currentValue = controlled ? value : internalValue;
   const selectedValues = multiple ? normalizeMultiValue(currentValue) : normalizeSingleValue(currentValue) === undefined ? [] : [normalizeSingleValue(currentValue)];
@@ -1829,7 +1489,7 @@ var SelectRoot = forwardRef6(({
   }
   function renderOption(option) {
     const selected = selectedKeys.has(valueKey(option.value));
-    return /* @__PURE__ */ jsx9("button", {
+    return /* @__PURE__ */ jsx7("button", {
       type: "button",
       role: "option",
       "aria-selected": selected,
@@ -1848,11 +1508,11 @@ var SelectRoot = forwardRef6(({
       if (!isGroup(option)) {
         return renderOption(option);
       }
-      return /* @__PURE__ */ jsxs8("div", {
+      return /* @__PURE__ */ jsxs6("div", {
         className: cn(selectGroupClass, option.className),
         role: "group",
         children: [
-          /* @__PURE__ */ jsx9("div", {
+          /* @__PURE__ */ jsx7("div", {
             className: selectGroupLabelClass,
             children: option.label
           }),
@@ -1861,11 +1521,11 @@ var SelectRoot = forwardRef6(({
       }, `group-${index}`);
     });
   }
-  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx9("span", {
+  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx7("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     ...props,
     ref,
     className: getSelectContainerClasses({
@@ -1876,7 +1536,7 @@ var SelectRoot = forwardRef6(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsxs8("button", {
+      /* @__PURE__ */ jsxs6("button", {
         type: "button",
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
@@ -1884,33 +1544,33 @@ var SelectRoot = forwardRef6(({
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
         children: [
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx7("span", {
             className: selectSelectionClass,
-            children: hasValue ? selection : /* @__PURE__ */ jsx9("span", {
+            children: hasValue ? selection : /* @__PURE__ */ jsx7("span", {
               className: selectPlaceholderClass,
               children: placeholder
             })
           }),
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx7("span", {
             className: selectIconClass,
             "aria-hidden": "true",
             children: "v"
           })
         ]
       }),
-      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx9("button", {
+      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx7("button", {
         type: "button",
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
         children: "x"
       }) : null,
-      open ? /* @__PURE__ */ jsxs8("div", {
+      open ? /* @__PURE__ */ jsxs6("div", {
         className: selectDropdownClass,
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
         children: [
-          searchable ? /* @__PURE__ */ jsx9("input", {
+          searchable ? /* @__PURE__ */ jsx7("input", {
             className: selectSearchClass,
             value: searchValue,
             placeholder: typeof placeholder === "string" ? placeholder : undefined,
@@ -1922,7 +1582,7 @@ var SelectRoot = forwardRef6(({
               }
             }
           }) : null,
-          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx9("div", {
+          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx7("div", {
             className: selectEmptyClass,
             children: "No data"
           })
@@ -1936,32 +1596,7 @@ var Select = SelectRoot;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 // src/components/dm-search/DmSearch.tsx
-import {
-  forwardRef as forwardRef7,
-  useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo6,
-  useState as useState7
-} from "react";
-
-// src/classes/dm-search.ts
-var dmSearchBaseClass = "dm-search";
-var dmSearchCompactClass = "dm-search-compact";
-var dmSearchCollapsedClass = "dm-search-collapsed";
-var dmSearchFieldsClass = "dm-search-fields";
-var dmSearchFieldClass = "dm-search-field";
-var dmSearchActionsClass = "dm-search-actions";
-var dmSearchFastFilterClass = "dm-search-fast-filter";
-function getDmSearchClasses({
-  compact,
-  collapsed,
-  className
-}) {
-  return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
-}
-
-// src/components/dm-search/DmSearch.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function initialValues(items, searchParams, useSearchParams = true) {
   return items.reduce((acc, item) => {
     const defaultValue = item.search.extraProps?.value ?? item.search.formProps?.initialValue;
@@ -1985,7 +1620,7 @@ function renderField({
     return item.search.render?.(value, setValue, item) ?? null;
   }
   if (item.search.type === "select") {
-    return /* @__PURE__ */ jsx10(Select, {
+    return /* @__PURE__ */ jsx8(Select, {
       ...extraProps,
       disabled: Boolean(loading || extraProps.disabled),
       value,
@@ -1994,25 +1629,25 @@ function renderField({
     });
   }
   if (item.search.type === "dateRange") {
-    return /* @__PURE__ */ jsx10(DatePicker.RangePicker, {
+    return /* @__PURE__ */ jsx8(DatePicker.RangePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "date") {
-    return /* @__PURE__ */ jsx10(DatePicker, {
+    return /* @__PURE__ */ jsx8(DatePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "radio" || item.search.type === "checkbox") {
-    return /* @__PURE__ */ jsx10("div", {
+    return /* @__PURE__ */ jsx8("div", {
       role: item.search.type === "radio" ? "radiogroup" : "group",
-      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs9("label", {
+      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs7("label", {
         children: [
-          /* @__PURE__ */ jsx10("input", {
+          /* @__PURE__ */ jsx8("input", {
             type: item.search.type,
             disabled: loading,
             checked: item.search.type === "checkbox" ? Array.isArray(value) && value.includes(option.value) : value === option.value,
@@ -2030,7 +1665,7 @@ function renderField({
       }, String(option.value)))
     });
   }
-  return /* @__PURE__ */ jsx10(Input, {
+  return /* @__PURE__ */ jsx8(Input, {
     ...extraProps,
     type: item.search.type === "input-number" ? "number" : "text",
     disabled: Boolean(loading || extraProps.disabled),
@@ -2044,7 +1679,7 @@ function renderField({
     }
   });
 }
-var DmSearch = forwardRef7(({
+var DmSearch = forwardRef6(({
   items = [],
   onSearch,
   extra,
@@ -2057,9 +1692,9 @@ var DmSearch = forwardRef7(({
   enableDefaultPlaceHolder = false,
   className
 }, ref) => {
-  const allItems = useMemo6(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
-  const [collapsed, setCollapsed] = useState7(defaultCollapsed);
-  const [values, setValues] = useState7(() => initialValues(allItems, searchParams));
+  const allItems = useMemo5(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
+  const [collapsed, setCollapsed] = useState6(defaultCollapsed);
+  const [values, setValues] = useState6(() => initialValues(allItems, searchParams));
   const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
   useEffect2(() => {
     setValues(initialValues(allItems, searchParams));
@@ -2074,7 +1709,7 @@ var DmSearch = forwardRef7(({
       reset(false);
     }
   }));
-  return /* @__PURE__ */ jsxs9("form", {
+  return /* @__PURE__ */ jsxs7("form", {
     id: "searchForm",
     className: getDmSearchClasses({ compact, collapsed, className }),
     onSubmit: (event) => {
@@ -2082,16 +1717,16 @@ var DmSearch = forwardRef7(({
       onSearch?.(values);
     },
     children: [
-      fastFilterItem ? /* @__PURE__ */ jsx10("div", {
+      fastFilterItem ? /* @__PURE__ */ jsx8("div", {
         className: dmSearchFastFilterClass,
         children: fastFilterItem.title
       }) : null,
-      /* @__PURE__ */ jsx10("div", {
+      /* @__PURE__ */ jsx8("div", {
         className: dmSearchFieldsClass,
-        children: visibleItems.map((item) => /* @__PURE__ */ jsxs9("label", {
+        children: visibleItems.map((item) => /* @__PURE__ */ jsxs7("label", {
           className: dmSearchFieldClass,
           children: [
-            compact ? null : /* @__PURE__ */ jsx10("span", {
+            compact ? null : /* @__PURE__ */ jsx8("span", {
               children: item.title
             }),
             renderField({
@@ -2107,22 +1742,22 @@ var DmSearch = forwardRef7(({
           ]
         }, item.key))
       }),
-      /* @__PURE__ */ jsxs9("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: dmSearchActionsClass,
         children: [
-          /* @__PURE__ */ jsx10(Button, {
+          /* @__PURE__ */ jsx8(Button, {
             type: "submit",
             isLoading: loading,
             children: "Search"
           }),
-          /* @__PURE__ */ jsx10(Button, {
+          /* @__PURE__ */ jsx8(Button, {
             type: "button",
             color: "secondary",
             appearance: "outline",
             onClick: () => onSearch?.(reset(false)),
             children: "Reset"
           }),
-          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx10(Button, {
+          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx8(Button, {
             type: "button",
             color: "secondary",
             appearance: "text",
@@ -2140,10 +1775,10 @@ var DmSearch = forwardRef7(({
 });
 DmSearch.displayName = "DmSearch";
 // src/components/table/Table.tsx
-import React9, {
-  forwardRef as forwardRef8,
-  useMemo as useMemo7,
-  useState as useState8
+import React7, {
+  forwardRef as forwardRef7,
+  useMemo as useMemo6,
+  useState as useState7
 } from "react";
 
 // src/classes/table.ts
@@ -2193,7 +1828,7 @@ function getTableSorterClasses(active) {
 }
 
 // src/components/table/Table.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 import { createElement } from "react";
 var defaultPageSize = 10;
 var defaultSortDirections = ["ascend", "descend", null];
@@ -2226,8 +1861,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;
@@ -2309,24 +1944,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 = forwardRef8(() => null);
+var Column = forwardRef7(() => null);
 Column.displayName = "Table.Column";
-var ColumnGroup = forwardRef8(() => null);
+var ColumnGroup = forwardRef7(() => null);
 ColumnGroup.displayName = "Table.ColumnGroup";
-var SummaryRow = forwardRef8((props, ref) => /* @__PURE__ */ jsx11("tr", {
+var SummaryRow = forwardRef7((props, ref) => /* @__PURE__ */ jsx9("tr", {
   ...props,
   ref
 }));
 SummaryRow.displayName = "Table.Summary.Row";
-var SummaryCell = forwardRef8(({ index, ...props }, ref) => {
-  return /* @__PURE__ */ jsx11("td", {
+var SummaryCell = forwardRef7(({ index, ...props }, ref) => {
+  return /* @__PURE__ */ jsx9("td", {
     ...props,
     ref
   });
 });
 SummaryCell.displayName = "Table.Summary.Cell";
-var Summary = Object.assign(forwardRef8(({ fixed, ...props }, ref) => {
-  return /* @__PURE__ */ jsx11("tfoot", {
+var Summary = Object.assign(forwardRef7(({ fixed, ...props }, ref) => {
+  return /* @__PURE__ */ jsx9("tfoot", {
     ...props,
     ref
   });
@@ -2336,8 +1971,8 @@ var Summary = Object.assign(forwardRef8(({ fixed, ...props }, ref) => {
 });
 Summary.displayName = "Table.Summary";
 function columnsFromChildren(children) {
-  return React9.Children.toArray(children).flatMap((child) => {
-    if (!React9.isValidElement(child)) {
+  return React7.Children.toArray(children).flatMap((child) => {
+    if (!React7.isValidElement(child)) {
       return [];
     }
     if (child.type === Column) {
@@ -2363,12 +1998,12 @@ function renderSummary(summary, pageData, colSpan) {
     return null;
   }
   const node = summary(pageData);
-  if (React9.isValidElement(node) && node.type === Summary) {
+  if (React7.isValidElement(node) && node.type === Summary) {
     return node;
   }
-  return /* @__PURE__ */ jsx11("tfoot", {
-    children: /* @__PURE__ */ jsx11("tr", {
-      children: /* @__PURE__ */ jsx11("td", {
+  return /* @__PURE__ */ jsx9("tfoot", {
+    children: /* @__PURE__ */ jsx9("tr", {
+      children: /* @__PURE__ */ jsx9("td", {
         className: tableCellClass,
         colSpan,
         children: node
@@ -2412,18 +2047,18 @@ function TableRoot({
   className,
   ...props
 }, ref) {
-  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] = useState8({});
-  const [filterStates, setFilterStates] = useState8({});
-  const [internalCurrent, setInternalCurrent] = useState8(1);
-  const [internalPageSize, setInternalPageSize] = useState8(defaultPageSize);
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState8(rowSelection?.defaultSelectedRowKeys ?? []);
-  const [internalExpandedKeys, setInternalExpandedKeys] = useState8(expandable?.defaultExpandedRowKeys ?? []);
+  const 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 spinning = typeof loading === "object" ? loading.spinning : Boolean(loading);
-  const activeFilters = useMemo7(() => {
+  const activeFilters = useMemo6(() => {
     return leaves.reduce((result, column) => {
       const value = filterValueFor(column, filterStates) ?? null;
       if (value !== null) {
@@ -2432,7 +2067,7 @@ function TableRoot({
       return result;
     }, {});
   }, [filterStates, leaves]);
-  const activeSorter = useMemo7(() => {
+  const activeSorter = useMemo6(() => {
     const column = leaves.find((item) => sortOrderFor(item, sortStates));
     if (!column) {
       return {};
@@ -2444,7 +2079,7 @@ function TableRoot({
       order: sortOrderFor(column, sortStates) ?? null
     };
   }, [leaves, sortStates]);
-  const filteredData = useMemo7(() => {
+  const filteredData = useMemo6(() => {
     return leaves.reduce((records, column) => {
       const values = filterValueFor(column, filterStates);
       if (!values?.length || !column.onFilter) {
@@ -2453,7 +2088,7 @@ function TableRoot({
       return records.filter((record) => values.some((value) => column.onFilter?.(value, record)));
     }, dataSource);
   }, [dataSource, filterStates, leaves]);
-  const sortedData = useMemo7(() => {
+  const sortedData = useMemo6(() => {
     const sorterColumn = leaves.find((column) => sortOrderFor(column, sortStates));
     const order = sorterColumn ? sortOrderFor(sorterColumn, sortStates) : null;
     const compare = sorterColumn ? sortCompare(sorterColumn.sorter) : undefined;
@@ -2596,18 +2231,18 @@ function TableRoot({
       return null;
     }
     if (rowSelection.type === "radio" || rowSelection.hideSelectAll) {
-      return /* @__PURE__ */ jsx11("th", {
+      return /* @__PURE__ */ jsx9("th", {
         className: cn(tableHeaderCellClass, tableSelectionCellClass),
         children: rowSelection.columnTitle
       });
     }
     const pageKeys = pageData.map((record, index) => getRecordKey(record, index, rowKey));
     const allSelected = pageKeys.length > 0 && pageKeys.every((key) => selectedKeySet.has(String(key)));
-    return /* @__PURE__ */ jsx11("th", {
+    return /* @__PURE__ */ jsx9("th", {
       className: cn(tableHeaderCellClass, tableSelectionCellClass),
-      children: /* @__PURE__ */ jsxs10("label", {
+      children: /* @__PURE__ */ jsxs8("label", {
         children: [
-          /* @__PURE__ */ jsx11("input", {
+          /* @__PURE__ */ jsx9("input", {
             type: "checkbox",
             "aria-label": "Select all rows",
             checked: allSelected,
@@ -2634,26 +2269,26 @@ function TableRoot({
         textAlign: column.align,
         ...headerProps.style
       }
-    }, /* @__PURE__ */ jsx11("span", {
+    }, /* @__PURE__ */ jsx9("span", {
       children: title
-    }), column.sorter ? /* @__PURE__ */ jsx11("button", {
+    }), column.sorter ? /* @__PURE__ */ jsx9("button", {
       type: "button",
       className: getTableSorterClasses(Boolean(sortOrder)),
       "aria-label": `Sort ${textFromNode(title, String(column.columnKey))}`,
       onClick: () => changeSorter(column),
       children: sortOrder === "ascend" ? "Asc" : sortOrder === "descend" ? "Desc" : "Sort"
-    }) : null, column.filters?.length ? /* @__PURE__ */ jsxs10("select", {
+    }) : null, column.filters?.length ? /* @__PURE__ */ jsxs8("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__ */ jsx11("option", {
+        column.filterMultiple === false ? /* @__PURE__ */ jsx9("option", {
           value: "",
           children: "All"
         }) : null,
-        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx11("option", {
+        optionValues(column.filters).map((filter) => /* @__PURE__ */ jsx9("option", {
           value: String(filter.value),
           children: filter.text
         }, String(filter.value)))
@@ -2678,14 +2313,14 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const checked = selectedKeySet.has(String(key));
     const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {};
-    const originNode = /* @__PURE__ */ jsx11("input", {
+    const originNode = /* @__PURE__ */ jsx9("input", {
       ...checkboxProps,
       type: rowSelection.type === "radio" ? "radio" : "checkbox",
       "aria-label": `Select row ${index + 1}`,
       checked,
       onChange: (event) => toggleRowSelection(record, index, event)
     });
-    return /* @__PURE__ */ jsx11("td", {
+    return /* @__PURE__ */ jsx9("td", {
       className: cn(tableCellClass, tableSelectionCellClass),
       children: rowSelection.renderCell ? rowSelection.renderCell(checked, record, index, originNode) : originNode
     });
@@ -2697,9 +2332,9 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const expanded = expandedKeySet.has(String(key));
     const expandableRow = expandable.rowExpandable?.(record) ?? true;
-    return /* @__PURE__ */ jsx11("td", {
+    return /* @__PURE__ */ jsx9("td", {
       className: cn(tableCellClass, tableExpandCellClass),
-      children: expandableRow ? /* @__PURE__ */ jsx11("button", {
+      children: expandableRow ? /* @__PURE__ */ jsx9("button", {
         type: "button",
         className: tableExpandButtonClass,
         "aria-label": `${expanded ? "Collapse" : "Expand"} row ${index + 1}`,
@@ -2712,7 +2347,7 @@ function TableRoot({
     const key = getRecordKey(record, index, rowKey);
     const expanded = expandedKeySet.has(String(key));
     const selected = selectedKeySet.has(String(key));
-    const row = /* @__PURE__ */ jsxs10("tr", {
+    const row = /* @__PURE__ */ jsxs8("tr", {
       className: getTableRowClasses({ selected, expanded }),
       onClick: () => {
         if (expandable?.expandRowByClick) {
@@ -2728,12 +2363,12 @@ function TableRoot({
     if (!expanded || !expandable?.expandedRowRender) {
       return row;
     }
-    return /* @__PURE__ */ jsxs10(React9.Fragment, {
+    return /* @__PURE__ */ jsxs8(React7.Fragment, {
       children: [
         row,
-        /* @__PURE__ */ jsx11("tr", {
+        /* @__PURE__ */ jsx9("tr", {
           className: "table-expanded-row",
-          children: /* @__PURE__ */ jsx11("td", {
+          children: /* @__PURE__ */ jsx9("td", {
             className: tableCellClass,
             colSpan: structuralColumnCount,
             children: expandable.expandedRowRender(record, index, 0, expanded)
@@ -2742,15 +2377,15 @@ function TableRoot({
       ]
     }, String(key));
   }
-  const tableNode = /* @__PURE__ */ jsxs10("table", {
+  const tableNode = /* @__PURE__ */ jsxs8("table", {
     className: getTableClasses({ bordered, size }),
     style: { tableLayout },
     children: [
-      /* @__PURE__ */ jsx11("thead", {
-        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs10("tr", {
+      /* @__PURE__ */ jsx9("thead", {
+        children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsxs8("tr", {
           children: [
             rowIndex === 0 ? renderSelectionHeader() : null,
-            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx11("th", {
+            rowIndex === 0 && hasExpandable ? /* @__PURE__ */ jsx9("th", {
               className: cn(tableHeaderCellClass, tableExpandCellClass),
               children: expandable?.columnTitle
             }) : null,
@@ -2758,9 +2393,9 @@ function TableRoot({
           ]
         }, rowIndex))
       }),
-      /* @__PURE__ */ jsx11("tbody", {
-        children: bodyEmpty ? /* @__PURE__ */ jsx11("tr", {
-          children: /* @__PURE__ */ jsx11("td", {
+      /* @__PURE__ */ jsx9("tbody", {
+        children: bodyEmpty ? /* @__PURE__ */ jsx9("tr", {
+          children: /* @__PURE__ */ jsx9("td", {
             className: tableEmptyClass,
             colSpan: structuralColumnCount,
             children: locale?.emptyText ?? "No data"
@@ -2770,12 +2405,12 @@ function TableRoot({
       renderSummary(summary, pageData, structuralColumnCount)
     ]
   });
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     ...props,
     ref,
     className: getTableWrapperClasses({ loading: spinning, className }),
     children: [
-      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx11("div", {
+      scroll?.x || scroll?.y ? /* @__PURE__ */ jsx9("div", {
         style: {
           overflow: "auto",
           maxHeight: scroll.y,
@@ -2783,30 +2418,30 @@ function TableRoot({
         },
         children: tableNode
       }) : tableNode,
-      spinning ? /* @__PURE__ */ jsx11("div", {
+      spinning ? /* @__PURE__ */ jsx9("div", {
         className: tableLoadingIndicatorClass,
         role: "status",
         children: typeof loading === "object" && loading.indicator ? loading.indicator : "Loading"
       }) : null,
-      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs10("nav", {
+      paginationConfig && !(paginationConfig.hideOnSinglePage && pageCount <= 1) ? /* @__PURE__ */ jsxs8("nav", {
         className: tablePaginationClass,
         "aria-label": "Table pagination",
         children: [
-          /* @__PURE__ */ jsx11("button", {
+          /* @__PURE__ */ jsx9("button", {
             type: "button",
             className: tablePaginationButtonClass,
             disabled: paginationConfig.disabled || current <= 1,
             onClick: () => changePage(current - 1),
             children: "Previous"
           }),
-          /* @__PURE__ */ jsx11("span", {
+          /* @__PURE__ */ jsx9("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__ */ jsx11("button", {
+          /* @__PURE__ */ jsx9("button", {
             type: "button",
             className: tablePaginationButtonClass,
             disabled: paginationConfig.disabled || current >= pageCount,
@@ -2817,198 +2452,563 @@ function TableRoot({
       }) : null
     ]
   });
-}
-var TableWithRef = forwardRef8(TableRoot);
-var Table = Object.assign(TableWithRef, {
-  Column,
-  ColumnGroup,
-  Summary,
-  SELECTION_ALL: "SELECT_ALL",
-  SELECTION_INVERT: "SELECT_INVERT",
-  SELECTION_NONE: "SELECT_NONE",
-  SELECTION_COLUMN: "SELECTION_COLUMN",
-  EXPAND_COLUMN: "EXPAND_COLUMN"
+}
+var TableWithRef = forwardRef7(TableRoot);
+var Table = Object.assign(TableWithRef, {
+  Column,
+  ColumnGroup,
+  Summary,
+  SELECTION_ALL: "SELECT_ALL",
+  SELECTION_INVERT: "SELECT_INVERT",
+  SELECTION_NONE: "SELECT_NONE",
+  SELECTION_COLUMN: "SELECTION_COLUMN",
+  EXPAND_COLUMN: "EXPAND_COLUMN"
+});
+Table.displayName = "Table";
+// src/components/dm-table/DmTable.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function mapAndFilter(list, mapper) {
+  return list.map(mapper).filter((item) => item !== false && item != null);
+}
+function filterDmTableColumn(column) {
+  if (column.onlySearch || column.hideInTable)
+    return false;
+  if (Array.isArray(column.children)) {
+    const children = mapAndFilter(column.children, filterDmTableColumn);
+    return children.length > 0 ? { ...column, children } : null;
+  }
+  return column;
+}
+function filterSearchColumn(column) {
+  if (Array.isArray(column.children)) {
+    const children = mapAndFilter(column.children, filterSearchColumn);
+    return children.length > 0 ? { ...column, children } : null;
+  }
+  return column.search ? column : false;
+}
+function flattenSearchColumns(column) {
+  return Array.isArray(column.children) ? column.children.flatMap(flattenSearchColumns) : [column];
+}
+function searchItems(columns) {
+  return mapAndFilter(columns, filterSearchColumn).flatMap(flattenSearchColumns).map((column) => ({
+    key: String(column.key ?? column.dataIndex),
+    title: column.title,
+    dataIndex: String(column.dataIndex ?? column.key),
+    search: column.search || {
+      type: "input",
+      extraProps: {},
+      formProps: {}
+    }
+  }));
+}
+function DmTable({
+  name,
+  extra,
+  indicators,
+  pagination,
+  columns: inputColumns,
+  columnSettingVisible = true,
+  onColumnsChange,
+  columnState,
+  searchProps,
+  tableExtra,
+  className,
+  dataSource,
+  rowSelection,
+  ...props
+}) {
+  const tableColumns = useMemo7(() => mapAndFilter(inputColumns, filterDmTableColumn), [inputColumns]);
+  const [columns, setColumns] = useState8(tableColumns);
+  const [columnSettingsOpen, setColumnSettingsOpen] = useState8(false);
+  const items = searchProps?.items?.length ? searchProps.items : searchItems(inputColumns);
+  const paginationObj = typeof pagination === "object" ? pagination : undefined;
+  const paginationProps = paginationObj ? Object.fromEntries(Object.entries(paginationObj).filter(([key]) => key !== "ref")) : {};
+  const total = paginationObj?.total ?? dataSource?.length ?? 0;
+  const selectedTotal = rowSelection?.selectedRowKeys?.length ?? 0;
+  function resetColumns() {
+    setColumns(tableColumns);
+    onColumnsChange?.(tableColumns);
+    if (columnState?.persistenceKey) {
+      globalThis.localStorage?.removeItem(columnState.persistenceKey);
+    }
+  }
+  return /* @__PURE__ */ jsxs9("div", {
+    className: getDmTableClasses({ className }),
+    children: [
+      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx10(Card, {
+        className: dmTableSearchClass,
+        padding: "md",
+        children: /* @__PURE__ */ jsx10(DmSearch, {
+          ...searchProps,
+          items
+        })
+      }) : null,
+      indicators ? /* @__PURE__ */ jsx10("div", {
+        className: dmTableIndicatorsClass,
+        children: indicators
+      }) : null,
+      /* @__PURE__ */ jsxs9(Card, {
+        className: dmTableCardClass,
+        padding: "md",
+        children: [
+          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs9("div", {
+            className: dmTableHeaderClass,
+            children: [
+              /* @__PURE__ */ jsx10("div", {
+                className: dmTableTitleClass,
+                children: name
+              }),
+              /* @__PURE__ */ jsxs9("div", {
+                className: dmTableExtraClass,
+                children: [
+                  extra,
+                  columnSettingVisible ? /* @__PURE__ */ jsx10(Button, {
+                    type: "button",
+                    color: "secondary",
+                    appearance: "outline",
+                    className: dmTableColumnSettingClass,
+                    onClick: () => setColumnSettingsOpen((open) => !open),
+                    children: "Columns"
+                  }) : null
+                ]
+              })
+            ]
+          }) : null,
+          columnSettingsOpen ? /* @__PURE__ */ jsx10("div", {
+            role: "dialog",
+            "aria-label": "Column settings",
+            children: /* @__PURE__ */ jsx10(Button, {
+              type: "button",
+              onClick: resetColumns,
+              children: "Reset columns"
+            })
+          }) : null,
+          tableExtra ? /* @__PURE__ */ jsx10("div", {
+            className: dmTableTableExtraClass,
+            children: tableExtra
+          }) : null,
+          /* @__PURE__ */ jsx10(Table, {
+            ...props,
+            dataSource,
+            rowSelection,
+            size: props.size ?? "small",
+            scroll: props.scroll ?? { x: 680 },
+            columns,
+            pagination: pagination ? {
+              current: paginationObj?.current,
+              defaultCurrent: paginationObj?.defaultCurrent,
+              pageSize: paginationObj?.pageSize,
+              defaultPageSize: paginationObj?.defaultPageSize,
+              total,
+              onChange: paginationObj?.onChange
+            } : false
+          }),
+          pagination ? /* @__PURE__ */ jsx10(DmPagination, {
+            ...paginationProps,
+            className: dmTablePaginationClass,
+            total,
+            selectedTotal,
+            showSizeChanger: true
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+DmTable.displayName = "DmTable";
+// src/components/dm-toolbar/DmToolbar.tsx
+import { useMemo as useMemo8 } from "react";
+
+// src/classes/dm-toolbar.ts
+var dmToolbarBaseClass = "dm-toolbar";
+var dmToolbarItemClass = "dm-toolbar-item";
+var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
+var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
+var dmToolbarMoreClass = "dm-toolbar-more";
+function getDmToolbarClasses({ className }) {
+  return cn(dmToolbarBaseClass, className);
+}
+function getDmToolbarItemClasses({
+  primary,
+  className
+}) {
+  return cn(dmToolbarItemClass, primary ? dmToolbarPrimaryItemClass : dmToolbarSecondaryItemClass, className);
+}
+
+// src/components/dropdown/Dropdown.tsx
+import {
+  cloneElement,
+  forwardRef as forwardRef8,
+  isValidElement,
+  useId,
+  useState as useState9
+} from "react";
+
+// src/classes/dropdown.ts
+var dropdownWrapperClass = "dropdown-wrapper";
+var dropdownBaseClass = "popover dropdown";
+var dropdownOpenClass = "popover-show dropdown-open";
+var dropdownArrowClass = "popover-arrow dropdown-arrow";
+var dropdownMenuClass = "menu dropdown-menu";
+var dropdownButtonClass = "dropdown-button";
+var dropdownPlacementClasses = {
+  top: "popover-top dropdown-top",
+  bottom: "popover-bottom dropdown-bottom",
+  left: "popover-left dropdown-left",
+  right: "popover-right dropdown-right",
+  topLeft: "popover-top dropdown-top-left",
+  topRight: "popover-top dropdown-top-right",
+  bottomLeft: "popover-bottom dropdown-bottom-left",
+  bottomRight: "popover-bottom dropdown-bottom-right"
+};
+function getDropdownClasses({
+  placement = "bottomLeft",
+  open,
+  arrow,
+  className
+}) {
+  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+}
+
+// src/classes/menu.ts
+var menuBaseClass = "menu";
+var menuShowClass = "menu-show";
+var menuItemClass = "menu-item";
+var menuItemActiveClass = "menu-item-active";
+var menuItemDisabledClass = "menu-item-disabled";
+var menuItemIconClass = "menu-item-icon";
+var menuItemTrailingClass = "menu-item-trailing";
+var menuItemSubmenuClass = "menu-item-submenu";
+var menuDividerClass = "menu-divider";
+var menuLabelClass = "menu-label";
+var menuSubmenuClass = "menu-submenu";
+var menuCompactClass = "menu-compact";
+var menuWideClass = "menu-wide";
+var menuModeClasses = {
+  vertical: "menu-vertical",
+  horizontal: "menu-horizontal",
+  inline: "menu-inline"
+};
+var menuThemeClasses = {
+  light: "",
+  dark: "menu-dark menu-surface-container-highest"
+};
+var menuSizeClasses = {
+  sm: menuCompactClass,
+  md: "",
+  lg: menuWideClass
+};
+function getMenuClasses({
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  inlineCollapsed,
+  disabled,
+  className
+}) {
+  return cn(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+}
+function getMenuItemClasses({
+  active,
+  disabled,
+  danger,
+  submenu,
+  className
+}) {
+  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+}
+
+// src/components/dropdown/Dropdown.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function hasTrigger(triggers, trigger) {
+  return (triggers ?? ["hover"]).includes(trigger);
+}
+function callHandler(handler, event) {
+  handler?.(event);
+}
+function renderMenuItem(item, onClick, close) {
+  if (item.type === "divider") {
+    return /* @__PURE__ */ jsx11("li", {
+      className: menuDividerClass
+    }, String(item.key));
+  }
+  return /* @__PURE__ */ jsx11("li", {
+    children: /* @__PURE__ */ jsxs10("button", {
+      type: "button",
+      className: cn(menuItemClass, item.danger && "menu-item-danger", item.className),
+      disabled: item.disabled,
+      onClick: (event) => {
+        onClick?.({ key: String(item.key), item, domEvent: event });
+        close();
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsx11("span", {
+          className: "menu-item-icon",
+          children: item.icon
+        }) : null,
+        /* @__PURE__ */ jsx11("span", {
+          children: item.label
+        })
+      ]
+    })
+  }, String(item.key));
+}
+var DropdownRoot = forwardRef8(({
+  arrow,
+  children,
+  className,
+  defaultOpen,
+  destroyPopupOnHide,
+  disabled,
+  dropdownRender,
+  menu,
+  onContextMenu,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onOpenChange,
+  open,
+  overlay,
+  placement = "bottomLeft",
+  trigger = ["hover"],
+  ...props
+}, ref) => {
+  const [internalOpen, setInternalOpen] = useState9(Boolean(defaultOpen));
+  const isControlled = open !== undefined;
+  const visible = isControlled ? open : internalOpen;
+  const overlayId = useId();
+  function setVisible(nextOpen) {
+    if (disabled)
+      return;
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  const close = () => setVisible(false);
+  const toggleVisible = () => setVisible(!visible);
+  const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx11("ul", {
+    className: dropdownMenuClass,
+    children: menu.items.map((item) => renderMenuItem(item, menu.onClick, close))
+  }) : null);
+  const popup = dropdownRender ? dropdownRender(menuNode) : menuNode;
+  const shouldRenderPopup = !destroyPopupOnHide || visible;
+  const triggerProps = {
+    "aria-controls": visible ? overlayId : undefined,
+    "aria-expanded": visible || undefined,
+    onMouseEnter: hasTrigger(trigger, "hover") ? () => setVisible(true) : undefined,
+    onMouseLeave: hasTrigger(trigger, "hover") ? () => setVisible(false) : undefined,
+    onClick: hasTrigger(trigger, "click") ? toggleVisible : undefined,
+    onContextMenu: hasTrigger(trigger, "contextMenu") ? (event) => {
+      event.preventDefault();
+      toggleVisible();
+    } : undefined
+  };
+  const triggerNode = isValidElement(children) ? cloneElement(children, {
+    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
+    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
+    onMouseEnter: (event) => {
+      callHandler(children.props.onMouseEnter, event);
+      triggerProps.onMouseEnter?.();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      callHandler(children.props.onMouseLeave, event);
+      triggerProps.onMouseLeave?.();
+      onMouseLeave?.(event);
+    },
+    onClick: (event) => {
+      callHandler(children.props.onClick, event);
+      triggerProps.onClick?.();
+      onClick?.(event);
+    },
+    onContextMenu: (event) => {
+      callHandler(children.props.onContextMenu, event);
+      triggerProps.onContextMenu?.(event);
+      onContextMenu?.(event);
+    }
+  }) : /* @__PURE__ */ jsx11("span", {
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled || undefined,
+    "aria-controls": triggerProps["aria-controls"],
+    "aria-expanded": triggerProps["aria-expanded"],
+    onMouseEnter: (event) => {
+      triggerProps.onMouseEnter?.();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      triggerProps.onMouseLeave?.();
+      onMouseLeave?.(event);
+    },
+    onClick: (event) => {
+      triggerProps.onClick?.();
+      onClick?.(event);
+    },
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        triggerProps.onClick?.();
+      }
+    },
+    onContextMenu: (event) => {
+      triggerProps.onContextMenu?.(event);
+      onContextMenu?.(event);
+    },
+    children
+  });
+  return /* @__PURE__ */ jsxs10("span", {
+    ...props,
+    ref,
+    className: dropdownWrapperClass,
+    children: [
+      triggerNode,
+      shouldRenderPopup ? /* @__PURE__ */ jsxs10("span", {
+        id: overlayId,
+        role: "menu",
+        className: getDropdownClasses({
+          placement,
+          open: visible,
+          arrow,
+          className
+        }),
+        children: [
+          popup,
+          arrow ? /* @__PURE__ */ jsx11("span", {
+            className: dropdownArrowClass
+          }) : null
+        ]
+      }) : null
+    ]
+  });
 });
-Table.displayName = "Table";
-// src/components/dm-table/DmTable.tsx
-import { useMemo as useMemo8, useState as useState9 } from "react";
-
-// src/classes/dm-table.ts
-var dmTableBaseClass = "dm-table";
-var dmTableSearchClass = "dm-table-search";
-var dmTableCardClass = "dm-table-card";
-var dmTableHeaderClass = "dm-table-header";
-var dmTableTitleClass = "dm-table-title";
-var dmTableExtraClass = "dm-table-extra";
-var dmTableIndicatorsClass = "dm-table-indicators";
-var dmTableTableExtraClass = "dm-table-table-extra";
-var dmTableColumnSettingClass = "dm-table-column-setting";
-var dmTablePaginationClass = "dm-table-pagination";
-function getDmTableClasses({ className }) {
-  return cn(dmTableBaseClass, className);
-}
-
-// src/components/dm-table/DmTable.tsx
+DropdownRoot.displayName = "Dropdown";
+var DropdownButton = forwardRef8(({
+  buttonsRender,
+  children,
+  disabled,
+  menu,
+  onClick,
+  trigger = ["click"],
+  ...props
+}, ref) => {
+  const buttons = [
+    /* @__PURE__ */ jsx11(Button, {
+      disabled,
+      onClick,
+      children
+    }, "primary"),
+    /* @__PURE__ */ jsx11(Button, {
+      "aria-label": "Open dropdown",
+      disabled,
+      children: "v"
+    }, "trigger")
+  ];
+  const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
+  return /* @__PURE__ */ jsx11(DropdownRoot, {
+    ...props,
+    ref,
+    menu,
+    trigger,
+    disabled,
+    children: /* @__PURE__ */ jsx11("span", {
+      className: dropdownButtonClass,
+      children: renderedButtons
+    })
+  });
+});
+DropdownButton.displayName = "Dropdown.Button";
+var Dropdown = Object.assign(DropdownRoot, {
+  Button: DropdownButton
+});
+// src/components/dm-toolbar/DmToolbar.tsx
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function mapAndFilter(list, mapper) {
-  return list.map(mapper).filter((item) => item !== false && item != null);
-}
-function filterDmTableColumn(column) {
-  if (column.onlySearch || column.hideInTable)
-    return false;
-  if (Array.isArray(column.children)) {
-    const children = mapAndFilter(column.children, filterDmTableColumn);
-    return children.length > 0 ? { ...column, children } : null;
-  }
-  return column;
-}
-function filterSearchColumn(column) {
-  if (Array.isArray(column.children)) {
-    const children = mapAndFilter(column.children, filterSearchColumn);
-    return children.length > 0 ? { ...column, children } : null;
-  }
-  return column.search ? column : false;
+function isPrimary(item) {
+  return item.type === "primary";
 }
-function flattenSearchColumns(column) {
-  return Array.isArray(column.children) ? column.children.flatMap(flattenSearchColumns) : [column];
+function renderToolbarItem(item, index) {
+  const {
+    title,
+    menu,
+    type,
+    htmlType = "button",
+    color,
+    appearance,
+    ...buttonPropsWithKey
+  } = item;
+  const buttonProps = { ...buttonPropsWithKey };
+  delete buttonProps.key;
+  const button = /* @__PURE__ */ jsx12(Button, {
+    ...buttonProps,
+    type: htmlType,
+    color: color ?? (type === "primary" ? "primary" : "secondary"),
+    appearance: appearance ?? (type === "primary" ? "filled" : "outline"),
+    children: title
+  });
+  if (!menu?.items?.length)
+    return button;
+  return /* @__PURE__ */ jsx12(Dropdown, {
+    trigger: ["click"],
+    menu,
+    children: button
+  }, `dropdown-${index}`);
 }
-function searchItems(columns) {
-  return mapAndFilter(columns, filterSearchColumn).flatMap(flattenSearchColumns).map((column) => ({
-    key: String(column.key ?? column.dataIndex),
-    title: column.title,
-    dataIndex: String(column.dataIndex ?? column.key),
-    search: column.search || {
-      type: "input",
-      extraProps: {},
-      formProps: {}
+function toOverflowMenu(items) {
+  return {
+    items: items.map((item, index) => ({
+      key: item.key ?? index,
+      label: item.title,
+      disabled: item.disabled
+    })),
+    onClick: ({ key, domEvent }) => {
+      const target = items.find((item, index) => String(item.key ?? index) === key);
+      target?.onClick?.(domEvent);
     }
-  }));
+  };
 }
-function DmTable({
-  name,
-  extra,
-  indicators,
-  pagination,
-  columns: inputColumns,
-  columnSettingVisible = true,
-  onColumnsChange,
-  columnState,
-  searchProps,
-  tableExtra,
+function DmToolbar({
+  items = [],
   className,
-  dataSource,
-  rowSelection,
-  ...props
+  style,
+  moreText = "More",
+  maxVisibleSecondaryItems
 }) {
-  const tableColumns = useMemo8(() => mapAndFilter(inputColumns, filterDmTableColumn), [inputColumns]);
-  const [columns, setColumns] = useState9(tableColumns);
-  const [columnSettingsOpen, setColumnSettingsOpen] = useState9(false);
-  const items = searchProps?.items?.length ? searchProps.items : searchItems(inputColumns);
-  const paginationObj = typeof pagination === "object" ? pagination : undefined;
-  const paginationProps = paginationObj ? Object.fromEntries(Object.entries(paginationObj).filter(([key]) => key !== "ref")) : {};
-  const total = paginationObj?.total ?? dataSource?.length ?? 0;
-  const selectedTotal = rowSelection?.selectedRowKeys?.length ?? 0;
-  function resetColumns() {
-    setColumns(tableColumns);
-    onColumnsChange?.(tableColumns);
-    if (columnState?.persistenceKey) {
-      globalThis.localStorage?.removeItem(columnState.persistenceKey);
-    }
-  }
+  const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo8(() => {
+    const primaryItems = items.filter(isPrimary);
+    const secondaryItems = items.filter((item) => !isPrimary(item));
+    const visibleLimit = maxVisibleSecondaryItems === undefined ? secondaryItems.length : Math.max(0, maxVisibleSecondaryItems);
+    const visibleSecondaryItems = visibleLimit === 0 ? [] : secondaryItems.slice(-visibleLimit);
+    const overflowSecondaryItems = visibleLimit >= secondaryItems.length ? [] : secondaryItems.slice(0, secondaryItems.length - visibleLimit);
+    return { visibleSecondaryItems, overflowSecondaryItems, primaryItems };
+  }, [items, maxVisibleSecondaryItems]);
+  const showMore = overflowSecondaryItems.length > 0;
   return /* @__PURE__ */ jsxs11("div", {
-    className: getDmTableClasses({ className }),
+    className: getDmToolbarClasses({ className }),
+    style,
     children: [
-      items.length > 0 || searchProps?.fastFilterItem ? /* @__PURE__ */ jsx12(Card, {
-        className: dmTableSearchClass,
-        padding: "md",
-        children: /* @__PURE__ */ jsx12(DmSearch, {
-          ...searchProps,
-          items
+      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx12("span", {
+        className: getDmToolbarItemClasses({}),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `secondary-${index}`)),
+      showMore ? /* @__PURE__ */ jsx12(Dropdown, {
+        trigger: ["click"],
+        menu: toOverflowMenu(overflowSecondaryItems),
+        children: /* @__PURE__ */ jsx12(Button, {
+          type: "button",
+          className: dmToolbarMoreClass,
+          color: "secondary",
+          appearance: "outline",
+          children: moreText
         })
       }) : null,
-      indicators ? /* @__PURE__ */ jsx12("div", {
-        className: dmTableIndicatorsClass,
-        children: indicators
-      }) : null,
-      /* @__PURE__ */ jsxs11(Card, {
-        className: dmTableCardClass,
-        padding: "md",
-        children: [
-          name || extra || columnSettingVisible ? /* @__PURE__ */ jsxs11("div", {
-            className: dmTableHeaderClass,
-            children: [
-              /* @__PURE__ */ jsx12("div", {
-                className: dmTableTitleClass,
-                children: name
-              }),
-              /* @__PURE__ */ jsxs11("div", {
-                className: dmTableExtraClass,
-                children: [
-                  extra,
-                  columnSettingVisible ? /* @__PURE__ */ jsx12(Button, {
-                    type: "button",
-                    color: "secondary",
-                    appearance: "outline",
-                    className: dmTableColumnSettingClass,
-                    onClick: () => setColumnSettingsOpen((open) => !open),
-                    children: "Columns"
-                  }) : null
-                ]
-              })
-            ]
-          }) : null,
-          columnSettingsOpen ? /* @__PURE__ */ jsx12("div", {
-            role: "dialog",
-            "aria-label": "Column settings",
-            children: /* @__PURE__ */ jsx12(Button, {
-              type: "button",
-              onClick: resetColumns,
-              children: "Reset columns"
-            })
-          }) : null,
-          tableExtra ? /* @__PURE__ */ jsx12("div", {
-            className: dmTableTableExtraClass,
-            children: tableExtra
-          }) : null,
-          /* @__PURE__ */ jsx12(Table, {
-            ...props,
-            dataSource,
-            rowSelection,
-            size: props.size ?? "small",
-            scroll: props.scroll ?? { x: 680 },
-            columns,
-            pagination: pagination ? {
-              current: paginationObj?.current,
-              defaultCurrent: paginationObj?.defaultCurrent,
-              pageSize: paginationObj?.pageSize,
-              defaultPageSize: paginationObj?.defaultPageSize,
-              total,
-              onChange: paginationObj?.onChange
-            } : false
-          }),
-          pagination ? /* @__PURE__ */ jsx12(DmPagination, {
-            ...paginationProps,
-            className: dmTablePaginationClass,
-            total,
-            selectedTotal,
-            showSizeChanger: true
-          }) : null
-        ]
-      })
+      primaryItems.map((item, index) => /* @__PURE__ */ jsx12("span", {
+        className: getDmToolbarItemClasses({ primary: true }),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `primary-${index}`))
     ]
   });
 }
-DmTable.displayName = "DmTable";
-// src/classes/dm-pro-table.ts
-var dmProTableBaseClass = "dm-pro-table";
-var dmProTableHeaderClass = "dm-pro-table-header";
-var dmProTableTitleClass = "dm-pro-table-title";
-var dmProTableToolbarClass = "dm-pro-table-toolbar";
-var dmProTableColumnSettingClass = "dm-pro-table-column-setting";
-function getDmProTableClasses({ className }) {
-  return cn(dmProTableBaseClass, className);
-}
-
+DmToolbar.displayName = "DmToolbar";
 // src/components/dm-pro-table/DmProTable.tsx
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function renderToolbar(toolBarRender) {