@duskmoon-dev/components 0.3.0 → 0.3.3

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

@@ -1,5 +1,8 @@
 "use client";
 
+// src/components/dm-table/DmTable.tsx
+import { useMemo as useMemo7, useState as useState8 } from "react";
+
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -25,6 +28,21 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
+// src/classes/dm-table.ts
+var dmTableBaseClass = "dm-table";
+var dmTableSearchClass = "dm-table-search";
+var dmTableCardClass = "dm-table-card";
+var dmTableHeaderClass = "dm-table-header";
+var dmTableTitleClass = "dm-table-title";
+var dmTableExtraClass = "dm-table-extra";
+var dmTableIndicatorsClass = "dm-table-indicators";
+var dmTableTableExtraClass = "dm-table-table-extra";
+var dmTableColumnSettingClass = "dm-table-column-setting";
+var dmTablePaginationClass = "dm-table-pagination";
+function getDmTableClasses({ className }) {
+  return cn(dmTableBaseClass, className);
+}
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -166,419 +184,166 @@ 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);
-    }
-    onOpenChange?.(nextOpen);
-  }
-  function emitChange(nextValue) {
-    if (nextValue && disabledDate?.(nextValue)) {
-      return;
+  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);
     }
-    if (!isValueControlled) {
-      setInnerValue(nextValue);
-    }
-    onChange?.(nextValue, nextValue ?? "");
-  }
-  const presetItems = useMemo(() => presets ?? [], [presets]);
-  return /* @__PURE__ */ jsxs2("div", {
-    ...props,
-    ref,
-    className: getDatePickerClasses({
-      size,
-      status,
-      picker,
-      open: visible,
-      disabled,
-      className
-    }),
-    children: [
-      /* @__PURE__ */ jsx3("input", {
-        className: datePickerInputClass,
-        disabled,
-        type: inputType,
-        value: currentValue ?? "",
-        placeholder: placeholder ?? placeholderForPicker(picker),
-        onFocus: (event) => {
-          onFocus?.(event);
-          setVisible(true);
-        },
-        onBlur: (event) => {
-          onBlur?.(event);
-          setVisible(false);
-        },
-        onChange: (event) => emitChange(event.currentTarget.value || undefined)
-      }),
-      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        className: datePickerClearClass,
-        "aria-label": "Clear date",
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => emitChange(undefined),
-        children: "x"
-      }) : null,
-      /* @__PURE__ */ jsx3("span", {
-        className: datePickerIconClass,
-        "aria-hidden": "true"
-      }),
-      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
-        className: getDatePickerDropdownClasses({ open: visible }),
-        children: [
-          presetItems.map((preset, index) => /* @__PURE__ */ jsx3("button", {
-            type: "button",
-            className: datePickerPresetClass,
-            onMouseDown: (event) => event.preventDefault(),
-            onClick: () => emitChange(preset.value),
-            children: preset.label
-          }, index)),
-          showNow ? /* @__PURE__ */ jsx3("div", {
-            className: datePickerFooterClass,
-            children: /* @__PURE__ */ jsx3("button", {
-              type: "button",
-              onMouseDown: (event) => event.preventDefault(),
-              onClick: () => emitChange(todayValue(picker)),
-              children: "Now"
-            })
-          }) : null
-        ]
-      }) : null
-    ]
-  });
-});
-DatePickerRoot.displayName = "DatePicker";
-var RangePicker = forwardRef(({
-  allowClear,
-  className,
-  defaultValue,
-  disabled,
-  disabledDate,
-  onChange,
-  picker = "date",
-  placeholder,
-  separator = "-",
-  size = "md",
-  status,
-  value,
-  ...props
-}, ref) => {
-  const isControlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
-  const currentValue = isControlled ? value : innerValue;
-  const inputType = inputTypeForPicker(picker);
-  function emitChange(nextValue) {
-    if (nextValue.some((item) => item !== undefined && Boolean(disabledDate?.(item)))) {
-      return;
-    }
-    if (!isControlled) {
-      setInnerValue(nextValue);
-    }
-    onChange?.(nextValue, [nextValue[0] ?? "", nextValue[1] ?? ""]);
-  }
-  function updateIndex(index, nextItem) {
-    emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
-  }
-  return /* @__PURE__ */ jsxs2("div", {
-    ...props,
-    ref,
-    className: getDatePickerClasses({
-      size,
-      status,
-      picker,
-      disabled,
-      range: true,
-      className
-    }),
-    children: [
-      /* @__PURE__ */ jsx3("input", {
-        className: datePickerInputClass,
-        disabled,
-        type: inputType,
-        value: currentValue?.[0] ?? "",
-        placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
-        onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
-      }),
-      /* @__PURE__ */ jsx3("span", {
-        className: datePickerSeparatorClass,
-        children: separator
-      }),
-      /* @__PURE__ */ jsx3("input", {
-        className: datePickerInputClass,
-        disabled,
-        type: inputType,
-        value: currentValue?.[1] ?? "",
-        placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
-        onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
-      }),
-      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        className: datePickerClearClass,
-        "aria-label": "Clear date range",
-        onClick: () => emitChange([undefined, undefined]),
-        children: "x"
-      }) : null
-    ]
-  });
-});
-RangePicker.displayName = "DatePicker.RangePicker";
-function withPicker(picker, displayName) {
-  const Picker = forwardRef((props, ref) => /* @__PURE__ */ jsx3(DatePickerRoot, {
-    ...props,
-    ref,
-    picker
-  }));
-  Picker.displayName = displayName;
-  return Picker;
-}
-var DatePicker = Object.assign(DatePickerRoot, {
-  RangePicker,
-  WeekPicker: withPicker("week", "DatePicker.WeekPicker"),
-  MonthPicker: withPicker("month", "DatePicker.MonthPicker"),
-  QuarterPicker: withPicker("quarter", "DatePicker.QuarterPicker"),
-  YearPicker: withPicker("year", "DatePicker.YearPicker")
-});
-// src/components/pagination/Pagination.tsx
-import {
-  forwardRef as forwardRef2,
-  useMemo as useMemo2,
-  useState as useState2
-} from "react";
-
-// src/classes/pagination.ts
-var paginationBaseClass = "pagination";
-var paginationItemClass = "pagination-item";
-var paginationItemActiveClass = "pagination-item-active";
-var paginationItemDisabledClass = "pagination-item-disabled";
-var paginationPrevClass = "pagination-prev";
-var paginationNextClass = "pagination-next";
-var paginationEllipsisClass = "pagination-ellipsis";
-var paginationCompactClass = "pagination-compact";
-var paginationInfoClass = "pagination-info";
-var paginationInfoTextClass = "pagination-info-text";
-var paginationInputClass = "pagination-input";
-var paginationResponsiveClass = "pagination-responsive";
-var paginationSizeClasses = {
-  sm: "pagination-sm",
-  md: "",
-  lg: "pagination-lg"
-};
-function getPaginationClasses({
-  size = "md",
-  compact,
-  className
-}) {
-  return cn(paginationBaseClass, paginationResponsiveClass, paginationSizeClasses[size], compact && paginationCompactClass, className);
-}
-function getPaginationItemClasses({
-  active,
-  disabled
-}) {
-  return cn(paginationItemClass, active && paginationItemActiveClass, disabled && paginationItemDisabledClass);
-}
-
-// src/components/pagination/Pagination.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var defaultPageSizeOptions = [10, 20, 50, 100];
-function toPositiveInteger(value, fallback) {
-  if (!Number.isFinite(value) || value === undefined) {
-    return fallback;
-  }
-  return Math.max(1, Math.floor(value));
-}
-function clampPage(page, pageCount) {
-  return Math.min(pageCount, Math.max(1, Math.floor(page)));
-}
-function getPageCount(total, pageSize) {
-  return Math.max(1, Math.ceil(Math.max(0, total) / pageSize));
-}
-function getRange(current, pageSize, total) {
-  if (total <= 0) {
-    return [0, 0];
-  }
-  const start = (current - 1) * pageSize + 1;
-  const end = Math.min(total, current * pageSize);
-  return [start, end];
-}
-function getPageTokens(current, pageCount) {
-  if (pageCount <= 7) {
-    return Array.from({ length: pageCount }, (_, index) => index + 1);
-  }
-  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 = forwardRef2(({
-  current,
-  defaultCurrent = 1,
-  pageSize,
-  defaultPageSize = 10,
-  total = 0,
-  onChange,
-  disabled,
-  simple,
-  showSizeChanger,
-  showQuickJumper,
-  showTotal,
-  size = "md",
-  className,
-  ...props
-}, ref) => {
-  const isCurrentControlled = current !== undefined;
-  const isPageSizeControlled = pageSize !== undefined;
-  const [internalCurrent, setInternalCurrent] = useState2(defaultCurrent);
-  const [internalPageSize, setInternalPageSize] = useState2(defaultPageSize);
-  const [quickJumpValue, setQuickJumpValue] = useState2("");
-  const mergedPageSize = toPositiveInteger(pageSize ?? internalPageSize, defaultPageSize);
-  const pageCount = getPageCount(total, mergedPageSize);
-  const mergedCurrent = clampPage(toPositiveInteger(current ?? internalCurrent, defaultCurrent), pageCount);
-  const pageTokens = useMemo2(() => getPageTokens(mergedCurrent, pageCount), [mergedCurrent, pageCount]);
-  const 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);
+    if (!isPageSizeControlled) {
+      setInternalPageSize(nextPageSize);
     }
     onChange?.(normalizedPage, nextPageSize);
   }
@@ -603,19 +368,19 @@ var Pagination = forwardRef2(({
   }
   const previousDisabled = disabled || mergedCurrent <= 1;
   const nextDisabled = disabled || mergedCurrent >= pageCount;
-  return /* @__PURE__ */ jsxs3("nav", {
+  return /* @__PURE__ */ jsxs2("nav", {
     ...props,
     ref,
     className: getPaginationClasses({ size, compact: simple, className }),
     children: [
-      showTotal ? /* @__PURE__ */ jsx4("div", {
+      showTotal ? /* @__PURE__ */ jsx3("div", {
         className: paginationInfoClass,
-        children: /* @__PURE__ */ jsx4("span", {
+        children: /* @__PURE__ */ jsx3("span", {
           className: paginationInfoTextClass,
           children: showTotal(total, range)
         })
       }) : null,
-      /* @__PURE__ */ jsx4("button", {
+      /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: paginationPrevClass,
         disabled: previousDisabled,
@@ -623,10 +388,10 @@ var Pagination = forwardRef2(({
         onClick: () => changePage(mergedCurrent - 1),
         children: "Prev"
       }),
-      simple ? /* @__PURE__ */ jsxs3("div", {
+      simple ? /* @__PURE__ */ jsxs2("div", {
         className: paginationInputClass,
         children: [
-          /* @__PURE__ */ jsx4("input", {
+          /* @__PURE__ */ jsx3("input", {
             "aria-label": "Current page",
             type: "number",
             min: 1,
@@ -641,7 +406,7 @@ var Pagination = forwardRef2(({
               }
             }
           }),
-          /* @__PURE__ */ jsxs3("span", {
+          /* @__PURE__ */ jsxs2("span", {
             className: paginationInfoTextClass,
             children: [
               "/ ",
@@ -649,10 +414,10 @@ var Pagination = forwardRef2(({
             ]
           })
         ]
-      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx4("span", {
+      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx3("span", {
         "aria-hidden": "true",
         className: paginationEllipsisClass
-      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx4("button", {
+      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: getPaginationItemClasses({
           active: pageToken === mergedCurrent,
@@ -664,7 +429,7 @@ var Pagination = forwardRef2(({
         onClick: () => changePage(pageToken),
         children: pageToken
       }, pageToken)),
-      /* @__PURE__ */ jsx4("button", {
+      /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: paginationNextClass,
         disabled: nextDisabled,
@@ -672,14 +437,14 @@ var Pagination = forwardRef2(({
         onClick: () => changePage(mergedCurrent + 1),
         children: "Next"
       }),
-      showSizeChanger ? /* @__PURE__ */ jsx4("div", {
+      showSizeChanger ? /* @__PURE__ */ jsx3("div", {
         className: paginationInputClass,
-        children: /* @__PURE__ */ jsx4("select", {
+        children: /* @__PURE__ */ jsx3("select", {
           "aria-label": "Page size",
           value: mergedPageSize,
           disabled,
           onChange: handlePageSizeChange,
-          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs3("option", {
+          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs2("option", {
             value: option,
             children: [
               option,
@@ -688,60 +453,25 @@ var Pagination = forwardRef2(({
           }, option))
         })
       }) : null,
-      showQuickJumper && !simple ? /* @__PURE__ */ jsx4("div", {
+      showQuickJumper && !simple ? /* @__PURE__ */ jsx3("div", {
         className: paginationInputClass,
-        children: /* @__PURE__ */ jsx4("input", {
+        children: /* @__PURE__ */ jsx3("input", {
           "aria-label": "Jump to page",
           type: "number",
-          min: 1,
-          max: pageCount,
-          value: quickJumpValue,
-          disabled,
-          onChange: (event) => setQuickJumpValue(event.currentTarget.value),
-          onKeyDown: handleQuickJumpKeyDown
-        })
-      }) : null
-    ]
-  });
-});
-Pagination.displayName = "Pagination";
-// src/components/dm-pagination/DmPagination.tsx
-import {
-  forwardRef as forwardRef3,
-  useEffect,
-  useMemo as useMemo3,
-  useRef,
-  useState as useState3
-} from "react";
-
-// src/classes/dm-pagination.ts
-var dmPaginationBaseClass = "dm-pagination";
-var dmPaginationHiddenClass = "dm-pagination-hidden";
-var dmPaginationPagerClass = "dm-pagination-pager";
-var dmPaginationRefreshClass = "dm-pagination-refresh";
-var dmPaginationRefreshLoadingClass = "dm-pagination-refresh-loading";
-var dmPaginationSelectedClass = "dm-pagination-selected";
-var dmPaginationAlignClasses = {
-  left: "dm-pagination-left",
-  center: "dm-pagination-center",
-  right: "dm-pagination-right"
-};
-function getDmPaginationClasses({
-  align = "right",
-  hidden,
-  className
-}) {
-  return cn(dmPaginationBaseClass, dmPaginationAlignClasses[align], hidden && dmPaginationHiddenClass, className);
-}
-function getDmPaginationRefreshClasses({
-  loading,
-  className
-}) {
-  return cn(dmPaginationRefreshClass, loading && dmPaginationRefreshLoadingClass, className);
-}
-
+          min: 1,
+          max: pageCount,
+          value: quickJumpValue,
+          disabled,
+          onChange: (event) => setQuickJumpValue(event.currentTarget.value),
+          onKeyDown: handleQuickJumpKeyDown
+        })
+      }) : null
+    ]
+  });
+});
+Pagination.displayName = "Pagination";
 // src/components/dm-pagination/DmPagination.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultLocale = {
   refresh: "Refresh",
   showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
@@ -773,7 +503,7 @@ function getResponsiveSimple({
 }
 function useElementWidth() {
   const ref = useRef(null);
-  const [width, setWidth] = useState3(1000);
+  const [width, setWidth] = useState2(1000);
   useEffect(() => {
     const element = ref.current;
     if (!element || typeof ResizeObserver === "undefined")
@@ -789,110 +519,423 @@ function useElementWidth() {
 function renderSelected(selectedTotal, locale) {
   if (!selectedTotal)
     return null;
-  return /* @__PURE__ */ jsx5("span", {
+  return /* @__PURE__ */ jsx4("span", {
     className: dmPaginationSelectedClass,
     children: locale.selected(selectedTotal)
   });
-}
-var DmPagination = forwardRef3(({
-  selectedTotal = 0,
-  loading = false,
-  total = 0,
-  showRefresh = true,
-  showPagination = true,
-  wrapperStyle,
+}
+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 {
+  forwardRef as forwardRef6,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo5,
+  useState as useState6
+} from "react";
+
+// src/classes/dm-search.ts
+var dmSearchBaseClass = "dm-search";
+var dmSearchCompactClass = "dm-search-compact";
+var dmSearchCollapsedClass = "dm-search-collapsed";
+var dmSearchFieldsClass = "dm-search-fields";
+var dmSearchFieldClass = "dm-search-field";
+var dmSearchActionsClass = "dm-search-actions";
+var dmSearchFastFilterClass = "dm-search-fast-filter";
+function getDmSearchClasses({
+  compact,
+  collapsed,
+  className
+}) {
+  return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
+}
+
+// src/components/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 datePickerStatusClasses = {
+  error: "datepicker-error",
+  success: "datepicker-success"
+};
+var datePickerPickerClasses = {
+  date: "",
+  week: "datepicker-week",
+  month: "datepicker-month-picker",
+  quarter: "datepicker-quarter-picker",
+  year: "datepicker-year-picker",
+  time: "datepicker-time-picker"
+};
+function getDatePickerClasses({
+  size = "md",
+  status,
+  picker = "date",
+  open,
+  disabled,
+  range,
+  className
+}) {
+  return cn(datePickerBaseClass, datePickerSizeClasses[size], status && datePickerStatusClasses[status], datePickerPickerClasses[picker], open && "datepicker-open", disabled && "datepicker-disabled", range && datePickerRangeClass, className);
+}
+function getDatePickerDropdownClasses({
+  open,
+  className
+}) {
+  return cn(datePickerDropdownClass, open && datePickerDropdownOpenClass, className);
+}
+
+// src/components/date-picker/DatePicker.tsx
+import { jsx as 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 inputTypeForPicker(picker) {
+  if (picker === "month")
+    return "month";
+  if (picker === "week")
+    return "week";
+  if (picker === "time")
+    return "time";
+  return picker === "year" || picker === "quarter" ? "text" : "date";
+}
+function placeholderForPicker(picker) {
+  if (picker === "month")
+    return "Select month";
+  if (picker === "week")
+    return "Select week";
+  if (picker === "quarter")
+    return "Select quarter";
+  if (picker === "year")
+    return "Select year";
+  if (picker === "time")
+    return "Select time";
+  return "Select date";
+}
+function normalizeDateValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+var DatePickerRoot = forwardRef3(({
+  allowClear,
+  className,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onBlur,
+  onChange,
+  onFocus,
+  onOpenChange,
+  open,
+  picker = "date",
+  placeholder,
+  presets,
+  showNow,
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const isValueControlled = value !== undefined;
+  const isOpenControlled = open !== undefined;
+  const [innerValue, setInnerValue] = 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 (!isOpenControlled) {
+      setInnerOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  function emitChange(nextValue) {
+    if (nextValue && disabledDate?.(nextValue)) {
+      return;
+    }
+    if (!isValueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, nextValue ?? "");
+  }
+  const presetItems = useMemo3(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs4("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      open: visible,
+      disabled,
+      className
+    }),
+    children: [
+      /* @__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: [
+          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
+    ]
+  });
+});
+DatePickerRoot.displayName = "DatePicker";
+var RangePicker = forwardRef3(({
+  allowClear,
   className,
-  align = "right",
-  showTotalFullMessage = false,
-  showSizeChanger = true,
-  responsiveSimple = true,
-  refresh,
-  simple,
-  showQuickJumper,
-  showTotal,
-  locale,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onChange,
+  picker = "date",
+  placeholder,
+  separator = "-",
+  size = "md",
+  status,
+  value,
   ...props
 }, ref) => {
-  const [measureRef, width] = useElementWidth();
-  const mergedLocale = useMemo3(() => ({ ...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 = useMemo3(() => {
-    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__ */ jsxs4("span", {
-        title: `${mergedLocale.showTotal(nextTotal, range, selectedTotal)}${selectedTotal ? mergedLocale.selected(selectedTotal) : ""}`,
-        children: [
-          message,
-          selected
-        ]
-      });
-    };
-  }, [
-    mergedLocale,
-    mergedSimple,
-    selectedTotal,
-    showTotal,
-    showTotalFullMessage
-  ]);
-  if (!shouldRender)
-    return null;
+  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", {
-    ref: (element) => {
-      measureRef.current = element;
-      if (typeof ref === "function") {
-        ref(element);
-      } else if (ref) {
-        ref.current = element;
-      }
-    },
-    className: getDmPaginationClasses({ align, className }),
-    style: wrapperStyle,
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      disabled,
+      range: true,
+      className
+    }),
     children: [
-      showPagination ? /* @__PURE__ */ jsx5("div", {
-        className: dmPaginationPagerClass,
-        children: /* @__PURE__ */ jsx5(Pagination, {
-          ...props,
-          total,
-          simple: mergedSimple,
-          showQuickJumper: mergedShowQuickJumper,
-          showSizeChanger,
-          showTotal: totalRenderer
-        })
-      }) : null,
-      isRefreshVisible ? /* @__PURE__ */ jsxs4("button", {
+      /* @__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: getDmPaginationRefreshClasses({ loading }),
-        disabled: loading || props.disabled,
-        "aria-busy": loading || undefined,
-        onClick: refresh,
-        children: [
-          /* @__PURE__ */ jsx5("span", {
-            "aria-hidden": "true",
-            children: "Reload"
-          }),
-          /* @__PURE__ */ jsx5("span", {
-            children: mergedLocale.refresh
-          })
-        ]
+        className: datePickerClearClass,
+        "aria-label": "Clear date range",
+        onClick: () => emitChange([undefined, undefined]),
+        children: "x"
       }) : null
     ]
   });
 });
-DmPagination.displayName = "DmPagination";
+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/input/Input.tsx
 import {
   forwardRef as forwardRef4,
@@ -1542,31 +1585,6 @@ SelectRoot.displayName = "Select";
 var Select = SelectRoot;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
-// src/components/dm-search/DmSearch.tsx
-import {
-  forwardRef as forwardRef6,
-  useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo5,
-  useState as useState6
-} from "react";
-
-// src/classes/dm-search.ts
-var dmSearchBaseClass = "dm-search";
-var dmSearchCompactClass = "dm-search-compact";
-var dmSearchCollapsedClass = "dm-search-collapsed";
-var dmSearchFieldsClass = "dm-search-fields";
-var dmSearchFieldClass = "dm-search-field";
-var dmSearchActionsClass = "dm-search-actions";
-var dmSearchFastFilterClass = "dm-search-fast-filter";
-function getDmSearchClasses({
-  compact,
-  collapsed,
-  className
-}) {
-  return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
-}
-
 // src/components/dm-search/DmSearch.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function initialValues(items, searchParams, useSearchParams = true) {
@@ -1833,8 +1851,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;
@@ -2437,24 +2455,6 @@ var Table = Object.assign(TableWithRef, {
   EXPAND_COLUMN: "EXPAND_COLUMN"
 });
 Table.displayName = "Table";
-// src/components/dm-table/DmTable.tsx
-import { useMemo as useMemo7, useState as useState8 } from "react";
-
-// src/classes/dm-table.ts
-var dmTableBaseClass = "dm-table";
-var dmTableSearchClass = "dm-table-search";
-var dmTableCardClass = "dm-table-card";
-var dmTableHeaderClass = "dm-table-header";
-var dmTableTitleClass = "dm-table-title";
-var dmTableExtraClass = "dm-table-extra";
-var dmTableIndicatorsClass = "dm-table-indicators";
-var dmTableTableExtraClass = "dm-table-table-extra";
-var dmTableColumnSettingClass = "dm-table-column-setting";
-var dmTablePaginationClass = "dm-table-pagination";
-function getDmTableClasses({ className }) {
-  return cn(dmTableBaseClass, className);
-}
-
 // src/components/dm-table/DmTable.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function mapAndFilter(list, mapper) {
@@ -2607,6 +2607,6 @@ function DmTable({
 }
 DmTable.displayName = "DmTable";
 export {
-  filterDmTableColumn,
-  DmTable
+  DmTable,
+  filterDmTableColumn
 };