@danielito1996/compose-svelted 0.2.3 → 0.2.6

package/dist/components/buttons/OutlinedButton.svelte.d.ts

@@ -0,0 +1,26 @@
+export default OutlinedButton;
+type OutlinedButton = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const OutlinedButton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/buttons/OutlinedButtonWithIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default OutlinedButtonWithIcon;
+type OutlinedButtonWithIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const OutlinedButtonWithIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/buttons/OutlinedIconButton.svelte.d.ts

@@ -0,0 +1,26 @@
+export default OutlinedIconButton;
+type OutlinedIconButton = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const OutlinedIconButton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/buttons/TextButton.svelte.d.ts

@@ -0,0 +1,26 @@
+export default TextButton;
+type TextButton = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const TextButton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/cards/Card.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import Surface from "../Surface.svelte";
+    import { Modifier } from "../../core/modifier/Modifier";
+    import type { Shape } from "../../core/shapes/Shape";
+    import { RoundedCornerShape } from "../../core/shapes/RoundedCornerShape";
+
+    export let elevation: number | string = 1;
+    export let shape: Shape = RoundedCornerShape(16);
+    export let modifier: Modifier = Modifier.empty();
+
+    function elevationToShadow(value: number | string): string {
+        if (!value || value === 0) return "none";
+        const v = typeof value === "number" ? `${value}px` : value;
+        return `0 ${v} calc(${v} * 3) rgba(0,0,0,0.16)`;
+    }
+
+    $: shadow = elevationToShadow(elevation);
+</script>
+
+<Surface
+        modifier={modifier}
+>
+    <div style={`box-shadow: ${shadow}; border-radius: ${shape.toCssBorderRadius()};`}>
+        <slot />
+    </div>
+</Surface>

package/dist/components/cards/Card.svelte.d.ts

@@ -0,0 +1,33 @@
+import { Modifier } from "../../core/modifier/Modifier";
+import type { Shape } from "../../core/shapes/Shape";
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    elevation?: number | string;
+    shape?: Shape;
+    modifier?: Modifier;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Card = InstanceType<typeof Card>;
+export default Card;

package/dist/components/cards/OutlinedCard.svelte.d.ts

@@ -0,0 +1,26 @@
+export default OutlinedCard;
+type OutlinedCard = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const OutlinedCard: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/custom/CodeBlock.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { ColorScheme } from "../../core/theme/ColorScheme";
+
+    export let language: string | undefined = undefined;
+    export let modifier: Modifier = Modifier.empty();
+
+    // Si false → scroll horizontal
+    export let wrap: boolean = false;
+</script>
+
+<div
+        style={modifier.toStyle()}
+        class="relative"
+>
+    {#if language}
+        <div
+                class="absolute top-2 right-3 text-xs opacity-60 select-none"
+                style="color: var(--md-sys-color-onSurfaceVariant)"
+        >
+            {language}
+        </div>
+    {/if}
+
+    <pre
+            class={`inline-block max-w-full rounded-xl overflow-x-auto ${
+        wrap ? "whitespace-pre-wrap" : "whitespace-pre"
+    }`}
+            style={`
+        margin: 2;
+        background: var(--md-sys-color-surfaceVariant);
+        color: var(--md-sys-color-onSurface);
+        padding: 12px 16px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 0.85rem;
+        line-height: 1.35;
+    `}
+    >
+<code><slot /></code>
+</pre>
+</div>

package/dist/components/custom/CodeBlock.svelte.d.ts

@@ -0,0 +1,32 @@
+import { Modifier } from "../../core/modifier/Modifier";
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CodeBlock: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    language?: string | undefined;
+    modifier?: Modifier;
+    wrap?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type CodeBlock = InstanceType<typeof CodeBlock>;
+export default CodeBlock;

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

@@ -0,0 +1,20 @@
+export declare const Alignment: {
+    readonly Start: "flex-start";
+    readonly CenterHorizontally: "center";
+    readonly End: "flex-end";
+    readonly Top: "flex-start";
+    readonly CenterVertically: "center";
+    readonly Bottom: "flex-end";
+    readonly TopStart: "flex-start flex-start";
+    readonly TopCenter: "center flex-start";
+    readonly TopEnd: "flex-end flex-start";
+    readonly CenterStart: "flex-start center";
+    readonly Center: "center center";
+    readonly CenterEnd: "flex-end center";
+    readonly BottomStart: "flex-start flex-end";
+    readonly BottomCenter: "center flex-end";
+    readonly BottomEnd: "flex-end flex-end";
+};
+export type HorizontalAlignment = typeof Alignment.Start | typeof Alignment.CenterHorizontally | typeof Alignment.End;
+export type VerticalAlignment = typeof Alignment.Top | typeof Alignment.CenterVertically | typeof Alignment.Bottom;
+export type BoxAlignment = typeof Alignment[keyof typeof Alignment];

package/dist/components/layouts/Alignment.js

@@ -0,0 +1,20 @@
+export var Alignment = {
+    // Horizontal only (para Column)
+    Start: "flex-start",
+    CenterHorizontally: "center",
+    End: "flex-end",
+    // Vertical only (para Row)
+    Top: "flex-start",
+    CenterVertically: "center",
+    Bottom: "flex-end",
+    // Compuestos (para Box y layouts avanzados)
+    TopStart: "flex-start flex-start",
+    TopCenter: "center flex-start",
+    TopEnd: "flex-end flex-start",
+    CenterStart: "flex-start center",
+    Center: "center center",
+    CenterEnd: "flex-end center",
+    BottomStart: "flex-start flex-end",
+    BottomCenter: "center flex-end",
+    BottomEnd: "flex-end flex-end",
+};

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

@@ -0,0 +1,23 @@
+/**
+ * Arrangement — eje principal (main axis)
+ * Fiel a Jetpack Compose
+ */
+export type ArrangementValue = {
+    type: "static";
+    justifyContent: string;
+} | {
+    type: "spaced";
+    gap: number;
+    justifyContent: string;
+};
+export declare const Arrangement: {
+    readonly Start: ArrangementValue;
+    readonly Center: ArrangementValue;
+    readonly End: ArrangementValue;
+    readonly Bottom: ArrangementValue;
+    readonly Top: ArrangementValue;
+    readonly SpaceBetween: ArrangementValue;
+    readonly SpaceAround: ArrangementValue;
+    readonly SpaceEvenly: ArrangementValue;
+    readonly spacedBy: (value: number) => ArrangementValue;
+};

package/dist/components/layouts/Arrangement.js

@@ -0,0 +1,46 @@
+/**
+ * Arrangement — eje principal (main axis)
+ * Fiel a Jetpack Compose
+ */
+export var Arrangement = {
+    // --- simples ---
+    Start: {
+        type: "static",
+        justifyContent: "flex-start",
+    },
+    Center: {
+        type: "static",
+        justifyContent: "center",
+    },
+    End: {
+        type: "static",
+        justifyContent: "flex-end",
+    },
+    Bottom: {
+        type: "static",
+        justifyContent: "flex-end"
+    },
+    Top: {
+        type: "static",
+        justifyContent: "flex-start"
+    },
+    SpaceBetween: {
+        type: "static",
+        justifyContent: "space-between",
+    },
+    SpaceAround: {
+        type: "static",
+        justifyContent: "space-around",
+    },
+    SpaceEvenly: {
+        type: "static",
+        justifyContent: "space-evenly",
+    },
+    spacedBy: function (value) {
+        return {
+            type: "spaced",
+            gap: value,
+            justifyContent: "flex-start",
+        };
+    },
+};

package/dist/components/layouts/Box.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import type {BoxAlignment} from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let contentAlignment: BoxAlignment | undefined = undefined;
+
+    $: contentStyle = contentAlignment ? alignmentToFlexStyle(contentAlignment) : "";
+
+    function alignmentToFlexStyle(alignment: BoxAlignment): string {
+        const parts = alignment.split(" ");
+        const horiz = parts[0] === "flex-start" ? "flex-start" : parts[0] === "flex-end" ? "flex-end" : "center";
+        const vert = parts[1] || parts[0];
+        const v = vert === "flex-start" ? "flex-start" : vert === "flex-end" ? "flex-end" : "center";
+
+        return `display:flex; align-items:${v}; justify-content:${horiz};`;
+    }
+</script>
+
+<div
+        class="relative"
+        style={`${contentStyle} ${modifier.toStyle()}`}
+>
+    <slot />
+</div>

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

@@ -0,0 +1,32 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Box: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    modifier?: Modifier;
+    contentAlignment?: BoxAlignment | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Box = InstanceType<typeof Box>;
+export default Box;

package/dist/components/layouts/Column.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { Alignment } from "./Alignment";
+    import { Arrangement } from "./Arrangement";
+    import type { ArrangementValue } from "./Arrangement";
+    import type { HorizontalAlignment } from "./Alignment";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let horizontalAlignment: HorizontalAlignment = Alignment.Start;
+    export let verticalArrangement: ArrangementValue = Arrangement.Start;
+</script>
+
+<div
+        class="flex flex-col"
+        style={`
+            align-items: ${horizontalAlignment};
+            justify-content: ${verticalArrangement.justifyContent};
+            ${verticalArrangement.type === "spaced" ? `gap:${verticalArrangement.gap}px;` : ""}
+            ${modifier.toStyle()}
+        `}
+>
+    <slot />
+</div>

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

@@ -0,0 +1,34 @@
+import { Modifier } from "../../core/modifier/Modifier";
+import type { ArrangementValue } from "./Arrangement";
+import type { HorizontalAlignment } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Column: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    modifier?: Modifier;
+    horizontalAlignment?: HorizontalAlignment;
+    verticalArrangement?: ArrangementValue;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Column = InstanceType<typeof Column>;
+export default Column;

package/dist/components/layouts/LazyColumn.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { onMount, tick } from "svelte";
+    import { Alignment } from "./Alignment";
+    import { Arrangement } from "./Arrangement";
+    import type { ArrangementValue } from "./Arrangement";
+    import type { HorizontalAlignment } from "./Alignment";
+
+    export let items: any[] = [];
+    export let modifier: Modifier = Modifier.empty();
+
+    export let horizontalAlignment: HorizontalAlignment = Alignment.Start;
+    export let verticalArrangement: ArrangementValue = Arrangement.Start;
+
+    let container: HTMLDivElement;
+    let probeItem: HTMLDivElement | null = null;
+
+    let scrollTop = 0;
+    let viewportHeight = 0;
+
+    let estimatedItemHeight = 56; // fallback Material
+    let measured = false;
+
+    const overscan = 3;
+
+    onMount(() => {
+        viewportHeight = container.clientHeight;
+    });
+
+    async function measure() {
+        await tick();
+        if (probeItem) {
+            estimatedItemHeight = probeItem.offsetHeight;
+            measured = true;
+        }
+    }
+
+    $: if (probeItem && !measured) {
+        measure();
+    }
+
+    function onScroll(e: Event) {
+        scrollTop = (e.target as HTMLDivElement).scrollTop;
+    }
+
+    // --- Virtualization math ---
+    $: totalHeight = items.length * estimatedItemHeight;
+
+    $: startIndex = Math.max(
+        0,
+        Math.floor(scrollTop / estimatedItemHeight) - overscan
+    );
+
+    $: visibleCount =
+        Math.ceil(viewportHeight / estimatedItemHeight) + overscan * 2;
+
+    $: endIndex = Math.min(items.length, startIndex + visibleCount);
+
+    $: visibleItems = items.slice(startIndex, endIndex);
+
+    // --- Arrangement ---
+    function resolveGap(arrangement: ArrangementValue): string {
+        return arrangement.type === "spaced"
+            ? `${arrangement.gap}px`
+            : "0px";
+    }
+</script>
+
+<div
+        bind:this={container}
+        on:scroll={onScroll}
+        style={`
+    overflow-y:auto;
+    position:relative;
+    ${modifier.toStyle()}
+  `}
+>
+    <!-- Total scroll space -->
+    <div style={`height:${totalHeight}px; position:relative;`}>
+        <!-- Visible window -->
+        <div
+                style={`
+        position:absolute;
+        top:${startIndex * estimatedItemHeight}px;
+        left:0;
+        right:0;
+
+        display:flex;
+        flex-direction:column;
+        align-items:${horizontalAlignment};
+        gap:${resolveGap(verticalArrangement)};
+      `}
+        >
+            {#each visibleItems as item, i}
+                {#if i === 0 && !measured}
+                    <div bind:this={probeItem}>
+                        <slot {item} />
+                    </div>
+                {:else}
+                    <div>
+                        <slot {item} />
+                    </div>
+                {/if}
+            {/each}
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,39 @@
+import { Modifier } from "../../core/modifier/Modifier";
+import type { ArrangementValue } from "./Arrangement";
+import type { HorizontalAlignment } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const LazyColumn: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    items?: any[];
+    modifier?: Modifier;
+    horizontalAlignment?: HorizontalAlignment;
+    verticalArrangement?: ArrangementValue;
+}, {
+    default: {
+        item: any;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: any;
+    };
+}, {}, string>;
+type LazyColumn = InstanceType<typeof LazyColumn>;
+export default LazyColumn;