@copilotkit/a2ui-renderer 1.51.4-next.7 → 1.51.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.tsbuildinfo +1 -1
- package/dist/A2UIMessageRenderer.d.ts.map +1 -1
- package/dist/A2UIMessageRenderer.js +6 -5
- package/dist/A2UIMessageRenderer.js.map +1 -1
- package/dist/A2UIViewer.d.ts.map +1 -1
- package/dist/A2UIViewer.js +1 -1
- package/dist/A2UIViewer.js.map +1 -1
- package/dist/__tests__/A2UIMessageRenderer.test.js +43 -12
- package/dist/__tests__/A2UIMessageRenderer.test.js.map +1 -1
- package/dist/__tests__/clsx-shim.d.ts +8 -0
- package/dist/__tests__/clsx-shim.d.ts.map +1 -0
- package/dist/__tests__/clsx-shim.js +24 -0
- package/dist/__tests__/clsx-shim.js.map +1 -0
- package/dist/index.umd.js.map +1 -1
- package/dist/react-renderer/components/content/AudioPlayer.d.ts +2 -2
- package/dist/react-renderer/components/content/AudioPlayer.d.ts.map +1 -1
- package/dist/react-renderer/components/content/AudioPlayer.js +5 -5
- package/dist/react-renderer/components/content/AudioPlayer.js.map +1 -1
- package/dist/react-renderer/components/content/Divider.d.ts +2 -2
- package/dist/react-renderer/components/content/Divider.d.ts.map +1 -1
- package/dist/react-renderer/components/content/Divider.js +5 -5
- package/dist/react-renderer/components/content/Divider.js.map +1 -1
- package/dist/react-renderer/components/content/Icon.d.ts +2 -2
- package/dist/react-renderer/components/content/Icon.d.ts.map +1 -1
- package/dist/react-renderer/components/content/Icon.js +6 -6
- package/dist/react-renderer/components/content/Icon.js.map +1 -1
- package/dist/react-renderer/components/content/Image.d.ts +2 -2
- package/dist/react-renderer/components/content/Image.d.ts.map +1 -1
- package/dist/react-renderer/components/content/Image.js +7 -7
- package/dist/react-renderer/components/content/Image.js.map +1 -1
- package/dist/react-renderer/components/content/Text.d.ts +2 -2
- package/dist/react-renderer/components/content/Text.d.ts.map +1 -1
- package/dist/react-renderer/components/content/Text.js +19 -17
- package/dist/react-renderer/components/content/Text.js.map +1 -1
- package/dist/react-renderer/components/content/Video.d.ts +2 -2
- package/dist/react-renderer/components/content/Video.d.ts.map +1 -1
- package/dist/react-renderer/components/content/Video.js +6 -6
- package/dist/react-renderer/components/content/Video.js.map +1 -1
- package/dist/react-renderer/components/content/index.d.ts +6 -6
- package/dist/react-renderer/components/content/index.js +6 -6
- package/dist/react-renderer/components/interactive/Button.d.ts +2 -2
- package/dist/react-renderer/components/interactive/Button.d.ts.map +1 -1
- package/dist/react-renderer/components/interactive/Button.js +6 -6
- package/dist/react-renderer/components/interactive/Button.js.map +1 -1
- package/dist/react-renderer/components/interactive/CheckBox.d.ts +2 -2
- package/dist/react-renderer/components/interactive/CheckBox.d.ts.map +1 -1
- package/dist/react-renderer/components/interactive/CheckBox.js +5 -5
- package/dist/react-renderer/components/interactive/CheckBox.js.map +1 -1
- package/dist/react-renderer/components/interactive/DateTimeInput.d.ts +2 -2
- package/dist/react-renderer/components/interactive/DateTimeInput.d.ts.map +1 -1
- package/dist/react-renderer/components/interactive/DateTimeInput.js +12 -12
- package/dist/react-renderer/components/interactive/DateTimeInput.js.map +1 -1
- package/dist/react-renderer/components/interactive/MultipleChoice.d.ts +2 -2
- package/dist/react-renderer/components/interactive/MultipleChoice.d.ts.map +1 -1
- package/dist/react-renderer/components/interactive/MultipleChoice.js +5 -5
- package/dist/react-renderer/components/interactive/MultipleChoice.js.map +1 -1
- package/dist/react-renderer/components/interactive/Slider.d.ts +2 -2
- package/dist/react-renderer/components/interactive/Slider.js +6 -6
- package/dist/react-renderer/components/interactive/Slider.js.map +1 -1
- package/dist/react-renderer/components/interactive/TextField.d.ts +2 -2
- package/dist/react-renderer/components/interactive/TextField.d.ts.map +1 -1
- package/dist/react-renderer/components/interactive/TextField.js +8 -12
- package/dist/react-renderer/components/interactive/TextField.js.map +1 -1
- package/dist/react-renderer/components/interactive/index.d.ts +6 -6
- package/dist/react-renderer/components/interactive/index.js +6 -6
- package/dist/react-renderer/components/layout/Card.d.ts +2 -2
- package/dist/react-renderer/components/layout/Card.d.ts.map +1 -1
- package/dist/react-renderer/components/layout/Card.js +9 -9
- package/dist/react-renderer/components/layout/Card.js.map +1 -1
- package/dist/react-renderer/components/layout/Column.d.ts +2 -2
- package/dist/react-renderer/components/layout/Column.d.ts.map +1 -1
- package/dist/react-renderer/components/layout/Column.js +11 -11
- package/dist/react-renderer/components/layout/Column.js.map +1 -1
- package/dist/react-renderer/components/layout/List.d.ts +2 -2
- package/dist/react-renderer/components/layout/List.d.ts.map +1 -1
- package/dist/react-renderer/components/layout/List.js +10 -10
- package/dist/react-renderer/components/layout/List.js.map +1 -1
- package/dist/react-renderer/components/layout/Modal.d.ts +2 -2
- package/dist/react-renderer/components/layout/Modal.d.ts.map +1 -1
- package/dist/react-renderer/components/layout/Modal.js +10 -10
- package/dist/react-renderer/components/layout/Modal.js.map +1 -1
- package/dist/react-renderer/components/layout/Row.d.ts +2 -2
- package/dist/react-renderer/components/layout/Row.d.ts.map +1 -1
- package/dist/react-renderer/components/layout/Row.js +11 -11
- package/dist/react-renderer/components/layout/Row.js.map +1 -1
- package/dist/react-renderer/components/layout/Tabs.d.ts +2 -2
- package/dist/react-renderer/components/layout/Tabs.d.ts.map +1 -1
- package/dist/react-renderer/components/layout/Tabs.js +6 -6
- package/dist/react-renderer/components/layout/Tabs.js.map +1 -1
- package/dist/react-renderer/components/layout/index.d.ts +6 -6
- package/dist/react-renderer/components/layout/index.js +6 -6
- package/dist/react-renderer/core/A2UIProvider.d.ts +4 -4
- package/dist/react-renderer/core/A2UIProvider.d.ts.map +1 -1
- package/dist/react-renderer/core/A2UIProvider.js +5 -5
- package/dist/react-renderer/core/A2UIProvider.js.map +1 -1
- package/dist/react-renderer/core/A2UIRenderer.d.ts +2 -2
- package/dist/react-renderer/core/A2UIRenderer.js +28 -28
- package/dist/react-renderer/core/A2UIViewer.d.ts +1 -1
- package/dist/react-renderer/core/A2UIViewer.js +14 -14
- package/dist/react-renderer/core/ComponentNode.d.ts +2 -2
- package/dist/react-renderer/core/ComponentNode.d.ts.map +1 -1
- package/dist/react-renderer/core/ComponentNode.js +5 -5
- package/dist/react-renderer/core/ComponentNode.js.map +1 -1
- package/dist/react-renderer/core/store.d.ts +2 -2
- package/dist/react-renderer/hooks/useA2UI.d.ts +1 -1
- package/dist/react-renderer/hooks/useA2UI.js +1 -1
- package/dist/react-renderer/hooks/useA2UIComponent.d.ts +1 -1
- package/dist/react-renderer/hooks/useA2UIComponent.d.ts.map +1 -1
- package/dist/react-renderer/hooks/useA2UIComponent.js +16 -7
- package/dist/react-renderer/hooks/useA2UIComponent.js.map +1 -1
- package/dist/react-renderer/index.d.ts +35 -35
- package/dist/react-renderer/index.d.ts.map +1 -1
- package/dist/react-renderer/index.js +29 -29
- package/dist/react-renderer/index.js.map +1 -1
- package/dist/react-renderer/lib/utils.d.ts +2 -2
- package/dist/react-renderer/lib/utils.d.ts.map +1 -1
- package/dist/react-renderer/lib/utils.js +3 -3
- package/dist/react-renderer/lib/utils.js.map +1 -1
- package/dist/react-renderer/registry/ComponentRegistry.d.ts +3 -3
- package/dist/react-renderer/registry/ComponentRegistry.d.ts.map +1 -1
- package/dist/react-renderer/registry/ComponentRegistry.js +2 -2
- package/dist/react-renderer/registry/ComponentRegistry.js.map +1 -1
- package/dist/react-renderer/registry/defaultCatalog.d.ts +1 -1
- package/dist/react-renderer/registry/defaultCatalog.js +37 -37
- package/dist/react-renderer/styles/index.d.ts.map +1 -1
- package/dist/react-renderer/styles/index.js +10 -9
- package/dist/react-renderer/styles/index.js.map +1 -1
- package/dist/react-renderer/theme/ThemeContext.d.ts +2 -2
- package/dist/react-renderer/theme/ThemeContext.d.ts.map +1 -1
- package/dist/react-renderer/theme/ThemeContext.js +3 -3
- package/dist/react-renderer/theme/ThemeContext.js.map +1 -1
- package/dist/react-renderer/theme/litTheme.d.ts +1 -1
- package/dist/react-renderer/theme/litTheme.js +193 -193
- package/dist/react-renderer/theme/utils.d.ts.map +1 -1
- package/dist/react-renderer/theme/utils.js +3 -3
- package/dist/react-renderer/theme/utils.js.map +1 -1
- package/dist/react-renderer/types.d.ts +2 -2
- package/dist/react-renderer/types.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useCallback, useEffect, useId, memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
2
|
+
import { useState, useCallback, useEffect, useId, memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
5
|
/**
|
|
6
6
|
* DateTimeInput component - a date and/or time picker.
|
|
7
7
|
*
|
|
8
8
|
* Supports enabling date, time, or both. Uses native HTML5 date/time inputs.
|
|
9
9
|
*/
|
|
10
|
-
export const DateTimeInput = memo(function DateTimeInput({ node, surfaceId }) {
|
|
10
|
+
export const DateTimeInput = memo(function DateTimeInput({ node, surfaceId, }) {
|
|
11
11
|
const { theme, resolveString, setValue, getValue } = useA2UIComponent(node, surfaceId);
|
|
12
12
|
const props = node.properties;
|
|
13
13
|
const id = useId();
|
|
14
14
|
const valuePath = props.value?.path;
|
|
15
|
-
const initialValue = resolveString(props.value) ??
|
|
15
|
+
const initialValue = resolveString(props.value) ?? "";
|
|
16
16
|
const enableDate = props.enableDate ?? true;
|
|
17
17
|
const enableTime = props.enableTime ?? false;
|
|
18
18
|
const [value, setLocalValue] = useState(initialValue);
|
|
@@ -34,22 +34,22 @@ export const DateTimeInput = memo(function DateTimeInput({ node, surfaceId }) {
|
|
|
34
34
|
}
|
|
35
35
|
}, [valuePath, setValue]);
|
|
36
36
|
// Determine input type based on enableDate and enableTime
|
|
37
|
-
let inputType =
|
|
37
|
+
let inputType = "date";
|
|
38
38
|
if (enableDate && enableTime) {
|
|
39
|
-
inputType =
|
|
39
|
+
inputType = "datetime-local";
|
|
40
40
|
}
|
|
41
41
|
else if (enableTime && !enableDate) {
|
|
42
|
-
inputType =
|
|
42
|
+
inputType = "time";
|
|
43
43
|
}
|
|
44
44
|
// Get placeholder text to match Lit renderer
|
|
45
45
|
const getPlaceholderText = () => {
|
|
46
46
|
if (enableDate && enableTime) {
|
|
47
|
-
return
|
|
47
|
+
return "Date & Time";
|
|
48
48
|
}
|
|
49
49
|
else if (enableTime) {
|
|
50
|
-
return
|
|
50
|
+
return "Time";
|
|
51
51
|
}
|
|
52
|
-
return
|
|
52
|
+
return "Date";
|
|
53
53
|
};
|
|
54
54
|
// Structure mirrors Lit's DateTimeInput component:
|
|
55
55
|
// <div class="a2ui-datetime-input"> ← :host equivalent
|
|
@@ -60,7 +60,7 @@ export const DateTimeInput = memo(function DateTimeInput({ node, surfaceId }) {
|
|
|
60
60
|
// </div>
|
|
61
61
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
62
62
|
const hostStyle = node.weight !== undefined
|
|
63
|
-
? {
|
|
63
|
+
? { "--weight": node.weight }
|
|
64
64
|
: {};
|
|
65
65
|
return (_jsx("div", { className: "a2ui-datetime-input", style: hostStyle, children: _jsxs("section", { className: classMapToString(theme.components.DateTimeInput.container), children: [_jsx("label", { htmlFor: id, className: classMapToString(theme.components.DateTimeInput.label), children: getPlaceholderText() }), _jsx("input", { type: inputType, id: id, value: value, onChange: handleChange, className: classMapToString(theme.components.DateTimeInput.element), style: stylesToObject(theme.additionalStyles?.DateTimeInput) })] }) }));
|
|
66
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/DateTimeInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,aAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"DateTimeInput.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Types } from
|
|
2
|
-
import type { A2UIComponentProps } from
|
|
1
|
+
import type { Types } from "@a2ui/lit/0.8";
|
|
2
|
+
import type { A2UIComponentProps } from "../../types";
|
|
3
3
|
/**
|
|
4
4
|
* MultipleChoice component - a selection component using a dropdown.
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultipleChoice.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/MultipleChoice.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"MultipleChoice.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/MultipleChoice.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,oFAyEzB,CAAC;AAEH,eAAe,cAAc,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useId, memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
2
|
+
import { useCallback, useId, memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
5
|
/**
|
|
6
6
|
* MultipleChoice component - a selection component using a dropdown.
|
|
7
7
|
*
|
|
@@ -16,7 +16,7 @@ export const MultipleChoice = memo(function MultipleChoice({ node, surfaceId, })
|
|
|
16
16
|
const selectionsPath = props.selections?.path;
|
|
17
17
|
// Access description from props (Lit component supports it)
|
|
18
18
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
19
|
-
const description = resolveString(props.description) ??
|
|
19
|
+
const description = resolveString(props.description) ?? "Select an item";
|
|
20
20
|
const handleChange = useCallback((e) => {
|
|
21
21
|
// Two-way binding: update data model with array (matches Lit behavior)
|
|
22
22
|
if (selectionsPath) {
|
|
@@ -25,7 +25,7 @@ export const MultipleChoice = memo(function MultipleChoice({ node, surfaceId, })
|
|
|
25
25
|
}, [selectionsPath, setValue]);
|
|
26
26
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
27
27
|
const hostStyle = node.weight !== undefined
|
|
28
|
-
? {
|
|
28
|
+
? { "--weight": node.weight }
|
|
29
29
|
: {};
|
|
30
30
|
// Structure mirrors Lit's MultipleChoice component:
|
|
31
31
|
// <div class="a2ui-multiplechoice"> ← :host equivalent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultipleChoice.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/MultipleChoice.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,cAAc,CAAC,EACzD,IAAI,EACJ,SAAS,GACoC;IAC7C,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAC9B,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"MultipleChoice.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/MultipleChoice.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,cAAc,CAAC,EACzD,IAAI,EACJ,SAAS,GACoC;IAC7C,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAC9B,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,MAAM,OAAO,GACV,KAAK,CAAC,OAGH,IAAI,EAAE,CAAC;IACb,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC;IAE9C,4DAA4D;IAC5D,8DAA8D;IAC9D,MAAM,WAAW,GACf,aAAa,CAAE,KAAa,CAAC,WAAW,CAAC,IAAI,gBAAgB,CAAC;IAEhE,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAuC,EAAE,EAAE;QAC1C,uEAAuE;QACvE,IAAI,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAC;IAEF,8EAA8E;IAC9E,MAAM,SAAS,GACb,IAAI,CAAC,MAAM,KAAK,SAAS;QACvB,CAAC,CAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAA0B;QACtD,CAAC,CAAC,EAAE,CAAC;IAET,oDAAoD;IACpD,0DAA0D;IAC1D,iEAAiE;IACjE,2DAA2D;IAC3D,0DAA0D;IAC1D,iBAAiB;IACjB,WAAW;IACX,OAAO,CACL,cAAK,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,SAAS,YACnD,mBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,aAEtE,gBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,YAEjE,WAAW,GACN,EACR,iBACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC,EACpE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,cAAc,CAAC,EAC7D,QAAQ,EAAE,YAAY,YAErB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;wBACtB,MAAM,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC1C,OAAO,CACL,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,KAAK,IADK,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC;oBACJ,CAAC,CAAC,GACK,IACD,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Types } from
|
|
2
|
-
import type { A2UIComponentProps } from
|
|
1
|
+
import type { Types } from "@a2ui/lit/0.8";
|
|
2
|
+
import type { A2UIComponentProps } from "../../types";
|
|
3
3
|
/**
|
|
4
4
|
* Slider component - a numeric value selector with a range.
|
|
5
5
|
*
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useCallback, useEffect, useId, memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
2
|
+
import { useState, useCallback, useEffect, useId, memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
5
|
/**
|
|
6
6
|
* Slider component - a numeric value selector with a range.
|
|
7
7
|
*
|
|
8
8
|
* Supports two-way data binding for the value.
|
|
9
9
|
*/
|
|
10
|
-
export const Slider = memo(function Slider({ node, surfaceId }) {
|
|
10
|
+
export const Slider = memo(function Slider({ node, surfaceId, }) {
|
|
11
11
|
const { theme, resolveNumber, resolveString, setValue, getValue } = useA2UIComponent(node, surfaceId);
|
|
12
12
|
const props = node.properties;
|
|
13
13
|
const id = useId();
|
|
@@ -43,7 +43,7 @@ export const Slider = memo(function Slider({ node, surfaceId }) {
|
|
|
43
43
|
// Access label from props if it exists (Lit component supports it but type doesn't define it)
|
|
44
44
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
45
45
|
const labelValue = props.label;
|
|
46
|
-
const label = labelValue ? resolveString(labelValue) :
|
|
46
|
+
const label = labelValue ? resolveString(labelValue) : "";
|
|
47
47
|
// Structure mirrors Lit's Slider component:
|
|
48
48
|
// <div class="a2ui-slider"> ← :host equivalent
|
|
49
49
|
// <section class="..."> ← internal element
|
|
@@ -54,7 +54,7 @@ export const Slider = memo(function Slider({ node, surfaceId }) {
|
|
|
54
54
|
// </div>
|
|
55
55
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
56
56
|
const hostStyle = node.weight !== undefined
|
|
57
|
-
? {
|
|
57
|
+
? { "--weight": node.weight }
|
|
58
58
|
: {};
|
|
59
59
|
return (_jsx("div", { className: "a2ui-slider", style: hostStyle, children: _jsxs("section", { className: classMapToString(theme.components.Slider.container), children: [_jsx("label", { htmlFor: id, className: classMapToString(theme.components.Slider.label), children: label }), _jsx("input", { type: "range", id: id, name: "data", value: value, min: minValue, max: maxValue, onChange: handleChange, className: classMapToString(theme.components.Slider.element), style: stylesToObject(theme.additionalStyles?.Slider) }), _jsx("span", { className: classMapToString(theme.components.Slider.label), children: value })] }) }));
|
|
60
60
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/Slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/Slider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Types } from
|
|
2
|
-
import type { A2UIComponentProps } from
|
|
1
|
+
import type { Types } from "@a2ui/lit/0.8";
|
|
2
|
+
import type { A2UIComponentProps } from "../../types";
|
|
3
3
|
/**
|
|
4
4
|
* TextField component - an input field for text entry.
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMtD;;;;GAIG;AACH,eAAO,MAAM,SAAS,+
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMtD;;;;GAIG;AACH,eAAO,MAAM,SAAS,+EAuGpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useCallback, useEffect, useId, memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
2
|
+
import { useState, useCallback, useEffect, useId, memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
5
|
/**
|
|
6
6
|
* TextField component - an input field for text entry.
|
|
7
7
|
*
|
|
8
8
|
* Supports various input types and two-way data binding.
|
|
9
9
|
*/
|
|
10
|
-
export const TextField = memo(function TextField({ node, surfaceId }) {
|
|
10
|
+
export const TextField = memo(function TextField({ node, surfaceId, }) {
|
|
11
11
|
const { theme, resolveString, setValue, getValue } = useA2UIComponent(node, surfaceId);
|
|
12
12
|
const props = node.properties;
|
|
13
13
|
const id = useId();
|
|
14
14
|
const label = resolveString(props.label);
|
|
15
15
|
const textPath = props.text?.path;
|
|
16
|
-
const initialValue = resolveString(props.text) ??
|
|
16
|
+
const initialValue = resolveString(props.text) ?? "";
|
|
17
17
|
const fieldType = props.type;
|
|
18
18
|
const validationRegexp = props.validationRegexp;
|
|
19
19
|
const [value, setLocalValue] = useState(initialValue);
|
|
@@ -40,12 +40,8 @@ export const TextField = memo(function TextField({ node, surfaceId }) {
|
|
|
40
40
|
setValue(textPath, newValue);
|
|
41
41
|
}
|
|
42
42
|
}, [validationRegexp, textPath, setValue]);
|
|
43
|
-
const inputType = fieldType ===
|
|
44
|
-
|
|
45
|
-
: fieldType === 'date'
|
|
46
|
-
? 'date'
|
|
47
|
-
: 'text';
|
|
48
|
-
const isTextArea = fieldType === 'longText';
|
|
43
|
+
const inputType = fieldType === "number" ? "number" : fieldType === "date" ? "date" : "text";
|
|
44
|
+
const isTextArea = fieldType === "longText";
|
|
49
45
|
// Structure mirrors Lit's TextField component:
|
|
50
46
|
// <div class="a2ui-textfield"> ← :host equivalent
|
|
51
47
|
// <section class="..."> ← container with theme classes
|
|
@@ -55,7 +51,7 @@ export const TextField = memo(function TextField({ node, surfaceId }) {
|
|
|
55
51
|
// </div>
|
|
56
52
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
57
53
|
const hostStyle = node.weight !== undefined
|
|
58
|
-
? {
|
|
54
|
+
? { "--weight": node.weight }
|
|
59
55
|
: {};
|
|
60
56
|
return (_jsx("div", { className: "a2ui-textfield", style: hostStyle, children: _jsxs("section", { className: classMapToString(theme.components.TextField.container), children: [label && (_jsx("label", { htmlFor: id, className: classMapToString(theme.components.TextField.label), children: label })), isTextArea ? (_jsx("textarea", { id: id, value: value, onChange: handleChange, placeholder: "Please enter a value", className: classMapToString(theme.components.TextField.element), style: stylesToObject(theme.additionalStyles?.TextField) })) : (_jsx("input", { type: inputType, id: id, value: value, onChange: handleChange, placeholder: "Please enter a value", className: classMapToString(theme.components.TextField.element), style: stylesToObject(theme.additionalStyles?.TextField) }))] }) }));
|
|
61
57
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAInE;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/TextField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export { Button } from
|
|
2
|
-
export { TextField } from
|
|
3
|
-
export { CheckBox } from
|
|
4
|
-
export { Slider } from
|
|
5
|
-
export { DateTimeInput } from
|
|
6
|
-
export { MultipleChoice } from
|
|
1
|
+
export { Button } from "./Button";
|
|
2
|
+
export { TextField } from "./TextField";
|
|
3
|
+
export { CheckBox } from "./CheckBox";
|
|
4
|
+
export { Slider } from "./Slider";
|
|
5
|
+
export { DateTimeInput } from "./DateTimeInput";
|
|
6
|
+
export { MultipleChoice } from "./MultipleChoice";
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export { Button } from
|
|
2
|
-
export { TextField } from
|
|
3
|
-
export { CheckBox } from
|
|
4
|
-
export { Slider } from
|
|
5
|
-
export { DateTimeInput } from
|
|
6
|
-
export { MultipleChoice } from
|
|
1
|
+
export { Button } from "./Button";
|
|
2
|
+
export { TextField } from "./TextField";
|
|
3
|
+
export { CheckBox } from "./CheckBox";
|
|
4
|
+
export { Slider } from "./Slider";
|
|
5
|
+
export { DateTimeInput } from "./DateTimeInput";
|
|
6
|
+
export { MultipleChoice } from "./MultipleChoice";
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Types } from
|
|
2
|
-
import type { A2UIComponentProps } from
|
|
1
|
+
import type { Types } from "@a2ui/lit/0.8";
|
|
2
|
+
import type { A2UIComponentProps } from "../../types";
|
|
3
3
|
/**
|
|
4
4
|
* Card component - a container that visually groups content.
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,0EA2Cf,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
5
|
-
import { ComponentNode } from
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
|
+
import { ComponentNode } from "../../core/ComponentNode";
|
|
6
6
|
/**
|
|
7
7
|
* Card component - a container that visually groups content.
|
|
8
8
|
*
|
|
@@ -15,7 +15,7 @@ import { ComponentNode } from '../../core/ComponentNode';
|
|
|
15
15
|
*
|
|
16
16
|
* All styles come from componentSpecificStyles CSS, no inline styles needed.
|
|
17
17
|
*/
|
|
18
|
-
export const Card = memo(function Card({ node, surfaceId }) {
|
|
18
|
+
export const Card = memo(function Card({ node, surfaceId, }) {
|
|
19
19
|
const { theme } = useA2UIComponent(node, surfaceId);
|
|
20
20
|
const props = node.properties;
|
|
21
21
|
// Card can have either a single child or multiple children
|
|
@@ -23,16 +23,16 @@ export const Card = memo(function Card({ node, surfaceId }) {
|
|
|
23
23
|
const children = Array.isArray(rawChildren) ? rawChildren : [];
|
|
24
24
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
25
25
|
const hostStyle = node.weight !== undefined
|
|
26
|
-
? {
|
|
26
|
+
? { "--weight": node.weight }
|
|
27
27
|
: {};
|
|
28
28
|
return (_jsx("div", { className: "a2ui-card", style: hostStyle, children: _jsx("section", { className: classMapToString(theme.components.Card), style: stylesToObject(theme.additionalStyles?.Card), children: children.map((child, index) => {
|
|
29
|
-
const childId = typeof child ===
|
|
29
|
+
const childId = typeof child === "object" && child !== null && "id" in child
|
|
30
30
|
? child.id
|
|
31
31
|
: `child-${index}`;
|
|
32
|
-
const childNode = typeof child ===
|
|
32
|
+
const childNode = typeof child === "object" && child !== null && "type" in child
|
|
33
33
|
? child
|
|
34
34
|
: null;
|
|
35
|
-
return _jsx(ComponentNode, { node: childNode, surfaceId: surfaceId }, childId);
|
|
35
|
+
return (_jsx(ComponentNode, { node: childNode, surfaceId: surfaceId }, childId));
|
|
36
36
|
}) }) }));
|
|
37
37
|
});
|
|
38
38
|
export default Card;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,EACrC,IAAI,EACJ,SAAS,GAC0B;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,2DAA2D;IAC3D,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACzE,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/D,8EAA8E;IAC9E,MAAM,SAAS,GACb,IAAI,CAAC,MAAM,KAAK,SAAS;QACvB,CAAC,CAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAA0B;QACtD,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,YACzC,kBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAClD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAElD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,OAAO,GACX,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK;oBAC1D,CAAC,CAAE,KAAgC,CAAC,EAAE;oBACtC,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC;gBACvB,MAAM,SAAS,GACb,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK;oBAC5D,CAAC,CAAE,KAAgC;oBACnC,CAAC,CAAC,IAAI,CAAC;gBACX,OAAO,CACL,KAAC,aAAa,IAEZ,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,SAAS,IAFf,OAAO,CAGZ,CACH,CAAC;YACJ,CAAC,CAAC,GACM,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Types } from
|
|
2
|
-
import type { A2UIComponentProps } from
|
|
1
|
+
import type { Types } from "@a2ui/lit/0.8";
|
|
2
|
+
import type { A2UIComponentProps } from "../../types";
|
|
3
3
|
/**
|
|
4
4
|
* Column component - arranges children vertically using flexbox.
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;GAIG;AACH,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;GAIG;AACH,eAAO,MAAM,MAAM,4EAkDjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
5
|
-
import { ComponentNode } from
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
|
+
import { ComponentNode } from "../../core/ComponentNode";
|
|
6
6
|
/**
|
|
7
7
|
* Column component - arranges children vertically using flexbox.
|
|
8
8
|
*
|
|
9
9
|
* Supports distribution (justify-content) and alignment (align-items) properties.
|
|
10
10
|
*/
|
|
11
|
-
export const Column = memo(function Column({ node, surfaceId }) {
|
|
11
|
+
export const Column = memo(function Column({ node, surfaceId, }) {
|
|
12
12
|
const { theme } = useA2UIComponent(node, surfaceId);
|
|
13
13
|
const props = node.properties;
|
|
14
14
|
// Match Lit's default values
|
|
15
|
-
const alignment = props.alignment ??
|
|
16
|
-
const distribution = props.distribution ??
|
|
15
|
+
const alignment = props.alignment ?? "stretch";
|
|
16
|
+
const distribution = props.distribution ?? "start";
|
|
17
17
|
const children = Array.isArray(props.children) ? props.children : [];
|
|
18
18
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
19
19
|
const hostStyle = node.weight !== undefined
|
|
20
|
-
? {
|
|
20
|
+
? { "--weight": node.weight }
|
|
21
21
|
: {};
|
|
22
22
|
return (_jsx("div", { className: "a2ui-column", "data-alignment": alignment, "data-distribution": distribution, style: hostStyle, children: _jsx("section", { className: classMapToString(theme.components.Column), style: stylesToObject(theme.additionalStyles?.Column), children: children.map((child, index) => {
|
|
23
|
-
const childId = typeof child ===
|
|
23
|
+
const childId = typeof child === "object" && child !== null && "id" in child
|
|
24
24
|
? child.id
|
|
25
25
|
: `child-${index}`;
|
|
26
|
-
const childNode = typeof child ===
|
|
26
|
+
const childNode = typeof child === "object" && child !== null && "type" in child
|
|
27
27
|
? child
|
|
28
28
|
: null;
|
|
29
|
-
return _jsx(ComponentNode, { node: childNode, surfaceId: surfaceId }, childId);
|
|
29
|
+
return (_jsx(ComponentNode, { node: childNode, surfaceId: surfaceId }, childId));
|
|
30
30
|
}) }) }));
|
|
31
31
|
});
|
|
32
32
|
export default Column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Column.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Column.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Column.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Column.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC,EACzC,IAAI,EACJ,SAAS,GAC4B;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,6BAA6B;IAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,SAAS,CAAC;IAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,OAAO,CAAC;IAEnD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAErE,8EAA8E;IAC9E,MAAM,SAAS,GACb,IAAI,CAAC,MAAM,KAAK,SAAS;QACvB,CAAC,CAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAA0B;QACtD,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,cACE,SAAS,EAAC,aAAa,oBACP,SAAS,uBACN,YAAY,EAC/B,KAAK,EAAE,SAAS,YAEhB,kBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,EACpD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,MAAM,CAAC,YAEpD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,OAAO,GACX,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK;oBAC1D,CAAC,CAAE,KAAgC,CAAC,EAAE;oBACtC,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC;gBACvB,MAAM,SAAS,GACb,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK;oBAC5D,CAAC,CAAE,KAAgC;oBACnC,CAAC,CAAC,IAAI,CAAC;gBACX,OAAO,CACL,KAAC,aAAa,IAEZ,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,SAAS,IAFf,OAAO,CAGZ,CACH,CAAC;YACJ,CAAC,CAAC,GACM,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Types } from
|
|
2
|
-
import type { A2UIComponentProps } from
|
|
1
|
+
import type { Types } from "@a2ui/lit/0.8";
|
|
2
|
+
import type { A2UIComponentProps } from "../../types";
|
|
3
3
|
/**
|
|
4
4
|
* List component - renders a scrollable list of items.
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;GAIG;AACH,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;GAIG;AACH,eAAO,MAAM,IAAI,0EA4Cf,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
5
|
-
import { ComponentNode } from
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
|
+
import { ComponentNode } from "../../core/ComponentNode";
|
|
6
6
|
/**
|
|
7
7
|
* List component - renders a scrollable list of items.
|
|
8
8
|
*
|
|
9
9
|
* Supports direction (vertical/horizontal) properties.
|
|
10
10
|
*/
|
|
11
|
-
export const List = memo(function List({ node, surfaceId }) {
|
|
11
|
+
export const List = memo(function List({ node, surfaceId, }) {
|
|
12
12
|
const { theme } = useA2UIComponent(node, surfaceId);
|
|
13
13
|
const props = node.properties;
|
|
14
14
|
// Match Lit's default value
|
|
15
|
-
const direction = props.direction ??
|
|
15
|
+
const direction = props.direction ?? "vertical";
|
|
16
16
|
const children = Array.isArray(props.children) ? props.children : [];
|
|
17
17
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
18
18
|
const hostStyle = node.weight !== undefined
|
|
19
|
-
? {
|
|
19
|
+
? { "--weight": node.weight }
|
|
20
20
|
: {};
|
|
21
21
|
return (_jsx("div", { className: "a2ui-list", "data-direction": direction, style: hostStyle, children: _jsx("section", { className: classMapToString(theme.components.List), style: stylesToObject(theme.additionalStyles?.List), children: children.map((child, index) => {
|
|
22
|
-
const childId = typeof child ===
|
|
22
|
+
const childId = typeof child === "object" && child !== null && "id" in child
|
|
23
23
|
? child.id
|
|
24
24
|
: `child-${index}`;
|
|
25
|
-
const childNode = typeof child ===
|
|
25
|
+
const childNode = typeof child === "object" && child !== null && "type" in child
|
|
26
26
|
? child
|
|
27
27
|
: null;
|
|
28
|
-
return _jsx(ComponentNode, { node: childNode, surfaceId: surfaceId }, childId);
|
|
28
|
+
return (_jsx(ComponentNode, { node: childNode, surfaceId: surfaceId }, childId));
|
|
29
29
|
}) }) }));
|
|
30
30
|
});
|
|
31
31
|
export default List;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/List.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/List.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,EACrC,IAAI,EACJ,SAAS,GAC0B;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,4BAA4B;IAC5B,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,UAAU,CAAC;IAEhD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAErE,8EAA8E;IAC9E,MAAM,SAAS,GACb,IAAI,CAAC,MAAM,KAAK,SAAS;QACvB,CAAC,CAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAA0B;QACtD,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,oBAAiB,SAAS,EAAE,KAAK,EAAE,SAAS,YACpE,kBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAClD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAElD,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,OAAO,GACX,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK;oBAC1D,CAAC,CAAE,KAAgC,CAAC,EAAE;oBACtC,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC;gBACvB,MAAM,SAAS,GACb,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK;oBAC5D,CAAC,CAAE,KAAgC;oBACnC,CAAC,CAAC,IAAI,CAAC;gBACX,OAAO,CACL,KAAC,aAAa,IAEZ,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,SAAS,IAFf,OAAO,CAGZ,CACH,CAAC;YACJ,CAAC,CAAC,GACM,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Types } from
|
|
2
|
-
import type { A2UIComponentProps } from
|
|
1
|
+
import type { Types } from "@a2ui/lit/0.8";
|
|
2
|
+
import type { A2UIComponentProps } from "../../types";
|
|
3
3
|
/**
|
|
4
4
|
* Modal component - displays content in a dialog overlay.
|
|
5
5
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/layout/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,2EA8FhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useCallback, useRef, useEffect, memo } from
|
|
3
|
-
import { useA2UIComponent } from
|
|
4
|
-
import { classMapToString, stylesToObject } from
|
|
5
|
-
import { ComponentNode } from
|
|
2
|
+
import { useState, useCallback, useRef, useEffect, memo } from "react";
|
|
3
|
+
import { useA2UIComponent } from "../../hooks/useA2UIComponent";
|
|
4
|
+
import { classMapToString, stylesToObject } from "../../lib/utils";
|
|
5
|
+
import { ComponentNode } from "../../core/ComponentNode";
|
|
6
6
|
/**
|
|
7
7
|
* Modal component - displays content in a dialog overlay.
|
|
8
8
|
*
|
|
@@ -13,7 +13,7 @@ import { ComponentNode } from '../../core/ComponentNode';
|
|
|
13
13
|
* The dialog is rendered in place (no portal) so it stays inside .a2ui-surface
|
|
14
14
|
* and CSS selectors work correctly. showModal() handles the top-layer overlay.
|
|
15
15
|
*/
|
|
16
|
-
export const Modal = memo(function Modal({ node, surfaceId }) {
|
|
16
|
+
export const Modal = memo(function Modal({ node, surfaceId, }) {
|
|
17
17
|
const { theme } = useA2UIComponent(node, surfaceId);
|
|
18
18
|
const props = node.properties;
|
|
19
19
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -36,8 +36,8 @@ export const Modal = memo(function Modal({ node, surfaceId }) {
|
|
|
36
36
|
const handleClose = () => {
|
|
37
37
|
setIsOpen(false);
|
|
38
38
|
};
|
|
39
|
-
dialog.addEventListener(
|
|
40
|
-
return () => dialog.removeEventListener(
|
|
39
|
+
dialog.addEventListener("close", handleClose);
|
|
40
|
+
return () => dialog.removeEventListener("close", handleClose);
|
|
41
41
|
}, [isOpen]);
|
|
42
42
|
// Handle backdrop clicks (only close if clicking directly on dialog, not its content)
|
|
43
43
|
const handleBackdropClick = useCallback((e) => {
|
|
@@ -47,17 +47,17 @@ export const Modal = memo(function Modal({ node, surfaceId }) {
|
|
|
47
47
|
}, [closeModal]);
|
|
48
48
|
// Handle Escape key (for jsdom test compatibility - real browsers use native dialog behavior)
|
|
49
49
|
const handleKeyDown = useCallback((e) => {
|
|
50
|
-
if (e.key ===
|
|
50
|
+
if (e.key === "Escape") {
|
|
51
51
|
closeModal();
|
|
52
52
|
}
|
|
53
53
|
}, [closeModal]);
|
|
54
54
|
// Apply --weight CSS variable on root div (:host equivalent) for flex layouts
|
|
55
55
|
const hostStyle = node.weight !== undefined
|
|
56
|
-
? {
|
|
56
|
+
? { "--weight": node.weight }
|
|
57
57
|
: {};
|
|
58
58
|
// Match Lit's render approach: closed shows section with entry, open shows dialog
|
|
59
59
|
if (!isOpen) {
|
|
60
|
-
return (_jsx("div", { className: "a2ui-modal", style: hostStyle, children: _jsx("section", { onClick: openModal, style: { cursor:
|
|
60
|
+
return (_jsx("div", { className: "a2ui-modal", style: hostStyle, children: _jsx("section", { onClick: openModal, style: { cursor: "pointer" }, children: _jsx(ComponentNode, { node: props.entryPointChild, surfaceId: surfaceId }) }) }));
|
|
61
61
|
}
|
|
62
62
|
return (_jsx("div", { className: "a2ui-modal", style: hostStyle, children: _jsx("dialog", { ref: dialogRef, className: classMapToString(theme.components.Modal.backdrop), onClick: handleBackdropClick, onKeyDown: handleKeyDown, children: _jsxs("section", { className: classMapToString(theme.components.Modal.element), style: stylesToObject(theme.additionalStyles?.Modal), children: [_jsx("div", { id: "controls", children: _jsx("button", { onClick: closeModal, "aria-label": "Close modal", children: _jsx("span", { className: "g-icon", children: "close" }) }) }), _jsx(ComponentNode, { node: props.contentChild, surfaceId: surfaceId })] }) }) }));
|
|
63
63
|
});
|