@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/rich-text-editor.js

@@ -1,31 +1,13 @@
 "use client";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "./chunk-JVLUBAPB.js";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger
-} from "./chunk-3T65TLJX.js";
-import {
-  Input
-} from "./chunk-MEKCCOP5.js";
-import "./chunk-3ACQVT7A.js";
-import {
-  Button
-} from "./chunk-B4H6RNDH.js";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/rich-text-editor.tsx
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Baseline, Bold, ChevronDown, Code2, ImageIcon, Italic, Link2, List, ListOrdered, Quote, Redo2, Underline, Undo2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Color } from "@tiptap/extension-color";
 import { Image } from "@tiptap/extension-image";
 import { Placeholder } from "@tiptap/extension-placeholder";
@@ -33,707 +15,601 @@ import { TextAlign } from "@tiptap/extension-text-align";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
-import {
-  AlignCenter,
-  AlignJustify,
-  AlignLeft,
-  AlignRight,
-  Baseline,
-  Bold,
-  ChevronDown,
-  Code2,
-  ImageIcon,
-  Italic,
-  Link2,
-  List,
-  ListOrdered,
-  Quote,
-  Redo2,
-  Underline,
-  Undo2
-} from "lucide-react";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var SIZES = {
-  sm: {
-    width: "max-w-[420px]",
-    content: "min-h-[140px]",
-    contentPad: "px-4 py-3",
-    text: "text-gdt-xs",
-    icon: "[&_svg:not([class*='size-'])]:size-3.5",
-    button: "h-7 min-w-7 px-1",
-    toolbarPad: "px-2 py-1.5",
-    toolbarGap: "gap-0.5",
-    divider: "h-4"
-  },
-  md: {
-    width: "max-w-[520px]",
-    content: "min-h-[172px]",
-    contentPad: "px-5 py-4",
-    text: "text-gdt-sm",
-    icon: "[&_svg:not([class*='size-'])]:size-4",
-    button: "h-8 min-w-8 px-1.5",
-    toolbarPad: "px-2.5 py-2",
-    toolbarGap: "gap-0.5",
-    divider: "h-5"
-  },
-  lg: {
-    width: "max-w-[600px]",
-    content: "min-h-[206px]",
-    contentPad: "px-6 py-5",
-    text: "text-gdt-md",
-    icon: "[&_svg:not([class*='size-'])]:size-[18px]",
-    button: "h-9 min-w-9 px-2",
-    toolbarPad: "px-3 py-2.5",
-    toolbarGap: "gap-1",
-    divider: "h-6"
-  }
+//#region src/rich-text-editor.tsx
+const SIZES = {
+	sm: {
+		content: "min-h-[140px]",
+		contentPad: "px-4 py-3",
+		text: "text-gdt-xs",
+		icon: "[&_svg:not([class*='size-'])]:size-3.5",
+		button: "h-7 min-w-7 px-1",
+		toolbarPad: "px-2 py-1.5",
+		toolbarGap: "gap-0.5",
+		divider: "h-4"
+	},
+	md: {
+		content: "min-h-[172px]",
+		contentPad: "px-5 py-4",
+		text: "text-gdt-sm",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		button: "h-8 min-w-8 px-1.5",
+		toolbarPad: "px-2.5 py-2",
+		toolbarGap: "gap-0.5",
+		divider: "h-5"
+	},
+	lg: {
+		content: "min-h-[206px]",
+		contentPad: "px-6 py-5",
+		text: "text-gdt-md",
+		icon: "[&_svg:not([class*='size-'])]:size-[18px]",
+		button: "h-9 min-w-9 px-2",
+		toolbarPad: "px-3 py-2.5",
+		toolbarGap: "gap-1",
+		divider: "h-6"
+	}
 };
-var TEXT_COLORS = [
-  { label: "Default", value: "", swatch: "" },
-  { label: "Forest", value: "#2f5a2c", swatch: "var(--color-forest-500)" },
-  { label: "Brass", value: "#b8861a", swatch: "var(--color-brass-400)" },
-  { label: "Clay", value: "#b2542b", swatch: "var(--color-clay-500)" },
-  { label: "Moss", value: "#4e4d29", swatch: "var(--color-moss-500)" },
-  { label: "Stone", value: "#5c5648", swatch: "var(--color-stone-600)" },
-  { label: "Ink", value: "#1f1c18", swatch: "var(--color-stone-900)" }
+const TEXT_COLORS = [
+	{
+		label: "Default",
+		value: "",
+		swatch: ""
+	},
+	{
+		label: "Forest",
+		value: "#2f5a2c",
+		swatch: "var(--color-forest-500)"
+	},
+	{
+		label: "Brass",
+		value: "#b8861a",
+		swatch: "var(--color-brass-400)"
+	},
+	{
+		label: "Clay",
+		value: "#b2542b",
+		swatch: "var(--color-clay-500)"
+	},
+	{
+		label: "Moss",
+		value: "#4e4d29",
+		swatch: "var(--color-moss-500)"
+	},
+	{
+		label: "Stone",
+		value: "#5c5648",
+		swatch: "var(--color-stone-600)"
+	},
+	{
+		label: "Ink",
+		value: "#1f1c18",
+		swatch: "var(--color-stone-900)"
+	}
 ];
-var BLOCK_OPTIONS = [
-  { value: "paragraph", label: "Normal" },
-  { value: "h1", label: "Heading 1" },
-  { value: "h2", label: "Heading 2" },
-  { value: "h3", label: "Heading 3" }
+const BLOCK_OPTIONS = [
+	{
+		value: "paragraph",
+		label: "Normal"
+	},
+	{
+		value: "h1",
+		label: "Heading 1"
+	},
+	{
+		value: "h2",
+		label: "Heading 2"
+	},
+	{
+		value: "h3",
+		label: "Heading 3"
+	}
 ];
 function toolbarControlClass(tokens, active) {
-  return cn(
-    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium text-fg-secondary outline-none transition-colors select-none",
-    "hover:bg-action-tertiary-hover hover:text-fg-primary",
-    "focus-visible:ring-2 focus-visible:ring-line-focus",
-    "disabled:pointer-events-none disabled:opacity-40 data-disabled:pointer-events-none data-disabled:opacity-40",
-    tokens.button,
-    tokens.icon,
-    tokens.text,
-    active && "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover hover:text-fg-on-brand"
-  );
+	return cn("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium text-fg-secondary outline-none transition-colors select-none", "hover:bg-action-tertiary-hover hover:text-fg-primary", "focus-visible:ring-2 focus-visible:ring-line-focus", "disabled:pointer-events-none disabled:opacity-40 data-disabled:pointer-events-none data-disabled:opacity-40", tokens.button, tokens.icon, tokens.text, active && "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover hover:text-fg-on-brand");
 }
-function ToolbarButton({
-  tokens,
-  label,
-  active,
-  disabled,
-  onClick,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "aria-label": label,
-      title: label,
-      "aria-pressed": active,
-      disabled,
-      onMouseDown: (event) => event.preventDefault(),
-      onClick,
-      className: toolbarControlClass(tokens, active),
-      children
-    }
-  );
+function ToolbarButton({ tokens, label, active, disabled, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		"aria-pressed": active,
+		disabled,
+		onMouseDown: (event) => event.preventDefault(),
+		onClick,
+		className: toolbarControlClass(tokens, active),
+		children
+	});
 }
 function ToolbarDivider({ tokens }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cn("mx-1 w-px shrink-0 self-center bg-line", tokens.divider)
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("mx-1 w-px shrink-0 self-center bg-line", tokens.divider)
+	});
 }
-function BlockControl({
-  tokens,
-  value,
-  disabled,
-  onChange
-}) {
-  const current = BLOCK_OPTIONS.find((option) => option.value === value);
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs(
-      DropdownMenuTrigger,
-      {
-        disabled,
-        className: cn(
-          toolbarControlClass(tokens),
-          "w-auto justify-between gap-1 px-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: current?.label ?? "Normal" }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-70" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-40", children: /* @__PURE__ */ jsx(
-      DropdownMenuRadioGroup,
-      {
-        value,
-        onValueChange: (next) => onChange(next),
-        children: BLOCK_OPTIONS.map((option) => (
-          // closeOnClick: radio items keep the menu open by default, which
-          // leaves the popup backdrop blocking the toolbar after a pick.
-          /* @__PURE__ */ jsx(
-            DropdownMenuRadioItem,
-            {
-              value: option.value,
-              closeOnClick: true,
-              children: option.label
-            },
-            option.value
-          )
-        ))
-      }
-    ) })
-  ] });
+function BlockControl({ tokens, value, disabled, onChange }) {
+	const current = BLOCK_OPTIONS.find((option) => option.value === value);
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		disabled,
+		className: cn(toolbarControlClass(tokens), "w-auto justify-between gap-1 px-2"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap",
+			children: current?.label ?? "Normal"
+		}), /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-70" })]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		className: "min-w-40",
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value,
+			onValueChange: (next) => onChange(next),
+			children: BLOCK_OPTIONS.map((option) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: option.value,
+				closeOnClick: true,
+				children: option.label
+			}, option.value))
+		})
+	})] });
 }
-function ColorControl({
-  tokens,
-  value,
-  disabled,
-  onChange
-}) {
-  const [open, setOpen] = React.useState(false);
-  const active = value !== "";
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(
-      PopoverTrigger,
-      {
-        disabled,
-        "aria-label": "Text colour",
-        title: "Text colour",
-        onMouseDown: (event) => event.preventDefault(),
-        className: toolbarControlClass(tokens, false),
-        children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx(Baseline, { className: active ? "text-fg-brand" : void 0 }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "mt-px h-0.5 w-3 rounded-full",
-              style: { backgroundColor: active ? value : "currentColor" }
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        showArrow: false,
-        align: "start",
-        sideOffset: 8,
-        className: "w-auto py-3",
-        children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2 px-4", children: TEXT_COLORS.map((color) => {
-          const isSelected = color.value === value;
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              title: color.label,
-              "aria-label": color.label,
-              "aria-pressed": isSelected,
-              onClick: () => {
-                onChange(color.value);
-                setOpen(false);
-              },
-              className: cn(
-                "flex size-7 items-center justify-center rounded-full border transition-[box-shadow,border-color] outline-none",
-                "hover:border-line-strong focus-visible:ring-2 focus-visible:ring-line-focus",
-                isSelected ? "border-line-focus ring-2 ring-line-focus/40" : "border-line"
-              ),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "flex size-5 items-center justify-center rounded-full text-gdt-xs font-bold",
-                    color.value === "" && "text-fg-secondary"
-                  ),
-                  style: color.value ? {
-                    backgroundColor: color.swatch,
-                    color: "var(--color-stone-0, #fff)"
-                  } : void 0,
-                  children: "A"
-                }
-              )
-            },
-            color.label
-          );
-        }) })
-      }
-    )
-  ] });
+function ColorControl({ tokens, value, disabled, onChange }) {
+	const [open, setOpen] = React.useState(false);
+	const active = value !== "";
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled,
+			"aria-label": "Text colour",
+			title: "Text colour",
+			onMouseDown: (event) => event.preventDefault(),
+			className: toolbarControlClass(tokens, false),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "relative inline-flex flex-col items-center",
+				children: [/* @__PURE__ */ jsx(Baseline, { className: active ? "text-fg-brand" : void 0 }), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "mt-px h-0.5 w-3 rounded-full",
+					style: { backgroundColor: active ? value : "currentColor" }
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			sideOffset: 8,
+			className: "w-auto py-3",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-4 gap-2 px-4",
+				children: TEXT_COLORS.map((color) => {
+					const isSelected = color.value === value;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						title: color.label,
+						"aria-label": color.label,
+						"aria-pressed": isSelected,
+						onClick: () => {
+							onChange(color.value);
+							setOpen(false);
+						},
+						className: cn("flex size-7 items-center justify-center rounded-full border transition-[box-shadow,border-color] outline-none", "hover:border-line-strong focus-visible:ring-2 focus-visible:ring-line-focus", isSelected ? "border-line-focus ring-2 ring-line-focus/40" : "border-line"),
+						children: /* @__PURE__ */ jsx("span", {
+							className: cn("flex size-5 items-center justify-center rounded-full text-gdt-xs font-bold", color.value === "" && "text-fg-secondary"),
+							style: color.value ? {
+								backgroundColor: color.swatch,
+								color: "var(--color-stone-0, #fff)"
+							} : void 0,
+							children: "A"
+						})
+					}, color.label);
+				})
+			})
+		})]
+	});
 }
-function LinkControl({
-  tokens,
-  active,
-  currentHref,
-  disabled,
-  onApply,
-  onRemove
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [href, setHref] = React.useState("");
-  function handleOpenChange(next) {
-    if (next) setHref(currentHref);
-    setOpen(next);
-  }
-  function handleSubmit(event) {
-    event.preventDefault();
-    const trimmed = href.trim();
-    if (trimmed) onApply(trimmed);
-    else onRemove();
-    setOpen(false);
-  }
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx(
-      PopoverTrigger,
-      {
-        disabled,
-        "aria-label": "Insert link",
-        title: "Insert link",
-        "aria-pressed": active,
-        onMouseDown: (event) => event.preventDefault(),
-        className: toolbarControlClass(tokens, active),
-        children: /* @__PURE__ */ jsx(Link2, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(PopoverContent, { showArrow: false, align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-3 px-4", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          autoFocus: true,
-          size: "sm",
-          type: "url",
-          placeholder: "https://example.com",
-          value: href,
-          onChange: (event) => setHref(event.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "tertiary-outline",
-            size: "sm",
-            disabled: !active,
-            onClick: () => {
-              onRemove();
-              setOpen(false);
-            },
-            children: "Remove"
-          }
-        ),
-        /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: "Apply" })
-      ] })
-    ] }) })
-  ] });
+function LinkControl({ tokens, active, currentHref, disabled, onApply, onRemove }) {
+	const [open, setOpen] = React.useState(false);
+	const [href, setHref] = React.useState("");
+	function handleOpenChange(next) {
+		if (next) setHref(currentHref);
+		setOpen(next);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		const trimmed = href.trim();
+		if (trimmed) onApply(trimmed);
+		else onRemove();
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled,
+			"aria-label": "Insert link",
+			title: "Insert link",
+			"aria-pressed": active,
+			onMouseDown: (event) => event.preventDefault(),
+			className: toolbarControlClass(tokens, active),
+			children: /* @__PURE__ */ jsx(Link2, {})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-3 px-4",
+				onSubmit: handleSubmit,
+				children: [/* @__PURE__ */ jsx(Input, {
+					autoFocus: true,
+					size: "sm",
+					type: "url",
+					placeholder: "https://example.com",
+					value: href,
+					onChange: (event) => setHref(event.target.value)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "tertiary-outline",
+						size: "sm",
+						disabled: !active,
+						onClick: () => {
+							onRemove();
+							setOpen(false);
+						},
+						children: "Remove"
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						size: "sm",
+						children: "Apply"
+					})]
+				})]
+			})
+		})]
+	});
 }
-function ImageControl({
-  tokens,
-  disabled,
-  onInsert
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [src, setSrc] = React.useState("");
-  function handleOpenChange(next) {
-    if (next) setSrc("");
-    setOpen(next);
-  }
-  function handleSubmit(event) {
-    event.preventDefault();
-    const trimmed = src.trim();
-    if (trimmed) onInsert(trimmed);
-    setOpen(false);
-  }
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx(
-      PopoverTrigger,
-      {
-        disabled,
-        "aria-label": "Insert image",
-        title: "Insert image",
-        onMouseDown: (event) => event.preventDefault(),
-        className: toolbarControlClass(tokens, false),
-        children: /* @__PURE__ */ jsx(ImageIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(PopoverContent, { showArrow: false, align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-3 px-4", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          autoFocus: true,
-          size: "sm",
-          type: "url",
-          placeholder: "https://example.com/image.jpg",
-          value: src,
-          onChange: (event) => setSrc(event.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !src.trim(), children: "Insert" }) })
-    ] }) })
-  ] });
+function ImageControl({ tokens, disabled, onInsert }) {
+	const [open, setOpen] = React.useState(false);
+	const [src, setSrc] = React.useState("");
+	function handleOpenChange(next) {
+		if (next) setSrc("");
+		setOpen(next);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		const trimmed = src.trim();
+		if (trimmed) onInsert(trimmed);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled,
+			"aria-label": "Insert image",
+			title: "Insert image",
+			onMouseDown: (event) => event.preventDefault(),
+			className: toolbarControlClass(tokens, false),
+			children: /* @__PURE__ */ jsx(ImageIcon, {})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-3 px-4",
+				onSubmit: handleSubmit,
+				children: [/* @__PURE__ */ jsx(Input, {
+					autoFocus: true,
+					size: "sm",
+					type: "url",
+					placeholder: "https://example.com/image.jpg",
+					value: src,
+					onChange: (event) => setSrc(event.target.value)
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-end",
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						size: "sm",
+						disabled: !src.trim(),
+						children: "Insert"
+					})
+				})]
+			})
+		})]
+	});
 }
-var ALIGN_OPTIONS = [
-  { value: "left", label: "Left", Icon: AlignLeft },
-  { value: "center", label: "Center", Icon: AlignCenter },
-  { value: "right", label: "Right", Icon: AlignRight },
-  { value: "justify", label: "Justify", Icon: AlignJustify }
+const ALIGN_OPTIONS = [
+	{
+		value: "left",
+		label: "Left",
+		Icon: AlignLeft
+	},
+	{
+		value: "center",
+		label: "Center",
+		Icon: AlignCenter
+	},
+	{
+		value: "right",
+		label: "Right",
+		Icon: AlignRight
+	},
+	{
+		value: "justify",
+		label: "Justify",
+		Icon: AlignJustify
+	}
 ];
-function AlignControl({
-  tokens,
-  value,
-  disabled,
-  onChange
-}) {
-  const current = ALIGN_OPTIONS.find((option) => option.value === value);
-  const Icon = current?.Icon ?? AlignLeft;
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(
-      DropdownMenuTrigger,
-      {
-        disabled,
-        "aria-label": "Text alignment",
-        title: "Text alignment",
-        className: toolbarControlClass(tokens, value !== "left"),
-        children: /* @__PURE__ */ jsx(Icon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-36", children: /* @__PURE__ */ jsx(
-      DropdownMenuRadioGroup,
-      {
-        value,
-        onValueChange: (next) => onChange(next),
-        children: ALIGN_OPTIONS.map(
-          ({ value: optionValue, label, Icon: OptionIcon }) => /* @__PURE__ */ jsxs(
-            DropdownMenuRadioItem,
-            {
-              value: optionValue,
-              closeOnClick: true,
-              children: [
-                /* @__PURE__ */ jsx(OptionIcon, {}),
-                label
-              ]
-            },
-            optionValue
-          )
-        )
-      }
-    ) })
-  ] });
-}
-var EMPTY_STATE = {
-  block: "paragraph",
-  align: "left",
-  color: "",
-  linkHref: "",
-  isBold: false,
-  isItalic: false,
-  isUnderline: false,
-  isBulletList: false,
-  isOrderedList: false,
-  isBlockquote: false,
-  isCodeBlock: false,
-  isLink: false,
-  canUndo: false,
-  canRedo: false
-};
-function RichTextEditor({
-  value,
-  defaultValue,
-  onChange,
-  size,
-  placeholder = "Start writing, or paste your content here. Format text and add lists, links, and images using the toolbar above.",
-  disabled = false,
-  className,
-  "aria-label": ariaLabel = "Rich text editor"
-}) {
-  const resolvedSize = useComponentSize(size);
-  const tokens = SIZES[resolvedSize];
-  const [focused, setFocused] = React.useState(false);
-  const editor = useEditor({
-    immediatelyRender: false,
-    editable: !disabled,
-    content: value ?? defaultValue ?? "",
-    extensions: [
-      StarterKit.configure({
-        link: {
-          openOnClick: false,
-          HTMLAttributes: { rel: "noopener noreferrer nofollow" }
-        }
-      }),
-      TextStyle,
-      Color,
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
-      Image.configure({ inline: false, allowBase64: true }),
-      Placeholder.configure({ placeholder })
-    ],
-    editorProps: {
-      attributes: {
-        "aria-label": ariaLabel,
-        role: "textbox",
-        "aria-multiline": "true",
-        class: cn("tiptap focus:outline-none", tokens.text)
-      }
-    },
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-    onUpdate: ({ editor: instance }) => onChange?.(instance.getHTML())
-  });
-  React.useEffect(() => {
-    editor?.setEditable(!disabled);
-  }, [editor, disabled]);
-  React.useEffect(() => {
-    if (!editor || value === void 0) return;
-    if (value !== editor.getHTML()) {
-      editor.commands.setContent(value, { emitUpdate: false });
-    }
-  }, [editor, value]);
-  const state = useEditorState({
-    editor,
-    selector: ({ editor: instance }) => {
-      if (!instance) return EMPTY_STATE;
-      const block = instance.isActive("heading", { level: 1 }) ? "h1" : instance.isActive("heading", { level: 2 }) ? "h2" : instance.isActive("heading", { level: 3 }) ? "h3" : "paragraph";
-      const align = instance.isActive({ textAlign: "center" }) ? "center" : instance.isActive({ textAlign: "right" }) ? "right" : instance.isActive({ textAlign: "justify" }) ? "justify" : "left";
-      return {
-        block,
-        align,
-        color: instance.getAttributes("textStyle").color ?? "",
-        linkHref: instance.getAttributes("link").href ?? "",
-        isBold: instance.isActive("bold"),
-        isItalic: instance.isActive("italic"),
-        isUnderline: instance.isActive("underline"),
-        isBulletList: instance.isActive("bulletList"),
-        isOrderedList: instance.isActive("orderedList"),
-        isBlockquote: instance.isActive("blockquote"),
-        isCodeBlock: instance.isActive("codeBlock"),
-        isLink: instance.isActive("link"),
-        canUndo: instance.can().undo(),
-        canRedo: instance.can().redo()
-      };
-    }
-  });
-  const s = state ?? EMPTY_STATE;
-  function setBlock(next) {
-    if (!editor) return;
-    const chain = editor.chain().focus();
-    if (next === "paragraph") chain.setParagraph().run();
-    else chain.toggleHeading({ level: Number(next[1]) }).run();
-  }
-  function setAlign(next) {
-    editor?.chain().focus().setTextAlign(next).run();
-  }
-  function setColor(next) {
-    if (!editor) return;
-    if (next) editor.chain().focus().setColor(next).run();
-    else editor.chain().focus().unsetColor().run();
-  }
-  function applyLink(href) {
-    editor?.chain().focus().extendMarkRange("link").setLink({ href }).run();
-  }
-  function removeLink() {
-    editor?.chain().focus().extendMarkRange("link").unsetLink().run();
-  }
-  function insertImage(src) {
-    editor?.chain().focus().setImage({ src }).run();
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "rich-text-editor",
-      "data-disabled": disabled || void 0,
-      "data-focused": focused || void 0,
-      className: cn(
-        "group/editor flex w-full flex-col overflow-hidden rounded-2xl border bg-surface text-fg-primary shadow-1 transition-[border-color,box-shadow]",
-        disabled ? "border-line-subtle opacity-60" : focused ? "border-line-focus ring-2 ring-line-focus/35" : "border-line hover:border-line-strong",
-        tokens.width,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "toolbar",
-            "aria-label": "Formatting",
-            "aria-orientation": "horizontal",
-            className: cn(
-              "flex flex-wrap items-center bg-surface-raised",
-              tokens.toolbarPad,
-              tokens.toolbarGap
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                BlockControl,
-                {
-                  tokens,
-                  value: s.block,
-                  disabled,
-                  onChange: setBlock
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Bold",
-                  active: s.isBold,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleBold().run(),
-                  children: /* @__PURE__ */ jsx(Bold, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Italic",
-                  active: s.isItalic,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleItalic().run(),
-                  children: /* @__PURE__ */ jsx(Italic, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Underline",
-                  active: s.isUnderline,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleUnderline().run(),
-                  children: /* @__PURE__ */ jsx(Underline, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorControl,
-                {
-                  tokens,
-                  value: s.color,
-                  disabled,
-                  onChange: setColor
-                }
-              ),
-              /* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Numbered list",
-                  active: s.isOrderedList,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleOrderedList().run(),
-                  children: /* @__PURE__ */ jsx(ListOrdered, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Bullet list",
-                  active: s.isBulletList,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleBulletList().run(),
-                  children: /* @__PURE__ */ jsx(List, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AlignControl,
-                {
-                  tokens,
-                  value: s.align,
-                  disabled,
-                  onChange: setAlign
-                }
-              ),
-              /* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx(
-                LinkControl,
-                {
-                  tokens,
-                  active: s.isLink,
-                  currentHref: s.linkHref,
-                  disabled,
-                  onApply: applyLink,
-                  onRemove: removeLink
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Quote",
-                  active: s.isBlockquote,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleBlockquote().run(),
-                  children: /* @__PURE__ */ jsx(Quote, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Code block",
-                  active: s.isCodeBlock,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
-                  children: /* @__PURE__ */ jsx(Code2, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ImageControl,
-                {
-                  tokens,
-                  disabled,
-                  onInsert: insertImage
-                }
-              ),
-              /* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Undo",
-                  disabled: disabled || !s.canUndo,
-                  onClick: () => editor?.chain().focus().undo().run(),
-                  children: /* @__PURE__ */ jsx(Undo2, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Redo",
-                  disabled: disabled || !s.canRedo,
-                  onClick: () => editor?.chain().focus().redo().run(),
-                  children: /* @__PURE__ */ jsx(Redo2, {})
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "h-px w-full shrink-0 bg-line-subtle" }),
-        /* @__PURE__ */ jsx(
-          EditorContent,
-          {
-            editor,
-            className: cn(
-              "gdt-rich-text min-w-0 flex-1 overflow-y-auto",
-              tokens.content,
-              tokens.contentPad
-            )
-          }
-        )
-      ]
-    }
-  );
+function AlignControl({ tokens, value, disabled, onChange }) {
+	const Icon = ALIGN_OPTIONS.find((option) => option.value === value)?.Icon ?? AlignLeft;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		disabled,
+		"aria-label": "Text alignment",
+		title: "Text alignment",
+		className: toolbarControlClass(tokens, value !== "left"),
+		children: /* @__PURE__ */ jsx(Icon, {})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		className: "min-w-36",
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value,
+			onValueChange: (next) => onChange(next),
+			children: ALIGN_OPTIONS.map(({ value: optionValue, label, Icon: OptionIcon }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				value: optionValue,
+				closeOnClick: true,
+				children: [/* @__PURE__ */ jsx(OptionIcon, {}), label]
+			}, optionValue))
+		})
+	})] });
 }
-export {
-  RichTextEditor
+const EMPTY_STATE = {
+	block: "paragraph",
+	align: "left",
+	color: "",
+	linkHref: "",
+	isBold: false,
+	isItalic: false,
+	isUnderline: false,
+	isBulletList: false,
+	isOrderedList: false,
+	isBlockquote: false,
+	isCodeBlock: false,
+	isLink: false,
+	canUndo: false,
+	canRedo: false
 };
-//# sourceMappingURL=rich-text-editor.js.map
+const RichTextEditor = React.forwardRef(function RichTextEditor({ value, defaultValue, onChange, size, placeholder = "Start writing, or paste your content here. Format text and add lists, links, and images using the toolbar above.", disabled = false, className, id, "aria-label": ariaLabel = "Rich text editor", "aria-invalid": ariaInvalid }, ref) {
+	const resolvedSize = useComponentSize(size);
+	const tokens = SIZES[resolvedSize];
+	const [focused, setFocused] = React.useState(false);
+	const invalid = ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+	const editor = useEditor({
+		immediatelyRender: false,
+		editable: !disabled,
+		content: value ?? defaultValue ?? "",
+		extensions: [
+			StarterKit.configure({ link: {
+				openOnClick: false,
+				HTMLAttributes: { rel: "noopener noreferrer nofollow" }
+			} }),
+			TextStyle,
+			Color,
+			TextAlign.configure({ types: ["heading", "paragraph"] }),
+			Image.configure({
+				inline: false,
+				allowBase64: true
+			}),
+			Placeholder.configure({ placeholder })
+		],
+		editorProps: { attributes: {
+			"aria-label": ariaLabel,
+			role: "textbox",
+			"aria-multiline": "true",
+			class: cn("tiptap focus:outline-none", tokens.text)
+		} },
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		onUpdate: ({ editor: instance }) => onChange?.(instance.getHTML())
+	});
+	React.useImperativeHandle(ref, () => ({
+		focus: () => {
+			editor?.commands.focus();
+		},
+		blur: () => {
+			editor?.commands.blur();
+		}
+	}), [editor]);
+	React.useEffect(() => {
+		editor?.setEditable(!disabled);
+	}, [editor, disabled]);
+	React.useEffect(() => {
+		const dom = editor?.view.dom;
+		if (!dom) return;
+		if (invalid) dom.setAttribute("aria-invalid", "true");
+		else dom.removeAttribute("aria-invalid");
+	}, [editor, invalid]);
+	React.useEffect(() => {
+		if (!editor || !id || disabled) return;
+		const selector = `label[for="${CSS.escape(id)}"]`;
+		const handleLabelClick = (event) => {
+			if (event.target?.closest(selector)) editor.commands.focus();
+		};
+		document.addEventListener("click", handleLabelClick);
+		return () => document.removeEventListener("click", handleLabelClick);
+	}, [
+		editor,
+		id,
+		disabled
+	]);
+	React.useEffect(() => {
+		if (!editor || value === void 0) return;
+		if (value !== editor.getHTML()) editor.commands.setContent(value, { emitUpdate: false });
+	}, [editor, value]);
+	const s = useEditorState({
+		editor,
+		selector: ({ editor: instance }) => {
+			if (!instance) return EMPTY_STATE;
+			return {
+				block: instance.isActive("heading", { level: 1 }) ? "h1" : instance.isActive("heading", { level: 2 }) ? "h2" : instance.isActive("heading", { level: 3 }) ? "h3" : "paragraph",
+				align: instance.isActive({ textAlign: "center" }) ? "center" : instance.isActive({ textAlign: "right" }) ? "right" : instance.isActive({ textAlign: "justify" }) ? "justify" : "left",
+				color: instance.getAttributes("textStyle").color ?? "",
+				linkHref: instance.getAttributes("link").href ?? "",
+				isBold: instance.isActive("bold"),
+				isItalic: instance.isActive("italic"),
+				isUnderline: instance.isActive("underline"),
+				isBulletList: instance.isActive("bulletList"),
+				isOrderedList: instance.isActive("orderedList"),
+				isBlockquote: instance.isActive("blockquote"),
+				isCodeBlock: instance.isActive("codeBlock"),
+				isLink: instance.isActive("link"),
+				canUndo: instance.can().undo(),
+				canRedo: instance.can().redo()
+			};
+		}
+	}) ?? EMPTY_STATE;
+	function setBlock(next) {
+		if (!editor) return;
+		const chain = editor.chain().focus();
+		if (next === "paragraph") chain.setParagraph().run();
+		else chain.toggleHeading({ level: Number(next[1]) }).run();
+	}
+	function setAlign(next) {
+		editor?.chain().focus().setTextAlign(next).run();
+	}
+	function setColor(next) {
+		if (!editor) return;
+		if (next) editor.chain().focus().setColor(next).run();
+		else editor.chain().focus().unsetColor().run();
+	}
+	function applyLink(href) {
+		editor?.chain().focus().extendMarkRange("link").setLink({ href }).run();
+	}
+	function removeLink() {
+		editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+	}
+	function insertImage(src) {
+		editor?.chain().focus().setImage({ src }).run();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		"data-slot": "rich-text-editor",
+		"data-disabled": disabled || void 0,
+		"data-focused": focused || void 0,
+		"data-invalid": invalid || void 0,
+		"aria-invalid": invalid || void 0,
+		className: cn("group/editor flex w-full flex-col overflow-hidden rounded-2xl border bg-surface text-fg-primary shadow-1 transition-[border-color,box-shadow]", disabled ? "border-line-subtle opacity-60" : invalid ? focused ? "border-line-danger ring-2 ring-line-danger/35" : "border-line-danger" : focused ? "border-line-focus ring-2 ring-line-focus/35" : "border-line hover:border-line-strong", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				role: "toolbar",
+				"aria-label": "Formatting",
+				"aria-orientation": "horizontal",
+				className: cn("flex flex-wrap items-center bg-surface-raised", tokens.toolbarPad, tokens.toolbarGap),
+				children: [
+					/* @__PURE__ */ jsx(BlockControl, {
+						tokens,
+						value: s.block,
+						disabled,
+						onChange: setBlock
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Bold",
+						active: s.isBold,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleBold().run(),
+						children: /* @__PURE__ */ jsx(Bold, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Italic",
+						active: s.isItalic,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleItalic().run(),
+						children: /* @__PURE__ */ jsx(Italic, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Underline",
+						active: s.isUnderline,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleUnderline().run(),
+						children: /* @__PURE__ */ jsx(Underline, {})
+					}),
+					/* @__PURE__ */ jsx(ColorControl, {
+						tokens,
+						value: s.color,
+						disabled,
+						onChange: setColor
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Numbered list",
+						active: s.isOrderedList,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+						children: /* @__PURE__ */ jsx(ListOrdered, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Bullet list",
+						active: s.isBulletList,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleBulletList().run(),
+						children: /* @__PURE__ */ jsx(List, {})
+					}),
+					/* @__PURE__ */ jsx(AlignControl, {
+						tokens,
+						value: s.align,
+						disabled,
+						onChange: setAlign
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+					/* @__PURE__ */ jsx(LinkControl, {
+						tokens,
+						active: s.isLink,
+						currentHref: s.linkHref,
+						disabled,
+						onApply: applyLink,
+						onRemove: removeLink
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Quote",
+						active: s.isBlockquote,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleBlockquote().run(),
+						children: /* @__PURE__ */ jsx(Quote, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Code block",
+						active: s.isCodeBlock,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
+						children: /* @__PURE__ */ jsx(Code2, {})
+					}),
+					/* @__PURE__ */ jsx(ImageControl, {
+						tokens,
+						disabled,
+						onInsert: insertImage
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Undo",
+						disabled: disabled || !s.canUndo,
+						onClick: () => editor?.chain().focus().undo().run(),
+						children: /* @__PURE__ */ jsx(Undo2, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Redo",
+						disabled: disabled || !s.canRedo,
+						onClick: () => editor?.chain().focus().redo().run(),
+						children: /* @__PURE__ */ jsx(Redo2, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { className: "h-px w-full shrink-0 bg-line-subtle" }),
+			/* @__PURE__ */ jsx(EditorContent, {
+				editor,
+				className: cn("gdt-rich-text min-w-0 flex-1 overflow-y-auto", tokens.content, tokens.contentPad)
+			})
+		]
+	});
+});
+//#endregion
+export { RichTextEditor };