klun-ui 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [0.1.14] — 2026-06-23
+
+### Added
+- **`Markdown` — a dependency-free Markdown → React renderer.** Renders headings,
+  `**bold**` / `*italic*` / `~~strike~~` / `` `code` ``, `[links](url)`,
+  `> blockquotes`, ordered/unordered lists and ``` fenced code blocks ``` as React
+  nodes (never raw HTML, so user text is XSS-safe). Use `<Markdown>{src}</Markdown>`
+  (or `source={src}`); the underlying `renderMarkdown(src): ReactNode` function is
+  exported too for inline use. Styles are namespaced under `.klun-md`.
+
 ## [0.1.13] — 2026-06-23
 
 ### Added

package/dist/{chunk-Y2R5PBYN.cjs → chunk-752UKCVU.cjs}

@@ -166,7 +166,7 @@ var Format = {
 
 // src/components/config/locales.tsx
 function fmt(template, vars) {
-  return template.replace(/\{(\w+)\}/g, (m, k) => k in vars ? String(vars[k]) : m);
+  return template.replace(/\{(\w+)\}/g, (m, k2) => k2 in vars ? String(vars[k2]) : m);
 }
 var enUS = {
   locale: "en-US",
@@ -2934,6 +2934,104 @@ var ListItem = react.forwardRef(
   }
 );
 ListItem.displayName = "ListItem";
+var k = 0;
+function inline(text) {
+  const patterns = [
+    { re: /`([^`]+)`/, node: (m) => /* @__PURE__ */ jsxRuntime.jsx("code", { className: "klun-md-code", children: m[1] }, k++) },
+    { re: /\*\*([^*]+)\*\*/, node: (m) => /* @__PURE__ */ jsxRuntime.jsx("strong", { children: inline(m[1]) }, k++) },
+    { re: /~~([^~]+)~~/, node: (m) => /* @__PURE__ */ jsxRuntime.jsx("del", { children: inline(m[1]) }, k++) },
+    { re: /\*([^*]+)\*/, node: (m) => /* @__PURE__ */ jsxRuntime.jsx("em", { children: inline(m[1]) }, k++) },
+    { re: /<u>([\s\S]*?)<\/u>/, node: (m) => /* @__PURE__ */ jsxRuntime.jsx("u", { children: inline(m[1]) }, k++) },
+    {
+      re: /\[([^\]]+)\]\(([^)]+)\)/,
+      node: (m) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: m[2], target: "_blank", rel: "noreferrer", children: m[1] }, k++)
+    }
+  ];
+  const out = [];
+  let rest = text;
+  while (rest.length) {
+    let best = null;
+    for (const p of patterns) {
+      const m = p.re.exec(rest);
+      if (m && (best === null || m.index < best.idx)) best = { idx: m.index, len: m[0].length, p, m };
+    }
+    if (!best) {
+      out.push(rest);
+      break;
+    }
+    if (best.idx > 0) out.push(rest.slice(0, best.idx));
+    out.push(best.p.node(best.m));
+    rest = rest.slice(best.idx + best.len);
+  }
+  return out;
+}
+var SPECIAL = /^(#{1,6}\s|>\s?|[-*]\s+|\d+\.\s+|```)/;
+function renderMarkdown(src) {
+  k = 0;
+  const lines = src.replace(/\r\n/g, "\n").split("\n");
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (/^```/.test(line)) {
+      const buf2 = [];
+      i++;
+      while (i < lines.length && !/^```/.test(lines[i])) buf2.push(lines[i++]);
+      i++;
+      blocks.push(
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "klun-md-pre", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: buf2.join("\n") }) }, k++)
+      );
+      continue;
+    }
+    const h = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (h) {
+      const tag = `h${Math.min(h[1].length + 2, 6)}`;
+      blocks.push(react.createElement(tag, { key: k++, className: "klun-md-h" }, inline(h[2])));
+      i++;
+      continue;
+    }
+    if (/^>\s?/.test(line)) {
+      const buf2 = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) buf2.push(lines[i++].replace(/^>\s?/, ""));
+      blocks.push(
+        /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "klun-md-quote", children: inline(buf2.join("\n")) }, k++)
+      );
+      continue;
+    }
+    if (/^[-*]\s+/.test(line)) {
+      const items2 = [];
+      while (i < lines.length && /^[-*]\s+/.test(lines[i])) items2.push(lines[i++].replace(/^[-*]\s+/, ""));
+      blocks.push(
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "klun-md-ul", children: items2.map((it, j) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: inline(it) }, j)) }, k++)
+      );
+      continue;
+    }
+    if (/^\d+\.\s+/.test(line)) {
+      const items2 = [];
+      while (i < lines.length && /^\d+\.\s+/.test(lines[i])) items2.push(lines[i++].replace(/^\d+\.\s+/, ""));
+      blocks.push(
+        /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "klun-md-ol", children: items2.map((it, j) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: inline(it) }, j)) }, k++)
+      );
+      continue;
+    }
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+    const buf = [line];
+    i++;
+    while (i < lines.length && lines[i].trim() !== "" && !SPECIAL.test(lines[i])) buf.push(lines[i++]);
+    blocks.push(
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "klun-md-p", children: buf.flatMap((l, j) => j ? [/* @__PURE__ */ jsxRuntime.jsx("br", {}, `br${j}`), ...inline(l)] : inline(l)) }, k++)
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: blocks });
+}
+var Markdown = react.forwardRef(function Markdown2({ children, source, className, ...props }, ref) {
+  const src = source ?? (typeof children === "string" ? children : "") ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-md", className), ...props, children: renderMarkdown(src) });
+});
+Markdown.displayName = "Markdown";
 var Money = react.forwardRef(function Money2({
   value,
   cents = false,
@@ -3177,8 +3275,8 @@ function StatusBadge({
   className,
   ...props
 }) {
-  const k = keyOf(status);
-  const resolvedTone = tone || map && map[k] || STATUS_TONE[k] || "neutral";
+  const k2 = keyOf(status);
+  const resolvedTone = tone || map && map[k2] || STATUS_TONE[k2] || "neutral";
   const color = TONE_COLOR[resolvedTone] || "gray";
   const text = label != null ? label : String(status == null ? "" : status).replace(/[-_]/g, " ");
   const display = typeof text === "string" ? text.charAt(0).toUpperCase() + text.slice(1) : text;
@@ -3303,14 +3401,14 @@ function Pager({
     const h = (e) => {
       if (sizeRef.current && !sizeRef.current.contains(e.target)) setSizeOpen(false);
     };
-    const k = (e) => {
+    const k2 = (e) => {
       if (e.key === "Escape") setSizeOpen(false);
     };
     document.addEventListener("mousedown", h);
-    document.addEventListener("keydown", k);
+    document.addEventListener("keydown", k2);
     return () => {
       document.removeEventListener("mousedown", h);
-      document.removeEventListener("keydown", k);
+      document.removeEventListener("keydown", k2);
     };
   }, [sizeOpen]);
   const nums = [];
@@ -3428,16 +3526,16 @@ function ContextMenu({
   }, [x, y]);
   react.useEffect(() => {
     const close = () => onClose();
-    const k = (e) => {
+    const k2 = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("mousedown", close);
-    document.addEventListener("keydown", k);
+    document.addEventListener("keydown", k2);
     window.addEventListener("scroll", close, true);
     window.addEventListener("resize", close);
     return () => {
       document.removeEventListener("mousedown", close);
-      document.removeEventListener("keydown", k);
+      document.removeEventListener("keydown", k2);
       window.removeEventListener("scroll", close, true);
       window.removeEventListener("resize", close);
     };
@@ -3489,14 +3587,14 @@ function ColumnSettings({
     const h = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
-    const k = (e) => {
+    const k2 = (e) => {
       if (e.key === "Escape") setOpen(false);
     };
     document.addEventListener("mousedown", h);
-    document.addEventListener("keydown", k);
+    document.addEventListener("keydown", k2);
     return () => {
       document.removeEventListener("mousedown", h);
-      document.removeEventListener("keydown", k);
+      document.removeEventListener("keydown", k2);
     };
   }, [open]);
   const toggleable = columns.filter((c) => c.header != null && c.header !== "");
@@ -3636,14 +3734,14 @@ function FilterMenu({
     const h = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
     };
-    const k = (e) => {
+    const k2 = (e) => {
       if (e.key === "Escape") setOpen(false);
     };
     document.addEventListener("mousedown", h);
-    document.addEventListener("keydown", k);
+    document.addEventListener("keydown", k2);
     return () => {
       document.removeEventListener("mousedown", h);
-      document.removeEventListener("keydown", k);
+      document.removeEventListener("keydown", k2);
     };
   }, [open]);
   const toggle = (v) => {
@@ -4283,12 +4381,12 @@ function useTableFilters({
     const keys = Object.keys(activeFilters);
     if (keys.length === 0) return rows;
     return rows.filter(
-      (row) => keys.every((k) => {
-        const col = columns.find((c) => c.key === k);
-        const vals = activeFilters[k];
+      (row) => keys.every((k2) => {
+        const col = columns.find((c) => c.key === k2);
+        const vals = activeFilters[k2];
         if (!vals || vals.length === 0) return true;
         if (col && col.onFilter) return vals.some((v) => col.onFilter(v, row));
-        return vals.includes(row[k]);
+        return vals.includes(row[k2]);
       })
     );
   }, [rows, activeFilters, columns, filters]);
@@ -4887,10 +4985,10 @@ var Tree = react.forwardRef(function Tree2({
   };
   const rows = [];
   flatten(treeData, 0, true, exp, rows);
-  const toggle = (key) => setExp(exp.includes(key) ? exp.filter((k) => k !== key) : [...exp, key]);
+  const toggle = (key) => setExp(exp.includes(key) ? exp.filter((k2) => k2 !== key) : [...exp, key]);
   const checkState = (node) => {
     const all = descendantKeys(node, []);
-    const checkedCount = all.filter((k) => checkedKeys.includes(k)).length;
+    const checkedCount = all.filter((k2) => checkedKeys.includes(k2)).length;
     if (checkedCount === 0) return "none";
     if (checkedCount === all.length) return "all";
     return "some";
@@ -4900,7 +4998,7 @@ var Tree = react.forwardRef(function Tree2({
     const all = descendantKeys(node, []);
     const state = checkState(node);
     let next;
-    if (state === "all") next = checkedKeys.filter((k) => !all.includes(k));
+    if (state === "all") next = checkedKeys.filter((k2) => !all.includes(k2));
     else next = Array.from(/* @__PURE__ */ new Set([...checkedKeys, ...all]));
     onCheck(next);
   };
@@ -5870,14 +5968,14 @@ var Cascader = react.forwardRef(function Cascader2({
     const h = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
     };
-    const k = (e) => {
+    const k2 = (e) => {
       if (e.key === "Escape") setOpen(false);
     };
     document.addEventListener("mousedown", h);
-    document.addEventListener("keydown", k);
+    document.addEventListener("keydown", k2);
     return () => {
       document.removeEventListener("mousedown", h);
-      document.removeEventListener("keydown", k);
+      document.removeEventListener("keydown", k2);
     };
   }, [open]);
   const columns = [];
@@ -6943,8 +7041,8 @@ var Calendar = react.forwardRef(function Calendar2({ value, onPick, className, s
   ] });
 });
 var DatePicker = react.forwardRef(
-  function DatePicker2({ value, onChange, inline, placeholder, format = DEFAULT_FORMAT, align = "left", disabled, className, style, ...props }, ref) {
-    if (inline) {
+  function DatePicker2({ value, onChange, inline: inline2, placeholder, format = DEFAULT_FORMAT, align = "left", disabled, className, style, ...props }, ref) {
+    if (inline2) {
       return /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ref, value, onPick: (d) => onChange?.(d), className, style });
     }
     const sel = value ? new Date(value) : null;
@@ -7209,9 +7307,9 @@ function DateTimePanel({ value, onChange }) {
   ] });
 }
 var DateTimePicker = react.forwardRef(
-  function DateTimePicker2({ value, onChange, inline, placeholder, format = DEFAULT_FORMAT2, align = "left", disabled, className, style, ...props }, ref) {
+  function DateTimePicker2({ value, onChange, inline: inline2, placeholder, format = DEFAULT_FORMAT2, align = "left", disabled, className, style, ...props }, ref) {
     const date = value ? new Date(value) : null;
-    if (inline) {
+    if (inline2) {
       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) : "";
@@ -7298,8 +7396,8 @@ var RangeCalendar = react.forwardRef(function RangeCalendar2({ start, end, onPic
   ] });
 });
 var DateRangePicker = react.forwardRef(
-  function DateRangePicker2({ start, end, onChange, inline, placeholder, format = DEFAULT_FORMAT3, align = "left", disabled, className, style, ...props }, ref) {
-    if (inline) {
+  function DateRangePicker2({ start, end, onChange, inline: inline2, placeholder, format = DEFAULT_FORMAT3, align = "left", disabled, className, style, ...props }, ref) {
+    if (inline2) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         RangeCalendar,
         {
@@ -7456,9 +7554,9 @@ var toPath = (name) => Array.isArray(name) ? name : String(name).split(".").map(
 var pathKey = (name) => toPath(name).join(".");
 function getIn(obj, name) {
   let cur = obj;
-  for (const k of toPath(name)) {
+  for (const k2 of toPath(name)) {
     if (cur == null) return void 0;
-    cur = cur[k];
+    cur = cur[k2];
   }
   return cur;
 }
@@ -7467,11 +7565,11 @@ function setIn(obj, name, value) {
   const root = Array.isArray(obj) ? obj.slice() : { ...obj };
   let cur = root;
   for (let i = 0; i < path.length - 1; i++) {
-    const k = path[i];
+    const k2 = path[i];
     const nextKeyIsIndex = typeof path[i + 1] === "number";
-    const existing = cur[k];
-    cur[k] = existing == null ? nextKeyIsIndex ? [] : {} : Array.isArray(existing) ? existing.slice() : { ...existing };
-    cur = cur[k];
+    const existing = cur[k2];
+    cur[k2] = existing == null ? nextKeyIsIndex ? [] : {} : Array.isArray(existing) ? existing.slice() : { ...existing };
+    cur = cur[k2];
   }
   cur[path[path.length - 1]] = value;
   return root;
@@ -7578,15 +7676,15 @@ function useForm(opts = {}) {
   const setFields = react.useCallback((map) => {
     setErrors((e) => {
       const n = { ...e };
-      Object.entries(map).forEach(([k, v]) => {
-        n[pathKey(k)] = v;
+      Object.entries(map).forEach(([k2, v]) => {
+        n[pathKey(k2)] = v;
       });
       return n;
     });
     setTouched((t) => {
       const n = { ...t };
-      Object.keys(map).forEach((k) => {
-        n[pathKey(k)] = true;
+      Object.keys(map).forEach((k2) => {
+        n[pathKey(k2)] = true;
       });
       return n;
     });
@@ -7617,7 +7715,7 @@ function useForm(opts = {}) {
       }
     });
     setErrors(errs);
-    setTouched(entries.reduce((a, [k]) => (a[k] = true, a), {}));
+    setTouched(entries.reduce((a, [k2]) => (a[k2] = true, a), {}));
     if (firstBad) scrollToField(firstBad);
     return Object.keys(errs).length === 0;
   }, [scrollToField]);
@@ -7774,11 +7872,11 @@ function FormList({ name, children }) {
     },
     move: (from, to) => {
       const a = arr.slice();
-      const k = keysRef.current;
+      const k2 = keysRef.current;
       const [m] = a.splice(from, 1);
       a.splice(to, 0, m);
-      const [mk] = k.splice(from, 1);
-      k.splice(to, 0, mk);
+      const [mk] = k2.splice(from, 1);
+      k2.splice(to, 0, mk);
       setArr(a);
     }
   };
@@ -8384,14 +8482,14 @@ var SelectMenu = react.forwardRef(
         if (rootRef.current && !rootRef.current.contains(e.target))
           setOpen(false);
       };
-      const k = (e) => {
+      const k2 = (e) => {
         if (e.key === "Escape") setOpen(false);
       };
       document.addEventListener("mousedown", h);
-      document.addEventListener("keydown", k);
+      document.addEventListener("keydown", k2);
       return () => {
         document.removeEventListener("mousedown", h);
-        document.removeEventListener("keydown", k);
+        document.removeEventListener("keydown", k2);
       };
     }, [open]);
     const lead = leadingIcon || selected?.icon;
@@ -8954,7 +9052,7 @@ function Masonry({
       colHeights[c] += (h > 0 ? h : 1) + gutterV;
     }
     setPlacement(
-      (prev) => prev.length === next.length && prev.every((v, k) => v === next[k]) ? prev : next
+      (prev) => prev.length === next.length && prev.every((v, k2) => v === next[k2]) ? prev : next
     );
   }, [cols, gutterV]);
   useIsomorphicLayoutEffect(() => {
@@ -9425,10 +9523,10 @@ function containsKey(children, key) {
 }
 var Menu = react.forwardRef(function Menu2({ items: items2 = [], selectedKey, onSelect, defaultOpenKeys = [], collapsed = false, className, ...props }, ref) {
   const [openKeys, setOpenKeys] = react.useState(() => new Set(defaultOpenKeys));
-  const toggleOpen = (k) => setOpenKeys((s) => {
+  const toggleOpen = (k2) => setOpenKeys((s) => {
     const n = new Set(s);
-    if (n.has(k)) n.delete(k);
-    else n.add(k);
+    if (n.has(k2)) n.delete(k2);
+    else n.add(k2);
     return n;
   });
   const Row3 = ({ item, depth }) => {
@@ -10213,14 +10311,14 @@ var Dropdown = react.forwardRef(function Dropdown2({ trigger, items: items2 = []
     const h = (e) => {
       if (innerRef.current && !innerRef.current.contains(e.target)) setOpen(false);
     };
-    const k = (e) => {
+    const k2 = (e) => {
       if (e.key === "Escape") setOpen(false);
     };
     document.addEventListener("mousedown", h);
-    document.addEventListener("keydown", k);
+    document.addEventListener("keydown", k2);
     return () => {
       document.removeEventListener("mousedown", h);
-      document.removeEventListener("keydown", k);
+      document.removeEventListener("keydown", k2);
     };
   }, [open]);
   const setRefs = (node) => {
@@ -10581,14 +10679,14 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
       if (innerRef.current?.contains(t) || bubbleRef.current?.contains(t)) return;
       setOpen(false);
     };
-    const k = (e) => {
+    const k2 = (e) => {
       if (e.key === "Escape") setOpen(false);
     };
     document.addEventListener("mousedown", h);
-    document.addEventListener("keydown", k);
+    document.addEventListener("keydown", k2);
     return () => {
       document.removeEventListener("mousedown", h);
-      document.removeEventListener("keydown", k);
+      document.removeEventListener("keydown", k2);
     };
   }, [open]);
   react.useLayoutEffect(() => {
@@ -10795,6 +10893,7 @@ exports.List = List;
 exports.ListItem = ListItem;
 exports.LiveDot = LiveDot;
 exports.LogViewer = LogViewer;
+exports.Markdown = Markdown;
 exports.Masonry = Masonry;
 exports.Menu = Menu;
 exports.Message = Message;
@@ -10854,6 +10953,7 @@ exports.nlNL = nlNL;
 exports.plPL = plPL;
 exports.primaryColorVars = primaryColorVars;
 exports.ptBR = ptBR;
+exports.renderMarkdown = renderMarkdown;
 exports.ruRU = ruRU;
 exports.toast = toast;
 exports.trTR = trTR;
@@ -10869,5 +10969,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-Y2R5PBYN.cjs.map
-//# sourceMappingURL=chunk-Y2R5PBYN.cjs.map
+//# sourceMappingURL=chunk-752UKCVU.cjs.map
+//# sourceMappingURL=chunk-752UKCVU.cjs.map