klun-ui 0.2.2 → 0.4.0

package/dist/{chunk-UJOMGMCV.js → chunk-TREMQLWT.js}

@@ -3342,6 +3342,170 @@ var DiffViewer = forwardRef(function DiffViewer2({
   );
 });
 DiffViewer.displayName = "DiffViewer";
+var Kanban = forwardRef(function Kanban2({ columns = [], onMove, onCardClick, renderCard, columnFooter, columnWidth = 280, className, style, ...props }, ref) {
+  const [drag, setDrag] = useState(null);
+  const [overColumn, setOverColumn] = 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__ */ jsx(
+    "div",
+    {
+      ref,
+      className: 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__ */ jsxs("section", { className: cx("klun-kanban__column", over && "klun-kanban__column--over"), children: [
+          /* @__PURE__ */ jsxs("header", { className: "klun-kanban__header", children: [
+            column.accent ? /* @__PURE__ */ jsx("span", { className: "klun-kanban__dot", style: { background: column.accent } }) : null,
+            /* @__PURE__ */ jsx("span", { className: "klun-kanban__title", children: column.title }),
+            /* @__PURE__ */ jsxs("span", { className: cx("klun-kanban__count", full && "klun-kanban__count--full"), children: [
+              column.cards.length,
+              column.limit !== void 0 ? ` / ${column.limit}` : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ 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__ */ 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: 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__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-title", children: card.title }),
+                      card.description ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-desc", children: card.description }) : null,
+                      card.tags?.length ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-tags", children: card.tags.map((t, i) => /* @__PURE__ */ jsx("span", { children: t }, i)) }) : null,
+                      card.meta ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__card-meta", children: card.meta }) : null
+                    ] })
+                  },
+                  card.id
+                )),
+                column.cards.length === 0 ? /* @__PURE__ */ jsx("div", { className: "klun-kanban__empty", children: "Drop a card here" }) : null
+              ]
+            }
+          ),
+          columnFooter ? /* @__PURE__ */ 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] = useState(0);
+  const total = rows.length;
+  const template = 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__ */ jsxs("div", { ref: void 0, className: cx("klun-vtable", className), style: { ...style, height }, ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "klun-vtable__head", style: { gridTemplateColumns: template }, children: columns.map((c) => /* @__PURE__ */ jsx("div", { className: cx("klun-vtable__th", c.align && `klun-vtable__th--${c.align}`), children: c.header }, c.key)) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "klun-vtable__body",
+        onScroll: (e) => setScrollTop(e.target.scrollTop),
+        style: { maxHeight: bodyHeight },
+        children: total === 0 ? /* @__PURE__ */ jsx("div", { className: "klun-vtable__empty", children: empty ?? "No rows" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { style: { height: start * rowHeight } }),
+          slice.map((row, i) => {
+            const index = start + i;
+            const id = getRowId?.(row, index) ?? index;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: onRowClick ? "button" : void 0,
+                tabIndex: onRowClick ? 0 : void 0,
+                onClick: () => onRowClick?.(row, index),
+                className: 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__ */ jsx("div", { className: 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__ */ jsx("div", { style: { height: Math.max(0, (total - end) * rowHeight) } })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "klun-vtable__foot", children: [
+      total.toLocaleString("en-US"),
+      " rows \xB7 rendering ",
+      slice.length
+    ] })
+  ] });
+}
+VirtualTable.displayName = "VirtualTable";
 var Kbd = forwardRef(function Kbd2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsx("kbd", { ref, className: cx("klun-kbd", className), ...props, children });
 });
@@ -6539,25 +6703,30 @@ var AutoComplete = forwardRef(
 AutoComplete.displayName = "AutoComplete";
 var Cascader = 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] = useState(defaultValue ?? []);
+  const current = value ?? inner;
   const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(value);
+  const [active, setActive] = useState(current);
   const rootRef = useRef(null);
   useEffect(() => {
-    setActive(value);
+    setActive(current);
   }, [open]);
   useEffect(() => {
     if (!open) return;
@@ -6586,7 +6755,7 @@ var Cascader = 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);
@@ -6598,10 +6767,16 @@ var Cascader = 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);
@@ -6631,6 +6806,20 @@ var Cascader = forwardRef(function Cascader2({
                 i > 0 ? /* @__PURE__ */ jsx("span", { className: "klun-cascader__separator", children: separator }) : null,
                 lbl
               ] }, i)) : placeholder }),
+              clearable && labelPath.length && !disabled ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: -1,
+                  "aria-label": inputText.clear,
+                  className: "klun-cascader__clear",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    clear();
+                  },
+                  children: /* @__PURE__ */ jsx("i", { className: "ri-close-circle-fill" })
+                }
+              ) : null,
               /* @__PURE__ */ jsx(
                 "svg",
                 {
@@ -6655,7 +6844,7 @@ var Cascader = forwardRef(function Cascader2({
             ]
           }
         ),
-        open ? /* @__PURE__ */ jsx("div", { className: "klun-cascader__panel", children: columns.map((col, ci) => /* @__PURE__ */ jsx(
+        open ? /* @__PURE__ */ jsx("div", { className: "klun-cascader__panel", role: "menu", children: columns.map((col, ci) => /* @__PURE__ */ jsx(
           "div",
           {
             className: cx(
@@ -6669,12 +6858,14 @@ var Cascader = 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__ */ jsx("span", { className: "klun-cascader__option-label", children: opt.label }),
+                    /* @__PURE__ */ jsx("span", { className: "klun-cascader__option-label", children: renderOption ? renderOption(opt, ci) : opt.label }),
                     hasChildren2 ? /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line klun-cascader__option-arrow" }) : selected ? /* @__PURE__ */ jsx("i", { className: "ri-check-line klun-cascader__option-check" }) : null
                   ]
                 },
@@ -7470,6 +7661,149 @@ var CompactSelectForInput = 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 = 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] = useState(defaultValue);
+  const current = value ?? inner;
+  const [fields, setFields] = useState(parse(current));
+  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 = 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__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx("klun-cron", `klun-cron--${size}`, disabled && "klun-cron--disabled", className),
+      style,
+      ...props,
+      children: [
+        !hidePresets ? /* @__PURE__ */ jsx("div", { className: "klun-cron__presets", children: CRON_PRESETS.map((p) => /* @__PURE__ */ 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__ */ jsx("div", { className: "klun-cron__fields", children: ["minute", "hour", "day", "month", "weekday"].map((key, i) => /* @__PURE__ */ jsxs("label", { className: "klun-cron__field", children: [
+          /* @__PURE__ */ jsx("span", { className: "klun-cron__field-label", children: text[key] }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              disabled,
+              value: fields[i],
+              onChange: (e) => setField(i, e.target.value),
+              className: "klun-cron__select",
+              children: options[key].map((v) => /* @__PURE__ */ jsx("option", { value: v, children: fieldLabel(key, v) }, v))
+            }
+          )
+        ] }, key)) }),
+        /* @__PURE__ */ jsxs("div", { className: "klun-cron__footer", children: [
+          /* @__PURE__ */ jsxs("label", { className: "klun-cron__raw", children: [
+            /* @__PURE__ */ jsx("span", { className: "klun-cron__field-label", children: text.expression }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                disabled,
+                value: current,
+                onChange: (e) => commit(e.target.value),
+                spellCheck: false,
+                className: "klun-cron__input"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "klun-cron__preview", children: [
+            /* @__PURE__ */ jsx("i", { className: "ri-time-line" }),
+            desc
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+CronEditor.displayName = "CronEditor";
 var CounterInput = forwardRef(function CounterInput2({
   value = 0,
   min = -Infinity,
@@ -7899,7 +8233,7 @@ var DateRangePicker = forwardRef(
   }
 );
 DateRangePicker.displayName = "DateRangePicker";
-var pad = (n) => String(n).padStart(2, "0");
+var pad2 = (n) => String(n).padStart(2, "0");
 var TimePicker = forwardRef(
   function TimePicker2({ value = "09:00", onChange, className, style, ...props }, ref) {
     const t = useLocale();
@@ -7909,7 +8243,7 @@ var TimePicker = 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] = useState(null);
     const rootRef = useRef(null);
@@ -7928,11 +8262,11 @@ var TimePicker = 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 },
@@ -8099,7 +8433,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",
@@ -8108,7 +8442,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);
@@ -9091,6 +9425,192 @@ var RichEditorToolbar = forwardRef(
   }
 );
 RichEditorToolbar.displayName = "RichEditorToolbar";
+var Textarea = forwardRef(function Textarea2({ error = false, disabled = false, readOnly = false, size: sizeProp, rows = 4, className, style, ...props }, ref) {
+  const size = useSize(sizeProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "klun-textarea",
+        `klun-textarea--${size}`,
+        error && "klun-textarea--error",
+        disabled && "klun-textarea--disabled",
+        readOnly && "klun-textarea--readonly",
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ 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 = 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 = useRef(null);
+  const [active, setActive] = useState([]);
+  const [source, setSource] = useState(false);
+  const [html, setHtml] = useState(value ?? defaultValue);
+  useEffect(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    const next = value ?? html;
+    if (document.activeElement !== el && el.innerHTML !== next) el.innerHTML = next;
+  }, [value]);
+  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__ */ jsxs(
+    "div",
+    {
+      className: cx("klun-rich-editor", disabled && "klun-rich-editor--disabled", className),
+      style,
+      ...props,
+      children: [
+        !hideToolbar ? /* @__PURE__ */ jsxs("div", { className: "klun-rich-editor__bar", children: [
+          /* @__PURE__ */ jsx(RichEditorToolbar, { active, onAction }),
+          allowSource ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "klun-rich-editor__source",
+              onClick: () => setSource((s) => !s),
+              "data-active": source || void 0,
+              "aria-pressed": source,
+              children: [
+                /* @__PURE__ */ jsx("i", { className: "ri-code-s-slash-line" }),
+                "HTML"
+              ]
+            }
+          ) : null
+        ] }) : null,
+        source && allowSource ? /* @__PURE__ */ jsx("div", { className: "klun-rich-editor__sourcearea", children: /* @__PURE__ */ 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__ */ 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 = forwardRef(function Select2({
   size: sizeProp,
   placeholder,
@@ -9370,35 +9890,6 @@ var Switch = forwardRef(function Switch2({ disabled = false, size: sizeProp, onC
   );
 });
 Switch.displayName = "Switch";
-var Textarea = forwardRef(function Textarea2({ error = false, disabled = false, readOnly = false, size: sizeProp, rows = 4, className, style, ...props }, ref) {
-  const size = useSize(sizeProp);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        "klun-textarea",
-        `klun-textarea--${size}`,
-        error && "klun-textarea--error",
-        disabled && "klun-textarea--disabled",
-        readOnly && "klun-textarea--readonly",
-        className
-      ),
-      style,
-      children: /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref,
-          className: "klun-textarea__field",
-          rows,
-          disabled,
-          readOnly,
-          ...props
-        }
-      )
-    }
-  );
-});
-Textarea.displayName = "Textarea";
 var Card = forwardRef(function Card2({ variant = "stroke", padding, className, style, children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -11600,6 +12091,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, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, 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, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-UJOMGMCV.js.map
-//# sourceMappingURL=chunk-UJOMGMCV.js.map
+export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kanban, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, VirtualTable, Wizard, arSA, deDE, describeCron, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
+//# sourceMappingURL=chunk-TREMQLWT.js.map
+//# sourceMappingURL=chunk-TREMQLWT.js.map