@lattice-php/lattice 0.1.0 → 0.2.0

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":";;;;;;;;;;;;;;;;;;AAqEA,IAAM,UAAyB;CAC7B;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,MAAM;EAClC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;CACjD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,QAAQ;EACpC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;CACnD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,QAAQ;EACpC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;CACnD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW;EACvC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;CACtD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW;EACvC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;CACtD;CACA;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;CAChE;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;CAChE;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI;CAChE;CACA;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,IAAI;CACvD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,aAAa;EACzC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI;CACxD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,IAAI;CACvD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,WAAW;EACvC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI;CACtD;CACA;EACE,MAAM;EACN,OAAO;EACP,gBAAgB;EAChB,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI;CACxD;CACA;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,OAAO,CAAC;EACjD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,MAAM,EAAE,IAAI;CACzD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,SAAS,CAAC;EACnD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,QAAQ,EAAE,IAAI;CAC3D;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,QAAQ,CAAC;EAClD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,OAAO,EAAE,IAAI;CAC1D;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,EAAE,WAAW,UAAU,CAAC;EACpD,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,SAAS,EAAE,IAAI;CAC5D;CACA;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,MAAM;EAClC,MAAM,MAAM;GACV,IAAI,EAAE,SAAS,MAAM,GAAG;IACtB,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI;IAClC;GACF;GACA,MAAM,MAAM,OAAO,OAAO,UAAU;GACpC,IAAI,KACF,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,EAAE,IAAI;EAEzE;CACF;CACA;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,OAAO;EACnC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;GAAE,MAAM;GAAG,MAAM;GAAG,eAAe;EAAK,CAAC,EAAE,IAAI;CAC3F;CACA;EACE,MAAM;EACN,OAAO;EACP,gBAAgB;EAChB,aAAa,MAAM,CAAC,EAAE,IAAI,EAAE,eAAe;EAC3C,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI;CACrD;CACA;EACE,MAAM;EACN,OAAO;EACP,gBAAgB;EAChB,aAAa,MAAM,CAAC,EAAE,IAAI,EAAE,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI;CAClD;CACA;EACE,MAAM;EACN,OAAO;EACP,gBAAgB;EAChB,aAAa,MAAM,CAAC,EAAE,IAAI,EAAE,YAAY;EACxC,MAAM,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI;CAClD;CACA;EACE,MAAM;EACN,OAAO;EACP,WAAW,MAAM,EAAE,SAAS,SAAS;EACrC,MAAM,MAAM;GACV,IAAI,EAAE,SAAS,SAAS,GAAG;IACzB,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI;IACrC;GACF;GACA,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;EACrC;CACF;AACF;AAEA,IAAM,SAAS;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAS,YAAY,EAAE,UAA8B;CACnD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACE,cAAW;GACX,WAAU;GACV,eAAe,SAAS,UAAU,CAAC,KAAK;GACxC,cAAc,UAAU,MAAM,eAAe;GAC7C,OAAM;GACN,MAAK;aAEL,oBAAC,OAAD,CAAQ,CAAA;EACF,CAAA,GACP,QACC,oBAAC,OAAD;GAAK,WAAU;aACZ,OAAO,KAAK,UACX,oBAAC,UAAD;IACE,WAAU;IAEV,eAAe;KACb,OAAO,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,EAAE,IAAI;KAChD,QAAQ,KAAK;IACf;IACA,cAAc,UAAU,MAAM,eAAe;IAC7C,MAAK;cAEJ;GACK,GATD,KASC,CACT;EACE,CAAA,CAEJ;;AAET;AAEA,SAAS,QAAQ,EAAE,UAA8B;CAC/C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,QAAQ,KAAK,MAAM,UAClB,SAAS,cAEP,oBAAC,QAAD,EAA2B,WAAU,6BAA8B,GAAxD,OAAO,OAAiD,IAEnE,oBAAC,UAAD;IACE,cAAY,KAAK;IACjB,gBAAc,KAAK,SAAS,MAAM;IAClC,WAAW,GACT,8MACA,KAAK,SAAS,MAAM,KAAK,gCAC3B;IACA,UAAU,KAAK,aAAa,MAAM,KAAK;IAEvC,eAAe,KAAK,IAAI,MAAM;IAG9B,cAAc,UAAU,MAAM,eAAe;IAC7C,OAAO,KAAK;IACZ,MAAK;cAEL,oBAAC,KAAK,MAAN,CAAY,CAAA;GACN,GATD,KAAK,KASJ,CAEZ;GACA,oBAAC,QAAD,EAAM,WAAU,6BAA8B,CAAA;GAC9C,oBAAC,aAAD,EAAqB,OAAS,CAAA;EAC3B;;AAET;AAEA,IAAa,uBAA8D,EAAE,WAAW;CACtF,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,QAAQ,SAAS,eAAe;CACxC,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,SAAS,YAAY;CAC3B,MAAM,iBACJ,OAAO,gBAAgB,YAAY,gBAAgB,OAC9C,cACC,KAAK,OAAO,SAAgC;CAEpD,MAAM,SAAS,UAAU;EACvB,YAAY;GACV;GACA;GACA,UAAU,UAAU,EAAE,OAAO,CAAC,WAAW,WAAW,EAAE,CAAC;GACvD,OAAK,UAAU,EAAE,aAAa,MAAM,CAAC;GACrC,SAAS,UAAU,EAAE,OAAO,EAAE,WAAW,MAAM,EAAE,CAAC;GAClD;GACA;GACA;EACF;EACA,SAAS;EACT,UAAU,CAAC;EACX,mBAAmB;EACnB,aAAa,EACX,YAAY,EACV,OAAO,gDACT,EACF;EACA,WAAW,EAAE,QAAQ,eAAe;GAClC,OAAO,MAAM,SAAS,UAAU,OAAO,SAAS,QAAQ,CAAC;EAC3D;EACA,cAAc;GACZ,KAAK,IAAI;EACX;CACF,CAAC;CAED,gBAAgB;EACd,QAAQ,YAAY,CAAC,MAAM;CAC7B,GAAG,CAAC,QAAQ,MAAM,CAAC;CAEnB,IAAI,QACF,OAAO;CAGT,MAAM,iBAAiB,cAAc,KAAK,UAAU,WAAW,IAAI;CAEnE,OACE,qBAAC,gBAAD;EACE,OAAO,OAAO;EACd,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAJZ,CAME,qBAAC,OAAD;GACE,WAAW,GACT,kKACA,UAAU,YACZ;aAJF,CAMG,UAAU,CAAC,UAAU,oBAAC,SAAD,EAAiB,OAAS,CAAA,GAChD,oBAAC,eAAD,EAAuB,OAAS,CAAA,CAC7B;MACL,oBAAC,SAAD;GAAa;GAAM,MAAK;GAAS,OAAO;EAAiB,CAAA,CAC3C;;AAEpB"}
+{"version":3,"file":"rich-editor.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor.tsx"],"sourcesContent":["import { Icon } from \"@lattice/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/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\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\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: 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    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: \"underline\",\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: \"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    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    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: \"list-ordered\",\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: \"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    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    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    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    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    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    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    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    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    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 key = item.label.toLowerCase().replace(/\\s+/g, \"-\");\n        const label = t(`editor.${key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${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.label}\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<\"form.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 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      helperText={node.props.helperText ?? undefined}\n      label={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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"}

package/dist/form/components/fields/select.d.ts

@@ -1,23 +1,2 @@
-import { Option } from '../../../../../core/props';
-import { RendererComponent } from '../../../../../core/types';
-type SelectOption = Option;
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.select": {
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            multiple?: boolean;
-            name?: string;
-            options?: SelectOption[];
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            searchable?: boolean;
-            value?: string | string[];
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const SelectComponent: RendererComponent<"form.select">;
-export {};

package/dist/form/components/fields/select.js

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { getBooleanProp, getOptions, getStringProp } from "../../../core/props.js";
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
 import { useFormContext } from "../context.js";
 import { postFormAction } from "../form-transport.js";
 import { useResolvedNode } from "../resolved-nodes.js";
@@ -7,9 +8,9 @@ import { useFormValue } from "../values.js";
 import { useDependentField } from "../use-dependent-field.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useFieldCommit } from "../use-field-commit.js";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronsUpDown, Loader2, X } from "lucide-react";
+import * as Popover from "@radix-ui/react-popover";
 //#region resources/js/form/components/fields/select.tsx
 function toValues(stored, fallback) {
 	const source = stored ?? fallback;
@@ -18,29 +19,30 @@ function toValues(stored, fallback) {
 	return [String(source)];
 }
 var SelectComponent = ({ node }) => {
+	const { t } = useT("lattice");
+	const props = node.props;
 	const { action, componentRef, errors } = useFormContext();
-	const { hidden, required, readonly, disabled } = useDependentField(node);
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
 	const { change, blur } = useFieldCommit();
 	const resolvedNode = useResolvedNode(node);
-	const name = getStringProp(node.props, "name");
-	const placeholder = getStringProp(node.props, "placeholder") || "Select…";
-	const multiple = getBooleanProp(node.props, "multiple");
-	const searchable = getBooleanProp(node.props, "searchable");
-	const staticOptions = useMemo(() => getOptions(resolvedNode.props), [resolvedNode.props]);
+	const name = props.name;
+	const placeholder = props.placeholder || "Select…";
+	const multiple = props.multiple ?? false;
+	const searchable = props.searchable ?? false;
+	const staticOptions = useMemo(() => resolvedNode.props.options ?? [], [resolvedNode.props]);
 	const storedValue = useFormValue(name);
-	const selected = useMemo(() => toValues(storedValue, node.props?.value), [storedValue, node.props?.value]);
+	const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [results, setResults] = useState([]);
 	const [loading, setLoading] = useState(false);
-	const containerRef = useRef(null);
 	const labels = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
 		for (const option of [...staticOptions, ...results]) map.set(option.value, option.label);
 		return map;
 	}, [staticOptions, results]);
 	const labelFor = (value) => labels.get(value) ?? value;
-	const locked = readonly || disabled;
+	const locked = readOnly || disabled;
 	useEffect(() => {
 		if (!searchable) return;
 		if (query.trim() === "") {
@@ -70,14 +72,6 @@ var SelectComponent = ({ node }) => {
 		componentRef,
 		name
 	]);
-	useEffect(() => {
-		if (!open) return;
-		function onPointerDown(event) {
-			if (containerRef.current && !containerRef.current.contains(event.target)) close();
-		}
-		document.addEventListener("mousedown", onPointerDown);
-		return () => document.removeEventListener("mousedown", onPointerDown);
-	}, [open]);
 	function commit(next) {
 		change(name, multiple ? next : next[0] ?? "");
 	}
@@ -101,7 +95,8 @@ var SelectComponent = ({ node }) => {
 	const visibleOptions = !searchable ? staticOptions.filter((option) => option.label.toLowerCase().includes(query.toLowerCase())) : query.trim() === "" ? staticOptions : results;
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
 		error: errors[name],
-		label: getStringProp(node.props, "label"),
+		helperText: props.helperText ?? void 0,
+		label: props.label ?? "",
 		name,
 		required,
 		children: [multiple ? selected.map((value) => /* @__PURE__ */ jsx("input", {
@@ -112,68 +107,84 @@ var SelectComponent = ({ node }) => {
 			name,
 			type: "hidden",
 			value: selected[0] ?? ""
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "relative",
-			ref: containerRef,
-			children: [
-				multiple && selected.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "mb-1.5 flex flex-wrap gap-1",
-					children: selected.map((value) => /* @__PURE__ */ jsxs("span", {
-						className: "inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs",
-						children: [labelFor(value), !locked && /* @__PURE__ */ jsx("button", {
-							"aria-label": `Remove ${labelFor(value)}`,
-							className: "text-lt-muted-fg hover:text-lt-fg [&_svg]:size-3",
-							onClick: () => remove(value),
-							type: "button",
-							children: /* @__PURE__ */ jsx(X, {})
-						})]
-					}, value))
-				}),
-				/* @__PURE__ */ jsxs("button", {
-					"aria-expanded": open,
+		}), /* @__PURE__ */ jsxs("div", { children: [multiple && selected.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "mb-1.5 flex flex-wrap gap-1",
+			children: selected.map((value) => /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs",
+				children: [labelFor(value), !locked && /* @__PURE__ */ jsx("button", {
+					"aria-label": t("a11y.removeOption", "Remove {{label}}", { label: labelFor(value) }),
+					"data-test": `select-${name}-remove-${value}`,
+					className: "text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs",
+					onClick: () => remove(value),
+					type: "button",
+					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+				})]
+			}, value))
+		}), /* @__PURE__ */ jsxs(Popover.Root, {
+			open: open && !locked,
+			onOpenChange: (next) => {
+				if (next) setOpen(true);
+				else close();
+			},
+			children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
 					"aria-haspopup": "listbox",
+					autoFocus: props.autoFocus ?? void 0,
+					tabIndex: props.tabIndex ?? void 0,
+					"data-test": `select-${name}`,
 					className: cn("flex min-h-9 w-full items-center justify-between gap-2 rounded-lt-sm border border-lt-input bg-transparent px-3 py-1.5 text-left text-sm shadow-xs transition-colors focus:border-lt-ring focus:outline-none focus:ring-[3px] focus:ring-lt-ring/50", locked && "cursor-not-allowed opacity-60"),
 					disabled: locked,
-					onClick: () => setOpen((value) => !value),
 					type: "button",
 					children: [!multiple && selected.length > 0 ? /* @__PURE__ */ jsx("span", { children: labelFor(selected[0]) }) : /* @__PURE__ */ jsx("span", {
 						className: "text-lt-muted-fg",
 						children: placeholder
-					}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 text-lt-muted-fg" })]
-				}),
-				open && !locked && /* @__PURE__ */ jsxs("div", {
-					className: "absolute z-20 mt-1 w-full overflow-hidden rounded-lt-sm border border-lt-border bg-lt-bg shadow-md",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 border-b border-lt-border px-3 py-2",
-						children: [/* @__PURE__ */ jsx("input", {
-							"aria-label": "Search options",
-							autoFocus: true,
-							className: "w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg",
-							onChange: (event) => setQuery(event.target.value),
-							placeholder: searchable ? "Search…" : "Filter…",
-							value: query
-						}), loading && /* @__PURE__ */ jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-lt-muted-fg" })]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "max-h-60 overflow-y-auto p-1",
-						role: "listbox",
-						children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("p", {
-							className: "px-3 py-2 text-sm text-lt-muted-fg",
-							children: "No options"
-						}) : visibleOptions.map((option) => {
-							const isSelected = selected.includes(option.value);
-							return /* @__PURE__ */ jsxs("button", {
-								"aria-selected": isSelected,
-								className: cn("flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg", isSelected && "bg-lt-accent/60"),
-								onClick: () => pick(option),
-								role: "option",
-								type: "button",
-								children: [option.label, isSelected && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0" })]
-							}, option.value);
-						})
+					}), /* @__PURE__ */ jsx(Icon, {
+						name: "chevrons-up-down",
+						className: "size-lt-icon-md shrink-0 text-lt-muted-fg"
 					})]
 				})
-			]
-		})]
+			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+				align: "start",
+				className: "z-50 w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lt-sm border border-lt-border bg-lt-bg shadow-md",
+				sideOffset: 4,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 border-b border-lt-border px-3 py-2",
+					children: [/* @__PURE__ */ jsx("input", {
+						"aria-label": t("a11y.searchOptions", "Search options"),
+						"data-test": `select-${name}-search`,
+						className: "w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg",
+						onChange: (event) => setQuery(event.target.value),
+						placeholder: props.searchPlaceholder,
+						value: query
+					}), loading && /* @__PURE__ */ jsx(Icon, {
+						name: "loader-2",
+						className: "size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg"
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "max-h-60 overflow-y-auto p-1",
+					role: "listbox",
+					children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "px-3 py-2 text-sm text-lt-muted-fg",
+						children: props.emptyLabel
+					}) : visibleOptions.map((option) => {
+						const isSelected = selected.includes(option.value);
+						return /* @__PURE__ */ jsxs("button", {
+							"aria-selected": isSelected,
+							"data-test": `select-${name}-option-${option.value}`,
+							className: cn("flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg", isSelected && "bg-lt-accent/60"),
+							onClick: () => pick(option),
+							role: "option",
+							type: "button",
+							children: [option.label, isSelected && /* @__PURE__ */ jsx(Icon, {
+								name: "check",
+								className: "size-lt-icon-md shrink-0"
+							})]
+						}, option.value);
+					})
+				})]
+			}) })]
+		})] })]
 	});
 };
 //#endregion

package/dist/form/components/fields/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Check, ChevronsUpDown, Loader2, X } from \"lucide-react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport {\n  type Option,\n  getBooleanProp,\n  getOptions,\n  getStringProp,\n} from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype SelectOption = Option;\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.select\": {\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      multiple?: boolean;\n      name?: string;\n      options?: SelectOption[];\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      searchable?: boolean;\n      value?: string | string[];\n    };\n  }\n}\n\nfunction toValues(stored: unknown, fallback: string | string[] | undefined): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"form.select\"> = ({ node }) => {\n  const { action, componentRef, errors } = useFormContext();\n  const { hidden, required, readonly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = getStringProp(node.props, \"name\");\n  const placeholder = getStringProp(node.props, \"placeholder\") || \"Select…\";\n  const multiple = getBooleanProp(node.props, \"multiple\");\n  const searchable = getBooleanProp(node.props, \"searchable\");\n  const staticOptions = useMemo(() => getOptions(resolvedNode.props), [resolvedNode.props]);\n\n  const storedValue = useFormValue(name);\n  const selected = useMemo(\n    () => toValues(storedValue, node.props?.value),\n    [storedValue, node.props?.value],\n  );\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<SelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const labels = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of [...staticOptions, ...results]) {\n      map.set(option.value, option.label);\n    }\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => labels.get(value) ?? value;\n\n  const locked = readonly || disabled;\n\n  useEffect(() => {\n    if (!searchable) {\n      return;\n    }\n\n    if (query.trim() === \"\") {\n      setResults([]);\n      setLoading(false);\n\n      return;\n    }\n\n    const controller = new AbortController();\n    setLoading(true);\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<{ options?: SelectOption[] }>(\n        action,\n        componentRef,\n        { _search: name, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n  }, [query, searchable, action, componentRef, name]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    function onPointerDown(event: MouseEvent): void {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        close();\n      }\n    }\n\n    document.addEventListener(\"mousedown\", onPointerDown);\n\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function close(): void {\n    setOpen(false);\n    setQuery(\"\");\n    blur(name);\n  }\n\n  function pick(option: SelectOption): void {\n    if (multiple) {\n      const next = selected.includes(option.value)\n        ? selected.filter((value) => value !== option.value)\n        : [...selected, option.value];\n      commit(next);\n\n      return;\n    }\n\n    commit([option.value]);\n    close();\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const visibleOptions = !searchable\n    ? staticOptions.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))\n    : query.trim() === \"\"\n      ? staticOptions\n      : results;\n\n  return (\n    <FormFieldFrame\n      error={errors[name]}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${name}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={name} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div className=\"relative\" ref={containerRef}>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => (\n              <span\n                className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                key={value}\n              >\n                {labelFor(value)}\n                {!locked && (\n                  <button\n                    aria-label={`Remove ${labelFor(value)}`}\n                    className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-3\"\n                    onClick={() => remove(value)}\n                    type=\"button\"\n                  >\n                    <X />\n                  </button>\n                )}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <button\n          aria-expanded={open}\n          aria-haspopup=\"listbox\"\n          className={cn(\n            \"flex min-h-9 w-full items-center justify-between gap-2 rounded-lt-sm border border-lt-input bg-transparent px-3 py-1.5 text-left text-sm shadow-xs transition-colors focus:border-lt-ring focus:outline-none focus:ring-[3px] focus:ring-lt-ring/50\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          disabled={locked}\n          onClick={() => setOpen((value) => !value)}\n          type=\"button\"\n        >\n          {!multiple && selected.length > 0 ? (\n            <span>{labelFor(selected[0])}</span>\n          ) : (\n            <span className=\"text-lt-muted-fg\">{placeholder}</span>\n          )}\n          <ChevronsUpDown className=\"size-4 shrink-0 text-lt-muted-fg\" />\n        </button>\n\n        {open && !locked && (\n          <div className=\"absolute z-20 mt-1 w-full overflow-hidden rounded-lt-sm border border-lt-border bg-lt-bg shadow-md\">\n            <div className=\"flex items-center gap-2 border-b border-lt-border px-3 py-2\">\n              <input\n                aria-label=\"Search options\"\n                autoFocus\n                className=\"w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg\"\n                onChange={(event) => setQuery(event.target.value)}\n                placeholder={searchable ? \"Search…\" : \"Filter…\"}\n                value={query}\n              />\n              {loading && <Loader2 className=\"size-4 shrink-0 animate-spin text-lt-muted-fg\" />}\n            </div>\n            <div className=\"max-h-60 overflow-y-auto p-1\" role=\"listbox\">\n              {visibleOptions.length === 0 ? (\n                <p className=\"px-3 py-2 text-sm text-lt-muted-fg\">No options</p>\n              ) : (\n                visibleOptions.map((option) => {\n                  const isSelected = selected.includes(option.value);\n\n                  return (\n                    <button\n                      aria-selected={isSelected}\n                      className={cn(\n                        \"flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg\",\n                        isSelected && \"bg-lt-accent/60\",\n                      )}\n                      key={option.value}\n                      onClick={() => pick(option)}\n                      role=\"option\"\n                      type=\"button\"\n                    >\n                      {option.label}\n                      {isSelected && <Check className=\"size-4 shrink-0\" />}\n                    </button>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"form.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple ?? false;\n  const searchable = props.searchable ?? false;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n\n  const storedValue = useFormValue(name);\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<Option[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const labels = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of [...staticOptions, ...results]) {\n      map.set(option.value, option.label);\n    }\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => labels.get(value) ?? value;\n\n  const locked = readOnly || disabled;\n\n  useEffect(() => {\n    if (!searchable) {\n      return;\n    }\n\n    if (query.trim() === \"\") {\n      setResults([]);\n      setLoading(false);\n\n      return;\n    }\n\n    const controller = new AbortController();\n    setLoading(true);\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { _search: name, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n  }, [query, searchable, action, componentRef, name]);\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function close(): void {\n    setOpen(false);\n    setQuery(\"\");\n    blur(name);\n  }\n\n  function pick(option: Option): void {\n    if (multiple) {\n      const next = selected.includes(option.value)\n        ? selected.filter((value) => value !== option.value)\n        : [...selected, option.value];\n      commit(next);\n\n      return;\n    }\n\n    commit([option.value]);\n    close();\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const visibleOptions = !searchable\n    ? staticOptions.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))\n    : query.trim() === \"\"\n      ? staticOptions\n      : results;\n\n  return (\n    <FormFieldFrame\n      error={errors[name]}\n      helperText={props.helperText ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${name}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={name} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => (\n              <span\n                className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                key={value}\n              >\n                {labelFor(value)}\n                {!locked && (\n                  <button\n                    aria-label={t(\"a11y.removeOption\", \"Remove {{label}}\", {\n                      label: labelFor(value),\n                    })}\n                    data-test={`select-${name}-remove-${value}`}\n                    className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                    onClick={() => remove(value)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"x\" />\n                  </button>\n                )}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <Popover.Root\n          open={open && !locked}\n          onOpenChange={(next) => {\n            if (next) {\n              setOpen(true);\n            } else {\n              close();\n            }\n          }}\n        >\n          <Popover.Trigger asChild>\n            <button\n              aria-haspopup=\"listbox\"\n              autoFocus={props.autoFocus ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\n              data-test={`select-${name}`}\n              className={cn(\n                \"flex min-h-9 w-full items-center justify-between gap-2 rounded-lt-sm border border-lt-input bg-transparent px-3 py-1.5 text-left text-sm shadow-xs transition-colors focus:border-lt-ring focus:outline-none focus:ring-[3px] focus:ring-lt-ring/50\",\n                locked && \"cursor-not-allowed opacity-60\",\n              )}\n              disabled={locked}\n              type=\"button\"\n            >\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </button>\n          </Popover.Trigger>\n\n          <Popover.Portal>\n            <Popover.Content\n              align=\"start\"\n              className=\"z-50 w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lt-sm border border-lt-border bg-lt-bg shadow-md\"\n              sideOffset={4}\n            >\n              <div className=\"flex items-center gap-2 border-b border-lt-border px-3 py-2\">\n                <input\n                  aria-label={t(\"a11y.searchOptions\", \"Search options\")}\n                  data-test={`select-${name}-search`}\n                  className=\"w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg\"\n                  onChange={(event) => setQuery(event.target.value)}\n                  placeholder={props.searchPlaceholder}\n                  value={query}\n                />\n                {loading && (\n                  <Icon\n                    name=\"loader-2\"\n                    className=\"size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg\"\n                  />\n                )}\n              </div>\n              <div className=\"max-h-60 overflow-y-auto p-1\" role=\"listbox\">\n                {visibleOptions.length === 0 ? (\n                  <p className=\"px-3 py-2 text-sm text-lt-muted-fg\">{props.emptyLabel}</p>\n                ) : (\n                  visibleOptions.map((option) => {\n                    const isSelected = selected.includes(option.value);\n\n                    return (\n                      <button\n                        aria-selected={isSelected}\n                        data-test={`select-${name}-option-${option.value}`}\n                        className={cn(\n                          \"flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg\",\n                          isSelected && \"bg-lt-accent/60\",\n                        )}\n                        key={option.value}\n                        onClick={() => pick(option)}\n                        role=\"option\"\n                        type=\"button\"\n                      >\n                        {option.label}\n                        {isSelected && <Icon name=\"check\" className=\"size-lt-icon-md shrink-0\" />}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/simple-field.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { Node } from '../../../core/types';
+import { ControlledField } from '../use-controlled-field';
+/** The shared shell for single-input fields; the control is a render prop receiving the resolved field state. */
+export declare function SimpleField({ node, label, children, }: {
+    node: Node;
+    label: string;
+    children: (field: ControlledField) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/form/components/fields/simple-field.js

@@ -0,0 +1,22 @@
+import { fieldProps } from "../field-props.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useControlledField } from "../use-controlled-field.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/simple-field.tsx
+/** The shared shell for single-input fields; the control is a render prop receiving the resolved field state. */
+function SimpleField({ node, label, children }) {
+	const field = useControlledField(node);
+	if (field.hidden) return null;
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error: field.error,
+		helperText: fieldProps(node).helperText ?? void 0,
+		label,
+		name: field.name,
+		required: field.required,
+		children: children(field)
+	});
+}
+//#endregion
+export { SimpleField };
+
+//# sourceMappingURL=simple-field.js.map

package/dist/form/components/fields/simple-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/simple-field.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { fieldProps } from \"../field-props\";\nimport { type ControlledField, useControlledField } from \"../use-controlled-field\";\n\n/** The shared shell for single-input fields; the control is a render prop receiving the resolved field state. */\nexport function SimpleField({\n  node,\n  label,\n  children,\n}: {\n  node: Node;\n  label: string;\n  children: (field: ControlledField) => ReactNode;\n}) {\n  const field = useControlledField(node);\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={field.error}\n      helperText={fieldProps(node).helperText ?? undefined}\n      label={label}\n      name={field.name}\n      required={field.required}\n    >\n      {children(field)}\n    </FormFieldFrame>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAgB,YAAY,EAC1B,MACA,OACA,YAKC;CACD,MAAM,QAAQ,mBAAmB,IAAI;CAErC,IAAI,MAAM,QACR,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,MAAM;EACb,YAAY,WAAW,IAAI,EAAE,cAAc,KAAA;EACpC;EACP,MAAM,MAAM;EACZ,UAAU,MAAM;YAEf,SAAS,KAAK;CACD,CAAA;AAEpB"}

package/dist/form/components/fields/text-input.d.ts

@@ -1,21 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.text-input": {
-            autoComplete?: string;
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            name?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            tabIndex?: number;
-            type?: "email" | "text";
-            value?: string;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const TextInputComponent: RendererComponent<"form.text-input">;

package/dist/form/components/fields/text-input.js

@@ -1,28 +1,23 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useControlledField } from "../use-controlled-field.js";
 import { Input } from "../base/input.js";
+import { SimpleField } from "./simple-field.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/text-input.tsx
 var TextInputComponent = ({ node }) => {
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	if (hidden) return null;
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error,
-		label: getStringProp(node.props, "label"),
-		name,
-		required,
-		children: /* @__PURE__ */ jsx(Input, {
-			autoComplete: getStringProp(node.props, "autoComplete"),
-			autoFocus: getBooleanProp(node.props, "autoFocus"),
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
+			autoComplete: props.autoComplete ?? "",
+			autoFocus: props.autoFocus ?? false,
 			disabled,
 			id: name,
 			name,
 			onChange: (event) => commit(event.target.value),
-			placeholder: getStringProp(node.props, "placeholder"),
-			readOnly: readonly,
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
-			type: getStringProp(node.props, "type", "text"),
+			placeholder: props.placeholder ?? "",
+			readOnly,
+			tabIndex: props.tabIndex ?? void 0,
+			type: props.type ?? "text",
 			value
 		})
 	});

package/dist/form/components/fields/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { Input } from \"../base/input\";\nimport { useControlledField } from \"../use-controlled-field\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.text-input\": {\n      autoComplete?: string;\n      autoFocus?: boolean;\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      tabIndex?: number;\n      type?: \"email\" | \"text\";\n      value?: string;\n    };\n  }\n}\n\nexport const TextInputComponent: RendererComponent<\"form.text-input\"> = ({ node }) => {\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <Input\n        autoComplete={getStringProp(node.props, \"autoComplete\")}\n        autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n        disabled={disabled}\n        id={name}\n        name={name}\n        onChange={(event) => commit(event.target.value)}\n        placeholder={getStringProp(node.props, \"placeholder\")}\n        readOnly={readonly}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        type={getStringProp(node.props, \"type\", \"text\")}\n        value={value}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AA0BA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAEV,oBAAC,OAAD;GACE,cAAc,cAAc,KAAK,OAAO,cAAc;GACtD,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,cAAc,KAAK,OAAO,aAAa;GACpD,UAAU;GACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,MAAM,cAAc,KAAK,OAAO,QAAQ,MAAM;GACvC;EACR,CAAA;CACa,CAAA;AAEpB"}
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"form.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => (\n        <Input\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          placeholder={props.placeholder ?? \"\"}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type={props.type ?? \"text\"}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aACnC,oBAAC,OAAD;GACE,cAAc,MAAM,gBAAgB;GACpC,WAAW,MAAM,aAAa;GACpB;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAM,MAAM,QAAQ;GACb;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/textarea.d.ts

@@ -1,20 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.textarea": {
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            name?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            rows?: number;
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const TextareaComponent: RendererComponent<"form.textarea">;

package/dist/form/components/fields/textarea.js

@@ -1,27 +1,22 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useControlledField } from "../use-controlled-field.js";
+import { SimpleField } from "./simple-field.js";
 import { Textarea } from "../base/textarea.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/textarea.tsx
 var TextareaComponent = ({ node }) => {
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	if (hidden) return null;
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error,
-		label: getStringProp(node.props, "label"),
-		name,
-		required,
-		children: /* @__PURE__ */ jsx(Textarea, {
-			autoFocus: getBooleanProp(node.props, "autoFocus"),
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Textarea, {
+			autoFocus: props.autoFocus ?? false,
 			disabled,
 			id: name,
 			name,
 			onChange: (event) => commit(event.target.value),
-			placeholder: getStringProp(node.props, "placeholder"),
-			readOnly: readonly,
-			rows: getOptionalNumberProp(node.props, "rows"),
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			placeholder: props.placeholder ?? "",
+			readOnly,
+			rows: props.rows ?? void 0,
+			tabIndex: props.tabIndex ?? void 0,
 			value
 		})
 	});

package/dist/form/components/fields/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/fields/textarea.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { Textarea } from \"../base/textarea\";\nimport { useControlledField } from \"../use-controlled-field\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.textarea\": {\n      autoFocus?: boolean;\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      rows?: number;\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const TextareaComponent: RendererComponent<\"form.textarea\"> = ({ node }) => {\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <Textarea\n        autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n        disabled={disabled}\n        id={name}\n        name={name}\n        onChange={(event) => commit(event.target.value)}\n        placeholder={getStringProp(node.props, \"placeholder\")}\n        readOnly={readonly}\n        rows={getOptionalNumberProp(node.props, \"rows\")}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        value={value}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,qBAAyD,EAAE,WAAW;CACjF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAEV,oBAAC,UAAD;GACE,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,cAAc,KAAK,OAAO,aAAa;GACpD,UAAU;GACV,MAAM,sBAAsB,KAAK,OAAO,MAAM;GAC9C,UAAU,sBAAsB,KAAK,OAAO,UAAU;GAC/C;EACR,CAAA;CACa,CAAA;AAEpB"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/fields/textarea.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Textarea } from \"../base/textarea\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextareaComponent: RendererComponent<\"form.textarea\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => (\n        <Textarea\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          placeholder={props.placeholder ?? \"\"}\n          readOnly={readOnly}\n          rows={props.rows ?? undefined}\n          tabIndex={props.tabIndex ?? undefined}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAyD,EAAE,WAAW;CACjF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aACnC,oBAAC,UAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,MAAM,MAAM,QAAQ,KAAA;GACpB,UAAU,MAAM,YAAY,KAAA;GACrB;EACR,CAAA;CAEQ,CAAA;AAEjB"}