@jalvin/ui 2.0.41 → 2.0.43
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/__tests__/annotated-string.test.d.ts +1 -1
- package/dist/__tests__/annotated-string.test.d.ts.map +1 -1
- package/dist/__tests__/annotated-string.test.js +39 -26
- package/dist/__tests__/annotated-string.test.js.map +1 -1
- package/dist/__tests__/interaction.test.js +35 -52
- package/dist/__tests__/interaction.test.js.map +1 -1
- package/dist/__tests__/text.test.d.ts +1 -1
- package/dist/__tests__/text.test.d.ts.map +1 -1
- package/dist/__tests__/text.test.js +16 -22
- package/dist/__tests__/text.test.js.map +1 -1
- package/dist/__tests__/windowsizeclass.test.js +66 -57
- package/dist/__tests__/windowsizeclass.test.js.map +1 -1
- package/dist/annotated-string.d.ts +4 -2
- package/dist/annotated-string.d.ts.map +1 -1
- package/dist/annotated-string.js +17 -19
- package/dist/annotated-string.js.map +1 -1
- package/dist/button.d.ts +3 -2
- package/dist/button.d.ts.map +1 -1
- package/dist/button.js +12 -8
- package/dist/button.js.map +1 -1
- package/dist/canvas.d.ts +3 -3
- package/dist/canvas.d.ts.map +1 -1
- package/dist/canvas.js +40 -31
- package/dist/canvas.js.map +1 -1
- package/dist/checkbox.d.ts +2 -1
- package/dist/checkbox.d.ts.map +1 -1
- package/dist/checkbox.js +11 -18
- package/dist/checkbox.js.map +1 -1
- package/dist/image.d.ts +6 -4
- package/dist/image.d.ts.map +1 -1
- package/dist/image.js +21 -32
- package/dist/image.js.map +1 -1
- package/dist/index.d.ts +14 -15
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -17
- package/dist/index.js.map +1 -1
- package/dist/input.d.ts +3 -1
- package/dist/input.d.ts.map +1 -1
- package/dist/input.js +13 -20
- package/dist/input.js.map +1 -1
- package/dist/interaction.d.ts.map +1 -1
- package/dist/interaction.js +27 -9
- package/dist/interaction.js.map +1 -1
- package/dist/layout.d.ts +7 -3
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js +10 -10
- package/dist/layout.js.map +1 -1
- package/dist/spacer.d.ts +3 -2
- package/dist/spacer.d.ts.map +1 -1
- package/dist/spacer.js +5 -5
- package/dist/spacer.js.map +1 -1
- package/dist/surface.d.ts +10 -9
- package/dist/surface.d.ts.map +1 -1
- package/dist/surface.js +13 -30
- package/dist/surface.js.map +1 -1
- package/dist/text.d.ts +5 -3
- package/dist/text.d.ts.map +1 -1
- package/dist/text.js +12 -23
- package/dist/text.js.map +1 -1
- package/dist/textarea.d.ts +3 -1
- package/dist/textarea.d.ts.map +1 -1
- package/dist/textarea.js +13 -20
- package/dist/textarea.js.map +1 -1
- package/dist/typography.d.ts +129 -101
- package/dist/typography.d.ts.map +1 -1
- package/dist/typography.js +25 -29
- package/dist/typography.js.map +1 -1
- package/package.json +2 -2
- package/dist/__tests__/children-signature.test.d.ts +0 -2
- package/dist/__tests__/children-signature.test.d.ts.map +0 -1
- package/dist/__tests__/children-signature.test.js +0 -106
- package/dist/__tests__/children-signature.test.js.map +0 -1
package/dist/checkbox.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { Modifier } from "./modifier.js";
|
|
2
3
|
export interface CheckboxProps {
|
|
3
4
|
checked?: boolean;
|
|
@@ -12,5 +13,5 @@ export interface CheckboxProps {
|
|
|
12
13
|
autoFocus?: boolean;
|
|
13
14
|
}
|
|
14
15
|
/** Boolean toggle input. */
|
|
15
|
-
export declare function Checkbox({ checked, onCheckedChange, modifier, enabled, label, supportingText, isError, onFocus, onBlur, autoFocus, }: CheckboxProps):
|
|
16
|
+
export declare function Checkbox({ checked, onCheckedChange, modifier, enabled, label, supportingText, isError, onFocus, onBlur, autoFocus, }: CheckboxProps): React.ReactElement;
|
|
16
17
|
//# sourceMappingURL=checkbox.d.ts.map
|
package/dist/checkbox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/checkbox.
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,4BAA4B;AAC5B,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,eAAe,EACf,QAAQ,EACR,OAAc,EACd,KAAK,EACL,cAAc,EACd,OAAe,EACf,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA6CpC"}
|
package/dist/checkbox.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
/** Boolean toggle input. */
|
|
3
3
|
export function Checkbox({ checked = false, onCheckedChange, modifier, enabled = true, label, supportingText, isError = false, onFocus, onBlur, autoFocus, }) {
|
|
4
4
|
const modProps = modifier?.toProps() ?? {};
|
|
5
|
-
const input =
|
|
5
|
+
const input = React.createElement("input", {
|
|
6
6
|
type: "checkbox",
|
|
7
7
|
checked,
|
|
8
8
|
disabled: !enabled,
|
|
@@ -17,26 +17,19 @@ export function Checkbox({ checked = false, onCheckedChange, modifier, enabled =
|
|
|
17
17
|
accentColor: isError ? "#b00020" : "#2563eb",
|
|
18
18
|
cursor: enabled ? "pointer" : "not-allowed",
|
|
19
19
|
},
|
|
20
|
-
}
|
|
21
|
-
const
|
|
22
|
-
if (label) {
|
|
23
|
-
contentNodes.push(jalvinCreateElement("span", {
|
|
24
|
-
style: { fontSize: "0.95rem", color: isError ? "#b00020" : "#1c1c1c" },
|
|
25
|
-
}, [document.createTextNode(label)]));
|
|
26
|
-
}
|
|
27
|
-
if (supportingText) {
|
|
28
|
-
contentNodes.push(jalvinCreateElement("span", {
|
|
29
|
-
style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
|
|
30
|
-
}, [document.createTextNode(supportingText)]));
|
|
31
|
-
}
|
|
32
|
-
const content = jalvinCreateElement("div", {
|
|
20
|
+
});
|
|
21
|
+
const content = React.createElement("div", {
|
|
33
22
|
style: {
|
|
34
23
|
display: "flex",
|
|
35
24
|
flexDirection: "column",
|
|
36
25
|
gap: supportingText ? "2px" : "0",
|
|
37
26
|
},
|
|
38
|
-
},
|
|
39
|
-
|
|
27
|
+
}, label && React.createElement("span", {
|
|
28
|
+
style: { fontSize: "0.95rem", color: isError ? "#b00020" : "#1c1c1c" },
|
|
29
|
+
}, label), supportingText && React.createElement("span", {
|
|
30
|
+
style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
|
|
31
|
+
}, supportingText));
|
|
32
|
+
return React.createElement("label", {
|
|
40
33
|
...modProps,
|
|
41
34
|
style: {
|
|
42
35
|
display: "inline-flex",
|
|
@@ -45,6 +38,6 @@ export function Checkbox({ checked = false, onCheckedChange, modifier, enabled =
|
|
|
45
38
|
cursor: enabled ? "pointer" : "not-allowed",
|
|
46
39
|
...modProps.style,
|
|
47
40
|
},
|
|
48
|
-
},
|
|
41
|
+
}, input, content);
|
|
49
42
|
}
|
|
50
43
|
//# sourceMappingURL=checkbox.js.map
|
package/dist/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../src/checkbox.
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../src/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,4BAA4B;AAC5B,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,KAAK,EACf,eAAe,EACf,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,KAAK,EACL,cAAc,EACd,OAAO,GAAG,KAAK,EACf,OAAO,EACP,MAAM,EACN,SAAS,GACK;IACd,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAE3C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,UAAU;QAChB,OAAO;QACP,QAAQ,EAAE,CAAC,OAAO;QAClB,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QACzF,OAAO;QACP,MAAM;QACN,SAAS;QACT,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC5C,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa;SAC5C;KACF,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;QACzC,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;SAClC;KACF,EACC,KAAK,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;QACnC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;KACvE,EAAE,KAAK,CAAC,EACT,cAAc,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;QAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;KACvE,EAAE,cAAc,CAAC,CACnB,CAAC;IAEF,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;QAClC,GAAG,QAAQ;QACX,KAAK,EAAE;YACL,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;YACpD,GAAG,EAAE,KAAK;YACV,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa;YAC3C,GAAG,QAAQ,CAAC,KAAK;SAClB;KACF,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;AACrB,CAAC"}
|
package/dist/image.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { Modifier } from "./modifier.js";
|
|
2
3
|
export interface ImageProps {
|
|
3
4
|
src: string;
|
|
@@ -7,13 +8,14 @@ export interface ImageProps {
|
|
|
7
8
|
onClick?: () => void;
|
|
8
9
|
}
|
|
9
10
|
/** Image element. */
|
|
10
|
-
export declare function Image({ src, alt, modifier, contentScale, onClick, }: ImageProps):
|
|
11
|
+
export declare function Image({ src, alt, modifier, contentScale, onClick, }: ImageProps): React.ReactElement;
|
|
11
12
|
export interface AsyncImageProps extends ImageProps {
|
|
12
|
-
loadingPlaceholder?:
|
|
13
|
-
errorPlaceholder?:
|
|
13
|
+
loadingPlaceholder?: React.ReactNode;
|
|
14
|
+
errorPlaceholder?: React.ReactNode;
|
|
14
15
|
}
|
|
15
16
|
/**
|
|
16
17
|
* Image that handles loading/error states.
|
|
18
|
+
* Falls back to placeholder content on error.
|
|
17
19
|
*/
|
|
18
|
-
export declare function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }: AsyncImageProps):
|
|
20
|
+
export declare function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }: AsyncImageProps): React.ReactElement;
|
|
19
21
|
//# sourceMappingURL=image.d.ts.map
|
package/dist/image.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../src/image.
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AASD,qBAAqB;AACrB,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,GAAQ,EACR,QAAQ,EACR,YAAoB,EACpB,OAAO,GACR,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAmBjC;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,gBAAgB,GACjB,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAmBtC"}
|
package/dist/image.js
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
const CONTENT_SCALE = {
|
|
3
|
+
fill: "100% 100%",
|
|
4
|
+
fit: "contain",
|
|
5
|
+
crop: "cover",
|
|
6
|
+
none: "none",
|
|
7
|
+
};
|
|
3
8
|
/** Image element. */
|
|
4
9
|
export function Image({ src, alt = "", modifier, contentScale = "fit", onClick, }) {
|
|
5
10
|
const modProps = modifier?.toProps() ?? {};
|
|
6
|
-
return
|
|
11
|
+
return React.createElement("img", {
|
|
7
12
|
src,
|
|
8
13
|
alt,
|
|
9
14
|
onClick,
|
|
@@ -19,39 +24,23 @@ export function Image({ src, alt = "", modifier, contentScale = "fit", onClick,
|
|
|
19
24
|
cursor: onClick ? "pointer" : undefined,
|
|
20
25
|
...modProps.style,
|
|
21
26
|
},
|
|
22
|
-
}
|
|
27
|
+
});
|
|
23
28
|
}
|
|
24
29
|
/**
|
|
25
30
|
* Image that handles loading/error states.
|
|
31
|
+
* Falls back to placeholder content on error.
|
|
26
32
|
*/
|
|
27
33
|
export function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }) {
|
|
28
|
-
const status =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// For AsyncImage, we'll manually manage the internal switch.
|
|
40
|
-
const update = () => {
|
|
41
|
-
container.innerHTML = "";
|
|
42
|
-
if (status.value === "error" && errorPlaceholder) {
|
|
43
|
-
container.appendChild(errorPlaceholder);
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
if (status.value === "loading" && loadingPlaceholder) {
|
|
47
|
-
container.appendChild(loadingPlaceholder);
|
|
48
|
-
}
|
|
49
|
-
container.appendChild(Image({ src, alt, modifier, contentScale, onClick }));
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
// Subscribe to status changes manually for this internal reactivity
|
|
53
|
-
status.subscribers?.add(update);
|
|
54
|
-
update();
|
|
55
|
-
return container;
|
|
34
|
+
const [status, setStatus] = React.useState("loading");
|
|
35
|
+
if (status === "error" && errorPlaceholder) {
|
|
36
|
+
return React.createElement(React.Fragment, null, errorPlaceholder);
|
|
37
|
+
}
|
|
38
|
+
return React.createElement("span", { style: { position: "relative", display: "inline-block" } }, status === "loading" && loadingPlaceholder, React.createElement(Image, {
|
|
39
|
+
src,
|
|
40
|
+
alt: alt ?? "",
|
|
41
|
+
modifier,
|
|
42
|
+
contentScale,
|
|
43
|
+
onClick,
|
|
44
|
+
}));
|
|
56
45
|
}
|
|
57
46
|
//# sourceMappingURL=image.js.map
|
package/dist/image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.js","sourceRoot":"","sources":["../src/image.
|
|
1
|
+
{"version":3,"file":"image.js","sourceRoot":"","sources":["../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,aAAa,GAA4D;IAC7E,IAAI,EAAE,WAAW;IACjB,GAAG,EAAG,SAAS;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,qBAAqB;AACrB,MAAM,UAAU,KAAK,CAAC,EACpB,GAAG,EACH,GAAG,GAAG,EAAE,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,OAAO,GACI;IACX,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;QAChC,GAAG;QACH,GAAG;QACH,OAAO;QACP,GAAG,QAAQ;QACX,KAAK,EAAE;YACL,SAAS,EAAE,CAAC,YAAY,KAAK,MAAM;gBACjC,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,YAAY,KAAK,KAAK;oBACtB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,YAAY,KAAK,MAAM;wBACvB,CAAC,CAAC,OAAO;wBACT,CAAC,CAAC,MAAM,CAA+C;YAC7D,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACvC,GAAG,QAAQ,CAAC,KAAK;SAClB;KACF,CAAC,CAAC;AACL,CAAC;AAOD;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,gBAAgB,GACA;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA6B,SAAS,CAAC,CAAC;IAElF,IAAI,MAAM,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAAC;QAC3C,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;IACrE,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAC7F,MAAM,KAAK,SAAS,IAAI,kBAAkB,EAC1C,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;QACzB,GAAG;QACH,GAAG,EAAE,GAAG,IAAI,EAAE;QACd,QAAQ;QACR,YAAY;QACZ,OAAO;KACR,CAAC,CAGH,CAAC;AACJ,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,32 +1,31 @@
|
|
|
1
1
|
export { Modifier, applyModifier } from "./modifier.js";
|
|
2
2
|
export type { CSSProperties } from "./modifier.js";
|
|
3
|
+
export { MutableInteractionSource, useMutableInteractionSource, useIsHovered, useIsPressed, useIsFocused } from "./interaction.js";
|
|
4
|
+
export type { InteractionSource, Interaction, HoverInteraction, PressInteraction, FocusInteraction } from "./interaction.js";
|
|
5
|
+
export { Color } from "./colors.js";
|
|
6
|
+
export type { ColorValue } from "./colors.js";
|
|
3
7
|
export { Column, Row, Box } from "./layout.js";
|
|
4
8
|
export type { ColumnProps, RowProps, BoxProps, Alignment, Arrangement } from "./layout.js";
|
|
9
|
+
export { Button, IconButton } from "./button.js";
|
|
10
|
+
export type { ButtonProps, ButtonVariant, IconButtonProps } from "./button.js";
|
|
5
11
|
export { Text } from "./text.js";
|
|
6
12
|
export type { TextProps } from "./text.js";
|
|
7
|
-
export {
|
|
8
|
-
export type {
|
|
9
|
-
export {
|
|
10
|
-
export type {
|
|
11
|
-
export { Canvas } from "./canvas.js";
|
|
12
|
-
export type { CanvasProps } from "./canvas.js";
|
|
13
|
+
export { TextStyle } from "./typography.js";
|
|
14
|
+
export type { TextStyleDef, TextStyleKey } from "./typography.js";
|
|
15
|
+
export { TextDecoration, buildAnnotatedString, LinkAnnotation, renderAnnotatedString, } from "./annotated-string.js";
|
|
16
|
+
export type { SpanStyle, TextLinkStyles, AnnotatedString, StringRange, } from "./annotated-string.js";
|
|
13
17
|
export { Input } from "./input.js";
|
|
14
18
|
export type { InputProps } from "./input.js";
|
|
15
19
|
export { TextArea } from "./textarea.js";
|
|
16
20
|
export type { TextAreaProps } from "./textarea.js";
|
|
17
21
|
export { Checkbox } from "./checkbox.js";
|
|
18
22
|
export type { CheckboxProps } from "./checkbox.js";
|
|
23
|
+
export { Image, AsyncImage } from "./image.js";
|
|
24
|
+
export type { ImageProps, AsyncImageProps } from "./image.js";
|
|
25
|
+
export { Canvas } from "./canvas.js";
|
|
26
|
+
export type { CanvasProps } from "./canvas.js";
|
|
19
27
|
export { Spacer, Divider } from "./spacer.js";
|
|
20
28
|
export type { SpacerProps, DividerProps } from "./spacer.js";
|
|
21
29
|
export { Card, Scaffold, TopBar } from "./surface.js";
|
|
22
30
|
export type { CardProps, ScaffoldProps, TopBarProps } from "./surface.js";
|
|
23
|
-
export { jalvinCreateElement } from "@jalvin/runtime";
|
|
24
|
-
export { buildAnnotatedString, renderAnnotatedString, TextDecoration } from "./annotated-string.js";
|
|
25
|
-
export type { AnnotatedString, SpanStyle, LinkAnnotation } from "./annotated-string.js";
|
|
26
|
-
export { MutableInteractionSource, useMutableInteractionSource, useIsHovered, useIsFocused, useIsPressed } from "./interaction.js";
|
|
27
|
-
export type { InteractionSource, Interaction, HoverInteraction, PressInteraction, FocusInteraction } from "./interaction.js";
|
|
28
|
-
export { TextStyle, textStyleToCSS } from "./typography.js";
|
|
29
|
-
export type { TextStyleDef } from "./typography.js";
|
|
30
|
-
export { Color } from "./colors.js";
|
|
31
|
-
export type { ColorValue } from "./colors.js";
|
|
32
31
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnI,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE7H,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG/E,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,28 +1,30 @@
|
|
|
1
|
+
// @jalvin/ui — Jalvin UI component library
|
|
2
|
+
//
|
|
3
|
+
// Usage example (in a .jalvin file):
|
|
4
|
+
// import @jalvin/ui.Column
|
|
5
|
+
// import @jalvin/ui.Row
|
|
6
|
+
// import @jalvin/ui.Button
|
|
7
|
+
// import @jalvin/ui.Modifier
|
|
1
8
|
export { Modifier, applyModifier } from "./modifier.js";
|
|
9
|
+
export { MutableInteractionSource, useMutableInteractionSource, useIsHovered, useIsPressed, useIsFocused } from "./interaction.js";
|
|
10
|
+
export { Color } from "./colors.js";
|
|
2
11
|
// Layout
|
|
3
12
|
export { Column, Row, Box } from "./layout.js";
|
|
4
|
-
//
|
|
5
|
-
export { Text } from "./text.js";
|
|
13
|
+
// Buttons
|
|
6
14
|
export { Button, IconButton } from "./button.js";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export {
|
|
10
|
-
|
|
15
|
+
// Text
|
|
16
|
+
export { Text } from "./text.js";
|
|
17
|
+
export { TextStyle } from "./typography.js";
|
|
18
|
+
export { TextDecoration, buildAnnotatedString, LinkAnnotation, renderAnnotatedString, } from "./annotated-string.js";
|
|
19
|
+
// Input
|
|
11
20
|
export { Input } from "./input.js";
|
|
12
21
|
export { TextArea } from "./textarea.js";
|
|
13
22
|
export { Checkbox } from "./checkbox.js";
|
|
14
|
-
//
|
|
23
|
+
// Image
|
|
24
|
+
export { Image, AsyncImage } from "./image.js";
|
|
25
|
+
export { Canvas } from "./canvas.js";
|
|
26
|
+
// Spacer / Divider
|
|
15
27
|
export { Spacer, Divider } from "./spacer.js";
|
|
16
28
|
// Surface / Scaffold
|
|
17
29
|
export { Card, Scaffold, TopBar } from "./surface.js";
|
|
18
|
-
// DOM - re-exported from runtime via compiler usually, but library users might want it
|
|
19
|
-
export { jalvinCreateElement } from "@jalvin/runtime";
|
|
20
|
-
// Annotated String
|
|
21
|
-
export { buildAnnotatedString, renderAnnotatedString, TextDecoration } from "./annotated-string.js";
|
|
22
|
-
// Interactions
|
|
23
|
-
export { MutableInteractionSource, useMutableInteractionSource, useIsHovered, useIsFocused, useIsPressed } from "./interaction.js";
|
|
24
|
-
// Typography
|
|
25
|
-
export { TextStyle, textStyleToCSS } from "./typography.js";
|
|
26
|
-
// Colors
|
|
27
|
-
export { Color } from "./colors.js";
|
|
28
30
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGxD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,EAAE;AACF,qCAAqC;AACrC,6BAA6B;AAC7B,0BAA0B;AAC1B,6BAA6B;AAC7B,+BAA+B;AAE/B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGxD,OAAO,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG/C,UAAU;AACV,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAQ/B,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,mBAAmB;AACnB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG9C,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}
|
package/dist/input.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { Modifier } from "./modifier.js";
|
|
2
3
|
export interface InputProps {
|
|
3
4
|
value?: string;
|
|
@@ -13,8 +14,9 @@ export interface InputProps {
|
|
|
13
14
|
maxLength?: number;
|
|
14
15
|
onFocus?: () => void;
|
|
15
16
|
onBlur?: () => void;
|
|
17
|
+
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
16
18
|
autoFocus?: boolean;
|
|
17
19
|
}
|
|
18
20
|
/** Text input. */
|
|
19
|
-
export declare function Input({ value, onValueChange, placeholder, modifier, enabled, readOnly, type, label, supportingText, isError, maxLength, onFocus, onBlur, autoFocus, }: InputProps):
|
|
21
|
+
export declare function Input({ value, onValueChange, placeholder, modifier, enabled, readOnly, type, label, supportingText, isError, maxLength, onFocus, onBlur, onKeyDown, autoFocus, }: InputProps): React.ReactElement;
|
|
20
22
|
//# sourceMappingURL=input.d.ts.map
|
package/dist/input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,kBAAkB;AAClB,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAc,EACd,QAAgB,EAChB,IAAa,EACb,KAAK,EACL,cAAc,EACd,OAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CA6CjC"}
|
package/dist/input.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
/** Text input. */
|
|
3
|
-
export function Input({ value, onValueChange, placeholder, modifier, enabled = true, readOnly = false, type = "text", label, supportingText, isError = false, maxLength, onFocus, onBlur, autoFocus, }) {
|
|
3
|
+
export function Input({ value, onValueChange, placeholder, modifier, enabled = true, readOnly = false, type = "text", label, supportingText, isError = false, maxLength, onFocus, onBlur, onKeyDown, autoFocus, }) {
|
|
4
4
|
const modProps = modifier?.toProps() ?? {};
|
|
5
5
|
const borderColor = isError ? "#b00020" : "#c4c4c4";
|
|
6
|
-
const input =
|
|
6
|
+
const input = React.createElement("input", {
|
|
7
7
|
value,
|
|
8
|
-
|
|
8
|
+
onChange: (e) => onValueChange?.(e.target.value),
|
|
9
9
|
placeholder,
|
|
10
10
|
disabled: !enabled,
|
|
11
11
|
readOnly,
|
|
@@ -13,6 +13,7 @@ export function Input({ value, onValueChange, placeholder, modifier, enabled = t
|
|
|
13
13
|
maxLength,
|
|
14
14
|
onFocus,
|
|
15
15
|
onBlur,
|
|
16
|
+
onKeyDown,
|
|
16
17
|
autoFocus,
|
|
17
18
|
style: {
|
|
18
19
|
width: "100%",
|
|
@@ -25,25 +26,17 @@ export function Input({ value, onValueChange, placeholder, modifier, enabled = t
|
|
|
25
26
|
color: "#1c1c1c",
|
|
26
27
|
boxSizing: "border-box",
|
|
27
28
|
},
|
|
28
|
-
}
|
|
29
|
+
});
|
|
29
30
|
if (!label && !supportingText) {
|
|
30
|
-
return
|
|
31
|
+
return React.createElement("div", { ...modProps }, input);
|
|
31
32
|
}
|
|
32
|
-
|
|
33
|
-
if (label) {
|
|
34
|
-
containerChildren.push(jalvinCreateElement("label", {
|
|
35
|
-
style: { fontSize: "0.875rem", fontWeight: 500, color: isError ? "#b00020" : "#5c5c5c" },
|
|
36
|
-
}, [document.createTextNode(label)]));
|
|
37
|
-
}
|
|
38
|
-
containerChildren.push(input);
|
|
39
|
-
if (supportingText) {
|
|
40
|
-
containerChildren.push(jalvinCreateElement("span", {
|
|
41
|
-
style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
|
|
42
|
-
}, [document.createTextNode(supportingText)]));
|
|
43
|
-
}
|
|
44
|
-
return jalvinCreateElement("div", {
|
|
33
|
+
return React.createElement("div", {
|
|
45
34
|
...modProps,
|
|
46
35
|
style: { display: "flex", flexDirection: "column", gap: "4px", ...modProps.style },
|
|
47
|
-
},
|
|
36
|
+
}, label && React.createElement("label", {
|
|
37
|
+
style: { fontSize: "0.875rem", fontWeight: 500, color: isError ? "#b00020" : "#5c5c5c" },
|
|
38
|
+
}, label), input, supportingText && React.createElement("span", {
|
|
39
|
+
style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
|
|
40
|
+
}, supportingText));
|
|
48
41
|
}
|
|
49
42
|
//# sourceMappingURL=input.js.map
|
package/dist/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,kBAAkB;AAClB,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,MAAM,EACb,KAAK,EACL,cAAc,EACd,OAAO,GAAG,KAAK,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,GACE;IACX,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpD,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;QACzC,KAAK;QACL,QAAQ,EAAE,CAAC,CAAsC,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACrF,WAAW;QACX,QAAQ,EAAE,CAAC,OAAO;QAClB,QAAQ;QACR,IAAI;QACJ,SAAS;QACT,OAAO;QACP,MAAM;QACN,SAAS;QACT,SAAS;QACT,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,UAAU;YACnB,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,aAAa,WAAW,EAAE;YAClC,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,MAAM;YACf,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC7C,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,YAAqB;SACjC;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;QAChC,GAAG,QAAQ;QACX,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE;KACnF,EACC,KAAK,IAAI,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;QACpC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;KACzF,EAAE,KAAK,CAAC,EACT,KAAK,EACL,cAAc,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;QAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;KACvE,EAAE,cAAc,CAAC,CACnB,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../src/interaction.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../src/interaction.ts"],"names":[],"mappings":"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"}
|
package/dist/interaction.js
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
//
|
|
12
12
|
// Box({ modifier: Modifier.hoverable(source).pressable(source) }) { ... }
|
|
13
13
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
14
|
-
import {
|
|
14
|
+
import { useState, useEffect, useRef } from "react";
|
|
15
15
|
// ── MutableInteractionSource ─────────────────────────────────────────────────
|
|
16
16
|
/**
|
|
17
17
|
* Mutable implementation of {@link InteractionSource}.
|
|
@@ -22,7 +22,7 @@ import { mutableStateOf, remember } from "@jalvin/runtime";
|
|
|
22
22
|
* so a single source describes the full interaction state of the element.
|
|
23
23
|
*/
|
|
24
24
|
export class MutableInteractionSource {
|
|
25
|
-
_interactions =
|
|
25
|
+
_interactions = [];
|
|
26
26
|
_listeners = new Set();
|
|
27
27
|
// ── active interaction tracking ─────────────────────────────────────────
|
|
28
28
|
_currentHover = null;
|
|
@@ -30,7 +30,7 @@ export class MutableInteractionSource {
|
|
|
30
30
|
_currentPress = null;
|
|
31
31
|
// ── InteractionSource ────────────────────────────────────────────────────
|
|
32
32
|
getInteractions() {
|
|
33
|
-
return this._interactions
|
|
33
|
+
return this._interactions;
|
|
34
34
|
}
|
|
35
35
|
subscribe(listener) {
|
|
36
36
|
this._listeners.add(listener);
|
|
@@ -118,10 +118,10 @@ export class MutableInteractionSource {
|
|
|
118
118
|
const paired = interaction.type === "hover.exit" ? interaction.enter :
|
|
119
119
|
interaction.type === "focus.unfocus" ? interaction.focus :
|
|
120
120
|
interaction.press;
|
|
121
|
-
this._interactions
|
|
121
|
+
this._interactions = this._interactions.filter(i => i !== paired);
|
|
122
122
|
}
|
|
123
123
|
else {
|
|
124
|
-
this._interactions
|
|
124
|
+
this._interactions = [...this._interactions, interaction];
|
|
125
125
|
}
|
|
126
126
|
this._listeners.forEach(l => l());
|
|
127
127
|
}
|
|
@@ -132,26 +132,44 @@ export class MutableInteractionSource {
|
|
|
132
132
|
* of the component. Equivalent to `remember { MutableInteractionSource() }`.
|
|
133
133
|
*/
|
|
134
134
|
export function useMutableInteractionSource() {
|
|
135
|
-
|
|
135
|
+
const ref = useRef(null);
|
|
136
|
+
if (ref.current === null)
|
|
137
|
+
ref.current = new MutableInteractionSource();
|
|
138
|
+
return ref.current;
|
|
136
139
|
}
|
|
137
140
|
/**
|
|
138
141
|
* Returns `true` while the pointer is inside the bounds of the component
|
|
139
142
|
* attached to `source` via `Modifier.hoverable(source)`.
|
|
140
143
|
*/
|
|
141
144
|
export function useIsHovered(source) {
|
|
142
|
-
|
|
145
|
+
const [val, setVal] = useState(() => source.getInteractions().some(i => i.type === "hover.enter"));
|
|
146
|
+
useEffect(() => {
|
|
147
|
+
setVal(source.getInteractions().some(i => i.type === "hover.enter"));
|
|
148
|
+
return source.subscribe(() => setVal(source.getInteractions().some(i => i.type === "hover.enter")));
|
|
149
|
+
}, [source]);
|
|
150
|
+
return val;
|
|
143
151
|
}
|
|
144
152
|
/**
|
|
145
153
|
* Returns `true` while the component attached to `source` has keyboard focus.
|
|
146
154
|
*/
|
|
147
155
|
export function useIsFocused(source) {
|
|
148
|
-
|
|
156
|
+
const [val, setVal] = useState(() => source.getInteractions().some(i => i.type === "focus.focus"));
|
|
157
|
+
useEffect(() => {
|
|
158
|
+
setVal(source.getInteractions().some(i => i.type === "focus.focus"));
|
|
159
|
+
return source.subscribe(() => setVal(source.getInteractions().some(i => i.type === "focus.focus")));
|
|
160
|
+
}, [source]);
|
|
161
|
+
return val;
|
|
149
162
|
}
|
|
150
163
|
/**
|
|
151
164
|
* Returns `true` while the user is pressing down on the component attached to
|
|
152
165
|
* `source` via `Modifier.pressable(source)`.
|
|
153
166
|
*/
|
|
154
167
|
export function useIsPressed(source) {
|
|
155
|
-
|
|
168
|
+
const [val, setVal] = useState(() => source.getInteractions().some(i => i.type === "press.press"));
|
|
169
|
+
useEffect(() => {
|
|
170
|
+
setVal(source.getInteractions().some(i => i.type === "press.press"));
|
|
171
|
+
return source.subscribe(() => setVal(source.getInteractions().some(i => i.type === "press.press")));
|
|
172
|
+
}, [source]);
|
|
173
|
+
return val;
|
|
156
174
|
}
|
|
157
175
|
//# sourceMappingURL=interaction.js.map
|
package/dist/interaction.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interaction.js","sourceRoot":"","sources":["../src/interaction.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,2DAA2D;AAC3D,EAAE;AACF,6EAA6E;AAC7E,8EAA8E;AAC9E,0EAA0E;AAC1E,EAAE;AACF,kDAAkD;AAClD,4CAA4C;AAC5C,4CAA4C;AAC5C,EAAE;AACF,4EAA4E;AAC5E,gFAAgF;AAEhF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"interaction.js","sourceRoot":"","sources":["../src/interaction.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,2DAA2D;AAC3D,EAAE;AACF,6EAA6E;AAC7E,8EAA8E;AAC9E,0EAA0E;AAC1E,EAAE;AACF,kDAAkD;AAClD,4CAA4C;AAC5C,4CAA4C;AAC5C,EAAE;AACF,4EAA4E;AAC5E,gFAAgF;AAEhF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAiDpD,gFAAgF;AAEhF;;;;;;;GAOG;AACH,MAAM,OAAO,wBAAwB;IAC3B,aAAa,GAA+B,EAAE,CAAC;IACtC,UAAU,GAAG,IAAI,GAAG,EAAc,CAAC;IAEpD,2EAA2E;IACnE,aAAa,GAAkC,IAAI,CAAC;IACpD,aAAa,GAAkC,IAAI,CAAC;IACpD,aAAa,GAAkC,IAAI,CAAC;IAE5D,4EAA4E;IAE5E,eAAe;QACb,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED,SAAS,CAAC,QAAoB;QAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC9B,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAED,4EAA4E;IAE5E,gBAAgB;IAChB,iBAAiB;QACf,MAAM,KAAK,GAA2B,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;QAC9D,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,gBAAgB;IAChB,iBAAiB;QACf,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YAC9D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;IAChB,YAAY;QACV,MAAM,KAAK,GAA2B,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;QAC9D,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,gBAAgB;IAChB,WAAW;QACT,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YACjE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;IAChB,gBAAgB,CAAC,CAAS,EAAE,CAAS;QACnC,MAAM,KAAK,GAA2B,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QACpE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,gBAAgB;IAChB,cAAc;QACZ,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YACjE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;IAChB,kBAAkB;QAChB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YAChE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,4DAA4D;IAC5D,iBAAiB,CAAC,CAAS,EAAE,CAAS;QACpC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,MAAM,KAAK,GAA2B,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;YAC9D,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9B,CAAC;IAED,+DAA+D;IAC/D,eAAe;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YAC9D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,iEAAiE;IACjE,kBAAkB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YAC9D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,4EAA4E;IAEpE,KAAK,CAAC,WAAwB;QACpC,uEAAuE;QACvE,IACE,WAAW,CAAC,IAAI,KAAK,YAAY;YACjC,WAAW,CAAC,IAAI,KAAK,eAAe;YACpC,WAAW,CAAC,IAAI,KAAK,cAAc;YACnC,WAAW,CAAC,IAAI,KAAK,eAAe,EACpC,CAAC;YACD,MAAM,MAAM,GACV,WAAW,CAAC,IAAI,KAAK,YAAY,CAAI,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC1D,WAAW,CAAC,IAAI,KAAK,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;oBACnB,WAAW,CAAC,KAAK,CAAC;YAC3D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;QACpE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QAC5D,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC;CACF;AAED,gFAAgF;AAEhF;;;GAGG;AACH,MAAM,UAAU,2BAA2B;IACzC,MAAM,GAAG,GAAG,MAAM,CAAkC,IAAI,CAAC,CAAC;IAC1D,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI;QAAE,GAAG,CAAC,OAAO,GAAG,IAAI,wBAAwB,EAAE,CAAC;IACvE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,MAAyB;IACpD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAC7D,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC;QACrE,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,CAC3B,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CACrE,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,MAAyB;IACpD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAC7D,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC;QACrE,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,CAC3B,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CACrE,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,MAAyB;IACpD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAC7D,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC;QACrE,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,CAC3B,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CACrE,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,GAAG,CAAC;AACb,CAAC"}
|
package/dist/layout.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { Modifier } from "./modifier.js";
|
|
2
3
|
export type Alignment = "start" | "center" | "end" | "stretch";
|
|
3
4
|
export type Arrangement = "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
|
|
@@ -6,22 +7,25 @@ export interface ColumnProps {
|
|
|
6
7
|
spacing?: number;
|
|
7
8
|
verticalArrangement?: Arrangement;
|
|
8
9
|
horizontalAlignment?: Alignment;
|
|
10
|
+
children?: React.ReactNode[];
|
|
9
11
|
}
|
|
10
12
|
/** Vertical flex container. */
|
|
11
|
-
export declare function Column({ modifier, spacing, verticalArrangement, horizontalAlignment }: ColumnProps
|
|
13
|
+
export declare function Column({ modifier, spacing, verticalArrangement, horizontalAlignment, children }: ColumnProps): React.ReactElement;
|
|
12
14
|
export interface RowProps {
|
|
13
15
|
modifier?: Modifier;
|
|
14
16
|
spacing?: number;
|
|
15
17
|
horizontalArrangement?: Arrangement;
|
|
16
18
|
verticalAlignment?: Alignment;
|
|
17
19
|
wrap?: boolean;
|
|
20
|
+
children?: React.ReactNode[];
|
|
18
21
|
}
|
|
19
22
|
/** Horizontal flex container. */
|
|
20
|
-
export declare function Row({ modifier, spacing, horizontalArrangement, verticalAlignment, wrap }: RowProps
|
|
23
|
+
export declare function Row({ modifier, spacing, horizontalArrangement, verticalAlignment, wrap, children }: RowProps): React.ReactElement;
|
|
21
24
|
export interface BoxProps {
|
|
22
25
|
modifier?: Modifier;
|
|
23
26
|
contentAlignment?: "topStart" | "topCenter" | "topEnd" | "centerStart" | "center" | "centerEnd" | "bottomStart" | "bottomCenter" | "bottomEnd";
|
|
27
|
+
children?: React.ReactNode[];
|
|
24
28
|
}
|
|
25
29
|
/** Positioned container. */
|
|
26
|
-
export declare function Box({ modifier, contentAlignment }: BoxProps
|
|
30
|
+
export declare function Box({ modifier, contentAlignment, children }: BoxProps): React.ReactElement;
|
|
27
31
|
//# sourceMappingURL=layout.d.ts.map
|
package/dist/layout.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC/D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,CAAC;AAsBtG,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B;AAED,+BAA+B;AAC/B,wBAAgB,MAAM,CACpB,EAAE,QAAQ,EAAE,OAAO,EAAE,mBAA6B,EAAE,mBAA6B,EAAE,QAAQ,EAAE,EAAE,WAAW,GACzG,KAAK,CAAC,YAAY,CAapB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B;AAED,iCAAiC;AACjC,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAA+B,EAAE,iBAA4B,EAAE,IAAY,EAAE,QAAQ,EAAE,EAAE,QAAQ,GACrH,KAAK,CAAC,YAAY,CAcpB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,gBAAgB,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,WAAW,CAAC;IAC/I,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B;AAED,4BAA4B;AAC5B,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,gBAA6B,EAAE,QAAQ,EAAE,EAAE,QAAQ,GAC9D,KAAK,CAAC,YAAY,CAapB"}
|