klun-ui 0.2.2 → 0.4.0

package/dist/{chunk-T7O3RMWL.cjs → chunk-XLK6BYW3.cjs}

@@ -3344,6 +3344,170 @@ var DiffViewer = react.forwardRef(function DiffViewer2({
   );
 });
 DiffViewer.displayName = "DiffViewer";
+var Kanban = react.forwardRef(function Kanban2({ columns = [], onMove, onCardClick, renderCard, columnFooter, columnWidth = 280, className, style, ...props }, ref) {
+  const [drag, setDrag] = react.useState(null);
+  const [overColumn, setOverColumn] = react.useState(null);
+  const handleDrop = (column, index) => {
+    if (drag && (drag.fromColumn !== column.id || index !== index)) {
+      onMove?.(drag.cardId, drag.fromColumn, column.id, index);
+    }
+    setDrag(null);
+    setOverColumn(null);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunkTPGAXYFU_cjs.cx("klun-kanban", className),
+      style: { ...style, ["--klun-kanban-col"]: `${columnWidth}px` },
+      ...props,
+      children: columns.map((column) => {
+        const over = overColumn === column.id && drag;
+        const full = column.limit !== void 0 && column.cards.length >= column.limit;
+        return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__column", over && "klun-kanban__column--over"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "klun-kanban__header", children: [
+            column.accent ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__dot", style: { background: column.accent } }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-kanban__title", children: column.title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: chunkTPGAXYFU_cjs.cx("klun-kanban__count", full && "klun-kanban__count--full"), children: [
+              column.cards.length,
+              column.limit !== void 0 ? ` / ${column.limit}` : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "klun-kanban__list",
+              onDragOver: (e) => {
+                if (!drag) return;
+                e.preventDefault();
+                setOverColumn(column.id);
+              },
+              onDrop: (e) => {
+                e.preventDefault();
+                handleDrop(column, column.cards.length);
+              },
+              children: [
+                column.cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "article",
+                  {
+                    draggable: true,
+                    onDragStart: (e) => {
+                      e.dataTransfer.effectAllowed = "move";
+                      e.dataTransfer.setData("text/plain", card.id);
+                      setDrag({ cardId: card.id, fromColumn: column.id });
+                    },
+                    onDragEnd: () => {
+                      setDrag(null);
+                      setOverColumn(null);
+                    },
+                    onDragOver: (e) => {
+                      if (!drag) return;
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const rect = e.currentTarget.getBoundingClientRect();
+                      const after = e.clientY - rect.top > rect.height / 2;
+                      setOverColumn(column.id);
+                      setDrag((d) => d ? { ...d, overColumn: column.id, overIndex: index + (after ? 1 : 0) } : d);
+                    },
+                    onDrop: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleDrop(column, index);
+                    },
+                    onClick: () => onCardClick?.(card, column.id),
+                    className: chunkTPGAXYFU_cjs.cx(
+                      "klun-kanban__card",
+                      drag?.cardId === card.id && "klun-kanban__card--dragging",
+                      over && drag?.overIndex === index && "klun-kanban__card--dropbefore",
+                      over && drag?.overIndex === index + 1 && "klun-kanban__card--dropafter"
+                    ),
+                    style: card.accent ? { boxShadow: `inset 3px 0 0 ${card.accent}` } : void 0,
+                    children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-title", children: card.title }),
+                      card.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-desc", children: card.description }) : null,
+                      card.tags?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-tags", children: card.tags.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: t }, i)) }) : null,
+                      card.meta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__card-meta", children: card.meta }) : null
+                    ] })
+                  },
+                  card.id
+                )),
+                column.cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__empty", children: "Drop a card here" }) : null
+              ]
+            }
+          ),
+          columnFooter ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-kanban__footer", children: columnFooter(column) }) : null
+        ] }, column.id);
+      })
+    }
+  );
+});
+Kanban.displayName = "Kanban";
+function VirtualTable({
+  rows = [],
+  columns = [],
+  rowHeight = 40,
+  height = 420,
+  getRowId,
+  onRowClick,
+  overscan = 8,
+  zebra = true,
+  empty,
+  className,
+  style,
+  ...props
+}) {
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const total = rows.length;
+  const template = react.useMemo(
+    () => columns.map((c) => c.width ? `${c.width}px` : "minmax(0, 1fr)").join(" "),
+    [columns]
+  );
+  const bodyHeight = Math.max(0, height - 36);
+  const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const end = Math.min(total, Math.ceil((scrollTop + bodyHeight) / rowHeight) + overscan);
+  const slice = rows.slice(start, end);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: void 0, className: chunkTPGAXYFU_cjs.cx("klun-vtable", className), style: { ...style, height }, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-vtable__head", style: { gridTemplateColumns: template }, children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-vtable__th", c.align && `klun-vtable__th--${c.align}`), children: c.header }, c.key)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "klun-vtable__body",
+        onScroll: (e) => setScrollTop(e.target.scrollTop),
+        style: { maxHeight: bodyHeight },
+        children: total === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-vtable__empty", children: empty ?? "No rows" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: start * rowHeight } }),
+          slice.map((row, i) => {
+            const index = start + i;
+            const id = getRowId?.(row, index) ?? index;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: onRowClick ? "button" : void 0,
+                tabIndex: onRowClick ? 0 : void 0,
+                onClick: () => onRowClick?.(row, index),
+                className: chunkTPGAXYFU_cjs.cx(
+                  "klun-vtable__row",
+                  zebra && index % 2 === 1 && "klun-vtable__row--zebra",
+                  onRowClick && "klun-vtable__row--clickable"
+                ),
+                style: { gridTemplateColumns: template, height: rowHeight },
+                children: columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-vtable__td", c.align && `klun-vtable__td--${c.align}`), children: c.render ? c.render(row, index) : String(row[c.key] ?? "") }, c.key))
+              },
+              id
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: Math.max(0, (total - end) * rowHeight) } })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-vtable__foot", children: [
+      total.toLocaleString("en-US"),
+      " rows \xB7 rendering ",
+      slice.length
+    ] })
+  ] });
+}
+VirtualTable.displayName = "VirtualTable";
 var Kbd = react.forwardRef(function Kbd2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx("kbd", { ref, className: chunkTPGAXYFU_cjs.cx("klun-kbd", className), ...props, children });
 });
@@ -6541,25 +6705,30 @@ var AutoComplete = react.forwardRef(
 AutoComplete.displayName = "AutoComplete";
 var Cascader = react.forwardRef(function Cascader2({
   options = [],
-  value = [],
+  value,
+  defaultValue,
   onChange,
   placeholder: placeholderProp,
   size: sizeProp,
   disabled = false,
   separator = " / ",
   changeOnSelect = false,
+  clearable = false,
+  renderOption,
   error = false,
   className,
   ...props
 }, ref) {
   const size = useSize(sizeProp);
-  const { cascader } = useLocale();
+  const { cascader, input: inputText } = useLocale();
   const placeholder = placeholderProp ?? cascader.placeholder;
+  const [inner, setInner] = react.useState(defaultValue ?? []);
+  const current = value ?? inner;
   const [open, setOpen] = react.useState(false);
-  const [active, setActive] = react.useState(value);
+  const [active, setActive] = react.useState(current);
   const rootRef = react.useRef(null);
   react.useEffect(() => {
-    setActive(value);
+    setActive(current);
   }, [open]);
   react.useEffect(() => {
     if (!open) return;
@@ -6588,7 +6757,7 @@ var Cascader = react.forwardRef(function Cascader2({
   }
   const labelPath = [];
   let lvl = options;
-  for (const key of value) {
+  for (const key of current) {
     const found = (lvl || []).find((o) => o.value === key);
     if (!found) break;
     labelPath.push(found.label);
@@ -6600,10 +6769,16 @@ var Cascader = react.forwardRef(function Cascader2({
     setActive(nextPath);
     const leaf = !opt.children || !opt.children.length;
     if (leaf || changeOnSelect) {
+      if (value === void 0) setInner(nextPath);
       onChange && onChange(nextPath);
       if (leaf) setOpen(false);
     }
   };
+  const clear = () => {
+    if (value === void 0) setInner([]);
+    setActive([]);
+    onChange && onChange([]);
+  };
   const setRefs = (node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
@@ -6633,6 +6808,20 @@ var Cascader = react.forwardRef(function Cascader2({
                 i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cascader__separator", children: separator }) : null,
                 lbl
               ] }, i)) : placeholder }),
+              clearable && labelPath.length && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: -1,
+                  "aria-label": inputText.clear,
+                  className: "klun-cascader__clear",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    clear();
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-circle-fill" })
+                }
+              ) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
                 "svg",
                 {
@@ -6657,7 +6846,7 @@ var Cascader = react.forwardRef(function Cascader2({
             ]
           }
         ),
-        open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-cascader__panel", children: columns.map((col, ci) => /* @__PURE__ */ jsxRuntime.jsx(
+        open ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-cascader__panel", role: "menu", children: columns.map((col, ci) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: chunkTPGAXYFU_cjs.cx(
@@ -6671,12 +6860,14 @@ var Cascader = react.forwardRef(function Cascader2({
                 "button",
                 {
                   type: "button",
+                  role: "menuitem",
                   className: "klun-cascader__option",
                   disabled: opt.disabled,
                   onClick: () => pick(ci, opt),
+                  "aria-selected": selected,
                   "data-selected": selected || void 0,
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cascader__option-label", children: opt.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cascader__option-label", children: renderOption ? renderOption(opt, ci) : opt.label }),
                     hasChildren2 ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line klun-cascader__option-arrow" }) : selected ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line klun-cascader__option-check" }) : null
                   ]
                 },
@@ -7472,6 +7663,149 @@ var CompactSelectForInput = react.forwardRef(function CompactSelectForInput2({
   );
 });
 CompactSelectForInput.displayName = "CompactSelectForInput";
+var CRON_PRESETS = [
+  { label: "Every 5 minutes", value: "*/5 * * * *" },
+  { label: "Every 15 minutes", value: "*/15 * * * *" },
+  { label: "Hourly", value: "0 * * * *" },
+  { label: "Every day at 03:00", value: "0 3 * * *" },
+  { label: "Weekdays at 09:00", value: "0 9 * * 1-5" },
+  { label: "Mondays at 09:00", value: "0 9 * * 1" },
+  { label: "1st of the month", value: "0 6 1 * *" }
+];
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var pad = (n) => n.padStart(2, "0");
+function describeCron(cron) {
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length !== 5) return cron;
+  const [min, hour, day, month, week] = parts;
+  const everyMin = min.startsWith("*/") ? `every ${min.slice(2)} minutes` : min === "*" ? "every minute" : null;
+  const at = hour === "*" ? "" : ` at ${pad(hour)}:${pad(min)}`;
+  const dayPart = week === "*" && day === "*" ? month === "*" ? "every day" : `on day ${day} of month ${month}` : week !== "*" ? `on ${week.split(",").map((w) => w.includes("-") ? w.split("-").map((x) => DAYS[Number(x)] ?? x).join("\u2013") : DAYS[Number(w)] ?? w).join(", ")}` : `on day ${day} of the month`;
+  if (everyMin) return `${everyMin.charAt(0).toUpperCase()}${everyMin.slice(1)}${at}`;
+  if (min !== "*" && hour !== "*" && day === "*" && week === "*") {
+    return `${month === "*" ? "Every day" : `On day ${day} of month ${MONTHS[Number(month) - 1] ?? month}`}${at}`;
+  }
+  return `${dayPart.charAt(0).toUpperCase()}${dayPart.slice(1)}${at}`;
+}
+function parse(cron) {
+  const p = cron.trim().split(/\s+/);
+  return [p[0] ?? "*", p[1] ?? "*", p[2] ?? "*", p[3] ?? "*", p[4] ?? "*"];
+}
+var CronEditor = react.forwardRef(function CronEditor2({
+  value,
+  defaultValue = "0 3 * * *",
+  onChange,
+  hidePresets = false,
+  disabled = false,
+  size: sizeProp,
+  labels,
+  className,
+  style,
+  ...props
+}, ref) {
+  const size = useSize(sizeProp) === "small" ? "small" : "medium";
+  const text = {
+    minute: "Minute",
+    hour: "Hour",
+    day: "Day",
+    month: "Month",
+    weekday: "Weekday",
+    every: "Every",
+    expression: "Expression",
+    ...labels
+  };
+  const [inner, setInner] = react.useState(defaultValue);
+  const current = value ?? inner;
+  const [fields, setFields] = react.useState(parse(current));
+  react.useEffect(() => {
+    setFields(parse(current));
+  }, [current]);
+  const commit = (next) => {
+    if (value === void 0) setInner(next);
+    onChange?.(next);
+  };
+  const setField = (index, next) => {
+    const copy = [...fields];
+    copy[index] = next;
+    setFields(copy);
+    commit(copy.join(" "));
+  };
+  const options = react.useMemo(
+    () => ({
+      minute: ["*", "*/5", "*/10", "*/15", "*/30", "0", "15", "30", "45"],
+      hour: ["*", ...Array.from({ length: 24 }, (_, i) => String(i))],
+      day: ["*", ...Array.from({ length: 31 }, (_, i) => String(i + 1))],
+      month: ["*", ...Array.from({ length: 12 }, (_, i) => String(i + 1))],
+      weekday: ["*", "1-5", "0", "1", "2", "3", "4", "5", "6"]
+    }),
+    []
+  );
+  const fieldLabel = (key, v) => {
+    if (v === "*") return text.every;
+    if (key === "month") return MONTHS[Number(v) - 1] ?? v;
+    if (key === "weekday") return v.includes("-") ? "Mon\u2013Fri" : DAYS[Number(v)] ?? v;
+    if (key === "hour") return `${pad(v)}:00`;
+    return v;
+  };
+  const desc = describeCron(current);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: chunkTPGAXYFU_cjs.cx("klun-cron", `klun-cron--${size}`, disabled && "klun-cron--disabled", className),
+      style,
+      ...props,
+      children: [
+        !hidePresets ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-cron__presets", children: CRON_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => commit(p.value),
+            "data-active": current === p.value || void 0,
+            className: "klun-cron__preset",
+            children: p.label
+          },
+          p.value
+        )) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-cron__fields", children: ["minute", "hour", "day", "month", "weekday"].map((key, i) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "klun-cron__field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cron__field-label", children: text[key] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              disabled,
+              value: fields[i],
+              onChange: (e) => setField(i, e.target.value),
+              className: "klun-cron__select",
+              children: options[key].map((v) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: fieldLabel(key, v) }, v))
+            }
+          )
+        ] }, key)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-cron__footer", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "klun-cron__raw", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cron__field-label", children: text.expression }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                disabled,
+                value: current,
+                onChange: (e) => commit(e.target.value),
+                spellCheck: false,
+                className: "klun-cron__input"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-cron__preview", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-time-line" }),
+            desc
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+CronEditor.displayName = "CronEditor";
 var CounterInput = react.forwardRef(function CounterInput2({
   value = 0,
   min = -Infinity,
@@ -7901,7 +8235,7 @@ var DateRangePicker = react.forwardRef(
   }
 );
 DateRangePicker.displayName = "DateRangePicker";
-var pad = (n) => String(n).padStart(2, "0");
+var pad2 = (n) => String(n).padStart(2, "0");
 var TimePicker = react.forwardRef(
   function TimePicker2({ value = "09:00", onChange, className, style, ...props }, ref) {
     const t = useLocale();
@@ -7911,7 +8245,7 @@ var TimePicker = react.forwardRef(
     const set = (nh, nm, nmer) => {
       let hh = nh % 12;
       if (nmer === "PM") hh += 12;
-      onChange?.(`${pad(hh)}:${pad(nm)}`);
+      onChange?.(`${pad2(hh)}:${pad2(nm)}`);
     };
     const [open, setOpen] = react.useState(null);
     const rootRef = react.useRef(null);
@@ -7930,11 +8264,11 @@ var TimePicker = react.forwardRef(
     }, [open]);
     const hourOpts = Array.from({ length: 12 }, (_, i) => ({
       value: String(i + 1),
-      label: pad(i + 1)
+      label: pad2(i + 1)
     }));
     const minOpts = Array.from({ length: 60 }, (_, i) => ({
       value: String(i),
-      label: pad(i)
+      label: pad2(i)
     }));
     const merOpts = [
       { value: "AM", label: t.timePicker.am },
@@ -8101,7 +8435,7 @@ function TimeColumn({
   ] });
 }
 TimePicker.displayName = "TimePicker";
-var pad2 = (n) => String(n).padStart(2, "0");
+var pad3 = (n) => String(n).padStart(2, "0");
 var DEFAULT_FORMAT3 = {
   year: "numeric",
   month: "short",
@@ -8110,7 +8444,7 @@ var DEFAULT_FORMAT3 = {
   minute: "2-digit"
 };
 function DateTimePanel({ value, onChange }) {
-  const hhmm = value ? `${pad2(value.getHours())}:${pad2(value.getMinutes())}` : "09:00";
+  const hhmm = value ? `${pad3(value.getHours())}:${pad3(value.getMinutes())}` : "09:00";
   const setDate = (d) => {
     const next = new Date(d);
     if (value) next.setHours(value.getHours(), value.getMinutes(), 0, 0);
@@ -9093,6 +9427,192 @@ var RichEditorToolbar = react.forwardRef(
   }
 );
 RichEditorToolbar.displayName = "RichEditorToolbar";
+var Textarea = react.forwardRef(function Textarea2({ error = false, disabled = false, readOnly = false, size: sizeProp, rows = 4, className, style, ...props }, ref) {
+  const size = useSize(sizeProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkTPGAXYFU_cjs.cx(
+        "klun-textarea",
+        `klun-textarea--${size}`,
+        error && "klun-textarea--error",
+        disabled && "klun-textarea--disabled",
+        readOnly && "klun-textarea--readonly",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref,
+          className: "klun-textarea__field",
+          rows,
+          disabled,
+          readOnly,
+          ...props
+        }
+      )
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+function runCommand(id) {
+  const exec = (cmd, arg) => document.execCommand(cmd, false, arg);
+  if (typeof document.execCommand !== "function") return;
+  switch (id) {
+    case "bold":
+    case "italic":
+    case "underline":
+    case "strikeThrough":
+      exec(id);
+      break;
+    case "strike":
+      exec("strikeThrough");
+      break;
+    case "h1":
+      exec("formatBlock", "<h1>");
+      break;
+    case "h2":
+      exec("formatBlock", "<h2>");
+      break;
+    case "quote":
+      exec("formatBlock", "<blockquote>");
+      break;
+    case "code":
+      exec("formatBlock", "<pre>");
+      break;
+    case "ul":
+      exec("insertUnorderedList");
+      break;
+    case "ol":
+      exec("insertOrderedList");
+      break;
+    case "link": {
+      const url = typeof window !== "undefined" ? window.prompt("Link URL", "https://") : null;
+      if (url) exec("createLink", url);
+      break;
+    }
+    case "image": {
+      const url = typeof window !== "undefined" ? window.prompt("Image URL", "https://") : null;
+      if (url) exec("insertImage", url);
+      break;
+    }
+  }
+}
+var RichEditor = react.forwardRef(function RichEditor2({
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Write something\u2026",
+  disabled = false,
+  hideToolbar = false,
+  minHeight = 160,
+  maxHeight,
+  allowSource = true,
+  editorLabel = "Rich text editor",
+  className,
+  style,
+  ...props
+}, ref) {
+  const editorRef = react.useRef(null);
+  const [active, setActive] = react.useState([]);
+  const [source, setSource] = react.useState(false);
+  const [html, setHtml] = react.useState(value ?? defaultValue);
+  react.useEffect(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    const next = value ?? html;
+    if (document.activeElement !== el && el.innerHTML !== next) el.innerHTML = next;
+  }, [value]);
+  react.useEffect(() => {
+    if (disabled || typeof document.execCommand !== "function") return;
+    document.execCommand("defaultParagraphSeparator", false, "p");
+  }, [disabled]);
+  const emit2 = () => {
+    const next = editorRef.current?.innerHTML ?? "";
+    setHtml(next);
+    onChange?.(next);
+  };
+  const syncActive = () => {
+    if (typeof document.queryCommandState !== "function") return;
+    const next = [];
+    ["bold", "italic", "underline"].forEach((c) => {
+      if (document.queryCommandState(c)) next.push(c);
+    });
+    setActive(next);
+  };
+  const onAction = (id) => {
+    if (disabled) return;
+    editorRef.current?.focus();
+    runCommand(id);
+    emit2();
+    syncActive();
+  };
+  const setRefs = (node) => {
+    editorRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkTPGAXYFU_cjs.cx("klun-rich-editor", disabled && "klun-rich-editor--disabled", className),
+      style,
+      ...props,
+      children: [
+        !hideToolbar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-rich-editor__bar", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RichEditorToolbar, { active, onAction }),
+          allowSource ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "klun-rich-editor__source",
+              onClick: () => setSource((s) => !s),
+              "data-active": source || void 0,
+              "aria-pressed": source,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-code-s-slash-line" }),
+                "HTML"
+              ]
+            }
+          ) : null
+        ] }) : null,
+        source && allowSource ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-rich-editor__sourcearea", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            rows: Math.max(4, Math.round(minHeight / 22)),
+            value: html,
+            style: { border: "none", boxShadow: "none", fontFamily: "var(--klun-font-mono, monospace)" },
+            onChange: (e) => {
+              setHtml(e.target.value);
+              onChange?.(e.target.value);
+              if (editorRef.current) editorRef.current.innerHTML = e.target.value;
+            }
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setRefs,
+            role: "textbox",
+            "aria-multiline": "true",
+            "aria-label": editorLabel,
+            contentEditable: !disabled,
+            suppressContentEditableWarning: true,
+            "data-placeholder": placeholder,
+            className: "klun-rich-editor__area",
+            style: { minHeight, maxHeight, overflowY: maxHeight ? "auto" : void 0 },
+            onInput: emit2,
+            onBlur: emit2,
+            onKeyUp: syncActive,
+            onMouseUp: syncActive
+          }
+        )
+      ]
+    }
+  );
+});
+RichEditor.displayName = "RichEditor";
 var Select = react.forwardRef(function Select2({
   size: sizeProp,
   placeholder,
@@ -9372,35 +9892,6 @@ var Switch = react.forwardRef(function Switch2({ disabled = false, size: sizePro
   );
 });
 Switch.displayName = "Switch";
-var Textarea = react.forwardRef(function Textarea2({ error = false, disabled = false, readOnly = false, size: sizeProp, rows = 4, className, style, ...props }, ref) {
-  const size = useSize(sizeProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: chunkTPGAXYFU_cjs.cx(
-        "klun-textarea",
-        `klun-textarea--${size}`,
-        error && "klun-textarea--error",
-        disabled && "klun-textarea--disabled",
-        readOnly && "klun-textarea--readonly",
-        className
-      ),
-      style,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
-        {
-          ref,
-          className: "klun-textarea__field",
-          rows,
-          disabled,
-          readOnly,
-          ...props
-        }
-      )
-    }
-  );
-});
-Textarea.displayName = "Textarea";
 var Card = react.forwardRef(function Card2({ variant = "stroke", padding, className, style, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -11614,6 +12105,7 @@ exports.BulkAction = BulkAction;
 exports.BulkActionBar = BulkActionBar;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.CRON_PRESETS = CRON_PRESETS;
 exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Cascader = Cascader;
@@ -11640,6 +12132,7 @@ exports.ContentLabel = ContentLabel;
 exports.ContextMenu = ContextMenu2;
 exports.CopyButton = CopyButton;
 exports.CounterInput = CounterInput;
+exports.CronEditor = CronEditor;
 exports.CrossRefBadge = CrossRefBadge;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
@@ -11667,6 +12160,7 @@ exports.ImageViewer = ImageViewer;
 exports.InlineInput = InlineInput;
 exports.InlineSelect = InlineSelect;
 exports.Input = Input;
+exports.Kanban = Kanban;
 exports.Kbd = Kbd;
 exports.KeyIcon = KeyIcon;
 exports.Label = Label;
@@ -11698,6 +12192,7 @@ exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
 exports.RelativeTime = RelativeTime;
 exports.Result = Result;
+exports.RichEditor = RichEditor;
 exports.RichEditorToolbar = RichEditorToolbar;
 exports.Row = Row;
 exports.SegmentedControl = SegmentedControl;
@@ -11726,9 +12221,11 @@ exports.Toast = Toast;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.Tree = Tree;
+exports.VirtualTable = VirtualTable;
 exports.Wizard = Wizard;
 exports.arSA = arSA;
 exports.deDE = deDE;
+exports.describeCron = describeCron;
 exports.enUS = enUS;
 exports.esES = esES;
 exports.fmt = fmt;
@@ -11759,5 +12256,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-T7O3RMWL.cjs.map
-//# sourceMappingURL=chunk-T7O3RMWL.cjs.map
+//# sourceMappingURL=chunk-XLK6BYW3.cjs.map
+//# sourceMappingURL=chunk-XLK6BYW3.cjs.map