@danielito1996/compose-svelted 0.0.1

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

@@ -0,0 +1,36 @@
+<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);
+
+    // 🔒 FilledTextField SIEMPRE usa filledColors por defecto
+    export let colors: TextFieldColors = TextFieldDefaults.filledColors();
+</script>
+
+<BaseTextField
+        value={value}
+        onValueChange={onValueChange}
+        label={label}
+        placeholder={placeholder}
+        singleLine={singleLine}
+        textStyle={textStyle}
+        modifier={modifier}
+        shape={shape}
+        colors={colors}
+>
+    <slot name="leadingIcon" slot="leadingIcon" />
+    <slot name="trailingIcon" slot="trailingIcon" />
+</BaseTextField>

package/src/lib/components/textFields/TextFieldColors.ts

@@ -0,0 +1,11 @@
+export interface TextFieldColors {
+    container: string;
+    label: string;
+    placeholder: string;
+    text: string;
+    cursor: string;
+    indicatorFocused: string;
+    indicatorUnfocused: string;
+    borderFocused?: string;
+    borderUnfocused?: string;
+}

package/src/lib/components/textFields/TextFieldDefaults.ts

@@ -0,0 +1,48 @@
+import { resolveColor } from "../../core/theme/resolve";
+import type { TextFieldColors } from "./TextFieldColors";
+
+export const TextFieldDefaults = {
+    /**
+     * FilledTextField (Material default)
+     */
+    filledColors(): TextFieldColors {
+        return {
+            // Container
+            container: resolveColor("surfaceVariant"),
+
+            // Content
+            label: resolveColor("onSurfaceVariant"),
+            placeholder: resolveColor("onSurfaceVariant"),
+            text: resolveColor("onSurface"),
+            cursor: resolveColor("primary"),
+
+            // Indicator (bottom line)
+            indicatorFocused: resolveColor("primary"),
+            indicatorUnfocused: resolveColor("onSurfaceVariant"),
+        };
+    },
+
+    /**
+     * OutlinedTextField
+     */
+    outlinedColors(): TextFieldColors {
+        return {
+            // Container
+            container: "transparent",
+
+            // Content
+            label: resolveColor("onSurfaceVariant"),
+            placeholder: resolveColor("onSurfaceVariant"),
+            text: resolveColor("onSurface"),
+            cursor: resolveColor("primary"),
+
+            // Indicator (used only if needed)
+            indicatorFocused: resolveColor("primary"),
+            indicatorUnfocused: resolveColor("outline"),
+
+            // Border (outlined specific)
+            borderFocused: resolveColor("primary"),
+            borderUnfocused: resolveColor("outline"),
+        };
+    }
+};

package/src/lib/core/helpers/painterResource.ts

@@ -0,0 +1,26 @@
+/**
+ * painterResource - como en Jetpack Compose
+ * Carga un recurso local desde src/lib/assets/
+ * Soporta SVG (?raw para string) e imágenes (?url para URL)
+ */
+export  const Res = {
+    raw(fileName: string): string {
+        return "raw/"+fileName;
+    },
+
+    image(fileName: string): string {
+        return "img/"+fileName;
+    },
+
+    values(fileName: string): string {
+        return "values/"+fileName;
+    },
+
+    fonts(fileName: string): string {
+        return "fonts/"+fileName;
+    }
+} as const;
+
+export function painterResource(resourceName: string): string {
+    return "/src/assets/"+resourceName;
+}

package/src/lib/core/modifier/Modifier.ts

@@ -0,0 +1,259 @@
+import { ModifierImpl } from "./ModifierImpl";
+import type {BoxAlignment} 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)
+ * ```
+ */
+export const Modifier = {
+    /**
+     * Returns an empty Modifier with no effects.
+     *
+     * Useful as a default value or starting point.
+     */
+    empty(): ModifierImpl {
+        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(
+        valueOrParams: number | { top?: number; bottom?: number; start?: number; end?: number } = 0,
+        unit: string = 'px'
+    ): ModifierImpl {
+        return new ModifierImpl().padding(valueOrParams,unit);
+    },
+
+
+    /**
+     * Adds horizontal padding (left and right).
+     */
+    paddingHorizontal(value: number): ModifierImpl {
+        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))
+     * ```
+     */
+    border(width: number, color: string, shape?: Shape): ModifierImpl {
+        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(onClick: () => void): ModifierImpl {
+        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(x: number, y: number): ModifierImpl {
+        return new ModifierImpl().offset(x, y);
+    },
+
+    /**
+     * Enables vertical scrolling for the component.
+     *
+     * Useful for Column or large content containers.
+     */
+    verticalScroll(enabled: boolean = true): ModifierImpl {
+        return new ModifierImpl().verticalScroll(enabled);
+    },
+
+    /**
+     * Enables horizontal scrolling for the component.
+     */
+    horizontalScroll(enabled: boolean = true): ModifierImpl {
+        return new ModifierImpl().horizontalScroll(enabled);
+    },
+
+    /**
+     * Adds vertical padding (top and bottom).
+     */
+    paddingVertical(value: number): ModifierImpl {
+        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(alignment: BoxAlignment): ModifierImpl {
+        return new ModifierImpl().align(alignment);
+    },
+
+    /**
+     * Makes the component fill the maximum available width.
+     */
+    fillMaxWidth(): ModifierImpl {
+        return new ModifierImpl().fillMaxWidth();
+    },
+
+    /**
+     * Makes the component fill the maximum available height.
+     */
+    fillMaxHeight(): ModifierImpl {
+        return new ModifierImpl().fillMaxHeight();
+    },
+
+    /**
+     * Makes the component fill both width and height.
+     */
+    fillMaxSize(): ModifierImpl {
+        return new ModifierImpl().fillMaxSize();
+    },
+
+    /**
+     * Sets a fixed height for the component.
+     *
+     * Accepts either a number (px by default) or a CSS size string.
+     */
+    height(value: number | string, unit = 'px'): ModifierImpl {
+        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(value: number | string, unit = 'px'): ModifierImpl {
+        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(color: ColorToken | string): ModifierImpl {
+        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(weight: number, fill: boolean = true): ModifierImpl {
+        return new ModifierImpl().weight(weight, fill);
+    },
+
+    /**
+     * Assigns weight without forcing fill behavior.
+     */
+    weightNoFill(weight: number): ModifierImpl {
+        return this.weight(weight, false);
+    },
+
+    /**
+     * Adds top margin to the component.
+     */
+    marginTop(value: number, unit = 'px'): ModifierImpl {
+        return new ModifierImpl().marginTop(value, unit);
+    },
+
+    /**
+     * Clips the component using the provided Shape.
+     *
+     * Example:
+     * ```
+     * Modifier.clip(RoundedCornerShape(16))
+     * ```
+     */
+    clip(shape: Shape): ModifierImpl {
+        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(value: number | string, unit: string = "px"): ModifierImpl {
+        return new ModifierImpl().size(value, unit);
+    }
+} as const;
+
+// Tipo público
+export type Modifier = ModifierImpl;

package/src/lib/core/modifier/ModifierImpl.ts

@@ -0,0 +1,275 @@
+import type {BoxAlignment} from "../../components/layouts/Alignment";
+import type {Shape} from "../shapes/Shape";
+import type {ColorToken} from "../theme/ColorScheme";
+import {resolveColor} from "../theme/resolve";
+
+export type ModifierEntry = {
+    className?: string;
+    style?: string;
+};
+
+export class ModifierImpl {
+    private readonly entries: ModifierEntry[];
+
+    constructor(entries: ModifierEntry[] = []) {
+        this.entries = entries;
+    }
+
+    then(other: ModifierImpl): ModifierImpl {
+        return new ModifierImpl([...this.entries, ...other.entries]);
+    }
+
+    paddingHorizontal(value: number): ModifierImpl {
+        return this.then(
+            new ModifierImpl([
+                { style: `padding-left:${value}px;padding-right:${value}px;` },
+            ])
+        );
+    }
+
+    verticalScroll(enabled: boolean = true): ModifierImpl {
+        return this.then(
+            new ModifierImpl([{
+                style: enabled
+                    ? `overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;`
+                    : ''
+            }])
+        );
+    }
+
+    horizontalScroll(enabled: boolean = true): ModifierImpl {
+        return this.then(
+            new ModifierImpl([{
+                style: enabled
+                    ? `overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;`
+                    : ''
+            }])
+        );
+    }
+
+    paddingVertical(value: number): ModifierImpl {
+        return this.then(
+            new ModifierImpl([
+                { style: `padding-top:${value}px;padding-bottom:${value}px;` },
+            ])
+        );
+    }
+
+    fillMaxWidth(): ModifierImpl {
+        return this.then(
+            new ModifierImpl([{ style: `width:100%;` }])
+        );
+    }
+
+    fillMaxHeight(): ModifierImpl {
+        return this.then(
+            new ModifierImpl([{ style: `height:100%;` }])
+        );
+    }
+
+    fillMaxSize(): ModifierImpl {
+        return this.then(
+            new ModifierImpl([{ style: `width:100%;height:100%;` }])
+        );
+    }
+
+    background(color: ColorToken | string): ModifierImpl {
+        let resolved: string;
+
+        if (
+            typeof color === "string" &&
+            (
+                color.startsWith("#") ||
+                color.startsWith("rgb") ||
+                color.startsWith("hsl") ||
+                color === "transparent" ||
+                color === "currentColor"
+            )
+        ) {
+            // Color CSS directo
+            resolved = color;
+        } else {
+            // Token de ComposeTheme
+            resolved = resolveColor(color as ColorToken);
+        }
+
+        return this.then(
+            new ModifierImpl([
+                { style: `background:${resolved};` }
+            ])
+        );
+    }
+
+    weight(weight: number, fill: boolean = true): ModifierImpl {
+        if (weight <= 0) {
+            console.warn("Modifier.weight() debe ser > 0");
+            return this;
+        }
+
+        const styleParts = [
+            `flex-grow: ${weight};`,
+            `flex-shrink: ${fill ? 1 : 0};`,
+            `flex-basis: 0%;`  // importante para que el peso funcione bien
+        ];
+
+        return this.then(new ModifierImpl([{ style: styleParts.join(" ") }]));
+    }
+
+    align(alignment: BoxAlignment): ModifierImpl {
+        const parts = alignment.split(' ');
+        const horizontal = parts[0]; // flex-start, center, flex-end
+        const vertical = parts[1] || parts[0]; // para casos simples como "center"
+
+        let style = 'position: absolute;';
+
+        // Vertical
+        if (vertical === 'flex-start') {
+            style += 'top: 0;';
+        } else if (vertical === 'flex-end') {
+            style += 'bottom: 0;';
+        } else if (vertical === 'center') {
+            style += 'top: 50%; transform: translateY(-50%);';
+        }
+
+        // Horizontal
+        if (horizontal === 'flex-start') {
+            style += 'left: 0;';
+        } else if (horizontal === 'flex-end') {
+            style += 'right: 0;';
+        } else if (horizontal === 'center') {
+            style += 'left: 50%;';
+            // Combinar transform si ya hay translateY
+            if (style.includes('translateY')) {
+                style = style.replace('translateY(-50%)', 'translate(-50%, -50%)');
+            } else {
+                style += 'transform: translateX(-50%);';
+            }
+        }
+
+        return this.then(new ModifierImpl([{ style }]));
+    }
+
+    padding(valueOrParams: number | { top?: number; bottom?: number; start?: number; end?: number } = 0, unit: string = 'px'): ModifierImpl {
+        let style = '';
+
+        if (typeof valueOrParams === 'number') {
+            // Padding uniforme
+            style = `padding:${valueOrParams}${unit};`;
+        } else {
+            // Padding direccional
+            const { top = 0, bottom = 0, start = 0, end = 0 } = valueOrParams;
+            style = `
+                padding-top:${top}${unit};
+                padding-bottom:${bottom}${unit};
+                padding-left:${start}${unit};
+                //padding-right:${end}${unit};
+    `.trim();
+        }
+
+        return this.then(new ModifierImpl([{ style }]));
+    }
+
+    width(value: number | string, unit = 'px'): ModifierImpl {
+        const size = typeof value === 'number' ? `${value}${unit}` : value;
+        return this.then(new ModifierImpl([{ style: `width:${size};` }]));
+    }
+
+    height(value: number | string, unit = 'px'): ModifierImpl {
+        const size = typeof value === 'number' ? `${value}${unit}` : value;
+        return this.then(new ModifierImpl([{ style: `height:${size};` }]));
+    }
+
+    marginTop(value: number, unit = 'px'): ModifierImpl {
+        return this.then(new ModifierImpl([{ style: `margin-top:${value}${unit};` }]));
+    }
+
+    clip(shape: Shape): ModifierImpl {
+        return this.then(
+            new ModifierImpl([
+                {
+                    style: `
+                    border-radius:${shape.toCssBorderRadius()};
+                    overflow:hidden;
+                `
+                }
+            ])
+        );
+    }
+
+    size(value: number | string, unit: string = "px"): ModifierImpl {
+        if (value === null || value === undefined) {
+            return this;
+        }
+
+        let resolved: string;
+
+        if (typeof value === "number") {
+            if (isNaN(value)) return this;
+            resolved = `${value}${unit}`;
+        } else {
+            if (value.trim() === "") return this;
+            resolved = value;
+        }
+
+        return this.then(
+            new ModifierImpl([
+                {
+                    style: `width:${resolved};height:${resolved};`
+                }
+            ])
+        );
+    }
+
+    offset(x: number, y: number): ModifierImpl {
+        if (isNaN(x) || isNaN(y)) return this;
+
+        return this.then(
+            new ModifierImpl([
+                {
+                    style: `transform: translate(${x}px, ${y}px);`
+                }
+            ])
+        );
+    }
+
+    clickable(onClick: () => void): ModifierImpl {
+        return this.then(
+            new ModifierImpl([
+                {
+                    className: "compose-clickable",
+                    style: `
+                    cursor: pointer;
+                    user-select: none;
+                `
+                }
+            ])
+        );
+    }
+
+    border(width: number, color: string, shape?: Shape): ModifierImpl {
+        if (width <= 0) return this;
+
+        const radius = shape ? shape.toCssBorderRadius() : undefined;
+
+        return this.then(
+            new ModifierImpl([
+                {
+                    style: `
+                    border:${width}px solid ${color};
+                    ${radius ? `border-radius:${radius};` : ""}
+                `
+                }
+            ])
+        );
+    }
+
+    // ---- consumo interno ----
+
+    toStyle(): string {
+        return this.entries.map(e => e.style ?? "").join("");
+    }
+
+    toClass(): string {
+        return this.entries.map(e => e.className ?? "").join(" ");
+    }
+}

package/src/lib/core/shapes/RoundedCornerShape.ts

@@ -0,0 +1,53 @@
+import type { Shape } from "./Shape";
+
+type CornerSize = number | string;
+
+type RoundedCornerParams =
+    | CornerSize
+    | {
+    topStart?: CornerSize;
+    topEnd?: CornerSize;
+    bottomEnd?: CornerSize;
+    bottomStart?: CornerSize;
+};
+
+function toCss(value?: CornerSize): string {
+    if (value === undefined) return "0px";
+    return typeof value === "number" ? `${value}px` : value;
+}
+
+class RoundedCornerShapeImpl implements Shape {
+    constructor(private readonly params: RoundedCornerParams) {}
+
+    toCssBorderRadius(): string {
+        // Caso: un solo valor → todas las esquinas
+        if (typeof this.params === "number" || typeof this.params === "string") {
+            const v = toCss(this.params);
+            return `${v} ${v} ${v} ${v}`;
+        }
+
+        const {
+            topStart = 0,
+            topEnd = 0,
+            bottomEnd = 0,
+            bottomStart = 0,
+        } = this.params;
+
+        // CSS: top-left, top-right, bottom-right, bottom-left
+        return `
+            ${toCss(topStart)}
+            ${toCss(topEnd)}
+            ${toCss(bottomEnd)}
+            ${toCss(bottomStart)}
+        `.trim();
+    }
+}
+
+/**
+ * Compose-like factory
+ */
+export function RoundedCornerShape(
+    params: RoundedCornerParams
+): Shape {
+    return new RoundedCornerShapeImpl(params);
+}