@copilotkit/a2ui-renderer 1.55.0-next.8 → 1.55.0

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

@@ -1,39 +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/interactive/Button.tsx
-/**
-* Button component - a clickable element that triggers an action.
-*
-* Contains a child component (usually Text or Icon) and dispatches
-* a user action when clicked.
-*/
-const Button = (0, react.memo)(function Button({ node, surfaceId }) {
-	const { theme, sendAction } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const handleClick = (0, react.useCallback)(() => {
-		if (props.action) sendAction(props.action);
-	}, [props.action, sendAction]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-button",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			className: require_utils.classMapToString(theme.components.Button),
-			style: require_utils.stylesToObject(theme.additionalStyles?.Button),
-			onClick: handleClick,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentNode.default, {
-				node: props.child,
-				surfaceId
-			})
-		})
-	});
-});
-
-//#endregion
-exports.default = Button;
-//# sourceMappingURL=Button.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.cjs","names":["useA2UIComponent","classMapToString","stylesToObject","ComponentNode"],"sources":["../../../../src/react-renderer/components/interactive/Button.tsx"],"sourcesContent":["import { useCallback, 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 * Button component - a clickable element that triggers an action.\n *\n * Contains a child component (usually Text or Icon) and dispatches\n * a user action when clicked.\n */\nexport const Button = memo(function Button({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ButtonNode>) {\n  const { theme, sendAction } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const handleClick = useCallback(() => {\n    if (props.action) {\n      sendAction(props.action);\n    }\n  }, [props.action, sendAction]);\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-button\" style={hostStyle}>\n      <button\n        className={classMapToString(theme.components.Button)}\n        style={stylesToObject(theme.additionalStyles?.Button)}\n        onClick={handleClick}\n      >\n        <ComponentNode node={props.child} surfaceId={surfaceId} />\n      </button>\n    </div>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAa,yBAAc,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,OAAO,eAAeA,0CAAiB,MAAM,UAAU;CAC/D,MAAM,QAAQ,KAAK;CAEnB,MAAM,2CAAgC;AACpC,MAAI,MAAM,OACR,YAAW,MAAM,OAAO;IAEzB,CAAC,MAAM,QAAQ,WAAW,CAAC;AAQ9B,QACE,2CAAC;EAAI,WAAU;EAAc,OAL7B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,2CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,OAAO;GACpD,OAAOC,6BAAe,MAAM,kBAAkB,OAAO;GACrD,SAAS;aAET,2CAACC;IAAc,MAAM,MAAM;IAAkB;KAAa;IACnD;GACL;EAER"}

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

@@ -1,15 +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/Button.d.ts
-/**
- * Button component - a clickable element that triggers an action.
- *
- * Contains a child component (usually Text or Icon) and dispatches
- * a user action when clicked.
- */
-declare const Button: react.NamedExoticComponent<A2UIComponentProps<Types.ButtonNode>>;
-//#endregion
-export { Button };
-//# sourceMappingURL=Button.d.cts.map

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

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

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

@@ -1,15 +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/Button.d.ts
-/**
- * Button component - a clickable element that triggers an action.
- *
- * Contains a child component (usually Text or Icon) and dispatches
- * a user action when clicked.
- */
-declare const Button: react.NamedExoticComponent<A2UIComponentProps<Types.ButtonNode>>;
-//#endregion
-export { Button };
-//# sourceMappingURL=Button.d.mts.map

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

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

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

@@ -1,38 +0,0 @@
-import ComponentNode from "../../core/ComponentNode.mjs";
-import { classMapToString, stylesToObject } from "../../theme/utils.mjs";
-import "../../lib/utils.mjs";
-import { useA2UIComponent } from "../../hooks/useA2UIComponent.mjs";
-import { memo, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/react-renderer/components/interactive/Button.tsx
-/**
-* Button component - a clickable element that triggers an action.
-*
-* Contains a child component (usually Text or Icon) and dispatches
-* a user action when clicked.
-*/
-const Button = memo(function Button({ node, surfaceId }) {
-	const { theme, sendAction } = useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const handleClick = useCallback(() => {
-		if (props.action) sendAction(props.action);
-	}, [props.action, sendAction]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-button",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsx("button", {
-			className: classMapToString(theme.components.Button),
-			style: stylesToObject(theme.additionalStyles?.Button),
-			onClick: handleClick,
-			children: /* @__PURE__ */ jsx(ComponentNode, {
-				node: props.child,
-				surfaceId
-			})
-		})
-	});
-});
-
-//#endregion
-export { Button as default };
-//# sourceMappingURL=Button.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/Button.tsx"],"sourcesContent":["import { useCallback, 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 * Button component - a clickable element that triggers an action.\n *\n * Contains a child component (usually Text or Icon) and dispatches\n * a user action when clicked.\n */\nexport const Button = memo(function Button({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.ButtonNode>) {\n  const { theme, sendAction } = useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n\n  const handleClick = useCallback(() => {\n    if (props.action) {\n      sendAction(props.action);\n    }\n  }, [props.action, sendAction]);\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-button\" style={hostStyle}>\n      <button\n        className={classMapToString(theme.components.Button)}\n        style={stylesToObject(theme.additionalStyles?.Button)}\n        onClick={handleClick}\n      >\n        <ComponentNode node={props.child} surfaceId={surfaceId} />\n      </button>\n    </div>\n  );\n});\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAa,SAAS,KAAK,SAAS,OAAO,EACzC,MACA,aACuC;CACvC,MAAM,EAAE,OAAO,eAAe,iBAAiB,MAAM,UAAU;CAC/D,MAAM,QAAQ,KAAK;CAEnB,MAAM,cAAc,kBAAkB;AACpC,MAAI,MAAM,OACR,YAAW,MAAM,OAAO;IAEzB,CAAC,MAAM,QAAQ,WAAW,CAAC;AAQ9B,QACE,oBAAC;EAAI,WAAU;EAAc,OAL7B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,oBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,OAAO;GACpD,OAAO,eAAe,MAAM,kBAAkB,OAAO;GACrD,SAAS;aAET,oBAAC;IAAc,MAAM,MAAM;IAAkB;KAAa;IACnD;GACL;EAER"}

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

@@ -1,58 +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/CheckBox.tsx
-/**
-* CheckBox component - a boolean toggle with a label.
-*
-* Supports two-way data binding for the checked state.
-*/
-const CheckBox = (0, react.memo)(function CheckBox({ node, surfaceId }) {
-	const { theme, resolveString, resolveBoolean, setValue, getValue } = require_useA2UIComponent.useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const id = (0, react.useId)();
-	const label = resolveString(props.label);
-	const valuePath = props.value?.path;
-	const [checked, setChecked] = (0, react.useState)(resolveBoolean(props.value) ?? false);
-	(0, react.useEffect)(() => {
-		if (valuePath) {
-			const externalValue = getValue(valuePath);
-			if (externalValue !== null && Boolean(externalValue) !== checked) setChecked(Boolean(externalValue));
-		}
-	}, [valuePath, getValue]);
-	(0, react.useEffect)(() => {
-		if (props.value?.literalBoolean !== void 0) setChecked(props.value.literalBoolean);
-	}, [props.value?.literalBoolean]);
-	const handleChange = (0, react.useCallback)((e) => {
-		const newValue = e.target.checked;
-		setChecked(newValue);
-		if (valuePath) setValue(valuePath, newValue);
-	}, [valuePath, setValue]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "a2ui-checkbox",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-			className: require_utils.classMapToString(theme.components.CheckBox.container),
-			style: require_utils.stylesToObject(theme.additionalStyles?.CheckBox),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				type: "checkbox",
-				id,
-				checked,
-				onChange: handleChange,
-				className: require_utils.classMapToString(theme.components.CheckBox.element)
-			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				htmlFor: id,
-				className: require_utils.classMapToString(theme.components.CheckBox.label),
-				children: label
-			})]
-		})
-	});
-});
-
-//#endregion
-exports.default = CheckBox;
-//# sourceMappingURL=CheckBox.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CheckBox.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"sources":["../../../../src/react-renderer/components/interactive/CheckBox.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 * CheckBox component - a boolean toggle with a label.\n *\n * Supports two-way data binding for the checked state.\n */\nexport const CheckBox = memo(function CheckBox({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.CheckboxNode>) {\n  const { theme, resolveString, resolveBoolean, setValue, getValue } =\n    useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n  const id = useId();\n\n  const label = resolveString(props.label);\n  const valuePath = props.value?.path;\n  const initialChecked = resolveBoolean(props.value) ?? false;\n\n  const [checked, setChecked] = useState(initialChecked);\n\n  // Sync with external data model changes (path binding)\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && Boolean(externalValue) !== checked) {\n        setChecked(Boolean(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?.literalBoolean !== undefined) {\n      setChecked(props.value.literalBoolean);\n    }\n  }, [props.value?.literalBoolean]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.checked;\n      setChecked(newValue);\n\n      // Two-way binding: update data model\n      if (valuePath) {\n        setValue(valuePath, newValue);\n      }\n    },\n    [valuePath, setValue],\n  );\n\n  // Structure mirrors Lit's CheckBox component:\n  //   <div class=\"a2ui-checkbox\">  ← :host equivalent\n  //     <section class=\"...\">      ← internal element\n  //       <input>...</input>\n  //       <label>...</label>\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-checkbox\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.CheckBox.container)}\n        style={stylesToObject(theme.additionalStyles?.CheckBox)}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          checked={checked}\n          onChange={handleChange}\n          className={classMapToString(theme.components.CheckBox.element)}\n        />\n        {label && (\n          <label\n            htmlFor={id}\n            className={classMapToString(theme.components.CheckBox.label)}\n          >\n            {label}\n          </label>\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default CheckBox;\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,2BAAgB,SAAS,SAAS,EAC7C,MACA,aACyC;CACzC,MAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,aACtDA,0CAAiB,MAAM,UAAU;CACnC,MAAM,QAAQ,KAAK;CACnB,MAAM,uBAAY;CAElB,MAAM,QAAQ,cAAc,MAAM,MAAM;CACxC,MAAM,YAAY,MAAM,OAAO;CAG/B,MAAM,CAAC,SAAS,kCAFO,eAAe,MAAM,MAAM,IAAI,MAEA;AAGtD,4BAAgB;AACd,MAAI,WAAW;GACb,MAAM,gBAAgB,SAAS,UAAU;AACzC,OAAI,kBAAkB,QAAQ,QAAQ,cAAc,KAAK,QACvD,YAAW,QAAQ,cAAc,CAAC;;IAGrC,CAAC,WAAW,SAAS,CAAC;AAGzB,4BAAgB;AACd,MAAI,MAAM,OAAO,mBAAmB,OAClC,YAAW,MAAM,MAAM,eAAe;IAEvC,CAAC,MAAM,OAAO,eAAe,CAAC;CAEjC,MAAM,uCACH,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAC1B,aAAW,SAAS;AAGpB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;AAgBD,QACE,2CAAC;EAAI,WAAU;EAAgB,OAL/B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,SAAS,UAAU;GAChE,OAAOC,6BAAe,MAAM,kBAAkB,SAAS;cAEvD,2CAAC;IACC,MAAK;IACD;IACK;IACT,UAAU;IACV,WAAWD,+BAAiB,MAAM,WAAW,SAAS,QAAQ;KAC9D,EACD,SACC,2CAAC;IACC,SAAS;IACT,WAAWA,+BAAiB,MAAM,WAAW,SAAS,MAAM;cAE3D;KACK;IAEF;GACN;EAER"}

package/dist/react-renderer/components/interactive/CheckBox.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/CheckBox.d.ts
-/**
- * CheckBox component - a boolean toggle with a label.
- *
- * Supports two-way data binding for the checked state.
- */
-declare const CheckBox: react.NamedExoticComponent<A2UIComponentProps<Types.CheckboxNode>>;
-//#endregion
-export { CheckBox };
-//# sourceMappingURL=CheckBox.d.cts.map

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

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

package/dist/react-renderer/components/interactive/CheckBox.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/CheckBox.d.ts
-/**
- * CheckBox component - a boolean toggle with a label.
- *
- * Supports two-way data binding for the checked state.
- */
-declare const CheckBox: react.NamedExoticComponent<A2UIComponentProps<Types.CheckboxNode>>;
-//#endregion
-export { CheckBox };
-//# sourceMappingURL=CheckBox.d.mts.map

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

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

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

@@ -1,57 +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/CheckBox.tsx
-/**
-* CheckBox component - a boolean toggle with a label.
-*
-* Supports two-way data binding for the checked state.
-*/
-const CheckBox = memo(function CheckBox({ node, surfaceId }) {
-	const { theme, resolveString, resolveBoolean, setValue, getValue } = useA2UIComponent(node, surfaceId);
-	const props = node.properties;
-	const id = useId();
-	const label = resolveString(props.label);
-	const valuePath = props.value?.path;
-	const [checked, setChecked] = useState(resolveBoolean(props.value) ?? false);
-	useEffect(() => {
-		if (valuePath) {
-			const externalValue = getValue(valuePath);
-			if (externalValue !== null && Boolean(externalValue) !== checked) setChecked(Boolean(externalValue));
-		}
-	}, [valuePath, getValue]);
-	useEffect(() => {
-		if (props.value?.literalBoolean !== void 0) setChecked(props.value.literalBoolean);
-	}, [props.value?.literalBoolean]);
-	const handleChange = useCallback((e) => {
-		const newValue = e.target.checked;
-		setChecked(newValue);
-		if (valuePath) setValue(valuePath, newValue);
-	}, [valuePath, setValue]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "a2ui-checkbox",
-		style: node.weight !== void 0 ? { "--weight": node.weight } : {},
-		children: /* @__PURE__ */ jsxs("section", {
-			className: classMapToString(theme.components.CheckBox.container),
-			style: stylesToObject(theme.additionalStyles?.CheckBox),
-			children: [/* @__PURE__ */ jsx("input", {
-				type: "checkbox",
-				id,
-				checked,
-				onChange: handleChange,
-				className: classMapToString(theme.components.CheckBox.element)
-			}), label && /* @__PURE__ */ jsx("label", {
-				htmlFor: id,
-				className: classMapToString(theme.components.CheckBox.label),
-				children: label
-			})]
-		})
-	});
-});
-
-//#endregion
-export { CheckBox as default };
-//# sourceMappingURL=CheckBox.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CheckBox.mjs","names":[],"sources":["../../../../src/react-renderer/components/interactive/CheckBox.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 * CheckBox component - a boolean toggle with a label.\n *\n * Supports two-way data binding for the checked state.\n */\nexport const CheckBox = memo(function CheckBox({\n  node,\n  surfaceId,\n}: A2UIComponentProps<Types.CheckboxNode>) {\n  const { theme, resolveString, resolveBoolean, setValue, getValue } =\n    useA2UIComponent(node, surfaceId);\n  const props = node.properties;\n  const id = useId();\n\n  const label = resolveString(props.label);\n  const valuePath = props.value?.path;\n  const initialChecked = resolveBoolean(props.value) ?? false;\n\n  const [checked, setChecked] = useState(initialChecked);\n\n  // Sync with external data model changes (path binding)\n  useEffect(() => {\n    if (valuePath) {\n      const externalValue = getValue(valuePath);\n      if (externalValue !== null && Boolean(externalValue) !== checked) {\n        setChecked(Boolean(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?.literalBoolean !== undefined) {\n      setChecked(props.value.literalBoolean);\n    }\n  }, [props.value?.literalBoolean]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.checked;\n      setChecked(newValue);\n\n      // Two-way binding: update data model\n      if (valuePath) {\n        setValue(valuePath, newValue);\n      }\n    },\n    [valuePath, setValue],\n  );\n\n  // Structure mirrors Lit's CheckBox component:\n  //   <div class=\"a2ui-checkbox\">  ← :host equivalent\n  //     <section class=\"...\">      ← internal element\n  //       <input>...</input>\n  //       <label>...</label>\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-checkbox\" style={hostStyle}>\n      <section\n        className={classMapToString(theme.components.CheckBox.container)}\n        style={stylesToObject(theme.additionalStyles?.CheckBox)}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          checked={checked}\n          onChange={handleChange}\n          className={classMapToString(theme.components.CheckBox.element)}\n        />\n        {label && (\n          <label\n            htmlFor={id}\n            className={classMapToString(theme.components.CheckBox.label)}\n          >\n            {label}\n          </label>\n        )}\n      </section>\n    </div>\n  );\n});\n\nexport default CheckBox;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,WAAW,KAAK,SAAS,SAAS,EAC7C,MACA,aACyC;CACzC,MAAM,EAAE,OAAO,eAAe,gBAAgB,UAAU,aACtD,iBAAiB,MAAM,UAAU;CACnC,MAAM,QAAQ,KAAK;CACnB,MAAM,KAAK,OAAO;CAElB,MAAM,QAAQ,cAAc,MAAM,MAAM;CACxC,MAAM,YAAY,MAAM,OAAO;CAG/B,MAAM,CAAC,SAAS,cAAc,SAFP,eAAe,MAAM,MAAM,IAAI,MAEA;AAGtD,iBAAgB;AACd,MAAI,WAAW;GACb,MAAM,gBAAgB,SAAS,UAAU;AACzC,OAAI,kBAAkB,QAAQ,QAAQ,cAAc,KAAK,QACvD,YAAW,QAAQ,cAAc,CAAC;;IAGrC,CAAC,WAAW,SAAS,CAAC;AAGzB,iBAAgB;AACd,MAAI,MAAM,OAAO,mBAAmB,OAClC,YAAW,MAAM,MAAM,eAAe;IAEvC,CAAC,MAAM,OAAO,eAAe,CAAC;CAEjC,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,WAAW,EAAE,OAAO;AAC1B,aAAW,SAAS;AAGpB,MAAI,UACF,UAAS,WAAW,SAAS;IAGjC,CAAC,WAAW,SAAS,CACtB;AAgBD,QACE,oBAAC;EAAI,WAAU;EAAgB,OAL/B,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,qBAAC;GACC,WAAW,iBAAiB,MAAM,WAAW,SAAS,UAAU;GAChE,OAAO,eAAe,MAAM,kBAAkB,SAAS;cAEvD,oBAAC;IACC,MAAK;IACD;IACK;IACT,UAAU;IACV,WAAW,iBAAiB,MAAM,WAAW,SAAS,QAAQ;KAC9D,EACD,SACC,oBAAC;IACC,SAAS;IACT,WAAW,iBAAiB,MAAM,WAAW,SAAS,MAAM;cAE3D;KACK;IAEF;GACN;EAER"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"DateTimeInput.cjs","names":["useA2UIComponent","classMapToString","stylesToObject"],"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,gCAAqB,SAAS,cAAc,EACvD,MACA,aAC8C;CAC9C,MAAM,EAAE,OAAO,eAAe,UAAU,aAAaA,0CACnD,MACA,UACD;CACD,MAAM,QAAQ,KAAK;CACnB,MAAM,uBAAY;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,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;CAEzB,MAAM,uCACH,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,2CAAC;EAAI,WAAU;EAAsB,OALrC,KAAK,WAAW,SACX,EAAE,YAAY,KAAK,QAAQ,GAC5B,EAAE;YAIJ,4CAAC;GACC,WAAWC,+BAAiB,MAAM,WAAW,cAAc,UAAU;cAErE,2CAAC;IACC,SAAS;IACT,WAAWA,+BAAiB,MAAM,WAAW,cAAc,MAAM;cAEhE,oBAAoB;KACf,EACR,2CAAC;IACC,MAAM;IACF;IACG;IACP,UAAU;IACV,WAAWA,+BAAiB,MAAM,WAAW,cAAc,QAAQ;IACnE,OAAOC,6BAAe,MAAM,kBAAkB,cAAc;KAC5D;IACM;GACN;EAER"}

package/dist/react-renderer/components/interactive/DateTimeInput.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/DateTimeInput.d.ts
-/**
- * DateTimeInput component - a date and/or time picker.
- *
- * Supports enabling date, time, or both. Uses native HTML5 date/time inputs.
- */
-declare const DateTimeInput: react.NamedExoticComponent<A2UIComponentProps<Types.DateTimeInputNode>>;
-//#endregion
-export { DateTimeInput };
-//# sourceMappingURL=DateTimeInput.d.cts.map

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

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

package/dist/react-renderer/components/interactive/DateTimeInput.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/DateTimeInput.d.ts
-/**
- * DateTimeInput component - a date and/or time picker.
- *
- * Supports enabling date, time, or both. Uses native HTML5 date/time inputs.
- */
-declare const DateTimeInput: react.NamedExoticComponent<A2UIComponentProps<Types.DateTimeInputNode>>;
-//#endregion
-export { DateTimeInput };
-//# sourceMappingURL=DateTimeInput.d.mts.map

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

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

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

@@ -1,64 +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/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

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

@@ -1,54 +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/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

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

@@ -1,15 +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/MultipleChoice.d.ts
-/**
- * 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.
- */
-declare const MultipleChoice: react.NamedExoticComponent<A2UIComponentProps<Types.MultipleChoiceNode>>;
-//#endregion
-export { MultipleChoice };
-//# sourceMappingURL=MultipleChoice.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MultipleChoice.d.cts","names":[],"sources":["../../../../src/react-renderer/components/interactive/MultipleChoice.tsx"],"mappings":";;;;;;;;AAYA;;;cAAa,cAAA,EAAc,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,kBAAA"}

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

@@ -1,15 +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/MultipleChoice.d.ts
-/**
- * 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.
- */
-declare const MultipleChoice: react.NamedExoticComponent<A2UIComponentProps<Types.MultipleChoiceNode>>;
-//#endregion
-export { MultipleChoice };
-//# sourceMappingURL=MultipleChoice.d.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MultipleChoice.d.mts","names":[],"sources":["../../../../src/react-renderer/components/interactive/MultipleChoice.tsx"],"mappings":";;;;;;;;AAYA;;;cAAa,cAAA,EAAc,KAAA,CAAA,oBAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,kBAAA"}