klun-ui 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to **klun-ui** are documented here. The format follows
+[Keep a Changelog](https://keepachangelog.com/), and the project adheres to
+[Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
+small breaking changes).
+
+## [0.1.2] — 2026-06-20
+
+### Added
+- **`DateTimePicker`** — a single input that selects both a date and a time. It
+  opens a popover containing the month calendar plus a time selector, sharing one
+  `Date` (changing the date keeps the time and vice-versa). Supports `inline`,
+  `placeholder`, `format`, `align` and `disabled`, mirroring the other pickers.
+
+## [0.1.1] — 2026-06-20
+
+### Changed
+- **`DatePicker` / `DateRangePicker` now default to an input trigger.** They
+  render a read-only input that opens the calendar in a popover, instead of an
+  always-visible inline calendar. New props on both:
+  - `inline` — render the bare calendar (the previous behaviour).
+  - `placeholder` — trigger text when nothing is selected.
+  - `format` — `Intl.DateTimeFormatOptions` for the trigger label.
+  - `align` — popover alignment (`"left"` | `"right"`).
+  - `disabled` — disable the trigger.
+- Corrected the package `description` (6 accent themes; dropped the stale
+  component count).
+
+### Migration
+- Replace `<DatePicker … />` used as an inline calendar with
+  `<DatePicker inline … />` to keep the old always-open behaviour. The default
+  (no `inline`) is now the input-triggered popover.
+
+## [0.1.0] — 2026-06-20
+
+### Added
+- Initial public release: a themeable React + TypeScript component library and
+  design system — light/dark, multiple accent themes, a global radius axis,
+  `ConfigProvider`, i18n locales, and the full component set (layout, forms,
+  navigation, data display, feedback, overlays, charts).
+
+[0.1.2]: https://www.npmjs.com/package/klun-ui/v/0.1.2
+[0.1.1]: https://www.npmjs.com/package/klun-ui/v/0.1.1
+[0.1.0]: https://www.npmjs.com/package/klun-ui/v/0.1.0

package/dist/{chunk-2MTDM5CL.cjs → chunk-OPAZ7GAU.cjs}

@@ -6890,8 +6890,264 @@ var DatePicker = react.forwardRef(
   }
 );
 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,
+          {
+            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" }
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(DateTimePanel, { value: date, onChange: (d) => onChange?.(d) })
+      }
+    ) });
+  }
+);
+DateTimePicker.displayName = "DateTimePicker";
 var norm = (d) => d && new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-var DEFAULT_FORMAT2 = { month: "short", day: "numeric" };
+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();
@@ -6950,7 +7206,7 @@ var RangeCalendar = react.forwardRef(function RangeCalendar2({ start, end, onPic
   ] });
 });
 var DateRangePicker = react.forwardRef(
-  function DateRangePicker2({ start, end, onChange, inline, placeholder, format = DEFAULT_FORMAT2, align = "left", disabled, className, style, ...props }, ref) {
+  function DateRangePicker2({ start, end, onChange, inline, placeholder, format = DEFAULT_FORMAT3, align = "left", disabled, className, style, ...props }, ref) {
     if (inline) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         RangeCalendar,
@@ -8241,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",
@@ -10048,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;
@@ -10153,5 +10211,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-2MTDM5CL.cjs.map
-//# sourceMappingURL=chunk-2MTDM5CL.cjs.map
+//# sourceMappingURL=chunk-OPAZ7GAU.cjs.map
+//# sourceMappingURL=chunk-OPAZ7GAU.cjs.map