@jalvin/ui 2.0.6 → 2.0.8

package/dist/button.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { Modifier } from "./modifier.js";
 export type ButtonVariant = "filled" | "outlined" | "text" | "tonal";
 export interface ButtonProps {
@@ -10,7 +11,7 @@ export interface ButtonProps {
     type?: "button" | "submit" | "reset";
 }
 /** Button — analogous to Compose's Button / OutlinedButton / TextButton. */
-export declare function Button({ text, innerHTML: html, onClick, modifier, enabled, type }: ButtonProps, children?: HTMLElement[]): HTMLButtonElement;
+export declare function Button({ text, innerHTML: html, onClick, modifier, enabled, type }: ButtonProps, children?: React.ReactNode[]): React.ReactElement;
 export interface IconButtonProps {
     innerHTML?: string;
     onClick?: () => void;
@@ -20,5 +21,5 @@ export interface IconButtonProps {
     "aria-label"?: string;
 }
 /** Icon-only circular button. */
-export declare function IconButton({ innerHTML, onClick, modifier, enabled, type, "aria-label": ariaLabel }: IconButtonProps, children?: HTMLElement[]): HTMLButtonElement;
+export declare function IconButton({ innerHTML, onClick, modifier, enabled, type, "aria-label": ariaLabel }: IconButtonProps, children?: React.ReactNode[]): React.ReactElement;
 //# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC;AAED,4EAA4E;AAC5E,wBAAgB,MAAM,CACpB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAc,EAAE,IAAe,EAAE,EAAE,WAAW,EAC1F,QAAQ,CAAC,EAAE,WAAW,EAAE,GACvB,iBAAiB,CAUnB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAc,EAAE,IAAe,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,eAAe,EAC3G,QAAQ,CAAC,EAAE,WAAW,EAAE,GACvB,iBAAiB,CAInB"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC;AAED,4EAA4E;AAC5E,wBAAgB,MAAM,CACpB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAc,EAAE,IAAe,EAAE,EAAE,WAAW,EAC1F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,GAC3B,KAAK,CAAC,YAAY,CAiBpB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CACxB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAc,EAAE,IAAe,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,eAAe,EAC3G,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,GAC3B,KAAK,CAAC,YAAY,CAiBpB"}

package/dist/button.js

@@ -1,27 +1,40 @@
-import { applyModifier } from "./modifier.js";
+import React from "react";
 /** Button — analogous to Compose's Button / OutlinedButton / TextButton. */
 export function Button({ text, innerHTML: html, onClick, modifier, enabled = true, type = "button" }, children) {
-    const el = document.createElement("button");
-    el.type = type;
-    if (text !== undefined)
-        el.textContent = text;
-    if (html !== undefined)
-        el.innerHTML = html;
-    if (onClick && enabled)
-        el.addEventListener("click", onClick);
-    if (!enabled)
-        el.disabled = true;
-    if (modifier)
-        applyModifier(el, modifier);
-    for (const child of children ?? [])
-        el.appendChild(child);
-    return el;
+    const modProps = modifier?.toProps() ?? {};
+    const baseProps = {
+        type,
+        disabled: !enabled,
+        onClick: enabled ? onClick : undefined,
+        className: modProps.className,
+        style: modProps.style,
+    };
+    if (html !== undefined) {
+        return React.createElement("button", {
+            ...baseProps,
+            dangerouslySetInnerHTML: { __html: html },
+        });
+    }
+    const childNodes = text !== undefined ? [text] : (children ?? []);
+    return React.createElement("button", baseProps, ...childNodes);
 }
 /** Icon-only circular button. */
 export function IconButton({ innerHTML, onClick, modifier, enabled = true, type = "button", "aria-label": ariaLabel }, children) {
-    const el = Button({ innerHTML, onClick, modifier, enabled, type }, children);
-    if (ariaLabel)
-        el.setAttribute("aria-label", ariaLabel);
-    return el;
+    const modProps = modifier?.toProps() ?? {};
+    const baseProps = {
+        type,
+        disabled: !enabled,
+        onClick: enabled ? onClick : undefined,
+        className: modProps.className,
+        style: modProps.style,
+        "aria-label": ariaLabel,
+    };
+    if (innerHTML !== undefined) {
+        return React.createElement("button", {
+            ...baseProps,
+            dangerouslySetInnerHTML: { __html: innerHTML },
+        });
+    }
+    return React.createElement("button", baseProps, ...(children ?? []));
 }
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAC;AAcxD,4EAA4E;AAC5E,MAAM,UAAU,MAAM,CACpB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAG,QAAQ,EAAe,EAC1F,QAAwB;IAExB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC5C,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC;IACf,IAAI,IAAI,KAAK,SAAS;QAAE,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;IAC9C,IAAI,IAAI,KAAK,SAAS;QAAE,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;IAC5C,IAAI,OAAO,IAAI,OAAO;QAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9D,IAAI,CAAC,OAAO;QAAE,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC;IACjC,IAAI,QAAQ;QAAE,aAAa,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC1C,KAAK,MAAM,KAAK,IAAI,QAAQ,IAAI,EAAE;QAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1D,OAAO,EAAE,CAAC;AACZ,CAAC;AAWD,iCAAiC;AACjC,MAAM,UAAU,UAAU,CACxB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAG,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAmB,EAC3G,QAAwB;IAExB,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC7E,IAAI,SAAS;QAAE,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IACxD,OAAO,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,4EAA4E;AAC5E,MAAM,UAAU,MAAM,CACpB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAG,QAAQ,EAAe,EAC1F,QAA4B;IAE5B,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,QAAQ,EAAE,CAAC,OAAO;QAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QACtC,SAAS,EAAE,QAAQ,CAAC,SAAS;QAC7B,KAAK,EAAE,QAAQ,CAAC,KAA4B;KAC7C,CAAC;IACF,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE;YACnC,GAAG,SAAS;YACZ,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SAC1C,CAAC,CAAC;IACL,CAAC;IACD,MAAM,UAAU,GAAsB,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;IACrF,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC;AACjE,CAAC;AAWD,iCAAiC;AACjC,MAAM,UAAU,UAAU,CACxB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAG,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAmB,EAC3G,QAA4B;IAE5B,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,QAAQ,EAAE,CAAC,OAAO;QAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QACtC,SAAS,EAAE,QAAQ,CAAC,SAAS;QAC7B,KAAK,EAAE,QAAQ,CAAC,KAA4B;QAC5C,YAAY,EAAE,SAAS;KACxB,CAAC;IACF,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE;YACnC,GAAG,SAAS;YACZ,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;SAC/C,CAAC,CAAC;IACL,CAAC;IACD,OAAO,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC;AACvE,CAAC"}

package/dist/index.d.ts

@@ -6,4 +6,14 @@ export { Column, Row, Box } from "./layout.js";
 export type { ColumnProps, RowProps, BoxProps, Alignment, Arrangement } from "./layout.js";
 export { Button, IconButton } from "./button.js";
 export type { ButtonProps, ButtonVariant, IconButtonProps } from "./button.js";
+export { Text } from "./text.js";
+export type { TextProps } from "./text.js";
+export { Input } from "./input.js";
+export type { InputProps } from "./input.js";
+export { Image, AsyncImage } from "./image.js";
+export type { ImageProps, AsyncImageProps } from "./image.js";
+export { Spacer, Divider } from "./spacer.js";
+export type { SpacerProps, DividerProps } from "./spacer.js";
+export { Card, Scaffold, TopBar } from "./surface.js";
+export type { CardProps, ScaffoldProps, TopBarProps } from "./surface.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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,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"}
+{"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,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;AAG3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,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,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

@@ -1,4 +1,4 @@
-// @jalvin/ui — Compose-style DOM component library (no React)
+// @jalvin/ui — Compose-style React component library
 //
 // Usage example (in a .jalvin file):
 //   import @jalvin/ui.Column
@@ -11,4 +11,14 @@ export { Color } from "./colors.js";
 export { Column, Row, Box } from "./layout.js";
 // Buttons
 export { Button, IconButton } from "./button.js";
+// Text
+export { Text } from "./text.js";
+// Input
+export { Input } from "./input.js";
+// Image
+export { Image, AsyncImage } from "./image.js";
+// Spacer / Divider
+export { Spacer, Divider } from "./spacer.js";
+// Surface / Scaffold
+export { Card, Scaffold, TopBar } from "./surface.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,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,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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,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,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;AAGjC,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG/C,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/layout.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { Modifier } from "./modifier.js";
 export type Alignment = "start" | "center" | "end" | "stretch";
 export type Arrangement = "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
@@ -8,7 +9,7 @@ export interface ColumnProps {
     horizontalAlignment?: Alignment;
 }
 /** Vertical flex container — analogous to Compose's Column. */
-export declare function Column({ modifier, spacing, verticalArrangement, horizontalAlignment }: ColumnProps, children?: HTMLElement[]): HTMLElement;
+export declare function Column({ modifier, spacing, verticalArrangement, horizontalAlignment }: ColumnProps, children?: React.ReactNode[]): React.ReactElement;
 export interface RowProps {
     modifier?: Modifier;
     spacing?: number;
@@ -17,11 +18,11 @@ export interface RowProps {
     wrap?: boolean;
 }
 /** Horizontal flex container — analogous to Compose's Row. */
-export declare function Row({ modifier, spacing, horizontalArrangement, verticalAlignment, wrap }: RowProps, children?: HTMLElement[]): HTMLElement;
+export declare function Row({ modifier, spacing, horizontalArrangement, verticalAlignment, wrap }: RowProps, children?: React.ReactNode[]): React.ReactElement;
 export interface BoxProps {
     modifier?: Modifier;
     contentAlignment?: "topStart" | "topCenter" | "topEnd" | "centerStart" | "center" | "centerEnd" | "bottomStart" | "bottomCenter" | "bottomEnd";
 }
 /** Positioned container — analogous to Compose's Box. */
-export declare function Box({ modifier, contentAlignment }: BoxProps, children?: HTMLElement[]): HTMLElement;
+export declare function Box({ modifier, contentAlignment }: BoxProps, children?: React.ReactNode[]): React.ReactElement;
 //# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,eAAe,CAAC;AAExD,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;CACjC;AAED,+DAA+D;AAC/D,wBAAgB,MAAM,CACpB,EAAE,QAAQ,EAAE,OAAO,EAAE,mBAA6B,EAAE,mBAA6B,EAAE,EAAE,WAAW,EAChG,QAAQ,CAAC,EAAE,WAAW,EAAE,GACvB,WAAW,CAUb;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;CAChB;AAED,8DAA8D;AAC9D,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAA+B,EAAE,iBAA4B,EAAE,IAAY,EAAE,EAAE,QAAQ,EAC5G,QAAQ,CAAC,EAAE,WAAW,EAAE,GACvB,WAAW,CAWb;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;CAChJ;AAED,yDAAyD;AACzD,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,gBAA6B,EAAE,EAAE,QAAQ,EACrD,QAAQ,CAAC,EAAE,WAAW,EAAE,GACvB,WAAW,CAYb"}
+{"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;CACjC;AAED,+DAA+D;AAC/D,wBAAgB,MAAM,CACpB,EAAE,QAAQ,EAAE,OAAO,EAAE,mBAA6B,EAAE,mBAA6B,EAAE,EAAE,WAAW,EAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,GAC3B,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;CAChB;AAED,8DAA8D;AAC9D,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAA+B,EAAE,iBAA4B,EAAE,IAAY,EAAE,EAAE,QAAQ,EAC5G,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,GAC3B,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;CAChJ;AAED,yDAAyD;AACzD,wBAAgB,GAAG,CACjB,EAAE,QAAQ,EAAE,gBAA6B,EAAE,EAAE,QAAQ,EACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,GAC3B,KAAK,CAAC,YAAY,CAapB"}

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { applyModifier } from "./modifier.js";
+import React from "react";
 function arrangementToJustify(a) {
     switch (a) {
         case "start": return "flex-start";
@@ -19,49 +19,48 @@ function alignmentToAlign(a) {
 }
 /** Vertical flex container — analogous to Compose's Column. */
 export function Column({ modifier, spacing, verticalArrangement = "start", horizontalAlignment = "start" }, children) {
-    const el = document.createElement("div");
-    el.style.display = "flex";
-    el.style.flexDirection = "column";
-    el.style.justifyContent = arrangementToJustify(verticalArrangement);
-    el.style.alignItems = alignmentToAlign(horizontalAlignment);
-    if (spacing !== undefined)
-        el.style.gap = `${spacing}px`;
-    if (modifier)
-        applyModifier(el, modifier);
-    for (const child of children ?? [])
-        el.appendChild(child);
-    return el;
+    const modProps = modifier?.toProps() ?? {};
+    return React.createElement("div", {
+        ...modProps,
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: arrangementToJustify(verticalArrangement),
+            alignItems: alignmentToAlign(horizontalAlignment),
+            ...(spacing !== undefined ? { gap: `${spacing}px` } : {}),
+            ...modProps.style,
+        },
+    }, ...(children ?? []));
 }
 /** Horizontal flex container — analogous to Compose's Row. */
 export function Row({ modifier, spacing, horizontalArrangement = "start", verticalAlignment = "center", wrap = false }, children) {
-    const el = document.createElement("div");
-    el.style.display = "flex";
-    el.style.flexDirection = "row";
-    el.style.justifyContent = arrangementToJustify(horizontalArrangement);
-    el.style.alignItems = alignmentToAlign(verticalAlignment);
-    el.style.flexWrap = wrap ? "wrap" : "nowrap";
-    if (spacing !== undefined)
-        el.style.gap = `${spacing}px`;
-    if (modifier)
-        applyModifier(el, modifier);
-    for (const child of children ?? [])
-        el.appendChild(child);
-    return el;
+    const modProps = modifier?.toProps() ?? {};
+    return React.createElement("div", {
+        ...modProps,
+        style: {
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: arrangementToJustify(horizontalArrangement),
+            alignItems: alignmentToAlign(verticalAlignment),
+            flexWrap: wrap ? "wrap" : "nowrap",
+            ...(spacing !== undefined ? { gap: `${spacing}px` } : {}),
+            ...modProps.style,
+        },
+    }, ...(children ?? []));
 }
 /** Positioned container — analogous to Compose's Box. */
 export function Box({ modifier, contentAlignment = "topStart" }, children) {
-    const el = document.createElement("div");
-    el.style.position = "relative";
-    el.style.display = "flex";
-    el.style.flexDirection = "column";
-    if (contentAlignment === "center") {
-        el.style.alignItems = "center";
-        el.style.justifyContent = "center";
-    }
-    if (modifier)
-        applyModifier(el, modifier);
-    for (const child of children ?? [])
-        el.appendChild(child);
-    return el;
+    const modProps = modifier?.toProps() ?? {};
+    const isCentered = contentAlignment === "center";
+    return React.createElement("div", {
+        ...modProps,
+        style: {
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            ...(isCentered ? { alignItems: "center", justifyContent: "center" } : {}),
+            ...modProps.style,
+        },
+    }, ...(children ?? []));
 }
 //# sourceMappingURL=layout.js.map

package/dist/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../src/layout.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jalvin/ui",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Jalvin UI — Compose-style component library (Column, Row, Box, Button, Text, …)",
   "type": "module",
   "main": "dist/index.js",