import { o as Q } from "./rolldown-runtime.js";
import { i as X, n as G, t as K } from "./vendor/react.js";
import { t as c } from "./createLucideIcon.js";
import { t as Y } from "./chevron-down.js";
import { t as ee } from "./circle-question-mark.js";
import { t as te } from "./ellipsis.js";
import { t as re } from "./list.js";
import { t as oe } from "./sparkles.js";
import { t as ie } from "./table.js";
import { t as ne } from "./dist.js";
import { t as u } from "./utils.js";
import { t as ae } from "./Toggle.js";
import { t as se } from "./label.js";
import { t as le } from "./textarea.js";
import { t as ce } from "./separator2.js";
var de = [["path", {
  d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8",
  key: "mg9rjx"
}]], ue = c("bold", de), pe = [
  ["path", {
    d: "m15 15 6 6",
    key: "1s409w"
  }],
  ["path", {
    d: "m15 9 6-6",
    key: "ko1vev"
  }],
  ["path", {
    d: "M21 16v5h-5",
    key: "1ck2sf"
  }],
  ["path", {
    d: "M21 8V3h-5",
    key: "1qoq8a"
  }],
  ["path", {
    d: "M3 16v5h5",
    key: "1t08am"
  }],
  ["path", {
    d: "m3 21 6-6",
    key: "wwnumi"
  }],
  ["path", {
    d: "M3 8V3h5",
    key: "1ln10m"
  }],
  ["path", {
    d: "M9 9 3 3",
    key: "v551iv"
  }]
], me = c("expand", pe), he = [
  ["line", {
    x1: "19",
    x2: "10",
    y1: "4",
    y2: "4",
    key: "15jd3p"
  }],
  ["line", {
    x1: "14",
    x2: "5",
    y1: "20",
    y2: "20",
    key: "bu0au3"
  }],
  ["line", {
    x1: "15",
    x2: "9",
    y1: "4",
    y2: "20",
    key: "uljnxc"
  }]
], fe = c("italic", he), be = [["path", {
  d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
  key: "1cjeqo"
}], ["path", {
  d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
  key: "19qd67"
}]], xe = c("link", be), ge = [["path", {
  d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551",
  key: "1miecu"
}]], ve = c("paperclip", ge), je = [["path", {
  d: "m15 14 5-5-5-5",
  key: "12vg1m"
}], ["path", {
  d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13",
  key: "6uklza"
}]], ye = c("redo-2", je), _e = [
  ["path", {
    d: "M12 4v16",
    key: "1654pz"
  }],
  ["path", {
    d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2",
    key: "e0r10z"
  }],
  ["path", {
    d: "M9 20h6",
    key: "s66wpe"
  }]
], ke = c("type", _e), we = [["path", {
  d: "M6 4v6a6 6 0 0 0 12 0V4",
  key: "9kb039"
}], ["line", {
  x1: "4",
  x2: "20",
  y1: "20",
  y2: "20",
  key: "nun2al"
}]], Ne = c("underline", we), Ce = [["path", {
  d: "M9 14 4 9l5-5",
  key: "102s5s"
}], ["path", {
  d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11",
  key: "f3b9sd"
}]], Ee = c("undo-2", Ce), l = /* @__PURE__ */ Q(X(), 1), t = K(), Te = ne("hover:text-foreground aria-pressed:bg-accent focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,background-color,box-shadow,transform] duration-200 [transition-timing-function:cubic-bezier(0.25,1,0.5,1)] active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] focus-visible:transition-shadow focus-visible:duration-150 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
  variants: {
    variant: {
      default: "bg-transparent",
      outline: "border-input hover:bg-muted border bg-transparent shadow-xs"
    },
    size: {
      default: "h-9 min-w-9 px-2",
      sm: "h-8 min-w-8 px-1.5",
      lg: "h-10 min-w-10 px-2.5"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "default"
  }
}), z = l.forwardRef(({ className: e, variant: r = "default", size: o = "default", ...a }, s) => /* @__PURE__ */ (0, t.jsx)(ae, {
  ref: s,
  "data-slot": "toggle",
  className: u(Te({
    variant: r,
    size: o,
    className: e
  })),
  ...a
}));
z.displayName = "Toggle";
var n = l.forwardRef(({ icon: e, pressed: r, hasDropdown: o, className: a, ...s }, p) => o ? /* @__PURE__ */ (0, t.jsxs)("button", {
  ref: p,
  type: "button",
  "aria-haspopup": "true",
  className: u("group/dropdown inline-flex h-8 items-center justify-center gap-1 rounded px-1.5 py-1 text-foreground transition-[color,background-color,transform] duration-200 ease-smooth motion-reduce:transition-none", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "active:scale-95 motion-reduce:active:scale-100", "disabled:pointer-events-none disabled:opacity-50", r && "bg-muted", a),
  ...s,
  children: [/* @__PURE__ */ (0, t.jsx)("span", {
    className: "[&>svg]:size-4",
    children: e
  }), /* @__PURE__ */ (0, t.jsx)(Y, { className: "size-4 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none group-hover/dropdown:translate-y-0.5" })]
}) : /* @__PURE__ */ (0, t.jsx)(z, {
  ref: p,
  pressed: r,
  size: "sm",
  className: a,
  disabled: s.disabled,
  onClick: s.onClick,
  "aria-label": s["aria-label"],
  children: /* @__PURE__ */ (0, t.jsx)("span", {
    className: "[&>svg]:size-5",
    children: e
  })
}));
n.displayName = "ToolbarButton";
function y() {
  return /* @__PURE__ */ (0, t.jsx)(ce, {
    orientation: "vertical",
    className: "mx-0.5 h-5 w-px bg-surface-2"
  });
}
function ze({ className: e, onAiAssist: r, onUndo: o, onRedo: a, onExpand: s, showAiAssist: p = !0, showExpand: j = !0, disabled: i, rtl: x, formatting: m = {}, onFormatChange: h }) {
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    role: "toolbar",
    "aria-label": "Formatting toolbar",
    className: u("flex flex-wrap items-center gap-2 rounded-t-xl border border-input border-b-0 bg-muted/30 p-2 transition-[border-color] duration-200 ease-smooth motion-reduce:transition-none group-has-[:focus-visible]/editor:border-ring group-has-[[aria-invalid=true]]/editor:border-destructive", x && "flex-row-reverse", e),
    dir: x ? "rtl" : "ltr",
    children: [
      p && /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [/* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(oe, { className: "size-5 text-primary transition-transform duration-300 ease-smooth motion-reduce:transition-none group-hover/toggle:rotate-12" }),
        onClick: r,
        disabled: i,
        "aria-label": "AI Assist"
      }), /* @__PURE__ */ (0, t.jsx)(y, {})] }),
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: "flex items-center gap-2",
        children: [/* @__PURE__ */ (0, t.jsx)(n, {
          icon: /* @__PURE__ */ (0, t.jsx)(Ee, {}),
          onClick: o,
          disabled: i,
          "aria-label": "Undo"
        }), /* @__PURE__ */ (0, t.jsx)(n, {
          icon: /* @__PURE__ */ (0, t.jsx)(ye, {}),
          onClick: a,
          disabled: i,
          "aria-label": "Redo"
        })]
      }),
      /* @__PURE__ */ (0, t.jsx)(y, {}),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(ke, {}),
        hasDropdown: !0,
        disabled: i,
        "aria-label": "Text formatting"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsxs)("span", {
          className: "relative",
          children: [/* @__PURE__ */ (0, t.jsx)("span", {
            className: "text-sm font-bold",
            children: "A"
          }), /* @__PURE__ */ (0, t.jsx)("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-foreground" })]
        }),
        hasDropdown: !0,
        disabled: i,
        "aria-label": "Text color"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(ue, {}),
        pressed: m.bold,
        onClick: () => h?.("bold"),
        disabled: i,
        "aria-label": "Bold"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(fe, {}),
        pressed: m.italic,
        onClick: () => h?.("italic"),
        disabled: i,
        "aria-label": "Italic"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(Ne, {}),
        pressed: m.underline,
        onClick: () => h?.("underline"),
        disabled: i,
        "aria-label": "Underline"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(re, {}),
        hasDropdown: !0,
        disabled: i,
        "aria-label": "List options"
      }),
      /* @__PURE__ */ (0, t.jsx)(y, {}),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(xe, {}),
        disabled: i,
        "aria-label": "Insert link"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(ie, {}),
        hasDropdown: !0,
        disabled: i,
        "aria-label": "Table options"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(ve, {}),
        disabled: i,
        "aria-label": "Attach file"
      }),
      /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(te, {}),
        disabled: i,
        "aria-label": "More options"
      }),
      j && /* @__PURE__ */ (0, t.jsx)(n, {
        icon: /* @__PURE__ */ (0, t.jsx)(me, { className: "transition-transform duration-200 ease-smooth motion-reduce:transition-none group-hover/toggle:scale-110" }),
        onClick: s,
        disabled: i,
        "aria-label": "Expand",
        className: "ms-auto"
      })
    ]
  });
}
var M = l.forwardRef(({ label: e, hint: r, error: o, required: a, showHelpIcon: s, onHelpClick: p, showCharCount: j, maxLength: i = 3e3, charCount: x, showResizeHandle: m = !0, showAiAssist: h = !0, showExpand: $ = !0, onAiAssist: R, onUndo: V, onRedo: I, onExpand: H, rtl: d, formatting: q, onFormatChange: D, className: S, disabled: _, id: O, value: g, defaultValue: k, onChange: P, ...L }, U) => {
  const B = l.useId(), v = O || B, w = `${v}-hint`, N = `${v}-error`, [W, Z] = l.useState(k?.toString() || ""), F = g !== void 0 ? g.toString() : W, f = x ?? F.length, J = (E) => {
    g === void 0 && Z(E.target.value), P?.(E);
  }, C = !!o;
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    className: u("flex flex-col gap-1.5 w-full", d && "text-right"),
    dir: d ? "rtl" : "ltr",
    children: [
      e && /* @__PURE__ */ (0, t.jsxs)("div", {
        className: u("flex items-center gap-0.5", d && "flex-row-reverse"),
        children: [
          /* @__PURE__ */ (0, t.jsx)(se, {
            htmlFor: v,
            className: "text-sm font-medium leading-5 text-secondary-foreground",
            children: e
          }),
          a && /* @__PURE__ */ (0, t.jsx)("span", {
            className: "text-sm font-medium leading-5 text-destructive",
            "aria-hidden": "true",
            children: "*"
          }),
          s && /* @__PURE__ */ (0, t.jsx)("button", {
            type: "button",
            onClick: p,
            className: "text-muted-foreground hover:text-quaternary-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-full",
            "aria-label": "Help",
            children: /* @__PURE__ */ (0, t.jsx)(ee, { className: "size-4" })
          })
        ]
      }),
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: "group/editor",
        children: [/* @__PURE__ */ (0, t.jsx)(ze, {
          onAiAssist: R,
          onUndo: V,
          onRedo: I,
          onExpand: H,
          showAiAssist: h,
          showExpand: $,
          disabled: _,
          rtl: d,
          formatting: q,
          onFormatChange: D
        }), /* @__PURE__ */ (0, t.jsx)(le, {
          ref: U,
          id: v,
          value: g,
          defaultValue: k,
          onChange: J,
          disabled: _,
          "aria-invalid": C,
          "aria-required": a || void 0,
          "aria-describedby": o ? N : r ? w : void 0,
          maxLength: i,
          className: u("min-h-30 rounded-t-none border-t-0", C && "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20", !m && "resize-none", d && "text-right", S),
          dir: d ? "rtl" : "ltr",
          ...L
        })]
      }),
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: u("flex items-start gap-4 text-sm leading-5", d ? "flex-row-reverse" : "justify-between"),
        children: [/* @__PURE__ */ (0, t.jsx)("div", {
          className: "flex-1",
          children: o ? /* @__PURE__ */ (0, t.jsx)("p", {
            id: N,
            className: "text-destructive animate-in fade-in-0 slide-in-from-top-1 duration-200 motion-reduce:animate-none",
            children: o
          }) : r ? /* @__PURE__ */ (0, t.jsx)("p", {
            id: w,
            className: "text-muted-foreground",
            children: r
          }) : null
        }), j && /* @__PURE__ */ (0, t.jsxs)("span", {
          role: f >= i * 0.9 ? "status" : void 0,
          "aria-live": f >= i * 0.9 ? "polite" : "off",
          className: u("whitespace-nowrap transition-colors duration-300 ease-out motion-reduce:transition-none", f >= i * 0.9 ? "text-destructive font-medium" : f >= i * 0.75 ? "text-secondary-foreground" : "text-muted-foreground", d && "text-start"),
          children: [
            f,
            "/",
            i
          ]
        })]
      })
    ]
  });
});
M.displayName = "RichTextarea";
var Me = G();
function Ae(e) {
  return {
    onHelpClick: (r) => {
      e.dispatchEvent(new CustomEvent("help-click", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    },
    onAiAssist: (r) => {
      e.dispatchEvent(new CustomEvent("ai-assist", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    },
    onUndo: (r) => {
      e.dispatchEvent(new CustomEvent("undo", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    },
    onRedo: (r) => {
      e.dispatchEvent(new CustomEvent("redo", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    },
    onExpand: (r) => {
      e.dispatchEvent(new CustomEvent("expand", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    },
    onFormatChange: (r) => {
      e.dispatchEvent(new CustomEvent("format-change", {
        detail: r,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function $e(e) {
  const { _hostElement: r, ...o } = e, a = l.useMemo(() => r ? Ae(r) : {}, [r]);
  return l.createElement(M, {
    ...o,
    ...a
  });
}
var b = {
  label: "string",
  hint: "string",
  error: "string",
  required: "boolean",
  showHelpIcon: "boolean",
  showCharCount: "boolean",
  maxLength: "number",
  charCount: "number",
  showResizeHandle: "boolean",
  showAiAssist: "boolean",
  showExpand: "boolean",
  rtl: "boolean",
  formatting: "json"
};
function T(e, r) {
  if (e !== null)
    switch (r) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var A = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const o of Array.from(this.childNodes))
      o.nodeType === Node.TEXT_NODE && !o.textContent?.trim() || e.push(o);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((o) => this._childrenContainer.appendChild(o)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, Me.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, o) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(b).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const o = b[e] || "string";
    this._props[e] = this._parseValue(r, o), this._render();
  }
  _parseValue(e, r) {
    if (r === "boolean" && typeof e == "boolean" || r === "number" && typeof e == "number" || r === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (r) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const r = e.replace(/([A-Z])/g, "-$1").toLowerCase(), o = b[e] || "string";
    return T(this.getAttribute(r), o);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [o, a] of Object.entries(b)) if (o in this._props) e[o] = this._props[o];
    else {
      const s = o.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[o] = T(this.getAttribute(s), a);
    }
    const r = l.createElement($e, {
      ...e,
      _hostElement: this
    }, l.createElement("span", {
      ref: (o) => {
        o && this._childrenContainer && o.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(r);
  }
};
for (const e of Object.keys(b)) Object.defineProperty(A.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-rich-textarea") && customElements.define("hf-rich-textarea", A);
export {
  A as RichTextareaWC,
  A as default
};

//# sourceMappingURL=hf-rich-textarea.js.map