@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/form/components/fields/rich-editor.js

@@ -1,16 +1,17 @@
 import { cn } from "../../../lib/utils.js";
-import { getStringProp } from "../../../core/props.js";
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
 import { useFormContext } from "../context.js";
+import { useFieldScope } from "../field-scope.js";
 import { useFormValue } from "../values.js";
-import { useDependentField } from "../use-dependent-field.js";
 import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
 import { useFieldCommit } from "../use-field-commit.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronRight, Code, Columns3, Heading1, Heading2, Heading3, Highlighter, Italic, Link, List, ListOrdered, Minus, Quote, Rows3, Smile, Strikethrough, Table, Trash2, Underline } from "lucide-react";
 import { Details, DetailsContent, DetailsSummary } from "@tiptap/extension-details";
 import { Highlight } from "@tiptap/extension-highlight";
-import { Link as Link$1 } from "@tiptap/extension-link";
+import { Link } from "@tiptap/extension-link";
 import { TableKit } from "@tiptap/extension-table";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { EditorContent, useEditor } from "@tiptap/react";
@@ -18,113 +19,131 @@ import { StarterKit } from "@tiptap/starter-kit";
 //#region resources/js/form/components/fields/rich-editor.tsx
 var toolbar = [
 	{
-		icon: Bold,
+		icon: "bold",
+		key: "bold",
 		label: "Bold",
 		isActive: (e) => e.isActive("bold"),
 		run: (e) => e.chain().focus().toggleBold().run()
 	},
 	{
-		icon: Italic,
+		icon: "italic",
+		key: "italic",
 		label: "Italic",
 		isActive: (e) => e.isActive("italic"),
 		run: (e) => e.chain().focus().toggleItalic().run()
 	},
 	{
-		icon: Strikethrough,
+		icon: "strikethrough",
+		key: "strikethrough",
 		label: "Strikethrough",
 		isActive: (e) => e.isActive("strike"),
 		run: (e) => e.chain().focus().toggleStrike().run()
 	},
 	{
-		icon: Underline,
+		icon: "underline",
+		key: "underline",
 		label: "Underline",
 		isActive: (e) => e.isActive("underline"),
 		run: (e) => e.chain().focus().toggleUnderline().run()
 	},
 	{
-		icon: Highlighter,
+		icon: "highlighter",
+		key: "highlight",
 		label: "Highlight",
 		isActive: (e) => e.isActive("highlight"),
 		run: (e) => e.chain().focus().toggleHighlight().run()
 	},
 	"separator",
 	{
-		icon: Heading1,
+		icon: "heading-1",
+		key: "heading-1",
 		label: "Heading 1",
 		isActive: (e) => e.isActive("heading", { level: 1 }),
 		run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run()
 	},
 	{
-		icon: Heading2,
+		icon: "heading-2",
+		key: "heading-2",
 		label: "Heading 2",
 		isActive: (e) => e.isActive("heading", { level: 2 }),
 		run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
 	},
 	{
-		icon: Heading3,
+		icon: "heading-3",
+		key: "heading-3",
 		label: "Heading 3",
 		isActive: (e) => e.isActive("heading", { level: 3 }),
 		run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run()
 	},
 	"separator",
 	{
-		icon: List,
+		icon: "list",
+		key: "bullet-list",
 		label: "Bullet list",
 		isActive: (e) => e.isActive("bulletList"),
 		run: (e) => e.chain().focus().toggleBulletList().run()
 	},
 	{
-		icon: ListOrdered,
+		icon: "list-ordered",
+		key: "ordered-list",
 		label: "Ordered list",
 		isActive: (e) => e.isActive("orderedList"),
 		run: (e) => e.chain().focus().toggleOrderedList().run()
 	},
 	{
-		icon: Quote,
+		icon: "quote",
+		key: "blockquote",
 		label: "Blockquote",
 		isActive: (e) => e.isActive("blockquote"),
 		run: (e) => e.chain().focus().toggleBlockquote().run()
 	},
 	{
-		icon: Code,
+		icon: "code",
+		key: "code-block",
 		label: "Code block",
 		isActive: (e) => e.isActive("codeBlock"),
 		run: (e) => e.chain().focus().toggleCodeBlock().run()
 	},
 	{
-		icon: Minus,
+		icon: "minus",
+		key: "horizontal-rule",
 		label: "Horizontal rule",
 		isActive: () => false,
 		run: (e) => e.chain().focus().setHorizontalRule().run()
 	},
 	"separator",
 	{
-		icon: AlignLeft,
+		icon: "align-left",
+		key: "align-left",
 		label: "Align left",
 		isActive: (e) => e.isActive({ textAlign: "left" }),
 		run: (e) => e.chain().focus().setTextAlign("left").run()
 	},
 	{
-		icon: AlignCenter,
+		icon: "align-center",
+		key: "align-center",
 		label: "Align center",
 		isActive: (e) => e.isActive({ textAlign: "center" }),
 		run: (e) => e.chain().focus().setTextAlign("center").run()
 	},
 	{
-		icon: AlignRight,
+		icon: "align-right",
+		key: "align-right",
 		label: "Align right",
 		isActive: (e) => e.isActive({ textAlign: "right" }),
 		run: (e) => e.chain().focus().setTextAlign("right").run()
 	},
 	{
-		icon: AlignJustify,
+		icon: "align-justify",
+		key: "justify",
 		label: "Justify",
 		isActive: (e) => e.isActive({ textAlign: "justify" }),
 		run: (e) => e.chain().focus().setTextAlign("justify").run()
 	},
 	"separator",
 	{
-		icon: Link,
+		icon: "link",
+		key: "link",
 		label: "Link",
 		isActive: (e) => e.isActive("link"),
 		run: (e) => {
@@ -138,7 +157,8 @@ var toolbar = [
 	},
 	"separator",
 	{
-		icon: Table,
+		icon: "table",
+		key: "insert-table",
 		label: "Insert table",
 		isActive: (e) => e.isActive("table"),
 		run: (e) => e.chain().focus().insertTable({
@@ -148,28 +168,32 @@ var toolbar = [
 		}).run()
 	},
 	{
-		icon: Columns3,
+		icon: "columns-3",
+		key: "add-column",
 		label: "Add column",
 		isActive: () => false,
 		isDisabled: (e) => !e.can().addColumnAfter(),
 		run: (e) => e.chain().focus().addColumnAfter().run()
 	},
 	{
-		icon: Rows3,
+		icon: "rows-3",
+		key: "add-row",
 		label: "Add row",
 		isActive: () => false,
 		isDisabled: (e) => !e.can().addRowAfter(),
 		run: (e) => e.chain().focus().addRowAfter().run()
 	},
 	{
-		icon: Trash2,
+		icon: "trash-2",
+		key: "delete-table",
 		label: "Delete table",
 		isActive: () => false,
 		isDisabled: (e) => !e.can().deleteTable(),
 		run: (e) => e.chain().focus().deleteTable().run()
 	},
 	{
-		icon: ChevronRight,
+		icon: "chevron-right",
+		key: "details",
 		label: "Details",
 		isActive: (e) => e.isActive("details"),
 		run: (e) => {
@@ -200,17 +224,19 @@ var emojis = [
 	"❤️"
 ];
 function EmojiPicker({ editor }) {
+	const { t } = useT("lattice");
 	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		children: [/* @__PURE__ */ jsx("button", {
-			"aria-label": "Insert emoji",
-			className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-4",
+			"aria-label": t("editor.insert-emoji", "Insert emoji"),
+			"data-test": "editor-emoji",
+			className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md",
 			onClick: () => setOpen((value) => !value),
 			onMouseDown: (event) => event.preventDefault(),
-			title: "Insert emoji",
+			title: t("editor.insert-emoji", "Insert emoji"),
 			type: "button",
-			children: /* @__PURE__ */ jsx(Smile, {})
+			children: /* @__PURE__ */ jsx(Icon, { name: "smile" })
 		}), open && /* @__PURE__ */ jsx("div", {
 			className: "absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md",
 			children: emojis.map((emoji) => /* @__PURE__ */ jsx("button", {
@@ -227,20 +253,26 @@ function EmojiPicker({ editor }) {
 	});
 }
 function Toolbar({ editor }) {
+	const { t } = useT("lattice");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1",
 		children: [
-			toolbar.map((item, index) => item === "separator" ? /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }, `sep-${index}`) : /* @__PURE__ */ jsx("button", {
-				"aria-label": item.label,
-				"aria-pressed": item.isActive(editor),
-				className: cn("inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4", item.isActive(editor) && "bg-lt-accent text-lt-accent-fg"),
-				disabled: item.isDisabled?.(editor) ?? false,
-				onClick: () => item.run(editor),
-				onMouseDown: (event) => event.preventDefault(),
-				title: item.label,
-				type: "button",
-				children: /* @__PURE__ */ jsx(item.icon, {})
-			}, item.label)),
+			toolbar.map((item, index) => {
+				if (item === "separator") return /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }, `sep-${index}`);
+				const label = t(`editor.${item.key}`, item.label);
+				return /* @__PURE__ */ jsx("button", {
+					"aria-label": label,
+					"aria-pressed": item.isActive(editor),
+					"data-test": `editor-${item.key}`,
+					className: cn("inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md", item.isActive(editor) && "bg-lt-accent text-lt-accent-fg"),
+					disabled: item.isDisabled?.(editor) ?? false,
+					onClick: () => item.run(editor),
+					onMouseDown: (event) => event.preventDefault(),
+					title: label,
+					type: "button",
+					children: /* @__PURE__ */ jsx(Icon, { name: item.icon })
+				}, item.key);
+			}),
 			/* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }),
 			/* @__PURE__ */ jsx(EmojiPicker, { editor })
 		]
@@ -248,18 +280,22 @@ function Toolbar({ editor }) {
 }
 var RichEditorComponent = ({ node }) => {
 	const { errors } = useFormContext();
-	const { hidden, required, readonly, disabled } = useDependentField(node);
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
 	const { change, blur } = useFieldCommit();
-	const name = getStringProp(node.props, "name");
-	const storedValue = useFormValue(name);
-	const locked = readonly || disabled;
-	const initialContent = typeof storedValue === "object" && storedValue !== null ? storedValue : node.props?.value ?? "";
+	const name = node.props.name;
+	const scope = useFieldScope();
+	const globalValue = useFormValue(name);
+	const storedValue = scope ? scope.getValue(name) : globalValue;
+	const domName = scope ? scope.scopedName(name) : name;
+	const errorKey = scope ? scope.errorKey(name) : name;
+	const locked = readOnly || disabled;
+	const initialContent = typeof storedValue === "object" && storedValue !== null ? storedValue : node.props.value ?? "";
 	const editor = useEditor({
 		extensions: [
 			StarterKit,
 			Highlight,
 			TextAlign.configure({ types: ["heading", "paragraph"] }),
-			Link$1.configure({ openOnClick: false }),
+			Link.configure({ openOnClick: false }),
 			TableKit.configure({ table: { resizable: false } }),
 			Details,
 			DetailsSummary,
@@ -282,15 +318,17 @@ var RichEditorComponent = ({ node }) => {
 	if (hidden) return null;
 	const submittedValue = storedValue ? JSON.stringify(storedValue) : "";
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
-		error: errors[name],
-		label: getStringProp(node.props, "label"),
-		name,
+		error: errors[errorKey],
+		helperText: node.props.helperText ?? void 0,
+		tooltip: node.props.tooltip ?? void 0,
+		label: node.props.label ?? "",
+		name: domName,
 		required,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50", locked && "opacity-60"),
 			children: [editor && !locked && /* @__PURE__ */ jsx(Toolbar, { editor }), /* @__PURE__ */ jsx(EditorContent, { editor })]
 		}), /* @__PURE__ */ jsx("input", {
-			name,
+			name: domName,
 			type: "hidden",
 			value: submittedValue
 		})]

package/dist/form/components/fields/rich-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport {\n  AlignCenter,\n  AlignJustify,\n  AlignLeft,\n  AlignRight,\n  Bold,\n  ChevronRight,\n  Code,\n  Columns3,\n  Heading1,\n  Heading2,\n  Heading3,\n  Highlighter,\n  Italic,\n  Link as LinkIcon,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n  Rows3,\n  Smile,\n  Strikethrough,\n  Table as TableIcon,\n  Trash2,\n  Underline as UnderlineIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.rich-editor\": {\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      name?: string;\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      value?: unknown;\n    };\n  }\n}\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: typeof Bold;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: Bold,\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: Italic,\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: Strikethrough,\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: UnderlineIcon,\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: Highlighter,\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: Heading1,\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: Heading2,\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: Heading3,\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: List,\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: ListOrdered,\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: Quote,\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: Code,\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: Minus,\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: AlignLeft,\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: AlignCenter,\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: AlignRight,\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: AlignJustify,\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: LinkIcon,\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: TableIcon,\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: Columns3,\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: Rows3,\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: Trash2,\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: ChevronRight,\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label=\"Insert emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-4\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title=\"Insert emoji\"\n        type=\"button\"\n      >\n        <Smile />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) =>\n        item === \"separator\" ? (\n          // eslint-disable-next-line react/no-array-index-key\n          <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />\n        ) : (\n          <button\n            aria-label={item.label}\n            aria-pressed={item.isActive(editor)}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.label}\n            onClick={() => item.run(editor)}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onMouseDown={(event) => event.preventDefault()}\n            title={item.label}\n            type=\"button\"\n          >\n            <item.icon />\n          </button>\n        ),\n      )}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nexport const RichEditorComponent: RendererComponent<\"form.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readonly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = getStringProp(node.props, \"name\");\n  const storedValue = useFormValue(name);\n  const locked = readonly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props?.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[name]}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={name} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nexport const RichEditorComponent: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/row-action-menu.d.ts

@@ -0,0 +1,17 @@
+import { RowAction as WireRowAction } from '../../../types/generated';
+import { RowAction } from './row-actions';
+export type RowActionTranslate = (key: string, fallback: string) => string;
+export type RowActionContext = {
+    index: number;
+    removable: boolean;
+    onRemove: (index: number) => void;
+    onDuplicate: (index: number) => void;
+    t: RowActionTranslate;
+};
+/**
+ * Resolves the declared wire row actions into the click-wired client actions the
+ * kebab renders. `null` (undeclared) falls back to the built-in remove; an empty
+ * array disables row actions entirely. Remove is dropped while the row is at its
+ * minimum, and built-in labels resolve through i18n when the server sends none.
+ */
+export declare function buildRowActions(declared: WireRowAction[] | null, ctx: RowActionContext): RowAction[];

package/dist/form/components/fields/row-action-menu.js

@@ -0,0 +1,61 @@
+//#region resources/js/form/components/fields/row-action-menu.ts
+/** Translation key + fallback and icon for each built-in; the server sends null labels. */
+var BUILT_IN = {
+	duplicate: {
+		key: "rowActions.duplicate",
+		fallback: "Duplicate",
+		icon: "copy"
+	},
+	remove: {
+		key: "rowActions.remove",
+		fallback: "Remove",
+		icon: "trash-2"
+	}
+};
+/**
+* Resolves the declared wire row actions into the click-wired client actions the
+* kebab renders. `null` (undeclared) falls back to the built-in remove; an empty
+* array disables row actions entirely. Remove is dropped while the row is at its
+* minimum, and built-in labels resolve through i18n when the server sends none.
+*/
+function buildRowActions(declared, ctx) {
+	return (declared ?? defaultActions(ctx.removable)).map((action) => toClientAction(action, ctx)).filter((action) => action !== null);
+}
+function defaultActions(removable) {
+	if (!removable) return [];
+	return [{
+		type: "remove",
+		key: "remove",
+		label: null,
+		icon: null,
+		destructive: true
+	}];
+}
+function toClientAction(action, ctx) {
+	if (action.type === "duplicate") {
+		const builtIn = BUILT_IN.duplicate;
+		return {
+			key: action.key,
+			label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),
+			icon: action.icon ?? builtIn.icon,
+			destructive: action.destructive,
+			onClick: () => ctx.onDuplicate(ctx.index)
+		};
+	}
+	if (action.type === "remove") {
+		if (!ctx.removable) return null;
+		const builtIn = BUILT_IN.remove;
+		return {
+			key: action.key,
+			label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),
+			icon: action.icon ?? builtIn.icon,
+			destructive: action.destructive,
+			onClick: () => ctx.onRemove(ctx.index)
+		};
+	}
+	return null;
+}
+//#endregion
+export { buildRowActions };
+
+//# sourceMappingURL=row-action-menu.js.map

package/dist/form/components/fields/row-action-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-action-menu.js","names":[],"sources":["../../../../resources/js/form/components/fields/row-action-menu.ts"],"sourcesContent":["import type { RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport type { RowAction } from \"./row-actions\";\n\nexport type RowActionTranslate = (key: string, fallback: string) => string;\n\n/** Translation key + fallback and icon for each built-in; the server sends null labels. */\nconst BUILT_IN: Record<\"duplicate\" | \"remove\", { key: string; fallback: string; icon: string }> = {\n  duplicate: { key: \"rowActions.duplicate\", fallback: \"Duplicate\", icon: \"copy\" },\n  remove: { key: \"rowActions.remove\", fallback: \"Remove\", icon: \"trash-2\" },\n};\n\nexport type RowActionContext = {\n  index: number;\n  removable: boolean;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  t: RowActionTranslate;\n};\n\n/**\n * Resolves the declared wire row actions into the click-wired client actions the\n * kebab renders. `null` (undeclared) falls back to the built-in remove; an empty\n * array disables row actions entirely. Remove is dropped while the row is at its\n * minimum, and built-in labels resolve through i18n when the server sends none.\n */\nexport function buildRowActions(\n  declared: WireRowAction[] | null,\n  ctx: RowActionContext,\n): RowAction[] {\n  const source = declared ?? defaultActions(ctx.removable);\n\n  return source\n    .map((action) => toClientAction(action, ctx))\n    .filter((action): action is RowAction => action !== null);\n}\n\nfunction defaultActions(removable: boolean): WireRowAction[] {\n  if (!removable) {\n    return [];\n  }\n\n  return [{ type: \"remove\", key: \"remove\", label: null, icon: null, destructive: true }];\n}\n\nfunction toClientAction(action: WireRowAction, ctx: RowActionContext): RowAction | null {\n  if (action.type === \"duplicate\") {\n    const builtIn = BUILT_IN.duplicate;\n\n    return {\n      key: action.key,\n      label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),\n      icon: action.icon ?? builtIn.icon,\n      destructive: action.destructive,\n      onClick: () => ctx.onDuplicate(ctx.index),\n    };\n  }\n\n  if (action.type === \"remove\") {\n    if (!ctx.removable) {\n      return null;\n    }\n\n    const builtIn = BUILT_IN.remove;\n\n    return {\n      key: action.key,\n      label: action.label ?? ctx.t(builtIn.key, builtIn.fallback),\n      icon: action.icon ?? builtIn.icon,\n      destructive: action.destructive,\n      onClick: () => ctx.onRemove(ctx.index),\n    };\n  }\n\n  return null;\n}\n"],"mappings":";;AAMA,IAAM,WAA4F;CAChG,WAAW;EAAE,KAAK;EAAwB,UAAU;EAAa,MAAM;CAAO;CAC9E,QAAQ;EAAE,KAAK;EAAqB,UAAU;EAAU,MAAM;CAAU;AAC1E;;;;;;;AAgBA,SAAgB,gBACd,UACA,KACa;CAGb,QAFe,YAAY,eAAe,IAAI,SAAS,GAGpD,KAAK,WAAW,eAAe,QAAQ,GAAG,CAAC,EAC3C,QAAQ,WAAgC,WAAW,IAAI;AAC5D;AAEA,SAAS,eAAe,WAAqC;CAC3D,IAAI,CAAC,WACH,OAAO,CAAC;CAGV,OAAO,CAAC;EAAE,MAAM;EAAU,KAAK;EAAU,OAAO;EAAM,MAAM;EAAM,aAAa;CAAK,CAAC;AACvF;AAEA,SAAS,eAAe,QAAuB,KAAyC;CACtF,IAAI,OAAO,SAAS,aAAa;EAC/B,MAAM,UAAU,SAAS;EAEzB,OAAO;GACL,KAAK,OAAO;GACZ,OAAO,OAAO,SAAS,IAAI,EAAE,QAAQ,KAAK,QAAQ,QAAQ;GAC1D,MAAM,OAAO,QAAQ,QAAQ;GAC7B,aAAa,OAAO;GACpB,eAAe,IAAI,YAAY,IAAI,KAAK;EAC1C;CACF;CAEA,IAAI,OAAO,SAAS,UAAU;EAC5B,IAAI,CAAC,IAAI,WACP,OAAO;EAGT,MAAM,UAAU,SAAS;EAEzB,OAAO;GACL,KAAK,OAAO;GACZ,OAAO,OAAO,SAAS,IAAI,EAAE,QAAQ,KAAK,QAAQ,QAAQ;GAC1D,MAAM,OAAO,QAAQ,QAAQ;GAC7B,aAAa,OAAO;GACpB,eAAe,IAAI,SAAS,IAAI,KAAK;EACvC;CACF;CAEA,OAAO;AACT"}

package/dist/form/components/fields/row-actions.d.ts

@@ -0,0 +1,10 @@
+export type RowAction = {
+    key: string;
+    label: string;
+    icon: string;
+    onClick: () => void;
+    destructive?: boolean;
+};
+export declare function RowActions({ actions }: {
+    actions: RowAction[];
+}): import("react").JSX.Element | null;

package/dist/form/components/fields/row-actions.js

@@ -0,0 +1,45 @@
+import { Icon } from "../../../icons/sprite.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../core/components/dropdown-menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/row-actions.tsx
+function inlineClass(destructive) {
+	return destructive ? "text-lt-danger hover:text-lt-danger [&_svg]:size-lt-icon-sm" : "text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-sm";
+}
+function RowActions({ actions }) {
+	if (actions.length === 0) return null;
+	if (actions.length === 1) {
+		const action = actions[0];
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": action.label,
+			"data-test": `row-action-${action.key}`,
+			className: inlineClass(action.destructive),
+			onClick: action.onClick,
+			children: /* @__PURE__ */ jsx(Icon, { name: action.icon })
+		});
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Actions",
+			"data-test": "row-actions-menu",
+			className: "text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-sm",
+			children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal" })
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "min-w-[10rem]",
+		children: actions.map((action) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			"data-test": `row-action-${action.key}`,
+			destructive: action.destructive,
+			icon: action.icon,
+			onClick: action.onClick,
+			children: action.label
+		}, action.key))
+	})] });
+}
+//#endregion
+export { RowActions };
+
+//# sourceMappingURL=row-actions.js.map

package/dist/form/components/fields/row-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-actions.js","names":[],"sources":["../../../../resources/js/form/components/fields/row-actions.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@lattice-php/lattice/core/components/dropdown-menu\";\n\nexport type RowAction = {\n  key: string;\n  label: string;\n  icon: string;\n  onClick: () => void;\n  destructive?: boolean;\n};\n\nfunction inlineClass(destructive?: boolean): string {\n  return destructive\n    ? \"text-lt-danger hover:text-lt-danger [&_svg]:size-lt-icon-sm\"\n    : \"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-sm\";\n}\n\nexport function RowActions({ actions }: { actions: RowAction[] }) {\n  if (actions.length === 0) {\n    return null;\n  }\n\n  if (actions.length === 1) {\n    const action = actions[0];\n    return (\n      <button\n        type=\"button\"\n        aria-label={action.label}\n        data-test={`row-action-${action.key}`}\n        className={inlineClass(action.destructive)}\n        onClick={action.onClick}\n      >\n        <Icon name={action.icon} />\n      </button>\n    );\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label=\"Actions\"\n          data-test=\"row-actions-menu\"\n          className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-sm\"\n        >\n          <Icon name=\"more-horizontal\" />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"min-w-[10rem]\">\n        {actions.map((action) => (\n          <DropdownMenuItem\n            key={action.key}\n            data-test={`row-action-${action.key}`}\n            destructive={action.destructive}\n            icon={action.icon}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;AAgBA,SAAS,YAAY,aAA+B;CAClD,OAAO,cACH,gEACA;AACN;AAEA,SAAgB,WAAW,EAAE,WAAqC;CAChE,IAAI,QAAQ,WAAW,GACrB,OAAO;CAGT,IAAI,QAAQ,WAAW,GAAG;EACxB,MAAM,SAAS,QAAQ;EACvB,OACE,oBAAC,UAAD;GACE,MAAK;GACL,cAAY,OAAO;GACnB,aAAW,cAAc,OAAO;GAChC,WAAW,YAAY,OAAO,WAAW;GACzC,SAAS,OAAO;aAEhB,oBAAC,MAAD,EAAM,MAAM,OAAO,KAAO,CAAA;EACpB,CAAA;CAEZ;CAEA,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;YACnB,oBAAC,UAAD;GACE,MAAK;GACL,cAAW;GACX,aAAU;GACV,WAAU;aAEV,oBAAC,MAAD,EAAM,MAAK,kBAAmB,CAAA;EACxB,CAAA;CACW,CAAA,GACrB,oBAAC,qBAAD;EAAqB,OAAM;EAAM,WAAU;YACxC,QAAQ,KAAK,WACZ,oBAAC,kBAAD;GAEE,aAAW,cAAc,OAAO;GAChC,aAAa,OAAO;GACpB,MAAM,OAAO;GACb,SAAS,OAAO;aAEf,OAAO;EACQ,GAPX,OAAO,GAOI,CACnB;CACkB,CAAA,CACT,EAAA,CAAA;AAElB"}

package/dist/form/components/fields/row-item.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { Node } from '../../../core/types';
+import { RowAction as WireRowAction } from '../../../types/generated';
+import { RepeaterRow } from './repeater-rows';
+export declare function RowButton({ label, testId, onClick, children, }: {
+    label: string;
+    testId: string;
+    onClick: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export type RowItemProps = {
+    base: string;
+    index: number;
+    row: RepeaterRow;
+    template: Node[];
+    heading: string;
+    reorderable: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+    removable: boolean;
+    rowActions: WireRowAction[] | null;
+    onField: (index: number, field: string, value: unknown) => void;
+    onRemove: (index: number) => void;
+    onMove: (index: number, delta: number) => void;
+    onDuplicate: (index: number) => void;
+};
+export declare const RowItem: import('react').MemoExoticComponent<({ base, index, row, template, heading, reorderable, isFirst, isLast, removable, rowActions, onField, onRemove, onMove, onDuplicate, }: RowItemProps) => import("react").JSX.Element>;