@copilotkit/a2ui-renderer 1.55.0-next.9 → 1.55.1-next.0

package/dist/react-renderer/components/interactive/MultipleChoice.mjs

@@ -1,53 +0,0 @@
-import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
-import "../../lib/utils.mjs";
-import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
-import { memo, useCallback, useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/react-renderer/components/interactive/MultipleChoice.tsx
-/**
-* MultipleChoice component - a selection component using a dropdown.
-*
-* Renders a <select> element with options, matching the Lit renderer's behavior.
-* Supports two-way data binding for the selected value.
-*/
-const MultipleChoice = memo(function MultipleChoice({ node, surfaceId }) {
-	const { theme, resolveString, setValue } = useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const id = useId();
-	const options = props.options ?? [];
-	const selectionsPath = props.selections?.path;
-	const description = resolveString(props.description) ?? "Select an item";
-	const handleChange = useCallback((e) => {
-		if (selectionsPath) setValue(selectionsPath, [e.target.value]);
-	}, [selectionsPath, setValue]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-multiplechoice",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsxs("section", {
-			className: classMapToString(theme.components.MultipleChoice.container),
-			children: [/* @__PURE__ */ jsx("label", {
-				htmlFor: id,
-				className: classMapToString(theme.components.MultipleChoice.label),
-				children: description
-			}), /* @__PURE__ */ jsx("select", {
-				name: "data",
-				id,
-				className: classMapToString(theme.components.MultipleChoice.element),
-				style: stylesToObject(theme.additionalStyles?.MultipleChoice),
-				onChange: handleChange,
-				children: options.map((option) => {
-					const label = resolveString(option.label);
-					return /* @__PURE__ */ jsx("option", {
-						value: option.value,
-						children: label
-					}, option.value);
-				})
-			})]
-		})
-	});
-});
-
-//#endregion
-export { MultipleChoice as default };
-//# sourceMappingURL=MultipleChoice.mjs.map

package/dist/react-renderer/components/interactive/MultipleChoice.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultipleChoice.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/MultipleChoice.tsx"],"sourcesContent":["import { useCallback, useId, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * MultipleChoice component - a selection component using a dropdown.\n *\n * Renders a <select> element with options, matching the Lit renderer's behavior.\n * Supports two-way data binding for the selected value.\n */\nexport const MultipleChoice = memo(function MultipleChoice({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.MultipleChoiceNode>) {\n  const { theme, resolveString, setValue } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n  const id = useId();\n\n  const options =\n    (props.options as {\n      label: { literalString?: string; path?: string };\n      value: string;\n    }[]) ?? [];\n  const selectionsPath = props.selections?.path;\n\n  // Access description from props (Lit component supports it)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const description =\n    resolveString((props as any).description) ?? \"Select an item\";\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      // Two-way binding: update data model with array (matches Lit behavior)\n      if (selectionsPath) {\n        setValue(selectionsPath, [e.target.value]);\n      }\n    },\n    [selectionsPath, setValue],\n  );\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  // Structure mirrors Lit's MultipleChoice component:\n  //   <div class=\"a2ui-multiplechoice\">  ← :host equivalent\n  //     <section class=\"...\">            ← container theme classes\n  //       <label>...</label>             ← description label\n  //       <select>...</select>           ← dropdown element\n  //     </section>\n  //   </div>\n  return (\n    <div className=\"a2ui-multiplechoice\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.MultipleChoice.container)}\n      >\n        <label\n          htmlFor={id}\n          className={classMapToString(theme.components.MultipleChoice.label)}\n        >\n          {description}\n        </label>\n        <select\n          name=\"data\"\n          id={id}\n          className={classMapToString(theme.components.MultipleChoice.element)}\n          style={stylesToObject(theme.additionalStyles?.MultipleChoice)}\n          onChange={handleChange}\n        >\n          {options.map((option) => {\n            const label = resolveString(option.label);\n            return (\n              <option key={option.value} value={option.value}>\n                {label}\n              </option>\n            );\n          })}\n        </select>\n      </section>\n    </div>\n  );\n});\n\nexport default MultipleChoice;\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,iBAAiB,KAAK,SAAS,eAAe,EACzD,MACA,aAC+C;CAC/C,MAAM,EAAE,OAAO,eAAe,aAAa,iBAAiB,MAAM,UAAU;CAC5E,MAAM,QAAQ,KAAK;CACnB,MAAM,KAAK,OAAO;CAElB,MAAM,UACH,MAAM,WAGC,EAAE;CACZ,MAAM,iBAAiB,MAAM,YAAY;CAIzC,MAAM,cACJ,cAAe,MAAc,YAAY,IAAI;CAE/C,MAAM,eAAe,aAClB,MAA4C;AAE3C,MAAI,eACF,UAAS,gBAAgB,CAAC,EAAE,OAAO,MAAM,CAAC;IAG9C,CAAC,gBAAgB,SAAS,CAC3B;AAeD,QACE,oBAAC;EAAI,WAAU;EAAsB,OAZrC,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAWJ,qBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,eAAe,UAAU;cAEtE,oBAAC;IACC,SAAS;IACT,WAAW,iBAAiB,MAAM,WAAW,eAAe,MAAM;cAEjE;KACK,EACR,oBAAC;IACC,MAAK;IACD;IACJ,WAAW,iBAAiB,MAAM,WAAW,eAAe,QAAQ;IACpE,OAAO,eAAe,MAAM,kBAAkB,eAAe;IAC7D,UAAU;cAET,QAAQ,KAAK,WAAW;KACvB,MAAM,QAAQ,cAAc,OAAO,MAAM;AACzC,YACE,oBAAC;MAA0B,OAAO,OAAO;gBACtC;QADU,OAAO,MAEX;MAEX;KACK;IACD;GACN;EAER"}

package/dist/react-renderer/components/interactive/Slider.cjs

@@ -1,72 +0,0 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_utils = require('../../theme/utils.cjs');
-require('../../lib/utils.cjs');
-const require_useA2UIComponent = require('../../hooks/useA2UIComponent.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/react-renderer/components/interactive/Slider.tsx
-/**
-* Slider component - a numeric value selector with a range.
-*
-* Supports two-way data binding for the value.
-*/
-const Slider = (0, react.memo)(function Slider({ node, surfaceId }) {
-	const { theme, resolveNumber, resolveString, setValue, getValue } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const id = (0, react.useId)();
-	const valuePath = props.value?.path;
-	const initialValue = resolveNumber(props.value) ?? 0;
-	const minValue = props.minValue ?? 0;
-	const maxValue = props.maxValue ?? 0;
-	const [value, setLocalValue] = (0, react.useState)(initialValue);
-	(0, react.useEffect)(() => {
-		if (valuePath) {
-			const externalValue = getValue(valuePath);
-			if (externalValue !== null && Number(externalValue) !== value) setLocalValue(Number(externalValue));
-		}
-	}, [valuePath, getValue]);
-	(0, react.useEffect)(() => {
-		if (props.value?.literalNumber !== void 0) setLocalValue(props.value.literalNumber);
-	}, [props.value?.literalNumber]);
-	const handleChange = (0, react.useCallback)((e) => {
-		const newValue = Number(e.target.value);
-		setLocalValue(newValue);
-		if (valuePath) setValue(valuePath, newValue);
-	}, [valuePath, setValue]);
-	const labelValue = props.label;
-	const label = labelValue ? resolveString(labelValue) : "";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-slider",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-			className: require_utils.classMapToString(theme.components.Slider.container),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					htmlFor: id,
-					className: require_utils.classMapToString(theme.components.Slider.label),
-					children: label
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "range",
-					id,
-					name: "data",
-					value,
-					min: minValue,
-					max: maxValue,
-					onChange: handleChange,
-					className: require_utils.classMapToString(theme.components.Slider.element),
-					style: require_utils.stylesToObject(theme.additionalStyles?.Slider)
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_utils.classMapToString(theme.components.Slider.label),
-					children: value
-				})
-			]
-		})
-	});
-});
-
-//#endregion
-exports.default = Slider;
-//# sourceMappingURL=Slider.cjs.map

package/dist/react-renderer/components/interactive/Slider.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/interactive/Slider.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * Slider component - a numeric value selector with a range.\n *\n * Supports two-way data binding for the value.\n */\nexport const Slider = memo(function Slider({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.SliderNode>) {\n  const { theme, resolveNumber, resolveString, setValue, getValue } =\n    useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n  const id = useId();\n\n  const valuePath = props.value?.path;\n  const initialValue = resolveNumber(props.value) ?? 0;\n  // Match Lit's default values (minValue=0, maxValue=0)\n  const minValue = props.minValue ?? 0;\n  const maxValue = props.maxValue ?? 0;\n\n  const [value, setLocalValue] = useState(initialValue);\n\n  // Sync with external data model changes (path binding)\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && Number(externalValue) !== value) {\n        setLocalValue(Number(externalValue));\n      }\n    }\n  }, [valuePath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync when literal value changes from props (server-driven updates via surfaceUpdate)\n  useEffect(() => {\n    if (props.value?.literalNumber !== undefined) {\n      setLocalValue(props.value.literalNumber);\n    }\n  }, [props.value?.literalNumber]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = Number(e.target.value);\n      setLocalValue(newValue);\n\n      // Two-way binding: update data model\n      if (valuePath) {\n        setValue(valuePath, newValue);\n      }\n    },\n    [valuePath, setValue],\n  );\n\n  // Access label from props if it exists (Lit component supports it but type doesn't define it)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const labelValue = (props as any).label;\n  const label = labelValue ? resolveString(labelValue) : \"\";\n\n  // Structure mirrors Lit's Slider component:\n  //   <div class=\"a2ui-slider\">    ← :host equivalent\n  //     <section class=\"...\">      ← internal element\n  //       <label>...</label>\n  //       <input>...</input>\n  //       <span>value</span>\n  //     </section>\n  //   </div>\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-slider\" style={hostStyle}>\n      <section className={classMapToString(theme.components.Slider.container)}>\n        <label\n          htmlFor={id}\n          className={classMapToString(theme.components.Slider.label)}\n        >\n          {label}\n        </label>\n        <input\n          type=\"range\"\n          id={id}\n          name=\"data\"\n          value={value}\n          min={minValue}\n          max={maxValue}\n          onChange={handleChange}\n          className={classMapToString(theme.components.Slider.element)}\n          style={stylesToObject(theme.additionalStyles?.Slider)}\n        />\n        <span className={classMapToString(theme.components.Slider.label)}>\n          {value}\n        </span>\n      </section>\n    </div>\n  );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,yBAAc,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,OAAO,eAAe,eAAe,UAAU,aACrDA,0CAAiB,MAAM,UAAU;CACnC,MAAM,QAAQ,KAAK;CACnB,MAAM,uBAAY;CAElB,MAAM,YAAY,MAAM,OAAO;CAC/B,MAAM,eAAe,cAAc,MAAM,MAAM,IAAI;CAEnD,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,CAAC,OAAO,qCAA0B,aAAa;AAGrD,4BAAgB;AACd,MAAI,WAAW;GACb,MAAM,gBAAgB,SAAS,UAAU;AACzC,OAAI,kBAAkB,QAAQ,OAAO,cAAc,KAAK,MACtD,eAAc,OAAO,cAAc,CAAC;;IAGvC,CAAC,WAAW,SAAS,CAAC;AAGzB,4BAAgB;AACd,MAAI,MAAM,OAAO,kBAAkB,OACjC,eAAc,MAAM,MAAM,cAAc;IAEzC,CAAC,MAAM,OAAO,cAAc,CAAC;CAEhC,MAAM,uCACH,MAA2C;EAC1C,MAAM,WAAW,OAAO,EAAE,OAAO,MAAM;AACvC,gBAAc,SAAS;AAGvB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;CAID,MAAM,aAAc,MAAc;CAClC,MAAM,QAAQ,aAAa,cAAc,WAAW,GAAG;AAiBvD,QACE,2CAAC;EAAI,WAAU;EAAc,OAL7B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GAAQ,WAAWC,+BAAiB,MAAM,WAAW,OAAO,UAAU;;IACrE,2CAAC;KACC,SAAS;KACT,WAAWA,+BAAiB,MAAM,WAAW,OAAO,MAAM;eAEzD;MACK;IACR,2CAAC;KACC,MAAK;KACD;KACJ,MAAK;KACE;KACP,KAAK;KACL,KAAK;KACL,UAAU;KACV,WAAWA,+BAAiB,MAAM,WAAW,OAAO,QAAQ;KAC5D,OAAOC,6BAAe,MAAM,kBAAkB,OAAO;MACrD;IACF,2CAAC;KAAK,WAAWD,+BAAiB,MAAM,WAAW,OAAO,MAAM;eAC7D;MACI;;IACC;GACN;EAER"}

package/dist/react-renderer/components/interactive/Slider.d.cts

@@ -1,14 +0,0 @@
-import { A2UIComponentProps } from "../../types.cjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/interactive/Slider.d.ts
-/**
- * Slider component - a numeric value selector with a range.
- *
- * Supports two-way data binding for the value.
- */
-declare const Slider: react.NamedExoticComponent<A2UIComponentProps<Types.SliderNode>>;
-//#endregion
-export { Slider };
-//# sourceMappingURL=Slider.d.cts.map

package/dist/react-renderer/components/interactive/Slider.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.d.cts","names":[],"sources":["../../../../src/react-renderer/components/interactive/Slider.tsx"],"mappings":";;;;;;;;AAWA;;cAAa,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,UAAA"}

package/dist/react-renderer/components/interactive/Slider.d.mts

@@ -1,14 +0,0 @@
-import { A2UIComponentProps } from "../../types.mjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/interactive/Slider.d.ts
-/**
- * Slider component - a numeric value selector with a range.
- *
- * Supports two-way data binding for the value.
- */
-declare const Slider: react.NamedExoticComponent<A2UIComponentProps<Types.SliderNode>>;
-//#endregion
-export { Slider };
-//# sourceMappingURL=Slider.d.mts.map

package/dist/react-renderer/components/interactive/Slider.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.d.mts","names":[],"sources":["../../../../src/react-renderer/components/interactive/Slider.tsx"],"mappings":";;;;;;;;AAWA;;cAAa,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,UAAA"}

package/dist/react-renderer/components/interactive/Slider.mjs

@@ -1,71 +0,0 @@
-import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
-import "../../lib/utils.mjs";
-import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
-import { memo, useCallback, useEffect, useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/react-renderer/components/interactive/Slider.tsx
-/**
-* Slider component - a numeric value selector with a range.
-*
-* Supports two-way data binding for the value.
-*/
-const Slider = memo(function Slider({ node, surfaceId }) {
-	const { theme, resolveNumber, resolveString, setValue, getValue } = useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const id = useId();
-	const valuePath = props.value?.path;
-	const initialValue = resolveNumber(props.value) ?? 0;
-	const minValue = props.minValue ?? 0;
-	const maxValue = props.maxValue ?? 0;
-	const [value, setLocalValue] = useState(initialValue);
-	useEffect(() => {
-		if (valuePath) {
-			const externalValue = getValue(valuePath);
-			if (externalValue !== null && Number(externalValue) !== value) setLocalValue(Number(externalValue));
-		}
-	}, [valuePath, getValue]);
-	useEffect(() => {
-		if (props.value?.literalNumber !== void 0) setLocalValue(props.value.literalNumber);
-	}, [props.value?.literalNumber]);
-	const handleChange = useCallback((e) => {
-		const newValue = Number(e.target.value);
-		setLocalValue(newValue);
-		if (valuePath) setValue(valuePath, newValue);
-	}, [valuePath, setValue]);
-	const labelValue = props.label;
-	const label = labelValue ? resolveString(labelValue) : "";
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-slider",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsxs("section", {
-			className: classMapToString(theme.components.Slider.container),
-			children: [
-				/* @__PURE__ */ jsx("label", {
-					htmlFor: id,
-					className: classMapToString(theme.components.Slider.label),
-					children: label
-				}),
-				/* @__PURE__ */ jsx("input", {
-					type: "range",
-					id,
-					name: "data",
-					value,
-					min: minValue,
-					max: maxValue,
-					onChange: handleChange,
-					className: classMapToString(theme.components.Slider.element),
-					style: stylesToObject(theme.additionalStyles?.Slider)
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: classMapToString(theme.components.Slider.label),
-					children: value
-				})
-			]
-		})
-	});
-});
-
-//#endregion
-export { Slider as default };
-//# sourceMappingURL=Slider.mjs.map

package/dist/react-renderer/components/interactive/Slider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/Slider.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\n/**\n * Slider component - a numeric value selector with a range.\n *\n * Supports two-way data binding for the value.\n */\nexport const Slider = memo(function Slider({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.SliderNode>) {\n  const { theme, resolveNumber, resolveString, setValue, getValue } =\n    useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n  const id = useId();\n\n  const valuePath = props.value?.path;\n  const initialValue = resolveNumber(props.value) ?? 0;\n  // Match Lit's default values (minValue=0, maxValue=0)\n  const minValue = props.minValue ?? 0;\n  const maxValue = props.maxValue ?? 0;\n\n  const [value, setLocalValue] = useState(initialValue);\n\n  // Sync with external data model changes (path binding)\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && Number(externalValue) !== value) {\n        setLocalValue(Number(externalValue));\n      }\n    }\n  }, [valuePath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync when literal value changes from props (server-driven updates via surfaceUpdate)\n  useEffect(() => {\n    if (props.value?.literalNumber !== undefined) {\n      setLocalValue(props.value.literalNumber);\n    }\n  }, [props.value?.literalNumber]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = Number(e.target.value);\n      setLocalValue(newValue);\n\n      // Two-way binding: update data model\n      if (valuePath) {\n        setValue(valuePath, newValue);\n      }\n    },\n    [valuePath, setValue],\n  );\n\n  // Access label from props if it exists (Lit component supports it but type doesn't define it)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const labelValue = (props as any).label;\n  const label = labelValue ? resolveString(labelValue) : \"\";\n\n  // Structure mirrors Lit's Slider component:\n  //   <div class=\"a2ui-slider\">    ← :host equivalent\n  //     <section class=\"...\">      ← internal element\n  //       <label>...</label>\n  //       <input>...</input>\n  //       <span>value</span>\n  //     </section>\n  //   </div>\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-slider\" style={hostStyle}>\n      <section className={classMapToString(theme.components.Slider.container)}>\n        <label\n          htmlFor={id}\n          className={classMapToString(theme.components.Slider.label)}\n        >\n          {label}\n        </label>\n        <input\n          type=\"range\"\n          id={id}\n          name=\"data\"\n          value={value}\n          min={minValue}\n          max={maxValue}\n          onChange={handleChange}\n          className={classMapToString(theme.components.Slider.element)}\n          style={stylesToObject(theme.additionalStyles?.Slider)}\n        />\n        <span className={classMapToString(theme.components.Slider.label)}>\n          {value}\n        </span>\n      </section>\n    </div>\n  );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,SAAS,KAAK,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,OAAO,eAAe,eAAe,UAAU,aACrD,iBAAiB,MAAM,UAAU;CACnC,MAAM,QAAQ,KAAK;CACnB,MAAM,KAAK,OAAO;CAElB,MAAM,YAAY,MAAM,OAAO;CAC/B,MAAM,eAAe,cAAc,MAAM,MAAM,IAAI;CAEnD,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,CAAC,OAAO,iBAAiB,SAAS,aAAa;AAGrD,iBAAgB;AACd,MAAI,WAAW;GACb,MAAM,gBAAgB,SAAS,UAAU;AACzC,OAAI,kBAAkB,QAAQ,OAAO,cAAc,KAAK,MACtD,eAAc,OAAO,cAAc,CAAC;;IAGvC,CAAC,WAAW,SAAS,CAAC;AAGzB,iBAAgB;AACd,MAAI,MAAM,OAAO,kBAAkB,OACjC,eAAc,MAAM,MAAM,cAAc;IAEzC,CAAC,MAAM,OAAO,cAAc,CAAC;CAEhC,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,WAAW,OAAO,EAAE,OAAO,MAAM;AACvC,gBAAc,SAAS;AAGvB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;CAID,MAAM,aAAc,MAAc;CAClC,MAAM,QAAQ,aAAa,cAAc,WAAW,GAAG;AAiBvD,QACE,oBAAC;EAAI,WAAU;EAAc,OAL7B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,qBAAC;GAAQ,WAAW,iBAAiB,MAAM,WAAW,OAAO,UAAU;;IACrE,oBAAC;KACC,SAAS;KACT,WAAW,iBAAiB,MAAM,WAAW,OAAO,MAAM;eAEzD;MACK;IACR,oBAAC;KACC,MAAK;KACD;KACJ,MAAK;KACE;KACP,KAAK;KACL,KAAK;KACL,UAAU;KACV,WAAW,iBAAiB,MAAM,WAAW,OAAO,QAAQ;KAC5D,OAAO,eAAe,MAAM,kBAAkB,OAAO;MACrD;IACF,oBAAC;KAAK,WAAW,iBAAiB,MAAM,WAAW,OAAO,MAAM;eAC7D;MACI;;IACC;GACN;EAER"}

package/dist/react-renderer/components/interactive/TextField.cjs

@@ -1,74 +0,0 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_utils = require('../../theme/utils.cjs');
-require('../../lib/utils.cjs');
-const require_useA2UIComponent = require('../../hooks/useA2UIComponent.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/react-renderer/components/interactive/TextField.tsx
-/**
-* TextField component - an input field for text entry.
-*
-* Supports various input types and two-way data binding.
-*/
-const TextField = (0, react.memo)(function TextField({ node, surfaceId }) {
-	const { theme, resolveString, setValue, getValue } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const id = (0, react.useId)();
-	const label = resolveString(props.label);
-	const textPath = props.text?.path;
-	const initialValue = resolveString(props.text) ?? "";
-	const fieldType = props.type;
-	const validationRegexp = props.validationRegexp;
-	const [value, setLocalValue] = (0, react.useState)(initialValue);
-	const [_isValid, setIsValid] = (0, react.useState)(true);
-	(0, react.useEffect)(() => {
-		if (textPath) {
-			const externalValue = getValue(textPath);
-			if (externalValue !== null && String(externalValue) !== value) setLocalValue(String(externalValue));
-		}
-	}, [textPath, getValue]);
-	const handleChange = (0, react.useCallback)((e) => {
-		const newValue = e.target.value;
-		setLocalValue(newValue);
-		if (validationRegexp) setIsValid(new RegExp(validationRegexp).test(newValue));
-		if (textPath) setValue(textPath, newValue);
-	}, [
-		validationRegexp,
-		textPath,
-		setValue
-	]);
-	const inputType = fieldType === "number" ? "number" : fieldType === "date" ? "date" : "text";
-	const isTextArea = fieldType === "longText";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-textfield",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-			className: require_utils.classMapToString(theme.components.TextField.container),
-			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				htmlFor: id,
-				className: require_utils.classMapToString(theme.components.TextField.label),
-				children: label
-			}), isTextArea ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-				id,
-				value,
-				onChange: handleChange,
-				placeholder: "Please enter a value",
-				className: require_utils.classMapToString(theme.components.TextField.element),
-				style: require_utils.stylesToObject(theme.additionalStyles?.TextField)
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				type: inputType,
-				id,
-				value,
-				onChange: handleChange,
-				placeholder: "Please enter a value",
-				className: require_utils.classMapToString(theme.components.TextField.element),
-				style: require_utils.stylesToObject(theme.additionalStyles?.TextField)
-			})]
-		})
-	});
-});
-
-//#endregion
-exports.default = TextField;
-//# sourceMappingURL=TextField.cjs.map

package/dist/react-renderer/components/interactive/TextField.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\ntype TextFieldType = \"shortText\" | \"longText\" | \"number\" | \"date\";\n\n/**\n * TextField component - an input field for text entry.\n *\n * Supports various input types and two-way data binding.\n */\nexport const TextField = memo(function TextField({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.TextFieldNode>) {\n  const { theme, resolveString, setValue, getValue } = useA2UIComponent(\n    node,\n    surfaceId,\n  );\n  const props = node.properties;\n  const id = useId();\n\n  const label = resolveString(props.label);\n  const textPath = props.text?.path;\n  const initialValue = resolveString(props.text) ?? \"\";\n  const fieldType = props.type as TextFieldType | undefined;\n  const validationRegexp = props.validationRegexp;\n\n  const [value, setLocalValue] = useState(initialValue);\n  // Validation state tracked for potential future use (e.g., error styling)\n  const [_isValid, setIsValid] = useState(true);\n\n  // Sync with external data model changes\n  useEffect(() => {\n    if (textPath) {\n      const externalValue = getValue(textPath);\n      if (externalValue !== null && String(externalValue) !== value) {\n        setLocalValue(String(externalValue));\n      }\n    }\n  }, [textPath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      const newValue = e.target.value;\n      setLocalValue(newValue);\n\n      // Validate if pattern provided\n      if (validationRegexp) {\n        setIsValid(new RegExp(validationRegexp).test(newValue));\n      }\n\n      // Two-way binding: update data model\n      if (textPath) {\n        setValue(textPath, newValue);\n      }\n    },\n    [validationRegexp, textPath, setValue],\n  );\n\n  const inputType =\n    fieldType === \"number\" ? \"number\" : fieldType === \"date\" ? \"date\" : \"text\";\n  const isTextArea = fieldType === \"longText\";\n\n  // Structure mirrors Lit's TextField component:\n  //   <div class=\"a2ui-textfield\">  ← :host equivalent\n  //     <section class=\"...\">       ← container with theme classes\n  //       <label>...</label>\n  //       <input>...</input>\n  //     </section>\n  //   </div>\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-textfield\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.TextField.container)}\n      >\n        {label && (\n          <label\n            htmlFor={id}\n            className={classMapToString(theme.components.TextField.label)}\n          >\n            {label}\n          </label>\n        )}\n        {isTextArea ? (\n          <textarea\n            id={id}\n            value={value}\n            onChange={handleChange}\n            placeholder=\"Please enter a value\"\n            className={classMapToString(theme.components.TextField.element)}\n            style={stylesToObject(theme.additionalStyles?.TextField)}\n          />\n        ) : (\n          <input\n            type={inputType}\n            id={id}\n            value={value}\n            onChange={handleChange}\n            placeholder=\"Please enter a value\"\n            className={classMapToString(theme.components.TextField.element)}\n            style={stylesToObject(theme.additionalStyles?.TextField)}\n          />\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,4BAAiB,SAAS,UAAU,EAC/C,MACA,aAC0C;CAC1C,MAAM,EAAE,OAAO,eAAe,UAAU,aAAaA,0CACnD,MACA,UACD;CACD,MAAM,QAAQ,KAAK;CACnB,MAAM,uBAAY;CAElB,MAAM,QAAQ,cAAc,MAAM,MAAM;CACxC,MAAM,WAAW,MAAM,MAAM;CAC7B,MAAM,eAAe,cAAc,MAAM,KAAK,IAAI;CAClD,MAAM,YAAY,MAAM;CACxB,MAAM,mBAAmB,MAAM;CAE/B,MAAM,CAAC,OAAO,qCAA0B,aAAa;CAErD,MAAM,CAAC,UAAU,kCAAuB,KAAK;AAG7C,4BAAgB;AACd,MAAI,UAAU;GACZ,MAAM,gBAAgB,SAAS,SAAS;AACxC,OAAI,kBAAkB,QAAQ,OAAO,cAAc,KAAK,MACtD,eAAc,OAAO,cAAc,CAAC;;IAGvC,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,uCACH,MAAiE;EAChE,MAAM,WAAW,EAAE,OAAO;AAC1B,gBAAc,SAAS;AAGvB,MAAI,iBACF,YAAW,IAAI,OAAO,iBAAiB,CAAC,KAAK,SAAS,CAAC;AAIzD,MAAI,SACF,UAAS,UAAU,SAAS;IAGhC;EAAC;EAAkB;EAAU;EAAS,CACvC;CAED,MAAM,YACJ,cAAc,WAAW,WAAW,cAAc,SAAS,SAAS;CACtE,MAAM,aAAa,cAAc;AAgBjC,QACE,2CAAC;EAAI,WAAU;EAAiB,OALhC,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,UAAU,UAAU;cAEhE,SACC,2CAAC;IACC,SAAS;IACT,WAAWA,+BAAiB,MAAM,WAAW,UAAU,MAAM;cAE5D;KACK,EAET,aACC,2CAAC;IACK;IACG;IACP,UAAU;IACV,aAAY;IACZ,WAAWA,+BAAiB,MAAM,WAAW,UAAU,QAAQ;IAC/D,OAAOC,6BAAe,MAAM,kBAAkB,UAAU;KACxD,GAEF,2CAAC;IACC,MAAM;IACF;IACG;IACP,UAAU;IACV,aAAY;IACZ,WAAWD,+BAAiB,MAAM,WAAW,UAAU,QAAQ;IAC/D,OAAOC,6BAAe,MAAM,kBAAkB,UAAU;KACxD;IAEI;GACN;EAER"}

package/dist/react-renderer/components/interactive/TextField.d.cts

@@ -1,14 +0,0 @@
-import { A2UIComponentProps } from "../../types.cjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/interactive/TextField.d.ts
-/**
- * TextField component - an input field for text entry.
- *
- * Supports various input types and two-way data binding.
- */
-declare const TextField: react.NamedExoticComponent<A2UIComponentProps<Types.TextFieldNode>>;
-//#endregion
-export { TextField };
-//# sourceMappingURL=TextField.d.cts.map

package/dist/react-renderer/components/interactive/TextField.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.d.cts","names":[],"sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"mappings":";;;;;;;;AAaA;;cAAa,SAAA,EAAS,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,aAAA"}

package/dist/react-renderer/components/interactive/TextField.d.mts

@@ -1,14 +0,0 @@
-import { A2UIComponentProps } from "../../types.mjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/interactive/TextField.d.ts
-/**
- * TextField component - an input field for text entry.
- *
- * Supports various input types and two-way data binding.
- */
-declare const TextField: react.NamedExoticComponent<A2UIComponentProps<Types.TextFieldNode>>;
-//#endregion
-export { TextField };
-//# sourceMappingURL=TextField.d.mts.map

package/dist/react-renderer/components/interactive/TextField.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.d.mts","names":[],"sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"mappings":";;;;;;;;AAaA;;cAAa,SAAA,EAAS,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,aAAA"}

package/dist/react-renderer/components/interactive/TextField.mjs

@@ -1,73 +0,0 @@
-import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
-import "../../lib/utils.mjs";
-import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
-import { memo, useCallback, useEffect, useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/react-renderer/components/interactive/TextField.tsx
-/**
-* TextField component - an input field for text entry.
-*
-* Supports various input types and two-way data binding.
-*/
-const TextField = memo(function TextField({ node, surfaceId }) {
-	const { theme, resolveString, setValue, getValue } = useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const id = useId();
-	const label = resolveString(props.label);
-	const textPath = props.text?.path;
-	const initialValue = resolveString(props.text) ?? "";
-	const fieldType = props.type;
-	const validationRegexp = props.validationRegexp;
-	const [value, setLocalValue] = useState(initialValue);
-	const [_isValid, setIsValid] = useState(true);
-	useEffect(() => {
-		if (textPath) {
-			const externalValue = getValue(textPath);
-			if (externalValue !== null && String(externalValue) !== value) setLocalValue(String(externalValue));
-		}
-	}, [textPath, getValue]);
-	const handleChange = useCallback((e) => {
-		const newValue = e.target.value;
-		setLocalValue(newValue);
-		if (validationRegexp) setIsValid(new RegExp(validationRegexp).test(newValue));
-		if (textPath) setValue(textPath, newValue);
-	}, [
-		validationRegexp,
-		textPath,
-		setValue
-	]);
-	const inputType = fieldType === "number" ? "number" : fieldType === "date" ? "date" : "text";
-	const isTextArea = fieldType === "longText";
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-textfield",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsxs("section", {
-			className: classMapToString(theme.components.TextField.container),
-			children: [label && /* @__PURE__ */ jsx("label", {
-				htmlFor: id,
-				className: classMapToString(theme.components.TextField.label),
-				children: label
-			}), isTextArea ? /* @__PURE__ */ jsx("textarea", {
-				id,
-				value,
-				onChange: handleChange,
-				placeholder: "Please enter a value",
-				className: classMapToString(theme.components.TextField.element),
-				style: stylesToObject(theme.additionalStyles?.TextField)
-			}) : /* @__PURE__ */ jsx("input", {
-				type: inputType,
-				id,
-				value,
-				onChange: handleChange,
-				placeholder: "Please enter a value",
-				className: classMapToString(theme.components.TextField.element),
-				style: stylesToObject(theme.additionalStyles?.TextField)
-			})]
-		})
-	});
-});
-
-//#endregion
-export { TextField as default };
-//# sourceMappingURL=TextField.mjs.map

package/dist/react-renderer/components/interactive/TextField.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\n\ntype TextFieldType = \"shortText\" | \"longText\" | \"number\" | \"date\";\n\n/**\n * TextField component - an input field for text entry.\n *\n * Supports various input types and two-way data binding.\n */\nexport const TextField = memo(function TextField({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.TextFieldNode>) {\n  const { theme, resolveString, setValue, getValue } = useA2UIComponent(\n    node,\n    surfaceId,\n  );\n  const props = node.properties;\n  const id = useId();\n\n  const label = resolveString(props.label);\n  const textPath = props.text?.path;\n  const initialValue = resolveString(props.text) ?? \"\";\n  const fieldType = props.type as TextFieldType | undefined;\n  const validationRegexp = props.validationRegexp;\n\n  const [value, setLocalValue] = useState(initialValue);\n  // Validation state tracked for potential future use (e.g., error styling)\n  const [_isValid, setIsValid] = useState(true);\n\n  // Sync with external data model changes\n  useEffect(() => {\n    if (textPath) {\n      const externalValue = getValue(textPath);\n      if (externalValue !== null && String(externalValue) !== value) {\n        setLocalValue(String(externalValue));\n      }\n    }\n  }, [textPath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      const newValue = e.target.value;\n      setLocalValue(newValue);\n\n      // Validate if pattern provided\n      if (validationRegexp) {\n        setIsValid(new RegExp(validationRegexp).test(newValue));\n      }\n\n      // Two-way binding: update data model\n      if (textPath) {\n        setValue(textPath, newValue);\n      }\n    },\n    [validationRegexp, textPath, setValue],\n  );\n\n  const inputType =\n    fieldType === \"number\" ? \"number\" : fieldType === \"date\" ? \"date\" : \"text\";\n  const isTextArea = fieldType === \"longText\";\n\n  // Structure mirrors Lit's TextField component:\n  //   <div class=\"a2ui-textfield\">  ← :host equivalent\n  //     <section class=\"...\">       ← container with theme classes\n  //       <label>...</label>\n  //       <input>...</input>\n  //     </section>\n  //   </div>\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-textfield\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.TextField.container)}\n      >\n        {label && (\n          <label\n            htmlFor={id}\n            className={classMapToString(theme.components.TextField.label)}\n          >\n            {label}\n          </label>\n        )}\n        {isTextArea ? (\n          <textarea\n            id={id}\n            value={value}\n            onChange={handleChange}\n            placeholder=\"Please enter a value\"\n            className={classMapToString(theme.components.TextField.element)}\n            style={stylesToObject(theme.additionalStyles?.TextField)}\n          />\n        ) : (\n          <input\n            type={inputType}\n            id={id}\n            value={value}\n            onChange={handleChange}\n            placeholder=\"Please enter a value\"\n            className={classMapToString(theme.components.TextField.element)}\n            style={stylesToObject(theme.additionalStyles?.TextField)}\n          />\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,YAAY,KAAK,SAAS,UAAU,EAC/C,MACA,aAC0C;CAC1C,MAAM,EAAE,OAAO,eAAe,UAAU,aAAa,iBACnD,MACA,UACD;CACD,MAAM,QAAQ,KAAK;CACnB,MAAM,KAAK,OAAO;CAElB,MAAM,QAAQ,cAAc,MAAM,MAAM;CACxC,MAAM,WAAW,MAAM,MAAM;CAC7B,MAAM,eAAe,cAAc,MAAM,KAAK,IAAI;CAClD,MAAM,YAAY,MAAM;CACxB,MAAM,mBAAmB,MAAM;CAE/B,MAAM,CAAC,OAAO,iBAAiB,SAAS,aAAa;CAErD,MAAM,CAAC,UAAU,cAAc,SAAS,KAAK;AAG7C,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,gBAAgB,SAAS,SAAS;AACxC,OAAI,kBAAkB,QAAQ,OAAO,cAAc,KAAK,MACtD,eAAc,OAAO,cAAc,CAAC;;IAGvC,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,eAAe,aAClB,MAAiE;EAChE,MAAM,WAAW,EAAE,OAAO;AAC1B,gBAAc,SAAS;AAGvB,MAAI,iBACF,YAAW,IAAI,OAAO,iBAAiB,CAAC,KAAK,SAAS,CAAC;AAIzD,MAAI,SACF,UAAS,UAAU,SAAS;IAGhC;EAAC;EAAkB;EAAU;EAAS,CACvC;CAED,MAAM,YACJ,cAAc,WAAW,WAAW,cAAc,SAAS,SAAS;CACtE,MAAM,aAAa,cAAc;AAgBjC,QACE,oBAAC;EAAI,WAAU;EAAiB,OALhC,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,qBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,UAAU,UAAU;cAEhE,SACC,oBAAC;IACC,SAAS;IACT,WAAW,iBAAiB,MAAM,WAAW,UAAU,MAAM;cAE5D;KACK,EAET,aACC,oBAAC;IACK;IACG;IACP,UAAU;IACV,aAAY;IACZ,WAAW,iBAAiB,MAAM,WAAW,UAAU,QAAQ;IAC/D,OAAO,eAAe,MAAM,kBAAkB,UAAU;KACxD,GAEF,oBAAC;IACC,MAAM;IACF;IACG;IACP,UAAU;IACV,aAAY;IACZ,WAAW,iBAAiB,MAAM,WAAW,UAAU,QAAQ;IAC/D,OAAO,eAAe,MAAM,kBAAkB,UAAU;KACxD;IAEI;GACN;EAER"}

package/dist/react-renderer/components/layout/Card.cjs

@@ -1,46 +0,0 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_ComponentNode = require('../../core/ComponentNode.cjs');
-const require_utils = require('../../theme/utils.cjs');
-require('../../lib/utils.cjs');
-const require_useA2UIComponent = require('../../hooks/useA2UIComponent.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/react-renderer/components/layout/Card.tsx
-/**
-* Card component - a container that visually groups content.
-*
-* Structure mirrors Lit's Card component:
-*   <div class="a2ui-card">      ← :host equivalent
-*     <section class="...">      ← theme classes (border, padding, background)
-*       {children}               ← ::slotted(*) equivalent
-*     </section>
-*   </div>
-*
-* All styles come from componentSpecificStyles CSS, no inline styles needed.
-*/
-const Card = (0, react.memo)(function Card({ node, surfaceId }) {
-	const { theme } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const rawChildren = props.children ?? (props.child ? [props.child] : []);
-	const children = Array.isArray(rawChildren) ? rawChildren : [];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-card",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-			className: require_utils.classMapToString(theme.components.Card),
-			style: require_utils.stylesToObject(theme.additionalStyles?.Card),
-			children: children.map((child, index) => {
-				const childId = typeof child === "object" && child !== null && "id" in child ? child.id : `child-${index}`;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
-					node: typeof child === "object" && child !== null && "type" in child ? child : null,
-					surfaceId
-				}, childId);
-			})
-		})
-	});
-});
-
-//#endregion
-exports.default = Card;
-//# sourceMappingURL=Card.cjs.map

package/dist/react-renderer/components/layout/Card.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.cjs","names":["useA2UIComponent","classMapToString","stylesToObject","ComponentNode"],"sources":["../../../../src/react-renderer/components/layout/Card.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport type { A2UIComponentProps } from \"../../types\";\nimport { useA2UIComponent } from \"../../hooks/useA2UIComponent\";\nimport { classMapToString, stylesToObject } from \"../../lib/utils\";\nimport { ComponentNode } from \"../../core/ComponentNode\";\n\n/**\n * Card component - a container that visually groups content.\n *\n * Structure mirrors Lit's Card component:\n *   <div class=\"a2ui-card\">      ← :host equivalent\n *     <section class=\"...\">      ← theme classes (border, padding, background)\n *       {children}               ← ::slotted(*) equivalent\n *     </section>\n *   </div>\n *\n * All styles come from componentSpecificStyles CSS, no inline styles needed.\n */\nexport const Card = memo(function Card({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.CardNode>) {\n  const { theme } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  // Card can have either a single child or multiple children\n  const rawChildren = props.children ?? (props.child ? [props.child] : []);\n  const children = Array.isArray(rawChildren) ? rawChildren : [];\n\n  // Apply --weight CSS variable on root div (:host equivalent) for flex layouts\n  const hostStyle: React.CSSProperties =\n    node.weight !== undefined\n      ? ({ \"--weight\": node.weight } as React.CSSProperties)\n      : {};\n\n  return (\n    <div className=\"a2ui-card\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.Card)}\n        style={stylesToObject(theme.additionalStyles?.Card)}\n      >\n        {children.map((child, index) => {\n          const childId =\n            typeof child === \"object\" && child !== null && \"id\" in child\n              ? (child as Types.AnyComponentNode).id\n              : `child-${index}`;\n          const childNode =\n            typeof child === \"object\" && child !== null && \"type\" in child\n              ? (child as Types.AnyComponentNode)\n              : null;\n          return (\n            <ComponentNode\n              key={childId}\n              node={childNode}\n              surfaceId={surfaceId}\n            />\n          );\n        })}\n      </section>\n    </div>\n  );\n});\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,uBAAY,SAAS,KAAK,EACrC,MACA,aACqC;CACrC,MAAM,EAAE,UAAUA,0CAAiB,MAAM,UAAU;CACnD,MAAM,QAAQ,KAAK;CAGnB,MAAM,cAAc,MAAM,aAAa,MAAM,QAAQ,CAAC,MAAM,MAAM,GAAG,EAAE;CACvE,MAAM,WAAW,MAAM,QAAQ,YAAY,GAAG,cAAc,EAAE;AAQ9D,QACE,2CAAC;EAAI,WAAU;EAAY,OAL3B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,KAAK;GAClD,OAAOC,6BAAe,MAAM,kBAAkB,KAAK;aAElD,SAAS,KAAK,OAAO,UAAU;IAC9B,MAAM,UACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,QAAQ,QAClD,MAAiC,KAClC,SAAS;AAKf,WACE,2CAACC;KAEC,MANF,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,QACpD,QACD;KAKS;OAFN,QAGL;KAEJ;IACM;GACN;EAER"}

package/dist/react-renderer/components/layout/Card.d.cts

@@ -1,21 +0,0 @@
-import { A2UIComponentProps } from "../../types.cjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/layout/Card.d.ts
-/**
- * Card component - a container that visually groups content.
- *
- * Structure mirrors Lit's Card component:
- *   <div class="a2ui-card">      ← :host equivalent
- *     <section class="...">      ← theme classes (border, padding, background)
- *       {children}               ← ::slotted(*) equivalent
- *     </section>
- *   </div>
- *
- * All styles come from componentSpecificStyles CSS, no inline styles needed.
- */
-declare const Card: react.NamedExoticComponent<A2UIComponentProps<Types.CardNode>>;
-//#endregion
-export { Card };
-//# sourceMappingURL=Card.d.cts.map

package/dist/react-renderer/components/layout/Card.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.d.cts","names":[],"sources":["../../../../src/react-renderer/components/layout/Card.tsx"],"mappings":";;;;;;;;AAmBA;;;;;;;;;cAAa,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,QAAA"}

package/dist/react-renderer/components/layout/Card.d.mts

@@ -1,21 +0,0 @@
-import { A2UIComponentProps } from "../../types.mjs";
-import * as react from "react";
-import { Types } from "@a2ui/lit/0.8";
-
-//#region src/react-renderer/components/layout/Card.d.ts
-/**
- * Card component - a container that visually groups content.
- *
- * Structure mirrors Lit's Card component:
- *   <div class="a2ui-card">      ← :host equivalent
- *     <section class="...">      ← theme classes (border, padding, background)
- *       {children}               ← ::slotted(*) equivalent
- *     </section>
- *   </div>
- *
- * All styles come from componentSpecificStyles CSS, no inline styles needed.
- */
-declare const Card: react.NamedExoticComponent<A2UIComponentProps<Types.CardNode>>;
-//#endregion
-export { Card };
-//# sourceMappingURL=Card.d.mts.map

package/dist/react-renderer/components/layout/Card.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.d.mts","names":[],"sources":["../../../../src/react-renderer/components/layout/Card.tsx"],"mappings":";;;;;;;;AAmBA;;;;;;;;;cAAa,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,QAAA"}