@duskmoon-dev/components 0.3.3 → 0.4.0

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

@@ -2,11 +2,11 @@
 
 // src/components/dm-search/DmSearch.tsx
 import {
-  forwardRef as forwardRef4,
-  useEffect,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo3,
-  useState as useState4
+  forwardRef as forwardRef5,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo4,
+  useState as useState6
 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -50,6 +50,10 @@ function getDmSearchClasses({
   return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
 }
 
+// src/components/button/Button.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
 // src/classes/button.ts
 var buttonBaseClass = "btn";
 var buttonColorClasses = {
@@ -73,7 +77,7 @@ var buttonAppearanceClasses = {
 };
 var buttonShapeClasses = {
   rect: "",
-  circle: "btn-circle",
+  circle: "btn-circle btn-icon",
   square: "btn-square"
 };
 var buttonSizeClasses = {
@@ -93,11 +97,14 @@ function getButtonClasses({
   isLoading,
   className
 }) {
-  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], shape === "circle" && size === "xs" && "btn-icon-sm", shape === "circle" && size === "sm" && "btn-icon-sm", shape === "circle" && size === "lg" && "btn-icon-lg", block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
 }
 
 // src/components/button/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function isPromiseLike(value) {
+  return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
 function Button({
   color = "primary",
   appearance = "filled",
@@ -111,8 +118,155 @@ function Button({
   children,
   disabled,
   ref,
+  confirm,
+  onClick,
   ...props
 }) {
+  const buttonRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const cancelRef = React.useRef(null);
+  const approvalRef = React.useRef("idle");
+  const pendingRef = React.useRef(false);
+  const actionRef = React.useRef(0);
+  const operationRef = React.useRef(0);
+  const mountedRef = React.useRef(false);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [confirmError, setConfirmError] = React.useState(false);
+  const generatedId = React.useId().replace(/:/g, "");
+  const popoverId = `button-confirm-${generatedId}`;
+  const titleId = `${popoverId}-title`;
+  const descriptionId = `${popoverId}-description`;
+  const anchor = `--${popoverId}-anchor`;
+  const hasConfirm = Boolean(confirm);
+  const confirmation = confirm && typeof confirm === "object" ? confirm : undefined;
+  const title = confirmation ? confirmation.title : "Confirm action";
+  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
+  const content = confirmation?.component ?? confirmation?.message ?? confirmation?.description;
+  const hasContent = content !== undefined && content !== null && content !== false && content !== "";
+  const mergedRef = React.useCallback((node) => {
+    buttonRef.current = node;
+    if (!node) {
+      if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+      return;
+    }
+    const cleanup = typeof ref === "function" ? ref(node) : undefined;
+    if (ref && typeof ref !== "function")
+      ref.current = node;
+    return () => {
+      buttonRef.current = null;
+      if (typeof cleanup === "function")
+        cleanup();
+      else if (typeof ref === "function")
+        ref(null);
+      else if (ref)
+        ref.current = null;
+    };
+  }, [ref]);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      operationRef.current += 1;
+    };
+  }, []);
+  React.useEffect(() => {
+    operationRef.current += 1;
+    approvalRef.current = "idle";
+    setConfirmError(false);
+    setPortalTarget(hasConfirm ? document.body : null);
+  }, [hasConfirm]);
+  function closePopover() {
+    if (popoverRef.current?.matches(":popover-open")) {
+      popoverRef.current.hidePopover();
+    }
+    buttonRef.current?.focus();
+  }
+  function handleClick(event) {
+    if (!confirm) {
+      onClick?.(event);
+      return;
+    }
+    if (approvalRef.current === "native") {
+      approvalRef.current = "idle";
+      return;
+    }
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      let result;
+      try {
+        result = onClick?.(event);
+      } catch {
+        event.preventDefault();
+        pendingRef.current = false;
+        setConfirmError(true);
+        return;
+      }
+      if (!isPromiseLike(result)) {
+        pendingRef.current = false;
+        closePopover();
+        return;
+      }
+      const userPreventedDefault = event.defaultPrevented;
+      event.preventDefault();
+      setConfirmLoading(true);
+      const action = actionRef.current;
+      const operation = operationRef.current;
+      Promise.resolve(result).then(() => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        closePopover();
+        if (!userPreventedDefault && !buttonRef.current?.disabled) {
+          approvalRef.current = "native";
+          buttonRef.current?.click();
+          approvalRef.current = "idle";
+        }
+      }, () => {
+        if (!mountedRef.current || action !== actionRef.current)
+          return;
+        pendingRef.current = false;
+        setConfirmLoading(false);
+        if (operation !== operationRef.current)
+          return;
+        setConfirmError(true);
+        cancelRef.current?.focus();
+      });
+      return;
+    }
+    event.preventDefault();
+    if (disabled || isLoading || pendingRef.current)
+      return;
+    if (popoverRef.current?.matches(":popover-open")) {
+      closePopover();
+      return;
+    }
+    setConfirmError(false);
+    popoverRef.current?.showPopover();
+    cancelRef.current?.focus();
+  }
+  function handleConfirm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const trigger = buttonRef.current;
+    if (disabled || isLoading || pendingRef.current || !trigger || trigger.disabled || !event.currentTarget.matches(":popover-open"))
+      return;
+    setConfirmError(false);
+    pendingRef.current = true;
+    actionRef.current += 1;
+    approvalRef.current = "action";
+    trigger.click();
+    if (approvalRef.current === "action") {
+      approvalRef.current = "idle";
+      pendingRef.current = false;
+    }
+  }
   const classes = getButtonClasses({
     color,
     appearance,
@@ -122,34 +276,526 @@ function Button({
     isLoading,
     className
   });
-  return /* @__PURE__ */ jsxs("button", {
-    ref,
-    className: classes,
-    disabled: disabled || isLoading,
-    "aria-busy": isLoading,
-    "aria-disabled": disabled || isLoading,
-    ...props,
+  const confirmClasses = getButtonClasses({
+    color,
+    size: "sm",
+    isLoading: confirmLoading
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      isLoading && /* @__PURE__ */ jsx("span", {
-        className: "btn-spinner"
+      /* @__PURE__ */ jsxs("button", {
+        ref: confirm ? mergedRef : ref,
+        className: classes,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        "aria-disabled": disabled || isLoading,
+        ...props,
+        style: confirm ? { ...props.style, anchorName: anchor } : props.style,
+        "aria-haspopup": confirm ? "dialog" : props["aria-haspopup"],
+        "aria-controls": confirm ? popoverId : props["aria-controls"],
+        onClick: confirm ? handleClick : onClick,
+        children: [
+          isLoading && /* @__PURE__ */ jsx("span", {
+            className: "btn-spinner"
+          }),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-left",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "btn-content",
+            children
+          }),
+          !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+            className: "btn-icon-right",
+            children: rightIcon
+          })
+        ]
       }),
-      !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
-        className: "btn-icon-left",
-        children: leftIcon
+      confirm && portalTarget && createPortal(/* @__PURE__ */ jsxs("form", {
+        id: popoverId,
+        ref: popoverRef,
+        popover: "auto",
+        role: "dialog",
+        "aria-labelledby": hasTitle ? titleId : undefined,
+        "aria-label": hasTitle ? undefined : "Confirm action",
+        "aria-describedby": hasContent ? descriptionId : undefined,
+        className: "popover popover-confirm popover-bottom",
+        style: { positionAnchor: anchor },
+        onSubmit: handleConfirm,
+        onClick: (event) => event.stopPropagation(),
+        onToggle: (event) => {
+          if (!event.currentTarget.matches(":popover-open")) {
+            operationRef.current += 1;
+            if (event.currentTarget.contains(document.activeElement) || document.activeElement === document.body) {
+              buttonRef.current?.focus();
+            }
+          }
+        },
+        children: [
+          hasTitle && /* @__PURE__ */ jsx("div", {
+            className: "popover-header",
+            children: /* @__PURE__ */ jsx("h3", {
+              id: titleId,
+              className: "popover-title",
+              children: title
+            })
+          }),
+          hasContent && /* @__PURE__ */ jsx("div", {
+            id: descriptionId,
+            className: "popover-body",
+            children: content
+          }),
+          confirmError && /* @__PURE__ */ jsx("div", {
+            role: "alert",
+            className: "popover-body",
+            children: "The action failed. Please try again."
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "popover-footer",
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: cancelRef,
+                type: "button",
+                className: "btn btn-text btn-sm",
+                popoverTarget: popoverId,
+                popoverTargetAction: "hide",
+                disabled: confirmLoading,
+                children: confirmation?.cancelText ?? "Cancel"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "submit",
+                className: confirmClasses,
+                disabled: disabled || isLoading || confirmLoading,
+                "aria-busy": confirmLoading,
+                children: confirmation?.confirmText ?? "Confirm"
+              })
+            ]
+          })
+        ]
+      }), portalTarget)
+    ]
+  });
+}
+// src/components/date-picker/DatePicker.tsx
+import { forwardRef as forwardRef2, useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/components/calendar/Calendar.tsx
+import { forwardRef, useMemo, useState } from "react";
+
+// src/classes/calendar.ts
+var calendarBaseClass = "datepicker calendar";
+var calendarHeaderClass = "calendar-header";
+var calendarTitleClass = "calendar-title";
+var calendarControlsClass = "calendar-controls";
+var calendarNavClass = "calendar-nav";
+var calendarModeClass = "calendar-mode";
+var calendarWeekdaysClass = "calendar-weekdays";
+var calendarWeekdayClass = "calendar-weekday";
+var calendarBodyClass = "calendar-body";
+var calendarDateGridClass = "calendar-date-grid";
+var calendarMonthGridClass = "calendar-month-grid";
+var calendarCellContentClass = "calendar-cell-content";
+function getCalendarClasses({
+  fullscreen = true,
+  mode = "month",
+  className
+}) {
+  return cn(calendarBaseClass, fullscreen ? "calendar-fullscreen" : "calendar-card", mode === "year" && "calendar-year-mode", className);
+}
+function getCalendarCellClasses({
+  selected,
+  today,
+  outside,
+  disabled,
+  className
+}) {
+  return cn("calendar-cell", selected && "calendar-cell-selected", today && "calendar-cell-today", outside && "calendar-cell-outside", disabled && "calendar-cell-disabled", className);
+}
+
+// src/components/calendar/Calendar.tsx
+import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function formatMonth(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-01`;
+}
+function parseDate(value) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+  }
+  if (typeof value === "string" && value.length > 0) {
+    const [year, month = "1", day = "1"] = value.split("-");
+    const parsed = new Date(Number(year), Number(month) - 1, Number(day));
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed;
+    }
+  }
+  const today = new Date;
+  return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addYears(date, amount) {
+  return new Date(date.getFullYear() + amount, date.getMonth(), 1);
+}
+function startOfCalendarGrid(panelDate) {
+  const firstOfMonth = new Date(panelDate.getFullYear(), panelDate.getMonth(), 1);
+  const start = new Date(firstOfMonth);
+  start.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  return start;
+}
+function buildDateGrid(panelDate) {
+  const start = startOfCalendarGrid(panelDate);
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return date;
+  });
+}
+function isSameMonth(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+function isOutsideRange(date, validRange) {
+  if (!validRange) {
+    return false;
+  }
+  const current = formatDate(date);
+  const start = formatDate(parseDate(validRange[0]));
+  const end = formatDate(parseDate(validRange[1]));
+  return current < start || current > end;
+}
+function Header({
+  panelDate,
+  mode,
+  setPanelDate,
+  setMode
+}) {
+  const title = mode === "year" ? String(panelDate.getFullYear()) : `${MONTHS[panelDate.getMonth()]} ${panelDate.getFullYear()}`;
+  return /* @__PURE__ */ jsxs2("div", {
+    className: calendarHeaderClass,
+    children: [
+      /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Previous panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, -1) : addMonths(panelDate, -1), mode),
+        children: /* @__PURE__ */ jsx2("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx2("path", {
+            d: "m15 18-6-6 6-6"
+          })
+        })
       }),
-      /* @__PURE__ */ jsx("span", {
-        className: "btn-content",
-        children
+      /* @__PURE__ */ jsxs2("div", {
+        className: calendarControlsClass,
+        children: [
+          /* @__PURE__ */ jsx2("div", {
+            className: calendarTitleClass,
+            children: title
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            className: calendarModeClass,
+            children: [
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                "aria-pressed": mode === "month",
+                onClick: () => setMode("month"),
+                children: "Month"
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                "aria-pressed": mode === "year",
+                onClick: () => setMode("year"),
+                children: "Year"
+              })
+            ]
+          })
+        ]
       }),
-      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
-        className: "btn-icon-right",
-        children: rightIcon
+      /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Next panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, 1) : addMonths(panelDate, 1), mode),
+        children: /* @__PURE__ */ jsx2("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx2("path", {
+            d: "m9 18 6-6-6-6"
+          })
+        })
       })
     ]
   });
 }
-// src/components/date-picker/DatePicker.tsx
-import { forwardRef, useMemo, useState } from "react";
+var Calendar = forwardRef(({
+  className,
+  value,
+  defaultValue,
+  mode,
+  defaultMode = "month",
+  fullscreen = true,
+  validRange,
+  disabledDate,
+  dateCellRender,
+  dateFullCellRender,
+  monthCellRender,
+  monthFullCellRender,
+  cellRender,
+  fullCellRender,
+  headerRender,
+  onChange,
+  onSelect,
+  onPanelChange,
+  ...props
+}, ref) => {
+  const selectedDate = parseDate(value ?? defaultValue);
+  const [innerValue, setInnerValue] = useState(() => formatDate(selectedDate));
+  const [panelDate, setInnerPanelDate] = useState(selectedDate);
+  const [innerMode, setInnerMode] = useState(mode ?? defaultMode);
+  const currentMode = mode ?? innerMode;
+  const currentValue = value === undefined ? innerValue : formatDate(parseDate(value));
+  const today = useMemo(() => formatDate(new Date), []);
+  const dateGrid = useMemo(() => buildDateGrid(panelDate), [panelDate]);
+  function emitPanelChange(nextDate, nextMode = currentMode) {
+    setInnerPanelDate(nextDate);
+    onPanelChange?.(formatDate(nextDate), nextMode);
+  }
+  function setCalendarMode(nextMode) {
+    if (mode === undefined) {
+      setInnerMode(nextMode);
+    }
+    onPanelChange?.(formatDate(panelDate), nextMode);
+  }
+  function commitValue(nextDate, source) {
+    const nextValue = source === "month" ? formatMonth(nextDate) : formatDate(nextDate);
+    if (disabledDate?.(nextValue) || isOutsideRange(nextDate, validRange)) {
+      return;
+    }
+    if (value === undefined) {
+      setInnerValue(nextValue);
+    }
+    setInnerPanelDate(nextDate);
+    onSelect?.(nextValue, { source });
+    onChange?.(nextValue);
+  }
+  function renderDateCell(date) {
+    const dateValue = formatDate(date);
+    const originNode = /* @__PURE__ */ jsxs2("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx2("span", {
+          children: date.getDate()
+        }),
+        dateCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "month"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? dateFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx2("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === currentValue,
+        today: dateValue === today,
+        outside: !isSameMonth(date, panelDate),
+        disabled
+      }),
+      onClick: () => commitValue(date, "date"),
+      children: content
+    }, dateValue);
+  }
+  function renderMonthCell(month) {
+    const date = new Date(panelDate.getFullYear(), month, 1);
+    const dateValue = formatMonth(date);
+    const originNode = /* @__PURE__ */ jsxs2("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx2("span", {
+          children: MONTHS[month]
+        }),
+        monthCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "year"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? monthFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx2("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === formatMonth(parseDate(currentValue)),
+        today: dateValue === formatMonth(new Date),
+        disabled
+      }),
+      onClick: () => commitValue(date, "month"),
+      children: content
+    }, dateValue);
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    ...props,
+    ref,
+    className: getCalendarClasses({
+      fullscreen,
+      mode: currentMode,
+      className
+    }),
+    children: [
+      headerRender ? headerRender({
+        value: formatDate(panelDate),
+        type: currentMode,
+        onChange: (nextValue) => emitPanelChange(parseDate(nextValue)),
+        onTypeChange: setCalendarMode
+      }) : /* @__PURE__ */ jsx2(Header, {
+        panelDate,
+        mode: currentMode,
+        setPanelDate: emitPanelChange,
+        setMode: setCalendarMode
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        className: calendarBodyClass,
+        children: currentMode === "month" ? /* @__PURE__ */ jsxs2(Fragment2, {
+          children: [
+            /* @__PURE__ */ jsx2("div", {
+              className: calendarWeekdaysClass,
+              "aria-hidden": "true",
+              children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx2("span", {
+                className: calendarWeekdayClass,
+                children: weekday
+              }, weekday))
+            }),
+            /* @__PURE__ */ jsx2("div", {
+              className: calendarDateGridClass,
+              children: dateGrid.map(renderDateCell)
+            })
+          ]
+        }) : /* @__PURE__ */ jsx2("div", {
+          className: calendarMonthGridClass,
+          children: MONTHS.map((_, month) => renderMonthCell(month))
+        })
+      })
+    ]
+  });
+});
+Calendar.displayName = "Calendar";
+// src/components/date-picker/usePickerDropdown.ts
+import { useEffect, useId, useImperativeHandle, useRef, useState as useState2 } from "react";
+function usePickerDropdown({
+  open,
+  defaultOpen,
+  disabled,
+  onOpenChange,
+  ref
+}) {
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const skipFocus = useRef(false);
+  const panelId = useId();
+  const [innerOpen, setInnerOpen] = useState2(Boolean(defaultOpen));
+  const visible = !disabled && (open ?? innerOpen);
+  useImperativeHandle(ref, () => rootRef.current, []);
+  function setVisible(next) {
+    if (disabled || next === visible)
+      return;
+    if (open === undefined)
+      setInnerOpen(next);
+    onOpenChange?.(next);
+  }
+  function closeAndFocus() {
+    skipFocus.current = true;
+    inputRef.current?.focus();
+    skipFocus.current = false;
+    setVisible(false);
+  }
+  useEffect(() => {
+    function handleOutside(event) {
+      if (visible && !rootRef.current?.contains(event.target))
+        setVisible(false);
+    }
+    function handleKeyDown(event) {
+      if (event.defaultPrevented || !rootRef.current?.contains(event.target))
+        return;
+      if (event.key === "Escape" && visible) {
+        event.preventDefault();
+        closeAndFocus();
+      } else if (event.key === "ArrowDown" && event.target === inputRef.current) {
+        event.preventDefault();
+        setVisible(true);
+      }
+    }
+    document.addEventListener("pointerdown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+  return {
+    rootRef,
+    inputRef,
+    panelId,
+    visible,
+    setVisible,
+    closeAndFocus,
+    onInputFocus: () => {
+      if (!skipFocus.current)
+        setVisible(true);
+    },
+    onRootBlur: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget))
+        setVisible(false);
+    }
+  };
+}
 
 // src/classes/date-picker.ts
 var datePickerBaseClass = "datepicker";
@@ -198,7 +844,7 @@ function getDatePickerDropdownClasses({
 }
 
 // src/components/date-picker/DatePicker.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function todayValue(picker) {
   const today = new Date;
   const year = today.getFullYear();
@@ -237,9 +883,10 @@ function placeholderForPicker(picker) {
 function normalizeDateValue(value) {
   return typeof value === "string" && value.length > 0 ? value : undefined;
 }
-var DatePickerRoot = forwardRef(({
+var DatePickerRoot = forwardRef2(({
   allowClear,
   className,
+  inputProps,
   defaultOpen,
   defaultValue,
   disabled,
@@ -258,19 +905,19 @@ var DatePickerRoot = forwardRef(({
   value,
   ...props
 }, ref) => {
+  const [calendarMode, setCalendarMode] = useState3("month");
   const isValueControlled = value !== undefined;
-  const isOpenControlled = open !== undefined;
-  const [innerValue, setInnerValue] = useState(() => normalizeDateValue(defaultValue));
-  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const [innerValue, setInnerValue] = useState3(() => normalizeDateValue(defaultValue));
+  const dropdown = usePickerDropdown({
+    open,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    ref
+  });
   const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
-  const visible = isOpenControlled ? Boolean(open) : innerOpen;
+  const { visible, setVisible } = dropdown;
   const inputType = inputTypeForPicker(picker);
-  function setVisible(nextOpen) {
-    if (!isOpenControlled) {
-      setInnerOpen(nextOpen);
-    }
-    onOpenChange?.(nextOpen);
-  }
   function emitChange(nextValue) {
     if (nextValue && disabledDate?.(nextValue)) {
       return;
@@ -280,10 +927,17 @@ var DatePickerRoot = forwardRef(({
     }
     onChange?.(nextValue, nextValue ?? "");
   }
-  const presetItems = useMemo(() => presets ?? [], [presets]);
-  return /* @__PURE__ */ jsxs2("div", {
+  function selectValue(nextValue) {
+    if (disabledDate?.(nextValue))
+      return;
+    emitChange(nextValue);
+    dropdown.closeAndFocus();
+  }
+  const presetItems = useMemo2(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs3("div", {
     ...props,
-    ref,
+    ref: dropdown.rootRef,
+    onBlur: dropdown.onRootBlur,
     className: getDatePickerClasses({
       size,
       status,
@@ -293,7 +947,11 @@ var DatePickerRoot = forwardRef(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx2("input", {
+      /* @__PURE__ */ jsx3("input", {
+        ...inputProps,
+        ref: dropdown.inputRef,
+        "aria-haspopup": "dialog",
+        "aria-controls": visible ? dropdown.panelId : undefined,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -301,15 +959,15 @@ var DatePickerRoot = forwardRef(({
         placeholder: placeholder ?? placeholderForPicker(picker),
         onFocus: (event) => {
           onFocus?.(event);
-          setVisible(true);
+          dropdown.onInputFocus();
         },
         onBlur: (event) => {
           onBlur?.(event);
-          setVisible(false);
         },
+        onClick: () => setVisible(true),
         onChange: (event) => emitChange(event.currentTarget.value || undefined)
       }),
-      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx2("button", {
+      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: datePickerClearClass,
         "aria-label": "Clear date",
@@ -317,26 +975,95 @@ var DatePickerRoot = forwardRef(({
         onClick: () => emitChange(undefined),
         children: "x"
       }) : null,
-      /* @__PURE__ */ jsx2("span", {
+      /* @__PURE__ */ jsx3("button", {
+        type: "button",
         className: datePickerIconClass,
-        "aria-hidden": "true"
+        "aria-label": "Open date picker",
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-controls": visible ? dropdown.panelId : undefined,
+        disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => setVisible(!visible),
+        children: /* @__PURE__ */ jsxs3("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "18",
+          height: "18",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx3("rect", {
+              x: "3",
+              y: "5",
+              width: "18",
+              height: "16",
+              rx: "2"
+            }),
+            /* @__PURE__ */ jsx3("path", {
+              d: "M8 3v4M16 3v4M3 10h18"
+            })
+          ]
+        })
       }),
-      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
+      visible ? /* @__PURE__ */ jsxs3("div", {
+        id: dropdown.panelId,
+        role: "dialog",
+        "aria-label": "Choose date",
         className: getDatePickerDropdownClasses({ open: visible }),
         children: [
-          presetItems.map((preset, index) => /* @__PURE__ */ jsx2("button", {
+          picker === "date" || picker === "month" ? /* @__PURE__ */ jsx3(Calendar, {
+            fullscreen: false,
+            value: currentValue,
+            mode: picker === "month" ? "year" : calendarMode,
+            onPanelChange: (_, mode) => {
+              if (picker === "date")
+                setCalendarMode(mode);
+            },
+            disabledDate: (date) => {
+              if (!disabledDate)
+                return false;
+              if (picker === "month")
+                return disabledDate(date.slice(0, 7));
+              if (calendarMode === "year") {
+                const [year, month] = date.split("-").map(Number);
+                const days = new Date(year, month, 0).getDate();
+                return Array.from({ length: days }, (_, index) => `${date.slice(0, 7)}-${String(index + 1).padStart(2, "0")}`).every((day) => disabledDate(day));
+              }
+              return disabledDate(date);
+            },
+            onSelect: (date, info) => {
+              if (picker === "date" && info.source === "month") {
+                setCalendarMode("month");
+                return;
+              }
+              selectValue(picker === "month" ? date.slice(0, 7) : date);
+            }
+          }) : /* @__PURE__ */ jsx3("input", {
+            type: inputType,
+            "aria-label": placeholderForPicker(picker),
+            value: currentValue ?? "",
+            onChange: (event) => selectValue(event.currentTarget.value)
+          }),
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx3("button", {
             type: "button",
             className: datePickerPresetClass,
             onMouseDown: (event) => event.preventDefault(),
-            onClick: () => emitChange(preset.value),
+            disabled: Boolean(disabledDate?.(preset.value)),
+            onClick: () => selectValue(preset.value),
             children: preset.label
           }, index)),
-          showNow ? /* @__PURE__ */ jsx2("div", {
+          showNow ? /* @__PURE__ */ jsx3("div", {
             className: datePickerFooterClass,
-            children: /* @__PURE__ */ jsx2("button", {
+            children: /* @__PURE__ */ jsx3("button", {
               type: "button",
               onMouseDown: (event) => event.preventDefault(),
-              onClick: () => emitChange(todayValue(picker)),
+              disabled: Boolean(disabledDate?.(todayValue(picker))),
+              onClick: () => selectValue(todayValue(picker)),
               children: "Now"
             })
           }) : null
@@ -346,9 +1073,10 @@ var DatePickerRoot = forwardRef(({
   });
 });
 DatePickerRoot.displayName = "DatePicker";
-var RangePicker = forwardRef(({
+var RangePicker = forwardRef2(({
   allowClear,
   className,
+  inputProps,
   defaultValue,
   disabled,
   disabledDate,
@@ -362,7 +1090,7 @@ var RangePicker = forwardRef(({
   ...props
 }, ref) => {
   const isControlled = value !== undefined;
-  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
+  const [innerValue, setInnerValue] = useState3(defaultValue ?? [undefined, undefined]);
   const currentValue = isControlled ? value : innerValue;
   const inputType = inputTypeForPicker(picker);
   function emitChange(nextValue) {
@@ -377,7 +1105,7 @@ var RangePicker = forwardRef(({
   function updateIndex(index, nextItem) {
     emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
   }
-  return /* @__PURE__ */ jsxs2("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     ...props,
     ref,
     className: getDatePickerClasses({
@@ -389,7 +1117,8 @@ var RangePicker = forwardRef(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsx2("input", {
+      /* @__PURE__ */ jsx3("input", {
+        ...inputProps,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -397,11 +1126,13 @@ var RangePicker = forwardRef(({
         placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
         onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
       }),
-      /* @__PURE__ */ jsx2("span", {
+      /* @__PURE__ */ jsx3("span", {
         className: datePickerSeparatorClass,
         children: separator
       }),
-      /* @__PURE__ */ jsx2("input", {
+      /* @__PURE__ */ jsx3("input", {
+        ...inputProps,
+        id: inputProps?.id ? `${inputProps.id}-end` : undefined,
         className: datePickerInputClass,
         disabled,
         type: inputType,
@@ -409,7 +1140,7 @@ var RangePicker = forwardRef(({
         placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
         onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
       }),
-      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx2("button", {
+      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx3("button", {
         type: "button",
         className: datePickerClearClass,
         "aria-label": "Clear date range",
@@ -421,7 +1152,7 @@ var RangePicker = forwardRef(({
 });
 RangePicker.displayName = "DatePicker.RangePicker";
 function withPicker(picker, displayName) {
-  const Picker = forwardRef((props, ref) => /* @__PURE__ */ jsx2(DatePickerRoot, {
+  const Picker = forwardRef2((props, ref) => /* @__PURE__ */ jsx3(DatePickerRoot, {
     ...props,
     ref,
     picker
@@ -438,10 +1169,10 @@ var DatePicker = Object.assign(DatePickerRoot, {
 });
 // src/components/input/Input.tsx
 import {
-  forwardRef as forwardRef2,
-  useImperativeHandle,
-  useRef,
-  useState as useState2
+  forwardRef as forwardRef3,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef2,
+  useState as useState4
 } from "react";
 
 // src/classes/input.ts
@@ -530,14 +1261,14 @@ function getTextAreaCountClasses({ exceeded }) {
 }
 
 // src/components/input/Input.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function toTextValue(value) {
   if (Array.isArray(value)) {
     return value.join(",");
   }
   return value == null ? "" : String(value);
 }
-var InputRoot = forwardRef2(({
+var InputRoot = forwardRef3(({
   allowClear,
   className,
   defaultValue,
@@ -552,12 +1283,12 @@ var InputRoot = forwardRef2(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const inputRef = useRef(null);
-  const [internalValue, setInternalValue] = useState2(() => toTextValue(defaultValue));
+  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);
+  useImperativeHandle2(ref, () => inputRef.current);
   function handleChange(event) {
     if (!isControlled) {
       setInternalValue(event.currentTarget.value);
@@ -580,7 +1311,7 @@ var InputRoot = forwardRef2(({
     });
     input.focus();
   }
-  const control = /* @__PURE__ */ jsx3("input", {
+  const control = /* @__PURE__ */ jsx4("input", {
     ...props,
     ref: inputRef,
     type,
@@ -593,22 +1324,22 @@ var InputRoot = forwardRef2(({
     return control;
   }
   const showClear = allowClear && !disabled && currentValue.length > 0;
-  return /* @__PURE__ */ jsxs3("span", {
+  return /* @__PURE__ */ jsxs4("span", {
     className: getInputWrapperClasses({ affixed: hasAffix }),
     children: [
-      prefix != null ? /* @__PURE__ */ jsx3("span", {
+      prefix != null ? /* @__PURE__ */ jsx4("span", {
         className: inputPrefixClass,
         children: prefix
       }) : null,
       control,
-      showClear ? /* @__PURE__ */ jsx3("button", {
+      showClear ? /* @__PURE__ */ jsx4("button", {
         type: "button",
         className: inputClearClass,
         "aria-label": "Clear input",
         onClick: handleClear,
         children: "x"
       }) : null,
-      suffix != null ? /* @__PURE__ */ jsx3("span", {
+      suffix != null ? /* @__PURE__ */ jsx4("span", {
         className: inputSuffixClass,
         children: suffix
       }) : null
@@ -616,7 +1347,7 @@ var InputRoot = forwardRef2(({
   });
 });
 InputRoot.displayName = "Input";
-var Search = forwardRef2(({
+var Search = forwardRef3(({
   className,
   disabled,
   enterButton,
@@ -625,8 +1356,8 @@ var Search = forwardRef2(({
   onSearch,
   ...props
 }, ref) => {
-  const inputRef = useRef(null);
-  useImperativeHandle(ref, () => inputRef.current);
+  const inputRef = useRef2(null);
+  useImperativeHandle2(ref, () => inputRef.current);
   function emitSearch(event) {
     onSearch?.(inputRef.current?.value ?? "", event);
   }
@@ -637,16 +1368,16 @@ var Search = forwardRef2(({
     }
   }
   const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
-  return /* @__PURE__ */ jsxs3("span", {
+  return /* @__PURE__ */ jsxs4("span", {
     className: getSearchWrapperClasses({ className }),
     children: [
-      /* @__PURE__ */ jsx3(InputRoot, {
+      /* @__PURE__ */ jsx4(InputRoot, {
         ...props,
         ref: inputRef,
         disabled,
         onKeyDown: handleKeyDown
       }),
-      enterButton || loading ? /* @__PURE__ */ jsx3("button", {
+      enterButton || loading ? /* @__PURE__ */ jsx4("button", {
         type: "button",
         className: inputSearchButtonClass,
         disabled: disabled || loading,
@@ -658,10 +1389,10 @@ var Search = forwardRef2(({
   });
 });
 Search.displayName = "Input.Search";
-var Password = forwardRef2(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
-  const [visible, setVisible] = useState2(false);
+var Password = forwardRef3(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
+  const [visible, setVisible] = useState4(false);
   const type = visible ? "text" : "password";
-  const toggle = visibilityToggle ? /* @__PURE__ */ jsx3("button", {
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx4("button", {
     type: "button",
     className: inputPasswordToggleClass,
     disabled,
@@ -671,9 +1402,9 @@ var Password = forwardRef2(({ className, disabled, visibilityToggle = true, ...p
     },
     children: visible ? "Hide" : "Show"
   }) : undefined;
-  return /* @__PURE__ */ jsx3("span", {
+  return /* @__PURE__ */ jsx4("span", {
     className: getPasswordWrapperClasses({ className }),
-    children: /* @__PURE__ */ jsx3(InputRoot, {
+    children: /* @__PURE__ */ jsx4(InputRoot, {
       ...props,
       ref,
       disabled,
@@ -683,7 +1414,7 @@ var Password = forwardRef2(({ className, disabled, visibilityToggle = true, ...p
   });
 });
 Password.displayName = "Input.Password";
-var TextArea = forwardRef2(({
+var TextArea = forwardRef3(({
   autoSize,
   className,
   defaultValue,
@@ -697,7 +1428,7 @@ var TextArea = forwardRef2(({
   variant = "outlined",
   ...props
 }, ref) => {
-  const [internalValue, setInternalValue] = useState2(() => toTextValue(defaultValue));
+  const [internalValue, setInternalValue] = useState4(() => toTextValue(defaultValue));
   const isControlled = value !== undefined;
   const currentValue = isControlled ? toTextValue(value) : internalValue;
   const count = currentValue.length;
@@ -708,7 +1439,7 @@ var TextArea = forwardRef2(({
     }
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ jsx3("textarea", {
+  const control = /* @__PURE__ */ jsx4("textarea", {
     ...props,
     ref,
     className: getTextAreaClasses({
@@ -726,11 +1457,11 @@ var TextArea = forwardRef2(({
   if (!showCount) {
     return control;
   }
-  return /* @__PURE__ */ jsxs3("span", {
+  return /* @__PURE__ */ jsxs4("span", {
     className: textAreaWrapperClass,
     children: [
       control,
-      /* @__PURE__ */ jsxs3("span", {
+      /* @__PURE__ */ jsxs4("span", {
         className: getTextAreaCountClasses({ exceeded }),
         children: [
           count,
@@ -741,7 +1472,7 @@ var TextArea = forwardRef2(({
   });
 });
 TextArea.displayName = "Input.TextArea";
-var Group = forwardRef2(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+var Group = forwardRef3(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
   ...props,
   ref,
   className: cn(inputGroupClass, className),
@@ -755,7 +1486,7 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React3, { forwardRef as forwardRef3, useMemo as useMemo2, useState as useState3 } from "react";
+import React5, { forwardRef as forwardRef4, useMemo as useMemo3, useState as useState5 } from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -811,7 +1542,7 @@ function getSelectOptionClasses({
 }
 
 // src/components/select/Select.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function isGroup(option) {
   return "options" in option;
 }
@@ -836,8 +1567,8 @@ function normalizeMultiValue(value) {
 }
 function optionsFromChildren(children) {
   const result = [];
-  React3.Children.forEach(children, (child) => {
-    if (!React3.isValidElement(child)) {
+  React5.Children.forEach(children, (child) => {
+    if (!React5.isValidElement(child)) {
       return;
     }
     if (child.type === Option) {
@@ -887,19 +1618,19 @@ function filterOptions(options, searchValue, filterOption) {
 function renderValue(option) {
   return option ? optionLabel(option) : null;
 }
-var Option = forwardRef3(({ children, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var Option = forwardRef4(({ children, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   children
 }));
 Option.displayName = "Select.Option";
-var OptGroup = forwardRef3(({ children, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var OptGroup = forwardRef4(({ children, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   children
 }));
 OptGroup.displayName = "Select.OptGroup";
-var SelectRoot = forwardRef3(({
+var SelectRoot = forwardRef4(({
   allowClear,
   children,
   className,
@@ -918,11 +1649,11 @@ var SelectRoot = forwardRef3(({
   ...props
 }, ref) => {
   const multiple = mode === "multiple" || mode === "tags";
-  const sourceOptions = useMemo2(() => options ?? optionsFromChildren(children), [children, options]);
-  const flatOptions = useMemo2(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState3(false);
-  const [searchValue, setSearchValue] = useState3("");
-  const [internalValue, setInternalValue] = useState3(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  const sourceOptions = useMemo3(() => options ?? optionsFromChildren(children), [children, options]);
+  const flatOptions = useMemo3(() => 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)];
@@ -979,7 +1710,7 @@ var SelectRoot = forwardRef3(({
   }
   function renderOption(option) {
     const selected = selectedKeys.has(valueKey(option.value));
-    return /* @__PURE__ */ jsx4("button", {
+    return /* @__PURE__ */ jsx5("button", {
       type: "button",
       role: "option",
       "aria-selected": selected,
@@ -998,11 +1729,11 @@ var SelectRoot = forwardRef3(({
       if (!isGroup(option)) {
         return renderOption(option);
       }
-      return /* @__PURE__ */ jsxs4("div", {
+      return /* @__PURE__ */ jsxs5("div", {
         className: cn(selectGroupClass, option.className),
         role: "group",
         children: [
-          /* @__PURE__ */ jsx4("div", {
+          /* @__PURE__ */ jsx5("div", {
             className: selectGroupLabelClass,
             children: option.label
           }),
@@ -1011,11 +1742,11 @@ var SelectRoot = forwardRef3(({
       }, `group-${index}`);
     });
   }
-  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx4("span", {
+  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx5("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs5("div", {
     ...props,
     ref,
     className: getSelectContainerClasses({
@@ -1026,7 +1757,7 @@ var SelectRoot = forwardRef3(({
       className
     }),
     children: [
-      /* @__PURE__ */ jsxs4("button", {
+      /* @__PURE__ */ jsxs5("button", {
         type: "button",
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
@@ -1034,33 +1765,33 @@ var SelectRoot = forwardRef3(({
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
         children: [
-          /* @__PURE__ */ jsx4("span", {
+          /* @__PURE__ */ jsx5("span", {
             className: selectSelectionClass,
-            children: hasValue ? selection : /* @__PURE__ */ jsx4("span", {
+            children: hasValue ? selection : /* @__PURE__ */ jsx5("span", {
               className: selectPlaceholderClass,
               children: placeholder
             })
           }),
-          /* @__PURE__ */ jsx4("span", {
+          /* @__PURE__ */ jsx5("span", {
             className: selectIconClass,
             "aria-hidden": "true",
             children: "v"
           })
         ]
       }),
-      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx4("button", {
+      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx5("button", {
         type: "button",
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
         children: "x"
       }) : null,
-      open ? /* @__PURE__ */ jsxs4("div", {
+      open ? /* @__PURE__ */ jsxs5("div", {
         className: selectDropdownClass,
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
         children: [
-          searchable ? /* @__PURE__ */ jsx4("input", {
+          searchable ? /* @__PURE__ */ jsx5("input", {
             className: selectSearchClass,
             value: searchValue,
             placeholder: typeof placeholder === "string" ? placeholder : undefined,
@@ -1072,7 +1803,7 @@ var SelectRoot = forwardRef3(({
               }
             }
           }) : null,
-          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx4("div", {
+          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx5("div", {
             className: selectEmptyClass,
             children: "No data"
           })
@@ -1086,7 +1817,7 @@ var Select = SelectRoot;
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 // src/components/dm-search/DmSearch.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } 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;
@@ -1110,7 +1841,7 @@ function renderField({
     return item.search.render?.(value, setValue, item) ?? null;
   }
   if (item.search.type === "select") {
-    return /* @__PURE__ */ jsx5(Select, {
+    return /* @__PURE__ */ jsx6(Select, {
       ...extraProps,
       disabled: Boolean(loading || extraProps.disabled),
       value,
@@ -1119,25 +1850,25 @@ function renderField({
     });
   }
   if (item.search.type === "dateRange") {
-    return /* @__PURE__ */ jsx5(DatePicker.RangePicker, {
+    return /* @__PURE__ */ jsx6(DatePicker.RangePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "date") {
-    return /* @__PURE__ */ jsx5(DatePicker, {
+    return /* @__PURE__ */ jsx6(DatePicker, {
       ...extraProps,
       value,
       onChange: (nextValue) => setValue(nextValue)
     });
   }
   if (item.search.type === "radio" || item.search.type === "checkbox") {
-    return /* @__PURE__ */ jsx5("div", {
+    return /* @__PURE__ */ jsx6("div", {
       role: item.search.type === "radio" ? "radiogroup" : "group",
-      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs5("label", {
+      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs6("label", {
         children: [
-          /* @__PURE__ */ jsx5("input", {
+          /* @__PURE__ */ jsx6("input", {
             type: item.search.type,
             disabled: loading,
             checked: item.search.type === "checkbox" ? Array.isArray(value) && value.includes(option.value) : value === option.value,
@@ -1155,7 +1886,7 @@ function renderField({
       }, String(option.value)))
     });
   }
-  return /* @__PURE__ */ jsx5(Input, {
+  return /* @__PURE__ */ jsx6(Input, {
     ...extraProps,
     type: item.search.type === "input-number" ? "number" : "text",
     disabled: Boolean(loading || extraProps.disabled),
@@ -1169,8 +1900,11 @@ function renderField({
     }
   });
 }
-var DmSearch = forwardRef4(({
+var DmSearch = forwardRef5(({
   items = [],
+  values: controlledValues,
+  onValuesChange,
+  onReset,
   onSearch,
   extra,
   fastFilterItem,
@@ -1179,27 +1913,37 @@ var DmSearch = forwardRef4(({
   compact = false,
   searchParams,
   loading = false,
+  noValidate,
   enableDefaultPlaceHolder = false,
   className
 }, ref) => {
-  const allItems = useMemo3(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
-  const [collapsed, setCollapsed] = useState4(defaultCollapsed);
-  const [values, setValues] = useState4(() => initialValues(allItems, searchParams));
+  const allItems = useMemo4(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
+  const [collapsed, setCollapsed] = useState6(defaultCollapsed);
+  const [internalValues, setValues] = useState6(() => initialValues(allItems, searchParams));
+  const controlled = controlledValues !== undefined;
+  const values = controlled ? controlledValues : internalValues;
   const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
-  useEffect(() => {
-    setValues(initialValues(allItems, searchParams));
-  }, [allItems, searchParams]);
+  useEffect2(() => {
+    if (!controlled)
+      setValues(initialValues(allItems, searchParams));
+  }, [allItems, searchParams, controlled]);
   function reset(useSearchParams = false) {
     const nextValues = initialValues(allItems, searchParams, useSearchParams);
-    setValues(nextValues);
+    if (!controlled)
+      setValues(nextValues);
+    if (onReset)
+      onReset(nextValues);
+    else if (controlled)
+      onValuesChange?.(nextValues);
     return nextValues;
   }
-  useImperativeHandle2(ref, () => ({
+  useImperativeHandle3(ref, () => ({
     onReset: () => {
       reset(false);
     }
   }));
-  return /* @__PURE__ */ jsxs5("form", {
+  return /* @__PURE__ */ jsxs6("form", {
+    noValidate,
     id: "searchForm",
     className: getDmSearchClasses({ compact, collapsed, className }),
     onSubmit: (event) => {
@@ -1207,53 +1951,63 @@ var DmSearch = forwardRef4(({
       onSearch?.(values);
     },
     children: [
-      fastFilterItem ? /* @__PURE__ */ jsx5("div", {
+      fastFilterItem ? /* @__PURE__ */ jsx6("div", {
         className: dmSearchFastFilterClass,
         children: fastFilterItem.title
       }) : null,
-      /* @__PURE__ */ jsx5("div", {
+      /* @__PURE__ */ jsx6("div", {
         className: dmSearchFieldsClass,
-        children: visibleItems.map((item) => /* @__PURE__ */ jsxs5("label", {
-          className: dmSearchFieldClass,
-          children: [
-            compact ? null : /* @__PURE__ */ jsx5("span", {
-              children: item.title
-            }),
-            renderField({
-              item,
-              value: values[item.dataIndex],
-              loading,
-              enableDefaultPlaceHolder,
-              setValue: (value) => setValues((current) => ({
-                ...current,
-                [item.dataIndex]: value
-              }))
-            })
-          ]
-        }, item.key))
+        children: visibleItems.map((item) => {
+          const Field = item.search.type === "custom" ? "div" : "label";
+          return /* @__PURE__ */ jsxs6(Field, {
+            className: dmSearchFieldClass,
+            children: [
+              compact ? null : /* @__PURE__ */ jsx6("span", {
+                children: item.title
+              }),
+              renderField({
+                item,
+                value: values[item.dataIndex],
+                loading,
+                enableDefaultPlaceHolder,
+                setValue: (value) => {
+                  const nextValues = { ...values, [item.dataIndex]: value };
+                  if (!controlled)
+                    setValues(nextValues);
+                  onValuesChange?.(nextValues);
+                }
+              })
+            ]
+          }, item.key);
+        })
       }),
-      /* @__PURE__ */ jsxs5("div", {
+      /* @__PURE__ */ jsxs6("div", {
         className: dmSearchActionsClass,
         children: [
-          /* @__PURE__ */ jsx5(Button, {
+          /* @__PURE__ */ jsx6(Button, {
             type: "submit",
             isLoading: loading,
             children: "Search"
           }),
-          /* @__PURE__ */ jsx5(Button, {
+          /* @__PURE__ */ jsx6(Button, {
             type: "button",
             color: "secondary",
             appearance: "outline",
-            onClick: () => onSearch?.(reset(false)),
+            onClick: () => {
+              const nextValues = reset(false);
+              if (!onReset)
+                onSearch?.(nextValues);
+            },
             children: "Reset"
           }),
-          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx5(Button, {
+          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx6(Button, {
             type: "button",
             color: "secondary",
             appearance: "text",
             onClick: () => {
               setCollapsed((current) => !current);
-              setValues(initialValues(allItems, searchParams));
+              if (!controlled)
+                setValues(initialValues(allItems, searchParams));
             },
             children: collapsed ? "Expand" : "Collapse"
           }) : null,