@danielito1996/compose-svelted 0.0.1 → 0.2.0

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

@@ -1,36 +0,0 @@
-<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/TextFieldDefaults.ts

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

@@ -1,26 +0,0 @@
-/**
- * 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/ModifierImpl.ts

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

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

package/src/lib/core/theme/ColorScheme.ts

@@ -1,25 +0,0 @@
-import type { ColorScheme as Def } from "./colors";
-
-export type ColorToken = keyof Def;
-
-export const ColorScheme = {
-    Primary: "primary",
-    OnPrimary: "onPrimary",
-
-    Secondary: "secondary",
-    OnSecondary: "onSecondary",
-
-    Background: "background",
-    OnBackground: "onBackground",
-
-    Surface: "surface",
-    OnSurface: "onSurface",
-
-    SurfaceVariant: "surfaceVariant",
-    OnSurfaceVariant: "onSurfaceVariant",
-
-    Outline: "outline",
-
-    Error: "error",
-    OnError: "onError",
-} as const;

package/src/lib/core/theme/ComposeTheme.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-    import { themeState, resolvedTheme } from "./store";
-    import { themeToCssVars } from "./cssVars";
-    import { defaultLightTheme, defaultDarkTheme } from "./defaults/defaultTheme";
-    import type { ComposeTheme as Theme, ThemeMode } from "./theme";
-
-    export let light: Theme | undefined = undefined;
-    export let dark: Theme | undefined = undefined;
-    export let mode: ThemeMode = "system";
-
-    $: themeState.set({
-        light: light ?? defaultLightTheme,
-        dark: dark ?? defaultDarkTheme,
-        mode,
-    });
-
-    $: css = $resolvedTheme ? themeToCssVars($resolvedTheme) : "";
-</script>
-
-<div style={css}>
-    <slot />
-</div>

package/src/lib/core/theme/TextStyle.ts

@@ -1,25 +0,0 @@
-import type { Typography } from "./typography";
-
-export type TextStyleToken = keyof Typography;
-
-export const TextStyle = {
-    DisplayLarge: "displayLarge",
-    DisplayMedium: "displayMedium",
-    DisplaySmall: "displaySmall",
-
-    HeadlineLarge: "headlineLarge",
-    HeadlineMedium: "headlineMedium",
-    HeadlineSmall: "headlineSmall",
-
-    TitleLarge: "titleLarge",
-    TitleMedium: "titleMedium",
-    TitleSmall: "titleSmall",
-
-    BodyLarge: "bodyLarge",
-    BodyMedium: "bodyMedium",
-    BodySmall: "bodySmall",
-
-    LabelLarge: "labelLarge",
-    LabelMedium: "labelMedium",
-    LabelSmall: "labelSmall",
-} as const;

package/src/lib/core/theme/cssVars.ts

@@ -1,32 +0,0 @@
-import type { ComposeTheme } from "./theme";
-
-export function themeToCssVars(theme: ComposeTheme): string {
-    const vars: string[] = [];
-
-    Object.entries(theme.colorScheme).forEach(([k, v]) =>
-        vars.push(`--md-sys-color-${k}: ${v};`)
-    );
-
-    // === Tipografía: una variable por cada propiedad (¡esto soluciona el bug!) ===
-    Object.entries(theme.typography).forEach(([styleKey, style]) => {
-        vars.push(`--md-sys-typescale-${styleKey}-font-family: ${style.fontFamily};`);
-        vars.push(`--md-sys-typescale-${styleKey}-font-size: ${style.fontSize};`);
-        vars.push(`--md-sys-typescale-${styleKey}-line-height: ${style.lineHeight};`);
-        vars.push(`--md-sys-typescale-${styleKey}-letter-spacing: ${style.letterSpacing};`);
-        vars.push(`--md-sys-typescale-${styleKey}-font-weight: ${style.fontWeight};`);
-    });
-
-    Object.entries(theme.shapes).forEach(([k, v]) =>
-        vars.push(`--md-sys-shape-${k}: ${v};`)
-    );
-
-    Object.entries(theme.elevation).forEach(([k, v]) =>
-        vars.push(`--md-sys-elevation-${k}: ${v};`)
-    );
-
-    Object.entries(theme.spacing).forEach(([k, v]) =>
-        vars.push(`--md-sys-spacing-${k}: ${v};`)
-    );
-
-    return vars.join("\n");
-}

package/src/lib/core/theme/defaults/darkColors.ts

@@ -1,17 +0,0 @@
-import type { ColorScheme } from "../colors";
-
-export const darkColors: ColorScheme = {
-    primary: "#FFD700",
-    onPrimary: "#080808",
-    secondary: "#3A3E49",
-    onSecondary: "#E6E6E6",
-    background: "#080808",
-    onBackground: "#E6E6E6",
-    surface: "#101010",
-    onSurface: "#E6E6E6",
-    surfaceVariant: "#1E1E1E",
-    onSurfaceVariant: "#CAC4D0",
-    outline: "#4A4A4A",
-    error: "#FF6F61",
-    onError: "#080808",
-};

package/src/lib/core/theme/defaults/defaultTheme.ts

@@ -1,35 +0,0 @@
-import { lightColors } from "./lightColors"
-import { darkColors } from "./darkColors"
-import { defaultTypography } from "./typography"
-import type { ComposeTheme } from "../theme"
-
-export const defaultLightTheme: ComposeTheme = {
-    colorScheme: lightColors,
-    typography: defaultTypography,
-    shapes: {
-        none: "0px",
-        extraSmall: "4px",
-        small: "8px",
-        medium: "12px",
-        large: "16px",
-    },
-    spacing: {
-        xs: "4px",
-        sm: "8px",
-        md: "16px",
-        lg: "24px",
-        xl: "32px",
-    },
-    elevation: {
-        level0: "none",
-        level1: "0 1px 2px rgba(0,0,0,0.2)",
-        level2: "0 2px 6px rgba(0,0,0,0.2)",
-        level3: "0 6px 12px rgba(0,0,0,0.25)",
-        level4: "0 12px 24px rgba(0,0,0,0.3)",
-    },
-}
-
-export const defaultDarkTheme: ComposeTheme = {
-    ...defaultLightTheme,
-    colorScheme: darkColors,
-}

package/src/lib/core/theme/defaults/lightColors.ts

@@ -1,17 +0,0 @@
-import type { ColorScheme } from "../colors";
-
-export const lightColors: ColorScheme = {
-    primary: "#D4AF37",        // Violeta más intenso
-    onPrimary: "#080808",
-    secondary: "#3A3E49",      // Teal vibrante
-    onSecondary: "#FFFFFF",
-    background: "#FFFBF2",
-    onBackground: "#1C1B1F",
-    surface: "#FFFFFF",
-    onSurface: "#1C1B1F",
-    surfaceVariant: "#F8F9FA",
-    onSurfaceVariant: "#DEE1E6",
-    outline: "#B0B0B0",
-    error: "#BA1A1A",
-    onError: "#FFFFFF",
-};