@povio/ui 2.1.14 → 2.1.15

package/dist/Table.js

@@ -0,0 +1,248 @@
+import { ChevronDownIcon } from "./ChevronDown.js";
+import { ChevronUpIcon } from "./ChevronUp.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { CellText } from "./CellText.js";
+import { DragIcon } from "./Drag.js";
+import { HeaderText } from "./HeaderText.js";
+import { useTableNav } from "./useTableNav.js";
+import { tableData, tableHeadData, tableHeadRow, tableRow } from "./table.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useCallback, useMemo, useRef, useState } from "react";
+import i18next from "i18next";
+import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+var CustomCellContext = (context) => {
+	return {
+		...context,
+		original: context.row.original,
+		data: context.row.original,
+		value: context.getValue()
+	};
+};
+var CellRender = (Comp, props) => {
+	const rendered = typeof Comp === "function" ? Comp(props) : Comp;
+	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
+};
+const RowDragHandleCell = ({ rowId }) => {
+	const { attributes, listeners } = useSortable({ id: rowId });
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		...attributes,
+		...listeners,
+		className: "cursor-move p-1",
+		label: "Drag handle",
+		icon: DragIcon
+	});
+};
+var AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
+var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCva, tableDataCva, hasOnClick,...props }) => {
+	const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.id });
+	return /* @__PURE__ */ jsx("tr", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition,
+			opacity: isDragging ? .8 : 1,
+			zIndex: isDragging ? 1 : 0,
+			position: "relative"
+		},
+		"data-clickable": hasOnClick,
+		"data-selected": row.getIsSelected() || void 0,
+		className: clsx(tableRowCva(props)),
+		onClick: () => {
+			row.toggleSelected();
+			onRowClick?.(row.original);
+		},
+		onDoubleClick: () => onDoubleClick?.(row.original),
+		children: row.getVisibleCells().map((cell, cellIndex) => {
+			const columnMeta = cell.column.columnDef.meta ?? {};
+			return /* @__PURE__ */ jsx("td", {
+				tabIndex: -1,
+				className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
+				children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+			}, cell.id);
+		})
+	});
+};
+const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const tableRowCva = uiStyle?.table?.rowCva ?? tableRow;
+	const tableHeadRowCva = uiStyle?.table?.headRowCva ?? tableHeadRow;
+	const tableHeadDataCva = uiStyle?.table?.headDataCva ?? tableHeadData;
+	const tableDataCva = uiStyle?.table?.dataCva ?? tableData;
+	const ref = useRef(null);
+	const { listeners } = useTableNav();
+	const getCoreRowModelCallback = useCallback(getCoreRowModel, []);
+	const getSortedRowModelCallback = useCallback(getSortedRowModel, []);
+	const getPaginationRowModelCallback = useCallback(getPaginationRowModel, []);
+	const data = useMemo(() => items ?? [], [items]);
+	const [internalSelectedRows, setInternalSelectedRows] = useState({});
+	const { rowSelection, handleRowSelectionChange } = useMemo(() => {
+		const hasExternalRowSelection = defaultSelectedRows !== void 0 && onRowSelectionChange !== void 0;
+		return {
+			rowSelection: hasExternalRowSelection ? defaultSelectedRows : internalSelectedRows,
+			handleRowSelectionChange: hasExternalRowSelection ? onRowSelectionChange : setInternalSelectedRows
+		};
+	}, [
+		defaultSelectedRows,
+		onRowSelectionChange,
+		internalSelectedRows
+	]);
+	const baseColumns = useMemo(() => typeof columns === "function" ? columns(i18next.t) : columns, [columns]);
+	const table = useReactTable({
+		data,
+		columns: useMemo(() => {
+			if (enableDragDrop && getRowId) return [{
+				id: "drag-handle",
+				header: "",
+				meta: { width: "w-12" },
+				cell: AutoDragHandleCell,
+				enableSorting: false
+			}, ...baseColumns];
+			return baseColumns;
+		}, [
+			baseColumns,
+			enableDragDrop,
+			getRowId
+		]),
+		state: {
+			sorting,
+			columnOrder,
+			columnVisibility,
+			rowSelection
+		},
+		rowCount: items.length,
+		getCoreRowModel: getCoreRowModelCallback(),
+		getSortedRowModel: getSortedRowModelCallback(),
+		getPaginationRowModel: getPaginationRowModelCallback(),
+		manualPagination: true,
+		onColumnOrderChange: setColumnOrder,
+		onColumnVisibilityChange: setColumnVisibility,
+		onSortingChange: setSorting,
+		onRowSelectionChange: handleRowSelectionChange,
+		manualSorting: true,
+		autoResetPageIndex: false,
+		autoResetExpanded: false,
+		defaultColumn: { sortDescFirst: true },
+		enableRowSelection,
+		enableMultiRowSelection,
+		getRowId: getRowId ? (row) => String(getRowId(row)) : void 0
+	});
+	const dataIds = useMemo(() => {
+		if (!enableDragDrop || !getRowId) return [];
+		return data.map((item) => getRowId(item));
+	}, [
+		data,
+		enableDragDrop,
+		getRowId
+	]);
+	const handleDragEnd = useCallback((event) => {
+		const { active, over } = event;
+		if (!active || !over || active.id === over.id) return;
+		if (getRowId && (onReorder || onDragEnd)) {
+			if (onReorder) {
+				const oldIndex = items.findIndex((item) => getRowId(item) === active.id);
+				const newIndex = items.findIndex((item) => getRowId(item) === over.id);
+				if (oldIndex !== -1 && newIndex !== -1) onReorder(arrayMove(items, oldIndex, newIndex));
+			}
+			onDragEnd?.(event);
+		}
+	}, [
+		onDragEnd,
+		onReorder,
+		items,
+		getRowId
+	]);
+	const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+	const selectedRows = table.getSelectedRowModel().rows;
+	const columnCount = table.getHeaderGroups()[0].headers.length;
+	const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
+	const hasOnClick = !!onRowClick || !!onDoubleClick;
+	const tableElement = /* @__PURE__ */ jsxs("table", {
+		className: clsx("w-full", className),
+		...listeners,
+		children: [/* @__PURE__ */ jsx("thead", {
+			className: "sticky top-0 z-10 bg-elevation-fill-default-1 shadow-2",
+			children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
+				className: clsx(tableHeadRowCva({})),
+				children: headerGroup.headers.filter((header) => {
+					if (isAnyRowSelected && header.index > 0) return false;
+					return header.column.getIsVisible();
+				}).map((header, index) => {
+					const columnMeta = header.column.columnDef.meta ?? {};
+					return /* @__PURE__ */ jsx("th", {
+						colSpan: isAnyRowSelected ? columnCount : header.colSpan,
+						tabIndex: -1,
+						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
+						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": "Sort column",
+							className: clsx("flex select-none items-center gap-1 text-text-default-1", header.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+							onClick: header.column.getToggleSortingHandler(),
+							children: [typeof header.column.columnDef.header === "function" ? flexRender(header.column.columnDef.header, header.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header.column.columnDef.header }), {
+								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
+									width: 18,
+									height: 18
+								}),
+								desc: /* @__PURE__ */ jsx(ChevronDownIcon, {
+									width: 18,
+									height: 18
+								})
+							}[header.column.getIsSorted()] ?? null]
+						})
+					}, header.id);
+				})
+			}, headerGroup.id))
+		}), /* @__PURE__ */ jsx("tbody", {
+			ref,
+			className: "relative",
+			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
+				items: dataIds,
+				strategy: verticalListSortingStrategy,
+				children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(DraggableRow, {
+					row,
+					showCellBorder,
+					onRowClick,
+					onDoubleClick,
+					tableRowCva,
+					tableHeadDataCva,
+					tableDataCva,
+					hasOnClick,
+					...props
+				}, row.id))
+			}) : table.getRowModel().rows.map((row) => {
+				return /* @__PURE__ */ jsx("tr", {
+					className: clsx(tableRowCva({ ...props })),
+					onClick: () => {
+						row.toggleSelected();
+						onRowClick?.(row.original);
+					},
+					onDoubleClick: () => onDoubleClick?.(row.original),
+					"data-clickable": hasOnClick,
+					"data-selected": row.getIsSelected() || void 0,
+					children: row.getVisibleCells().map((cell, cellIndex) => {
+						const columnMeta = cell.column.columnDef.meta ?? {};
+						return /* @__PURE__ */ jsx("td", {
+							tabIndex: -1,
+							className: clsx(tableDataCva({ hasRightBorder: cellIndex > 0 && showCellBorder }), columnMeta.cellClass, columnMeta.width),
+							children: CellRender(cell.column.columnDef.cell, CustomCellContext(cell.getContext()))
+						}, cell.id);
+					})
+				}, row.id);
+			})
+		})]
+	});
+	if (enableDragDrop) return /* @__PURE__ */ jsx(DndContext, {
+		collisionDetection: closestCenter,
+		modifiers: [restrictToVerticalAxis],
+		onDragEnd: handleDragEnd,
+		sensors,
+		children: tableElement
+	});
+	return tableElement;
+};
+export { Table };

package/dist/Tag.js

@@ -0,0 +1,42 @@
+import { CloseIcon } from "./Close.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { TooltipEllipsis } from "./TooltipEllipsis.js";
+import { ns } from "./i18n.js";
+import { tag } from "./tag.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const Tag = ({ className, children, dismissable, isDisabled, onDismiss,...props }) => {
+	const tagCva = UIStyle.useConfig()?.tag?.cva ?? tag;
+	const { t } = useTranslation("ui");
+	const buttonProps = {
+		isDisabled,
+		onPress: onDismiss,
+		label: t(($) => $.ui.tag.dismiss),
+		...props
+	};
+	return /* @__PURE__ */ jsx(TooltipEllipsis, {
+		text: children,
+		children: (onContentRef) => /* @__PURE__ */ jsxs("div", {
+			className: tagCva({
+				...props,
+				className: clsx("pointer-events-none", className)
+			}),
+			children: [/* @__PURE__ */ jsx(Typography, {
+				ref: onContentRef,
+				variant: "default",
+				size: "label-2",
+				as: "span",
+				className: "truncate",
+				children
+			}), dismissable && /* @__PURE__ */ jsx(Button, {
+				...buttonProps,
+				className: "pointer-events-auto shrink-0",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+			})]
+		})
+	});
+};
+export { Tag };

package/dist/TextAlignSelect.js

@@ -0,0 +1,44 @@
+import { AlignCenterIcon } from "./AlignCenter.js";
+import { AlignLeftIcon } from "./AlignLeft.js";
+import { AlignLeftRightIcon } from "./AlignLeftRight.js";
+import { AlignRightIcon } from "./AlignRight.js";
+import { ns } from "./i18n.js";
+import { Select } from "./Select.js";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const TextAlignSelect = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "textAlign")) return null;
+	const onChange = (val) => {
+		if (val) editor.chain().focus().setTextAlign(val).run();
+		else editor.chain().focus().unsetTextAlign().run();
+	};
+	const getItem = (id, Icon) => {
+		return {
+			id,
+			label: t(($) => $.ui.textEditor.textAlign[id]),
+			content: /* @__PURE__ */ jsx(Icon, { className: "size-6" }),
+			isActive: editor.isActive({ textAlign: id }),
+			can: editor.can().setTextAlign(id)
+		};
+	};
+	const enabledItems = [
+		getItem("left", AlignLeftIcon),
+		getItem("center", AlignCenterIcon),
+		getItem("right", AlignRightIcon),
+		getItem("justify", AlignLeftRightIcon)
+	].filter((item) => item.can);
+	return /* @__PURE__ */ jsx(Select, {
+		as: "inline",
+		label: t(($) => $.ui.textEditor.textAlign.label),
+		placeholder: t(($) => $.ui.textEditor.textAlign.label),
+		hideLabel: true,
+		ignoreTriggerWidth: true,
+		showSelectionContent: true,
+		onChange,
+		items: enabledItems,
+		value: enabledItems.find((item) => item.isActive)?.id || "left",
+		isDisabled: !editor.isEditable
+	});
+};
+export { TextAlignSelect };

package/dist/TextArea.js

@@ -0,0 +1,120 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { inputSize, useInputCva } from "./input.cva.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { InputClear } from "./InputClear.js";
+import { FormField } from "./FormField.js";
+import { TooltipWrapper } from "./TooltipWrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { TextArea } from "react-aria-components";
+import { useRef } from "react";
+import { useTextField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+var TextAreaBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputCva = useInputCva();
+	const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
+	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable,...rest } = props;
+	const textFieldRef = useRef(null);
+	const { labelProps, inputProps } = useTextField({
+		...rest,
+		label,
+		isDisabled,
+		isInvalid: !!error,
+		isRequired,
+		value,
+		onChange,
+		onBlur
+	}, textFieldRef);
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const showClear = isClearable && value != null && value !== "";
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("w-full", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "group/text-area relative h-full",
+				"data-text-area": true,
+				children: [
+					as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						...headerProps
+					}),
+					/* @__PURE__ */ jsx(TextArea, {
+						...inputProps,
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						"data-is-empty": value?.trim() === "" || value === null || value === void 0 || void 0,
+						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						className: inputCva({
+							variant,
+							as,
+							...rest,
+							className: clsx("block h-full min-h-8", inputClassName)
+						}),
+						ref
+					}),
+					showClear && /* @__PURE__ */ jsx("span", {
+						className: clsx("absolute top-0 right-0", inputSizeCva({ size: "default" })),
+						children: /* @__PURE__ */ jsx(InputClear, { onClear: () => {
+							onChange?.("");
+							onBlur?.(null);
+						} })
+					})
+				]
+			})
+		})
+	});
+};
+const TextArea$1 = (props) => {
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextAreaBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value ?? "",
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(TextAreaBase, { ...props });
+};
+export { TextArea$1 as TextArea };

package/dist/TextButton.js

@@ -0,0 +1,13 @@
+import { Button } from "./Button.js";
+import { jsx } from "react/jsx-runtime";
+const TextButton = ({ children,...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		variant: "text",
+		size: "none",
+		width: props.width ?? "hug",
+		disableTooltip: props.disableTooltip,
+		children
+	});
+};
+export { TextButton };

package/dist/TextColor.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const TextColorIcon = ({ textColor,...props }) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M7.40305 17C7.11588 17 6.8903 16.8807 6.7263 16.6423C6.56213 16.4039 6.53072 16.1495 6.63205 15.879L11.282 4.01925C11.3397 3.86292 11.4365 3.73725 11.5723 3.64225C11.7083 3.54742 11.8577 3.5 12.0205 3.5H12.651C12.8242 3.5 12.9762 3.54742 13.107 3.64225C13.2377 3.73725 13.3319 3.86292 13.3896 4.01925L18.0453 15.8655C18.1466 16.1423 18.1136 16.4007 17.9463 16.6405C17.779 16.8802 17.5517 17 17.2646 17C17.0891 17 16.9269 16.951 16.778 16.853C16.6294 16.7548 16.523 16.6179 16.4588 16.4423L15.3205 13.3808H9.34355L8.1743 16.4672C8.11013 16.6366 8.00947 16.7677 7.8723 16.8605C7.73513 16.9535 7.57872 17 7.40305 17ZM9.8703 11.9H14.7628L12.3858 5.6H12.2666L9.8703 11.9Z",
+		fill: "currentColor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M3.09457 23.741C3.2669 23.9135 3.48198 23.9998 3.73982 23.9998H20.9318C21.1896 23.9998 21.4047 23.9135 21.5771 23.741C21.7496 23.5687 21.8358 23.3537 21.8358 23.096V21.1728C21.8358 20.9151 21.7496 20.7001 21.5771 20.5278C21.4047 20.3553 21.1896 20.269 20.9318 20.269H3.73982C3.48198 20.269 3.2669 20.3553 3.09457 20.5278C2.92207 20.7001 2.83582 20.9151 2.83582 21.1728V23.096C2.83582 23.3537 2.92207 23.5687 3.09457 23.741Z",
+		fill: textColor || "black"
+	})]
+});
+export { TextColorIcon };

package/dist/TextColorSelect.js

@@ -0,0 +1,22 @@
+import { TextColorIcon } from "./TextColor.js";
+import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
+import { defaultColors } from "./textEditor.types.js";
+import { jsx } from "react/jsx-runtime";
+const TextColorSelect = ({ editor }) => {
+	if (!editor.extensionManager.extensions.some((extension) => extension.name === "color")) return null;
+	const onChange = (color) => {
+		editor.chain().focus().setColor(color).run();
+	};
+	const textColor = editor.getAttributes("textStyle").color || "#000000";
+	return /* @__PURE__ */ jsx(ColorPickerDropdown, {
+		value: textColor,
+		onChange,
+		colors: defaultColors,
+		isDisabled: !editor.isEditable,
+		children: /* @__PURE__ */ jsx(TextColorIcon, {
+			className: "size-6",
+			textColor
+		})
+	});
+};
+export { TextColorSelect };

package/dist/TextEditor.js

@@ -0,0 +1,143 @@
+import { uiOutlineClass } from "./outline.clsx.js";
+import { isEqual } from "./isEqual.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { FormField } from "./FormField.js";
+import { TextEditorToolbar } from "./TextEditorToolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { useFocusVisible, useFocusWithin, useHover, useLabel } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { Color } from "@tiptap/extension-color";
+import { Highlight } from "@tiptap/extension-highlight";
+import { Link } from "@tiptap/extension-link";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Underline } from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+var extensions = [
+	StarterKit.configure({ heading: { levels: [
+		1,
+		2,
+		3
+	] } }),
+	TextAlign.configure({ types: ["heading", "paragraph"] }),
+	Underline,
+	TextStyle,
+	Color,
+	Highlight.configure({ multicolor: true }),
+	Link.configure({
+		openOnClick: false,
+		defaultProtocol: "https"
+	})
+];
+var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, onChange, onBlur }) => {
+	const contentRef = useRef(null);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	const { isFocusVisible } = useFocusVisible();
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const { labelProps, fieldProps } = useLabel({ label });
+	const editor = useEditor({
+		extensions: [...extensions, Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder })],
+		editorProps: { attributes: { class: clsx("min-h-40 rounded-b-sm p-2 outline-none", editorClassName) } },
+		onUpdate: (event) => {
+			onChange?.({
+				json: event.editor.getJSON(),
+				html: event.editor.getHTML()
+			});
+		},
+		immediatelyRender: false,
+		editable: !isDisabled,
+		onBlur
+	}, [isDisabled, editorClassName]);
+	useEffect(() => {
+		const content = value?.json ?? null;
+		if (editor) {
+			if (!isEqual(content, editor.getJSON())) editor.commands.setContent(content);
+		} else if (!isEqual(content, contentRef.current)) contentRef.current = content ?? null;
+	}, [value]);
+	useEffect(() => {
+		if (editor && contentRef.current) {
+			editor.commands.setContent(contentRef.current);
+			contentRef.current = null;
+		}
+	}, [editor]);
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		ref,
+		as,
+		labelProps,
+		className: clsx("w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover"),
+			"data-text-editor": true,
+			"data-rac": "",
+			"data-hovered": isHovered || void 0,
+			"data-disabled": isDisabled || void 0,
+			"data-focus-within": isFocused || void 0,
+			"data-focus-visible": isFocused && isFocusVisible || void 0,
+			"data-is-filled": !editor?.isEmpty,
+			...hoverProps,
+			...focusWithinProps,
+			...fieldProps,
+			children: [/* @__PURE__ */ jsx(TextEditorToolbar, { editor }), /* @__PURE__ */ jsxs("div", {
+				className: clsx("relative overflow-auto", as === "floating" && "pt-3"),
+				children: [as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}), /* @__PURE__ */ jsx(EditorContent, {
+					editor,
+					placeholder: as === "floating" ? "" : placeholder,
+					className: clsx(as === "floating" && editor?.isEmpty && "[&_p:before]:opacity-0")
+				})]
+			})]
+		})
+	});
+};
+const TextEditor = (props) => {
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field }) => /* @__PURE__ */ jsx(TextEditorBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || props.isDisabled
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
+};
+export { TextEditor };

package/dist/TextEditorToolbar.js

@@ -0,0 +1,30 @@
+import { HyperlinkAction } from "./HyperlinkAction.js";
+import { TextAlignSelect } from "./TextAlignSelect.js";
+import { TextColorSelect } from "./TextColorSelect.js";
+import { TextHighlightSelect } from "./TextHighlightSelect.js";
+import { TextListActions } from "./TextListActions.js";
+import { TextMarksActions } from "./TextMarksActions.js";
+import { TextStyleSelect } from "./TextStyleSelect.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TextEditorToolbar = ({ editor }) => {
+	if (!editor) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-wrap items-center gap-x-7 gap-y-1 border-elevation-outline-default-2 border-b border-solid p-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx(TextStyleSelect, { editor }), /* @__PURE__ */ jsx(TextAlignSelect, { editor })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx(TextColorSelect, { editor }), /* @__PURE__ */ jsx(TextHighlightSelect, { editor })]
+				})]
+			}),
+			/* @__PURE__ */ jsx(TextMarksActions, { editor }),
+			/* @__PURE__ */ jsx(TextListActions, { editor }),
+			/* @__PURE__ */ jsx(HyperlinkAction, { editor })
+		]
+	});
+};
+export { TextEditorToolbar };