@verbb/plugin-kit-react 1.0.0

package/dist/components/TiptapInput.js

@@ -0,0 +1,138 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { contentToValue, dedupeVariableOptions, flattenVariableOptions, valueToContent } from "./tiptap/variableSerialization.js";
+import { VariableDropdown } from "./tiptap/VariableDropdown.js";
+import { VariablePickerProvider } from "./tiptap/VariablePickerContext.js";
+import { InlineVariablePickerPopover } from "./tiptap/InlineVariablePickerPopover.js";
+import { useInlineVariablePicker } from "./tiptap/useInlineVariablePicker.js";
+import VariableTag_default from "./tiptap/VariableTag.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import Document from "@tiptap/extension-document";
+import Text from "@tiptap/extension-text";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EditorContent, useEditor } from "@tiptap/react";
+//#region src/components/TiptapInput.tsx
+var OneLinerDocument = Document.extend({ content: "inline*" });
+var TiptapInput = ({ value = "", onChange, className, isInvalid, disabled = false, readOnly = false, variableCategories = {}, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, variablePickerTriggerCharacters = ["@"], ...props }) => {
+	const wrapperRef = useRef(null);
+	const [isVariablePickerOpen, setIsVariablePickerOpen] = useState(false);
+	const handleKeyDownRef = useRef(null);
+	const topLevelVariables = useMemo(() => {
+		return dedupeVariableOptions(Object.values(variableCategories ?? {}).flatMap((items) => {
+			return Array.isArray(items) ? items : [];
+		}));
+	}, [variableCategories]);
+	const variables = useMemo(() => {
+		return flattenVariableOptions(topLevelVariables);
+	}, [topLevelVariables]);
+	const editor = useEditor({
+		extensions: useMemo(() => {
+			return [
+				OneLinerDocument,
+				Text,
+				VariableTag_default.configure({})
+			];
+		}, []),
+		content: valueToContent(value, topLevelVariables, variables),
+		editable: !disabled && !readOnly,
+		editorProps: { handleKeyDown: (view, event) => {
+			return handleKeyDownRef.current?.(view, event) ?? false;
+		} },
+		onUpdate: ({ editor: ed }) => {
+			if (onChange) onChange(contentToValue(ed.getJSON().content));
+		}
+	});
+	const inlinePicker = useInlineVariablePicker(editor, {
+		variableCategories,
+		variableCategoryLabels,
+		variableCategoryOrder,
+		variablePickerTriggerCharacters,
+		disabled,
+		readOnly,
+		wrapperRef,
+		onOpenDropdown: () => {
+			return setIsVariablePickerOpen(true);
+		}
+	});
+	useEffect(() => {
+		handleKeyDownRef.current = inlinePicker.handleKeyDown;
+	}, [inlinePicker.handleKeyDown]);
+	useEffect(() => {
+		if (!editor) return;
+		if (!readOnly && editor.isFocused) return;
+		const newContent = valueToContent(value, topLevelVariables, variables);
+		const currentContent = editor.getJSON();
+		if (JSON.stringify(newContent) !== JSON.stringify(currentContent)) queueMicrotask(() => {
+			const content = newContent ?? {
+				type: "doc",
+				content: []
+			};
+			editor.commands.setContent(content);
+		});
+	}, [
+		editor,
+		value,
+		readOnly,
+		topLevelVariables,
+		variables
+	]);
+	const hasVariables = variables.length > 0;
+	return /* @__PURE__ */ jsx(VariablePickerProvider, {
+		variableCategories,
+		variableCategoryLabels,
+		variableCategoryOrder,
+		variableTransformerRegistry,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: wrapperRef,
+			className: cn("relative", className),
+			children: [
+				/* @__PURE__ */ jsx(EditorContent, {
+					editor,
+					className: cn(!readOnly && [
+						"[&_.ProseMirror]:outline-none [&_.ProseMirror]:bg-clip-padding",
+						"[&_.ProseMirror]:rounded-sm",
+						"[&_.ProseMirror]:border [&_.ProseMirror]:border-[rgba(96,125,159,0.4)]",
+						"[&_.ProseMirror]:bg-[rgb(251,252,254)]",
+						"[&_.ProseMirror]:whitespace-pre-wrap",
+						"[&_.ProseMirror]:w-full [&_.ProseMirror]:h-[34px] [&_.ProseMirror]:px-2 [&_.ProseMirror]:pr-10 [&_.ProseMirror]:pt-[6px] [&_.ProseMirror]:text-sm",
+						"[&_.ProseMirror]:whitespace-nowrap [&_.ProseMirror]:overflow-x-auto [&_.ProseMirror]:overflow-y-hidden",
+						"[&_.ProseMirror]:[scrollbar-width:none] [&_.ProseMirror::-webkit-scrollbar]:hidden",
+						"[&_.ProseMirror]:placeholder:text-[#7c8793]",
+						"[&_.ProseMirror]:focus-visible:border-sky-600 [&_.ProseMirror]:focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+						"[&_.ProseMirror]:disabled:cursor-not-allowed [&_.ProseMirror]:disabled:opacity-50"
+					], isInvalid && ["[&_.ProseMirror]:border-rose-600", "[&_.ProseMirror]:focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]"], "[&_.ProseMirror_p]:m-0 [&_.ProseMirror_p]:inline", "[&_.ProseMirror_p]:leading-tight", "[&_.ProseMirror-trailingBreak]:inline [&_.ProseMirror-trailingBreak]:leading-none [&_.ProseMirror-trailingBreak]:w-0 [&_.ProseMirror-trailingBreak]:h-0"),
+					...props
+				}),
+				hasVariables && !readOnly && /* @__PURE__ */ jsx(VariableDropdown, {
+					editor,
+					variableCategories,
+					variableCategoryLabels,
+					variableCategoryOrder,
+					triggerMode: "input",
+					open: isVariablePickerOpen,
+					onOpenChange: setIsVariablePickerOpen
+				}),
+				hasVariables && !readOnly && /* @__PURE__ */ jsx(InlineVariablePickerPopover, {
+					open: inlinePicker.state.open,
+					onOpenChange: (open) => {
+						if (!open) inlinePicker.closePicker();
+					},
+					position: {
+						top: inlinePicker.state.top,
+						left: inlinePicker.state.left
+					},
+					isChildMode: inlinePicker.filteredVariables.isChildMode,
+					query: inlinePicker.state.query,
+					onQueryChange: inlinePicker.setQuery,
+					filteredVariables: inlinePicker.filteredVariables,
+					onSelect: inlinePicker.handleSelect,
+					onBack: inlinePicker.goBack
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { TiptapInput };
+
+//# sourceMappingURL=TiptapInput.js.map

package/dist/components/TiptapInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TiptapInput.js","names":[],"sources":["../../src/components/TiptapInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useEditor, EditorContent } from '@tiptap/react';\n\nimport Document from '@tiptap/extension-document';\nimport Text from '@tiptap/extension-text';\n\nimport VariableTag from '@verbb/plugin-kit-react/components/tiptap/VariableTag';\nimport { VariableDropdown } from '@verbb/plugin-kit-react/components/tiptap/VariableDropdown';\nimport type { VariableTransformerRegistry } from '@verbb/plugin-kit-react/components/tiptap/VariablePickerContext';\nimport { VariablePickerProvider } from '@verbb/plugin-kit-react/components/tiptap/VariablePickerContext';\nimport { InlineVariablePickerPopover } from '@verbb/plugin-kit-react/components/tiptap/InlineVariablePickerPopover';\nimport { useInlineVariablePicker } from '@verbb/plugin-kit-react/components/tiptap/useInlineVariablePicker';\nimport {\n    contentToValue,\n    dedupeVariableOptions,\n    flattenVariableOptions,\n    valueToContent,\n} from '@verbb/plugin-kit-react/components/tiptap/variableSerialization';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst OneLinerDocument = Document.extend({\n    content: 'inline*',\n});\n\nexport const TiptapInput = ({\n    value = '',\n    onChange,\n    className,\n    isInvalid,\n    disabled = false,\n    readOnly = false,\n    variableCategories = {},\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variableTransformerRegistry,\n    variablePickerTriggerCharacters = ['@'],\n    ...props\n}) => {\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const [isVariablePickerOpen, setIsVariablePickerOpen] = useState(false);\n    const handleKeyDownRef = useRef<import('./tiptap/useInlineVariablePicker').InlineVariablePickerHandleKeyDown | null>(null);\n\n    const topLevelVariables = useMemo(() => {\n        const values = Object.values(variableCategories ?? {}).flatMap(items => {\n            return Array.isArray(items) ? items : [];\n        },\n        );\n        return dedupeVariableOptions(values);\n    }, [variableCategories]);\n\n    const variables = useMemo(() => {\n        return flattenVariableOptions(topLevelVariables);\n    }, [topLevelVariables]);\n\n    const extensions = useMemo(\n        () => {\n            return [OneLinerDocument, Text, VariableTag.configure({})];\n        },\n        [],\n    );\n\n    const editor = useEditor({\n        extensions,\n        content: valueToContent(value, topLevelVariables, variables) as Parameters<typeof useEditor>[0]['content'],\n        editable: !disabled && !readOnly,\n        editorProps: {\n            handleKeyDown: (view, event) => {\n                return handleKeyDownRef.current?.(view, event) ?? false;\n            },\n        } as Parameters<typeof useEditor>[0]['editorProps'],\n        onUpdate: ({ editor: ed }) => {\n            if (onChange) {\n                onChange(contentToValue(ed.getJSON().content));\n            }\n        },\n    });\n\n    const inlinePicker = useInlineVariablePicker(editor, {\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        variablePickerTriggerCharacters,\n        disabled,\n        readOnly,\n        wrapperRef,\n        onOpenDropdown: () => {\n            return setIsVariablePickerOpen(true);\n        },\n    });\n\n    useEffect(() => {\n        handleKeyDownRef.current = inlinePicker.handleKeyDown;\n    }, [inlinePicker.handleKeyDown]);\n\n    useEffect(() => {\n        if (!editor) {\n            return;\n        }\n        if (!readOnly && editor.isFocused) {\n            return;\n        }\n\n        const newContent = valueToContent(value, topLevelVariables, variables);\n        const currentContent = editor.getJSON();\n        if (JSON.stringify(newContent) !== JSON.stringify(currentContent)) {\n            queueMicrotask(() => {\n                const content = newContent ?? { type: 'doc' as const, content: [] as const };\n                editor.commands.setContent(content);\n            });\n        }\n    }, [editor, value, readOnly, topLevelVariables, variables]);\n\n    const hasVariables = variables.length > 0;\n\n    return (\n        <VariablePickerProvider\n            variableCategories={variableCategories}\n            variableCategoryLabels={variableCategoryLabels}\n            variableCategoryOrder={variableCategoryOrder}\n            variableTransformerRegistry={variableTransformerRegistry as VariableTransformerRegistry | undefined}\n        >\n            <div ref={wrapperRef} className={cn('relative', className)}>\n                <EditorContent\n                    editor={editor}\n                    className={cn(\n                        !readOnly && [\n                            '[&_.ProseMirror]:outline-none [&_.ProseMirror]:bg-clip-padding',\n                            '[&_.ProseMirror]:rounded-sm',\n                            '[&_.ProseMirror]:border [&_.ProseMirror]:border-[rgba(96,125,159,0.4)]',\n                            '[&_.ProseMirror]:bg-[rgb(251,252,254)]',\n                            '[&_.ProseMirror]:whitespace-pre-wrap',\n                            '[&_.ProseMirror]:w-full [&_.ProseMirror]:h-[34px] [&_.ProseMirror]:px-2 [&_.ProseMirror]:pr-10 [&_.ProseMirror]:pt-[6px] [&_.ProseMirror]:text-sm',\n                            '[&_.ProseMirror]:whitespace-nowrap [&_.ProseMirror]:overflow-x-auto [&_.ProseMirror]:overflow-y-hidden',\n                            '[&_.ProseMirror]:[scrollbar-width:none] [&_.ProseMirror::-webkit-scrollbar]:hidden',\n                            '[&_.ProseMirror]:placeholder:text-[#7c8793]',\n                            '[&_.ProseMirror]:focus-visible:border-sky-600 [&_.ProseMirror]:focus-visible: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                            '[&_.ProseMirror]:disabled:cursor-not-allowed [&_.ProseMirror]:disabled:opacity-50',\n                        ],\n                        isInvalid && [\n                            '[&_.ProseMirror]:border-rose-600',\n                            '[&_.ProseMirror]:focus-visible: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                        ],\n                        '[&_.ProseMirror_p]:m-0 [&_.ProseMirror_p]:inline',\n                        '[&_.ProseMirror_p]:leading-tight',\n                        '[&_.ProseMirror-trailingBreak]:inline [&_.ProseMirror-trailingBreak]:leading-none [&_.ProseMirror-trailingBreak]:w-0 [&_.ProseMirror-trailingBreak]:h-0',\n                    )}\n                    {...props}\n                />\n\n                {hasVariables && !readOnly && (\n                    <VariableDropdown\n                        editor={editor}\n                        variableCategories={variableCategories}\n                        variableCategoryLabels={variableCategoryLabels}\n                        variableCategoryOrder={variableCategoryOrder}\n                        triggerMode=\"input\"\n                        open={isVariablePickerOpen}\n                        onOpenChange={setIsVariablePickerOpen}\n                    />\n                )}\n\n                {hasVariables && !readOnly && (\n                    <InlineVariablePickerPopover\n                        open={inlinePicker.state.open}\n                        onOpenChange={(open) => {\n                            if (!open) {\n                                inlinePicker.closePicker();\n                            }\n                        }}\n                        position={{ top: inlinePicker.state.top, left: inlinePicker.state.left }}\n                        isChildMode={inlinePicker.filteredVariables.isChildMode}\n                        query={inlinePicker.state.query}\n                        onQueryChange={inlinePicker.setQuery}\n                        filteredVariables={inlinePicker.filteredVariables}\n                        onSelect={inlinePicker.handleSelect}\n                        onBack={inlinePicker.goBack}\n                    />\n                )}\n            </div>\n        </VariablePickerProvider>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAM,mBAAmB,SAAS,OAAO,EACrC,SAAS,WACZ,CAAC;AAEF,IAAa,eAAe,EACxB,QAAQ,IACR,UACA,WACA,WACA,WAAW,OACX,WAAW,OACX,qBAAqB,EAAE,EACvB,wBACA,uBACA,6BACA,kCAAkC,CAAC,IAAI,EACvC,GAAG,YACD;CACF,MAAM,aAAa,OAA8B,KAAK;CACtD,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,MAAM;CACvE,MAAM,mBAAmB,OAA4F,KAAK;CAE1H,MAAM,oBAAoB,cAAc;AAKpC,SAAO,sBAJQ,OAAO,OAAO,sBAAsB,EAAE,CAAC,CAAC,SAAQ,UAAS;AACpE,UAAO,MAAM,QAAQ,MAAM,GAAG,QAAQ,EAAE;IAGf,CAAO;IACrC,CAAC,mBAAmB,CAAC;CAExB,MAAM,YAAY,cAAc;AAC5B,SAAO,uBAAuB,kBAAkB;IACjD,CAAC,kBAAkB,CAAC;CASvB,MAAM,SAAS,UAAU;EACrB,YARe,cACT;AACF,UAAO;IAAC;IAAkB;IAAM,oBAAY,UAAU,EAAE,CAAC;IAAC;KAE9D,EAAE,CAIF;EACA,SAAS,eAAe,OAAO,mBAAmB,UAAU;EAC5D,UAAU,CAAC,YAAY,CAAC;EACxB,aAAa,EACT,gBAAgB,MAAM,UAAU;AAC5B,UAAO,iBAAiB,UAAU,MAAM,MAAM,IAAI;KAEzD;EACD,WAAW,EAAE,QAAQ,SAAS;AAC1B,OAAI,SACA,UAAS,eAAe,GAAG,SAAS,CAAC,QAAQ,CAAC;;EAGzD,CAAC;CAEF,MAAM,eAAe,wBAAwB,QAAQ;EACjD;EACA;EACA;EACA;EACA;EACA;EACA;EACA,sBAAsB;AAClB,UAAO,wBAAwB,KAAK;;EAE3C,CAAC;AAEF,iBAAgB;AACZ,mBAAiB,UAAU,aAAa;IACzC,CAAC,aAAa,cAAc,CAAC;AAEhC,iBAAgB;AACZ,MAAI,CAAC,OACD;AAEJ,MAAI,CAAC,YAAY,OAAO,UACpB;EAGJ,MAAM,aAAa,eAAe,OAAO,mBAAmB,UAAU;EACtE,MAAM,iBAAiB,OAAO,SAAS;AACvC,MAAI,KAAK,UAAU,WAAW,KAAK,KAAK,UAAU,eAAe,CAC7D,sBAAqB;GACjB,MAAM,UAAU,cAAc;IAAE,MAAM;IAAgB,SAAS,EAAE;IAAW;AAC5E,UAAO,SAAS,WAAW,QAAQ;IACrC;IAEP;EAAC;EAAQ;EAAO;EAAU;EAAmB;EAAU,CAAC;CAE3D,MAAM,eAAe,UAAU,SAAS;AAExC,QACI,oBAAC,wBAAD;EACwB;EACI;EACD;EACM;YAE7B,qBAAC,OAAD;GAAK,KAAK;GAAY,WAAW,GAAG,YAAY,UAAU;aAA1D;IACI,oBAAC,eAAD;KACY;KACR,WAAW,GACP,CAAC,YAAY;MACT;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACH,EACD,aAAa,CACT,oCACA,8HACH,EACD,oDACA,oCACA,0JACH;KACD,GAAI;KACN,CAAA;IAED,gBAAgB,CAAC,YACd,oBAAC,kBAAD;KACY;KACY;KACI;KACD;KACvB,aAAY;KACZ,MAAM;KACN,cAAc;KAChB,CAAA;IAGL,gBAAgB,CAAC,YACd,oBAAC,6BAAD;KACI,MAAM,aAAa,MAAM;KACzB,eAAe,SAAS;AACpB,UAAI,CAAC,KACD,cAAa,aAAa;;KAGlC,UAAU;MAAE,KAAK,aAAa,MAAM;MAAK,MAAM,aAAa,MAAM;MAAM;KACxE,aAAa,aAAa,kBAAkB;KAC5C,OAAO,aAAa,MAAM;KAC1B,eAAe,aAAa;KAC5B,mBAAmB,aAAa;KAChC,UAAU,aAAa;KACvB,QAAQ,aAAa;KACvB,CAAA;IAEJ;;EACe,CAAA"}

package/dist/components/Toggle.d.ts

@@ -0,0 +1,9 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { VariantProps } from 'class-variance-authority';
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+export { Toggle, toggleVariants };
+//# sourceMappingURL=Toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA4CnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACZ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Toggle.js

@@ -0,0 +1,48 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+//#region src/components/Toggle.tsx
+var toggleVariants = cva([
+	"group/toggle inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg",
+	"cursor-pointer",
+	"transition-all outline-none",
+	"hover:bg-slate-250",
+	"aria-pressed:bg-slate-250 data-[state=on]:bg-slate-250 data-[pressed]:bg-slate-250 data-[pressed=true]:bg-slate-250",
+	"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]",
+	"aria-invalid:border-rose-600 aria-invalid:focus-visible: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:pointer-events-none disabled:opacity-50",
+	"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+], {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: ["border border-slate-300 bg-transparent", "hover:bg-slate-250"]
+		},
+		size: {
+			default: "h-8 min-w-8 px-2",
+			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+			lg: "h-9 min-w-9 px-2.5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Toggle({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Toggle$1, {
+		"data-slot": "toggle",
+		className: cn(toggleVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+//#endregion
+export { Toggle, toggleVariants };
+
+//# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst toggleVariants = cva(\n    [\n        // Layout\n        'group/toggle inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg',\n        'cursor-pointer',\n\n        // Interaction and state\n        'transition-all outline-none',\n        'hover:bg-slate-250',\n        'aria-pressed:bg-slate-250 data-[state=on]:bg-slate-250 data-[pressed]:bg-slate-250 data-[pressed=true]:bg-slate-250',\n\n        // Focus and validation\n        'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n        'aria-invalid:border-rose-600 aria-invalid:focus-visible: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\n        // Disabled\n        'disabled:pointer-events-none disabled:opacity-50',\n\n        // Icons\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'bg-transparent',\n                outline: [\n                    // Border style\n                    'border border-slate-300 bg-transparent',\n\n                    // Hover parity\n                    'hover:bg-slate-250',\n                ],\n            },\n            size: {\n                default: 'h-8 min-w-8 px-2',\n                sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',\n                lg: 'h-9 min-w-9 px-2.5',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    },\n);\n\nfunction Toggle({\n    className,\n    variant = 'default',\n    size = 'default',\n    ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n    return (\n        <TogglePrimitive\n            data-slot=\"toggle\"\n            className={cn(toggleVariants({ variant, size, className }))}\n            {...props}\n        />\n    );\n}\n\nexport { Toggle, toggleVariants };\n"],"mappings":";;;;;;AAKA,IAAM,iBAAiB,IACnB;CAEI;CACA;CAGA;CACA;CACA;CAGA;CACA;CAGA;CAGA;CACH,EACD;CACI,UAAU;EACN,SAAS;GACL,SAAS;GACT,SAAS,CAEL,0CAGA,qBACH;GACJ;EACD,MAAM;GACF,SAAS;GACT,IAAI;GACJ,IAAI;GACP;EACJ;CACD,iBAAiB;EACb,SAAS;EACT,MAAM;EACT;CACJ,CACJ;AAED,SAAS,OAAO,EACZ,WACA,UAAU,WACV,OAAO,WACP,GAAG,SACyD;AAC5D,QACI,oBAAC,UAAD;EACI,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC3D,GAAI;EACN,CAAA"}

package/dist/components/ToggleGroup.d.ts

@@ -0,0 +1,11 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { VariantProps } from 'class-variance-authority';
+import { toggleVariants } from './Toggle';
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+}): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=ToggleGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../src/components/ToggleGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAc3E,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,oBAAoB,CAAC,KAAK,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CAC1C,2CAoCJ;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAsC7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/ToggleGroup.js

@@ -0,0 +1,70 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { toggleVariants } from "./Toggle.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+//#region src/components/ToggleGroup.tsx
+var ToggleGroupContext = React$1.createContext({
+	size: "default",
+	variant: "default",
+	spacing: 0,
+	orientation: "horizontal"
+});
+function ToggleGroup({ className, variant, size, spacing = 0, orientation = "horizontal", children, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup$1, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		style: { "--gap": spacing },
+		className: cn([
+			"group/toggle-group flex w-fit flex-row items-center rounded-lg",
+			"data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+			"gap-[--spacing(var(--gap))]",
+			"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
+		], className),
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				spacing,
+				orientation
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
+	const context = React$1.useContext(ToggleGroupContext);
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle-group-item",
+		"data-variant": context.variant || variant,
+		"data-size": context.size || size,
+		"data-spacing": context.spacing,
+		className: cn([
+			"shrink-0 focus:z-10 focus-visible:z-10",
+			"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2",
+			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg",
+			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg",
+			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg",
+			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg",
+			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0",
+			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l",
+			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0",
+			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t"
+		], toggleVariants({
+			variant: context.variant || variant,
+			size: context.size || size
+		}), className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { ToggleGroup, ToggleGroupItem };
+
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/components/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../src/components/ToggleGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { toggleVariants } from '@verbb/plugin-kit-react/components/Toggle';\n\nconst ToggleGroupContext = React.createContext<\n    VariantProps<typeof toggleVariants> & {\n        spacing?: number\n        orientation?: 'horizontal' | 'vertical'\n    }\n>({\n    size: 'default',\n    variant: 'default',\n    spacing: 0,\n    orientation: 'horizontal',\n});\n\nfunction ToggleGroup({\n    className,\n    variant,\n    size,\n    spacing = 0,\n    orientation = 'horizontal',\n    children,\n    ...props\n}: ToggleGroupPrimitive.Props &\n    VariantProps<typeof toggleVariants> & {\n        spacing?: number\n        orientation?: 'horizontal' | 'vertical'\n    }) {\n    return (\n        <ToggleGroupPrimitive\n            data-slot=\"toggle-group\"\n            data-variant={variant}\n            data-size={size}\n            data-spacing={spacing}\n            data-orientation={orientation}\n            style={{ '--gap': spacing } as React.CSSProperties}\n            className={cn(\n                [\n                    // Layout\n                    'group/toggle-group flex w-fit flex-row items-center rounded-lg',\n\n                    // Sizing\n                    'data-[size=sm]:rounded-[min(var(--radius-md),10px)]',\n\n                    // Spacing\n                    'gap-[--spacing(var(--gap))]',\n\n                    // Orientation (Base UI uses data-orientation, not data-vertical/data-horizontal)\n                    'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n                ],\n                className,\n            )}\n            {...props}\n        >\n            <ToggleGroupContext.Provider\n                value={{\n                    variant, size, spacing, orientation,\n                }}\n            >\n                {children}\n            </ToggleGroupContext.Provider>\n        </ToggleGroupPrimitive>\n    );\n}\n\nfunction ToggleGroupItem({\n    className,\n    children,\n    variant = 'default',\n    size = 'default',\n    ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n    const context = React.useContext(ToggleGroupContext);\n\n    return (\n        <TogglePrimitive\n            data-slot=\"toggle-group-item\"\n            data-variant={context.variant || variant}\n            data-size={context.size || size}\n            data-spacing={context.spacing}\n            className={cn(\n                [\n                    // Base\n                    'shrink-0 focus:z-10 focus-visible:z-10',\n\n                    // Unified control look when spacing is zero\n                    'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2',\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg',\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg',\n\n                    // Shared-outline border collapse when spacing is zero: single outer border + single divider between items\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0',\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',\n                ],\n                toggleVariants({\n                    variant: context.variant || variant,\n                    size: context.size || size,\n                }),\n                className,\n            )}\n            {...props}\n        >\n            {children}\n        </TogglePrimitive>\n    );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":";;;;;;;;AAQA,IAAM,qBAAqB,QAAM,cAK/B;CACE,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;CAChB,CAAC;AAEF,SAAS,YAAY,EACjB,WACA,SACA,MACA,UAAU,GACV,cAAc,cACd,UACA,GAAG,SAKA;AACH,QACI,oBAAC,eAAD;EACI,aAAU;EACV,gBAAc;EACd,aAAW;EACX,gBAAc;EACd,oBAAkB;EAClB,OAAO,EAAE,SAAS,SAAS;EAC3B,WAAW,GACP;GAEI;GAGA;GAGA;GAGA;GACH,EACD,UACH;EACD,GAAI;YAEJ,oBAAC,mBAAmB,UAApB;GACI,OAAO;IACH;IAAS;IAAM;IAAS;IAC3B;GAEA;GACyB,CAAA;EACX,CAAA;;AAI/B,SAAS,gBAAgB,EACrB,WACA,UACA,UAAU,WACV,OAAO,WACP,GAAG,SACyD;CAC5D,MAAM,UAAU,QAAM,WAAW,mBAAmB;AAEpD,QACI,oBAAC,QAAD;EACI,aAAU;EACV,gBAAc,QAAQ,WAAW;EACjC,aAAW,QAAQ,QAAQ;EAC3B,gBAAc,QAAQ;EACtB,WAAW,GACP;GAEI;GAGA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;GACA;GACH,EACD,eAAe;GACX,SAAS,QAAQ,WAAW;GAC5B,MAAM,QAAQ,QAAQ;GACzB,CAAC,EACF,UACH;EACD,GAAI;EAEH;EACa,CAAA"}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, portalContainer, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+    portalContainer?: HTMLElement | ShadowRoot | null;
+}): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, };
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,iBAAS,eAAe,CAAC,EACrB,KAAS,EACT,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,2CAQjC;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,2CAMzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,2CAEnE;AAED,iBAAS,cAAc,CAAC,EACpB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC3B,IAAI,CACA,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAClD,GAAG;IACA,eAAe,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAA;CACpD,2CAqEJ;AAED,OAAO,EACH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,GAC3D,CAAC"}

package/dist/components/Tooltip.js

@@ -0,0 +1,51 @@
+import { cn } from "../utils/classes.js";
+import { getPortalContainer } from "../utils/portal.js";
+import "../utils/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/Tooltip.tsx
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+function Tooltip({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		delay: 0,
+		children: /* @__PURE__ */ jsx(Tooltip$1.Root, {
+			"data-slot": "tooltip",
+			...props
+		})
+	});
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, portalContainer, children, ...props }) {
+	const resolvedPortalContainer = getPortalContainer(portalContainer);
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
+		container: resolvedPortalContainer,
+		children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "isolate z-250",
+			children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
+				"data-slot": "tooltip-content",
+				className: cn("rounded-sm px-[8px] py-[4px] w-fit max-w-xs", "bg-[#1c2e36] text-white text-[12px]", "z-50 origin-(--transform-origin)", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-[side=top]:slide-in-from-bottom-2", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=inline-start]:slide-in-from-right-2", "data-[side=inline-end]:slide-in-from-left-2", className),
+				...props,
+				children: [children, /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: cn("size-2.5 rotate-45 rounded-[2px]", "translate-y-[calc(-50%-2px)]", "bg-[#1c2e36] fill-[#1c2e36]", "z-50", "data-[side=top]:-bottom-2.5", "data-[side=bottom]:top-1", "data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2", "data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2", "data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2", "data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2") })]
+			})
+		})
+	});
+}
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nfunction TooltipProvider({\n    delay = 0,\n    ...props\n}: TooltipPrimitive.Provider.Props) {\n    return (\n        <TooltipPrimitive.Provider\n            data-slot=\"tooltip-provider\"\n            delay={delay}\n            {...props}\n        />\n    );\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n    return (\n        <TooltipPrimitive.Provider delay={0}>\n            <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n        </TooltipPrimitive.Provider>\n    );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n    return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n    className,\n    side = 'top',\n    sideOffset = 4,\n    align = 'center',\n    alignOffset = 0,\n    portalContainer,\n    children,\n    ...props\n}: TooltipPrimitive.Popup.Props &\n    Pick<\n        TooltipPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n    > & {\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <TooltipPrimitive.Portal container={resolvedPortalContainer}>\n            <TooltipPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"isolate z-250\"\n            >\n                <TooltipPrimitive.Popup\n                    data-slot=\"tooltip-content\"\n                    className={cn(\n                        // Layout\n                        'rounded-sm px-[8px] py-[4px] w-fit max-w-xs',\n\n                        // Theme\n                        'bg-[#1c2e36] text-white text-[12px]',\n\n                        // Stacking\n                        'z-50 origin-(--transform-origin)',\n\n                        // Open animation\n                        'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n                        'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',\n\n                        // Closed animation\n                        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n\n                        // Side-specific slide animations\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=bottom]:slide-in-from-top-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\n                        className,\n                    )}\n                    {...props}\n                >\n                    {children}\n                    <TooltipPrimitive.Arrow\n                        className={cn(\n                            // Shape\n                            'size-2.5 rotate-45 rounded-[2px]',\n                            'translate-y-[calc(-50%-2px)]',\n\n                            // Theme\n                            'bg-[#1c2e36] fill-[#1c2e36]',\n\n                            // Stacking\n                            'z-50',\n\n                            // Side-specific positioning\n                            'data-[side=top]:-bottom-2.5',\n                            'data-[side=bottom]:top-1',\n                            'data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2',\n                            'data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2',\n                            'data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2',\n                            'data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2',\n                        )}\n                    />\n                </TooltipPrimitive.Popup>\n            </TooltipPrimitive.Positioner>\n        </TooltipPrimitive.Portal>\n    );\n}\n\nexport {\n    Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,\n};\n"],"mappings":";;;;;;AAIA,SAAS,gBAAgB,EACrB,QAAQ,GACR,GAAG,SAC6B;AAChC,QACI,oBAAC,UAAiB,UAAlB;EACI,aAAU;EACH;EACP,GAAI;EACN,CAAA;;AAIV,SAAS,QAAQ,EAAE,GAAG,SAAsC;AACxD,QACI,oBAAC,UAAiB,UAAlB;EAA2B,OAAO;YAC9B,oBAAC,UAAiB,MAAlB;GAAuB,aAAU;GAAU,GAAI;GAAS,CAAA;EAChC,CAAA;;AAIpC,SAAS,eAAe,EAAE,GAAG,SAAyC;AAClE,QAAO,oBAAC,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAG9E,SAAS,eAAe,EACpB,WACA,OAAO,OACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,iBACA,UACA,GAAG,SAOA;CACH,MAAM,0BAA0B,mBAAmB,gBAAgB;AAEnE,QACI,oBAAC,UAAiB,QAAlB;EAAyB,WAAW;YAChC,oBAAC,UAAiB,YAAlB;GACW;GACM;GACP;GACM;GACZ,WAAU;aAEV,qBAAC,UAAiB,OAAlB;IACI,aAAU;IACV,WAAW,GAEP,+CAGA,uCAGA,oCAGA,iEACA,iHAGA,0EAGA,0CACA,0CACA,0CACA,0CACA,kDACA,+CAEA,UACH;IACD,GAAI;cA7BR,CA+BK,UACD,oBAAC,UAAiB,OAAlB,EACI,WAAW,GAEP,oCACA,gCAGA,+BAGA,QAGA,+BACA,4BACA,yFACA,2FACA,iHACA,yGACH,EACH,CAAA,CACmB;;GACC,CAAA;EACR,CAAA"}

package/dist/components/VirtualizedScrollArea.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+interface VirtualizedScrollAreaProps<T> {
+    items: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    overscan?: number;
+    estimateSize: (index: number) => number;
+    getItemKey?: (index: number) => string | number;
+    listHeight: number;
+    enableDynamicHeights?: boolean;
+    nativeScroll?: boolean;
+    className?: string;
+    initialScroll?: {
+        index: number;
+        clickAfterScroll: boolean;
+    };
+}
+export interface VirtualizedScrollAreaRef {
+    scrollToIndex: (index: number, options?: {
+        align?: 'start' | 'center' | 'end';
+        behavior?: 'auto' | 'smooth';
+    }) => void;
+}
+declare function VirtualizedScrollArea<T>({ items, renderItem, overscan, estimateSize, getItemKey, listHeight, enableDynamicHeights, nativeScroll, initialScroll, className, ...props }: VirtualizedScrollAreaProps<T>): import("react/jsx-runtime").JSX.Element;
+export { VirtualizedScrollArea };
+//# sourceMappingURL=VirtualizedScrollArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/VirtualizedScrollArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,0BAA0B,CAAC,CAAC;IAClC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,gBAAgB,EAAE,OAAO,CAAC;KAC7B,CAAC;CACL;AAED,MAAM,WAAW,wBAAwB;IACrC,aAAa,EAAE,CACX,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;QACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;KAChC,KACA,IAAI,CAAC;CACb;AAED,iBAAS,qBAAqB,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,UAAU,EACV,QAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,oBAA4B,EAC5B,YAAoB,EACpB,aAAa,EACb,SAAS,EACT,GAAG,KAAK,EACX,EAAE,0BAA0B,CAAC,CAAC,CAAC,2CA2F/B;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/VirtualizedScrollArea.js

@@ -0,0 +1,80 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { ScrollArea } from "./ScrollArea.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/VirtualizedScrollArea.tsx
+function VirtualizedScrollArea({ items, renderItem, overscan = 5, estimateSize, getItemKey, listHeight, enableDynamicHeights = false, nativeScroll = false, initialScroll, className, ...props }) {
+	const parentRef = React$1.useRef(null);
+	const initialScrollIndex = initialScroll?.index ?? -1;
+	const clickAfterInitialScroll = initialScroll?.clickAfterScroll ?? false;
+	const rowVirtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => {
+			return parentRef.current;
+		},
+		estimateSize,
+		overscan,
+		getItemKey: getItemKey || ((index) => {
+			return index;
+		})
+	});
+	const virtualItems = rowVirtualizer.getVirtualItems();
+	React$1.useEffect(() => {
+		if (initialScrollIndex < 0) return;
+		rowVirtualizer.scrollToIndex(initialScrollIndex, {
+			align: "start",
+			behavior: "auto"
+		});
+		if (clickAfterInitialScroll) setTimeout(() => {
+			const renderedElement = (parentRef.current?.querySelector(`[data-virtual-index="${initialScrollIndex}"]`))?.children[0];
+			if (renderedElement instanceof HTMLElement) renderedElement.click();
+		}, 100);
+	}, [
+		clickAfterInitialScroll,
+		initialScrollIndex,
+		rowVirtualizer
+	]);
+	const innerContent = /* @__PURE__ */ jsx("div", {
+		style: {
+			height: `${rowVirtualizer.getTotalSize()}px`,
+			width: "100%",
+			position: "relative"
+		},
+		children: virtualItems.map((virtualItem) => {
+			return /* @__PURE__ */ jsx("div", {
+				"data-index": virtualItem.index,
+				"data-virtual-index": virtualItem.index,
+				ref: enableDynamicHeights ? rowVirtualizer.measureElement : void 0,
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: enableDynamicHeights ? void 0 : `${virtualItem.size}px`,
+					transform: `translateY(${virtualItem.start}px)`
+				},
+				children: renderItem(items[virtualItem.index], virtualItem.index)
+			}, virtualItem.key);
+		})
+	});
+	if (nativeScroll) return /* @__PURE__ */ jsx("div", {
+		ref: parentRef,
+		className: cn("overflow-y-auto overflow-x-hidden", className),
+		style: { height: `${listHeight}px` },
+		children: innerContent
+	});
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		size: "default",
+		style: { height: `${listHeight}px` },
+		viewPortRef: parentRef,
+		className,
+		...props,
+		children: innerContent
+	});
+}
+//#endregion
+export { VirtualizedScrollArea };
+
+//# sourceMappingURL=VirtualizedScrollArea.js.map

package/dist/components/VirtualizedScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedScrollArea.js","names":[],"sources":["../../src/components/VirtualizedScrollArea.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport * as React from 'react';\n\nimport { ScrollArea } from '@verbb/plugin-kit-react/components/ScrollArea';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ninterface VirtualizedScrollAreaProps<T> {\n    items: T[];\n    renderItem: (item: T, index: number) => React.ReactNode;\n    overscan?: number;\n    estimateSize: (index: number) => number;\n    getItemKey?: (index: number) => string | number;\n    listHeight: number;\n    enableDynamicHeights?: boolean;\n    nativeScroll?: boolean;\n    className?: string;\n    initialScroll?: {\n        index: number;\n        clickAfterScroll: boolean;\n    };\n}\n\nexport interface VirtualizedScrollAreaRef {\n    scrollToIndex: (\n        index: number,\n        options?: {\n            align?: 'start' | 'center' | 'end';\n            behavior?: 'auto' | 'smooth';\n        },\n    ) => void;\n}\n\nfunction VirtualizedScrollArea<T>({\n    items,\n    renderItem,\n    overscan = 5,\n    estimateSize,\n    getItemKey,\n    listHeight,\n    enableDynamicHeights = false,\n    nativeScroll = false,\n    initialScroll,\n    className,\n    ...props\n}: VirtualizedScrollAreaProps<T>) {\n    const parentRef = React.useRef<HTMLDivElement>(null);\n    const initialScrollIndex = initialScroll?.index ?? -1;\n    const clickAfterInitialScroll = initialScroll?.clickAfterScroll ?? false;\n\n    const rowVirtualizer = useVirtualizer({\n        count: items.length,\n        getScrollElement: () => { return parentRef.current; },\n        estimateSize,\n        overscan,\n        getItemKey: getItemKey || ((index) => { return index; }),\n    });\n\n    const virtualItems = rowVirtualizer.getVirtualItems();\n    React.useEffect(() => {\n        if (initialScrollIndex < 0) {\n            return;\n        }\n        rowVirtualizer.scrollToIndex(initialScrollIndex, {\n            align: 'start',\n            behavior: 'auto',\n        });\n\n        if (clickAfterInitialScroll) {\n            // need to wait for the scroll to be completed\n            setTimeout(() => {\n                const targetElement = parentRef.current?.querySelector(\n                    `[data-virtual-index=\"${initialScrollIndex}\"]`,\n                );\n                const renderedElement = targetElement?.children[0];\n                if (renderedElement instanceof HTMLElement) {\n                    renderedElement.click();\n                }\n            }, 100);\n        }\n    }, [clickAfterInitialScroll, initialScrollIndex, rowVirtualizer]);\n\n    const innerContent = (\n        <div\n            style={{\n                height: `${rowVirtualizer.getTotalSize()}px`,\n                width: '100%',\n                position: 'relative',\n            }}\n        >\n            {virtualItems.map((virtualItem) => {\n                return (\n                    <div\n                        key={virtualItem.key}\n                        data-index={virtualItem.index}\n                        data-virtual-index={virtualItem.index}\n                        ref={enableDynamicHeights ? rowVirtualizer.measureElement : undefined}\n                        style={{\n                            position: 'absolute',\n                            top: 0,\n                            left: 0,\n                            width: '100%',\n                            height: enableDynamicHeights ? undefined : `${virtualItem.size}px`,\n                            transform: `translateY(${virtualItem.start}px)`,\n                        }}\n                    >\n                        {renderItem(items[virtualItem.index], virtualItem.index)}\n                    </div>\n                );\n            })}\n        </div>\n    );\n\n    if (nativeScroll) {\n        return (\n            <div\n                ref={parentRef}\n                className={cn('overflow-y-auto overflow-x-hidden', className)}\n                style={{ height: `${listHeight}px` }}\n            >\n                {innerContent}\n            </div>\n        );\n    }\n\n    return (\n        <ScrollArea\n            size=\"default\"\n            style={{ height: `${listHeight}px` }}\n            viewPortRef={parentRef as React.RefObject<HTMLDivElement>}\n            className={className}\n            {...props}\n        >\n            {innerContent}\n        </ScrollArea>\n    );\n};\n\nexport { VirtualizedScrollArea };\n"],"mappings":";;;;;;;AAgCA,SAAS,sBAAyB,EAC9B,OACA,YACA,WAAW,GACX,cACA,YACA,YACA,uBAAuB,OACvB,eAAe,OACf,eACA,WACA,GAAG,SAC2B;CAC9B,MAAM,YAAY,QAAM,OAAuB,KAAK;CACpD,MAAM,qBAAqB,eAAe,SAAS;CACnD,MAAM,0BAA0B,eAAe,oBAAoB;CAEnE,MAAM,iBAAiB,eAAe;EAClC,OAAO,MAAM;EACb,wBAAwB;AAAE,UAAO,UAAU;;EAC3C;EACA;EACA,YAAY,gBAAgB,UAAU;AAAE,UAAO;;EAClD,CAAC;CAEF,MAAM,eAAe,eAAe,iBAAiB;AACrD,SAAM,gBAAgB;AAClB,MAAI,qBAAqB,EACrB;AAEJ,iBAAe,cAAc,oBAAoB;GAC7C,OAAO;GACP,UAAU;GACb,CAAC;AAEF,MAAI,wBAEA,kBAAiB;GAIb,MAAM,mBAHgB,UAAU,SAAS,cACrC,wBAAwB,mBAAmB,IAC9C,GACsC,SAAS;AAChD,OAAI,2BAA2B,YAC3B,iBAAgB,OAAO;KAE5B,IAAI;IAEZ;EAAC;EAAyB;EAAoB;EAAe,CAAC;CAEjE,MAAM,eACF,oBAAC,OAAD;EACI,OAAO;GACH,QAAQ,GAAG,eAAe,cAAc,CAAC;GACzC,OAAO;GACP,UAAU;GACb;YAEA,aAAa,KAAK,gBAAgB;AAC/B,UACI,oBAAC,OAAD;IAEI,cAAY,YAAY;IACxB,sBAAoB,YAAY;IAChC,KAAK,uBAAuB,eAAe,iBAAiB,KAAA;IAC5D,OAAO;KACH,UAAU;KACV,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ,uBAAuB,KAAA,IAAY,GAAG,YAAY,KAAK;KAC/D,WAAW,cAAc,YAAY,MAAM;KAC9C;cAEA,WAAW,MAAM,YAAY,QAAQ,YAAY,MAAM;IACtD,EAdG,YAAY,IAcf;IAEZ;EACA,CAAA;AAGV,KAAI,aACA,QACI,oBAAC,OAAD;EACI,KAAK;EACL,WAAW,GAAG,qCAAqC,UAAU;EAC7D,OAAO,EAAE,QAAQ,GAAG,WAAW,KAAK;YAEnC;EACC,CAAA;AAId,QACI,oBAAC,YAAD;EACI,MAAK;EACL,OAAO,EAAE,QAAQ,GAAG,WAAW,KAAK;EACpC,aAAa;EACF;EACX,GAAI;YAEH;EACQ,CAAA"}

package/dist/components/editable-table/RowDataCells.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export const RowDataCells: React.NamedExoticComponent<object>;
+//# sourceMappingURL=RowDataCells.d.ts.map

package/dist/components/editable-table/RowDataCells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowDataCells.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/RowDataCells.jsx"],"names":[],"mappings":"AASA,8DAqCG;kBA9Ce,OAAO"}

package/dist/components/editable-table/RowDataCells.js

@@ -0,0 +1,33 @@
+import { cn } from "../../utils/classes.js";
+import "../../utils/index.js";
+import { TableCell } from "./TableCell.js";
+import { TableCell as TableCell$1 } from "../Table.js";
+import "../index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/editable-table/RowDataCells.jsx
+var isThinColumn = (column) => {
+	return Boolean(column?.thin || column?.type === "checkbox" || column?.type === "lightswitch" || column?.type === "radio");
+};
+var RowDataCells = React.memo(({ row, rowIndex, columns, columnsSignature, modifyColumn, getCellErrors, onUpdateCell }) => {
+	return columns.map((column) => {
+		return /* @__PURE__ */ jsx(TableCell$1, {
+			className: cn(column.className, isThinColumn(column) && "w-[1%] whitespace-nowrap"),
+			children: /* @__PURE__ */ jsx(TableCell, {
+				row,
+				rowIndex,
+				column,
+				value: row[column.name],
+				modifyColumn,
+				getCellErrors,
+				onUpdateCell
+			})
+		}, column.name);
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.row === nextProps.row && prevProps.rowIndex === nextProps.rowIndex && prevProps.columnsSignature === nextProps.columnsSignature && prevProps.getCellErrors === nextProps.getCellErrors;
+});
+//#endregion
+export { RowDataCells };
+
+//# sourceMappingURL=RowDataCells.js.map

package/dist/components/editable-table/RowDataCells.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowDataCells.js","names":[],"sources":["../../../src/components/editable-table/RowDataCells.jsx"],"sourcesContent":["import React from 'react';\nimport { TableCell as UITableCell } from '@verbb/plugin-kit-react/components';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { TableCell } from './TableCell';\n\nconst isThinColumn = (column) => {\n    return Boolean(column?.thin || column?.type === 'checkbox' || column?.type === 'lightswitch' || column?.type === 'radio');\n};\n\nexport const RowDataCells = React.memo(({\n    row,\n    rowIndex,\n    columns,\n    columnsSignature,\n    modifyColumn,\n    getCellErrors,\n    onUpdateCell,\n}) => {\n    return columns.map((column) => {\n        return (\n            <UITableCell\n                key={column.name}\n                className={cn(\n                    column.className,\n                    isThinColumn(column) && 'w-[1%] whitespace-nowrap',\n                )}\n            >\n                <TableCell\n                    row={row}\n                    rowIndex={rowIndex}\n                    column={column}\n                    value={row[column.name]}\n                    modifyColumn={modifyColumn}\n                    getCellErrors={getCellErrors}\n                    onUpdateCell={onUpdateCell}\n                />\n            </UITableCell>\n        );\n    });\n}, (prevProps, nextProps) => {\n    return (\n        prevProps.row === nextProps.row\n        && prevProps.rowIndex === nextProps.rowIndex\n        && prevProps.columnsSignature === nextProps.columnsSignature\n        && prevProps.getCellErrors === nextProps.getCellErrors\n    );\n});\n"],"mappings":";;;;;;;;AAKA,IAAM,gBAAgB,WAAW;AAC7B,QAAO,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,cAAc,QAAQ,SAAS,iBAAiB,QAAQ,SAAS,QAAQ;;AAG7H,IAAa,eAAe,MAAM,MAAM,EACpC,KACA,UACA,SACA,kBACA,cACA,eACA,mBACE;AACF,QAAO,QAAQ,KAAK,WAAW;AAC3B,SACI,oBAAC,aAAD;GAEI,WAAW,GACP,OAAO,WACP,aAAa,OAAO,IAAI,2BAC3B;aAED,oBAAC,WAAD;IACS;IACK;IACF;IACR,OAAO,IAAI,OAAO;IACJ;IACC;IACD;IAChB,CAAA;GACQ,EAfL,OAAO,KAeF;GAEpB;IACF,WAAW,cAAc;AACzB,QACI,UAAU,QAAQ,UAAU,OACzB,UAAU,aAAa,UAAU,YACjC,UAAU,qBAAqB,UAAU,oBACzC,UAAU,kBAAkB,UAAU;EAE/C"}

package/dist/components/editable-table/TableCell.d.ts

@@ -0,0 +1,13 @@
+import { EditableTableColumn, EditableTableModifyColumn, EditableTableRow } from './types';
+type Props = {
+    column: EditableTableColumn;
+    value: unknown;
+    row: EditableTableRow;
+    rowIndex: number;
+    modifyColumn?: EditableTableModifyColumn | null;
+    getCellErrors: (rowIndex: number, columnName: string) => unknown[];
+    onUpdateCell: (rowIndex: number, row: EditableTableRow, column: EditableTableColumn, newValue: unknown) => void;
+};
+export declare function TableCell({ column, value, row, rowIndex, modifyColumn, getCellErrors, onUpdateCell, }: Props): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null | undefined;
+export {};
+//# sourceMappingURL=TableCell.d.ts.map

package/dist/components/editable-table/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/editable-table/TableCell.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EACR,mBAAmB,EACnB,yBAAyB,EACzB,gBAAgB,EACnB,MAAM,SAAS,CAAC;AAEjB,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,EAAE,CAAC;IACnE,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,gBAAgB,EAAE,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnH,CAAC;AAwLF,wBAAgB,SAAS,CAAC,EACtB,MAAM,EACN,KAAK,EACL,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,YAAY,GACf,EAAE,KAAK,2WAsQP"}