@jalvin/ui 1.0.0

package/dist/button.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { Modifier } from "./modifier.js";
+export type ButtonVariant = "filled" | "outlined" | "text" | "tonal";
+export interface ButtonProps {
+    text?: string;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    modifier?: Modifier;
+    variant?: ButtonVariant;
+    enabled?: boolean;
+    /** Icon rendered before the label */
+    leadingIcon?: React.ReactNode;
+    /** Icon rendered after the label */
+    trailingIcon?: React.ReactNode;
+    type?: "button" | "submit" | "reset";
+}
+/** Button — analogous to Compose's Button / OutlinedButton / TextButton. */
+export declare function Button({ text, children, onClick, modifier, variant, enabled, leadingIcon, trailingIcon, type, }: ButtonProps): React.ReactElement;
+export interface IconButtonProps {
+    onClick?: () => void;
+    modifier?: Modifier;
+    enabled?: boolean;
+    children: React.ReactNode;
+    "aria-label"?: string;
+}
+/** Icon-only circular button. */
+export declare function IconButton({ onClick, modifier, enabled, children, "aria-label": ariaLabel, }: IconButtonProps): React.ReactElement;
+//# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -0,0 +1 @@
+{"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;AAIzC,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,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,qCAAqC;IACrC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oCAAoC;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC;AAwCD,4EAA4E;AAC5E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAkB,EAClB,OAAc,EACd,WAAW,EACX,YAAY,EACZ,IAAe,GAChB,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAoBlC;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,OAAc,EACd,QAAQ,EACR,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAuBtC"}

package/dist/button.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = Button;
+exports.IconButton = IconButton;
+const react_1 = __importDefault(require("react"));
+const colors_js_1 = require("./colors.js");
+const BASE = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    padding: "8px 16px",
+    borderRadius: "20px",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    letterSpacing: "0.031em",
+    cursor: "pointer",
+    border: "none",
+    outline: "none",
+    transition: "background-color 0.15s, opacity 0.15s",
+    userSelect: "none",
+};
+const VARIANT_STYLES = {
+    filled: {
+        backgroundColor: colors_js_1.Color.Primary,
+        color: colors_js_1.Color.OnPrimary,
+    },
+    outlined: {
+        backgroundColor: "transparent",
+        color: colors_js_1.Color.Primary,
+        border: `1px solid ${colors_js_1.Color.Primary}`,
+    },
+    text: {
+        backgroundColor: "transparent",
+        color: colors_js_1.Color.Primary,
+        padding: "8px 12px",
+    },
+    tonal: {
+        backgroundColor: colors_js_1.Color.PrimaryLight + "33",
+        color: colors_js_1.Color.Primary,
+    },
+};
+/** Button — analogous to Compose's Button / OutlinedButton / TextButton. */
+function Button({ text, children, onClick, modifier, variant = "filled", enabled = true, leadingIcon, trailingIcon, type = "button", }) {
+    const modProps = modifier?.toProps() ?? {};
+    return react_1.default.createElement("button", {
+        type,
+        onClick: enabled ? onClick : undefined,
+        disabled: !enabled,
+        ...modProps,
+        style: {
+            ...BASE,
+            ...VARIANT_STYLES[variant],
+            opacity: enabled ? 1 : 0.4,
+            ...modProps.style,
+        },
+    }, leadingIcon, text ?? children, trailingIcon);
+}
+/** Icon-only circular button. */
+function IconButton({ onClick, modifier, enabled = true, children, "aria-label": ariaLabel, }) {
+    const modProps = modifier?.toProps() ?? {};
+    return react_1.default.createElement("button", {
+        type: "button",
+        onClick: enabled ? onClick : undefined,
+        disabled: !enabled,
+        "aria-label": ariaLabel,
+        ...modProps,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "40px",
+            height: "40px",
+            borderRadius: "50%",
+            border: "none",
+            background: "transparent",
+            cursor: enabled ? "pointer" : "default",
+            opacity: enabled ? 1 : 0.4,
+            transition: "background-color 0.15s",
+            ...modProps.style,
+        },
+    }, children);
+}
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

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

package/dist/colors.d.ts

@@ -0,0 +1,28 @@
+export declare const Color: {
+    readonly White: "#ffffff";
+    readonly Black: "#000000";
+    readonly Transparent: "transparent";
+    readonly Surface: "#f5f5f5";
+    readonly SurfaceVariant: "#e7e7e7";
+    readonly Outline: "#c4c4c4";
+    readonly OnSurface: "#1c1c1c";
+    readonly OnSurfaceVariant: "#5c5c5c";
+    readonly Primary: "#0066cc";
+    readonly PrimaryLight: "#4d94ff";
+    readonly PrimaryDark: "#004499";
+    readonly OnPrimary: "#ffffff";
+    readonly Secondary: "#6750a4";
+    readonly SecondaryLight: "#9a82d9";
+    readonly OnSecondary: "#ffffff";
+    readonly Error: "#b00020";
+    readonly ErrorLight: "#ef5350";
+    readonly OnError: "#ffffff";
+    readonly Success: "#2e7d32";
+    readonly SuccessLight: "#66bb6a";
+    readonly OnSuccess: "#ffffff";
+    readonly Warning: "#f57c00";
+    readonly WarningLight: "#ffb74d";
+    readonly OnWarning: "#ffffff";
+};
+export type ColorValue = string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;CAoCR,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC"}

package/dist/colors.js

@@ -0,0 +1,39 @@
+"use strict";
+// ─────────────────────────────────────────────────────────────────────────────
+// Color — named color constants matching Material Design 3 + extras
+// ─────────────────────────────────────────────────────────────────────────────
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Color = void 0;
+exports.Color = {
+    // Grays
+    White: "#ffffff",
+    Black: "#000000",
+    Transparent: "transparent",
+    Surface: "#f5f5f5",
+    SurfaceVariant: "#e7e7e7",
+    Outline: "#c4c4c4",
+    OnSurface: "#1c1c1c",
+    OnSurfaceVariant: "#5c5c5c",
+    // Primary
+    Primary: "#0066cc",
+    PrimaryLight: "#4d94ff",
+    PrimaryDark: "#004499",
+    OnPrimary: "#ffffff",
+    // Secondary
+    Secondary: "#6750a4",
+    SecondaryLight: "#9a82d9",
+    OnSecondary: "#ffffff",
+    // Error
+    Error: "#b00020",
+    ErrorLight: "#ef5350",
+    OnError: "#ffffff",
+    // Success
+    Success: "#2e7d32",
+    SuccessLight: "#66bb6a",
+    OnSuccess: "#ffffff",
+    // Warning
+    Warning: "#f57c00",
+    WarningLight: "#ffb74d",
+    OnWarning: "#ffffff",
+};
+//# sourceMappingURL=colors.js.map

package/dist/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":";AAAA,gFAAgF;AAChF,oEAAoE;AACpE,gFAAgF;;;AAEnE,QAAA,KAAK,GAAG;IACnB,QAAQ;IACR,KAAK,EAAS,SAAS;IACvB,KAAK,EAAS,SAAS;IACvB,WAAW,EAAG,aAAa;IAC3B,OAAO,EAAO,SAAS;IACvB,cAAc,EAAE,SAAS;IACzB,OAAO,EAAO,SAAS;IACvB,SAAS,EAAK,SAAS;IACvB,gBAAgB,EAAE,SAAS;IAE3B,UAAU;IACV,OAAO,EAAO,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,WAAW,EAAG,SAAS;IACvB,SAAS,EAAK,SAAS;IAEvB,YAAY;IACZ,SAAS,EAAK,SAAS;IACvB,cAAc,EAAE,SAAS;IACzB,WAAW,EAAG,SAAS;IAEvB,QAAQ;IACR,KAAK,EAAS,SAAS;IACvB,UAAU,EAAI,SAAS;IACvB,OAAO,EAAO,SAAS;IAEvB,UAAU;IACV,OAAO,EAAO,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAK,SAAS;IAEvB,UAAU;IACV,OAAO,EAAO,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAK,SAAS;CACf,CAAC"}

package/dist/image.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { Modifier } from "./modifier.js";
+export interface ImageProps {
+    src: string;
+    alt?: string;
+    modifier?: Modifier;
+    contentScale?: "fill" | "fit" | "crop" | "none";
+    onClick?: () => void;
+}
+/** Image element — analogous to Compose's Image. */
+export declare function Image({ src, alt, modifier, contentScale, onClick, }: ImageProps): React.ReactElement;
+export interface AsyncImageProps extends ImageProps {
+    loadingPlaceholder?: React.ReactNode;
+    errorPlaceholder?: React.ReactNode;
+}
+/**
+ * Image that handles loading/error states.
+ * Falls back to placeholder content on error.
+ */
+export declare function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }: AsyncImageProps): React.ReactElement;
+//# sourceMappingURL=image.d.ts.map

package/dist/image.d.ts.map

@@ -0,0 +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,oDAAoD;AACpD,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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = Image;
+exports.AsyncImage = AsyncImage;
+const react_1 = __importDefault(require("react"));
+const CONTENT_SCALE = {
+    fill: "100% 100%",
+    fit: "contain",
+    crop: "cover",
+    none: "none",
+};
+/** Image element — analogous to Compose's Image. */
+function Image({ src, alt = "", modifier, contentScale = "fit", onClick, }) {
+    const modProps = modifier?.toProps() ?? {};
+    return react_1.default.createElement("img", {
+        src,
+        alt,
+        onClick,
+        ...modProps,
+        style: {
+            objectFit: (contentScale === "fill"
+                ? "fill"
+                : contentScale === "fit"
+                    ? "contain"
+                    : contentScale === "crop"
+                        ? "cover"
+                        : "none"),
+            cursor: onClick ? "pointer" : undefined,
+            ...modProps.style,
+        },
+    });
+}
+/**
+ * Image that handles loading/error states.
+ * Falls back to placeholder content on error.
+ */
+function AsyncImage({ src, alt, modifier, contentScale, onClick, loadingPlaceholder, errorPlaceholder, }) {
+    const [status, setStatus] = react_1.default.useState("loading");
+    if (status === "error" && errorPlaceholder) {
+        return react_1.default.createElement(react_1.default.Fragment, null, errorPlaceholder);
+    }
+    return react_1.default.createElement("span", { style: { position: "relative", display: "inline-block" } }, status === "loading" && loadingPlaceholder, react_1.default.createElement(Image, {
+        src,
+        alt: alt ?? "",
+        modifier,
+        contentScale,
+        onClick,
+    }));
+}
+//# sourceMappingURL=image.js.map

package/dist/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../src/image.tsx"],"names":[],"mappings":";;;;;AAmBA,sBAyBC;AAWD,gCA2BC;AAlFD,kDAA0B;AAW1B,MAAM,aAAa,GAA4D;IAC7E,IAAI,EAAE,WAAW;IACjB,GAAG,EAAG,SAAS;IACf,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,oDAAoD;AACpD,SAAgB,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,eAAK,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,SAAgB,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,eAAK,CAAC,QAAQ,CAA6B,SAAS,CAAC,CAAC;IAElF,IAAI,MAAM,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAAC;QAC3C,OAAO,eAAK,CAAC,aAAa,CAAC,eAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;IACrE,CAAC;IAED,OAAO,eAAK,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,eAAK,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

@@ -0,0 +1,20 @@
+export { Modifier } from "./modifier.js";
+export { Color } from "./colors.js";
+export type { ColorValue } from "./colors.js";
+export { TextStyle, textStyleToCSS } from "./typography.js";
+export type { TextStyleDef, TextStyleKey } from "./typography.js";
+export { Column, Row, Box } from "./layout.js";
+export type { ColumnProps, RowProps, BoxProps, Alignment, Arrangement } from "./layout.js";
+export { Text } from "./text.js";
+export type { TextProps } from "./text.js";
+export { Button, IconButton } from "./button.js";
+export type { ButtonProps, ButtonVariant, IconButtonProps } from "./button.js";
+export { Spacer, Divider } from "./spacer.js";
+export type { SpacerProps, DividerProps } from "./spacer.js";
+export { Input } from "./input.js";
+export type { InputProps } from "./input.js";
+export { Card, Scaffold, TopBar } from "./surface.js";
+export type { CardProps, ScaffoldProps, TopBarProps } from "./surface.js";
+export { Image, AsyncImage } from "./image.js";
+export type { ImageProps, AsyncImageProps } from "./image.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC5D,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGlE,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;AAG3C,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,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,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,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,43 @@
+"use strict";
+// @jalvin/ui — Compose-style React component library
+//
+// Usage example (in a .jalvin file):
+//   import { Column, Row, Text, Button, Modifier, Color } from "@jalvin/ui"
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncImage = exports.Image = exports.TopBar = exports.Scaffold = exports.Card = exports.Input = exports.Divider = exports.Spacer = exports.IconButton = exports.Button = exports.Text = exports.Box = exports.Row = exports.Column = exports.textStyleToCSS = exports.TextStyle = exports.Color = exports.Modifier = void 0;
+var modifier_js_1 = require("./modifier.js");
+Object.defineProperty(exports, "Modifier", { enumerable: true, get: function () { return modifier_js_1.Modifier; } });
+var colors_js_1 = require("./colors.js");
+Object.defineProperty(exports, "Color", { enumerable: true, get: function () { return colors_js_1.Color; } });
+var typography_js_1 = require("./typography.js");
+Object.defineProperty(exports, "TextStyle", { enumerable: true, get: function () { return typography_js_1.TextStyle; } });
+Object.defineProperty(exports, "textStyleToCSS", { enumerable: true, get: function () { return typography_js_1.textStyleToCSS; } });
+// Layout
+var layout_js_1 = require("./layout.js");
+Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return layout_js_1.Column; } });
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return layout_js_1.Row; } });
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return layout_js_1.Box; } });
+// Text
+var text_js_1 = require("./text.js");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_js_1.Text; } });
+// Buttons
+var button_js_1 = require("./button.js");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_js_1.Button; } });
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return button_js_1.IconButton; } });
+// Spacer & Divider
+var spacer_js_1 = require("./spacer.js");
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return spacer_js_1.Spacer; } });
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return spacer_js_1.Divider; } });
+// Input
+var input_js_1 = require("./input.js");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_js_1.Input; } });
+// Surfaces
+var surface_js_1 = require("./surface.js");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return surface_js_1.Card; } });
+Object.defineProperty(exports, "Scaffold", { enumerable: true, get: function () { return surface_js_1.Scaffold; } });
+Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return surface_js_1.TopBar; } });
+// Image
+var image_js_1 = require("./image.js");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return image_js_1.Image; } });
+Object.defineProperty(exports, "AsyncImage", { enumerable: true, get: function () { return image_js_1.AsyncImage; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,qDAAqD;AACrD,EAAE;AACF,qCAAqC;AACrC,4EAA4E;;;AAE5E,6CAAyC;AAAhC,uGAAA,QAAQ,OAAA;AAEjB,yCAAoC;AAA3B,kGAAA,KAAK,OAAA;AAGd,iDAA4D;AAAnD,0GAAA,SAAS,OAAA;AAAE,+GAAA,cAAc,OAAA;AAGlC,SAAS;AACT,yCAA+C;AAAtC,mGAAA,MAAM,OAAA;AAAE,gGAAA,GAAG,OAAA;AAAE,gGAAA,GAAG,OAAA;AAGzB,OAAO;AACP,qCAAiC;AAAxB,+FAAA,IAAI,OAAA;AAGb,UAAU;AACV,yCAAiD;AAAxC,mGAAA,MAAM,OAAA;AAAE,uGAAA,UAAU,OAAA;AAG3B,mBAAmB;AACnB,yCAA8C;AAArC,mGAAA,MAAM,OAAA;AAAE,oGAAA,OAAO,OAAA;AAGxB,QAAQ;AACR,uCAAmC;AAA1B,iGAAA,KAAK,OAAA;AAGd,WAAW;AACX,2CAAsD;AAA7C,kGAAA,IAAI,OAAA;AAAE,sGAAA,QAAQ,OAAA;AAAE,oGAAA,MAAM,OAAA;AAG/B,QAAQ;AACR,uCAA+C;AAAtC,iGAAA,KAAK,OAAA;AAAE,sGAAA,UAAU,OAAA"}

package/dist/input.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { Modifier } from "./modifier.js";
+export interface InputProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    modifier?: Modifier;
+    enabled?: boolean;
+    readOnly?: boolean;
+    type?: "text" | "email" | "password" | "number" | "search" | "tel" | "url";
+    label?: string;
+    supportingText?: string;
+    isError?: boolean;
+    maxLength?: number;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    autoFocus?: boolean;
+}
+/** Text input — analogous to Compose's TextField / OutlinedTextField. */
+export declare function Input({ value, onValueChange, placeholder, modifier, enabled, readOnly, type, label, supportingText, isError, maxLength, onFocus, onBlur, onKeyDown, autoFocus, }: InputProps): React.ReactElement;
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -0,0 +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,yEAAyE;AACzE,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

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = Input;
+const react_1 = __importDefault(require("react"));
+/** Text input — analogous to Compose's TextField / OutlinedTextField. */
+function Input({ value, onValueChange, placeholder, modifier, enabled = true, readOnly = false, type = "text", label, supportingText, isError = false, maxLength, onFocus, onBlur, onKeyDown, autoFocus, }) {
+    const modProps = modifier?.toProps() ?? {};
+    const borderColor = isError ? "#b00020" : "#c4c4c4";
+    const input = react_1.default.createElement("input", {
+        value,
+        onChange: (e) => onValueChange?.(e.target.value),
+        placeholder,
+        disabled: !enabled,
+        readOnly,
+        type,
+        maxLength,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        autoFocus,
+        style: {
+            width: "100%",
+            padding: "8px 12px",
+            fontSize: "1rem",
+            border: `1px solid ${borderColor}`,
+            borderRadius: "4px",
+            outline: "none",
+            backgroundColor: enabled ? "#fff" : "#f5f5f5",
+            color: "#1c1c1c",
+            boxSizing: "border-box",
+        },
+    });
+    if (!label && !supportingText) {
+        return react_1.default.createElement("div", { ...modProps }, input);
+    }
+    return react_1.default.createElement("div", {
+        ...modProps,
+        style: { display: "flex", flexDirection: "column", gap: "4px", ...modProps.style },
+    }, label && react_1.default.createElement("label", {
+        style: { fontSize: "0.875rem", fontWeight: 500, color: isError ? "#b00020" : "#5c5c5c" },
+    }, label), input, supportingText && react_1.default.createElement("span", {
+        style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
+    }, supportingText));
+}
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":";;;;;AAsBA,sBA6DC;AAnFD,kDAA0B;AAqB1B,yEAAyE;AACzE,SAAgB,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,eAAK,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,eAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,eAAK,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,eAAK,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,eAAK,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"}

package/dist/layout.d.ts

@@ -0,0 +1,31 @@
+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";
+export interface ColumnProps {
+    children?: React.ReactNode;
+    modifier?: Modifier;
+    spacing?: number;
+    verticalArrangement?: Arrangement;
+    horizontalAlignment?: Alignment;
+}
+/** Vertical flex container — analogous to Compose's Column. */
+export declare function Column({ children, modifier, spacing, verticalArrangement, horizontalAlignment, }: ColumnProps): React.ReactElement;
+export interface RowProps {
+    children?: React.ReactNode;
+    modifier?: Modifier;
+    spacing?: number;
+    horizontalArrangement?: Arrangement;
+    verticalAlignment?: Alignment;
+    wrap?: boolean;
+}
+/** Horizontal flex container — analogous to Compose's Row. */
+export declare function Row({ children, modifier, spacing, horizontalArrangement, verticalAlignment, wrap, }: RowProps): React.ReactElement;
+export interface BoxProps {
+    children?: React.ReactNode;
+    modifier?: Modifier;
+    contentAlignment?: "topStart" | "topCenter" | "topEnd" | "centerStart" | "center" | "centerEnd" | "bottomStart" | "bottomCenter" | "bottomEnd";
+}
+/** Positioned container — analogous to Compose's Box. */
+export declare function Box({ children, modifier, contentAlignment, }: BoxProps): React.ReactElement;
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -0,0 +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,KAAK,CAAC,SAAS,CAAC;IAC3B,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,CAAC,EACrB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,mBAA6B,EAC7B,mBAA6B,GAC9B,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAalC;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,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,CAAC,EAClB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,qBAA+B,EAC/B,iBAA4B,EAC5B,IAAY,GACb,EAAE,QAAQ,GAAG,KAAK,CAAC,YAAY,CAc/B;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,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,CAAC,EAClB,QAAQ,EACR,QAAQ,EACR,gBAA6B,GAC9B,EAAE,QAAQ,GAAG,KAAK,CAAC,YAAY,CAqB/B"}

package/dist/layout.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Column = Column;
+exports.Row = Row;
+exports.Box = Box;
+const react_1 = __importDefault(require("react"));
+function arrangementToJustify(a) {
+    switch (a) {
+        case "start": return "flex-start";
+        case "center": return "center";
+        case "end": return "flex-end";
+        case "spaceBetween": return "space-between";
+        case "spaceAround": return "space-around";
+        case "spaceEvenly": return "space-evenly";
+    }
+}
+function alignmentToAlign(a) {
+    switch (a) {
+        case "start": return "flex-start";
+        case "center": return "center";
+        case "end": return "flex-end";
+        case "stretch": return "stretch";
+    }
+}
+/** Vertical flex container — analogous to Compose's Column. */
+function Column({ children, modifier, spacing, verticalArrangement = "start", horizontalAlignment = "start", }) {
+    const modProps = modifier?.toProps() ?? {};
+    return react_1.default.createElement("div", {
+        ...modProps,
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: arrangementToJustify(verticalArrangement),
+            alignItems: alignmentToAlign(horizontalAlignment),
+            gap: spacing !== undefined ? `${spacing}px` : undefined,
+            ...modProps.style,
+        },
+    }, children);
+}
+/** Horizontal flex container — analogous to Compose's Row. */
+function Row({ children, modifier, spacing, horizontalArrangement = "start", verticalAlignment = "center", wrap = false, }) {
+    const modProps = modifier?.toProps() ?? {};
+    return react_1.default.createElement("div", {
+        ...modProps,
+        style: {
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: arrangementToJustify(horizontalArrangement),
+            alignItems: alignmentToAlign(verticalAlignment),
+            flexWrap: wrap ? "wrap" : "nowrap",
+            gap: spacing !== undefined ? `${spacing}px` : undefined,
+            ...modProps.style,
+        },
+    }, children);
+}
+/** Positioned container — analogous to Compose's Box. */
+function Box({ children, modifier, contentAlignment = "topStart", }) {
+    const modProps = modifier?.toProps() ?? {};
+    const [vertical, horizontal] = contentAlignment === "center"
+        ? ["center", "center"]
+        : contentAlignment.startsWith("top")
+            ? ["flex-start", contentAlignment.includes("Center") ? "center" : contentAlignment.includes("End") ? "flex-end" : "flex-start"]
+            : contentAlignment.startsWith("bottom")
+                ? ["flex-end", contentAlignment.includes("Center") ? "center" : contentAlignment.includes("End") ? "flex-end" : "flex-start"]
+                : ["center", contentAlignment.includes("Center") ? "center" : contentAlignment.includes("End") ? "flex-end" : "flex-start"];
+    return react_1.default.createElement("div", {
+        ...modProps,
+        style: {
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: horizontal,
+            justifyContent: vertical,
+            ...modProps.style,
+        },
+    }, children);
+}
+//# sourceMappingURL=layout.js.map

package/dist/layout.js.map

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