@danielito1996/compose-svelted 0.0.1

package/src/assets/raw/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

package/src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  let count: number = $state(0)
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button onclick={increment}>
+  count is {count}
+</button>

package/src/lib/components/AppRoot.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+
+    export let modifier: Modifier = Modifier.empty();
+</script>
+
+<div
+        style={`
+    width:100vw;
+    height:100vh;
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</div>

package/src/lib/components/ContentScale.ts

@@ -0,0 +1,12 @@
+export const ContentScale = {
+    Crop: "cover",
+    Fit: "contain",
+    FillBounds: "fill",
+    Inside: "contain",
+    FillWidth: "fillWidth",
+    FillHeight: "fillHeight",
+    None: "none",
+} as const;
+
+export type ContentScaleToken =
+    typeof ContentScale[keyof typeof ContentScale];

package/src/lib/components/Icon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+    import { resolveColor } from "../core/theme/resolve";
+    import {ColorScheme, type ColorToken} from "../core/theme/ColorScheme";
+
+    export let painter: string = "";
+
+    export let tint: ColorToken | string | undefined = undefined;
+
+    export let modifier: Modifier = Modifier.empty();
+
+    // Lógica simple y segura
+    $: backgroundColor = (() => {
+        if (!tint) return resolveColor(ColorScheme.OnBackground as ColorToken);
+
+        // Si es color directo (hex, rgb, hsl, named)
+        if (
+            typeof tint === "string" &&
+            (tint.startsWith("#") || tint.startsWith("rgb") || tint.startsWith("hsl") || tint === "transparent")
+        ) {
+            return tint;
+        }
+
+        // Si es token del tema (string key como "primary", "onSurface")
+        if (typeof tint === "string") {
+            return resolveColor(tint as ColorToken); // var(--md-sys-color-primary)
+        }
+
+        return "currentColor";
+    })();
+</script>
+
+<div
+        class="block"
+        style={`
+    -webkit-mask-image: url(${painter});
+    mask-image: url(${painter});
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-position: center;
+    mask-position: center;
+    background-color: ${backgroundColor};
+    ${modifier.toStyle()}
+  `}
+></div>

package/src/lib/components/Image.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+    import { ContentScale, type ContentScaleToken } from "./ContentScale";
+
+    export let painter: string = "";
+    export let contentScale: ContentScaleToken = ContentScale.Fit;
+    export let contentDescription: string = "";
+    export let modifier: Modifier = Modifier.empty();
+
+    $: isFillWidth = contentScale === "fillWidth";
+    $: isFillHeight = contentScale === "fillHeight";
+
+    $: objectFit =
+        isFillWidth || isFillHeight
+            ? "cover"
+            : contentScale;
+</script>
+
+<div class="relative overflow-hidden" style={modifier.toStyle()}>
+    <img
+            src={painter}
+            alt={contentDescription}
+            class="absolute inset-0"
+            style={`
+            width: ${isFillHeight ? "auto" : "100%"};
+            height: ${isFillWidth ? "auto" : "100%"};
+            object-fit: ${objectFit};
+            object-position: center;
+        `}
+    />
+</div>

package/src/lib/components/Spacer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+
+    /**
+     * Spacer: ocupa espacio vacío.
+     * Uso: <Spacer modifier={Modifier.height(16)} /> o width()
+     */
+    export let modifier: Modifier = Modifier.empty();
+</script>
+
+<div style={modifier.toStyle()}></div>

package/src/lib/components/Surface.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+    import { resolveColor } from "../core/theme/resolve";
+    import type { ColorToken } from "../core/theme/ColorScheme";
+
+    // ✅ default = no-op modifier
+    export let modifier: Modifier = Modifier.empty();
+    export let color: ColorToken = "surface";
+</script>
+
+<div
+        class="block"
+        style={`
+    background:${resolveColor(color)};
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</div>

package/src/lib/components/Text.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+    import { resolveTextStyle, resolveColor } from "../core/theme/resolve";
+    import type { TextStyleToken } from "../core/theme/TextStyle";
+    import { ColorScheme, type ColorToken } from "../core/theme/ColorScheme";
+
+    export let modifier: Modifier = Modifier.empty();
+    export let textStyle: TextStyleToken = "bodyMedium";
+
+    // Aceptamos token o string directo
+    export let color: ColorToken | string = "onSurface";  // string literal por defecto
+
+    // Usamos la misma lógica que Surface (que ya funciona)
+    $: resolvedColor = typeof color === "string" ? resolveColor(color as ColorToken) : color;
+</script>
+
+<p class="block m-0" style={`
+  ${resolveTextStyle(textStyle)};
+  color: ${resolvedColor};
+  ${modifier.toStyle()}
+`}>
+    <slot />
+</p>

package/src/lib/components/TonalButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Modifier } from "../core/modifier/Modifier";
+    import { resolveColor } from "../core/theme/resolve";
+    import { ColorScheme, type ColorToken } from "../core/theme/ColorScheme";
+
+    export let onClick: () => void = () => {};
+    export let modifier: Modifier = Modifier.empty();
+
+    // Defaults para TonalButton (secundario suave)
+    export let color: ColorToken | string = "secondaryContainer";
+    export let onColor: ColorToken | string = "onSecondaryContainer";
+
+    export let shape: "none" | "extraSmall" | "small" | "medium" | "large" = "large";
+    export let elevation: "level0" | "level1" | "level2" | "level3" | "level4" = "level0";  // Tonal suele ser sin elevación
+
+    $: backgroundColor = typeof color === "string" ? resolveColor(color as ColorToken) : color;
+    $: contentColor = typeof onColor === "string" ? resolveColor(onColor as ColorToken) : onColor;
+    $: borderRadius = `var(--md-sys-shape-${shape})`;
+    $: boxShadow = `var(--md-sys-elevation-${elevation})`;
+</script>
+
+<button
+        on:click={onClick}
+        class="border-0 cursor-pointer flex items-center justify-center gap-8 px-24 py-12 font-medium tracking-wider transition-all hover:opacity-90 active:scale-95"
+        style={`
+    background: ${backgroundColor};
+    color: ${contentColor};
+    border-radius: ${borderRadius};
+    box-shadow: ${boxShadow};
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</button>

package/src/lib/components/buttons/Button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { resolveColor } from "../../core/theme/resolve";
+    import { ColorScheme, type ColorToken } from "../../core/theme/ColorScheme";
+
+    export let onClick: () => void = () => {};
+    export let modifier: Modifier = Modifier.empty();
+
+    export let color: ColorToken | string = "primary";
+    export let onColor: ColorToken | string = "onPrimary";
+
+    export let shape: "none" | "extraSmall" | "small" | "medium" | "large" = "large";
+    export let elevation: "level0" | "level1" | "level2" | "level3" | "level4" = "level1";
+
+    $: backgroundColor = typeof color === "string" ? resolveColor(color as ColorToken) : color;
+    $: contentColor = typeof onColor === "string" ? resolveColor(onColor as ColorToken) : onColor;
+    $: borderRadius = `var(--md-sys-shape-${shape})`;
+    $: boxShadow = `var(--md-sys-elevation-${elevation})`;
+</script>
+
+<button
+        on:click={onClick}
+        class="border-0 cursor-pointer inline-flex items-center justify-center gap-8 font-medium tracking-wider transition-all hover:opacity-90 active:scale-95"
+        style={`
+    background: ${backgroundColor};
+    color: ${contentColor};
+    border-radius: ${borderRadius};
+    box-shadow: ${boxShadow};
+    padding: 10px 24px;  <!-- Padding moderado: vertical 10px, horizontal 24px (como Compose) -->
+    ${modifier.toStyle()}
+  `}
+>
+    <slot />
+</button>

package/src/lib/components/layouts/Alignment.ts

@@ -0,0 +1,37 @@
+export const 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",
+} as const;
+
+// Tipos separados para mayor seguridad
+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/src/lib/components/layouts/Arrangement.ts

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

package/src/lib/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/src/lib/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/src/lib/components/layouts/Row.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 { 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>

package/src/lib/components/textFields/BaseTextField.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { resolveColor, resolveTextStyle } from "../../core/theme/resolve";
+    import type { TextStyleToken } from "../../core/theme/TextStyle";
+    import { RoundedCornerShape } from "../../core/shapes/RoundedCornerShape";
+    import type { Shape } from "../../core/shapes/Shape";
+    import type { TextFieldColors } from "./TextFieldColors";
+    import { TextFieldDefaults } from "./TextFieldDefaults";
+
+    export let value = "";
+    export let onValueChange = (v: string) => {};
+    export let label = "";
+    export let placeholder = "";
+    export let singleLine = true;
+    export let textStyle: TextStyleToken = "bodyLarge";
+    export let modifier: Modifier = Modifier.empty();
+    export let shape: Shape = RoundedCornerShape(12);
+    export let colors: TextFieldColors = TextFieldDefaults.filledColors();
+
+
+    let focused = false;
+
+    const height = 56;
+
+    $: hasText = value.length > 0;
+    $: floating = focused || hasText;
+
+    // Colores Material Filled // OPACO
+    $: onSurface = resolveColor("onSurface");
+    $: onSurfaceVariant = resolveColor("onSurfaceVariant");
+    $: primary = resolveColor("primary");
+    $: fieldHeight = singleLine ? 56 : "auto";
+    $: containerColor = colors.container;
+    $: labelColor = floating ? colors.cursor : colors.label;
+    $: textColor = colors.text;
+    $: cursorColor = colors.cursor;
+    $: indicatorColor = focused
+        ? colors.indicatorFocused
+        : colors.indicatorUnfocused;
+    const minMultilineHeight = 88; // Material guideline
+
+    function handleInput(e: Event) {
+        const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+        onValueChange(target.value);
+    }
+</script>
+
+<div
+        class="relative overflow-hidden"
+        style={`
+        ${singleLine ? `height:56px;` : `min-height:88px;`}
+        background:${colors.container};
+        border-radius:${shape.toCssBorderRadius()};
+        border:1px solid transparent;
+        ${modifier.toStyle()}
+    `}
+>
+    <div
+            class="grid h-full items-center"
+            style="grid-template-columns:auto 1fr auto; padding:0 16px;"
+    >
+        <!-- Leading icon -->
+        <div class="w-24 flex justify-center">
+            <slot name="leadingIcon" />
+        </div>
+
+        <!-- Field -->
+        <div class="relative h-full flex flex-col justify-center">
+            {#if label}
+                <label
+                        class="absolute left-0 pointer-events-none transition-all duration-200"
+                        style={`
+                        top:${floating ? "6px" : "50%"};
+                        transform:translateY(${floating ? "0" : "-50%"});
+                        font-size:${floating ? "12px" : "16px"};
+                        color:${labelColor};
+                    `}
+                >
+                    {label}
+                </label>
+            {/if}
+
+            {#if singleLine}
+                <input
+                        type="text"
+                        bind:value
+                        on:input={handleInput}
+                        on:focus={() => focused = true}
+                        on:blur={() => focused = false}
+                        placeholder={focused ? placeholder : ""}
+                        class="w-full bg-transparent outline-none"
+                        style={`
+                        font:${resolveTextStyle(textStyle)};
+                        color:${textColor};
+                        caret-color:${cursorColor};
+                        padding-top:20px;
+                    `}
+                />
+            {:else}
+                <textarea
+                        bind:value
+                        on:input={handleInput}
+                        on:focus={() => focused = true}
+                        on:blur={() => focused = false}
+                        placeholder={focused ? placeholder : ""}
+                        rows="3"
+                        class="w-full bg-transparent outline-none resize-none"
+                        style={`
+                        font:${resolveTextStyle(textStyle)};
+                        color:${textColor};
+                        caret-color:${cursorColor};
+                        padding-top:20px;
+                        padding-bottom:12px;
+                    `}
+                ></textarea>
+            {/if}
+        </div>
+
+        <!-- Trailing icon -->
+        <div class="w-24 flex justify-center">
+            <slot name="trailingIcon" />
+        </div>
+    </div>
+
+    <!-- Indicator -->
+    <div
+            class="absolute bottom-0 left-0 right-0 h-1"
+            style={`background:${indicatorColor};`}
+    ></div>
+</div>

package/src/lib/components/textFields/OutlinedTextField.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import BaseTextField from "./BaseTextField.svelte";
+    import { TextFieldDefaults } from "./TextFieldDefaults";
+    import type { TextFieldColors } from "./TextFieldColors";
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { RoundedCornerShape } from "../../core/shapes/RoundedCornerShape";
+    import type { Shape } from "../../core/shapes/Shape";
+    import type { TextStyleToken } from "../../core/theme/TextStyle";
+
+    export let value = "";
+    export let onValueChange = (v: string) => {};
+    export let label = "";
+    export let placeholder = "";
+    export let singleLine = true;
+    export let textStyle: TextStyleToken = "bodyLarge";
+    export let modifier: Modifier = Modifier.empty();
+    export let shape: Shape = RoundedCornerShape(12);
+
+    // 🔒 OutlinedTextField SIEMPRE usa outlinedColors por defecto
+    export let colors: TextFieldColors = TextFieldDefaults.outlinedColors();
+
+    let focused = false;
+</script>
+
+<div
+        class="relative"
+        style={`
+        border:1px solid ${focused
+            ? colors.borderFocused
+            : colors.borderUnfocused};
+        border-radius:${shape.toCssBorderRadius()};
+        transition:border-color 200ms;
+        ${modifier.toStyle()}
+    `}
+>
+    <BaseTextField
+            value={value}
+            onValueChange={onValueChange}
+            label={label}
+            placeholder={placeholder}
+            singleLine={singleLine}
+            textStyle={textStyle}
+            modifier={Modifier.empty()}
+            shape={shape}
+            colors={colors}
+            on:focus={() => focused = true}
+            on:blur={() => focused = false}
+    >
+        <slot name="leadingIcon" slot="leadingIcon" />
+        <slot name="trailingIcon" slot="trailingIcon" />
+    </BaseTextField>
+</div>