@danielito1996/compose-svelted 0.2.7-alpha04 → 0.2.8-alpha01

package/dist/core/modifier/Modifier.js

@@ -1,235 +1,73 @@
 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'; }
+        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))
-     * ```
-     */
+    paddingVertical: function (value) {
+        return new ModifierImpl().paddingVertical(value);
+    },
     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'; }
+        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'; }
+        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);
+        return new ModifierImpl().weight(weight, false);
     },
-    /**
-     * Adds top margin to the component.
-     */
     marginTop: function (value, unit) {
-        if (unit === void 0) { unit = 'px'; }
+        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

@@ -1,14 +1,21 @@
-import type { BoxAlignment } from "../../components/layouts/Alignment";
+import type { BoxAlignment, HorizontalAlignment, VerticalAlignment } from "../../components/layouts/Alignment";
 import type { Shape } from "../shapes/Shape";
 import type { ColorToken } from "../theme/ColorScheme";
 export type ModifierMeta = {
-    align?: BoxAlignment;
+    /** Alineación de este hijo dentro de su contenedor (place-self en grid, align-self en flex) */
+    align?: BoxAlignment | HorizontalAlignment | VerticalAlignment;
 };
 export type ModifierEntry = {
     className?: string;
     style?: string;
     meta?: ModifierMeta;
 };
+type PaddingValue = number | {
+    top?: number;
+    bottom?: number;
+    start?: number;
+    end?: number;
+};
 export declare class ModifierImpl {
     private readonly entries;
     constructor(entries?: ModifierEntry[]);
@@ -16,17 +23,28 @@ export declare class ModifierImpl {
     fillMaxWidth(): ModifierImpl;
     fillMaxHeight(): ModifierImpl;
     fillMaxSize(): ModifierImpl;
+    width(value: number | string, unit?: string): ModifierImpl;
+    height(value: number | string, unit?: string): ModifierImpl;
+    size(value: number | string, unit?: string): ModifierImpl;
     weight(weight: number, fill?: boolean): ModifierImpl;
-    padding(value: number): ModifierImpl;
+    padding(valueOrParams?: PaddingValue, unit?: string): ModifierImpl;
     paddingHorizontal(value: number): ModifierImpl;
     paddingVertical(value: number): ModifierImpl;
-    marginTop(value: number): ModifierImpl;
+    marginTop(value: number, unit?: string): ModifierImpl;
     background(color: ColorToken | string): ModifierImpl;
     border(width: number, color: string, shape?: Shape): ModifierImpl;
     clip(shape: Shape): ModifierImpl;
-    align(alignment: BoxAlignment): ModifierImpl;
-    clickable(): ModifierImpl;
+    offset(x: number, y: number): ModifierImpl;
+    /**
+     * Sobreescribe la alineación de este hijo dentro de un contenedor (Box, Column, Row).
+     * Equivalente a Modifier.align() en Jetpack Compose.
+     */
+    align(alignment: BoxAlignment | HorizontalAlignment | VerticalAlignment): ModifierImpl;
+    clickable(_onClick?: () => void): ModifierImpl;
+    verticalScroll(enabled?: boolean): ModifierImpl;
+    horizontalScroll(enabled?: boolean): ModifierImpl;
     toStyle(): string;
     toClass(): string;
     getMeta(): ModifierMeta;
 }
+export {};

package/dist/core/modifier/ModifierImpl.js

@@ -19,107 +19,156 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { resolveColor } from "../theme/resolve";
-/* =========================
- * ModifierImpl
- * ========================= */
+import { resolveBoxPlaceSelf, resolveColumnAlignSelf, resolveRowAlignSelf } from "../../components/layouts/resolveAlignment";
+function toCssLength(value, unit) {
+    if (unit === void 0) { unit = "px"; }
+    return typeof value === "number" ? "".concat(value).concat(unit) : value;
+}
 var ModifierImpl = /** @class */ (function () {
     function ModifierImpl(entries) {
         if (entries === void 0) { entries = []; }
         this.entries = entries;
     }
-    /* -------- composición -------- */
     ModifierImpl.prototype.then = function (other) {
         return new ModifierImpl(__spreadArray(__spreadArray([], this.entries, true), other.entries, true));
     };
-    /* -------- layout size -------- */
     ModifierImpl.prototype.fillMaxWidth = function () {
-        return this.then(new ModifierImpl([{ style: "width:100%;" }]));
+        // En flexbox, width:100% y align-self:stretch aseguran ocupar el ancho
+        return this.then(new ModifierImpl([{ style: "width:100%;align-self:stretch;" }]));
     };
     ModifierImpl.prototype.fillMaxHeight = function () {
-        return this.then(new ModifierImpl([{ style: "height:100%;" }]));
+        // En flexbox (como Row), align-self:stretch es clave para llenar el alto transversal
+        // height:100% ayuda en contextos de bloque o flex-direction: column
+        return this.then(new ModifierImpl([{ style: "height:100%;align-self:stretch;" }]));
     };
     ModifierImpl.prototype.fillMaxSize = function () {
-        return this.then(new ModifierImpl([{ style: "width:100%;height:100%;" }]));
+        return this.then(new ModifierImpl([{ style: "width:100%;height:100%;align-self:stretch;" }]));
+    };
+    ModifierImpl.prototype.width = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        return this.then(new ModifierImpl([{ style: "width:".concat(toCssLength(value, unit), ";") }]));
+    };
+    ModifierImpl.prototype.height = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        return this.then(new ModifierImpl([{ style: "height:".concat(toCssLength(value, unit), ";") }]));
+    };
+    ModifierImpl.prototype.size = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        var cssValue = toCssLength(value, unit);
+        return this.then(new ModifierImpl([{ style: "width:".concat(cssValue, ";height:").concat(cssValue, ";") }]));
     };
     ModifierImpl.prototype.weight = function (weight, fill) {
         if (fill === void 0) { fill = true; }
-        if (weight <= 0)
+        if (weight <= 0) {
             return this;
+        }
         return this.then(new ModifierImpl([
             {
-                style: "\n            flex-grow:".concat(weight, ";\n            flex-shrink:").concat(fill ? 1 : 0, ";\n            flex-basis:0%;\n          "),
-            },
+                style: "flex-grow:".concat(weight, ";flex-shrink:").concat(fill ? 1 : 0, ";flex-basis:0%;")
+            }
         ]));
     };
-    /* -------- padding / margin -------- */
-    ModifierImpl.prototype.padding = function (value) {
-        return this.then(new ModifierImpl([{ style: "padding:".concat(value, "px;") }]));
+    ModifierImpl.prototype.padding = function (valueOrParams, unit) {
+        if (valueOrParams === void 0) { valueOrParams = 0; }
+        if (unit === void 0) { unit = "px"; }
+        if (typeof valueOrParams === "number") {
+            return this.then(new ModifierImpl([{ style: "padding:".concat(valueOrParams).concat(unit, ";") }]));
+        }
+        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;
+        return this.then(new ModifierImpl([
+            {
+                style: [
+                    "padding-top:".concat(top).concat(unit, ";"),
+                    "padding-bottom:".concat(bottom).concat(unit, ";"),
+                    "padding-left:".concat(start).concat(unit, ";"),
+                    "padding-right:".concat(end).concat(unit, ";")
+                ].join("")
+            }
+        ]));
     };
     ModifierImpl.prototype.paddingHorizontal = function (value) {
         return this.then(new ModifierImpl([
-            { style: "padding-left:".concat(value, "px;padding-right:").concat(value, "px;") },
+            { style: "padding-left:".concat(value, "px;padding-right:").concat(value, "px;") }
         ]));
     };
     ModifierImpl.prototype.paddingVertical = function (value) {
         return this.then(new ModifierImpl([
-            { style: "padding-top:".concat(value, "px;padding-bottom:").concat(value, "px;") },
+            { style: "padding-top:".concat(value, "px;padding-bottom:").concat(value, "px;") }
         ]));
     };
-    ModifierImpl.prototype.marginTop = function (value) {
-        return this.then(new ModifierImpl([{ style: "margin-top:".concat(value, "px;") }]));
+    ModifierImpl.prototype.marginTop = function (value, unit) {
+        if (unit === void 0) { unit = "px"; }
+        return this.then(new ModifierImpl([{ style: "margin-top:".concat(value).concat(unit, ";") }]));
     };
-    /* -------- background / border -------- */
     ModifierImpl.prototype.background = function (color) {
-        var resolved = typeof color === "string"
-            ? color
-            : resolveColor(color);
+        var resolved = typeof color === "string" ? color : resolveColor(color);
         return this.then(new ModifierImpl([{ style: "background:".concat(resolved, ";") }]));
     };
     ModifierImpl.prototype.border = function (width, color, shape) {
-        if (width <= 0)
+        if (width <= 0) {
             return this;
+        }
+        var borderRadius = shape ? "border-radius:".concat(shape.toCssBorderRadius(), ";") : "";
         return this.then(new ModifierImpl([
-            {
-                style: "\n            border:".concat(width, "px solid ").concat(color, ";\n            ").concat(shape ? "border-radius:".concat(shape.toCssBorderRadius(), ";") : "", "\n          "),
-            },
+            { style: "border:".concat(width, "px solid ").concat(color, ";").concat(borderRadius) }
         ]));
     };
     ModifierImpl.prototype.clip = function (shape) {
         return this.then(new ModifierImpl([
-            {
-                style: "\n            border-radius:".concat(shape.toCssBorderRadius(), ";\n            overflow:hidden;\n          "),
-            },
+            { style: "border-radius:".concat(shape.toCssBorderRadius(), ";overflow:hidden;") }
         ]));
     };
-    /* -------- posicionamiento semántico -------- */
-    ModifierImpl.prototype.align = function (alignment) {
+    ModifierImpl.prototype.offset = function (x, y) {
         return this.then(new ModifierImpl([
-            {
-                meta: { align: alignment }
-            }
+            { style: "transform:translate(".concat(x, "px, ").concat(y, "px);") }
         ]));
     };
-    /* -------- interacción -------- */
-    ModifierImpl.prototype.clickable = function () {
+    /**
+     * Sobreescribe la alineación de este hijo dentro de un contenedor (Box, Column, Row).
+     * Equivalente a Modifier.align() en Jetpack Compose.
+     */
+    ModifierImpl.prototype.align = function (alignment) {
+        return this.then(new ModifierImpl([{ meta: { align: alignment } }]));
+    };
+    ModifierImpl.prototype.clickable = function (_onClick) {
         return this.then(new ModifierImpl([
-            {
-                className: "compose-clickable",
-                style: "cursor:pointer;user-select:none;",
-            },
+            { className: "compose-clickable", style: "cursor:pointer;user-select:none;" }
         ]));
     };
-    /* -------- consumo interno -------- */
+    ModifierImpl.prototype.verticalScroll = function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return enabled
+            ? this.then(new ModifierImpl([{ style: "overflow-y:auto;" }]))
+            : this;
+    };
+    ModifierImpl.prototype.horizontalScroll = function (enabled) {
+        if (enabled === void 0) { enabled = true; }
+        return enabled
+            ? this.then(new ModifierImpl([{ style: "overflow-x:auto;" }]))
+            : this;
+    };
     ModifierImpl.prototype.toStyle = function () {
-        return this.entries.map(function (e) { var _a; return (_a = e.style) !== null && _a !== void 0 ? _a : ""; }).join("");
+        var meta = this.getMeta();
+        var alignStyle = "";
+        if (meta.align) {
+            var a = meta.align;
+            if (a._brand === 'BoxAlignment') {
+                alignStyle = resolveBoxPlaceSelf(a);
+            }
+            else if (a._brand === 'HorizontalAlignment') {
+                alignStyle = resolveColumnAlignSelf(a);
+            }
+            else if (a._brand === 'VerticalAlignment') {
+                alignStyle = resolveRowAlignSelf(a);
+            }
+        }
+        return this.entries.map(function (entry) { var _a; return (_a = entry.style) !== null && _a !== void 0 ? _a : ""; }).join("") + alignStyle;
     };
     ModifierImpl.prototype.toClass = function () {
-        return this.entries.map(function (e) { var _a; return (_a = e.className) !== null && _a !== void 0 ? _a : ""; }).join(" ");
+        return this.entries.map(function (entry) { var _a; return (_a = entry.className) !== null && _a !== void 0 ? _a : ""; }).filter(Boolean).join(" ");
     };
     ModifierImpl.prototype.getMeta = function () {
-        return this.entries.reduce(function (acc, e) {
-            var _a;
-            return (__assign(__assign({}, acc), ((_a = e.meta) !== null && _a !== void 0 ? _a : {})));
-        }, {});
+        return this.entries.reduce(function (acc, entry) { var _a; return (__assign(__assign({}, acc), ((_a = entry.meta) !== null && _a !== void 0 ? _a : {}))); }, {});
     };
     return ModifierImpl;
 }());

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

@@ -1,6 +1 @@
-export type AnimationSpec = {
-    base: string;
-    from: string;
-    to: string;
-    duration: number;
-};
+export type { AnimationSpec } from "../../components/motion/motion/AnimationSpec";

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

@@ -1,5 +1 @@
-export type ContentTransition = {
-    enter: string;
-    exit: string;
-    duration: number;
-};
+export type { ContentTransition } from "../../components/motion/motion/ContentTransition";

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

@@ -0,0 +1,2 @@
+import type { AnimationSpec } from "./AnimationSpec";
+export declare function applyAnimation(spec: AnimationSpec): string;

package/dist/core/motion/applyAnimation.js

@@ -0,0 +1,3 @@
+export function applyAnimation(spec) {
+    return [spec.base, spec.to].filter(Boolean).join(" ");
+}

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

@@ -1,4 +1 @@
-import type { ContentTransition } from "./ContentTransition";
-export declare function slideHorizontal(): ContentTransition;
-export declare function scaleFade(): ContentTransition;
-export declare function fade(duration?: number): ContentTransition;
+export { fade, scaleFade, slideHorizontal } from "../../components/motion/motion/contentTransitions";

package/dist/core/motion/contentTransitions.js

@@ -1,22 +1 @@
-export function slideHorizontal() {
-    return {
-        enter: "transition-transform duration-200 ease-out translate-x-0",
-        exit: "transition-transform duration-200 ease-in -translate-x-full",
-        duration: 200
-    };
-}
-export function scaleFade() {
-    return {
-        enter: "transition-all duration-220 ease-out opacity-100 scale-100",
-        exit: "transition-all duration-180 ease-in opacity-0 scale-95",
-        duration: 220
-    };
-}
-export function fade(duration) {
-    if (duration === void 0) { duration = 300; }
-    return {
-        enter: "animate-fade-in",
-        exit: "animate-fade-out",
-        duration: duration
-    };
-}
+export { fade, scaleFade, slideHorizontal } from "../../components/motion/motion/contentTransitions";

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

@@ -1,7 +1 @@
-import type { AnimationSpec } from "./AnimationSpec";
-export declare function fadeIn(duration?: number): AnimationSpec;
-export declare function fadeOut(duration?: number): AnimationSpec;
-export declare function scaleIn(duration?: number): AnimationSpec;
-export declare function scaleOut(duration?: number): AnimationSpec;
-export declare function slideIn(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;
-export declare function slideOut(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;
+export { fadeIn, fadeOut, scaleIn, scaleOut, slideIn, slideOut } from "../../components/motion/motion/transitions";

package/dist/core/motion/transitions.js

@@ -1,70 +1 @@
-var defaultEnter = 280;
-var defaultExit = 220;
-export function fadeIn(duration) {
-    if (duration === void 0) { duration = defaultEnter; }
-    return {
-        base: "transition-opacity duration-[".concat(duration, "ms] ease-out"),
-        from: "opacity-0",
-        to: "opacity-100",
-        duration: duration
-    };
-}
-export function fadeOut(duration) {
-    if (duration === void 0) { duration = defaultExit; }
-    return {
-        base: "transition-opacity duration-[".concat(duration, "ms] ease-in"),
-        from: "opacity-100",
-        to: "opacity-0",
-        duration: duration
-    };
-}
-export function scaleIn(duration) {
-    if (duration === void 0) { duration = defaultEnter; }
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-out"),
-        from: "opacity-0 scale-95",
-        to: "opacity-100 scale-100",
-        duration: duration
-    };
-}
-export function scaleOut(duration) {
-    if (duration === void 0) { duration = defaultExit; }
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-in"),
-        from: "opacity-100 scale-100",
-        to: "opacity-0 scale-95",
-        duration: duration
-    };
-}
-export function slideIn(duration, direction) {
-    if (duration === void 0) { duration = defaultEnter; }
-    if (direction === void 0) { direction = "right"; }
-    var fromMap = {
-        left: "-translate-x-4",
-        right: "translate-x-4",
-        up: "-translate-y-4",
-        down: "translate-y-4"
-    };
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-out"),
-        from: "opacity-0 ".concat(fromMap[direction]),
-        to: "opacity-100 translate-x-0 translate-y-0",
-        duration: duration
-    };
-}
-export function slideOut(duration, direction) {
-    if (duration === void 0) { duration = defaultExit; }
-    if (direction === void 0) { direction = "right"; }
-    var toMap = {
-        left: "-translate-x-4",
-        right: "translate-x-4",
-        up: "-translate-y-4",
-        down: "translate-y-4"
-    };
-    return {
-        base: "transition-all duration-[".concat(duration, "ms] ease-in"),
-        from: "opacity-100 translate-x-0 translate-y-0",
-        to: "opacity-0 ".concat(toMap[direction]),
-        duration: duration
-    };
-}
+export { fadeIn, fadeOut, scaleIn, scaleOut, slideIn, slideOut } from "../../components/motion/motion/transitions";