@verbb/plugin-kit-react 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## Unreleased
+
+## 1.0.4 - 2026-06-10
+
+### Added
+- Added `CodeEditor`, a CodeMirror 6-based code surface for HTML and plain text with line numbers, tab sizing, and validation styling.
+- Added `CodeEditorField` (`codeEditor`) for SchemaForm string fields that need syntax-aware editing.
+- Added `TiptapContent`, a read-only TipTap renderer for previews and summaries that accepts the same value shapes as `RichTextField`.
+
+### Fixed
+- Add icon support to Combobox.
+- Fix dropdown menu icon handling.
+
 ## 1.0.2 - 2026-06-07
 
 ### Added

package/dist/components/CodeEditor.d.ts

@@ -0,0 +1,13 @@
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+type CodeEditorLanguage = 'html' | 'text';
+type CodeEditorProps = Omit<ReactCodeMirrorProps, 'value' | 'onChange'> & {
+    value: string;
+    onChange: (value: string) => void;
+    language?: CodeEditorLanguage;
+    tabSize?: number;
+    lineNumbers?: boolean;
+    isInvalid?: boolean;
+};
+export declare const CodeEditor: ({ value, onChange, language, tabSize, lineNumbers, rows, disabled, readOnly, isInvalid, className, ...props }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CodeEditor.d.ts.map

package/dist/components/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAGA,OAAmB,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAK9E,KAAK,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1C,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAsCF,eAAO,MAAM,UAAU,GAAI,+GAYxB,eAAe,4CAqDjB,CAAC"}

package/dist/components/CodeEditor.js

@@ -0,0 +1,79 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { html } from "@codemirror/lang-html";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import CodeMirror from "@uiw/react-codemirror";
+//#region src/components/CodeEditor.tsx
+var LINE_HEIGHT_PX = 18;
+var editorTheme = EditorView.theme({
+	"&": {
+		backgroundColor: "rgb(251, 252, 254)",
+		color: "rgb(31, 41, 51)",
+		fontSize: "12px"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+		lineHeight: `${LINE_HEIGHT_PX}px`
+	},
+	".cm-content": {
+		padding: "6px 8px",
+		caretColor: "rgb(31, 41, 51)"
+	},
+	".cm-gutters": {
+		backgroundColor: "rgb(245, 247, 250)",
+		borderRight: "1px solid rgba(96, 125, 159, 0.2)",
+		color: "#7c8793"
+	},
+	".cm-gutter.cm-lineNumbers .cm-gutterElement": {
+		padding: "0 8px",
+		minWidth: "3rem"
+	},
+	".cm-activeLine": { backgroundColor: "rgba(96, 125, 159, 0.06)" },
+	".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": { backgroundColor: "rgba(59, 130, 246, 0.35) !important" }
+});
+var CodeEditor = ({ value, onChange, language = "html", tabSize = 4, lineNumbers = true, rows = 12, disabled = false, readOnly = false, isInvalid = false, className, ...props }) => {
+	const extensions = useMemo(() => {
+		const next = [
+			editorTheme,
+			EditorState.tabSize.of(Math.max(1, tabSize)),
+			EditorView.lineWrapping
+		];
+		if (language === "html") next.push(html());
+		return next;
+	}, [language, tabSize]);
+	const minHeight = `${Math.max(Number(rows) || 12, 4) * LINE_HEIGHT_PX + 12}px`;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("overflow-hidden rounded-sm border border-[rgba(96,125,159,0.4)] bg-[rgb(251,252,254)]", "focus-within:border-sky-600 focus-within:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "[&_.cm-editor]:min-h-[var(--formie-code-editor-min-height)]", isInvalid && "border-rose-600 focus-within:border-rose-600 focus-within:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]", (disabled || readOnly) && "opacity-70", className),
+		style: { "--formie-code-editor-min-height": minHeight },
+		"data-slot": "code-editor",
+		children: /* @__PURE__ */ jsx(CodeMirror, {
+			value: value ?? "",
+			onChange,
+			extensions,
+			editable: !disabled && !readOnly,
+			readOnly: disabled || readOnly,
+			basicSetup: {
+				lineNumbers,
+				foldGutter: false,
+				dropCursor: false,
+				allowMultipleSelections: false,
+				indentOnInput: true,
+				bracketMatching: language === "html",
+				closeBrackets: language === "html",
+				autocompletion: false,
+				highlightSelectionMatches: false,
+				searchKeymap: false,
+				tabSize
+			},
+			...props
+		})
+	});
+};
+//#endregion
+export { CodeEditor };
+
+//# sourceMappingURL=CodeEditor.js.map

package/dist/components/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","names":[],"sources":["../../src/components/CodeEditor.tsx"],"sourcesContent":["import { html } from '@codemirror/lang-html';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport CodeMirror, { type ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { useMemo } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype CodeEditorLanguage = 'html' | 'text';\n\ntype CodeEditorProps = Omit<ReactCodeMirrorProps, 'value' | 'onChange'> & {\n    value: string;\n    onChange: (value: string) => void;\n    language?: CodeEditorLanguage;\n    tabSize?: number;\n    lineNumbers?: boolean;\n    isInvalid?: boolean;\n};\n\nconst LINE_HEIGHT_PX = 18;\n\nconst editorTheme = EditorView.theme({\n    '&': {\n        backgroundColor: 'rgb(251, 252, 254)',\n        color: 'rgb(31, 41, 51)',\n        fontSize: '12px',\n    },\n    '&.cm-focused': {\n        outline: 'none',\n    },\n    '.cm-scroller': {\n        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',\n        lineHeight: `${LINE_HEIGHT_PX}px`,\n    },\n    '.cm-content': {\n        padding: '6px 8px',\n        caretColor: 'rgb(31, 41, 51)',\n    },\n    '.cm-gutters': {\n        backgroundColor: 'rgb(245, 247, 250)',\n        borderRight: '1px solid rgba(96, 125, 159, 0.2)',\n        color: '#7c8793',\n    },\n    '.cm-gutter.cm-lineNumbers .cm-gutterElement': {\n        padding: '0 8px',\n        minWidth: '3rem',\n    },\n    '.cm-activeLine': {\n        backgroundColor: 'rgba(96, 125, 159, 0.06)',\n    },\n    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {\n        backgroundColor: 'rgba(59, 130, 246, 0.35) !important',\n    },\n});\n\nexport const CodeEditor = ({\n    value,\n    onChange,\n    language = 'html',\n    tabSize = 4,\n    lineNumbers = true,\n    rows = 12,\n    disabled = false,\n    readOnly = false,\n    isInvalid = false,\n    className,\n    ...props\n}: CodeEditorProps) => {\n    const extensions = useMemo(() => {\n        const next = [\n            editorTheme,\n            EditorState.tabSize.of(Math.max(1, tabSize)),\n            EditorView.lineWrapping,\n        ];\n\n        if (language === 'html') {\n            next.push(html());\n        }\n\n        return next;\n    }, [language, tabSize]);\n\n    const minHeight = `${Math.max(Number(rows) || 12, 4) * LINE_HEIGHT_PX + 12}px`;\n\n    return (\n        <div\n            className={cn(\n                'overflow-hidden rounded-sm border border-[rgba(96,125,159,0.4)] bg-[rgb(251,252,254)]',\n                'focus-within:border-sky-600 focus-within:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                '[&_.cm-editor]:min-h-[var(--formie-code-editor-min-height)]',\n                isInvalid && 'border-rose-600 focus-within:border-rose-600 focus-within:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]',\n                (disabled || readOnly) && 'opacity-70',\n                className,\n            )}\n            style={{ '--formie-code-editor-min-height': minHeight }}\n            data-slot=\"code-editor\"\n        >\n            <CodeMirror\n                value={value ?? ''}\n                onChange={onChange}\n                extensions={extensions}\n                editable={!disabled && !readOnly}\n                readOnly={disabled || readOnly}\n                basicSetup={{\n                    lineNumbers,\n                    foldGutter: false,\n                    dropCursor: false,\n                    allowMultipleSelections: false,\n                    indentOnInput: true,\n                    bracketMatching: language === 'html',\n                    closeBrackets: language === 'html',\n                    autocompletion: false,\n                    highlightSelectionMatches: false,\n                    searchKeymap: false,\n                    tabSize,\n                }}\n                {...props}\n            />\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAiB;AAEvB,IAAM,cAAc,WAAW,MAAM;CACjC,KAAK;EACD,iBAAiB;EACjB,OAAO;EACP,UAAU;EACb;CACD,gBAAgB,EACZ,SAAS,QACZ;CACD,gBAAgB;EACZ,YAAY;EACZ,YAAY,GAAG,eAAe;EACjC;CACD,eAAe;EACX,SAAS;EACT,YAAY;EACf;CACD,eAAe;EACX,iBAAiB;EACjB,aAAa;EACb,OAAO;EACV;CACD,+CAA+C;EAC3C,SAAS;EACT,UAAU;EACb;CACD,kBAAkB,EACd,iBAAiB,4BACpB;CACD,8EAA8E,EAC1E,iBAAiB,uCACpB;CACJ,CAAC;AAEF,IAAa,cAAc,EACvB,OACA,UACA,WAAW,QACX,UAAU,GACV,cAAc,MACd,OAAO,IACP,WAAW,OACX,WAAW,OACX,YAAY,OACZ,WACA,GAAG,YACgB;CACnB,MAAM,aAAa,cAAc;EAC7B,MAAM,OAAO;GACT;GACA,YAAY,QAAQ,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;GAC5C,WAAW;GACd;AAED,MAAI,aAAa,OACb,MAAK,KAAK,MAAM,CAAC;AAGrB,SAAO;IACR,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,YAAY,GAAG,KAAK,IAAI,OAAO,KAAK,IAAI,IAAI,EAAE,GAAG,iBAAiB,GAAG;AAE3E,QACI,oBAAC,OAAD;EACI,WAAW,GACP,yFACA,uIACA,+DACA,aAAa,2JACZ,YAAY,aAAa,cAC1B,UACH;EACD,OAAO,EAAE,mCAAmC,WAAW;EACvD,aAAU;YAEV,oBAAC,YAAD;GACI,OAAO,SAAS;GACN;GACE;GACZ,UAAU,CAAC,YAAY,CAAC;GACxB,UAAU,YAAY;GACtB,YAAY;IACR;IACA,YAAY;IACZ,YAAY;IACZ,yBAAyB;IACzB,eAAe;IACf,iBAAiB,aAAa;IAC9B,eAAe,aAAa;IAC5B,gBAAgB;IAChB,2BAA2B;IAC3B,cAAc;IACd;IACH;GACD,GAAI;GACN,CAAA;EACA,CAAA"}

package/dist/components/ComboboxInput.d.ts

@@ -1,6 +1,7 @@
 export type ComboboxInputOption = {
     label: string;
     value: string | number;
+    icon?: string | null;
     [key: string]: unknown;
 };
 export type ComboboxInputProps = {

package/dist/components/ComboboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxInput.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,aAAa,GAAI,wPAoB3B,kBAAkB,4CAyLpB,CAAC"}
+{"version":3,"file":"ComboboxInput.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxInput.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA2BF,eAAO,MAAM,aAAa,GAAI,wPAoB3B,kBAAkB,4CA6LpB,CAAC"}

package/dist/components/ComboboxInput.js

@@ -8,6 +8,14 @@ var optionsCache = /* @__PURE__ */ new Map();
 var toStringValue = (value) => {
 	return String(value ?? "");
 };
+var OptionIcon = ({ icon }) => {
+	if (!icon || typeof icon !== "string") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-slate-500 [&_svg]:size-4 [&_svg]:shrink-0",
+		"aria-hidden": "true",
+		dangerouslySetInnerHTML: { __html: icon }
+	});
+};
 var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multiple = false, disabled = false, placeholder = "Select an option", emptyMessage = "No options found.", className, contentClassName, withLoadingIndicator = true, showClear = true, open, defaultOpen, onOpenChange, onInputValueChange, cacheKey, cacheTtlMs = 300 * 1e3, disableCache = false }) => {
 	const [fetchedOptions, setFetchedOptions] = useState(null);
 	const [loading, setLoading] = useState(false);
@@ -135,7 +143,7 @@ var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multi
 				className,
 				children: /* @__PURE__ */ jsx(ComboboxValue, { children: (items) => {
 					return /* @__PURE__ */ jsxs(Fragment, { children: [items.map((item) => {
-						return /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, toStringValue(item.value));
+						return /* @__PURE__ */ jsxs(ComboboxChip, { children: [/* @__PURE__ */ jsx(OptionIcon, { icon: item.icon }), item.label] }, toStringValue(item.value));
 					}), /* @__PURE__ */ jsx(ComboboxChipsInput, { placeholder })] });
 				} })
 			}) : /* @__PURE__ */ jsx(ComboboxPrimitiveInput, {
@@ -149,9 +157,12 @@ var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multi
 				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
 					return /* @__PURE__ */ jsx(ComboboxItem, {
 						value: item,
-						children: /* @__PURE__ */ jsx(ComboboxHighlightedText, {
-							text: item.label,
-							search: searchValue
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(OptionIcon, { icon: item.icon }), /* @__PURE__ */ jsx(ComboboxHighlightedText, {
+								text: item.label,
+								search: searchValue
+							})]
 						})
 					}, toStringValue(item.value));
 				} })]

package/dist/components/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../src/components/ComboboxInput.tsx"],"sourcesContent":["import {\n    Fragment, useCallback, useEffect, useMemo, useRef, useState,\n} from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport {\n    Combobox,\n    ComboboxPrimitiveInput,\n    ComboboxContent,\n    ComboboxEmpty,\n    ComboboxList,\n    ComboboxItem,\n    ComboboxValue,\n    ComboboxChips,\n    ComboboxChip,\n    ComboboxChipsInput,\n    ComboboxHighlightedText,\n    useComboboxAnchor,\n} from '@verbb/plugin-kit-react/components/Combobox';\n\nexport type ComboboxInputOption = {\n    label: string;\n    value: string | number;\n    [key: string]: unknown;\n};\n\nexport type ComboboxInputProps = {\n    options?: ComboboxInputOption[];\n    fetchOptions?: () => Promise<ComboboxInputOption[]>;\n    value?: string | number | Array<string | number> | null;\n    onValueChange?: (value: string | number | Array<string | number> | null) => void;\n    multiple?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    emptyMessage?: string;\n    className?: string;\n    contentClassName?: string;\n    withLoadingIndicator?: boolean;\n    showClear?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    onInputValueChange?: (value: string) => void;\n    cacheKey?: string;\n    cacheTtlMs?: number;\n    disableCache?: boolean;\n};\n\ntype CacheEntry = {\n    options: ComboboxInputOption[];\n    expiresAt: number;\n};\n\nconst optionsCache = new Map<string, CacheEntry>();\n\nconst toStringValue = (value: unknown): string => {\n    return String(value ?? '');\n};\n\nexport const ComboboxInput = ({\n    options,\n    fetchOptions,\n    value = null,\n    onValueChange,\n    multiple = false,\n    disabled = false,\n    placeholder = 'Select an option',\n    emptyMessage = 'No options found.',\n    className,\n    contentClassName,\n    withLoadingIndicator = true,\n    showClear = true,\n    open,\n    defaultOpen,\n    onOpenChange,\n    onInputValueChange,\n    cacheKey,\n    cacheTtlMs = 5 * 60 * 1000,\n    disableCache = false,\n}: ComboboxInputProps) => {\n    const [fetchedOptions, setFetchedOptions] = useState<ComboboxInputOption[] | null>(null);\n    const [loading, setLoading] = useState(false);\n    const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));\n    const [searchValue, setSearchValue] = useState('');\n    const hasLoadedRef = useRef(false);\n    const anchor = useComboboxAnchor();\n    const isMultiple = multiple;\n    const isOpen = open ?? internalOpen;\n\n    const resolvedOptions = useMemo(() => {\n        return fetchedOptions ?? options ?? [];\n    }, [fetchedOptions, options]);\n\n    const resolveCachedOptions = useCallback(() => {\n        if (disableCache || !cacheKey) {\n            return null;\n        }\n\n        const cached = optionsCache.get(cacheKey);\n        if (!cached) {\n            return null;\n        }\n\n        if (cached.expiresAt <= Date.now()) {\n            optionsCache.delete(cacheKey);\n            return null;\n        }\n\n        return cached.options;\n    }, [cacheKey, disableCache]);\n\n    const persistCachedOptions = useCallback((nextOptions: ComboboxInputOption[]) => {\n        if (disableCache || !cacheKey) {\n            return;\n        }\n\n        optionsCache.set(cacheKey, {\n            options: nextOptions,\n            expiresAt: Date.now() + cacheTtlMs,\n        });\n    }, [cacheKey, cacheTtlMs, disableCache]);\n\n    useEffect(() => {\n        if (!fetchOptions || !isOpen) {\n            return;\n        }\n\n        const cachedOptions = resolveCachedOptions();\n        if (cachedOptions) {\n            setFetchedOptions(cachedOptions);\n            hasLoadedRef.current = true;\n            return;\n        }\n\n        if (hasLoadedRef.current && fetchedOptions) {\n            return;\n        }\n\n        let isMounted = true;\n\n        const loadOptions = async() => {\n            setLoading(true);\n\n            try {\n                const fetchedOptions = await fetchOptions();\n\n                if (isMounted) {\n                    setFetchedOptions(fetchedOptions);\n                    persistCachedOptions(fetchedOptions);\n                    hasLoadedRef.current = true;\n                }\n            } catch (error) {\n                console.error('Failed to load combobox options:', error);\n            } finally {\n                if (isMounted) {\n                    setLoading(false);\n                }\n            }\n        };\n\n        loadOptions();\n\n        return () => {\n            isMounted = false;\n        };\n    }, [fetchOptions, fetchedOptions, isOpen, persistCachedOptions, resolveCachedOptions]);\n\n    const selectedValue = useMemo(() => {\n        if (isMultiple) {\n            const selectedValues = Array.isArray(value) ? new Set(value.map((item) => { return toStringValue(item); })) : new Set<string>();\n            return resolvedOptions.filter((option) => { return selectedValues.has(toStringValue(option.value)); });\n        }\n\n        return resolvedOptions.find((option) => { return toStringValue(option.value) === toStringValue(value); }) ?? null;\n    }, [isMultiple, resolvedOptions, value]);\n\n    const handleChange = (nextValue: unknown) => {\n        if (!onValueChange) {\n            return;\n        }\n\n        if (isMultiple) {\n            const nextItems = Array.isArray(nextValue) ? nextValue : [];\n            onValueChange(nextItems.map((item) => { return item.value; }));\n            return;\n        }\n\n        onValueChange(nextValue?.value ?? null);\n    };\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Combobox\n                multiple={isMultiple}\n                items={resolvedOptions}\n                value={selectedValue as ComponentProps<typeof Combobox>['value']}\n                onValueChange={handleChange}\n                open={open}\n                defaultOpen={defaultOpen}\n                onOpenChange={(nextOpen) => {\n                    setInternalOpen(nextOpen);\n                    onOpenChange?.(nextOpen);\n\n                    if (!nextOpen) {\n                        setSearchValue('');\n                    }\n                }}\n                onInputValueChange={(nextValue) => {\n                    const nextSearchValue = String(nextValue ?? '');\n                    setSearchValue(nextSearchValue);\n                    onInputValueChange?.(nextSearchValue);\n                }}\n                itemToStringLabel={(item) => { return (item as ComboboxInputOption | null)?.label ?? ''; }}\n                itemToStringValue={(item) => { return toStringValue((item as ComboboxInputOption | null)?.value); }}\n                disabled={disabled}\n            >\n                {isMultiple ? (\n                    <ComboboxChips ref={anchor} className={className}>\n                        <ComboboxValue>\n                            {(items) => {\n                                return (\n                                    <Fragment>\n                                        {items.map((item) => {\n                                            return (\n                                                <ComboboxChip key={toStringValue(item.value)}>\n                                                    {item.label}\n                                                </ComboboxChip>\n                                            );\n                                        })}\n                                        <ComboboxChipsInput placeholder={placeholder} />\n                                    </Fragment>\n                                );\n                            }}\n                        </ComboboxValue>\n                    </ComboboxChips>\n                ) : (\n                    <ComboboxPrimitiveInput\n                        className={className}\n                        placeholder={placeholder}\n                        showClear={showClear}\n                        disabled={disabled}\n                    />\n                )}\n\n                <ComboboxContent\n                    anchor={isMultiple ? anchor : undefined}\n                    className={contentClassName}\n                >\n                    <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n                    <ComboboxList>\n                        {(item) => {\n                            return (\n                                <ComboboxItem key={toStringValue(item.value)} value={item}>\n                                    <ComboboxHighlightedText text={item.label} search={searchValue} />\n                                </ComboboxItem>\n                            );\n                        }}\n                    </ComboboxList>\n                </ComboboxContent>\n            </Combobox>\n\n            {withLoadingIndicator && loading && <Spinner size=\"xs\" />}\n        </div>\n    );\n};\n"],"mappings":";;;;;;AAsDA,IAAM,+BAAe,IAAI,KAAyB;AAElD,IAAM,iBAAiB,UAA2B;AAC9C,QAAO,OAAO,SAAS,GAAG;;AAG9B,IAAa,iBAAiB,EAC1B,SACA,cACA,QAAQ,MACR,eACA,WAAW,OACX,WAAW,OACX,cAAc,oBACd,eAAe,qBACf,WACA,kBACA,uBAAuB,MACvB,YAAY,MACZ,MACA,aACA,cACA,oBACA,UACA,aAAa,MAAS,KACtB,eAAe,YACO;CACtB,MAAM,CAAC,gBAAgB,qBAAqB,SAAuC,KAAK;CACxF,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ,YAAY,CAAC;CACtE,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,MAAM,eAAe,OAAO,MAAM;CAClC,MAAM,SAAS,mBAAmB;CAClC,MAAM,aAAa;CACnB,MAAM,SAAS,QAAQ;CAEvB,MAAM,kBAAkB,cAAc;AAClC,SAAO,kBAAkB,WAAW,EAAE;IACvC,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,uBAAuB,kBAAkB;AAC3C,MAAI,gBAAgB,CAAC,SACjB,QAAO;EAGX,MAAM,SAAS,aAAa,IAAI,SAAS;AACzC,MAAI,CAAC,OACD,QAAO;AAGX,MAAI,OAAO,aAAa,KAAK,KAAK,EAAE;AAChC,gBAAa,OAAO,SAAS;AAC7B,UAAO;;AAGX,SAAO,OAAO;IACf,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,uBAAuB,aAAa,gBAAuC;AAC7E,MAAI,gBAAgB,CAAC,SACjB;AAGJ,eAAa,IAAI,UAAU;GACvB,SAAS;GACT,WAAW,KAAK,KAAK,GAAG;GAC3B,CAAC;IACH;EAAC;EAAU;EAAY;EAAa,CAAC;AAExC,iBAAgB;AACZ,MAAI,CAAC,gBAAgB,CAAC,OAClB;EAGJ,MAAM,gBAAgB,sBAAsB;AAC5C,MAAI,eAAe;AACf,qBAAkB,cAAc;AAChC,gBAAa,UAAU;AACvB;;AAGJ,MAAI,aAAa,WAAW,eACxB;EAGJ,IAAI,YAAY;EAEhB,MAAM,cAAc,YAAW;AAC3B,cAAW,KAAK;AAEhB,OAAI;IACA,MAAM,iBAAiB,MAAM,cAAc;AAE3C,QAAI,WAAW;AACX,uBAAkB,eAAe;AACjC,0BAAqB,eAAe;AACpC,kBAAa,UAAU;;YAEtB,OAAO;AACZ,YAAQ,MAAM,oCAAoC,MAAM;aAClD;AACN,QAAI,UACA,YAAW,MAAM;;;AAK7B,eAAa;AAEb,eAAa;AACT,eAAY;;IAEjB;EAAC;EAAc;EAAgB;EAAQ;EAAsB;EAAqB,CAAC;CAEtF,MAAM,gBAAgB,cAAc;AAChC,MAAI,YAAY;GACZ,MAAM,iBAAiB,MAAM,QAAQ,MAAM,GAAG,IAAI,IAAI,MAAM,KAAK,SAAS;AAAE,WAAO,cAAc,KAAK;KAAI,CAAC,mBAAG,IAAI,KAAa;AAC/H,UAAO,gBAAgB,QAAQ,WAAW;AAAE,WAAO,eAAe,IAAI,cAAc,OAAO,MAAM,CAAC;KAAI;;AAG1G,SAAO,gBAAgB,MAAM,WAAW;AAAE,UAAO,cAAc,OAAO,MAAM,KAAK,cAAc,MAAM;IAAI,IAAI;IAC9G;EAAC;EAAY;EAAiB;EAAM,CAAC;CAExC,MAAM,gBAAgB,cAAuB;AACzC,MAAI,CAAC,cACD;AAGJ,MAAI,YAAY;AAEZ,kBADkB,MAAM,QAAQ,UAAU,GAAG,YAAY,EAAE,EACnC,KAAK,SAAS;AAAE,WAAO,KAAK;KAAS,CAAC;AAC9D;;AAGJ,gBAAc,WAAW,SAAS,KAAK;;AAG3C,QACI,qBAAC,OAAD;EAAK,WAAU;YAAf,CACI,qBAAC,UAAD;GACI,UAAU;GACV,OAAO;GACP,OAAO;GACP,eAAe;GACT;GACO;GACb,eAAe,aAAa;AACxB,oBAAgB,SAAS;AACzB,mBAAe,SAAS;AAExB,QAAI,CAAC,SACD,gBAAe,GAAG;;GAG1B,qBAAqB,cAAc;IAC/B,MAAM,kBAAkB,OAAO,aAAa,GAAG;AAC/C,mBAAe,gBAAgB;AAC/B,yBAAqB,gBAAgB;;GAEzC,oBAAoB,SAAS;AAAE,WAAQ,MAAqC,SAAS;;GACrF,oBAAoB,SAAS;AAAE,WAAO,cAAe,MAAqC,MAAM;;GACtF;aAtBd,CAwBK,aACG,oBAAC,eAAD;IAAe,KAAK;IAAmB;cACnC,oBAAC,eAAD,EAAA,WACM,UAAU;AACR,YACI,qBAAC,UAAD,EAAA,UAAA,CACK,MAAM,KAAK,SAAS;AACjB,aACI,oBAAC,cAAD,EAAA,UACK,KAAK,OACK,EAFI,cAAc,KAAK,MAAM,CAE7B;OAErB,EACF,oBAAC,oBAAD,EAAiC,aAAe,CAAA,CACzC,EAAA,CAAA;OAGP,CAAA;IACJ,CAAA,GAEhB,oBAAC,wBAAD;IACe;IACE;IACF;IACD;IACZ,CAAA,EAGN,qBAAC,iBAAD;IACI,QAAQ,aAAa,SAAS,KAAA;IAC9B,WAAW;cAFf,CAII,oBAAC,eAAD,EAAA,UAAgB,cAA6B,CAAA,EAC7C,oBAAC,cAAD,EAAA,WACM,SAAS;AACP,YACI,oBAAC,cAAD;MAA8C,OAAO;gBACjD,oBAAC,yBAAD;OAAyB,MAAM,KAAK;OAAO,QAAQ;OAAe,CAAA;MACvD,EAFI,cAAc,KAAK,MAAM,CAE7B;OAGZ,CAAA,CACD;MACX;MAEV,wBAAwB,WAAW,oBAAC,SAAD,EAAS,MAAK,MAAO,CAAA,CACvD"}
+{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../src/components/ComboboxInput.tsx"],"sourcesContent":["import {\n    Fragment, useCallback, useEffect, useMemo, useRef, useState,\n} from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport {\n    Combobox,\n    ComboboxPrimitiveInput,\n    ComboboxContent,\n    ComboboxEmpty,\n    ComboboxList,\n    ComboboxItem,\n    ComboboxValue,\n    ComboboxChips,\n    ComboboxChip,\n    ComboboxChipsInput,\n    ComboboxHighlightedText,\n    useComboboxAnchor,\n} from '@verbb/plugin-kit-react/components/Combobox';\n\nexport type ComboboxInputOption = {\n    label: string;\n    value: string | number;\n    icon?: string | null;\n    [key: string]: unknown;\n};\n\nexport type ComboboxInputProps = {\n    options?: ComboboxInputOption[];\n    fetchOptions?: () => Promise<ComboboxInputOption[]>;\n    value?: string | number | Array<string | number> | null;\n    onValueChange?: (value: string | number | Array<string | number> | null) => void;\n    multiple?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    emptyMessage?: string;\n    className?: string;\n    contentClassName?: string;\n    withLoadingIndicator?: boolean;\n    showClear?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    onInputValueChange?: (value: string) => void;\n    cacheKey?: string;\n    cacheTtlMs?: number;\n    disableCache?: boolean;\n};\n\ntype CacheEntry = {\n    options: ComboboxInputOption[];\n    expiresAt: number;\n};\n\nconst optionsCache = new Map<string, CacheEntry>();\n\nconst toStringValue = (value: unknown): string => {\n    return String(value ?? '');\n};\n\nconst OptionIcon = ({ icon }: { icon?: string | null }) => {\n    if (!icon || typeof icon !== 'string') {\n        return null;\n    }\n\n    return (\n        <span\n            className=\"text-slate-500 [&_svg]:size-4 [&_svg]:shrink-0\"\n            aria-hidden=\"true\"\n            dangerouslySetInnerHTML={{ __html: icon }}\n        />\n    );\n};\n\nexport const ComboboxInput = ({\n    options,\n    fetchOptions,\n    value = null,\n    onValueChange,\n    multiple = false,\n    disabled = false,\n    placeholder = 'Select an option',\n    emptyMessage = 'No options found.',\n    className,\n    contentClassName,\n    withLoadingIndicator = true,\n    showClear = true,\n    open,\n    defaultOpen,\n    onOpenChange,\n    onInputValueChange,\n    cacheKey,\n    cacheTtlMs = 5 * 60 * 1000,\n    disableCache = false,\n}: ComboboxInputProps) => {\n    const [fetchedOptions, setFetchedOptions] = useState<ComboboxInputOption[] | null>(null);\n    const [loading, setLoading] = useState(false);\n    const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));\n    const [searchValue, setSearchValue] = useState('');\n    const hasLoadedRef = useRef(false);\n    const anchor = useComboboxAnchor();\n    const isMultiple = multiple;\n    const isOpen = open ?? internalOpen;\n\n    const resolvedOptions = useMemo(() => {\n        return fetchedOptions ?? options ?? [];\n    }, [fetchedOptions, options]);\n\n    const resolveCachedOptions = useCallback(() => {\n        if (disableCache || !cacheKey) {\n            return null;\n        }\n\n        const cached = optionsCache.get(cacheKey);\n        if (!cached) {\n            return null;\n        }\n\n        if (cached.expiresAt <= Date.now()) {\n            optionsCache.delete(cacheKey);\n            return null;\n        }\n\n        return cached.options;\n    }, [cacheKey, disableCache]);\n\n    const persistCachedOptions = useCallback((nextOptions: ComboboxInputOption[]) => {\n        if (disableCache || !cacheKey) {\n            return;\n        }\n\n        optionsCache.set(cacheKey, {\n            options: nextOptions,\n            expiresAt: Date.now() + cacheTtlMs,\n        });\n    }, [cacheKey, cacheTtlMs, disableCache]);\n\n    useEffect(() => {\n        if (!fetchOptions || !isOpen) {\n            return;\n        }\n\n        const cachedOptions = resolveCachedOptions();\n        if (cachedOptions) {\n            setFetchedOptions(cachedOptions);\n            hasLoadedRef.current = true;\n            return;\n        }\n\n        if (hasLoadedRef.current && fetchedOptions) {\n            return;\n        }\n\n        let isMounted = true;\n\n        const loadOptions = async() => {\n            setLoading(true);\n\n            try {\n                const fetchedOptions = await fetchOptions();\n\n                if (isMounted) {\n                    setFetchedOptions(fetchedOptions);\n                    persistCachedOptions(fetchedOptions);\n                    hasLoadedRef.current = true;\n                }\n            } catch (error) {\n                console.error('Failed to load combobox options:', error);\n            } finally {\n                if (isMounted) {\n                    setLoading(false);\n                }\n            }\n        };\n\n        loadOptions();\n\n        return () => {\n            isMounted = false;\n        };\n    }, [fetchOptions, fetchedOptions, isOpen, persistCachedOptions, resolveCachedOptions]);\n\n    const selectedValue = useMemo(() => {\n        if (isMultiple) {\n            const selectedValues = Array.isArray(value) ? new Set(value.map((item) => { return toStringValue(item); })) : new Set<string>();\n            return resolvedOptions.filter((option) => { return selectedValues.has(toStringValue(option.value)); });\n        }\n\n        return resolvedOptions.find((option) => { return toStringValue(option.value) === toStringValue(value); }) ?? null;\n    }, [isMultiple, resolvedOptions, value]);\n\n    const handleChange = (nextValue: unknown) => {\n        if (!onValueChange) {\n            return;\n        }\n\n        if (isMultiple) {\n            const nextItems = Array.isArray(nextValue) ? nextValue : [];\n            onValueChange(nextItems.map((item) => { return item.value; }));\n            return;\n        }\n\n        onValueChange(nextValue?.value ?? null);\n    };\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Combobox\n                multiple={isMultiple}\n                items={resolvedOptions}\n                value={selectedValue as ComponentProps<typeof Combobox>['value']}\n                onValueChange={handleChange}\n                open={open}\n                defaultOpen={defaultOpen}\n                onOpenChange={(nextOpen) => {\n                    setInternalOpen(nextOpen);\n                    onOpenChange?.(nextOpen);\n\n                    if (!nextOpen) {\n                        setSearchValue('');\n                    }\n                }}\n                onInputValueChange={(nextValue) => {\n                    const nextSearchValue = String(nextValue ?? '');\n                    setSearchValue(nextSearchValue);\n                    onInputValueChange?.(nextSearchValue);\n                }}\n                itemToStringLabel={(item) => { return (item as ComboboxInputOption | null)?.label ?? ''; }}\n                itemToStringValue={(item) => { return toStringValue((item as ComboboxInputOption | null)?.value); }}\n                disabled={disabled}\n            >\n                {isMultiple ? (\n                    <ComboboxChips ref={anchor} className={className}>\n                        <ComboboxValue>\n                            {(items) => {\n                                return (\n                                    <Fragment>\n                                        {items.map((item) => {\n                                            return (\n                                                <ComboboxChip key={toStringValue(item.value)}>\n                                                    <OptionIcon icon={item.icon} />\n                                                    {item.label}\n                                                </ComboboxChip>\n                                            );\n                                        })}\n                                        <ComboboxChipsInput placeholder={placeholder} />\n                                    </Fragment>\n                                );\n                            }}\n                        </ComboboxValue>\n                    </ComboboxChips>\n                ) : (\n                    <ComboboxPrimitiveInput\n                        className={className}\n                        placeholder={placeholder}\n                        showClear={showClear}\n                        disabled={disabled}\n                    />\n                )}\n\n                <ComboboxContent\n                    anchor={isMultiple ? anchor : undefined}\n                    className={contentClassName}\n                >\n                    <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n                    <ComboboxList>\n                        {(item) => {\n                            return (\n                                <ComboboxItem key={toStringValue(item.value)} value={item}>\n                                    <span className=\"flex items-center gap-2\">\n                                        <OptionIcon icon={item.icon} />\n                                        <ComboboxHighlightedText text={item.label} search={searchValue} />\n                                    </span>\n                                </ComboboxItem>\n                            );\n                        }}\n                    </ComboboxList>\n                </ComboboxContent>\n            </Combobox>\n\n            {withLoadingIndicator && loading && <Spinner size=\"xs\" />}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/components/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/components/DropdownMenu.js

@@ -12,17 +12,15 @@ var dropdownMenuItemVariants = cva([
 	"relative flex w-full cursor-default items-center outline-hidden select-none",
 	"focus:bg-slate-100 data-[highlighted]:bg-slate-100",
 	"data-disabled:pointer-events-none data-disabled:opacity-50",
-	"[&_svg:not([class*=\"size-\"])]:[width:var(--icon-size)]",
-	"[&_svg:not([class*=\"size-\"])]:[height:var(--icon-size)]",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0"
 ], {
 	variants: {
 		size: {
-			xs: "py-[3px] px-[8px] gap-1.5 text-[12px] [--icon-size:10px]",
-			sm: "py-[4px] px-[10px] gap-1.75 text-[13px] [--icon-size:11px]",
-			default: "py-[8px] px-[12px] gap-2.5 text-sm [--icon-size:12px]",
-			lg: "py-[10px] px-[14px] gap-3 text-base [--icon-size:12px]",
-			xl: "py-[12px] px-[16px] gap-3 text-lg [--icon-size:12px]"
+			xs: "py-[3px] px-[8px] gap-1.5 text-[12px] [&_svg:not([class*='size-'])]:size-2.5",
+			sm: "py-[4px] px-[10px] gap-1.75 text-[13px] [&_svg:not([class*='size-'])]:size-3",
+			default: "py-[8px] px-[12px] gap-2.5 text-sm [&_svg:not([class*='size-'])]:size-3",
+			lg: "py-[10px] px-[14px] gap-3 text-base [&_svg:not([class*='size-'])]:size-3.5",
+			xl: "py-[12px] px-[16px] gap-3 text-lg [&_svg:not([class*='size-'])]:size-4"
 		},
 		variant: {
 			default: "",

package/dist/components/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../src/components/DropdownMenu.tsx"],"sourcesContent":["import { ComponentProps, createContext, useContext } from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nconst dropdownMenuItemVariants = cva([\n    // Reset\n    'relative flex w-full cursor-default items-center outline-hidden select-none',\n\n    // Focus\n    'focus:bg-slate-100 data-[highlighted]:bg-slate-100',\n\n    // Disabled\n    'data-disabled:pointer-events-none data-disabled:opacity-50',\n\n    // SVG\n    '[&_svg:not([class*=\"size-\"])]:[width:var(--icon-size)]',\n    '[&_svg:not([class*=\"size-\"])]:[height:var(--icon-size)]',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n], {\n    variants: {\n        size: {\n            xs: 'py-[3px] px-[8px] gap-1.5 text-[12px] [--icon-size:10px]',\n            sm: 'py-[4px] px-[10px] gap-1.75 text-[13px] [--icon-size:11px]',\n            default: 'py-[8px] px-[12px] gap-2.5 text-sm [--icon-size:12px]',\n            lg: 'py-[10px] px-[14px] gap-3 text-base [--icon-size:12px]',\n            xl: 'py-[12px] px-[16px] gap-3 text-lg [--icon-size:12px]',\n        },\n        variant: {\n            default: '',\n            destructive: 'text-error',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        variant: 'default',\n    },\n});\n\nconst dropdownMenuLabelVariants = cva([\n    // Theme\n    'text-slate-700',\n], {\n    variants: {\n        size: {\n            xs: 'py-[0px] px-[8px] text-[11px]',\n            sm: 'py-[0px] px-[10px] text-[11px]',\n            default: 'py-[0px] px-[12px] text-[13px]',\n            lg: 'py-[0px] px-[14px] text-[14px]',\n            xl: 'py-[0px] px-[16px] text-[15px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst dropdownMenuShortcutVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'text-[11px]',\n            sm: 'text-xs',\n            default: 'text-sm',\n            lg: 'text-sm',\n            xl: 'text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype DropdownMenuSize = VariantProps<typeof dropdownMenuItemVariants>['size'];\n\nconst DropdownMenuContext = createContext<{ size?: DropdownMenuSize }>({});\n\nfunction DropdownMenu({\n    size,\n    children,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Root> & { size?: DropdownMenuSize }) {\n    return (\n        <DropdownMenuContext.Provider value={{ size }}>\n            <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n                {children}\n            </MenuPrimitive.Root>\n        </DropdownMenuContext.Provider>\n    );\n}\nfunction DropdownMenuPortal({\n    container,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Portal>) {\n    const resolvedPortalContainer = getPortalContainer(container);\n\n    return (\n        <MenuPrimitive.Portal\n            data-slot=\"dropdown-menu-portal\"\n            container={resolvedPortalContainer}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuTrigger({\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Trigger> & { size?: DropdownMenuSize }) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Trigger\n            data-slot=\"dropdown-menu-trigger\"\n            data-size={finalSize}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuContent({\n    align = 'start',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    className,\n    portalClassName,\n    portalContainer,\n    ...props\n}: MenuPrimitive.Popup.Props &\n    Pick<\n        MenuPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <MenuPrimitive.Portal className={resolvedPortalClassName} container={resolvedPortalContainer}>\n            <MenuPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"z-[250]\"\n            >\n                <MenuPrimitive.Popup\n                    data-slot=\"dropdown-menu-content\"\n                    className={cn(\n                        // Reset\n                        'relative isolate z-[250] overflow-x-hidden overflow-y-auto',\n\n                        // Layout\n                        'min-w-(--anchor-width)',\n                        // \"min-w-36 max-h-(--available-height) w-(--anchor-width)\",\n\n                        // Theme\n                        'py-1',\n                        'rounded-md bg-white',\n                        'shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]',\n\n                        // Animation\n                        'duration-100',\n                        'data-open:animate-in data-closed:animate-out',\n                        'data-open:fade-in-0 data-closed:fade-out-0',\n                        'data-open:zoom-in-95 data-closed:zoom-out-95',\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=inline-start]:slide-in-from-right-2',\n                        'data-[side=inline-end]:slide-in-from-left-2',\n                        'data-[align-trigger=true]:animate-none',\n                        'origin-(--transform-origin)',\n\n                        className,\n                    )}\n                    {...props}\n                />\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n};\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n    return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuLabel({\n    className,\n    inset,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.GroupLabel> & VariantProps<typeof dropdownMenuLabelVariants> & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.GroupLabel\n            data-slot=\"dropdown-menu-label\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuLabelVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuItem({\n    className,\n    inset,\n    size,\n    variant = 'default',\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {\n    inset?: boolean\n    variant?: 'default' | 'destructive'\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Item\n            data-slot=\"dropdown-menu-item\"\n            data-inset={inset}\n            data-variant={variant}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, variant, className }),\n\n                inset && 'pl-8',\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuSub({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n    return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n    className,\n    inset,\n    children,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n    inset?: boolean\n    size?: DropdownMenuSize\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.SubmenuTrigger\n            data-slot=\"dropdown-menu-sub-trigger\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize }),\n\n                // Keep submenu triggers visually active while their child menu is open\n                'data-[popup-open]:bg-slate-100',\n\n                // SVG\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n\n                inset && 'pl-8',\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            <FontAwesomeIcon icon={faChevronRight} className=\"ml-auto size-3 text-slate-700\" />\n        </MenuPrimitive.SubmenuTrigger>\n    );\n};\n\nfunction DropdownMenuSubContent({\n    align = 'start',\n    alignOffset = -3,\n    side = 'right',\n    sideOffset = 0,\n    className,\n    ...props\n}: ComponentProps<typeof DropdownMenuContent>) {\n\n    return (\n        <DropdownMenuContent\n            data-slot=\"dropdown-menu-sub-content\"\n            className={cn(\n                'min-w-32 w-auto',\n                className,\n            )}\n            align={align}\n            alignOffset={alignOffset}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuCheckboxItem({\n    className,\n    children,\n    checked,\n    inset,\n    ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.CheckboxItem\n            data-slot=\"dropdown-menu-checkbox-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            checked={checked}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-checkbox-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.CheckboxItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.CheckboxItemIndicator>\n            </span>\n        </MenuPrimitive.CheckboxItem>\n    );\n};\n\nfunction DropdownMenuRadioGroup({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n    return (\n        <MenuPrimitive.RadioGroup\n            data-slot=\"dropdown-menu-radio-group\"\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuRadioItem({\n    className,\n    children,\n    inset,\n    ...props\n}: MenuPrimitive.RadioItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.RadioItem\n            data-slot=\"dropdown-menu-radio-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-radio-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.RadioItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.RadioItemIndicator>\n            </span>\n        </MenuPrimitive.RadioItem>\n    );\n};\n\nfunction DropdownMenuSeparator({\n    className,\n    ...props\n}: MenuPrimitive.Separator.Props) {\n    return (\n        <MenuPrimitive.Separator\n            data-slot=\"dropdown-menu-separator\"\n            className={cn(\n                // Theme\n                'my-1 h-px bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuShortcut({\n    className,\n    ...props\n}: ComponentProps<'span'>) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <span\n            data-slot=\"dropdown-menu-shortcut\"\n            className={cn(\n                'text-slate-700 group-focus/dropdown-menu-item:text-slate-700 ml-auto tracking-widest',\n\n                dropdownMenuShortcutVariants({ size: finalSize, className }),\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    DropdownMenu,\n    DropdownMenuPortal,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuLabel,\n    DropdownMenuItem,\n    DropdownMenuCheckboxItem,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuSub,\n    DropdownMenuSubTrigger,\n    DropdownMenuSubContent,\n};\n"],"mappings":";;;;;;;;;;AASA,IAAM,2BAA2B,IAAI;CAEjC;CAGA;CAGA;CAGA;CACA;CACA;CACH,EAAE;CACC,UAAU;EACN,MAAM;GACF,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACP;EACD,SAAS;GACL,SAAS;GACT,aAAa;GAChB;EACJ;CACD,iBAAiB;EACb,MAAM;EACN,SAAS;EACZ;CACJ,CAAC;AAEF,IAAM,4BAA4B,IAAI,CAElC,iBACH,EAAE;CACC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACP,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,IAAM,+BAA+B,IAAI,IAAI;CACzC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACP,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAIF,IAAM,sBAAsB,cAA2C,EAAE,CAAC;AAE1E,SAAS,aAAa,EAClB,MACA,UACA,GAAG,SACqE;AACxE,QACI,oBAAC,oBAAoB,UAArB;EAA8B,OAAO,EAAE,MAAM;YACzC,oBAAC,KAAc,MAAf;GAAoB,aAAU;GAAgB,GAAI;GAC7C;GACgB,CAAA;EACM,CAAA;;AAGvC,SAAS,mBAAmB,EACxB,WACA,GAAG,SACyC;CAC5C,MAAM,0BAA0B,mBAAmB,UAAU;AAE7D,QACI,oBAAC,KAAc,QAAf;EACI,aAAU;EACV,WAAW;EACX,GAAI;EACN,CAAA;;AAIV,SAAS,oBAAoB,EACzB,MACA,GAAG,SACwE;CAC3E,MAAM,UAAU,WAAW,oBAAoB;CAC/C,MAAM,YAAY,QAAQ,QAAQ,QAAQ;AAE1C,QACI,oBAAC,KAAc,SAAf;EACI,aAAU;EACV,aAAW;EACX,GAAI;EACN,CAAA;;AAIV,SAAS,oBAAoB,EACzB,QAAQ,SACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,WACA,iBACA,iBACA,GAAG,SAQA;CACH,MAAM,0BAA0B,mBAAmB,gBAAgB;CACnE,MAAM,0BAA0B,mBAAmB,gBAAgB;AAEnE,QACI,oBAAC,KAAc,QAAf;EAAsB,WAAW;EAAyB,WAAW;YACjE,oBAAC,KAAc,YAAf;GACW;GACM;GACP;GACM;GACZ,WAAU;aAEV,oBAAC,KAAc,OAAf;IACI,aAAU;IACV,WAAW,GAEP,8DAGA,0BAIA,QACA,uBACA,wEAGA,gBACA,gDACA,8CACA,gDACA,0CACA,0CACA,0CACA,0CACA,kDACA,+CACA,0CACA,+BAEA,UACH;IACD,GAAI;IACN,CAAA;GACqB,CAAA;EACR,CAAA;;AAI/B,SAAS,kBAAkB,EAAE,GAAG,SAAoC;AAChE,QAAO,oBAAC,KAAc,OAAf;EAAqB,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAG7E,SAAS,kBAAkB,EACvB,WACA,OACA,MACA,GAAG,SAGJ;CACC,MAAM,UAAU,WAAW,oBAAoB;CAC/C,MAAM,YAAY,QAAQ,QAAQ,QAAQ;AAE1C,QACI,oBAAC,KAAc,YAAf;EACI,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GACP,0BAA0B;GAAE,MAAM;GAAW;GAAW,CAAC,CAC5D;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,iBAAiB,EACtB,WACA,OACA,MACA,UAAU,WACV,GAAG,SAIJ;CACC,MAAM,UAAU,WAAW,oBAAoB;CAC/C,MAAM,YAAY,QAAQ,QAAQ,QAAQ;AAE1C,QACI,oBAAC,KAAc,MAAf;EACI,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,aAAW;EACX,WAAW,GACP,yBAAyB;GAAE,MAAM;GAAW;GAAS;GAAW,CAAC,EAEjE,SAAS,OACZ;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,gBAAgB,EACrB,GAAG,SAC8C;AACjD,QAAO,oBAAC,KAAc,aAAf;EAA2B,aAAU;EAAoB,GAAI;EAAS,CAAA;;AAGjF,SAAS,uBAAuB,EAC5B,WACA,OACA,UACA,MACA,GAAG,SAIJ;CACC,MAAM,UAAU,WAAW,oBAAoB;CAC/C,MAAM,YAAY,QAAQ,QAAQ,QAAQ;AAE1C,QACI,qBAAC,KAAc,gBAAf;EACI,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GACP,yBAAyB,EAAE,MAAM,WAAW,CAAC,EAG7C,kCAGA,gDAEA,SAAS,QAET,UACH;EACD,GAAI;YAjBR,CAmBK,UACD,oBAAC,iBAAD;GAAiB,MAAM;GAAgB,WAAU;GAAkC,CAAA,CACxD;;;AAIvC,SAAS,uBAAuB,EAC5B,QAAQ,SACR,cAAc,IACd,OAAO,SACP,aAAa,GACb,WACA,GAAG,SACwC;AAE3C,QACI,oBAAC,qBAAD;EACI,aAAU;EACV,WAAW,GACP,mBACA,UACH;EACM;EACM;EACP;EACM;EACZ,GAAI;EACN,CAAA;;AAIV,SAAS,yBAAyB,EAC9B,WACA,UACA,SACA,OACA,GAAG,SAGJ;CAEC,MAAM,YADU,WAAW,oBACT,EAAS,QAAQ;AAEnC,QACI,qBAAC,KAAc,cAAf;EACI,aAAU;EACV,cAAY;EACZ,WAAW,GACP,yBAAyB;GAAE,MAAM;GAAW;GAAW,CAAC,CAC3D;EACQ;EACT,GAAI;YAPR,CASK,UACD,oBAAC,QAAD;GACI,aAAU;GACV,WAAW,GACP,eACH;aAED,oBAAC,KAAc,uBAAf,EAAA,UACI,oBAAC,iBAAD;IAAiB,MAAM;IAAS,WAAW,GAAG,SAAS;IAAI,CAAA,EACzB,CAAA;GACnC,CAAA,CACkB;;;AAIrC,SAAS,uBAAuB,EAC5B,GAAG,SAC6C;AAChD,QACI,oBAAC,KAAc,YAAf;EACI,aAAU;EACV,GAAI;EACN,CAAA;;AAIV,SAAS,sBAAsB,EAC3B,WACA,UACA,OACA,GAAG,SAGJ;CAEC,MAAM,YADU,WAAW,oBACT,EAAS,QAAQ;AAEnC,QACI,qBAAC,KAAc,WAAf;EACI,aAAU;EACV,cAAY;EACZ,WAAW,GACP,yBAAyB;GAAE,MAAM;GAAW;GAAW,CAAC,CAC3D;EACD,GAAI;YANR,CAQK,UACD,oBAAC,QAAD;GACI,aAAU;GACV,WAAW,GACP,eACH;aAED,oBAAC,KAAc,oBAAf,EAAA,UACI,oBAAC,iBAAD;IAAiB,MAAM;IAAS,WAAW,GAAG,SAAS;IAAI,CAAA,EAC5B,CAAA;GAChC,CAAA,CACe;;;AAIlC,SAAS,sBAAsB,EAC3B,WACA,GAAG,SAC2B;AAC9B,QACI,oBAAC,KAAc,WAAf;EACI,aAAU;EACV,WAAW,GAEP,0BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,qBAAqB,EAC1B,WACA,GAAG,SACoB;AAIvB,QACI,oBAAC,QAAD;EACI,aAAU;EACV,WAAW,GACP,wFAEA,6BAA6B;GAAE,MAT3B,WAAW,oBACT,EAAS,QAAQ;GAQyB;GAAW,CAAC,EAE5D,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../src/components/DropdownMenu.tsx"],"sourcesContent":["import { ComponentProps, createContext, useContext } from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nconst dropdownMenuItemVariants = cva([\n    // Reset\n    'relative flex w-full cursor-default items-center outline-hidden select-none',\n\n    // Focus\n    'focus:bg-slate-100 data-[highlighted]:bg-slate-100',\n\n    // Disabled\n    'data-disabled:pointer-events-none data-disabled:opacity-50',\n\n    // SVG — use single-quoted attribute selectors so Tailwind emits\n    // svg:not([class*=size-]) rather than a broken escaped form.\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n], {\n    variants: {\n        size: {\n            xs: 'py-[3px] px-[8px] gap-1.5 text-[12px] [&_svg:not([class*=\\'size-\\'])]:size-2.5',\n            sm: 'py-[4px] px-[10px] gap-1.75 text-[13px] [&_svg:not([class*=\\'size-\\'])]:size-3',\n            default: 'py-[8px] px-[12px] gap-2.5 text-sm [&_svg:not([class*=\\'size-\\'])]:size-3',\n            lg: 'py-[10px] px-[14px] gap-3 text-base [&_svg:not([class*=\\'size-\\'])]:size-3.5',\n            xl: 'py-[12px] px-[16px] gap-3 text-lg [&_svg:not([class*=\\'size-\\'])]:size-4',\n        },\n        variant: {\n            default: '',\n            destructive: 'text-error',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        variant: 'default',\n    },\n});\n\nconst dropdownMenuLabelVariants = cva([\n    // Theme\n    'text-slate-700',\n], {\n    variants: {\n        size: {\n            xs: 'py-[0px] px-[8px] text-[11px]',\n            sm: 'py-[0px] px-[10px] text-[11px]',\n            default: 'py-[0px] px-[12px] text-[13px]',\n            lg: 'py-[0px] px-[14px] text-[14px]',\n            xl: 'py-[0px] px-[16px] text-[15px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst dropdownMenuShortcutVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'text-[11px]',\n            sm: 'text-xs',\n            default: 'text-sm',\n            lg: 'text-sm',\n            xl: 'text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype DropdownMenuSize = VariantProps<typeof dropdownMenuItemVariants>['size'];\n\nconst DropdownMenuContext = createContext<{ size?: DropdownMenuSize }>({});\n\nfunction DropdownMenu({\n    size,\n    children,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Root> & { size?: DropdownMenuSize }) {\n    return (\n        <DropdownMenuContext.Provider value={{ size }}>\n            <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n                {children}\n            </MenuPrimitive.Root>\n        </DropdownMenuContext.Provider>\n    );\n}\nfunction DropdownMenuPortal({\n    container,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Portal>) {\n    const resolvedPortalContainer = getPortalContainer(container);\n\n    return (\n        <MenuPrimitive.Portal\n            data-slot=\"dropdown-menu-portal\"\n            container={resolvedPortalContainer}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuTrigger({\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Trigger> & { size?: DropdownMenuSize }) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Trigger\n            data-slot=\"dropdown-menu-trigger\"\n            data-size={finalSize}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuContent({\n    align = 'start',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    className,\n    portalClassName,\n    portalContainer,\n    ...props\n}: MenuPrimitive.Popup.Props &\n    Pick<\n        MenuPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <MenuPrimitive.Portal className={resolvedPortalClassName} container={resolvedPortalContainer}>\n            <MenuPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"z-[250]\"\n            >\n                <MenuPrimitive.Popup\n                    data-slot=\"dropdown-menu-content\"\n                    className={cn(\n                        // Reset\n                        'relative isolate z-[250] overflow-x-hidden overflow-y-auto',\n\n                        // Layout\n                        'min-w-(--anchor-width)',\n                        // \"min-w-36 max-h-(--available-height) w-(--anchor-width)\",\n\n                        // Theme\n                        'py-1',\n                        'rounded-md bg-white',\n                        'shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]',\n\n                        // Animation\n                        'duration-100',\n                        'data-open:animate-in data-closed:animate-out',\n                        'data-open:fade-in-0 data-closed:fade-out-0',\n                        'data-open:zoom-in-95 data-closed:zoom-out-95',\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=inline-start]:slide-in-from-right-2',\n                        'data-[side=inline-end]:slide-in-from-left-2',\n                        'data-[align-trigger=true]:animate-none',\n                        'origin-(--transform-origin)',\n\n                        className,\n                    )}\n                    {...props}\n                />\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n};\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n    return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuLabel({\n    className,\n    inset,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.GroupLabel> & VariantProps<typeof dropdownMenuLabelVariants> & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.GroupLabel\n            data-slot=\"dropdown-menu-label\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuLabelVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuItem({\n    className,\n    inset,\n    size,\n    variant = 'default',\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {\n    inset?: boolean\n    variant?: 'default' | 'destructive'\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Item\n            data-slot=\"dropdown-menu-item\"\n            data-inset={inset}\n            data-variant={variant}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, variant, className }),\n\n                inset && 'pl-8',\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuSub({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n    return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n    className,\n    inset,\n    children,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n    inset?: boolean\n    size?: DropdownMenuSize\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.SubmenuTrigger\n            data-slot=\"dropdown-menu-sub-trigger\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize }),\n\n                // Keep submenu triggers visually active while their child menu is open\n                'data-[popup-open]:bg-slate-100',\n\n                // SVG\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n\n                inset && 'pl-8',\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            <FontAwesomeIcon icon={faChevronRight} className=\"ml-auto size-3 text-slate-700\" />\n        </MenuPrimitive.SubmenuTrigger>\n    );\n};\n\nfunction DropdownMenuSubContent({\n    align = 'start',\n    alignOffset = -3,\n    side = 'right',\n    sideOffset = 0,\n    className,\n    ...props\n}: ComponentProps<typeof DropdownMenuContent>) {\n\n    return (\n        <DropdownMenuContent\n            data-slot=\"dropdown-menu-sub-content\"\n            className={cn(\n                'min-w-32 w-auto',\n                className,\n            )}\n            align={align}\n            alignOffset={alignOffset}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuCheckboxItem({\n    className,\n    children,\n    checked,\n    inset,\n    ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.CheckboxItem\n            data-slot=\"dropdown-menu-checkbox-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            checked={checked}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-checkbox-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.CheckboxItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.CheckboxItemIndicator>\n            </span>\n        </MenuPrimitive.CheckboxItem>\n    );\n};\n\nfunction DropdownMenuRadioGroup({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n    return (\n        <MenuPrimitive.RadioGroup\n            data-slot=\"dropdown-menu-radio-group\"\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuRadioItem({\n    className,\n    children,\n    inset,\n    ...props\n}: MenuPrimitive.RadioItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.RadioItem\n            data-slot=\"dropdown-menu-radio-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-radio-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.RadioItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.RadioItemIndicator>\n            </span>\n        </MenuPrimitive.RadioItem>\n    );\n};\n\nfunction DropdownMenuSeparator({\n    className,\n    ...props\n}: MenuPrimitive.Separator.Props) {\n    return (\n        <MenuPrimitive.Separator\n            data-slot=\"dropdown-menu-separator\"\n            className={cn(\n                // Theme\n                'my-1 h-px bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuShortcut({\n    className,\n    ...props\n}: ComponentProps<'span'>) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <span\n            data-slot=\"dropdown-menu-shortcut\"\n            className={cn(\n                'text-slate-700 group-focus/dropdown-menu-item:text-slate-700 ml-auto tracking-widest',\n\n                dropdownMenuShortcutVariants({ size: finalSize, className }),\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    DropdownMenu,\n    DropdownMenuPortal,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuLabel,\n    DropdownMenuItem,\n    DropdownMenuCheckboxItem,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuSub,\n    DropdownMenuSubTrigger,\n    DropdownMenuSubContent,\n};\n"],"mappings":"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"}

package/dist/components/TiptapContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TiptapContent.d.ts","sourceRoot":"","sources":["../../src/components/TiptapContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAa,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,gCAAqC,kBAAkB,4CAwBpF,CAAC"}
+{"version":3,"file":"TiptapContent.d.ts","sourceRoot":"","sources":["../../src/components/TiptapContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAa,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAcF,eAAO,MAAM,aAAa,GAAI,gCAAqC,kBAAkB,4CA4CpF,CAAC"}

package/dist/components/TiptapContent.js

@@ -1,19 +1,38 @@
 import { cn } from "../utils/classes.js";
 import "../utils/index.js";
 import { createTiptapExtensions, valueToContent } from "./tiptap/editorConfig.js";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { EditorContent, useEditor } from "@tiptap/react";
 //#region src/components/TiptapContent.tsx
+var serializeDocContent = (content) => {
+	if (!content) return "[]";
+	if (Array.isArray(content.content)) return JSON.stringify(content.content);
+	return JSON.stringify(content);
+};
 var TiptapContent = ({ value = "", className, ...props }) => {
+	const extensions = useMemo(() => {
+		return createTiptapExtensions();
+	}, []);
+	const editorContent = useMemo(() => {
+		return valueToContent(value);
+	}, [value]);
+	const editor = useEditor({
+		extensions,
+		content: editorContent,
+		editable: false
+	});
+	useEffect(() => {
+		if (!editor) return;
+		const incomingContent = editorContent ?? {
+			type: "doc",
+			content: []
+		};
+		if (serializeDocContent(editorContent) === serializeDocContent(editor.getJSON())) return;
+		editor.commands.setContent(incomingContent);
+	}, [editor, editorContent]);
 	return /* @__PURE__ */ jsx(EditorContent, {
-		editor: useEditor({
-			extensions: useMemo(() => {
-				return createTiptapExtensions();
-			}, []),
-			content: valueToContent(value),
-			editable: false
-		}),
+		editor,
 		className: cn("[&_.ProseMirror]:outline-none", "[&_.ProseMirror_p]:m-0", "[&_.ProseMirror_p]:leading-[1.4]", "[&_.ProseMirror]:text-sm", className),
 		...props
 	});

package/dist/components/TiptapContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TiptapContent.js","names":[],"sources":["../../src/components/TiptapContent.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { createTiptapExtensions, valueToContent } from './tiptap/editorConfig';\n\ntype TiptapContentProps = Omit<ComponentProps<typeof EditorContent>, 'editor'> & {\n    value?: unknown;\n    className?: string;\n};\n\nexport const TiptapContent = ({ value = '', className, ...props }: TiptapContentProps) => {\n    const extensions = useMemo(() => {\n        return createTiptapExtensions();\n    }, []);\n\n    const editor = useEditor({\n        extensions,\n        content: valueToContent(value),\n        editable: false,\n    });\n\n    return (\n        <EditorContent\n            editor={editor}\n            className={cn(\n                '[&_.ProseMirror]:outline-none',\n                '[&_.ProseMirror_p]:m-0',\n                '[&_.ProseMirror_p]:leading-[1.4]',\n                '[&_.ProseMirror]:text-sm',\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAWA,IAAa,iBAAiB,EAAE,QAAQ,IAAI,WAAW,GAAG,YAAgC;AAWtF,QACI,oBAAC,eAAD;EACY,QARD,UAAU;GACrB,YALe,cAAc;AAC7B,WAAO,wBAAwB;MAChC,EAAE,CAGD;GACA,SAAS,eAAe,MAAM;GAC9B,UAAU;GACb,CAIe;EACR,WAAW,GACP,iCACA,0BACA,oCACA,4BACA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"TiptapContent.js","names":[],"sources":["../../src/components/TiptapContent.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { createTiptapExtensions, valueToContent } from './tiptap/editorConfig';\n\ntype TiptapContentProps = Omit<ComponentProps<typeof EditorContent>, 'editor'> & {\n    value?: unknown;\n    className?: string;\n};\n\nconst serializeDocContent = (content: ReturnType<typeof valueToContent>) => {\n    if (!content) {\n        return '[]';\n    }\n\n    if (Array.isArray(content.content)) {\n        return JSON.stringify(content.content);\n    }\n\n    return JSON.stringify(content);\n};\n\nexport const TiptapContent = ({ value = '', className, ...props }: TiptapContentProps) => {\n    const extensions = useMemo(() => {\n        return createTiptapExtensions();\n    }, []);\n\n    const editorContent = useMemo(() => {\n        return valueToContent(value);\n    }, [value]);\n\n    const editor = useEditor({\n        extensions,\n        content: editorContent,\n        editable: false,\n    });\n\n    useEffect(() => {\n        if (!editor) {\n            return;\n        }\n\n        const incomingContent = editorContent ?? { type: 'doc', content: [] };\n        const incomingSerialized = serializeDocContent(editorContent);\n        const currentSerialized = serializeDocContent(editor.getJSON() as ReturnType<typeof valueToContent>);\n\n        if (incomingSerialized === currentSerialized) {\n            return;\n        }\n\n        editor.commands.setContent(incomingContent);\n    }, [editor, editorContent]);\n\n    return (\n        <EditorContent\n            editor={editor}\n            className={cn(\n                '[&_.ProseMirror]:outline-none',\n                '[&_.ProseMirror_p]:m-0',\n                '[&_.ProseMirror_p]:leading-[1.4]',\n                '[&_.ProseMirror]:text-sm',\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAWA,IAAM,uBAAuB,YAA+C;AACxE,KAAI,CAAC,QACD,QAAO;AAGX,KAAI,MAAM,QAAQ,QAAQ,QAAQ,CAC9B,QAAO,KAAK,UAAU,QAAQ,QAAQ;AAG1C,QAAO,KAAK,UAAU,QAAQ;;AAGlC,IAAa,iBAAiB,EAAE,QAAQ,IAAI,WAAW,GAAG,YAAgC;CACtF,MAAM,aAAa,cAAc;AAC7B,SAAO,wBAAwB;IAChC,EAAE,CAAC;CAEN,MAAM,gBAAgB,cAAc;AAChC,SAAO,eAAe,MAAM;IAC7B,CAAC,MAAM,CAAC;CAEX,MAAM,SAAS,UAAU;EACrB;EACA,SAAS;EACT,UAAU;EACb,CAAC;AAEF,iBAAgB;AACZ,MAAI,CAAC,OACD;EAGJ,MAAM,kBAAkB,iBAAiB;GAAE,MAAM;GAAO,SAAS,EAAE;GAAE;AAIrE,MAH2B,oBAAoB,cAG3C,KAFsB,oBAAoB,OAAO,SAAS,CAEnC,CACvB;AAGJ,SAAO,SAAS,WAAW,gBAAgB;IAC5C,CAAC,QAAQ,cAAc,CAAC;AAE3B,QACI,oBAAC,eAAD;EACY;EACR,WAAW,GACP,iCACA,0BACA,oCACA,4BACA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './ButtonGroup';
 export * from './Calendar';
+export * from './CodeEditor';
 export * from './Checkbox';
 export * from './CheckboxInput';
 export * from './CheckboxSelect';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC"}

package/dist/components/index.js

@@ -1,6 +1,7 @@
 import { Separator } from "./Separator.js";
 import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./ButtonGroup.js";
 import { Calendar, CalendarDayButton } from "./Calendar.js";
+import { CodeEditor } from "./CodeEditor.js";
 import { Checkbox } from "./Checkbox.js";
 import { CheckboxInput } from "./CheckboxInput.js";
 import { ALL_VALUE, CheckboxSelect } from "./CheckboxSelect.js";
@@ -42,4 +43,4 @@ import { Toggle, toggleVariants } from "./Toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
 import { VirtualizedScrollArea } from "./VirtualizedScrollArea.js";
 import { Button, buttonVariants } from "./Button.js";
-export { ALL_VALUE, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Checkbox, CheckboxInput, CheckboxSelect, ColorInput, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableTable, FadeIn, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Lightswitch, Markdown, MenuButton, ModalTabs, ModalTabsContent, ModalTabsList, ModalTabsTrigger, PaneTabs, PaneTabsContent, PaneTabsList, PaneTabsTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollArea, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SlideUp, Spinner, Status, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TimePicker, TiptapContent, TiptapEditor, TiptapInput, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VirtualizedScrollArea, buttonGroupVariants, buttonVariants, copyToClipboardWithMeta, toggleVariants, useComboboxAnchor, useCommandState };
+export { ALL_VALUE, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Checkbox, CheckboxInput, CheckboxSelect, CodeEditor, ColorInput, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableTable, FadeIn, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Lightswitch, Markdown, MenuButton, ModalTabs, ModalTabsContent, ModalTabsList, ModalTabsTrigger, PaneTabs, PaneTabsContent, PaneTabsList, PaneTabsTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollArea, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SlideUp, Spinner, Status, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TimePicker, TiptapContent, TiptapEditor, TiptapInput, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VirtualizedScrollArea, buttonGroupVariants, buttonVariants, copyToClipboardWithMeta, toggleVariants, useComboboxAnchor, useCommandState };

package/dist/forms/fields/CodeEditorField.d.ts

@@ -0,0 +1,20 @@
+import { SchemaFormEngineApi } from '../engine/context';
+type CodeEditorFieldProps = {
+    form: SchemaFormEngineApi;
+    field: {
+        name: string;
+        label?: string;
+        instructions?: string;
+        warning?: string;
+        placeholder?: string;
+        rows?: number;
+        tabSize?: number;
+        lineNumbers?: boolean;
+        language?: 'html' | 'text';
+        required?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const CodeEditorField: ({ form, field }: CodeEditorFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CodeEditorField.d.ts.map

package/dist/forms/fields/CodeEditorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditorField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/CodeEditorField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,oBAAoB,GAAG;IACxB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,iBAAiB,oBAAoB,4CA4BpE,CAAC"}

package/dist/forms/fields/CodeEditorField.js

@@ -0,0 +1,33 @@
+import { CodeEditor } from "../../components/CodeEditor.js";
+import "../../components/index.js";
+import { FieldLayout } from "../Field.js";
+import { useEngineField } from "../useEngineField.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/fields/CodeEditorField.tsx
+var CodeEditorField = ({ form, field }) => {
+	const { value, setValue, setTouched, errors, isInvalid } = useEngineField(form, field.name);
+	return /* @__PURE__ */ jsx(FieldLayout, {
+		name: field.name,
+		label: field.label,
+		instructions: field.instructions,
+		warning: field.warning,
+		required: field.required,
+		errors,
+		children: /* @__PURE__ */ jsx(CodeEditor, {
+			value: String(value ?? ""),
+			onChange: setValue,
+			onBlur: setTouched,
+			placeholder: field.placeholder,
+			disabled: field.disabled,
+			rows: field.rows,
+			tabSize: field.tabSize,
+			lineNumbers: field.lineNumbers,
+			language: field.language,
+			isInvalid
+		})
+	});
+};
+//#endregion
+export { CodeEditorField };
+
+//# sourceMappingURL=CodeEditorField.js.map

package/dist/forms/fields/CodeEditorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditorField.js","names":[],"sources":["../../../src/forms/fields/CodeEditorField.tsx"],"sourcesContent":["import { CodeEditor } from '@verbb/plugin-kit-react/components';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype CodeEditorFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        placeholder?: string;\n        rows?: number;\n        tabSize?: number;\n        lineNumbers?: boolean;\n        language?: 'html' | 'text';\n        required?: boolean;\n        disabled?: boolean;\n    };\n};\n\nexport const CodeEditorField = ({ form, field }: CodeEditorFieldProps) => {\n    const {\n        value, setValue, setTouched, errors, isInvalid,\n    } = useEngineField(form, field.name);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n        >\n            <CodeEditor\n                value={String(value ?? '')}\n                onChange={setValue}\n                onBlur={setTouched}\n                placeholder={field.placeholder}\n                disabled={field.disabled}\n                rows={field.rows}\n                tabSize={field.tabSize}\n                lineNumbers={field.lineNumbers}\n                language={field.language}\n                isInvalid={isInvalid}\n            />\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;AAsBA,IAAa,mBAAmB,EAAE,MAAM,YAAkC;CACtE,MAAM,EACF,OAAO,UAAU,YAAY,QAAQ,cACrC,eAAe,MAAM,MAAM,KAAK;AAEpC,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;YAER,oBAAC,YAAD;GACI,OAAO,OAAO,SAAS,GAAG;GAC1B,UAAU;GACV,QAAQ;GACR,aAAa,MAAM;GACnB,UAAU,MAAM;GAChB,MAAM,MAAM;GACZ,SAAS,MAAM;GACf,aAAa,MAAM;GACnB,UAAU,MAAM;GACL;GACb,CAAA;EACQ,CAAA"}

package/dist/forms/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/forms/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AA6EtF,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,EAAE,WAAW,wBAAwB,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,EAAE,WAAW,mBAAmB,KAAG,IAEpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,YAAY,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,KAAG,IAExF,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAkC,CAAC;AAElH,eAAO,MAAM,wBAAwB,QAAO,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAsC,CAAC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/forms/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AA+EtF,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,EAAE,WAAW,wBAAwB,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAG,IAErF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,EAAE,WAAW,mBAAmB,KAAG,IAEpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,YAAY,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,KAAG,IAExF,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAkC,CAAC;AAElH,eAAO,MAAM,wBAAwB,QAAO,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAsC,CAAC"}

package/dist/forms/registry.js

@@ -8,6 +8,7 @@ import { ListField } from "./fields/ListField.js";
 import { EditableTableField } from "./fields/EditableTableField.js";
 import { DateTimeField } from "./fields/DateTimeField.js";
 import { RichTextField } from "./fields/RichTextField.js";
+import { CodeEditorField } from "./fields/CodeEditorField.js";
 import { VariablePickerField } from "./fields/VariablePickerField.js";
 import { CalculationsField } from "./fields/CalculationsField.js";
 import { ElementSelectField } from "./fields/ElementSelectField.js";
@@ -33,6 +34,7 @@ var formFieldRegistry = {
 	table: EditableTableField,
 	date: DateTimeField,
 	richText: RichTextField,
+	codeEditor: CodeEditorField,
 	variablePicker: VariablePickerField,
 	calculations: CalculationsField,
 	elementSelect: ElementSelectField,

package/dist/forms/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../../src/forms/registry.ts"],"sourcesContent":["import type { SchemaFormComponent, SchemaFormFieldComponent } from './engine/context';\nimport { TextField } from './fields/TextField';\nimport { TextareaField } from './fields/TextareaField';\nimport { NumberField } from './fields/NumberField';\nimport { SelectField } from './fields/SelectField';\nimport { LightswitchField } from './fields/LightswitchField';\nimport { HandleField } from './fields/HandleField';\nimport { ListField } from './fields/ListField';\nimport { EditableTableField } from './fields/EditableTableField';\nimport { DateTimeField } from './fields/DateTimeField';\nimport { RichTextField } from './fields/RichTextField';\nimport { VariablePickerField } from './fields/VariablePickerField';\nimport { CalculationsField } from './fields/CalculationsField';\nimport { ElementSelectField } from './fields/ElementSelectField';\nimport { ColorField } from './fields/ColorField';\nimport { CheckboxSelectField } from './fields/CheckboxSelectField';\nimport { ComboboxField } from './fields/ComboboxField';\nimport { GroupField } from './fields/GroupField';\nimport { StaticTableField } from './fields/StaticTableField';\nimport { RadioGroupField } from './fields/RadioGroupField';\nimport {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsContent,\n    ModalTabsList,\n    ModalTabsTrigger,\n} from './components';\n\ntype RegistryHotData = {\n    formRegistry?: {\n        fields?: Record<string, SchemaFormFieldComponent>;\n        components?: Record<string, SchemaFormComponent>;\n    };\n};\n\nconst hmrData = (import.meta.hot?.data as RegistryHotData | undefined)?.formRegistry ?? {};\nconst formFieldRegistry: Record<string, SchemaFormFieldComponent> = {\n    text: TextField,\n    textarea: TextareaField,\n    number: NumberField,\n    select: SelectField,\n    lightswitch: LightswitchField,\n    handle: HandleField,\n    list: ListField,\n    table: EditableTableField,\n    date: DateTimeField,\n    richText: RichTextField,\n    variablePicker: VariablePickerField,\n    calculations: CalculationsField,\n    elementSelect: ElementSelectField,\n    color: ColorField,\n    checkboxSelect: CheckboxSelectField,\n    combobox: ComboboxField,\n    radioGroup: RadioGroupField,\n    group: GroupField,\n    staticTable: StaticTableField,\n    ...(hmrData.fields ?? {}),\n};\n\nconst formComponentRegistry: Record<string, SchemaFormComponent> = {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsList,\n    ModalTabsTrigger,\n    ModalTabsContent,\n    ...(hmrData.components ?? {}),\n};\n\nif (import.meta.hot) {\n    import.meta.hot.dispose((data: RegistryHotData) => {\n        data.formRegistry = {\n            fields: formFieldRegistry,\n            components: formComponentRegistry,\n        };\n    });\n}\n\nexport const registerFormField = (name: string, component: SchemaFormFieldComponent): void => {\n    formFieldRegistry[name] = component;\n};\n\nexport const registerFormFields = (fields: Record<string, SchemaFormFieldComponent>): void => {\n    Object.assign(formFieldRegistry, fields);\n};\n\nexport const registerFormComponent = (name: string, component: SchemaFormComponent): void => {\n    formComponentRegistry[name] = component;\n};\n\nexport const registerFormComponents = (components: Record<string, SchemaFormComponent>): void => {\n    Object.assign(formComponentRegistry, components);\n};\n\nexport const getFormFieldRegistry = (): Record<string, SchemaFormFieldComponent> => { return formFieldRegistry; };\n\nexport const getFormComponentRegistry = (): Record<string, SchemaFormComponent> => { return formComponentRegistry; };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAM,UAAkF,EAAE;AAC1F,IAAM,oBAA8D;CAChE,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,UAAU;CACV,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,OAAO;CACP,gBAAgB;CAChB,UAAU;CACV,YAAY;CACZ,OAAO;CACP,aAAa;CACb,GAAI,QAAQ,UAAU,EAAE;CAC3B;AAED,IAAM,wBAA6D;CAC/D;CACA;CACA;CACA;CACA;CACA,GAAI,QAAQ,cAAc,EAAE;CAC/B;AAWD,IAAa,qBAAqB,MAAc,cAA8C;AAC1F,mBAAkB,QAAQ;;AAG9B,IAAa,sBAAsB,WAA2D;AAC1F,QAAO,OAAO,mBAAmB,OAAO;;AAG5C,IAAa,yBAAyB,MAAc,cAAyC;AACzF,uBAAsB,QAAQ;;AAGlC,IAAa,0BAA0B,eAA0D;AAC7F,QAAO,OAAO,uBAAuB,WAAW;;AAGpD,IAAa,6BAAuE;AAAE,QAAO;;AAE7F,IAAa,iCAAsE;AAAE,QAAO"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../src/forms/registry.ts"],"sourcesContent":["import type { SchemaFormComponent, SchemaFormFieldComponent } from './engine/context';\nimport { TextField } from './fields/TextField';\nimport { TextareaField } from './fields/TextareaField';\nimport { NumberField } from './fields/NumberField';\nimport { SelectField } from './fields/SelectField';\nimport { LightswitchField } from './fields/LightswitchField';\nimport { HandleField } from './fields/HandleField';\nimport { ListField } from './fields/ListField';\nimport { EditableTableField } from './fields/EditableTableField';\nimport { DateTimeField } from './fields/DateTimeField';\nimport { RichTextField } from './fields/RichTextField';\nimport { CodeEditorField } from './fields/CodeEditorField';\nimport { VariablePickerField } from './fields/VariablePickerField';\nimport { CalculationsField } from './fields/CalculationsField';\nimport { ElementSelectField } from './fields/ElementSelectField';\nimport { ColorField } from './fields/ColorField';\nimport { CheckboxSelectField } from './fields/CheckboxSelectField';\nimport { ComboboxField } from './fields/ComboboxField';\nimport { GroupField } from './fields/GroupField';\nimport { StaticTableField } from './fields/StaticTableField';\nimport { RadioGroupField } from './fields/RadioGroupField';\nimport {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsContent,\n    ModalTabsList,\n    ModalTabsTrigger,\n} from './components';\n\ntype RegistryHotData = {\n    formRegistry?: {\n        fields?: Record<string, SchemaFormFieldComponent>;\n        components?: Record<string, SchemaFormComponent>;\n    };\n};\n\nconst hmrData = (import.meta.hot?.data as RegistryHotData | undefined)?.formRegistry ?? {};\nconst formFieldRegistry: Record<string, SchemaFormFieldComponent> = {\n    text: TextField,\n    textarea: TextareaField,\n    number: NumberField,\n    select: SelectField,\n    lightswitch: LightswitchField,\n    handle: HandleField,\n    list: ListField,\n    table: EditableTableField,\n    date: DateTimeField,\n    richText: RichTextField,\n    codeEditor: CodeEditorField,\n    variablePicker: VariablePickerField,\n    calculations: CalculationsField,\n    elementSelect: ElementSelectField,\n    color: ColorField,\n    checkboxSelect: CheckboxSelectField,\n    combobox: ComboboxField,\n    radioGroup: RadioGroupField,\n    group: GroupField,\n    staticTable: StaticTableField,\n    ...(hmrData.fields ?? {}),\n};\n\nconst formComponentRegistry: Record<string, SchemaFormComponent> = {\n    FieldWrap,\n    ModalTabs,\n    ModalTabsList,\n    ModalTabsTrigger,\n    ModalTabsContent,\n    ...(hmrData.components ?? {}),\n};\n\nif (import.meta.hot) {\n    import.meta.hot.dispose((data: RegistryHotData) => {\n        data.formRegistry = {\n            fields: formFieldRegistry,\n            components: formComponentRegistry,\n        };\n    });\n}\n\nexport const registerFormField = (name: string, component: SchemaFormFieldComponent): void => {\n    formFieldRegistry[name] = component;\n};\n\nexport const registerFormFields = (fields: Record<string, SchemaFormFieldComponent>): void => {\n    Object.assign(formFieldRegistry, fields);\n};\n\nexport const registerFormComponent = (name: string, component: SchemaFormComponent): void => {\n    formComponentRegistry[name] = component;\n};\n\nexport const registerFormComponents = (components: Record<string, SchemaFormComponent>): void => {\n    Object.assign(formComponentRegistry, components);\n};\n\nexport const getFormFieldRegistry = (): Record<string, SchemaFormFieldComponent> => { return formFieldRegistry; };\n\nexport const getFormComponentRegistry = (): Record<string, SchemaFormComponent> => { return formComponentRegistry; };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,UAAkF,EAAE;AAC1F,IAAM,oBAA8D;CAChE,MAAM;CACN,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,UAAU;CACV,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,OAAO;CACP,gBAAgB;CAChB,UAAU;CACV,YAAY;CACZ,OAAO;CACP,aAAa;CACb,GAAI,QAAQ,UAAU,EAAE;CAC3B;AAED,IAAM,wBAA6D;CAC/D;CACA;CACA;CACA;CACA;CACA,GAAI,QAAQ,cAAc,EAAE;CAC/B;AAWD,IAAa,qBAAqB,MAAc,cAA8C;AAC1F,mBAAkB,QAAQ;;AAG9B,IAAa,sBAAsB,WAA2D;AAC1F,QAAO,OAAO,mBAAmB,OAAO;;AAG5C,IAAa,yBAAyB,MAAc,cAAyC;AACzF,uBAAsB,QAAQ;;AAGlC,IAAa,0BAA0B,eAA0D;AAC7F,QAAO,OAAO,uBAAuB,WAAW;;AAGpD,IAAa,6BAAuE;AAAE,QAAO;;AAE7F,IAAa,iCAAsE;AAAE,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@verbb/plugin-kit-react",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -82,13 +82,13 @@
     },
     "license": "MIT",
     "devDependencies": {
-        "@verbb/vitepress-theme": "1.0.0",
         "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.2.4",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^25.6.0",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
+        "@verbb/vitepress-theme": "1.0.0",
         "@vitejs/plugin-react": "^6.0.1",
         "@vitest/browser": "^4.1.5",
         "@vitest/coverage-v8": "^4.1.5",
@@ -109,6 +109,9 @@
     },
     "dependencies": {
         "@base-ui/react": "^1.4.1",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.43.1",
         "@dnd-kit/abstract": "^0.4.0",
         "@dnd-kit/dom": "^0.4.0",
         "@dnd-kit/helpers": "^0.4.0",
@@ -150,6 +153,7 @@
         "@tiptap/pm": "^3.22.4",
         "@tiptap/react": "^3.22.4",
         "@types/prismjs": "^1.26.6",
+        "@uiw/react-codemirror": "^4.25.10",
         "@verbb/plugin-kit": "1.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",