klun-ui 0.1.0 → 0.1.2

package/dist/{chunk-FTYQRXS5.cjs → chunk-OPAZ7GAU.cjs}

@@ -6681,193 +6681,578 @@ var CounterInput = react.forwardRef(function CounterInput2({
   );
 });
 CounterInput.displayName = "CounterInput";
+var Input = react.forwardRef(function Input2({
+  size: sizeProp,
+  leadingIcon,
+  trailingIcon,
+  leadingNode,
+  trailingNode,
+  error = false,
+  disabled = false,
+  readOnly = false,
+  loading = false,
+  clearable = false,
+  onClear,
+  className,
+  style,
+  ...props
+}, ref) {
+  const size = useSize(sizeProp);
+  const { input } = useLocale();
+  const innerRef = react.useRef(null);
+  const [hasValue, setHasValue] = react.useState(() => !!(props.value ?? props.defaultValue));
+  react.useEffect(() => {
+    if (props.value !== void 0) setHasValue(!!props.value);
+  }, [props.value]);
+  const setRef = (node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const showClear = clearable && hasValue && !disabled && !readOnly && !loading;
+  const clear = () => {
+    const node = innerRef.current;
+    if (node) {
+      node.value = "";
+      node.focus();
+    }
+    setHasValue(false);
+    onClear?.();
+    if (node) {
+      props.onChange?.({
+        ...{},
+        target: node,
+        currentTarget: node
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkTPGAXYFU_cjs.cx(
+        "klun-input",
+        `klun-input--${size}`,
+        error && "klun-input--error",
+        disabled && "klun-input--disabled",
+        readOnly && "klun-input--readonly",
+        className
+      ),
+      style,
+      children: [
+        leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: leadingIcon }) : null,
+        leadingNode,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: setRef,
+            className: "klun-input__field",
+            disabled,
+            readOnly,
+            ...props,
+            onChange: (e) => {
+              setHasValue(!!e.target.value);
+              props.onChange?.(e);
+            }
+          }
+        ),
+        showClear ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "klun-input__clear",
+            onClick: clear,
+            "aria-label": input.clear,
+            children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-circle-fill" })
+          }
+        ) : null,
+        trailingNode,
+        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__spinner", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "klun-input__spinner-svg", width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: "44", strokeDashoffset: "31" })
+        ] }) }) : trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: trailingIcon }) : null
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+var Popover = react.forwardRef(function Popover2({ trigger, children, align = "left", width = 280, className, ...props }, ref) {
+  const [open, setOpen] = react.useState(false);
+  const innerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const h = (e) => {
+      if (innerRef.current && !innerRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  const setRefs = (node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: setRefs, className: chunkTPGAXYFU_cjs.cx("klun-popover", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-popover__trigger", onClick: () => setOpen((o) => !o), children: trigger }),
+    open ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "dialog",
+        className: chunkTPGAXYFU_cjs.cx("klun-popover__panel", `klun-popover__panel--${align}`),
+        style: { width },
+        children: typeof children === "function" ? children(() => setOpen(false)) : children
+      }
+    ) : null
+  ] });
+});
+Popover.displayName = "Popover";
 var same = (a, b) => !!a && !!b && a.toDateString() === b.toDateString();
+var DEFAULT_FORMAT = {
+  year: "numeric",
+  month: "short",
+  day: "numeric"
+};
+var Calendar = react.forwardRef(function Calendar2({ value, onPick, className, style }, ref) {
+  const { datePicker } = useLocale();
+  const initial = value ? new Date(value) : /* @__PURE__ */ new Date();
+  const [view, setView] = react.useState(new Date(initial.getFullYear(), initial.getMonth(), 1));
+  const sel = value ? new Date(value) : null;
+  const y = view.getFullYear();
+  const m = view.getMonth();
+  const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-picker", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-picker__nav", onClick: () => setView(new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-picker__nav", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__grid", children: [
+      datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-picker__weekday", children: d }, i)),
+      cells.map((date, i) => {
+        if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "klun-date-picker__day",
+            "data-selected": same(date, sel) || void 0,
+            "data-today": same(date, today) || void 0,
+            onClick: () => onPick(date),
+            children: date.getDate()
+          },
+          i
+        );
+      })
+    ] })
+  ] });
+});
 var DatePicker = react.forwardRef(
-  function DatePicker2({ value, onChange, className, style, ...props }, ref) {
-    const { datePicker } = useLocale();
-    const initial = value ? new Date(value) : /* @__PURE__ */ new Date();
-    const [view, setView] = react.useState(
-      new Date(initial.getFullYear(), initial.getMonth(), 1)
-    );
+  function DatePicker2({ value, onChange, inline, placeholder, format = DEFAULT_FORMAT, align = "left", disabled, className, style, ...props }, ref) {
+    if (inline) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ref, value, onPick: (d) => onChange?.(d), className, style });
+    }
     const sel = value ? new Date(value) : null;
-    const y = view.getFullYear();
-    const m = view.getMonth();
-    const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
-    const daysInMonth = new Date(y, m + 1, 0).getDate();
-    const today = /* @__PURE__ */ new Date();
-    today.setHours(0, 0, 0, 0);
-    const cells = [];
-    for (let i = 0; i < firstDay; i++) cells.push(null);
-    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-picker", className), style, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+    const label = sel ? sel.toLocaleDateString(void 0, format) : "";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-field", className), style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        align,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            readOnly: true,
+            disabled,
+            value: label,
+            placeholder: placeholder ?? "Select date",
+            leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }),
+            trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line" }),
+            style: { width: "100%", cursor: "pointer" }
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            className: "klun-date-picker--bare",
+            value,
+            onPick: (d) => {
+              onChange?.(d);
+              close();
+            }
+          }
+        )
+      }
+    ) });
+  }
+);
+DatePicker.displayName = "DatePicker";
+var pad = (n) => String(n).padStart(2, "0");
+var TimePicker = react.forwardRef(
+  function TimePicker2({ value = "09:00", onChange, className, style, ...props }, ref) {
+    const t = useLocale();
+    const [h, m] = value.split(":").map(Number);
+    const mer = h >= 12 ? "PM" : "AM";
+    const h12 = (h + 11) % 12 + 1;
+    const set = (nh, nm, nmer) => {
+      let hh = nh % 12;
+      if (nmer === "PM") hh += 12;
+      onChange?.(`${pad(hh)}:${pad(nm)}`);
+    };
+    const [open, setOpen] = react.useState(null);
+    const rootRef = react.useRef(null);
+    const setRoot = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    react.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(null);
+      };
+      document.addEventListener("mousedown", onDown);
+      return () => document.removeEventListener("mousedown", onDown);
+    }, [open]);
+    const hourOpts = Array.from({ length: 12 }, (_, i) => ({
+      value: String(i + 1),
+      label: pad(i + 1)
+    }));
+    const minOpts = Array.from({ length: 60 }, (_, i) => ({
+      value: String(i),
+      label: pad(i)
+    }));
+    const merOpts = [
+      { value: "AM", label: t.timePicker.am },
+      { value: "PM", label: t.timePicker.pm }
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: setRoot,
+        className: chunkTPGAXYFU_cjs.cx("klun-time-picker", className),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-time-line klun-time-picker__icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeColumn,
+            {
+              options: hourOpts,
+              current: String(h12),
+              open: open === "h",
+              onOpen: () => setOpen("h"),
+              onClose: () => setOpen(null),
+              onPick: (v) => {
+                set(Number(v), m, mer);
+                setOpen(null);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-time-picker__sep", children: ":" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeColumn,
+            {
+              options: minOpts,
+              current: String(m),
+              open: open === "m",
+              onOpen: () => setOpen("m"),
+              onClose: () => setOpen(null),
+              onPick: (v) => {
+                set(h12, Number(v), mer);
+                setOpen(null);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeColumn,
+            {
+              className: "klun-time-picker__col--meridiem",
+              options: merOpts,
+              current: mer,
+              open: open === "mer",
+              onOpen: () => setOpen("mer"),
+              onClose: () => setOpen(null),
+              onPick: (v) => {
+                set(h12, m, v);
+                setOpen(null);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function TimeColumn({
+  options,
+  current,
+  open,
+  onOpen,
+  onClose,
+  onPick,
+  className
+}) {
+  const colRef = react.useRef(null);
+  const [active, setActive] = react.useState(-1);
+  const selected = options.find((o) => o.value === current);
+  const panel = () => colRef.current?.querySelector(".klun-select-listbox") ?? null;
+  const scrollTo = (i, center) => {
+    requestAnimationFrame(() => {
+      const p = panel();
+      const el = p?.children[i];
+      if (!p || !el) return;
+      if (center) {
+        p.scrollTop = el.offsetTop - p.clientHeight / 2 + el.offsetHeight / 2;
+      } else if (el.offsetTop < p.scrollTop) {
+        p.scrollTop = el.offsetTop - 4;
+      } else if (el.offsetTop + el.offsetHeight > p.scrollTop + p.clientHeight) {
+        p.scrollTop = el.offsetTop + el.offsetHeight - p.clientHeight + 4;
+      }
+    });
+  };
+  react.useEffect(() => {
+    if (!open) return;
+    const idx = options.findIndex((o) => o.value === current);
+    setActive(idx);
+    scrollTo(idx >= 0 ? idx : 0, true);
+  }, [open]);
+  const step = (dir) => {
+    if (!options.length) return;
+    let i = active;
+    for (let n = 0; n < options.length; n++) {
+      i = (i + dir + options.length) % options.length;
+      if (!options[i].disabled) break;
+    }
+    setActive(i);
+    scrollTo(i, false);
+  };
+  const onKeyDown = (e) => {
+    if (!open) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+        e.preventDefault();
+        onOpen();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        step(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        step(-1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (options[active]) onPick(options[active].value);
+        break;
+      case "Escape":
+        e.preventDefault();
+        onClose();
+        break;
+      case "Tab":
+        onClose();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: colRef, className: chunkTPGAXYFU_cjs.cx("klun-time-picker__col", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "klun-time-picker__trigger",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "data-open": open || void 0,
+        onClick: () => open ? onClose() : onOpen(),
+        onKeyDown,
+        children: selected ? selected.label : ""
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx(
+      SelectListbox,
+      {
+        className: "klun-time-picker__listbox",
+        options,
+        current,
+        active,
+        onActivate: setActive,
+        onPick: (o) => onPick(o.value)
+      }
+    ) : null
+  ] });
+}
+TimePicker.displayName = "TimePicker";
+var pad2 = (n) => String(n).padStart(2, "0");
+var DEFAULT_FORMAT2 = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+};
+function DateTimePanel({ value, onChange }) {
+  const hhmm = value ? `${pad2(value.getHours())}:${pad2(value.getMinutes())}` : "09:00";
+  const setDate = (d) => {
+    const next = new Date(d);
+    if (value) next.setHours(value.getHours(), value.getMinutes(), 0, 0);
+    else next.setHours(9, 0, 0, 0);
+    onChange(next);
+  };
+  const setTime = (t) => {
+    const [h, m] = t.split(":").map(Number);
+    const next = value ? new Date(value) : /* @__PURE__ */ new Date();
+    next.setHours(h, m, 0, 0);
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-time-picker__panel", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DatePicker, { inline: true, className: "klun-date-picker--bare", value, onChange: setDate }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-time-picker__time", children: /* @__PURE__ */ jsxRuntime.jsx(TimePicker, { value: hhmm, onChange: setTime }) })
+  ] });
+}
+var DateTimePicker = react.forwardRef(
+  function DateTimePicker2({ value, onChange, inline, placeholder, format = DEFAULT_FORMAT2, align = "left", disabled, className, style, ...props }, ref) {
+    const date = value ? new Date(value) : null;
+    if (inline) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-time-picker", className), style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(DateTimePanel, { value: date, onChange: (d) => onChange?.(d) }) });
+    }
+    const label = date ? date.toLocaleString(void 0, format) : "";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-time-field", className), style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        align,
+        width: 300,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
           {
-            type: "button",
-            className: "klun-date-picker__nav",
-            onClick: () => setView(new Date(y, m - 1, 1)),
-            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M12 6l-4 4 4 4",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            ) })
+            readOnly: true,
+            disabled,
+            value: label,
+            placeholder: placeholder ?? "Select date & time",
+            leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-2-line" }),
+            trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line" }),
+            style: { width: "100%", cursor: "pointer" }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "klun-date-picker__nav",
-            onClick: () => setView(new Date(y, m + 1, 1)),
-            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M8 6l4 4-4 4",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            ) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__grid", children: [
-        datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-picker__weekday", children: d }, i)),
-        cells.map((date, i) => {
-          if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
-          const isSel = same(date, sel);
-          const isToday = same(date, today);
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: "klun-date-picker__day",
-              "data-selected": isSel || void 0,
-              "data-today": isToday || void 0,
-              onClick: () => onChange?.(date),
-              children: date.getDate()
-            },
-            i
-          );
-        })
-      ] })
-    ] });
+        children: /* @__PURE__ */ jsxRuntime.jsx(DateTimePanel, { value: date, onChange: (d) => onChange?.(d) })
+      }
+    ) });
   }
 );
-DatePicker.displayName = "DatePicker";
+DateTimePicker.displayName = "DateTimePicker";
 var norm = (d) => d && new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-var DateRangePicker = react.forwardRef(
-  function DateRangePicker2({ start, end, onChange, className, style, ...props }, ref) {
-    const { datePicker } = useLocale();
-    const base = start ? new Date(start) : /* @__PURE__ */ new Date();
-    const [view, setView] = react.useState(
-      new Date(base.getFullYear(), base.getMonth(), 1)
-    );
-    const s = start ? new Date(start) : null;
-    const e = end ? new Date(end) : null;
-    const y = view.getFullYear();
-    const m = view.getMonth();
-    const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
-    const daysInMonth = new Date(y, m + 1, 0).getDate();
-    const cells = [];
-    for (let i = 0; i < firstDay; i++) cells.push(null);
-    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
-    const pick = (d) => {
-      if (!s || s && e) return onChange?.({ start: d, end: null });
-      if (norm(d) < norm(s)) return onChange?.({ start: d, end: s });
-      onChange?.({ start: s, end: d });
-    };
-    const inRange = (d) => !!s && !!e && norm(d) > norm(s) && norm(d) < norm(e);
-    const isStart = (d) => !!s && norm(d) === norm(s);
-    const isEnd = (d) => !!e && norm(d) === norm(e);
-    const isEdge = (d) => isStart(d) || isEnd(d);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: chunkTPGAXYFU_cjs.cx("klun-date-range-picker", className),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__header", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "klun-date-range-picker__nav",
-                onClick: () => setView(new Date(y, m - 1, 1)),
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M12 6l-4 4 4 4",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-range-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+var DEFAULT_FORMAT3 = { month: "short", day: "numeric" };
+var RangeCalendar = react.forwardRef(function RangeCalendar2({ start, end, onPick, className, style }, ref) {
+  const { datePicker } = useLocale();
+  const base = start ? new Date(start) : /* @__PURE__ */ new Date();
+  const [view, setView] = react.useState(new Date(base.getFullYear(), base.getMonth(), 1));
+  const s = start ? new Date(start) : null;
+  const e = end ? new Date(end) : null;
+  const y = view.getFullYear();
+  const m = view.getMonth();
+  const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
+  const pick = (d) => {
+    if (!s || s && e) return onPick({ start: d, end: null });
+    if (norm(d) < norm(s)) return onPick({ start: d, end: s });
+    onPick({ start: s, end: d });
+  };
+  const inRange = (d) => !!s && !!e && norm(d) > norm(s) && norm(d) < norm(e);
+  const isStart = (d) => !!s && norm(d) === norm(s);
+  const isEnd = (d) => !!e && norm(d) === norm(e);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-range-picker", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-range-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__grid", children: [
+      datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-range-picker__weekday", children: d }, i)),
+      cells.map((date, i) => {
+        if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
+        const mid = inRange(date);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "klun-date-range-picker__cell",
+            "data-in-range": mid || void 0,
+            "data-range-edge": isStart(date) || isEnd(date) || void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                className: "klun-date-range-picker__nav",
-                onClick: () => setView(new Date(y, m + 1, 1)),
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M8 6l4 4-4 4",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ) })
+                className: "klun-date-range-picker__day",
+                "data-range-start": isStart(date) || void 0,
+                "data-range-end": isEnd(date) || void 0,
+                "data-in-range": mid || void 0,
+                onClick: () => pick(date),
+                children: date.getDate()
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__grid", children: [
-            datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-range-picker__weekday", children: d }, i)),
-            cells.map((date, i) => {
-              if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
-              const edge = isEdge(date);
-              const mid = inRange(date);
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "klun-date-range-picker__cell",
-                  "data-in-range": mid || void 0,
-                  "data-range-edge": edge || void 0,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "klun-date-range-picker__day",
-                      "data-range-start": isStart(date) || void 0,
-                      "data-range-end": isEnd(date) || void 0,
-                      "data-in-range": mid || void 0,
-                      onClick: () => pick(date),
-                      children: date.getDate()
-                    }
-                  )
-                },
-                i
-              );
-            })
-          ] })
-        ]
+          },
+          i
+        );
+      })
+    ] })
+  ] });
+});
+var DateRangePicker = react.forwardRef(
+  function DateRangePicker2({ start, end, onChange, inline, placeholder, format = DEFAULT_FORMAT3, align = "left", disabled, className, style, ...props }, ref) {
+    if (inline) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RangeCalendar,
+        {
+          ref,
+          start,
+          end,
+          onPick: (r) => onChange?.(r),
+          className,
+          style
+        }
+      );
+    }
+    const f = (d) => d ? new Date(d).toLocaleDateString(void 0, format) : "";
+    const label = start || end ? `${f(start)} \u2013 ${f(end)}` : "";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-range-field", className), style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        align,
+        width: 300,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            readOnly: true,
+            disabled,
+            value: label,
+            placeholder: placeholder ?? "Select range",
+            leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-2-line" }),
+            trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line" }),
+            style: { width: "100%", cursor: "pointer" }
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+          RangeCalendar,
+          {
+            className: "klun-date-range-picker--bare",
+            start,
+            end,
+            onPick: (r) => {
+              onChange?.(r);
+              if (r.start && r.end) close();
+            }
+          }
+        )
       }
-    );
+    ) });
   }
 );
 DateRangePicker.displayName = "DateRangePicker";
@@ -7511,127 +7896,33 @@ var InlineSelect = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
-              ref: s.mergeSelectRef(ref),
-              className: "klun-inline-select__native",
-              "aria-hidden": true,
-              tabIndex: -1,
-              defaultValue: String(value ?? defaultValue ?? ""),
-              onChange,
-              disabled,
-              ...props,
-              children
-            }
-          ),
-          s.open ? /* @__PURE__ */ jsxRuntime.jsx(
-            SelectListbox,
-            {
-              options: s.options,
-              current: s.current,
-              active: s.active,
-              onActivate: s.setActive,
-              onPick: s.pick
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-InlineSelect.displayName = "InlineSelect";
-var Input = react.forwardRef(function Input2({
-  size: sizeProp,
-  leadingIcon,
-  trailingIcon,
-  leadingNode,
-  trailingNode,
-  error = false,
-  disabled = false,
-  readOnly = false,
-  loading = false,
-  clearable = false,
-  onClear,
-  className,
-  style,
-  ...props
-}, ref) {
-  const size = useSize(sizeProp);
-  const { input } = useLocale();
-  const innerRef = react.useRef(null);
-  const [hasValue, setHasValue] = react.useState(() => !!(props.value ?? props.defaultValue));
-  react.useEffect(() => {
-    if (props.value !== void 0) setHasValue(!!props.value);
-  }, [props.value]);
-  const setRef = (node) => {
-    innerRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  };
-  const showClear = clearable && hasValue && !disabled && !readOnly && !loading;
-  const clear = () => {
-    const node = innerRef.current;
-    if (node) {
-      node.value = "";
-      node.focus();
-    }
-    setHasValue(false);
-    onClear?.();
-    if (node) {
-      props.onChange?.({
-        ...{},
-        target: node,
-        currentTarget: node
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: chunkTPGAXYFU_cjs.cx(
-        "klun-input",
-        `klun-input--${size}`,
-        error && "klun-input--error",
-        disabled && "klun-input--disabled",
-        readOnly && "klun-input--readonly",
-        className
-      ),
-      style,
-      children: [
-        leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: leadingIcon }) : null,
-        leadingNode,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: setRef,
-            className: "klun-input__field",
-            disabled,
-            readOnly,
-            ...props,
-            onChange: (e) => {
-              setHasValue(!!e.target.value);
-              props.onChange?.(e);
-            }
-          }
-        ),
-        showClear ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "klun-input__clear",
-            onClick: clear,
-            "aria-label": input.clear,
-            children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-circle-fill" })
-          }
-        ) : null,
-        trailingNode,
-        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__spinner", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "klun-input__spinner-svg", width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: "44", strokeDashoffset: "31" })
-        ] }) }) : trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: trailingIcon }) : null
-      ]
-    }
-  );
-});
-Input.displayName = "Input";
+              ref: s.mergeSelectRef(ref),
+              className: "klun-inline-select__native",
+              "aria-hidden": true,
+              tabIndex: -1,
+              defaultValue: String(value ?? defaultValue ?? ""),
+              onChange,
+              disabled,
+              ...props,
+              children
+            }
+          ),
+          s.open ? /* @__PURE__ */ jsxRuntime.jsx(
+            SelectListbox,
+            {
+              options: s.options,
+              current: s.current,
+              active: s.active,
+              onActivate: s.setActive,
+              onPick: s.pick
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+InlineSelect.displayName = "InlineSelect";
 var Label = react.forwardRef(function Label2({ children, required = false, sublabel, disabled = false, className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
@@ -8206,205 +8497,6 @@ var Textarea = react.forwardRef(function Textarea2({ error = false, disabled = f
   );
 });
 Textarea.displayName = "Textarea";
-var pad = (n) => String(n).padStart(2, "0");
-var TimePicker = react.forwardRef(
-  function TimePicker2({ value = "09:00", onChange, className, style, ...props }, ref) {
-    const t = useLocale();
-    const [h, m] = value.split(":").map(Number);
-    const mer = h >= 12 ? "PM" : "AM";
-    const h12 = (h + 11) % 12 + 1;
-    const set = (nh, nm, nmer) => {
-      let hh = nh % 12;
-      if (nmer === "PM") hh += 12;
-      onChange?.(`${pad(hh)}:${pad(nm)}`);
-    };
-    const [open, setOpen] = react.useState(null);
-    const rootRef = react.useRef(null);
-    const setRoot = (node) => {
-      rootRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    };
-    react.useEffect(() => {
-      if (!open) return;
-      const onDown = (e) => {
-        if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(null);
-      };
-      document.addEventListener("mousedown", onDown);
-      return () => document.removeEventListener("mousedown", onDown);
-    }, [open]);
-    const hourOpts = Array.from({ length: 12 }, (_, i) => ({
-      value: String(i + 1),
-      label: pad(i + 1)
-    }));
-    const minOpts = Array.from({ length: 60 }, (_, i) => ({
-      value: String(i),
-      label: pad(i)
-    }));
-    const merOpts = [
-      { value: "AM", label: t.timePicker.am },
-      { value: "PM", label: t.timePicker.pm }
-    ];
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: setRoot,
-        className: chunkTPGAXYFU_cjs.cx("klun-time-picker", className),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-time-line klun-time-picker__icon" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            TimeColumn,
-            {
-              options: hourOpts,
-              current: String(h12),
-              open: open === "h",
-              onOpen: () => setOpen("h"),
-              onClose: () => setOpen(null),
-              onPick: (v) => {
-                set(Number(v), m, mer);
-                setOpen(null);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-time-picker__sep", children: ":" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            TimeColumn,
-            {
-              options: minOpts,
-              current: String(m),
-              open: open === "m",
-              onOpen: () => setOpen("m"),
-              onClose: () => setOpen(null),
-              onPick: (v) => {
-                set(h12, Number(v), mer);
-                setOpen(null);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            TimeColumn,
-            {
-              className: "klun-time-picker__col--meridiem",
-              options: merOpts,
-              current: mer,
-              open: open === "mer",
-              onOpen: () => setOpen("mer"),
-              onClose: () => setOpen(null),
-              onPick: (v) => {
-                set(h12, m, v);
-                setOpen(null);
-              }
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-function TimeColumn({
-  options,
-  current,
-  open,
-  onOpen,
-  onClose,
-  onPick,
-  className
-}) {
-  const colRef = react.useRef(null);
-  const [active, setActive] = react.useState(-1);
-  const selected = options.find((o) => o.value === current);
-  const panel = () => colRef.current?.querySelector(".klun-select-listbox") ?? null;
-  const scrollTo = (i, center) => {
-    requestAnimationFrame(() => {
-      const p = panel();
-      const el = p?.children[i];
-      if (!p || !el) return;
-      if (center) {
-        p.scrollTop = el.offsetTop - p.clientHeight / 2 + el.offsetHeight / 2;
-      } else if (el.offsetTop < p.scrollTop) {
-        p.scrollTop = el.offsetTop - 4;
-      } else if (el.offsetTop + el.offsetHeight > p.scrollTop + p.clientHeight) {
-        p.scrollTop = el.offsetTop + el.offsetHeight - p.clientHeight + 4;
-      }
-    });
-  };
-  react.useEffect(() => {
-    if (!open) return;
-    const idx = options.findIndex((o) => o.value === current);
-    setActive(idx);
-    scrollTo(idx >= 0 ? idx : 0, true);
-  }, [open]);
-  const step = (dir) => {
-    if (!options.length) return;
-    let i = active;
-    for (let n = 0; n < options.length; n++) {
-      i = (i + dir + options.length) % options.length;
-      if (!options[i].disabled) break;
-    }
-    setActive(i);
-    scrollTo(i, false);
-  };
-  const onKeyDown = (e) => {
-    if (!open) {
-      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
-        e.preventDefault();
-        onOpen();
-      }
-      return;
-    }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        step(1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        step(-1);
-        break;
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        if (options[active]) onPick(options[active].value);
-        break;
-      case "Escape":
-        e.preventDefault();
-        onClose();
-        break;
-      case "Tab":
-        onClose();
-        break;
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: colRef, className: chunkTPGAXYFU_cjs.cx("klun-time-picker__col", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "klun-time-picker__trigger",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "data-open": open || void 0,
-        onClick: () => open ? onClose() : onOpen(),
-        onKeyDown,
-        children: selected ? selected.label : ""
-      }
-    ),
-    open ? /* @__PURE__ */ jsxRuntime.jsx(
-      SelectListbox,
-      {
-        className: "klun-time-picker__listbox",
-        options,
-        current,
-        active,
-        onActivate: setActive,
-        onPick: (o) => onPick(o.value)
-      }
-    ) : null
-  ] });
-}
-TimePicker.displayName = "TimePicker";
 var Card = react.forwardRef(function Card2({ variant = "stroke", padding, className, style, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -9975,36 +10067,6 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
   ] });
 });
 Popconfirm.displayName = "Popconfirm";
-var Popover = react.forwardRef(function Popover2({ trigger, children, align = "left", width = 280, className, ...props }, ref) {
-  const [open, setOpen] = react.useState(false);
-  const innerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (!open) return;
-    const h = (e) => {
-      if (innerRef.current && !innerRef.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", h);
-    return () => document.removeEventListener("mousedown", h);
-  }, [open]);
-  const setRefs = (node) => {
-    innerRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: setRefs, className: chunkTPGAXYFU_cjs.cx("klun-popover", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-popover__trigger", onClick: () => setOpen((o) => !o), children: trigger }),
-    open ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "dialog",
-        className: chunkTPGAXYFU_cjs.cx("klun-popover__panel", `klun-popover__panel--${align}`),
-        style: { width },
-        children: typeof children === "function" ? children(() => setOpen(false)) : children
-      }
-    ) : null
-  ] });
-});
-Popover.displayName = "Popover";
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
@@ -10043,6 +10105,7 @@ exports.CopyButton = CopyButton;
 exports.CounterInput = CounterInput;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
+exports.DateTimePicker = DateTimePicker;
 exports.Descriptions = Descriptions;
 exports.DigitInput = DigitInput;
 exports.Divider = Divider;
@@ -10148,5 +10211,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-FTYQRXS5.cjs.map
-//# sourceMappingURL=chunk-FTYQRXS5.cjs.map
+//# sourceMappingURL=chunk-OPAZ7GAU.cjs.map
+//# sourceMappingURL=chunk-OPAZ7GAU.cjs.map