@danielito1996/compose-svelted 0.2.2 → 0.2.5

package/dist/core/modifier/Modifier.d.ts

@@ -0,0 +1,195 @@
+import { ModifierImpl } from "./ModifierImpl";
+import type { BoxAlignment } from "../../components/layouts/Alignment";
+import type { Shape } from "../shapes/Shape";
+import type { ColorToken } from "../theme/ColorScheme";
+/**
+ * Modifier
+ *
+ * Modifier is an immutable, chainable object used to decorate or augment
+ * a UI component.
+ *
+ * Inspired by Jetpack Compose Modifier.
+ *
+ * Usage:
+ * ```
+ * Modifier
+ *   .padding(16)
+ *   .fillMaxWidth()
+ *   .background(ColorScheme.Surface)
+ * ```
+ */
+export declare const Modifier: {
+    /**
+     * Returns an empty Modifier with no effects.
+     *
+     * Useful as a default value or starting point.
+     */
+    readonly empty: () => ModifierImpl;
+    /**
+     * Adds padding around the content.
+     *
+     * Can be used with:
+     * - a single number (uniform padding)
+     * - an object with directional values
+     *
+     * Examples:
+     * ```
+     * Modifier.padding(16)
+     * Modifier.padding({ top: 8, bottom: 8 })
+     * ```
+     */
+    readonly padding: (valueOrParams?: number | {
+        top?: number;
+        bottom?: number;
+        start?: number;
+        end?: number;
+    }, unit?: string) => ModifierImpl;
+    /**
+     * Adds horizontal padding (left and right).
+     */
+    readonly paddingHorizontal: (value: number) => ModifierImpl;
+    /**
+     * Adds a border around the component.
+     *
+     * Optionally accepts a Shape to match rounded corners.
+     *
+     * Examples:
+     * ```
+     * Modifier.border(1, ColorScheme.Outline)
+     * Modifier.border(2, "#FF0000", RoundedCornerShape(12))
+     * ```
+     */
+    readonly border: (width: number, color: string, shape?: Shape) => ModifierImpl;
+    /**
+     * Marks the component as clickable.
+     *
+     * This modifier applies interaction semantics such as:
+     * - pointer cursor
+     * - user-select disabling
+     *
+     * Note:
+     * The click handler must still be attached at the component level.
+     *
+     * Example:
+     * ```
+     * <Box
+     *   on:click={onClick}
+     *   modifier={Modifier.clickable(onClick)}
+     * />
+     * ```
+     */
+    readonly clickable: (onClick: () => void) => ModifierImpl;
+    /**
+     * Offsets the component visually without affecting its layout.
+     *
+     * Equivalent to Jetpack Compose Modifier.offset.
+     *
+     * Note:
+     * This uses CSS transform and does not affect surrounding layout.
+     */
+    readonly offset: (x: number, y: number) => ModifierImpl;
+    /**
+     * Enables vertical scrolling for the component.
+     *
+     * Useful for Column or large content containers.
+     */
+    readonly verticalScroll: (enabled?: boolean) => ModifierImpl;
+    /**
+     * Enables horizontal scrolling for the component.
+     */
+    readonly horizontalScroll: (enabled?: boolean) => ModifierImpl;
+    /**
+     * Adds vertical padding (top and bottom).
+     */
+    readonly paddingVertical: (value: number) => ModifierImpl;
+    /**
+     * Aligns the component inside a Box.
+     *
+     * ⚠️ This modifier is intended to be used only inside Box layouts.
+     *
+     * Example:
+     * ```
+     * Modifier.align(Alignment.Center)
+     * ```
+     */
+    readonly align: (alignment: BoxAlignment) => ModifierImpl;
+    /**
+     * Makes the component fill the maximum available width.
+     */
+    readonly fillMaxWidth: () => ModifierImpl;
+    /**
+     * Makes the component fill the maximum available height.
+     */
+    readonly fillMaxHeight: () => ModifierImpl;
+    /**
+     * Makes the component fill both width and height.
+     */
+    readonly fillMaxSize: () => ModifierImpl;
+    /**
+     * Sets a fixed height for the component.
+     *
+     * Accepts either a number (px by default) or a CSS size string.
+     */
+    readonly height: (value: number | string, unit?: string) => ModifierImpl;
+    /**
+     * Sets a fixed width for the component.
+     *
+     * Accepts either a number (px by default) or a CSS size string.
+     */
+    readonly width: (value: number | string, unit?: string) => ModifierImpl;
+    /**
+     * Applies a background color to the component.
+     *
+     * Accepts either:
+     * - A CSS color string (e.g. "#2A2A2A", "transparent")
+     * - A Compose color token (e.g. ColorScheme.Surface)
+     *
+     * Examples:
+     * ```
+     * Modifier.background(ColorScheme.Surface)
+     * Modifier.background("#121212")
+     * ```
+     */
+    readonly background: (color: ColorToken | string) => ModifierImpl;
+    /**
+     * Assigns a proportional weight to the component inside
+     * a Row or Column.
+     *
+     * Similar to flex-grow.
+     *
+     * Example:
+     * ```
+     * Modifier.weight(1)
+     * ```
+     */
+    readonly weight: (weight: number, fill?: boolean) => ModifierImpl;
+    /**
+     * Assigns weight without forcing fill behavior.
+     */
+    readonly weightNoFill: (weight: number) => ModifierImpl;
+    /**
+     * Adds top margin to the component.
+     */
+    readonly marginTop: (value: number, unit?: string) => ModifierImpl;
+    /**
+     * Clips the component using the provided Shape.
+     *
+     * Example:
+     * ```
+     * Modifier.clip(RoundedCornerShape(16))
+     * ```
+     */
+    readonly clip: (shape: Shape) => ModifierImpl;
+    /**
+     * Sets both width and height to the same value.
+     *
+     * Useful for icons and square components.
+     *
+     * Example:
+     * ```
+     * Modifier.size(24)
+     * ```
+     */
+    readonly size: (value: number | string, unit?: string) => ModifierImpl;
+};
+export type Modifier = ModifierImpl;

package/dist/core/modifier/Modifier.js

@@ -0,0 +1,237 @@
+import { ModifierImpl } from "./ModifierImpl";
+/**
+ * Modifier
+ *
+ * Modifier is an immutable, chainable object used to decorate or augment
+ * a UI component.
+ *
+ * Inspired by Jetpack Compose Modifier.
+ *
+ * Usage:
+ * ```
+ * Modifier
+ *   .padding(16)
+ *   .fillMaxWidth()
+ *   .background(ColorScheme.Surface)
+ * ```
+ */
+export var Modifier = {
+    /**
+     * Returns an empty Modifier with no effects.
+     *
+     * Useful as a default value or starting point.
+     */
+    empty: function () {
+        return new ModifierImpl();
+    },
+    /**
+     * Adds padding around the content.
+     *
+     * Can be used with:
+     * - a single number (uniform padding)
+     * - an object with directional values
+     *
+     * Examples:
+     * ```
+     * Modifier.padding(16)
+     * Modifier.padding({ top: 8, bottom: 8 })
+     * ```
+     */
+    padding: function (valueOrParams, unit) {
+        if (valueOrParams === void 0) { valueOrParams = 0; }
+        if (unit === void 0) { unit = 'px'; }
+        return new ModifierImpl().padding(valueOrParams, unit);
+    },
+    /**
+     * Adds horizontal padding (left and right).
+     */
+    paddingHorizontal: function (value) {
+        return new ModifierImpl().paddingHorizontal(value);
+    },
+    /**
+     * Adds a border around the component.
+     *
+     * Optionally accepts a Shape to match rounded corners.
+     *
+     * Examples:
+     * ```
+     * Modifier.border(1, ColorScheme.Outline)
+     * Modifier.border(2, "#FF0000", RoundedCornerShape(12))
+     * ```
+     */
+    border: function (width, color, shape) {
+        return new ModifierImpl().border(width, color, shape);
+    },
+    /**
+     * Marks the component as clickable.
+     *
+     * This modifier applies interaction semantics such as:
+     * - pointer cursor
+     * - user-select disabling
+     *
+     * Note:
+     * The click handler must still be attached at the component level.
+     *
+     * Example:
+     * ```
+     * <Box
+     *   on:click={onClick}
+     *   modifier={Modifier.clickable(onClick)}
+     * />
+     * ```
+     */
+    clickable: function (onClick) {
+        return new ModifierImpl().clickable(onClick);
+    },
+    /**
+     * Offsets the component visually without affecting its layout.
+     *
+     * Equivalent to Jetpack Compose Modifier.offset.
+     *
+     * Note:
+     * This uses CSS transform and does not affect surrounding layout.
+     */
+    offset: function (x, y) {
+        return new ModifierImpl().offset(x, y);
+    },
+    /**
+     * Enables vertical scrolling for the component.
+     *
+     * Useful for Column or large content containers.
+     */
+    verticalScroll: function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return new ModifierImpl().verticalScroll(enabled);
+    },
+    /**
+     * Enables horizontal scrolling for the component.
+     */
+    horizontalScroll: function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return new ModifierImpl().horizontalScroll(enabled);
+    },
+    /**
+     * Adds vertical padding (top and bottom).
+     */
+    paddingVertical: function (value) {
+        return new ModifierImpl().paddingVertical(value);
+    },
+    /**
+     * Aligns the component inside a Box.
+     *
+     * ⚠️ This modifier is intended to be used only inside Box layouts.
+     *
+     * Example:
+     * ```
+     * Modifier.align(Alignment.Center)
+     * ```
+     */
+    align: function (alignment) {
+        return new ModifierImpl().align(alignment);
+    },
+    /**
+     * Makes the component fill the maximum available width.
+     */
+    fillMaxWidth: function () {
+        return new ModifierImpl().fillMaxWidth();
+    },
+    /**
+     * Makes the component fill the maximum available height.
+     */
+    fillMaxHeight: function () {
+        return new ModifierImpl().fillMaxHeight();
+    },
+    /**
+     * Makes the component fill both width and height.
+     */
+    fillMaxSize: function () {
+        return new ModifierImpl().fillMaxSize();
+    },
+    /**
+     * Sets a fixed height for the component.
+     *
+     * Accepts either a number (px by default) or a CSS size string.
+     */
+    height: function (value, unit) {
+        if (unit === void 0) { unit = 'px'; }
+        return new ModifierImpl().height(value, unit);
+    },
+    /**
+     * Sets a fixed width for the component.
+     *
+     * Accepts either a number (px by default) or a CSS size string.
+     */
+    width: function (value, unit) {
+        if (unit === void 0) { unit = 'px'; }
+        return new ModifierImpl().width(value, unit);
+    },
+    /**
+     * Applies a background color to the component.
+     *
+     * Accepts either:
+     * - A CSS color string (e.g. "#2A2A2A", "transparent")
+     * - A Compose color token (e.g. ColorScheme.Surface)
+     *
+     * Examples:
+     * ```
+     * Modifier.background(ColorScheme.Surface)
+     * Modifier.background("#121212")
+     * ```
+     */
+    background: function (color) {
+        return new ModifierImpl().background(color);
+    },
+    /**
+     * Assigns a proportional weight to the component inside
+     * a Row or Column.
+     *
+     * Similar to flex-grow.
+     *
+     * Example:
+     * ```
+     * Modifier.weight(1)
+     * ```
+     */
+    weight: function (weight, fill) {
+        if (fill === void 0) { fill = true; }
+        return new ModifierImpl().weight(weight, fill);
+    },
+    /**
+     * Assigns weight without forcing fill behavior.
+     */
+    weightNoFill: function (weight) {
+        return this.weight(weight, false);
+    },
+    /**
+     * Adds top margin to the component.
+     */
+    marginTop: function (value, unit) {
+        if (unit === void 0) { unit = 'px'; }
+        return new ModifierImpl().marginTop(value, unit);
+    },
+    /**
+     * Clips the component using the provided Shape.
+     *
+     * Example:
+     * ```
+     * Modifier.clip(RoundedCornerShape(16))
+     * ```
+     */
+    clip: function (shape) {
+        return new ModifierImpl().clip(shape);
+    },
+    /**
+     * Sets both width and height to the same value.
+     *
+     * Useful for icons and square components.
+     *
+     * Example:
+     * ```
+     * Modifier.size(24)
+     * ```
+     */
+    size: function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        return new ModifierImpl().size(value, unit);
+    }
+};

package/dist/core/modifier/ModifierImpl.d.ts

@@ -0,0 +1,38 @@
+import type { BoxAlignment } from "../../components/layouts/Alignment";
+import type { Shape } from "../shapes/Shape";
+import type { ColorToken } from "../theme/ColorScheme";
+export type ModifierEntry = {
+    className?: string;
+    style?: string;
+};
+export declare class ModifierImpl {
+    private readonly entries;
+    constructor(entries?: ModifierEntry[]);
+    then(other: ModifierImpl): ModifierImpl;
+    paddingHorizontal(value: number): ModifierImpl;
+    verticalScroll(enabled?: boolean): ModifierImpl;
+    horizontalScroll(enabled?: boolean): ModifierImpl;
+    paddingVertical(value: number): ModifierImpl;
+    fillMaxWidth(): ModifierImpl;
+    fillMaxHeight(): ModifierImpl;
+    fillMaxSize(): ModifierImpl;
+    background(color: ColorToken | string): ModifierImpl;
+    weight(weight: number, fill?: boolean): ModifierImpl;
+    align(alignment: BoxAlignment): ModifierImpl;
+    padding(valueOrParams?: number | {
+        top?: number;
+        bottom?: number;
+        start?: number;
+        end?: number;
+    }, unit?: string): ModifierImpl;
+    width(value: number | string, unit?: string): ModifierImpl;
+    height(value: number | string, unit?: string): ModifierImpl;
+    marginTop(value: number, unit?: string): ModifierImpl;
+    clip(shape: Shape): ModifierImpl;
+    size(value: number | string, unit?: string): ModifierImpl;
+    offset(x: number, y: number): ModifierImpl;
+    clickable(onClick: () => void): ModifierImpl;
+    border(width: number, color: string, shape?: Shape): ModifierImpl;
+    toStyle(): string;
+    toClass(): string;
+}

package/dist/core/modifier/ModifierImpl.js

@@ -0,0 +1,214 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { resolveColor } from "../theme/resolve";
+var ModifierImpl = /** @class */ (function () {
+    function ModifierImpl(entries) {
+        if (entries === void 0) { entries = []; }
+        this.entries = entries;
+    }
+    ModifierImpl.prototype.then = function (other) {
+        return new ModifierImpl(__spreadArray(__spreadArray([], this.entries, true), other.entries, true));
+    };
+    ModifierImpl.prototype.paddingHorizontal = function (value) {
+        return this.then(new ModifierImpl([
+            { style: "padding-left:".concat(value, "px;padding-right:").concat(value, "px;") },
+        ]));
+    };
+    ModifierImpl.prototype.verticalScroll = function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return this.then(new ModifierImpl([{
+                style: enabled
+                    ? "overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;"
+                    : ''
+            }]));
+    };
+    ModifierImpl.prototype.horizontalScroll = function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return this.then(new ModifierImpl([{
+                style: enabled
+                    ? "overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;"
+                    : ''
+            }]));
+    };
+    ModifierImpl.prototype.paddingVertical = function (value) {
+        return this.then(new ModifierImpl([
+            { style: "padding-top:".concat(value, "px;padding-bottom:").concat(value, "px;") },
+        ]));
+    };
+    ModifierImpl.prototype.fillMaxWidth = function () {
+        return this.then(new ModifierImpl([{ style: "width:100%;" }]));
+    };
+    ModifierImpl.prototype.fillMaxHeight = function () {
+        return this.then(new ModifierImpl([{ style: "height:100%;" }]));
+    };
+    ModifierImpl.prototype.fillMaxSize = function () {
+        return this.then(new ModifierImpl([{ style: "width:100%;height:100%;" }]));
+    };
+    ModifierImpl.prototype.background = function (color) {
+        var resolved;
+        if (typeof color === "string" &&
+            (color.startsWith("#") ||
+                color.startsWith("rgb") ||
+                color.startsWith("hsl") ||
+                color === "transparent" ||
+                color === "currentColor")) {
+            // Color CSS directo
+            resolved = color;
+        }
+        else {
+            // Token de ComposeTheme
+            resolved = resolveColor(color);
+        }
+        return this.then(new ModifierImpl([
+            { style: "background:".concat(resolved, ";") }
+        ]));
+    };
+    ModifierImpl.prototype.weight = function (weight, fill) {
+        if (fill === void 0) { fill = true; }
+        if (weight <= 0) {
+            console.warn("Modifier.weight() debe ser > 0");
+            return this;
+        }
+        var styleParts = [
+            "flex-grow: ".concat(weight, ";"),
+            "flex-shrink: ".concat(fill ? 1 : 0, ";"),
+            "flex-basis: 0%;" // importante para que el peso funcione bien
+        ];
+        return this.then(new ModifierImpl([{ style: styleParts.join(" ") }]));
+    };
+    ModifierImpl.prototype.align = function (alignment) {
+        var parts = alignment.split(' ');
+        var horizontal = parts[0]; // flex-start, center, flex-end
+        var vertical = parts[1] || parts[0]; // para casos simples como "center"
+        var style = 'position: absolute;';
+        // Vertical
+        if (vertical === 'flex-start') {
+            style += 'top: 0;';
+        }
+        else if (vertical === 'flex-end') {
+            style += 'bottom: 0;';
+        }
+        else if (vertical === 'center') {
+            style += 'top: 50%; transform: translateY(-50%);';
+        }
+        // Horizontal
+        if (horizontal === 'flex-start') {
+            style += 'left: 0;';
+        }
+        else if (horizontal === 'flex-end') {
+            style += 'right: 0;';
+        }
+        else if (horizontal === 'center') {
+            style += 'left: 50%;';
+            // Combinar transform si ya hay translateY
+            if (style.includes('translateY')) {
+                style = style.replace('translateY(-50%)', 'translate(-50%, -50%)');
+            }
+            else {
+                style += 'transform: translateX(-50%);';
+            }
+        }
+        return this.then(new ModifierImpl([{ style: style }]));
+    };
+    ModifierImpl.prototype.padding = function (valueOrParams, unit) {
+        if (valueOrParams === void 0) { valueOrParams = 0; }
+        if (unit === void 0) { unit = 'px'; }
+        var style = '';
+        if (typeof valueOrParams === 'number') {
+            // Padding uniforme
+            style = "padding:".concat(valueOrParams).concat(unit, ";");
+        }
+        else {
+            // Padding direccional
+            var _a = valueOrParams.top, top = _a === void 0 ? 0 : _a, _b = valueOrParams.bottom, bottom = _b === void 0 ? 0 : _b, _c = valueOrParams.start, start = _c === void 0 ? 0 : _c, _d = valueOrParams.end, end = _d === void 0 ? 0 : _d;
+            style = "\n                padding-top:".concat(top).concat(unit, ";\n                padding-bottom:").concat(bottom).concat(unit, ";\n                padding-left:").concat(start).concat(unit, ";\n                //padding-right:").concat(end).concat(unit, ";\n    ").trim();
+        }
+        return this.then(new ModifierImpl([{ style: style }]));
+    };
+    ModifierImpl.prototype.width = function (value, unit) {
+        if (unit === void 0) { unit = 'px'; }
+        var size = typeof value === 'number' ? "".concat(value).concat(unit) : value;
+        return this.then(new ModifierImpl([{ style: "width:".concat(size, ";") }]));
+    };
+    ModifierImpl.prototype.height = function (value, unit) {
+        if (unit === void 0) { unit = 'px'; }
+        var size = typeof value === 'number' ? "".concat(value).concat(unit) : value;
+        return this.then(new ModifierImpl([{ style: "height:".concat(size, ";") }]));
+    };
+    ModifierImpl.prototype.marginTop = function (value, unit) {
+        if (unit === void 0) { unit = 'px'; }
+        return this.then(new ModifierImpl([{ style: "margin-top:".concat(value).concat(unit, ";") }]));
+    };
+    ModifierImpl.prototype.clip = function (shape) {
+        return this.then(new ModifierImpl([
+            {
+                style: "\n                    border-radius:".concat(shape.toCssBorderRadius(), ";\n                    overflow:hidden;\n                ")
+            }
+        ]));
+    };
+    ModifierImpl.prototype.size = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        if (value === null || value === undefined) {
+            return this;
+        }
+        var resolved;
+        if (typeof value === "number") {
+            if (isNaN(value))
+                return this;
+            resolved = "".concat(value).concat(unit);
+        }
+        else {
+            if (value.trim() === "")
+                return this;
+            resolved = value;
+        }
+        return this.then(new ModifierImpl([
+            {
+                style: "width:".concat(resolved, ";height:").concat(resolved, ";")
+            }
+        ]));
+    };
+    ModifierImpl.prototype.offset = function (x, y) {
+        if (isNaN(x) || isNaN(y))
+            return this;
+        return this.then(new ModifierImpl([
+            {
+                style: "transform: translate(".concat(x, "px, ").concat(y, "px);")
+            }
+        ]));
+    };
+    ModifierImpl.prototype.clickable = function (onClick) {
+        return this.then(new ModifierImpl([
+            {
+                className: "compose-clickable",
+                style: "\n                    cursor: pointer;\n                    user-select: none;\n                "
+            }
+        ]));
+    };
+    ModifierImpl.prototype.border = function (width, color, shape) {
+        if (width <= 0)
+            return this;
+        var radius = shape ? shape.toCssBorderRadius() : undefined;
+        return this.then(new ModifierImpl([
+            {
+                style: "\n                    border:".concat(width, "px solid ").concat(color, ";\n                    ").concat(radius ? "border-radius:".concat(radius, ";") : "", "\n                ")
+            }
+        ]));
+    };
+    // ---- consumo interno ----
+    ModifierImpl.prototype.toStyle = function () {
+        return this.entries.map(function (e) { var _a; return (_a = e.style) !== null && _a !== void 0 ? _a : ""; }).join("");
+    };
+    ModifierImpl.prototype.toClass = function () {
+        return this.entries.map(function (e) { var _a; return (_a = e.className) !== null && _a !== void 0 ? _a : ""; }).join(" ");
+    };
+    return ModifierImpl;
+}());
+export { ModifierImpl };

package/dist/core/motion/AnimationSpec.d.ts

@@ -0,0 +1,6 @@
+export type AnimationSpec = {
+    base: string;
+    from: string;
+    to: string;
+    duration: number;
+};

package/dist/core/motion/AnimationSpec.js

@@ -0,0 +1 @@
+export {};

package/dist/core/motion/ContentTransition.d.ts

@@ -0,0 +1,5 @@
+export type ContentTransition = {
+    enter: string;
+    exit: string;
+    duration: number;
+};

package/dist/core/motion/ContentTransition.js

@@ -0,0 +1 @@
+export {};