klun-ui 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# 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.3] — 2026-06-20
+
+### Fixed
+- **`TimePicker`** dropdowns now flip above the trigger when there isn't enough
+  room below the viewport (e.g. when the picker sits low inside a
+  `DateTimePicker` popover), instead of overflowing off-screen.
+
+## [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.3]: https://www.npmjs.com/package/klun-ui/v/0.1.3
+[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-DVPY6FDU.js → chunk-7EOW4LHP.js}

@@ -6888,8 +6888,265 @@ var DatePicker = forwardRef(
   }
 );
 DatePicker.displayName = "DatePicker";
+var pad = (n) => String(n).padStart(2, "0");
+var TimePicker = 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] = useState(null);
+    const rootRef = useRef(null);
+    const setRoot = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    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__ */ jsxs(
+      "div",
+      {
+        ref: setRoot,
+        className: cx("klun-time-picker", className),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("i", { className: "ri-time-line klun-time-picker__icon" }),
+          /* @__PURE__ */ 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__ */ jsx("span", { className: "klun-time-picker__sep", children: ":" }),
+          /* @__PURE__ */ 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__ */ 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 = useRef(null);
+  const [active, setActive] = useState(-1);
+  const selected = options.find((o) => o.value === current);
+  const flipUp = open && typeof window !== "undefined" && colRef.current ? colRef.current.getBoundingClientRect().bottom + 248 > window.innerHeight : false;
+  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;
+      }
+    });
+  };
+  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__ */ jsxs("div", { ref: colRef, className: cx("klun-time-picker__col", className), children: [
+    /* @__PURE__ */ 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__ */ jsx(
+      SelectListbox,
+      {
+        className: cx("klun-time-picker__listbox", flipUp && "klun-select-listbox--up"),
+        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__ */ jsxs("div", { className: "klun-date-time-picker__panel", children: [
+    /* @__PURE__ */ jsx(DatePicker, { inline: true, className: "klun-date-picker--bare", value, onChange: setDate }),
+    /* @__PURE__ */ jsx("div", { className: "klun-date-time-picker__time", children: /* @__PURE__ */ jsx(TimePicker, { value: hhmm, onChange: setTime }) })
+  ] });
+}
+var DateTimePicker = 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__ */ jsx("div", { ref, className: cx("klun-date-time-picker", className), style, ...props, children: /* @__PURE__ */ jsx(DateTimePanel, { value: date, onChange: (d) => onChange?.(d) }) });
+    }
+    const label = date ? date.toLocaleString(void 0, format) : "";
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-date-time-field", className), style, ...props, children: /* @__PURE__ */ jsx(
+      Popover,
+      {
+        align,
+        width: 300,
+        trigger: /* @__PURE__ */ jsx(
+          Input,
+          {
+            readOnly: true,
+            disabled,
+            value: label,
+            placeholder: placeholder ?? "Select date & time",
+            leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-calendar-2-line" }),
+            trailingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line" }),
+            style: { width: "100%", cursor: "pointer" }
+          }
+        ),
+        children: /* @__PURE__ */ 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 = forwardRef(function RangeCalendar2({ start, end, onPick, className, style }, ref) {
   const { datePicker } = useLocale();
   const base = start ? new Date(start) : /* @__PURE__ */ new Date();
@@ -6948,7 +7205,7 @@ var RangeCalendar = forwardRef(function RangeCalendar2({ start, end, onPick, cla
   ] });
 });
 var DateRangePicker = 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__ */ jsx(
         RangeCalendar,
@@ -8239,205 +8496,6 @@ var Textarea = forwardRef(function Textarea2({ error = false, disabled = false,
   );
 });
 Textarea.displayName = "Textarea";
-var pad = (n) => String(n).padStart(2, "0");
-var TimePicker = 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] = useState(null);
-    const rootRef = useRef(null);
-    const setRoot = (node) => {
-      rootRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    };
-    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__ */ jsxs(
-      "div",
-      {
-        ref: setRoot,
-        className: cx("klun-time-picker", className),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("i", { className: "ri-time-line klun-time-picker__icon" }),
-          /* @__PURE__ */ 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__ */ jsx("span", { className: "klun-time-picker__sep", children: ":" }),
-          /* @__PURE__ */ 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__ */ 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 = useRef(null);
-  const [active, setActive] = 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;
-      }
-    });
-  };
-  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__ */ jsxs("div", { ref: colRef, className: cx("klun-time-picker__col", className), children: [
-    /* @__PURE__ */ 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__ */ jsx(
-      SelectListbox,
-      {
-        className: "klun-time-picker__listbox",
-        options,
-        current,
-        active,
-        onActivate: setActive,
-        onPick: (o) => onPick(o.value)
-      }
-    ) : null
-  ] });
-}
-TimePicker.displayName = "TimePicker";
 var Card = forwardRef(function Card2({ variant = "stroke", padding, className, style, children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -10009,6 +10067,6 @@ var Popconfirm = forwardRef(function Popconfirm2({
 });
 Popconfirm.displayName = "Popconfirm";
 
-export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, Chip, CircularProgress, CodeViewer, Col, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, CopyButton, CounterInput, DatePicker, DateRangePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-DVPY6FDU.js.map
-//# sourceMappingURL=chunk-DVPY6FDU.js.map
+export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, Chip, CircularProgress, CodeViewer, Col, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
+//# sourceMappingURL=chunk-7EOW4LHP.js.map
+//# sourceMappingURL=chunk-7EOW4LHP.js.map