@danielito1996/compose-svelted 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -70,27 +70,27 @@ export class CodeBlock extends SvelteComponent {}
 // Tokens / Helpers (TypeScript only)
 // =======================================
 
-export * from "../src/lib/core/shapes/RoundedCornerShape";
-export * from "../src/lib/core/theme/ColorScheme";
-export * from "../src/lib/core/theme/TextStyle";
-export * from "../src/lib/core/theme/Density";
+export * from "../lib/core/shapes/RoundedCornerShape";
+export * from "../lib/core/theme/ColorScheme";
+export * from "../lib/core/theme/TextStyle";
+export * from "../lib/core/theme/Density";
 
-export * from "../src/lib/core/modifier/Modifier";
+export * from "../lib/core/modifier/Modifier";
 
-export * from "../src/lib/components/layouts/Arrangement";
-export * from "../src/lib/components/layouts/Alignment";
-export * from "../src/lib/components/ContentScale";
+export * from "../lib/components/layouts/Arrangement";
+export * from "../lib/components/layouts/Alignment";
+export * from "../lib/components/ContentScale";
 
-export * from "../src/lib/core/helpers/painterResource";
+export * from "../lib/core/helpers/painterResource";
 
-export * from "../src/lib/core/motion/AnimationSpec";
-export * from "../src/lib/core/motion/transitions";
-export * from "../src/lib/core/motion/contentTransitions";
+export * from "../lib/core/motion/AnimationSpec";
+export * from "../lib/core/motion/transitions";
+export * from "../lib/core/motion/contentTransitions";
 
-export * from "../src/lib/core/navigation/Route";
-export * from "../src/lib/core/navigation/NavController";
-export * from "../src/lib/core/navigation/rememberNavController";
-export * from "../src/lib/core/navigation/composable";
+export * from "../lib/core/navigation/Route";
+export * from "../lib/core/navigation/NavController";
+export * from "../lib/core/navigation/rememberNavController";
+export * from "../lib/core/navigation/composable";
 /*// =========================
 // COMPONENTS (Svelte)
 // =========================

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@danielito1996/compose-svelted",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "license": "MIT",
   "description": "Compose-like UI toolkit for Svelte",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "scripts": {
+    "build:lib": "vite build -c vite.lib.config.ts && copy src\\lib\\index.d.ts dist\\index.d.ts"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
   },

package/dist/components/ContentScale.d.ts

@@ -1,10 +0,0 @@
-export declare const ContentScale: {
-    readonly Crop: "cover";
-    readonly Fit: "contain";
-    readonly FillBounds: "fill";
-    readonly Inside: "contain";
-    readonly FillWidth: "fillWidth";
-    readonly FillHeight: "fillHeight";
-    readonly None: "none";
-};
-export type ContentScaleToken = typeof ContentScale[keyof typeof ContentScale];

package/dist/components/layouts/Alignment.d.ts

@@ -1,20 +0,0 @@
-export declare const Alignment: {
-    readonly Start: "flex-start";
-    readonly CenterHorizontally: "center";
-    readonly End: "flex-end";
-    readonly Top: "flex-start";
-    readonly CenterVertically: "center";
-    readonly Bottom: "flex-end";
-    readonly TopStart: "flex-start flex-start";
-    readonly TopCenter: "center flex-start";
-    readonly TopEnd: "flex-end flex-start";
-    readonly CenterStart: "flex-start center";
-    readonly Center: "center center";
-    readonly CenterEnd: "flex-end center";
-    readonly BottomStart: "flex-start flex-end";
-    readonly BottomCenter: "center flex-end";
-    readonly BottomEnd: "flex-end flex-end";
-};
-export type HorizontalAlignment = typeof Alignment.Start | typeof Alignment.CenterHorizontally | typeof Alignment.End;
-export type VerticalAlignment = typeof Alignment.Top | typeof Alignment.CenterVertically | typeof Alignment.Bottom;
-export type BoxAlignment = typeof Alignment[keyof typeof Alignment];

package/dist/components/layouts/Arrangement.d.ts

@@ -1,23 +0,0 @@
-/**
- * Arrangement — eje principal (main axis)
- * Fiel a Jetpack Compose
- */
-export type ArrangementValue = {
-    type: "static";
-    justifyContent: string;
-} | {
-    type: "spaced";
-    gap: number;
-    justifyContent: string;
-};
-export declare const Arrangement: {
-    readonly Start: ArrangementValue;
-    readonly Center: ArrangementValue;
-    readonly End: ArrangementValue;
-    readonly Bottom: ArrangementValue;
-    readonly Top: ArrangementValue;
-    readonly SpaceBetween: ArrangementValue;
-    readonly SpaceAround: ArrangementValue;
-    readonly SpaceEvenly: ArrangementValue;
-    readonly spacedBy: (value: number) => ArrangementValue;
-};

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

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

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

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

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

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

@@ -1,12 +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 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/modifier/Modifier.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +0,0 @@
-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/dist/core/shapes/Shape.d.ts

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

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

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

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

@@ -1,19 +0,0 @@
-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";
-};

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

@@ -1,15 +0,0 @@
-export interface ColorScheme {
-    primary: string;
-    onPrimary: string;
-    secondary: string;
-    onSecondary: string;
-    background: string;
-    onBackground: string;
-    surface: string;
-    onSurface: string;
-    surfaceVariant: string;
-    onSurfaceVariant: string;
-    outline: string;
-    error: string;
-    onError: string;
-}

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

@@ -1,2 +0,0 @@
-import type { ComposeTheme } from "./theme";
-export declare function themeToCssVars(theme: ComposeTheme): string;

package/dist/core/theme/defaults/darkColors.d.ts

@@ -1,2 +0,0 @@
-import type { ColorScheme } from "../colors";
-export declare const darkColors: ColorScheme;

package/dist/core/theme/defaults/defaultTheme.d.ts

@@ -1,3 +0,0 @@
-import type { ComposeTheme } from "../theme";
-export declare const defaultLightTheme: ComposeTheme;
-export declare const defaultDarkTheme: ComposeTheme;

package/dist/core/theme/defaults/lightColors.d.ts

@@ -1,2 +0,0 @@
-import type { ColorScheme } from "../colors";
-export declare const lightColors: ColorScheme;

package/dist/core/theme/defaults/typography.d.ts

@@ -1,2 +0,0 @@
-import type { Typography } from "../typography";
-export declare const defaultTypography: Typography;

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

@@ -1,7 +0,0 @@
-export interface Elevation {
-    level0: string;
-    level1: string;
-    level2: string;
-    level3: string;
-    level4: string;
-}

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

@@ -1 +0,0 @@
-export declare function getCurrentColor(token: string): string;

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

@@ -1,5 +0,0 @@
-import type { ColorToken } from "./ColorScheme";
-import type { TextStyleToken } from "./TextStyle";
-export declare const resolveColor: (c: ColorToken) => string;
-export declare function resolveTintColor(color: ColorToken | string): string;
-export declare const resolveTextStyle: (t: TextStyleToken) => string;

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

@@ -1,7 +0,0 @@
-export interface Shapes {
-    none: string;
-    extraSmall: string;
-    small: string;
-    medium: string;
-    large: string;
-}

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

@@ -1,7 +0,0 @@
-export interface Spacing {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-}

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

@@ -1,2 +0,0 @@
-export declare const themeState: any;
-export declare const resolvedTheme: any;

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

@@ -1,2 +0,0 @@
-export type SystemTheme = "light" | "dark";
-export declare const systemTheme: any;

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

@@ -1,13 +0,0 @@
-import type { ColorScheme } from "./colors";
-import type { Typography } from "./typography";
-import type { Shapes } from "./shapes";
-import type { Spacing } from "./spacing";
-import type { Elevation } from "./elevation";
-export interface ComposeTheme {
-    colorScheme: ColorScheme;
-    typography: Typography;
-    shapes: Shapes;
-    spacing: Spacing;
-    elevation: Elevation;
-}
-export type ThemeMode = "light" | "dark" | "system";

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

@@ -1,24 +0,0 @@
-export interface TextStyle {
-    fontFamily: string;
-    fontSize: string;
-    lineHeight: string;
-    letterSpacing: string;
-    fontWeight: number;
-}
-export interface Typography {
-    displayLarge: TextStyle;
-    displayMedium: TextStyle;
-    displaySmall: TextStyle;
-    headlineLarge: TextStyle;
-    headlineMedium: TextStyle;
-    headlineSmall: TextStyle;
-    titleLarge: TextStyle;
-    titleMedium: TextStyle;
-    titleSmall: TextStyle;
-    bodyLarge: TextStyle;
-    bodyMedium: TextStyle;
-    bodySmall: TextStyle;
-    labelLarge: TextStyle;
-    labelMedium: TextStyle;
-    labelSmall: TextStyle;
-}