@danielito1996/compose-svelted 0.2.3 → 0.2.5

package/dist/components/textFields/BaseTextField.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+    import { Modifier } from "../../core/modifier/Modifier";
+    import { 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";
+    import { Density, type DensityToken } from "../../core/theme/Density";
+
+    // ===== Public API =====
+    export let value = "";
+    export let onValueChange = (_value: string) => {};
+    export let label = "";
+    export let placeholder = "";
+    export let supportingText: string | undefined;
+
+    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();
+
+    export let enabled = true;
+    export let readOnly = false;
+    export let isError = false;
+    export let density: DensityToken = Density.Default;
+
+    let focused = false;
+
+    const inputId = `tf-${Math.random().toString(36).slice(2)}`;
+
+    // ===== State =====
+    $: hasText = value.length > 0;
+    $: floating = focused || hasText;
+
+    $: hasLeading = !!$$slots.leadingIcon;
+    $: hasTrailing = !!$$slots.trailingIcon;
+
+    // ===== Density =====
+    $: fieldHeight = density === Density.Compact ? 44 : 56;
+    $: minMultilineHeight = density === Density.Compact ? 72 : 88;
+    $: paddingTop = density === Density.Compact ? 14 : 20;
+    $: paddingBottom = density === Density.Compact ? 6 : 8;
+
+    // ===== Colors =====
+    const errorColor = "var(--md-sys-color-error)";
+
+    $: labelColor = isError
+        ? errorColor
+        : floating
+            ? colors.cursor
+            : colors.label;
+
+    $: textColor = enabled ? colors.text : colors.label;
+
+    $: indicatorColor = isError
+        ? errorColor
+        : focused
+            ? colors.indicatorFocused
+            : colors.indicatorUnfocused;
+
+    $: supportingColor = isError ? errorColor : colors.label;
+
+    function handleInput(e: Event) {
+        if (!enabled || readOnly) return;
+        const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+        onValueChange(target.value);
+    }
+</script>
+
+<!-- Wrapper -->
+<div class="flex flex-col gap-2" style={modifier.toStyle()}>
+    <!-- Field -->
+    <div
+            class="relative overflow-hidden transition-colors duration-150 group"
+            style={`
+      ${singleLine ? `height:${fieldHeight}px;` : `min-height:${minMultilineHeight}px;`}
+      background:${colors.container};
+      border-radius:${shape.toCssBorderRadius()};
+      opacity:${enabled ? 1 : 0.6};
+    `}
+    >
+        <!-- Hover overlay (desktop only via CSS) -->
+        <div
+                class="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity"
+                style="background: rgba(0,0,0,0.04);"
+        ></div>
+
+        <div
+                class="grid h-full items-center"
+                style={`
+        grid-template-columns: ${hasLeading ? "auto " : ""}1fr${hasTrailing ? " auto" : ""};
+        padding: 0 16px;
+        column-gap: 12px;
+      `}
+        >
+            {#if hasLeading}
+                <div class="flex items-center justify-center">
+                    <slot name="leadingIcon" />
+                </div>
+            {/if}
+
+            <!-- Input / Label -->
+            <div class="relative h-full flex flex-col justify-center">
+                {#if label}
+                    <label
+                            for={inputId}
+                            class="absolute left-0 pointer-events-none origin-left transition-all duration-200"
+                            style={`
+              top:${floating ? "2px" : "50%"};
+              transform:
+                translateY(${floating ? "0" : "-50%"})
+                scale(${floating ? 0.72 : 1});
+              color:${labelColor};
+            `}
+                    >
+                        {label}
+                    </label>
+                {/if}
+
+                {#if singleLine}
+                    <input
+                            id={inputId}
+                            type="text"
+                            bind:value
+                            on:input={handleInput}
+                            on:focus={() => (focused = true)}
+                            on:blur={() => (focused = false)}
+                            placeholder={focused ? placeholder : ""}
+                            disabled={!enabled}
+                            readonly={readOnly}
+                            class="w-full bg-transparent outline-none"
+                            style={`
+              font:${resolveTextStyle(textStyle)};
+              font-size:${floating ? "1.05em" : "1em"};
+              color:${textColor};
+              padding-top:${paddingTop}px;
+              padding-bottom:${paddingBottom}px;
+            `}
+                    />
+                {:else}
+          <textarea
+                  id={inputId}
+                  bind:value
+                  on:input={handleInput}
+                  on:focus={() => (focused = true)}
+                  on:blur={() => (focused = false)}
+                  placeholder={focused ? placeholder : ""}
+                  rows="3"
+                  disabled={!enabled}
+                  readonly={readOnly}
+                  class="w-full bg-transparent outline-none resize-none"
+                  style={`
+              font:${resolveTextStyle(textStyle)};
+              font-size:${floating ? "1.05em" : "1em"};
+              color:${textColor};
+              padding-top:${paddingTop}px;
+              padding-bottom:12px;
+            `}
+          ></textarea>
+                {/if}
+            </div>
+
+            {#if hasTrailing}
+                <div class="flex items-center justify-center">
+                    <slot name="trailingIcon" />
+                </div>
+            {/if}
+        </div>
+
+        <!-- Indicator -->
+        <div
+                class="absolute bottom-0 left-0 right-0 h-1 transition-colors"
+                style={`background:${indicatorColor};`}
+        ></div>
+    </div>
+
+    <!-- Supporting text -->
+    {#if supportingText}
+        <div
+                class="text-xs px-16"
+                style={`color:${supportingColor}; margin-top:2px;`}
+        >
+            {supportingText}
+        </div>
+    {/if}
+</div>

package/dist/components/textFields/BaseTextField.svelte.d.ts

@@ -0,0 +1,41 @@
+import { Modifier } from "../../core/modifier/Modifier";
+import type { TextStyleToken } from "../../core/theme/TextStyle";
+import type { Shape } from "../../core/shapes/Shape";
+import type { TextFieldColors } from "./TextFieldColors";
+import { type DensityToken } from "../../core/theme/Density";
+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;
+}
+declare const BaseTextField: $$__sveltets_2_IsomorphicComponent<{
+    value?: string;
+    onValueChange?: (_value: string) => void;
+    label?: string;
+    placeholder?: string;
+    supportingText: string | undefined;
+    singleLine?: boolean;
+    textStyle?: TextStyleToken;
+    modifier?: Modifier;
+    shape?: Shape;
+    colors?: TextFieldColors;
+    enabled?: boolean;
+    readOnly?: boolean;
+    isError?: boolean;
+    density?: DensityToken;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leadingIcon: {};
+    trailingIcon: {};
+}, {}, string>;
+type BaseTextField = InstanceType<typeof BaseTextField>;
+export default BaseTextField;

package/dist/components/textFields/OutlinedTextField.svelte

@@ -0,0 +1,64 @@
+<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";
+    import {Density, type DensityToken} from "../../core/theme/Density";
+
+    export let value = "";
+    export let onValueChange = (v: string) => {};
+    export let label = "";
+    export let enabled: boolean = true;
+    export let isError: boolean = false;
+    export let readOnly: boolean = false;
+    export let density: DensityToken = Density.Default;
+    export let supportingText: string | undefined;
+    export let floatingLabelScale: number = 0.78;
+    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}
+            supportingText={supportingText}
+            density={density}
+            readOnly={readOnly}
+            enabled={enabled}
+            isError={isError}
+            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>

package/dist/components/textFields/OutlinedTextField.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { TextFieldColors } from "./TextFieldColors";
+import { Modifier } from "../../core/modifier/Modifier";
+import type { Shape } from "../../core/shapes/Shape";
+import type { TextStyleToken } from "../../core/theme/TextStyle";
+import { type DensityToken } from "../../core/theme/Density";
+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;
+}
+declare const OutlinedTextField: $$__sveltets_2_IsomorphicComponent<{
+    value?: string;
+    onValueChange?: (v: string) => void;
+    label?: string;
+    enabled?: boolean;
+    isError?: boolean;
+    readOnly?: boolean;
+    density?: DensityToken;
+    supportingText: string | undefined;
+    floatingLabelScale?: number;
+    placeholder?: string;
+    singleLine?: boolean;
+    textStyle?: TextStyleToken;
+    modifier?: Modifier;
+    shape?: Shape;
+    colors?: TextFieldColors;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leadingIcon: {
+        slot: string;
+    };
+    trailingIcon: {
+        slot: string;
+    };
+}, {}, string>;
+type OutlinedTextField = InstanceType<typeof OutlinedTextField>;
+export default OutlinedTextField;

package/dist/components/textFields/TextField.svelte

@@ -0,0 +1,49 @@
+<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";
+    import {Density, type DensityToken} from "../../core/theme/Density";
+
+    export let value = "";
+    export let onValueChange = (v: string) => {};
+    export let label = "";
+    export let enabled: boolean = true;
+    export let isError: boolean = false;
+    export let floatingLabelScale: number = 0.78;
+    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 supportingText: string | undefined = undefined;
+    export let readOnly: boolean = false;
+    export let density: DensityToken = Density.Default;
+
+    // 🔒 FilledTextField SIEMPRE usa filledColors por defecto
+    export let colors: TextFieldColors = TextFieldDefaults.filledColors();
+</script>
+
+<BaseTextField
+        value={value}
+        onValueChange={onValueChange}
+        supportingText={supportingText}
+        enabled={enabled}
+        isError={isError}
+        floatingLabelScale={floatingLabelScale}
+        label={label}
+        density={density}
+        readOnly={readOnly}
+        placeholder={placeholder}
+        singleLine={singleLine}
+        textStyle={textStyle}
+        modifier={modifier}
+        shape={shape}
+        colors={colors}
+>
+    <slot name="leadingIcon" slot="leadingIcon" />
+    <slot name="trailingIcon" slot="trailingIcon" />
+</BaseTextField>

package/dist/components/textFields/TextField.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { TextFieldColors } from "./TextFieldColors";
+import { Modifier } from "../../core/modifier/Modifier";
+import type { Shape } from "../../core/shapes/Shape";
+import type { TextStyleToken } from "../../core/theme/TextStyle";
+import { type DensityToken } from "../../core/theme/Density";
+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;
+}
+declare const TextField: $$__sveltets_2_IsomorphicComponent<{
+    value?: string;
+    onValueChange?: (v: string) => void;
+    label?: string;
+    enabled?: boolean;
+    isError?: boolean;
+    floatingLabelScale?: number;
+    placeholder?: string;
+    singleLine?: boolean;
+    textStyle?: TextStyleToken;
+    modifier?: Modifier;
+    shape?: Shape;
+    supportingText?: string | undefined;
+    readOnly?: boolean;
+    density?: DensityToken;
+    colors?: TextFieldColors;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leadingIcon: {
+        slot: string;
+    };
+    trailingIcon: {
+        slot: string;
+    };
+}, {}, string>;
+type TextField = InstanceType<typeof TextField>;
+export default TextField;

package/dist/components/textFields/TextFieldColors.d.ts

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

package/dist/components/textFields/TextFieldColors.js

@@ -0,0 +1 @@
+export {};

package/dist/components/textFields/TextFieldDefaults.d.ts

@@ -0,0 +1,11 @@
+import type { TextFieldColors } from "./TextFieldColors";
+export declare const TextFieldDefaults: {
+    /**
+     * FilledTextField (Material default)
+     */
+    filledColors(): TextFieldColors;
+    /**
+     * OutlinedTextField
+     */
+    outlinedColors(): TextFieldColors;
+};

package/dist/components/textFields/TextFieldDefaults.js

@@ -0,0 +1,42 @@
+import { resolveColor } from "../../core/theme/resolve";
+export var TextFieldDefaults = {
+    /**
+     * FilledTextField (Material default)
+     */
+    filledColors: function () {
+        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"),
+            error: resolveColor("error"),
+        };
+    },
+    /**
+     * OutlinedTextField
+     */
+    outlinedColors: function () {
+        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"),
+            error: resolveColor("error"),
+        };
+    }
+};

package/dist/core/elevation/elevation.d.ts

@@ -0,0 +1 @@
+export declare function elevationToShadow(value: number | string): string;

package/dist/core/elevation/elevation.js

@@ -0,0 +1,6 @@
+export function elevationToShadow(value) {
+    if (!value || value === 0)
+        return "none";
+    var v = typeof value === "number" ? "".concat(value, "px") : value;
+    return "\n        0 ".concat(v, " calc(").concat(v, " * 3) rgba(0, 0, 0, 0.16)\n    ").trim();
+}

package/dist/core/helpers/painterResource.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 declare const Res: {
+    readonly raw: (fileName: string) => string;
+    readonly image: (fileName: string) => string;
+    readonly values: (fileName: string) => string;
+    readonly fonts: (fileName: string) => string;
+};
+export declare function painterResource(resourceName: string): string;

package/dist/core/helpers/painterResource.js

@@ -0,0 +1,22 @@
+/**
+ * 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 var Res = {
+    raw: function (fileName) {
+        return "raw/" + fileName;
+    },
+    image: function (fileName) {
+        return "img/" + fileName;
+    },
+    values: function (fileName) {
+        return "values/" + fileName;
+    },
+    fonts: function (fileName) {
+        return "fonts/" + fileName;
+    }
+};
+export function painterResource(resourceName) {
+    return "/src/assets/" + resourceName;
+}