@danielito1996/compose-svelted 0.0.1 → 0.2.0

package/{src/lib/core/modifier/Modifier.ts → dist/core/modifier/Modifier.d.ts}

@@ -1,259 +1,195 @@
-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;
+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 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 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 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 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;

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

@@ -0,0 +1,38 @@
+import type { BoxAlignment } from "../../components/layouts/Alignment";
+import type { Shape } from "../shapes/Shape";
+import type { ColorToken } from "../theme/ColorScheme";
+export type ModifierEntry = {
+    className?: string;
+    style?: string;
+};
+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;
+    marginTop(value: number, unit?: string): 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;
+    toStyle(): string;
+    toClass(): string;
+}

package/dist/core/motion/AnimationSpec.d.ts

@@ -0,0 +1,6 @@
+export type AnimationSpec = {
+    base: string;
+    from: string;
+    to: string;
+    duration: number;
+};

package/dist/core/motion/ContentTransition.d.ts

@@ -0,0 +1,5 @@
+export type ContentTransition = {
+    enter: string;
+    exit: string;
+    duration: number;
+};

package/dist/core/motion/contentTransitions.d.ts

@@ -0,0 +1,4 @@
+import type { ContentTransition } from "./ContentTransition";
+export declare function slideHorizontal(): ContentTransition;
+export declare function scaleFade(): ContentTransition;
+export declare function fade(duration?: number): ContentTransition;

package/dist/core/motion/transitions.d.ts

@@ -0,0 +1,7 @@
+import type { AnimationSpec } from "./AnimationSpec";
+export declare function fadeIn(duration?: number): AnimationSpec;
+export declare function fadeOut(duration?: number): AnimationSpec;
+export declare function scaleIn(duration?: number): AnimationSpec;
+export declare function scaleOut(duration?: number): AnimationSpec;
+export declare function slideIn(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;
+export declare function slideOut(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;

package/dist/core/navigation/NavBackStackEntry.d.ts

@@ -0,0 +1,4 @@
+export type NavBackStackEntry<T = unknown> = {
+    route: string;
+    args?: T;
+};

package/dist/core/navigation/NavController.d.ts

@@ -0,0 +1,8 @@
+import type { NavBackStackEntry } from "./NavBackStackEntry";
+export declare class NavController {
+    private readonly stackStore;
+    constructor(startDestination: string);
+    _getStackStore(): Writable<NavBackStackEntry[]>;
+    navigate<T = unknown>(route: string, args?: T): void;
+    popBackStack(): void;
+}

package/dist/core/navigation/NavStore.d.ts

@@ -0,0 +1,6 @@
+export declare function createNavStore(startDestination: string): {
+    stack: any;
+    navigate<T = unknown>(route: string, args?: T): void;
+    pop(): void;
+};
+export type NavStore = ReturnType<typeof createNavStore>;

package/dist/core/navigation/Route.d.ts

@@ -0,0 +1,3 @@
+export type Route<T = unknown> = {
+    path: string;
+};

package/dist/core/navigation/composable.d.ts

@@ -0,0 +1,5 @@
+import type { Route } from "./Route";
+export declare function composable<T>(route: Route<T>, factory: () => any): {
+    route: Route<T>;
+    component: any;
+};

package/dist/core/navigation/rememberNavController.d.ts

@@ -0,0 +1,2 @@
+import { NavController } from "./NavController";
+export declare function rememberNavController(startDestination: string): NavController;

package/dist/core/shapes/RoundedCornerShape.d.ts

@@ -0,0 +1,13 @@
+import type { Shape } from "./Shape";
+type CornerSize = number | string;
+type RoundedCornerParams = CornerSize | {
+    topStart?: CornerSize;
+    topEnd?: CornerSize;
+    bottomEnd?: CornerSize;
+    bottomStart?: CornerSize;
+};
+/**
+ * Compose-like factory
+ */
+export declare function RoundedCornerShape(params: RoundedCornerParams): Shape;
+export {};

package/{src/lib/core/shapes/Shape.ts → dist/core/shapes/Shape.d.ts}

@@ -1,3 +1,3 @@
-export interface Shape {
-    toCssBorderRadius(): string;
-}
+export interface Shape {
+    toCssBorderRadius(): string;
+}

package/dist/core/theme/ColorScheme.d.ts

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

package/dist/core/theme/Density.d.ts

@@ -0,0 +1,5 @@
+export declare const Density: {
+    readonly Default: "default";
+    readonly Compact: "compact";
+};
+export type DensityToken = typeof Density[keyof typeof Density];

package/dist/core/theme/TextStyle.d.ts

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