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

package/dist/components/layouts/resolveAlignment.js

@@ -1,44 +1,48 @@
-/* =========================
- * Box (position:absolute)
- * ========================= */
-export function resolveBoxAlignment(alignment) {
-    var _a;
-    if (!alignment)
-        return "";
-    var parts = alignment.split(" ");
-    var h = parts[0];
-    var v = (_a = parts[1]) !== null && _a !== void 0 ? _a : parts[0];
-    var style = "position:absolute;";
-    // Vertical
-    if (v === "flex-start")
-        style += "top:0;";
-    else if (v === "flex-end")
-        style += "bottom:0;";
-    else
-        style += "top:50%;";
-    // Horizontal
-    if (h === "flex-start")
-        style += "left:0;";
-    else if (h === "flex-end")
-        style += "right:0;";
-    else
-        style += "left:50%;";
-    if (h === "center" || v === "center") {
-        style += "transform:translate(-50%,-50%);";
-    }
-    return style;
+/**
+ * resolveAlignment.ts
+ *
+ * Funciones puras que traducen los tokens de Alignment a CSS inline.
+ * Trabajan con el nuevo shape de BoxAlignment (objeto con .horizontal / .vertical).
+ */
+// ─── Box (CSS Grid stacking) ──────────────────────────────────────────────────
+/**
+ * Resuelve el `place-items` de un Box stack container.
+ * CSS Grid: "align-items justify-items"
+ */
+export function resolveBoxPlaceItems(alignment) {
+    // grid place-items = "<vertical> <horizontal>"
+    var v = resolveCssAlign(alignment.vertical);
+    var h = resolveCssAlign(alignment.horizontal);
+    return "".concat(v, " ").concat(h);
+}
+/**
+ * Resuelve el `place-self` de un hijo de Box que sobreescribe su alineación.
+ * Usado por Modifier.align() dentro de un Box.
+ */
+export function resolveBoxPlaceSelf(alignment) {
+    var v = resolveCssAlign(alignment.vertical);
+    var h = resolveCssAlign(alignment.horizontal);
+    return "place-self:".concat(v, " ").concat(h, ";");
+}
+// ─── Flex (Column / Row cross-axis align-self) ────────────────────────────────
+/**
+ * Resuelve `align-self` para un hijo de Column (eje horizontal).
+ */
+export function resolveColumnAlignSelf(alignment) {
+    return "align-self:".concat(alignment.cssValue, ";");
 }
-/* =========================
- * Flex (Row / Column)
- * ========================= */
-export function resolveFlexAlignment(mod) {
-    var align = mod.getMeta().align;
-    if (!align)
-        return "";
-    var horizontal = align.split(" ")[0];
-    return "\n    align-self:".concat(horizontal === "center"
-        ? "center"
-        : horizontal === "flex-end"
-            ? "flex-end"
-            : "flex-start", ";\n  ");
+/**
+ * Resuelve `align-self` para un hijo de Row (eje vertical).
+ */
+export function resolveRowAlignSelf(alignment) {
+    return "align-self:".concat(alignment.cssValue, ";");
+}
+// ─── Internos ─────────────────────────────────────────────────────────────────
+/** Normaliza los valores CSS de flex a los equivalentes de grid */
+function resolveCssAlign(value) {
+    switch (value) {
+        case 'flex-start': return 'start';
+        case 'flex-end': return 'end';
+        default: return 'center';
+    }
 }

package/dist/components/layouts/resolveFlexAlignSelf.d.ts

@@ -1,2 +1,6 @@
-import { BoxAlignment } from "./Alignment";
+import type { BoxAlignment } from './Alignment';
+/**
+ * @deprecated Usar resolveBoxPlaceSelf desde resolveAlignment.ts
+ * Mantenido por compatibilidad interna durante la transición.
+ */
 export declare function resolveFlexAlignSelf(alignment: BoxAlignment): string;

package/dist/components/layouts/resolveFlexAlignSelf.js

@@ -1,10 +1,8 @@
+import { resolveBoxPlaceSelf } from './resolveAlignment';
+/**
+ * @deprecated Usar resolveBoxPlaceSelf desde resolveAlignment.ts
+ * Mantenido por compatibilidad interna durante la transición.
+ */
 export function resolveFlexAlignSelf(alignment) {
-    var _a;
-    var parts = alignment.split(" ");
-    var vertical = (_a = parts[1]) !== null && _a !== void 0 ? _a : parts[0];
-    if (vertical === "flex-start")
-        return "align-self:flex-start;";
-    if (vertical === "flex-end")
-        return "align-self:flex-end;";
-    return "align-self:center;";
+    return resolveBoxPlaceSelf(alignment);
 }

package/dist/components/motion/motion/AnimatedContent.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { ContentTransition } from "../../../core/motion/ContentTransition";
+    import { fade } from "../../../core/motion/contentTransitions";
+
+    export let targetState: any;
+    export let transition: ContentTransition = fade();
+
+    let currentKey = targetState;
+    let exiting = false;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    $: if (targetState !== currentKey) {
+        exiting = true;
+        if (timeoutId) clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            currentKey = targetState;
+            exiting = false;
+            timeoutId = null;
+        }, transition.duration);
+    }
+</script>
+
+<!--
+    Contenedor de transición — ocupa todo el espacio del padre.
+    Se añade display:flex y flex-direction:column para asegurar que los hijos
+    con height:100% o flex:1 se expandan correctamente.
+-->
+<div style="position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;">
+    <div
+            style={`
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      transition: opacity ${transition.duration}ms ease, transform ${transition.duration}ms ease;
+      ${exiting ? transition.exit : transition.enter}
+    `}
+    >
+        <slot />
+    </div>
+</div>

package/dist/components/motion/{AnimatedContent.svelte.d.ts → motion/AnimatedContent.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ContentTransition } from "../../core/motion/ContentTransition";
+import type { ContentTransition } from "../../../core/motion/ContentTransition";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/motion/{AnimatedVisibility.svelte → motion/AnimatedVisibility.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import type { AnimationSpec } from "../../core/motion/AnimationSpec";
-    import { fadeIn, fadeOut } from "../../core/motion/transitions";
+    import type { AnimationSpec } from "../../../core/motion/AnimationSpec";
+    import { fadeIn, fadeOut } from "../../../core/motion/transitions";
 
     export let visible: boolean;
 
@@ -56,4 +56,4 @@
     <div class={classes}>
         <slot />
     </div>
-{/if}
+{/if}

package/dist/components/motion/{AnimatedVisibility.svelte.d.ts → motion/AnimatedVisibility.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { AnimationSpec } from "../../core/motion/AnimationSpec";
+import type { AnimationSpec } from "../../../core/motion/AnimationSpec";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

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

package/dist/components/motion/motion/AnimationSpec.js

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

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

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

package/dist/components/motion/motion/ContentTransition.js

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

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

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

package/dist/components/motion/motion/contentTransitions.js

@@ -0,0 +1,22 @@
+export function slideHorizontal() {
+    return {
+        enter: "transform: translateX(0); opacity: 1;",
+        exit: "transform: translateX(-100%); opacity: 0;",
+        duration: 300
+    };
+}
+export function scaleFade() {
+    return {
+        enter: "transform: scale(1); opacity: 1;",
+        exit: "transform: scale(0.95); opacity: 0;",
+        duration: 220
+    };
+}
+export function fade(duration) {
+    if (duration === void 0) { duration = 300; }
+    return {
+        enter: "opacity: 1;",
+        exit: "opacity: 0;",
+        duration: duration
+    };
+}

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

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

package/dist/components/motion/motion/transitions.js

@@ -0,0 +1,70 @@
+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
+    };
+}

package/dist/components/textFields/BaseTextField.svelte

@@ -13,7 +13,8 @@
     export let onValueChange = (_value: string) => {};
     export let label = "";
     export let placeholder = "";
-    export let supportingText: string | undefined;
+    export let supportingText: string | undefined;
+    export let floatingLabelScale = 0.72;
 
     export let singleLine = true;
     export let textStyle: TextStyleToken = "bodyLarge";
@@ -111,7 +112,7 @@
               top:${floating ? "2px" : "50%"};
               transform:
                 translateY(${floating ? "0" : "-50%"})
-                scale(${floating ? 0.72 : 1});
+                scale(${floating ? floatingLabelScale : 1});
               color:${labelColor};
             `}
                     >
@@ -185,4 +186,4 @@
             {supportingText}
         </div>
     {/if}
-</div>
+</div>

package/dist/components/textFields/BaseTextField.svelte.d.ts

@@ -22,6 +22,7 @@ declare const BaseTextField: $$__sveltets_2_IsomorphicComponent<{
     label?: string;
     placeholder?: string;
     supportingText: string | undefined;
+    floatingLabelScale?: number;
     singleLine?: boolean;
     textStyle?: TextStyleToken;
     modifier?: Modifier;

package/dist/components/textFields/OutlinedTextField.svelte

@@ -40,12 +40,13 @@
         ${modifier.toStyle()}
     `}
 >
-    <BaseTextField
-            value={value}
-            supportingText={supportingText}
-            density={density}
-            readOnly={readOnly}
-            enabled={enabled}
+    <BaseTextField
+            value={value}
+            supportingText={supportingText}
+            floatingLabelScale={floatingLabelScale}
+            density={density}
+            readOnly={readOnly}
+            enabled={enabled}
             isError={isError}
             onValueChange={onValueChange}
             label={label}
@@ -61,4 +62,4 @@
         <slot name="leadingIcon" slot="leadingIcon" />
         <slot name="trailingIcon" slot="trailingIcon" />
     </BaseTextField>
-</div>
+</div>

package/dist/components/textFields/TextField.svelte

@@ -27,13 +27,13 @@
     export let colors: TextFieldColors = TextFieldDefaults.filledColors();
 </script>
 
-<BaseTextField
-        value={value}
-        onValueChange={onValueChange}
-        supportingText={supportingText}
-        enabled={enabled}
-        isError={isError}
-        floatingLabelScale={floatingLabelScale}
+<BaseTextField
+        value={value}
+        onValueChange={onValueChange}
+        supportingText={supportingText}
+        enabled={enabled}
+        isError={isError}
+        floatingLabelScale={floatingLabelScale}
         label={label}
         density={density}
         readOnly={readOnly}
@@ -46,4 +46,4 @@
 >
     <slot name="leadingIcon" slot="leadingIcon" />
     <slot name="trailingIcon" slot="trailingIcon" />
-</BaseTextField>
+</BaseTextField>

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

@@ -1,195 +1,35 @@
 import { ModifierImpl } from "./ModifierImpl";
-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";
-/**
- * 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)
- * ```
- */
+type PaddingValue = number | {
+    top?: number;
+    bottom?: number;
+    start?: number;
+    end?: number;
+};
 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 padding: (valueOrParams?: PaddingValue, unit?: string) => ModifierImpl;
     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 paddingVertical: (value: number) => ModifierImpl;
     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 align: (alignment: BoxAlignment | HorizontalAlignment | VerticalAlignment) => ModifierImpl;
     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;
+export {};