@copilotkit/a2ui-renderer 1.51.4 → 1.51.5-next.1

package/dist/react-renderer/theme/litTheme.mjs

@@ -0,0 +1,367 @@
+//#region src/react-renderer/theme/litTheme.ts
+/**
+* Default theme for A2UI React components.
+*
+* This theme uses the same CSS class conventions as the Lit renderer,
+* ensuring visual consistency between React and Lit implementations.
+*
+* IMPORTANT: This theme must be kept in sync with the Lit renderer's internal
+* styling. If Lit components change their class maps, this file must be updated
+* to match. Ideally, Lit would export its default theme for direct import.
+*
+* Requires the structural styles to be injected:
+* @example
+* ```tsx
+* import { A2UIProvider } from '@a2ui/react';
+* import { injectStyles } from '@a2ui/react/styles';
+*
+* // Inject structural CSS at app startup
+* injectStyles();
+*
+* function App() {
+*   return (
+*     <A2UIProvider>
+*       <A2UIRenderer surfaceId="main" />
+*     </A2UIProvider>
+*   );
+* }
+* ```
+*/
+const elementA = {
+	"typography-f-sf": true,
+	"typography-fs-n": true,
+	"typography-w-500": true,
+	"layout-as-n": true,
+	"layout-dis-iflx": true,
+	"layout-al-c": true,
+	"typography-td-none": true,
+	"color-c-p40": true
+};
+const elementAudio = { "layout-w-100": true };
+const elementBody = {
+	"typography-f-s": true,
+	"typography-fs-n": true,
+	"typography-w-400": true,
+	"layout-mt-0": true,
+	"layout-mb-2": true,
+	"typography-sz-bm": true,
+	"color-c-n10": true
+};
+const elementButton = {
+	"typography-f-sf": true,
+	"typography-fs-n": true,
+	"typography-w-500": true,
+	"layout-pt-3": true,
+	"layout-pb-3": true,
+	"layout-pl-5": true,
+	"layout-pr-5": true,
+	"layout-mb-1": true,
+	"border-br-16": true,
+	"border-bw-0": true,
+	"border-c-n70": true,
+	"border-bs-s": true,
+	"color-bgc-s30": true,
+	"behavior-ho-80": true
+};
+const elementHeading = {
+	"typography-f-sf": true,
+	"typography-fs-n": true,
+	"typography-w-500": true,
+	"layout-mt-0": true,
+	"layout-mb-2": true
+};
+const elementIframe = { "behavior-sw-n": true };
+const elementInput = {
+	"typography-f-sf": true,
+	"typography-fs-n": true,
+	"typography-w-400": true,
+	"layout-pl-4": true,
+	"layout-pr-4": true,
+	"layout-pt-2": true,
+	"layout-pb-2": true,
+	"border-br-6": true,
+	"border-bw-1": true,
+	"color-bc-s70": true,
+	"border-bs-s": true,
+	"layout-as-n": true,
+	"color-c-n10": true
+};
+const elementP = {
+	"typography-f-s": true,
+	"typography-fs-n": true,
+	"typography-w-400": true,
+	"layout-m-0": true,
+	"typography-sz-bm": true,
+	"layout-as-n": true,
+	"color-c-n10": true
+};
+const elementList = {
+	"typography-f-s": true,
+	"typography-fs-n": true,
+	"typography-w-400": true,
+	"layout-m-0": true,
+	"typography-sz-bm": true,
+	"layout-as-n": true,
+	"color-c-n10": true
+};
+const elementPre = {
+	"typography-f-c": true,
+	"typography-fs-n": true,
+	"typography-w-400": true,
+	"typography-sz-bm": true,
+	"typography-ws-p": true,
+	"layout-as-n": true
+};
+const elementTextarea = {
+	...elementInput,
+	"layout-r-none": true,
+	"layout-fs-c": true
+};
+const elementVideo = { "layout-el-cv": true };
+const litTheme = {
+	components: {
+		AudioPlayer: {},
+		Divider: {},
+		Icon: {},
+		Image: {
+			all: {
+				"border-br-5": true,
+				"layout-el-cv": true,
+				"layout-w-100": true,
+				"layout-h-100": true
+			},
+			avatar: { "is-avatar": true },
+			header: {},
+			icon: {},
+			largeFeature: {},
+			mediumFeature: {},
+			smallFeature: {}
+		},
+		Text: {
+			all: {
+				"layout-w-100": true,
+				"layout-g-2": true
+			},
+			h1: {
+				"typography-f-sf": true,
+				"typography-v-r": true,
+				"typography-w-400": true,
+				"layout-m-0": true,
+				"layout-p-0": true,
+				"typography-sz-hs": true
+			},
+			h2: {
+				"typography-f-sf": true,
+				"typography-v-r": true,
+				"typography-w-400": true,
+				"layout-m-0": true,
+				"layout-p-0": true,
+				"typography-sz-tl": true
+			},
+			h3: {
+				"typography-f-sf": true,
+				"typography-v-r": true,
+				"typography-w-400": true,
+				"layout-m-0": true,
+				"layout-p-0": true,
+				"typography-sz-tl": true
+			},
+			h4: {
+				"typography-f-sf": true,
+				"typography-v-r": true,
+				"typography-w-400": true,
+				"layout-m-0": true,
+				"layout-p-0": true,
+				"typography-sz-bl": true
+			},
+			h5: {
+				"typography-f-sf": true,
+				"typography-v-r": true,
+				"typography-w-400": true,
+				"layout-m-0": true,
+				"layout-p-0": true,
+				"typography-sz-bm": true
+			},
+			body: {},
+			caption: {}
+		},
+		Video: {
+			"border-br-5": true,
+			"layout-el-cv": true
+		},
+		Card: {
+			"border-br-9": true,
+			"layout-p-4": true,
+			"color-bgc-n100": true
+		},
+		Column: { "layout-g-2": true },
+		List: {
+			"layout-g-4": true,
+			"layout-p-2": true
+		},
+		Modal: {
+			backdrop: { "color-bbgc-p60_20": true },
+			element: {
+				"border-br-2": true,
+				"color-bgc-p100": true,
+				"layout-p-4": true,
+				"border-bw-1": true,
+				"border-bs-s": true,
+				"color-bc-p80": true
+			}
+		},
+		Row: { "layout-g-4": true },
+		Tabs: {
+			container: {},
+			controls: {
+				all: {},
+				selected: {}
+			},
+			element: {}
+		},
+		Button: {
+			"layout-pt-2": true,
+			"layout-pb-2": true,
+			"layout-pl-3": true,
+			"layout-pr-3": true,
+			"border-br-12": true,
+			"border-bw-0": true,
+			"border-bs-s": true,
+			"color-bgc-p30": true,
+			"color-c-p100": true,
+			"behavior-ho-70": true,
+			"typography-w-400": true
+		},
+		CheckBox: {
+			container: {
+				"layout-dsp-iflex": true,
+				"layout-al-c": true
+			},
+			element: {
+				"layout-m-0": true,
+				"layout-mr-2": true,
+				"layout-p-2": true,
+				"border-br-12": true,
+				"border-bw-1": true,
+				"border-bs-s": true,
+				"color-bgc-p100": true,
+				"color-bc-p60": true,
+				"color-c-n30": true,
+				"color-c-p30": true
+			},
+			label: {
+				"color-c-p30": true,
+				"typography-f-sf": true,
+				"typography-v-r": true,
+				"typography-w-400": true,
+				"layout-flx-1": true,
+				"typography-sz-ll": true
+			}
+		},
+		DateTimeInput: {
+			container: {
+				"typography-sz-bm": true,
+				"layout-w-100": true,
+				"layout-g-2": true,
+				"layout-dsp-flexhor": true,
+				"layout-al-c": true,
+				"typography-ws-nw": true
+			},
+			label: {
+				"color-c-p30": true,
+				"typography-sz-bm": true
+			},
+			element: {
+				"layout-pt-2": true,
+				"layout-pb-2": true,
+				"layout-pl-3": true,
+				"layout-pr-3": true,
+				"border-br-2": true,
+				"border-bw-1": true,
+				"border-bs-s": true,
+				"color-bgc-p100": true,
+				"color-bc-p60": true,
+				"color-c-n30": true,
+				"color-c-p30": true
+			}
+		},
+		MultipleChoice: {
+			container: {},
+			label: {},
+			element: {}
+		},
+		Slider: {
+			container: {},
+			label: {},
+			element: {}
+		},
+		TextField: {
+			container: {
+				"typography-sz-bm": true,
+				"layout-w-100": true,
+				"layout-g-2": true,
+				"layout-dsp-flexhor": true,
+				"layout-al-c": true,
+				"typography-ws-nw": true
+			},
+			label: {
+				"layout-flx-0": true,
+				"color-c-p30": true
+			},
+			element: {
+				"typography-sz-bm": true,
+				"layout-pt-2": true,
+				"layout-pb-2": true,
+				"layout-pl-3": true,
+				"layout-pr-3": true,
+				"border-br-2": true,
+				"border-bw-1": true,
+				"border-bs-s": true,
+				"color-bgc-p100": true,
+				"color-bc-p60": true,
+				"color-c-n30": true,
+				"color-c-p30": true
+			}
+		}
+	},
+	elements: {
+		a: elementA,
+		audio: elementAudio,
+		body: elementBody,
+		button: elementButton,
+		h1: elementHeading,
+		h2: elementHeading,
+		h3: elementHeading,
+		h4: elementHeading,
+		h5: elementHeading,
+		iframe: elementIframe,
+		input: elementInput,
+		p: elementP,
+		pre: elementPre,
+		textarea: elementTextarea,
+		video: elementVideo
+	},
+	markdown: {
+		p: Object.keys(elementP),
+		h1: Object.keys(elementHeading),
+		h2: Object.keys(elementHeading),
+		h3: Object.keys(elementHeading),
+		h4: Object.keys(elementHeading),
+		h5: Object.keys(elementHeading),
+		ul: Object.keys(elementList),
+		ol: Object.keys(elementList),
+		li: Object.keys(elementList),
+		a: Object.keys(elementA),
+		strong: [],
+		em: []
+	}
+};
+/**
+* Alias for litTheme - the default theme for A2UI React components.
+* @see litTheme
+*/
+const defaultTheme = litTheme;
+
+//#endregion
+export { defaultTheme };
+//# sourceMappingURL=litTheme.mjs.map

package/dist/react-renderer/theme/litTheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"litTheme.mjs","names":[],"sources":["../../../src/react-renderer/theme/litTheme.ts"],"sourcesContent":["import type { Types } from \"@a2ui/lit/0.8\";\n\n/**\n * Default theme for A2UI React components.\n *\n * This theme uses the same CSS class conventions as the Lit renderer,\n * ensuring visual consistency between React and Lit implementations.\n *\n * IMPORTANT: This theme must be kept in sync with the Lit renderer's internal\n * styling. If Lit components change their class maps, this file must be updated\n * to match. Ideally, Lit would export its default theme for direct import.\n *\n * Requires the structural styles to be injected:\n * @example\n * ```tsx\n * import { A2UIProvider } from '@a2ui/react';\n * import { injectStyles } from '@a2ui/react/styles';\n *\n * // Inject structural CSS at app startup\n * injectStyles();\n *\n * function App() {\n *   return (\n *     <A2UIProvider>\n *       <A2UIRenderer surfaceId=\"main\" />\n *     </A2UIProvider>\n *   );\n * }\n * ```\n */\n\n// =============================================================================\n// Element Styles (used for markdown rendering and form elements)\n// =============================================================================\n\nconst elementA = {\n  \"typography-f-sf\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-500\": true,\n  \"layout-as-n\": true,\n  \"layout-dis-iflx\": true,\n  \"layout-al-c\": true,\n  \"typography-td-none\": true,\n  \"color-c-p40\": true,\n};\n\nconst elementAudio = {\n  \"layout-w-100\": true,\n};\n\nconst elementBody = {\n  \"typography-f-s\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-400\": true,\n  \"layout-mt-0\": true,\n  \"layout-mb-2\": true,\n  \"typography-sz-bm\": true,\n  \"color-c-n10\": true,\n};\n\nconst elementButton = {\n  \"typography-f-sf\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-500\": true,\n  \"layout-pt-3\": true,\n  \"layout-pb-3\": true,\n  \"layout-pl-5\": true,\n  \"layout-pr-5\": true,\n  \"layout-mb-1\": true,\n  \"border-br-16\": true,\n  \"border-bw-0\": true,\n  \"border-c-n70\": true,\n  \"border-bs-s\": true,\n  \"color-bgc-s30\": true,\n  \"behavior-ho-80\": true,\n};\n\nconst elementHeading = {\n  \"typography-f-sf\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-500\": true,\n  \"layout-mt-0\": true,\n  \"layout-mb-2\": true,\n};\n\nconst elementIframe = {\n  \"behavior-sw-n\": true,\n};\n\nconst elementInput = {\n  \"typography-f-sf\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-400\": true,\n  \"layout-pl-4\": true,\n  \"layout-pr-4\": true,\n  \"layout-pt-2\": true,\n  \"layout-pb-2\": true,\n  \"border-br-6\": true,\n  \"border-bw-1\": true,\n  \"color-bc-s70\": true,\n  \"border-bs-s\": true,\n  \"layout-as-n\": true,\n  \"color-c-n10\": true,\n};\n\nconst elementP = {\n  \"typography-f-s\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-400\": true,\n  \"layout-m-0\": true,\n  \"typography-sz-bm\": true,\n  \"layout-as-n\": true,\n  \"color-c-n10\": true,\n};\n\nconst elementList = {\n  \"typography-f-s\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-400\": true,\n  \"layout-m-0\": true,\n  \"typography-sz-bm\": true,\n  \"layout-as-n\": true,\n  \"color-c-n10\": true,\n};\n\nconst elementPre = {\n  \"typography-f-c\": true,\n  \"typography-fs-n\": true,\n  \"typography-w-400\": true,\n  \"typography-sz-bm\": true,\n  \"typography-ws-p\": true,\n  \"layout-as-n\": true,\n};\n\nconst elementTextarea = {\n  ...elementInput,\n  \"layout-r-none\": true,\n  \"layout-fs-c\": true,\n};\n\nconst elementVideo = {\n  \"layout-el-cv\": true,\n};\n\n// =============================================================================\n// Theme Export\n// =============================================================================\n\nexport const litTheme: Types.Theme = {\n  // ===========================================================================\n  // Additional Styles (inline CSS properties)\n  // ===========================================================================\n\n  // additionalStyles is optional - only define if custom styling is needed\n  // The default Lit theme does not apply any additional inline styles\n\n  components: {\n    // =========================================================================\n    // Content Components\n    // =========================================================================\n\n    AudioPlayer: {},\n\n    Divider: {},\n\n    Icon: {},\n\n    Image: {\n      all: {\n        \"border-br-5\": true,\n        \"layout-el-cv\": true,\n        \"layout-w-100\": true,\n        \"layout-h-100\": true,\n      },\n      avatar: { \"is-avatar\": true },\n      header: {},\n      icon: {},\n      largeFeature: {},\n      mediumFeature: {},\n      smallFeature: {},\n    },\n\n    Text: {\n      all: {\n        \"layout-w-100\": true,\n        \"layout-g-2\": true,\n      },\n      h1: {\n        \"typography-f-sf\": true,\n        \"typography-v-r\": true,\n        \"typography-w-400\": true,\n        \"layout-m-0\": true,\n        \"layout-p-0\": true,\n        \"typography-sz-hs\": true,\n      },\n      h2: {\n        \"typography-f-sf\": true,\n        \"typography-v-r\": true,\n        \"typography-w-400\": true,\n        \"layout-m-0\": true,\n        \"layout-p-0\": true,\n        \"typography-sz-tl\": true,\n      },\n      h3: {\n        \"typography-f-sf\": true,\n        \"typography-v-r\": true,\n        \"typography-w-400\": true,\n        \"layout-m-0\": true,\n        \"layout-p-0\": true,\n        \"typography-sz-tl\": true,\n      },\n      h4: {\n        \"typography-f-sf\": true,\n        \"typography-v-r\": true,\n        \"typography-w-400\": true,\n        \"layout-m-0\": true,\n        \"layout-p-0\": true,\n        \"typography-sz-bl\": true,\n      },\n      h5: {\n        \"typography-f-sf\": true,\n        \"typography-v-r\": true,\n        \"typography-w-400\": true,\n        \"layout-m-0\": true,\n        \"layout-p-0\": true,\n        \"typography-sz-bm\": true,\n      },\n      body: {},\n      caption: {},\n    },\n\n    Video: {\n      \"border-br-5\": true,\n      \"layout-el-cv\": true,\n    },\n\n    // =========================================================================\n    // Layout Components\n    // =========================================================================\n\n    Card: {\n      \"border-br-9\": true,\n      \"layout-p-4\": true,\n      \"color-bgc-n100\": true,\n    },\n\n    Column: {\n      \"layout-g-2\": true,\n    },\n\n    List: {\n      \"layout-g-4\": true,\n      \"layout-p-2\": true,\n    },\n\n    Modal: {\n      backdrop: {\n        \"color-bbgc-p60_20\": true,\n      },\n      element: {\n        \"border-br-2\": true,\n        \"color-bgc-p100\": true,\n        \"layout-p-4\": true,\n        \"border-bw-1\": true,\n        \"border-bs-s\": true,\n        \"color-bc-p80\": true,\n      },\n    },\n\n    Row: {\n      \"layout-g-4\": true,\n    },\n\n    Tabs: {\n      container: {},\n      controls: {\n        all: {},\n        selected: {},\n      },\n      element: {},\n    },\n\n    // =========================================================================\n    // Interactive Components\n    // =========================================================================\n\n    Button: {\n      \"layout-pt-2\": true,\n      \"layout-pb-2\": true,\n      \"layout-pl-3\": true,\n      \"layout-pr-3\": true,\n      \"border-br-12\": true,\n      \"border-bw-0\": true,\n      \"border-bs-s\": true,\n      \"color-bgc-p30\": true,\n      \"color-c-p100\": true, // White text on dark purple background\n      \"behavior-ho-70\": true,\n      \"typography-w-400\": true,\n    },\n\n    CheckBox: {\n      container: {\n        \"layout-dsp-iflex\": true,\n        \"layout-al-c\": true,\n      },\n      element: {\n        \"layout-m-0\": true,\n        \"layout-mr-2\": true,\n        \"layout-p-2\": true,\n        \"border-br-12\": true,\n        \"border-bw-1\": true,\n        \"border-bs-s\": true,\n        \"color-bgc-p100\": true,\n        \"color-bc-p60\": true,\n        \"color-c-n30\": true,\n        \"color-c-p30\": true,\n      },\n      label: {\n        \"color-c-p30\": true,\n        \"typography-f-sf\": true,\n        \"typography-v-r\": true,\n        \"typography-w-400\": true,\n        \"layout-flx-1\": true,\n        \"typography-sz-ll\": true,\n      },\n    },\n\n    DateTimeInput: {\n      container: {\n        \"typography-sz-bm\": true,\n        \"layout-w-100\": true,\n        \"layout-g-2\": true,\n        \"layout-dsp-flexhor\": true,\n        \"layout-al-c\": true,\n        \"typography-ws-nw\": true,\n      },\n      label: {\n        \"color-c-p30\": true,\n        \"typography-sz-bm\": true,\n      },\n      element: {\n        \"layout-pt-2\": true,\n        \"layout-pb-2\": true,\n        \"layout-pl-3\": true,\n        \"layout-pr-3\": true,\n        \"border-br-2\": true,\n        \"border-bw-1\": true,\n        \"border-bs-s\": true,\n        \"color-bgc-p100\": true,\n        \"color-bc-p60\": true,\n        \"color-c-n30\": true,\n        \"color-c-p30\": true,\n      },\n    },\n\n    MultipleChoice: {\n      container: {},\n      label: {},\n      element: {},\n    },\n\n    Slider: {\n      container: {},\n      label: {},\n      element: {},\n    },\n\n    TextField: {\n      container: {\n        \"typography-sz-bm\": true,\n        \"layout-w-100\": true,\n        \"layout-g-2\": true,\n        \"layout-dsp-flexhor\": true,\n        \"layout-al-c\": true,\n        \"typography-ws-nw\": true,\n      },\n      label: {\n        \"layout-flx-0\": true,\n        \"color-c-p30\": true,\n      },\n      element: {\n        \"typography-sz-bm\": true,\n        \"layout-pt-2\": true,\n        \"layout-pb-2\": true,\n        \"layout-pl-3\": true,\n        \"layout-pr-3\": true,\n        \"border-br-2\": true,\n        \"border-bw-1\": true,\n        \"border-bs-s\": true,\n        \"color-bgc-p100\": true,\n        \"color-bc-p60\": true,\n        \"color-c-n30\": true,\n        \"color-c-p30\": true,\n      },\n    },\n  },\n\n  // ===========================================================================\n  // HTML Elements (used for markdown rendering and raw HTML)\n  // ===========================================================================\n\n  elements: {\n    a: elementA,\n    audio: elementAudio,\n    body: elementBody,\n    button: elementButton,\n    h1: elementHeading,\n    h2: elementHeading,\n    h3: elementHeading,\n    h4: elementHeading,\n    h5: elementHeading,\n    iframe: elementIframe,\n    input: elementInput,\n    p: elementP,\n    pre: elementPre,\n    textarea: elementTextarea,\n    video: elementVideo,\n  },\n\n  // ===========================================================================\n  // Markdown (class arrays for markdown-it renderer)\n  // ===========================================================================\n\n  markdown: {\n    p: Object.keys(elementP),\n    h1: Object.keys(elementHeading),\n    h2: Object.keys(elementHeading),\n    h3: Object.keys(elementHeading),\n    h4: Object.keys(elementHeading),\n    h5: Object.keys(elementHeading),\n    ul: Object.keys(elementList),\n    ol: Object.keys(elementList),\n    li: Object.keys(elementList),\n    a: Object.keys(elementA),\n    strong: [],\n    em: [],\n  },\n};\n\n/**\n * Alias for litTheme - the default theme for A2UI React components.\n * @see litTheme\n */\nexport const defaultTheme = litTheme;\n"],"mappings":"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"}

package/dist/react-renderer/theme/utils.cjs

@@ -0,0 +1,41 @@
+
+//#region src/react-renderer/theme/utils.ts
+/**
+* Converts a theme class map (Record<string, boolean>) to a className string.
+*
+* @param classMap - An object where keys are class names and values are booleans
+* @returns A space-separated string of class names where the value is true
+*
+* @example
+* classMapToString({ 'a2ui-button': true, 'a2ui-button--primary': true, 'disabled': false })
+* // Returns: 'a2ui-button a2ui-button--primary'
+*/
+function classMapToString(classMap) {
+	if (!classMap) return "";
+	return Object.entries(classMap).filter(([, enabled]) => enabled).map(([className]) => className).join(" ");
+}
+/**
+* Converts an additional styles object (Record<string, string>) to a React style object.
+*
+* @param styles - An object with CSS property names as keys and values as strings
+* @returns A React-compatible style object, or undefined if no styles
+*
+* @example
+* stylesToObject({ 'background-color': 'red', 'font-size': '16px', '--custom-var': 'blue' })
+* // Returns: { backgroundColor: 'red', fontSize: '16px', '--custom-var': 'blue' }
+*/
+function stylesToObject(styles) {
+	if (!styles || Object.keys(styles).length === 0) return void 0;
+	const result = {};
+	for (const [key, value] of Object.entries(styles)) if (key.startsWith("--")) result[key] = value;
+	else {
+		const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+		result[camelKey] = value;
+	}
+	return result;
+}
+
+//#endregion
+exports.classMapToString = classMapToString;
+exports.stylesToObject = stylesToObject;
+//# sourceMappingURL=utils.cjs.map

package/dist/react-renderer/theme/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":[],"sources":["../../../src/react-renderer/theme/utils.ts"],"sourcesContent":["/**\n * Converts a theme class map (Record<string, boolean>) to a className string.\n *\n * @param classMap - An object where keys are class names and values are booleans\n * @returns A space-separated string of class names where the value is true\n *\n * @example\n * classMapToString({ 'a2ui-button': true, 'a2ui-button--primary': true, 'disabled': false })\n * // Returns: 'a2ui-button a2ui-button--primary'\n */\nexport function classMapToString(\n  classMap: Record<string, boolean> | undefined,\n): string {\n  if (!classMap) return \"\";\n  return Object.entries(classMap)\n    .filter(([, enabled]) => enabled)\n    .map(([className]) => className)\n    .join(\" \");\n}\n\n/**\n * Converts an additional styles object (Record<string, string>) to a React style object.\n *\n * @param styles - An object with CSS property names as keys and values as strings\n * @returns A React-compatible style object, or undefined if no styles\n *\n * @example\n * stylesToObject({ 'background-color': 'red', 'font-size': '16px', '--custom-var': 'blue' })\n * // Returns: { backgroundColor: 'red', fontSize: '16px', '--custom-var': 'blue' }\n */\nexport function stylesToObject(\n  styles: Record<string, string> | undefined,\n): React.CSSProperties | undefined {\n  if (!styles || Object.keys(styles).length === 0) return undefined;\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(styles)) {\n    // Preserve CSS custom properties (--var-name) as-is\n    if (key.startsWith(\"--\")) {\n      result[key] = value;\n    } else {\n      // Convert kebab-case to camelCase for React\n      const camelKey = key.replace(/-([a-z])/g, (_, letter) =>\n        letter.toUpperCase(),\n      );\n      result[camelKey] = value;\n    }\n  }\n  return result as React.CSSProperties;\n}\n"],"mappings":";;;;;;;;;;;;AAUA,SAAgB,iBACd,UACQ;AACR,KAAI,CAAC,SAAU,QAAO;AACtB,QAAO,OAAO,QAAQ,SAAS,CAC5B,QAAQ,GAAG,aAAa,QAAQ,CAChC,KAAK,CAAC,eAAe,UAAU,CAC/B,KAAK,IAAI;;;;;;;;;;;;AAad,SAAgB,eACd,QACiC;AACjC,KAAI,CAAC,UAAU,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG,QAAO;CAExD,MAAM,SAAiC,EAAE;AACzC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAE/C,KAAI,IAAI,WAAW,KAAK,CACtB,QAAO,OAAO;MACT;EAEL,MAAM,WAAW,IAAI,QAAQ,cAAc,GAAG,WAC5C,OAAO,aAAa,CACrB;AACD,SAAO,YAAY;;AAGvB,QAAO"}

package/dist/react-renderer/theme/utils.mjs

@@ -0,0 +1,39 @@
+//#region src/react-renderer/theme/utils.ts
+/**
+* Converts a theme class map (Record<string, boolean>) to a className string.
+*
+* @param classMap - An object where keys are class names and values are booleans
+* @returns A space-separated string of class names where the value is true
+*
+* @example
+* classMapToString({ 'a2ui-button': true, 'a2ui-button--primary': true, 'disabled': false })
+* // Returns: 'a2ui-button a2ui-button--primary'
+*/
+function classMapToString(classMap) {
+	if (!classMap) return "";
+	return Object.entries(classMap).filter(([, enabled]) => enabled).map(([className]) => className).join(" ");
+}
+/**
+* Converts an additional styles object (Record<string, string>) to a React style object.
+*
+* @param styles - An object with CSS property names as keys and values as strings
+* @returns A React-compatible style object, or undefined if no styles
+*
+* @example
+* stylesToObject({ 'background-color': 'red', 'font-size': '16px', '--custom-var': 'blue' })
+* // Returns: { backgroundColor: 'red', fontSize: '16px', '--custom-var': 'blue' }
+*/
+function stylesToObject(styles) {
+	if (!styles || Object.keys(styles).length === 0) return void 0;
+	const result = {};
+	for (const [key, value] of Object.entries(styles)) if (key.startsWith("--")) result[key] = value;
+	else {
+		const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+		result[camelKey] = value;
+	}
+	return result;
+}
+
+//#endregion
+export { classMapToString, stylesToObject };
+//# sourceMappingURL=utils.mjs.map

package/dist/react-renderer/theme/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/react-renderer/theme/utils.ts"],"sourcesContent":["/**\n * Converts a theme class map (Record<string, boolean>) to a className string.\n *\n * @param classMap - An object where keys are class names and values are booleans\n * @returns A space-separated string of class names where the value is true\n *\n * @example\n * classMapToString({ 'a2ui-button': true, 'a2ui-button--primary': true, 'disabled': false })\n * // Returns: 'a2ui-button a2ui-button--primary'\n */\nexport function classMapToString(\n  classMap: Record<string, boolean> | undefined,\n): string {\n  if (!classMap) return \"\";\n  return Object.entries(classMap)\n    .filter(([, enabled]) => enabled)\n    .map(([className]) => className)\n    .join(\" \");\n}\n\n/**\n * Converts an additional styles object (Record<string, string>) to a React style object.\n *\n * @param styles - An object with CSS property names as keys and values as strings\n * @returns A React-compatible style object, or undefined if no styles\n *\n * @example\n * stylesToObject({ 'background-color': 'red', 'font-size': '16px', '--custom-var': 'blue' })\n * // Returns: { backgroundColor: 'red', fontSize: '16px', '--custom-var': 'blue' }\n */\nexport function stylesToObject(\n  styles: Record<string, string> | undefined,\n): React.CSSProperties | undefined {\n  if (!styles || Object.keys(styles).length === 0) return undefined;\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(styles)) {\n    // Preserve CSS custom properties (--var-name) as-is\n    if (key.startsWith(\"--\")) {\n      result[key] = value;\n    } else {\n      // Convert kebab-case to camelCase for React\n      const camelKey = key.replace(/-([a-z])/g, (_, letter) =>\n        letter.toUpperCase(),\n      );\n      result[camelKey] = value;\n    }\n  }\n  return result as React.CSSProperties;\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,iBACd,UACQ;AACR,KAAI,CAAC,SAAU,QAAO;AACtB,QAAO,OAAO,QAAQ,SAAS,CAC5B,QAAQ,GAAG,aAAa,QAAQ,CAChC,KAAK,CAAC,eAAe,UAAU,CAC/B,KAAK,IAAI;;;;;;;;;;;;AAad,SAAgB,eACd,QACiC;AACjC,KAAI,CAAC,UAAU,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG,QAAO;CAExD,MAAM,SAAiC,EAAE;AACzC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAE/C,KAAI,IAAI,WAAW,KAAK,CACtB,QAAO,OAAO;MACT;EAEL,MAAM,WAAW,IAAI,QAAQ,cAAc,GAAG,WAC5C,OAAO,aAAa,CACrB;AACD,SAAO,YAAY;;AAGvB,QAAO"}