import { cn } from "./index3.js";
import { Separator } from "./index7.js";
import { Label } from "./index10.js";
import { Textarea } from "./index39.js";
import { Toggle } from "./index396.js";
import { Bold, ChevronDown, Expand, HelpCircle, Italic, Link, List, MoreHorizontal, Paperclip, Redo2, Sparkles, Table, Type, Underline, Undo2 } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/molecules/forms/RichTextarea/RichTextarea.tsx
var ToolbarButton = React.forwardRef(({ icon, pressed, hasDropdown, className, ...props }, ref) => {
	if (hasDropdown) return /* @__PURE__ */ jsxs("button", {
		ref,
		type: "button",
		"aria-haspopup": "true",
		className: cn("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", pressed && "bg-muted", className),
		...props,
		children: [/* @__PURE__ */ jsx("span", {
			className: "[&>svg]:size-4",
			children: icon
		}), /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground transition-transform duration-200 ease-smooth motion-reduce:transition-none group-hover/dropdown:translate-y-0.5" })]
	});
	return /* @__PURE__ */ jsx(Toggle, {
		ref,
		pressed,
		size: "sm",
		className,
		disabled: props.disabled,
		onClick: props.onClick,
		"aria-label": props["aria-label"],
		children: /* @__PURE__ */ jsx("span", {
			className: "[&>svg]:size-5",
			children: icon
		})
	});
});
ToolbarButton.displayName = "ToolbarButton";
function ToolbarDivider() {
	return /* @__PURE__ */ jsx(Separator, {
		orientation: "vertical",
		className: "mx-0.5 h-5 w-px bg-surface-2"
	});
}
function RichTextareaToolbar({ className, onAiAssist, onUndo, onRedo, onExpand, showAiAssist = true, showExpand = true, disabled, rtl, formatting = {}, onFormatChange }) {
	return /* @__PURE__ */ jsxs("div", {
		role: "toolbar",
		"aria-label": "Formatting toolbar",
		className: cn("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", rtl && "flex-row-reverse", className),
		dir: rtl ? "rtl" : "ltr",
		children: [
			showAiAssist && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Sparkles, { className: "size-5 text-primary transition-transform duration-300 ease-smooth motion-reduce:transition-none group-hover/toggle:rotate-12" }),
				onClick: onAiAssist,
				disabled,
				"aria-label": "AI Assist"
			}), /* @__PURE__ */ jsx(ToolbarDivider, {})] }),
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-2",
				children: [/* @__PURE__ */ jsx(ToolbarButton, {
					icon: /* @__PURE__ */ jsx(Undo2, {}),
					onClick: onUndo,
					disabled,
					"aria-label": "Undo"
				}), /* @__PURE__ */ jsx(ToolbarButton, {
					icon: /* @__PURE__ */ jsx(Redo2, {}),
					onClick: onRedo,
					disabled,
					"aria-label": "Redo"
				})]
			}),
			/* @__PURE__ */ jsx(ToolbarDivider, {}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Type, {}),
				hasDropdown: true,
				disabled,
				"aria-label": "Text formatting"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsxs("span", {
					className: "relative",
					children: [/* @__PURE__ */ jsx("span", {
						className: "text-sm font-bold",
						children: "A"
					}), /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-foreground" })]
				}),
				hasDropdown: true,
				disabled,
				"aria-label": "Text color"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Bold, {}),
				pressed: formatting.bold,
				onClick: () => onFormatChange?.("bold"),
				disabled,
				"aria-label": "Bold"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Italic, {}),
				pressed: formatting.italic,
				onClick: () => onFormatChange?.("italic"),
				disabled,
				"aria-label": "Italic"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Underline, {}),
				pressed: formatting.underline,
				onClick: () => onFormatChange?.("underline"),
				disabled,
				"aria-label": "Underline"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(List, {}),
				hasDropdown: true,
				disabled,
				"aria-label": "List options"
			}),
			/* @__PURE__ */ jsx(ToolbarDivider, {}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Link, {}),
				disabled,
				"aria-label": "Insert link"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Table, {}),
				hasDropdown: true,
				disabled,
				"aria-label": "Table options"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Paperclip, {}),
				disabled,
				"aria-label": "Attach file"
			}),
			/* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(MoreHorizontal, {}),
				disabled,
				"aria-label": "More options"
			}),
			showExpand && /* @__PURE__ */ jsx(ToolbarButton, {
				icon: /* @__PURE__ */ jsx(Expand, { className: "transition-transform duration-200 ease-smooth motion-reduce:transition-none group-hover/toggle:scale-110" }),
				onClick: onExpand,
				disabled,
				"aria-label": "Expand",
				className: "ms-auto"
			})
		]
	});
}
var RichTextarea = React.forwardRef(({ label, hint, error, required, showHelpIcon, onHelpClick, showCharCount, maxLength = 3e3, charCount, showResizeHandle = true, showAiAssist = true, showExpand = true, onAiAssist, onUndo, onRedo, onExpand, rtl, formatting, onFormatChange, className, disabled, id, value, defaultValue, onChange, ...props }, ref) => {
	const generatedId = React.useId();
	const textareaId = id || generatedId;
	const hintId = `${textareaId}-hint`;
	const errorId = `${textareaId}-error`;
	const [internalValue, setInternalValue] = React.useState(defaultValue?.toString() || "");
	const currentValue = value !== void 0 ? value.toString() : internalValue;
	const currentCharCount = charCount ?? currentValue.length;
	const handleChange = (e) => {
		if (value === void 0) setInternalValue(e.target.value);
		onChange?.(e);
	};
	const isDestructive = !!error;
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex flex-col gap-1.5 w-full", rtl && "text-right"),
		dir: rtl ? "rtl" : "ltr",
		children: [
			label && /* @__PURE__ */ jsxs("div", {
				className: cn("flex items-center gap-0.5", rtl && "flex-row-reverse"),
				children: [
					/* @__PURE__ */ jsx(Label, {
						htmlFor: textareaId,
						className: "text-sm font-medium leading-5 text-secondary-foreground",
						children: label
					}),
					required && /* @__PURE__ */ jsx("span", {
						className: "text-sm font-medium leading-5 text-destructive",
						"aria-hidden": "true",
						children: "*"
					}),
					showHelpIcon && /* @__PURE__ */ jsx("button", {
						type: "button",
						onClick: onHelpClick,
						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__ */ jsx(HelpCircle, { className: "size-4" })
					})
				]
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "group/editor",
				children: [/* @__PURE__ */ jsx(RichTextareaToolbar, {
					onAiAssist,
					onUndo,
					onRedo,
					onExpand,
					showAiAssist,
					showExpand,
					disabled,
					rtl,
					formatting,
					onFormatChange
				}), /* @__PURE__ */ jsx(Textarea, {
					ref,
					id: textareaId,
					value,
					defaultValue,
					onChange: handleChange,
					disabled,
					"aria-invalid": isDestructive,
					"aria-required": required || void 0,
					"aria-describedby": error ? errorId : hint ? hintId : void 0,
					maxLength,
					className: cn("min-h-30 rounded-t-none border-t-0", isDestructive && "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20", !showResizeHandle && "resize-none", rtl && "text-right", className),
					dir: rtl ? "rtl" : "ltr",
					...props
				})]
			}),
			/* @__PURE__ */ jsxs("div", {
				className: cn("flex items-start gap-4 text-sm leading-5", rtl ? "flex-row-reverse" : "justify-between"),
				children: [/* @__PURE__ */ jsx("div", {
					className: "flex-1",
					children: error ? /* @__PURE__ */ jsx("p", {
						id: errorId,
						className: "text-destructive animate-in fade-in-0 slide-in-from-top-1 duration-200 motion-reduce:animate-none",
						children: error
					}) : hint ? /* @__PURE__ */ jsx("p", {
						id: hintId,
						className: "text-muted-foreground",
						children: hint
					}) : null
				}), showCharCount && /* @__PURE__ */ jsxs("span", {
					role: currentCharCount >= maxLength * .9 ? "status" : void 0,
					"aria-live": currentCharCount >= maxLength * .9 ? "polite" : "off",
					className: cn("whitespace-nowrap transition-colors duration-300 ease-out motion-reduce:transition-none", currentCharCount >= maxLength * .9 ? "text-destructive font-medium" : currentCharCount >= maxLength * .75 ? "text-secondary-foreground" : "text-muted-foreground", rtl && "text-start"),
					children: [
						currentCharCount,
						"/",
						maxLength
					]
				})]
			})
		]
	});
});
RichTextarea.displayName = "RichTextarea";
//#endregion
export { RichTextarea, RichTextareaToolbar, ToolbarButton, ToolbarDivider };

//# sourceMappingURL=index397.js.map