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

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

@@ -0,0 +1,64 @@
+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/DateTimeInput.tsx
+/**
+* DateTimeInput component - a date and/or time picker.
+*
+* Supports enabling date, time, or both. Uses native HTML5 date/time inputs.
+*/
+const DateTimeInput = memo(function DateTimeInput({ node, surfaceId }) {
+	const { theme, resolveString, setValue, getValue } = useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const id = useId();
+	const valuePath = props.value?.path;
+	const initialValue = resolveString(props.value) ?? "";
+	const enableDate = props.enableDate ?? true;
+	const enableTime = props.enableTime ?? false;
+	const [value, setLocalValue] = useState(initialValue);
+	useEffect(() => {
+		if (valuePath) {
+			const externalValue = getValue(valuePath);
+			if (externalValue !== null && String(externalValue) !== value) setLocalValue(String(externalValue));
+		}
+	}, [valuePath, getValue]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		if (valuePath) setValue(valuePath, newValue);
+	}, [valuePath, setValue]);
+	let inputType = "date";
+	if (enableDate && enableTime) inputType = "datetime-local";
+	else if (enableTime && !enableDate) inputType = "time";
+	const getPlaceholderText = () => {
+		if (enableDate && enableTime) return "Date & Time";
+		else if (enableTime) return "Time";
+		return "Date";
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "a2ui-datetime-input",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ jsxs("section", {
+			className: classMapToString(theme.components.DateTimeInput.container),
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: classMapToString(theme.components.DateTimeInput.label),
+				children: getPlaceholderText()
+			}), /* @__PURE__ */ jsx("input", {
+				type: inputType,
+				id,
+				value,
+				onChange: handleChange,
+				className: classMapToString(theme.components.DateTimeInput.element),
+				style: stylesToObject(theme.additionalStyles?.DateTimeInput)
+			})]
+		})
+	});
+});
+
+//#endregion
+export { DateTimeInput as default };
+//# sourceMappingURL=DateTimeInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/DateTimeInput.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 * DateTimeInput component - a date and/or time picker.\n *\n * Supports enabling date, time, or both. Uses native HTML5 date/time inputs.\n */\nexport const DateTimeInput = memo(function DateTimeInput({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.DateTimeInputNode>) {\n  const { theme, resolveString, setValue, getValue } = useA2UIComponent(\n    node,\n    surfaceId,\n  );\n  const props = node.properties;\n  const id = useId();\n\n  const valuePath = props.value?.path;\n  const initialValue = resolveString(props.value) ?? \"\";\n  const enableDate = props.enableDate ?? true;\n  const enableTime = props.enableTime ?? false;\n\n  const [value, setLocalValue] = useState(initialValue);\n\n  // Sync with external data model changes\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && String(externalValue) !== value) {\n        setLocalValue(String(externalValue));\n      }\n    }\n  }, [valuePath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = 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  // Determine input type based on enableDate and enableTime\n  let inputType: \"date\" | \"time\" | \"datetime-local\" = \"date\";\n  if (enableDate && enableTime) {\n    inputType = \"datetime-local\";\n  } else if (enableTime && !enableDate) {\n    inputType = \"time\";\n  }\n\n  // Get placeholder text to match Lit renderer\n  const getPlaceholderText = () => {\n    if (enableDate && enableTime) {\n      return \"Date & Time\";\n    } else if (enableTime) {\n      return \"Time\";\n    }\n    return \"Date\";\n  };\n\n  // Structure mirrors Lit's DateTimeInput component:\n  //   <div class=\"a2ui-datetime-input\">  ← :host equivalent\n  //     <section class=\"...\">            ← container theme classes\n  //       <label>                        ← label\n  //       <input>                        ← input element\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-datetime-input\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.DateTimeInput.container)}\n      >\n        <label\n          htmlFor={id}\n          className={classMapToString(theme.components.DateTimeInput.label)}\n        >\n          {getPlaceholderText()}\n        </label>\n        <input\n          type={inputType}\n          id={id}\n          value={value}\n          onChange={handleChange}\n          className={classMapToString(theme.components.DateTimeInput.element)}\n          style={stylesToObject(theme.additionalStyles?.DateTimeInput)}\n        />\n      </section>\n    </div>\n  );\n});\n\nexport default DateTimeInput;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,gBAAgB,KAAK,SAAS,cAAc,EACvD,MACA,aAC8C;CAC9C,MAAM,EAAE,OAAO,eAAe,UAAU,aAAa,iBACnD,MACA,UACD;CACD,MAAM,QAAQ,KAAK;CACnB,MAAM,KAAK,OAAO;CAElB,MAAM,YAAY,MAAM,OAAO;CAC/B,MAAM,eAAe,cAAc,MAAM,MAAM,IAAI;CACnD,MAAM,aAAa,MAAM,cAAc;CACvC,MAAM,aAAa,MAAM,cAAc;CAEvC,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;CAEzB,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAC1B,gBAAc,SAAS;AAGvB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;CAGD,IAAI,YAAgD;AACpD,KAAI,cAAc,WAChB,aAAY;UACH,cAAc,CAAC,WACxB,aAAY;CAId,MAAM,2BAA2B;AAC/B,MAAI,cAAc,WAChB,QAAO;WACE,WACT,QAAO;AAET,SAAO;;AAiBT,QACE,oBAAC;EAAI,WAAU;EAAsB,OALrC,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,qBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,cAAc,UAAU;cAErE,oBAAC;IACC,SAAS;IACT,WAAW,iBAAiB,MAAM,WAAW,cAAc,MAAM;cAEhE,oBAAoB;KACf,EACR,oBAAC;IACC,MAAM;IACF;IACG;IACP,UAAU;IACV,WAAW,iBAAiB,MAAM,WAAW,cAAc,QAAQ;IACnE,OAAO,eAAe,MAAM,kBAAkB,cAAc;KAC5D;IACM;GACN;EAER"}

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

@@ -0,0 +1,54 @@
+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/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 = (0, react.memo)(function MultipleChoice({ node, surfaceId }) {
+	const { theme, resolveString, setValue } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
+	const props = node.properties;
+	const id = (0, react.useId)();
+	const options = props.options ?? [];
+	const selectionsPath = props.selections?.path;
+	const description = resolveString(props.description) ?? "Select an item";
+	const handleChange = (0, react.useCallback)((e) => {
+		if (selectionsPath) setValue(selectionsPath, [e.target.value]);
+	}, [selectionsPath, setValue]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "a2ui-multiplechoice",
+		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: require_utils.classMapToString(theme.components.MultipleChoice.container),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: id,
+				className: require_utils.classMapToString(theme.components.MultipleChoice.label),
+				children: description
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+				name: "data",
+				id,
+				className: require_utils.classMapToString(theme.components.MultipleChoice.element),
+				style: require_utils.stylesToObject(theme.additionalStyles?.MultipleChoice),
+				onChange: handleChange,
+				children: options.map((option) => {
+					const label = resolveString(option.label);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: option.value,
+						children: label
+					}, option.value);
+				})
+			})]
+		})
+	});
+});
+
+//#endregion
+exports.default = MultipleChoice;
+//# sourceMappingURL=MultipleChoice.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleChoice.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"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,iCAAsB,SAAS,eAAe,EACzD,MACA,aAC+C;CAC/C,MAAM,EAAE,OAAO,eAAe,aAAaA,0CAAiB,MAAM,UAAU;CAC5E,MAAM,QAAQ,KAAK;CACnB,MAAM,uBAAY;CAElB,MAAM,UACH,MAAM,WAGC,EAAE;CACZ,MAAM,iBAAiB,MAAM,YAAY;CAIzC,MAAM,cACJ,cAAe,MAAc,YAAY,IAAI;CAE/C,MAAM,uCACH,MAA4C;AAE3C,MAAI,eACF,UAAS,gBAAgB,CAAC,EAAE,OAAO,MAAM,CAAC;IAG9C,CAAC,gBAAgB,SAAS,CAC3B;AAeD,QACE,2CAAC;EAAI,WAAU;EAAsB,OAZrC,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAWJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,eAAe,UAAU;cAEtE,2CAAC;IACC,SAAS;IACT,WAAWA,+BAAiB,MAAM,WAAW,eAAe,MAAM;cAEjE;KACK,EACR,2CAAC;IACC,MAAK;IACD;IACJ,WAAWA,+BAAiB,MAAM,WAAW,eAAe,QAAQ;IACpE,OAAOC,6BAAe,MAAM,kBAAkB,eAAe;IAC7D,UAAU;cAET,QAAQ,KAAK,WAAW;KACvB,MAAM,QAAQ,cAAc,OAAO,MAAM;AACzC,YACE,2CAAC;MAA0B,OAAO,OAAO;gBACtC;QADU,OAAO,MAEX;MAEX;KACK;IACD;GACN;EAER"}

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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1 @@
+{"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.mjs

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1 @@
+{"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.mjs

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1 @@
+{"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"}