@danielito1996/compose-svelted 0.2.7 → 0.2.8-alpha01

package/dist/components/textFields/TextField.svelte

@@ -27,13 +27,13 @@
     export let colors: TextFieldColors = TextFieldDefaults.filledColors();
 </script>
 
-<BaseTextField
-        value={value}
-        onValueChange={onValueChange}
-        supportingText={supportingText}
-        enabled={enabled}
-        isError={isError}
-        floatingLabelScale={floatingLabelScale}
+<BaseTextField
+        value={value}
+        onValueChange={onValueChange}
+        supportingText={supportingText}
+        enabled={enabled}
+        isError={isError}
+        floatingLabelScale={floatingLabelScale}
         label={label}
         density={density}
         readOnly={readOnly}
@@ -46,4 +46,4 @@
 >
     <slot name="leadingIcon" slot="leadingIcon" />
     <slot name="trailingIcon" slot="trailingIcon" />
-</BaseTextField>
+</BaseTextField>

package/dist/core/modifier/Modifier.d.ts

@@ -1,195 +1,35 @@
 import { ModifierImpl } from "./ModifierImpl";
-import type { BoxAlignment } from "../../components/layouts/Alignment";
+import type { BoxAlignment, HorizontalAlignment, VerticalAlignment } 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)
- * ```
- */
+type PaddingValue = number | {
+    top?: number;
+    bottom?: number;
+    start?: number;
+    end?: number;
+};
 export declare const Modifier: {
-    /**
-     * Returns an empty Modifier with no effects.
-     *
-     * Useful as a default value or starting point.
-     */
     readonly empty: () => 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 })
-     * ```
-     */
-    readonly padding: (valueOrParams?: number | {
-        top?: number;
-        bottom?: number;
-        start?: number;
-        end?: number;
-    }, unit?: string) => ModifierImpl;
-    /**
-     * Adds horizontal padding (left and right).
-     */
+    readonly padding: (valueOrParams?: PaddingValue, unit?: string) => ModifierImpl;
     readonly paddingHorizontal: (value: number) => ModifierImpl;
-    /**
-     * 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))
-     * ```
-     */
+    readonly paddingVertical: (value: number) => ModifierImpl;
     readonly border: (width: number, color: string, shape?: Shape) => ModifierImpl;
-    /**
-     * 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)}
-     * />
-     * ```
-     */
     readonly clickable: (onClick: () => void) => ModifierImpl;
-    /**
-     * 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.
-     */
     readonly offset: (x: number, y: number) => ModifierImpl;
-    /**
-     * Enables vertical scrolling for the component.
-     *
-     * Useful for Column or large content containers.
-     */
     readonly verticalScroll: (enabled?: boolean) => ModifierImpl;
-    /**
-     * Enables horizontal scrolling for the component.
-     */
     readonly horizontalScroll: (enabled?: boolean) => ModifierImpl;
-    /**
-     * Adds vertical padding (top and bottom).
-     */
-    readonly paddingVertical: (value: number) => ModifierImpl;
-    /**
-     * Aligns the component inside a Box.
-     *
-     * ⚠️ This modifier is intended to be used only inside Box layouts.
-     *
-     * Example:
-     * ```
-     * Modifier.align(Alignment.Center)
-     * ```
-     */
-    readonly align: (alignment: BoxAlignment) => ModifierImpl;
-    /**
-     * Makes the component fill the maximum available width.
-     */
+    readonly align: (alignment: BoxAlignment | HorizontalAlignment | VerticalAlignment) => ModifierImpl;
     readonly fillMaxWidth: () => ModifierImpl;
-    /**
-     * Makes the component fill the maximum available height.
-     */
     readonly fillMaxHeight: () => ModifierImpl;
-    /**
-     * Makes the component fill both width and height.
-     */
     readonly fillMaxSize: () => ModifierImpl;
-    /**
-     * Sets a fixed height for the component.
-     *
-     * Accepts either a number (px by default) or a CSS size string.
-     */
     readonly height: (value: number | string, unit?: string) => ModifierImpl;
-    /**
-     * Sets a fixed width for the component.
-     *
-     * Accepts either a number (px by default) or a CSS size string.
-     */
     readonly width: (value: number | string, unit?: string) => ModifierImpl;
-    /**
-     * 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")
-     * ```
-     */
     readonly background: (color: ColorToken | string) => ModifierImpl;
-    /**
-     * Assigns a proportional weight to the component inside
-     * a Row or Column.
-     *
-     * Similar to flex-grow.
-     *
-     * Example:
-     * ```
-     * Modifier.weight(1)
-     * ```
-     */
     readonly weight: (weight: number, fill?: boolean) => ModifierImpl;
-    /**
-     * Assigns weight without forcing fill behavior.
-     */
     readonly weightNoFill: (weight: number) => ModifierImpl;
-    /**
-     * Adds top margin to the component.
-     */
     readonly marginTop: (value: number, unit?: string) => ModifierImpl;
-    /**
-     * Clips the component using the provided Shape.
-     *
-     * Example:
-     * ```
-     * Modifier.clip(RoundedCornerShape(16))
-     * ```
-     */
     readonly clip: (shape: Shape) => ModifierImpl;
-    /**
-     * Sets both width and height to the same value.
-     *
-     * Useful for icons and square components.
-     *
-     * Example:
-     * ```
-     * Modifier.size(24)
-     * ```
-     */
     readonly size: (value: number | string, unit?: string) => ModifierImpl;
 };
 export type Modifier = ModifierImpl;
+export {};

package/dist/core/modifier/Modifier.js

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

package/dist/core/modifier/ModifierImpl.d.ts

@@ -1,38 +1,50 @@
-import type { BoxAlignment } from "../../components/layouts/Alignment";
+import type { BoxAlignment, HorizontalAlignment, VerticalAlignment } from "../../components/layouts/Alignment";
 import type { Shape } from "../shapes/Shape";
 import type { ColorToken } from "../theme/ColorScheme";
+export type ModifierMeta = {
+    /** Alineación de este hijo dentro de su contenedor (place-self en grid, align-self en flex) */
+    align?: BoxAlignment | HorizontalAlignment | VerticalAlignment;
+};
 export type ModifierEntry = {
     className?: string;
     style?: string;
+    meta?: ModifierMeta;
+};
+type PaddingValue = number | {
+    top?: number;
+    bottom?: number;
+    start?: number;
+    end?: number;
 };
 export declare class ModifierImpl {
     private readonly entries;
     constructor(entries?: ModifierEntry[]);
     then(other: ModifierImpl): ModifierImpl;
-    paddingHorizontal(value: number): ModifierImpl;
-    verticalScroll(enabled?: boolean): ModifierImpl;
-    horizontalScroll(enabled?: boolean): ModifierImpl;
-    paddingVertical(value: number): ModifierImpl;
     fillMaxWidth(): ModifierImpl;
     fillMaxHeight(): ModifierImpl;
     fillMaxSize(): ModifierImpl;
-    background(color: ColorToken | string): ModifierImpl;
-    weight(weight: number, fill?: boolean): ModifierImpl;
-    align(alignment: BoxAlignment): ModifierImpl;
-    padding(valueOrParams?: number | {
-        top?: number;
-        bottom?: number;
-        start?: number;
-        end?: number;
-    }, unit?: string): ModifierImpl;
     width(value: number | string, unit?: string): ModifierImpl;
     height(value: number | string, unit?: string): ModifierImpl;
+    size(value: number | string, unit?: string): ModifierImpl;
+    weight(weight: number, fill?: boolean): ModifierImpl;
+    padding(valueOrParams?: PaddingValue, unit?: string): ModifierImpl;
+    paddingHorizontal(value: number): ModifierImpl;
+    paddingVertical(value: number): ModifierImpl;
     marginTop(value: number, unit?: string): ModifierImpl;
+    background(color: ColorToken | string): ModifierImpl;
+    border(width: number, color: string, shape?: Shape): ModifierImpl;
     clip(shape: Shape): ModifierImpl;
-    size(value: number | string, unit?: string): ModifierImpl;
     offset(x: number, y: number): ModifierImpl;
-    clickable(onClick: () => void): ModifierImpl;
-    border(width: number, color: string, shape?: Shape): ModifierImpl;
+    /**
+     * Sobreescribe la alineación de este hijo dentro de un contenedor (Box, Column, Row).
+     * Equivalente a Modifier.align() en Jetpack Compose.
+     */
+    align(alignment: BoxAlignment | HorizontalAlignment | VerticalAlignment): ModifierImpl;
+    clickable(_onClick?: () => void): ModifierImpl;
+    verticalScroll(enabled?: boolean): ModifierImpl;
+    horizontalScroll(enabled?: boolean): ModifierImpl;
     toStyle(): string;
     toClass(): string;
+    getMeta(): ModifierMeta;
 }
+export {};