@jalvin/ui 2.0.37 → 2.0.39
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 +26 -39
- package/dist/__tests__/annotated-string.test.js.map +1 -1
- package/dist/__tests__/children-signature.test.js +20 -20
- package/dist/__tests__/children-signature.test.js.map +1 -1
- package/dist/__tests__/interaction.test.js +52 -35
- 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 +22 -16
- package/dist/__tests__/text.test.js.map +1 -1
- package/dist/__tests__/windowsizeclass.test.js +57 -66
- package/dist/__tests__/windowsizeclass.test.js.map +1 -1
- package/dist/annotated-string.d.ts +2 -4
- package/dist/annotated-string.d.ts.map +1 -1
- package/dist/annotated-string.js +19 -17
- package/dist/annotated-string.js.map +1 -1
- package/dist/button.d.ts +2 -3
- package/dist/button.d.ts.map +1 -1
- package/dist/button.js +8 -12
- 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 +31 -40
- package/dist/canvas.js.map +1 -1
- package/dist/checkbox.d.ts +1 -2
- package/dist/checkbox.d.ts.map +1 -1
- package/dist/checkbox.js +18 -11
- package/dist/checkbox.js.map +1 -1
- package/dist/image.d.ts +4 -6
- package/dist/image.d.ts.map +1 -1
- package/dist/image.js +32 -21
- package/dist/image.js.map +1 -1
- package/dist/index.d.ts +15 -14
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +17 -19
- package/dist/index.js.map +1 -1
- package/dist/input.d.ts +1 -3
- package/dist/input.d.ts.map +1 -1
- package/dist/input.js +20 -13
- package/dist/input.js.map +1 -1
- package/dist/interaction.d.ts.map +1 -1
- package/dist/interaction.js +9 -27
- package/dist/interaction.js.map +1 -1
- package/dist/layout.d.ts +3 -4
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js +7 -7
- package/dist/layout.js.map +1 -1
- package/dist/spacer.d.ts +2 -3
- 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 +9 -10
- package/dist/surface.d.ts.map +1 -1
- package/dist/surface.js +30 -13
- package/dist/surface.js.map +1 -1
- package/dist/text.d.ts +3 -5
- package/dist/text.d.ts.map +1 -1
- package/dist/text.js +23 -12
- package/dist/text.js.map +1 -1
- package/dist/textarea.d.ts +1 -3
- package/dist/textarea.d.ts.map +1 -1
- package/dist/textarea.js +20 -13
- package/dist/textarea.js.map +1 -1
- package/dist/typography.d.ts +101 -129
- package/dist/typography.d.ts.map +1 -1
- package/dist/typography.js +29 -25
- package/dist/typography.js.map +1 -1
- package/package.json +3 -8
package/dist/canvas.js
CHANGED
|
@@ -1,16 +1,29 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jalvinCreateElement } from "@jalvin/runtime";
|
|
2
2
|
function joinClassNames(...classNames) {
|
|
3
3
|
const value = classNames.filter(Boolean).join(" ").trim();
|
|
4
4
|
return value.length > 0 ? value : undefined;
|
|
5
5
|
}
|
|
6
6
|
/** Canvas drawing surface. */
|
|
7
|
-
export function Canvas({ modifier, width, height, draw, clearBeforeDraw = true, pixelRatio, className,
|
|
8
|
-
const ref = React.useRef(null);
|
|
7
|
+
export function Canvas({ modifier, width, height, draw, clearBeforeDraw = true, pixelRatio, className, }) {
|
|
9
8
|
const modProps = modifier?.toProps() ?? {};
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
const canvas = jalvinCreateElement("canvas", {
|
|
10
|
+
className: joinClassNames(modProps.className, className),
|
|
11
|
+
onMouseEnter: modProps.onMouseEnter,
|
|
12
|
+
onMouseLeave: modProps.onMouseLeave,
|
|
13
|
+
onFocus: modProps.onFocus,
|
|
14
|
+
onBlur: modProps.onBlur,
|
|
15
|
+
onMouseDown: modProps.onMouseDown,
|
|
16
|
+
onMouseUp: modProps.onMouseUp,
|
|
17
|
+
onTouchStart: modProps.onTouchStart,
|
|
18
|
+
onTouchEnd: modProps.onTouchEnd,
|
|
19
|
+
onTouchCancel: modProps.onTouchCancel,
|
|
20
|
+
style: {
|
|
21
|
+
width: width !== undefined ? `${width}px` : undefined,
|
|
22
|
+
height: height !== undefined ? `${height}px` : undefined,
|
|
23
|
+
...modProps.style,
|
|
24
|
+
},
|
|
25
|
+
}, []);
|
|
26
|
+
const drawFrame = () => {
|
|
14
27
|
const cssWidth = Math.max(1, Math.floor(width ?? (canvas.clientWidth || 300)));
|
|
15
28
|
const cssHeight = Math.max(1, Math.floor(height ?? (canvas.clientHeight || 150)));
|
|
16
29
|
const dpr = Math.max(1, pixelRatio ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1));
|
|
@@ -27,39 +40,17 @@ export function Canvas({ modifier, width, height, draw, clearBeforeDraw = true,
|
|
|
27
40
|
if (clearBeforeDraw)
|
|
28
41
|
ctx.clearRect(0, 0, cssWidth, cssHeight);
|
|
29
42
|
draw?.(ctx, canvas);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
43
|
+
};
|
|
44
|
+
// In vanilla mode, we trigger draw immediately.
|
|
45
|
+
// For dynamic resizing, we'd need ResizeObserver which we can set up here.
|
|
46
|
+
if (typeof window !== "undefined") {
|
|
47
|
+
requestAnimationFrame(drawFrame);
|
|
48
|
+
if (width === undefined || height === undefined) {
|
|
49
|
+
const observer = new ResizeObserver(() => drawFrame());
|
|
50
|
+
observer.observe(canvas);
|
|
51
|
+
// Note: No cleanup mechanism here for vanilla version yet
|
|
38
52
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
});
|
|
42
|
-
observer.observe(canvas);
|
|
43
|
-
return () => observer.disconnect();
|
|
44
|
-
}, [drawFrame, height, width]);
|
|
45
|
-
return React.createElement("canvas", {
|
|
46
|
-
ref,
|
|
47
|
-
...domProps,
|
|
48
|
-
className: joinClassNames(modProps.className, className),
|
|
49
|
-
onMouseEnter: modProps.onMouseEnter,
|
|
50
|
-
onMouseLeave: modProps.onMouseLeave,
|
|
51
|
-
onFocus: modProps.onFocus,
|
|
52
|
-
onBlur: modProps.onBlur,
|
|
53
|
-
onMouseDown: modProps.onMouseDown,
|
|
54
|
-
onMouseUp: modProps.onMouseUp,
|
|
55
|
-
onTouchStart: modProps.onTouchStart,
|
|
56
|
-
onTouchEnd: modProps.onTouchEnd,
|
|
57
|
-
onTouchCancel: modProps.onTouchCancel,
|
|
58
|
-
style: {
|
|
59
|
-
width: width !== undefined ? `${width}px` : undefined,
|
|
60
|
-
height: height !== undefined ? `${height}px` : undefined,
|
|
61
|
-
...modProps.style,
|
|
62
|
-
},
|
|
63
|
-
});
|
|
53
|
+
}
|
|
54
|
+
return canvas;
|
|
64
55
|
}
|
|
65
56
|
//# sourceMappingURL=canvas.js.map
|
package/dist/canvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../src/canvas.
|
|
1
|
+
{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../src/canvas.ts"],"names":[],"mappings":"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"}
|
package/dist/checkbox.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { Modifier } from "./modifier.js";
|
|
3
2
|
export interface CheckboxProps {
|
|
4
3
|
checked?: boolean;
|
|
@@ -13,5 +12,5 @@ export interface CheckboxProps {
|
|
|
13
12
|
autoFocus?: boolean;
|
|
14
13
|
}
|
|
15
14
|
/** Boolean toggle input. */
|
|
16
|
-
export declare function Checkbox({ checked, onCheckedChange, modifier, enabled, label, supportingText, isError, onFocus, onBlur, autoFocus, }: CheckboxProps):
|
|
15
|
+
export declare function Checkbox({ checked, onCheckedChange, modifier, enabled, label, supportingText, isError, onFocus, onBlur, autoFocus, }: CheckboxProps): HTMLElement;
|
|
17
16
|
//# 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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,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,WAAW,CAkD7B"}
|
package/dist/checkbox.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jalvinCreateElement } from "@jalvin/runtime";
|
|
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 = jalvinCreateElement("input", {
|
|
6
6
|
type: "checkbox",
|
|
7
7
|
checked,
|
|
8
8
|
disabled: !enabled,
|
|
@@ -17,19 +17,26 @@ 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
|
|
20
|
+
}, []);
|
|
21
|
+
const contentNodes = [];
|
|
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", {
|
|
22
33
|
style: {
|
|
23
34
|
display: "flex",
|
|
24
35
|
flexDirection: "column",
|
|
25
36
|
gap: supportingText ? "2px" : "0",
|
|
26
37
|
},
|
|
27
|
-
},
|
|
28
|
-
|
|
29
|
-
}, label), supportingText && React.createElement("span", {
|
|
30
|
-
style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
|
|
31
|
-
}, supportingText));
|
|
32
|
-
return React.createElement("label", {
|
|
38
|
+
}, contentNodes);
|
|
39
|
+
return jalvinCreateElement("label", {
|
|
33
40
|
...modProps,
|
|
34
41
|
style: {
|
|
35
42
|
display: "inline-flex",
|
|
@@ -38,6 +45,6 @@ export function Checkbox({ checked = false, onCheckedChange, modifier, enabled =
|
|
|
38
45
|
cursor: enabled ? "pointer" : "not-allowed",
|
|
39
46
|
...modProps.style,
|
|
40
47
|
},
|
|
41
|
-
}, input, content);
|
|
48
|
+
}, [input, content]);
|
|
42
49
|
}
|
|
43
50
|
//# 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.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAetD,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,mBAAmB,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,UAAU;QAChB,OAAO;QACP,QAAQ,EAAE,CAAC,OAAO;QAClB,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QACzD,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,EAAE,EAAE,CAAqB,CAAC;IAE3B,MAAM,YAAY,GAAW,EAAE,CAAC;IAChC,IAAI,KAAK,EAAE,CAAC;QACV,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE;YAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;SACvE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IACD,IAAI,cAAc,EAAE,CAAC;QACnB,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE;YAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;SACvE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,OAAO,GAAG,mBAAmB,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,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO,mBAAmB,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,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;AACvB,CAAC"}
|
package/dist/image.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { Modifier } from "./modifier.js";
|
|
3
2
|
export interface ImageProps {
|
|
4
3
|
src: string;
|
|
@@ -8,14 +7,13 @@ export interface ImageProps {
|
|
|
8
7
|
onClick?: () => void;
|
|
9
8
|
}
|
|
10
9
|
/** Image element. */
|
|
11
|
-
export declare function Image({ src, alt, modifier, contentScale, onClick, }: ImageProps):
|
|
10
|
+
export declare function Image({ src, alt, modifier, contentScale, onClick, }: ImageProps): HTMLElement;
|
|
12
11
|
export interface AsyncImageProps extends ImageProps {
|
|
13
|
-
loadingPlaceholder?:
|
|
14
|
-
errorPlaceholder?:
|
|
12
|
+
loadingPlaceholder?: Node;
|
|
13
|
+
errorPlaceholder?: Node;
|
|
15
14
|
}
|
|
16
15
|
/**
|
|
17
16
|
* Image that handles loading/error states.
|
|
18
|
-
* Falls back to placeholder content on error.
|
|
19
17
|
*/
|
|
20
|
-
export declare function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }: AsyncImageProps):
|
|
18
|
+
export declare function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }: AsyncImageProps): HTMLElement;
|
|
21
19
|
//# 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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzC,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;AAED,qBAAqB;AACrB,wBAAgB,KAAK,CAAC,EACpB,GAAG,EACH,GAAQ,EACR,QAAQ,EACR,YAAoB,EACpB,OAAO,GACR,EAAE,UAAU,GAAG,WAAW,CAmB1B;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,kBAAkB,CAAC,EAAE,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,IAAI,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,gBAAgB,GACjB,EAAE,eAAe,GAAG,WAAW,CAkC/B"}
|
package/dist/image.js
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
fill: "100% 100%",
|
|
4
|
-
fit: "contain",
|
|
5
|
-
crop: "cover",
|
|
6
|
-
none: "none",
|
|
7
|
-
};
|
|
1
|
+
import { jalvinCreateElement } from "@jalvin/runtime";
|
|
2
|
+
import { mutableStateOf } from "@jalvin/runtime";
|
|
8
3
|
/** Image element. */
|
|
9
4
|
export function Image({ src, alt = "", modifier, contentScale = "fit", onClick, }) {
|
|
10
5
|
const modProps = modifier?.toProps() ?? {};
|
|
11
|
-
return
|
|
6
|
+
return jalvinCreateElement("img", {
|
|
12
7
|
src,
|
|
13
8
|
alt,
|
|
14
9
|
onClick,
|
|
@@ -24,23 +19,39 @@ export function Image({ src, alt = "", modifier, contentScale = "fit", onClick,
|
|
|
24
19
|
cursor: onClick ? "pointer" : undefined,
|
|
25
20
|
...modProps.style,
|
|
26
21
|
},
|
|
27
|
-
});
|
|
22
|
+
}, []);
|
|
28
23
|
}
|
|
29
24
|
/**
|
|
30
25
|
* Image that handles loading/error states.
|
|
31
|
-
* Falls back to placeholder content on error.
|
|
32
26
|
*/
|
|
33
27
|
export function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }) {
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
28
|
+
const status = mutableStateOf("loading");
|
|
29
|
+
const container = jalvinCreateElement("span", {
|
|
30
|
+
style: { position: "relative", display: "inline-block" }
|
|
31
|
+
}, []);
|
|
32
|
+
const img = new window.Image();
|
|
33
|
+
img.src = src;
|
|
34
|
+
img.alt = alt ?? "";
|
|
35
|
+
img.onload = () => { status.value = "ok"; };
|
|
36
|
+
img.onerror = () => { status.value = "error"; };
|
|
37
|
+
// Simple reactive container update
|
|
38
|
+
// In a full implementation, the render loop handles this.
|
|
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;
|
|
45
56
|
}
|
|
46
57
|
//# 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.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAUjD,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,mBAAmB,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,CAAC;YACf,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACvC,GAAG,QAAQ,CAAC,KAAK;SAClB;KACF,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAOD;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,gBAAgB,GACA;IAChB,MAAM,MAAM,GAAG,cAAc,CAA6B,SAAS,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,mBAAmB,CAAC,MAAM,EAAE;QAC5C,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE;KACzD,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;IAC/B,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IACd,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,EAAE,CAAC;IACpB,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IAC5C,GAAG,CAAC,OAAO,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAEhD,mCAAmC;IACnC,0DAA0D;IAC1D,6DAA6D;IAE7D,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,IAAI,MAAM,CAAC,KAAK,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAAC;YACjD,SAAS,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,IAAI,kBAAkB,EAAE,CAAC;gBACrD,SAAS,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;YAC5C,CAAC;YACD,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QAC9E,CAAC;IACH,CAAC,CAAC;IAEF,oEAAoE;IACnE,MAAc,CAAC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,EAAE,CAAC;IAET,OAAO,SAAS,CAAC;AACnB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,31 +1,32 @@
|
|
|
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";
|
|
7
3
|
export { Column, Row, Box } from "./layout.js";
|
|
8
4
|
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";
|
|
11
5
|
export { Text } from "./text.js";
|
|
12
6
|
export type { TextProps } from "./text.js";
|
|
13
|
-
export {
|
|
14
|
-
export type {
|
|
15
|
-
export {
|
|
16
|
-
export type {
|
|
7
|
+
export { Button, IconButton } from "./button.js";
|
|
8
|
+
export type { ButtonProps, IconButtonProps, ButtonVariant } from "./button.js";
|
|
9
|
+
export { Image, AsyncImage } from "./image.js";
|
|
10
|
+
export type { ImageProps, AsyncImageProps } from "./image.js";
|
|
11
|
+
export { Canvas } from "./canvas.js";
|
|
12
|
+
export type { CanvasProps } from "./canvas.js";
|
|
17
13
|
export { Input } from "./input.js";
|
|
18
14
|
export type { InputProps } from "./input.js";
|
|
19
15
|
export { TextArea } from "./textarea.js";
|
|
20
16
|
export type { TextAreaProps } from "./textarea.js";
|
|
21
17
|
export { Checkbox } from "./checkbox.js";
|
|
22
18
|
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";
|
|
27
19
|
export { Spacer, Divider } from "./spacer.js";
|
|
28
20
|
export type { SpacerProps, DividerProps } from "./spacer.js";
|
|
29
21
|
export { Card, Scaffold, TopBar } from "./surface.js";
|
|
30
22
|
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";
|
|
31
32
|
//# 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":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,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,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAG9D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,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,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;AAG1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGtD,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACpG,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGxF,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;AAG7H,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC5D,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,30 +1,28 @@
|
|
|
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
|
|
8
1
|
export { Modifier, applyModifier } from "./modifier.js";
|
|
9
|
-
export { MutableInteractionSource, useMutableInteractionSource, useIsHovered, useIsPressed, useIsFocused } from "./interaction.js";
|
|
10
|
-
export { Color } from "./colors.js";
|
|
11
2
|
// Layout
|
|
12
3
|
export { Column, Row, Box } from "./layout.js";
|
|
13
|
-
//
|
|
14
|
-
export { Button, IconButton } from "./button.js";
|
|
15
|
-
// Text
|
|
4
|
+
// Basic Elements
|
|
16
5
|
export { Text } from "./text.js";
|
|
17
|
-
export {
|
|
18
|
-
export {
|
|
19
|
-
//
|
|
6
|
+
export { Button, IconButton } from "./button.js";
|
|
7
|
+
export { Image, AsyncImage } from "./image.js";
|
|
8
|
+
// Drawing
|
|
9
|
+
export { Canvas } from "./canvas.js";
|
|
10
|
+
// Inputs
|
|
20
11
|
export { Input } from "./input.js";
|
|
21
12
|
export { TextArea } from "./textarea.js";
|
|
22
13
|
export { Checkbox } from "./checkbox.js";
|
|
23
|
-
//
|
|
24
|
-
export { Image, AsyncImage } from "./image.js";
|
|
25
|
-
export { Canvas } from "./canvas.js";
|
|
26
|
-
// Spacer / Divider
|
|
14
|
+
// Spacer
|
|
27
15
|
export { Spacer, Divider } from "./spacer.js";
|
|
28
16
|
// Surface / Scaffold
|
|
29
17
|
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";
|
|
30
28
|
//# 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,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGxD,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG/C,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG/C,UAAU;AACV,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,SAAS;AACT,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG9C,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtD,uFAAuF;AACvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,mBAAmB;AACnB,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGpG,eAAe;AACf,OAAO,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGnI,aAAa;AACb,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG5D,SAAS;AACT,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC"}
|
package/dist/input.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { Modifier } from "./modifier.js";
|
|
3
2
|
export interface InputProps {
|
|
4
3
|
value?: string;
|
|
@@ -14,9 +13,8 @@ export interface InputProps {
|
|
|
14
13
|
maxLength?: number;
|
|
15
14
|
onFocus?: () => void;
|
|
16
15
|
onBlur?: () => void;
|
|
17
|
-
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
18
16
|
autoFocus?: boolean;
|
|
19
17
|
}
|
|
20
18
|
/** Text input. */
|
|
21
|
-
export declare function Input({ value, onValueChange, placeholder, modifier, enabled, readOnly, type, label, supportingText, isError, maxLength, onFocus, onBlur,
|
|
19
|
+
export declare function Input({ value, onValueChange, placeholder, modifier, enabled, readOnly, type, label, supportingText, isError, maxLength, onFocus, onBlur, autoFocus, }: InputProps): HTMLElement;
|
|
22
20
|
//# 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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,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,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,GACV,EAAE,UAAU,GAAG,WAAW,CAiD1B"}
|
package/dist/input.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jalvinCreateElement } from "@jalvin/runtime";
|
|
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,
|
|
3
|
+
export function Input({ value, onValueChange, placeholder, modifier, enabled = true, readOnly = false, type = "text", label, supportingText, isError = false, maxLength, onFocus, onBlur, autoFocus, }) {
|
|
4
4
|
const modProps = modifier?.toProps() ?? {};
|
|
5
5
|
const borderColor = isError ? "#b00020" : "#c4c4c4";
|
|
6
|
-
const input =
|
|
6
|
+
const input = jalvinCreateElement("input", {
|
|
7
7
|
value,
|
|
8
|
-
|
|
8
|
+
onInput: (e) => onValueChange?.(e.target.value),
|
|
9
9
|
placeholder,
|
|
10
10
|
disabled: !enabled,
|
|
11
11
|
readOnly,
|
|
@@ -13,7 +13,6 @@ export function Input({ value, onValueChange, placeholder, modifier, enabled = t
|
|
|
13
13
|
maxLength,
|
|
14
14
|
onFocus,
|
|
15
15
|
onBlur,
|
|
16
|
-
onKeyDown,
|
|
17
16
|
autoFocus,
|
|
18
17
|
style: {
|
|
19
18
|
width: "100%",
|
|
@@ -26,17 +25,25 @@ export function Input({ value, onValueChange, placeholder, modifier, enabled = t
|
|
|
26
25
|
color: "#1c1c1c",
|
|
27
26
|
boxSizing: "border-box",
|
|
28
27
|
},
|
|
29
|
-
});
|
|
28
|
+
}, []);
|
|
30
29
|
if (!label && !supportingText) {
|
|
31
|
-
return
|
|
30
|
+
return jalvinCreateElement("div", { ...modProps }, [input]);
|
|
32
31
|
}
|
|
33
|
-
|
|
32
|
+
const containerChildren = [];
|
|
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", {
|
|
34
45
|
...modProps,
|
|
35
46
|
style: { display: "flex", flexDirection: "column", gap: "4px", ...modProps.style },
|
|
36
|
-
},
|
|
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));
|
|
47
|
+
}, containerChildren);
|
|
41
48
|
}
|
|
42
49
|
//# 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.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAmBtD,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,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,mBAAmB,CAAC,OAAO,EAAE;QACzC,KAAK;QACL,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACpD,WAAW;QACX,QAAQ,EAAE,CAAC,OAAO;QAClB,QAAQ;QACR,IAAI;QACJ,SAAS;QACT,OAAO;QACP,MAAM;QACN,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,YAAY;SACxB;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9B,OAAO,mBAAmB,CAAC,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM,iBAAiB,GAAW,EAAE,CAAC;IACrC,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;YAClD,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;SACzF,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IACD,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,cAAc,EAAE,CAAC;QACnB,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE;YACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;SACvE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,OAAO,mBAAmB,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,EAAE,iBAAiB,CAAC,CAAC;AACxB,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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"}
|