@danielito1996/compose-svelted 0.2.7 → 0.2.8-alpha01

package/dist/components/layouts/Row.svelte

@@ -1,23 +1,52 @@
-<script lang="ts">
-    import { Modifier } from "../../core/modifier/Modifier";
-    import { Alignment } from "./Alignment";
-    import { Arrangement } from "./Arrangement";
-    import type { ArrangementValue } from "./Arrangement";
-    import type { VerticalAlignment } from "./Alignment";
-
-    export let modifier: Modifier = Modifier.empty();
-    export let verticalAlignment: VerticalAlignment = Alignment.Top;
-    export let horizontalArrangement: ArrangementValue = Arrangement.Start;
-</script>
-
-<div
-        class="flex flex-row"
-        style={`
-            align-items: ${verticalAlignment};
-            justify-content: ${horizontalArrangement.justifyContent};
-        ${horizontalArrangement.type === "spaced" ? `gap:${horizontalArrangement.gap}px;` : ""}
-        ${modifier.toStyle()}
-    `}
->
-    <slot />
-</div>
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { Alignment } from "./Alignment";
+    import { Arrangement } from "./Arrangement";
+    import type { ArrangementValue } from "./Arrangement";
+    import type { VerticalAlignment } from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+
+    /**
+     * Alineación en el eje cross (vertical) de todos los hijos.
+     * Equivalente a verticalAlignment en Jetpack Compose Row.
+     * @default Alignment.Top
+     */
+    export let verticalAlignment: VerticalAlignment = Alignment.Top;
+
+    /**
+     * Disposición en el eje main (horizontal).
+     * Equivalente a horizontalArrangement en Jetpack Compose Row.
+     * @default Arrangement.Start
+     */
+    export let horizontalArrangement: ArrangementValue = Arrangement.Start;
+
+    $: gapStyle = horizontalArrangement.type === 'spaced'
+        ? `gap:${horizontalArrangement.gap}px;`
+        : '';
+</script>
+
+<!--
+    Row — contenedor flex horizontal.
+
+    • align-items controla la alineación vertical de los hijos (cross-axis)
+    • justify-content controla la distribución horizontal (main-axis)
+    • Los hijos pueden sobreescribir su alineación individual via
+      Modifier.align() que inyecta align-self en su propio estilo
+
+    No hay wrapper interno: cada hijo gestiona su propio layout.
+    El scroll no está habilitado por defecto — usar Modifier.horizontalScroll()
+    o LazyRow para contenido que desborda.
+-->
+<div
+        style={`
+    display: flex;
+    flex-direction: row;
+    align-items: ${verticalAlignment.cssValue};
+    justify-content: ${horizontalArrangement.justifyContent};
+    ${gapStyle}
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</div>

package/dist/components/layouts/Row.svelte.d.ts

@@ -21,8 +21,16 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } : {});
 declare const Row: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     modifier?: Modifier;
-    verticalAlignment?: VerticalAlignment;
-    horizontalArrangement?: ArrangementValue;
+    /**
+         * Alineación en el eje cross (vertical) de todos los hijos.
+         * Equivalente a verticalAlignment en Jetpack Compose Row.
+         * @default Alignment.Top
+         */ verticalAlignment?: VerticalAlignment;
+    /**
+         * Disposición en el eje main (horizontal).
+         * Equivalente a horizontalArrangement en Jetpack Compose Row.
+         * @default Arrangement.Start
+         */ horizontalArrangement?: ArrangementValue;
 }, {
     default: {};
 }>, {

package/dist/components/layouts/Scaffold.svelte

@@ -1,73 +1,86 @@
-<script lang="ts">
-    import { Modifier } from "../../core/modifier/Modifier";
-
-    export let modifier: Modifier = Modifier.empty();
-
-    // Padding interno aplicado al content (como Scaffold paddingValues)
-    export let contentPadding: number = 16;
-
-    // Control del FAB
-    export let fabAlignment:
-        | "bottom-end"
-        | "bottom-center"
-        | "bottom-start" = "bottom-end";
-</script>
-
-<div
-        style={`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    ${modifier.toStyle()}
-  `}
->
-    <!-- Top Bar -->
-    <div>
-        <slot name="topBar" />
-    </div>
-
-    <!-- Content -->
-    <div
-            style={`
-      flex: 1;
-      position: relative;
-      padding: ${contentPadding}px;
-      overflow: auto;
-    `}
-    >
-        <slot />
-    </div>
-
-    <!-- Bottom Bar -->
-    <div>
-        <slot name="bottomBar" />
-    </div>
-
-    <!-- Floating Action Button -->
-    <div
-            style={`
-      position: absolute;
-      pointer-events: none;
-      inset: 0;
-    `}
-    >
-        <div
-                style={`
-        position: absolute;
-        pointer-events: auto;
-
-        ${
-          fabAlignment === "bottom-end"
-            ? "right: 16px; bottom: 16px;"
-            : fabAlignment === "bottom-center"
-            ? "left: 50%; transform: translateX(-50%); bottom: 16px;"
-            : "left: 16px; bottom: 16px;"
-        }
-      `}
-        >
-            <slot name="floatingActionButton" />
-        </div>
-    </div>
-</div>
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { resolveBoxPlaceSelf } from "./resolveAlignment";
+    import { Alignment } from "./Alignment";
+    import type { BoxAlignment } from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let contentPadding = 16;
+
+    /**
+     * Posición del FloatingActionButton dentro del Scaffold.
+     * @default Alignment.BottomEnd
+     */
+    export let fabAlignment: BoxAlignment = Alignment.BottomEnd;
+
+    $: fabPlaceSelf = resolveBoxPlaceSelf(fabAlignment);
+</script>
+
+<!--
+    Scaffold — estructura base de pantalla.
+
+    Slots:
+      topBar              → barra superior (TopAppBar)
+      default             → contenido principal (ahora es un flex container para permitir fillMaxSize)
+      bottomBar           → barra inferior (NavigationBar)
+      floatingActionButton → FAB posicionado por fabAlignment
+-->
+<div
+        class="cs-relative"
+        style={`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    ${modifier.toStyle()}
+  `}
+>
+    <!-- Top bar -->
+    <slot name="topBar" />
+
+    <!-- Content — ocupa el espacio restante -->
+    <!--
+        Se añade display: flex para que los hijos que usen fillMaxSize()
+        puedan expandirse correctamente basándose en el tamaño de este contenedor.
+    -->
+    <div
+            style={`
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      padding: ${contentPadding}px;
+      overflow: hidden;
+    `}
+    >
+        <slot />
+    </div>
+
+    <!-- Bottom bar -->
+    <slot name="bottomBar" />
+
+    <!-- FAB overlay -->
+    <div
+            style="
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: grid;
+      grid-template-areas: 'fab';
+    "
+    >
+        <div
+                style={`
+        grid-area: fab;
+        ${fabPlaceSelf}
+        pointer-events: auto;
+        margin: 16px;
+        width: fit-content;
+        height: fit-content;
+      `}
+        >
+            <slot name="floatingActionButton" />
+        </div>
+    </div>
+</div>

package/dist/components/layouts/Scaffold.svelte.d.ts

@@ -1,4 +1,5 @@
 import { Modifier } from "../../core/modifier/Modifier";
+import type { BoxAlignment } from "./Alignment";
 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;
@@ -20,7 +21,10 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 declare const Scaffold: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     modifier?: Modifier;
     contentPadding?: number;
-    fabAlignment?: "bottom-end" | "bottom-center" | "bottom-start";
+    /**
+         * Posición del FloatingActionButton dentro del Scaffold.
+         * @default Alignment.BottomEnd
+         */ fabAlignment?: BoxAlignment;
 }, {
     topBar: {};
     default: {};

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

@@ -0,0 +1,25 @@
+/**
+ * resolveAlignment.ts
+ *
+ * Funciones puras que traducen los tokens de Alignment a CSS inline.
+ * Trabajan con el nuevo shape de BoxAlignment (objeto con .horizontal / .vertical).
+ */
+import type { BoxAlignment, HorizontalAlignment, VerticalAlignment } from './Alignment';
+/**
+ * Resuelve el `place-items` de un Box stack container.
+ * CSS Grid: "align-items justify-items"
+ */
+export declare function resolveBoxPlaceItems(alignment: BoxAlignment): string;
+/**
+ * Resuelve el `place-self` de un hijo de Box que sobreescribe su alineación.
+ * Usado por Modifier.align() dentro de un Box.
+ */
+export declare function resolveBoxPlaceSelf(alignment: BoxAlignment): string;
+/**
+ * Resuelve `align-self` para un hijo de Column (eje horizontal).
+ */
+export declare function resolveColumnAlignSelf(alignment: HorizontalAlignment): string;
+/**
+ * Resuelve `align-self` para un hijo de Row (eje vertical).
+ */
+export declare function resolveRowAlignSelf(alignment: VerticalAlignment): string;

package/dist/components/layouts/resolveAlignment.js

@@ -0,0 +1,48 @@
+/**
+ * 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, ";");
+}
+/**
+ * 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

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

@@ -0,0 +1,8 @@
+import { resolveBoxPlaceSelf } from './resolveAlignment';
+/**
+ * @deprecated Usar resolveBoxPlaceSelf desde resolveAlignment.ts
+ * Mantenido por compatibilidad interna durante la transición.
+ */
+export function resolveFlexAlignSelf(alignment) {
+    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>