@danielito1996/compose-svelted 0.2.7 → 0.2.8-alpha01

package/dist/core/theme/ComposeTheme.svelte

@@ -1,22 +1,37 @@
-<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 />
+<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>
+
+<!--
+    ComposeTheme — Proveedor de tokens y estilos globales.
+    Aplica las variables CSS y establece el fondo/color base siguiendo el esquema de Material 3.
+    Ocupa el 100% para asegurar que los fondos cubran toda la pantalla.
+-->
+<div
+    style={`
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface, white);
+        color: var(--md-sys-color-onSurface, black);
+        ${css}
+    `}
+>
+    <slot />
 </div>

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

@@ -9,6 +9,8 @@ export interface ColorScheme {
     onSurface: string;
     surfaceVariant: string;
     onSurfaceVariant: string;
+    tertiary: string;
+    onTertiary: string;
     outline: string;
     error: string;
     onError: string;

package/dist/core/theme/defaults/darkColors.js

@@ -3,6 +3,8 @@ export var darkColors = {
     onPrimary: "#E6E6E6",
     secondary: "#3A3E49",
     onSecondary: "#E6E6E6",
+    tertiary: "#D0BCFF",
+    onTertiary: "#381E72",
     background: "#080808",
     onBackground: "#E6E6E6",
     surface: "#101010",

package/dist/core/theme/defaults/lightColors.js

@@ -3,6 +3,8 @@ export var lightColors = {
     onPrimary: "#FFFBF2",
     secondary: "#3A3E49", // Teal vibrante
     onSecondary: "#FFFFFF",
+    tertiary: "#6750A4",
+    onTertiary: "#FFFFFF",
     background: "#FFFBF2",
     onBackground: "#1C1B1F",
     surface: "#FFFFFF",

package/dist/index.d.ts

@@ -1,129 +1,48 @@
-// =======================================
-// Compose Svelted – Public API (Core V2)
-// =======================================
-
-import type { SvelteComponent } from "svelte";
-
-// ---------- Svelte components (typed as components) ----------
-export class ComposeTheme extends SvelteComponent {}
-export class AppRoot extends SvelteComponent {}
-
-export class Surface extends SvelteComponent {}
-export class Text extends SvelteComponent {}
-
-export class Column extends SvelteComponent {}
-export class Row extends SvelteComponent {}
-export class Box extends SvelteComponent {}
-export class Spacer extends SvelteComponent {}
-export class LazyColumn extends SvelteComponent {}
-export class LazyRow extends SvelteComponent {}
-export class Scaffold extends SvelteComponent {}
-
-export class Button extends SvelteComponent {}
-export class TextButton extends SvelteComponent {}
-export class TonalButton extends SvelteComponent {}
-export class IconButton extends SvelteComponent {}
-export class ButtonWithIcon extends SvelteComponent {}
-export class OutlinedButton extends SvelteComponent {}
-export class OutlinedButtonWithIcon extends SvelteComponent {}
-export class CheckButton extends SvelteComponent {}
-
-export class Card extends SvelteComponent {}
-export class OutlinedCard extends SvelteComponent {}
-
-export class TextField extends SvelteComponent {}
-export class OutlinedTextField extends SvelteComponent {}
-
-export class Image extends SvelteComponent {}
-export class Icon extends SvelteComponent {}
-
-export class AnimatedVisibility extends SvelteComponent {}
-export class AnimatedContent extends SvelteComponent {}
-
-export class NavHost extends SvelteComponent {}
-
-export class CodeBlock extends SvelteComponent {}
-
-// ---------- TS-only API (must resolve inside the installed package) ----------
-// IMPORTANT: These paths must exist in the published tarball.
-// If you are publishing `dist/core/...` etc. (as your npm pack log showed), keep these.
-export * from "./core/shapes/RoundedCornerShape";
-export * from "./core/theme/ColorScheme";
-export * from "./core/theme/TextStyle";
-export * from "./core/theme/Density";
-
-export * from "./core/modifier/Modifier";
-
-export * from "./components/layouts/Arrangement";
-export * from "./components/layouts/Alignment";
-export * from "./components/ContentScale";
-
-export * from "./core/helpers/painterResource";
-
-export * from "./core/motion/AnimationSpec";
-export * from "./core/motion/transitions";
-export * from "./core/motion/contentTransitions";
-
-export * from "./core/navigation/Route";
-export * from "./core/navigation/NavController";
-export * from "./core/navigation/rememberNavController";
-export * from "./core/navigation/composable";
-/*// =========================
-// COMPONENTS (Svelte)
-// =========================
-// LAYOUTS
-export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
-export { default as AppRoot } from "./components/AppRoot.svelte"
-// COMPONENTS
-export { default as Surface } from "./components/Surface.svelte";
-export { default as Text } from "./components/Text.svelte";
-export { default as Column } from "./components/layouts/Column.svelte";
-export { default as Row } from "./components/layouts/Row.svelte";
-export { default as Box } from "./components/layouts/Box.svelte";
-export { default as Spacer } from "./components/Spacer.svelte"
-export { default as Button } from "./components/buttons/Button.svelte"
-export { default as IconButton } from "./components/buttons/IconButton.svelte"
-export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.svelte"
-export { default as OutlinedIconButton } from "./components/buttons/OutlinedButton.svelte"
-export { default as OutlinedButtonWithIcon } from "./components/buttons/OutlinedButtonWithIcon.svelte"
-export { default as CheckButton } from "./components/buttons/CheckButton.svelte"
-export { default as TextButton } from "./components/buttons/TextButton.svelte"
-export { default as OutlinedButton } from "./components/buttons/OutlinedButton.svelte"
-export { default as Card } from "./components/cards/Card.svelte"
-export { default as OutlinedCard } from "./components/cards/OutlinedCard.svelte"
-export { default as TextField } from "./components/textFields/TextField.svelte"
-export { default as OutlinedTextField } from "./components/textFields/OutlinedTextField.svelte"
-export { default as TonalButton } from "./components/TonalButton.svelte"
-export { default as LazyColumn } from "./components/layouts/LazyColumn.svelte"
-export { default as LazyRow } from "./components/layouts/LazyRow.svelte"
-export { default as Icon } from "./components/Icon.svelte"
-export { default as Image } from "./components/Image.svelte"
-export { default as Scaffold } from "./components/layouts/Scaffold.svelte"
-// Motions
-export { default as AnimatedVisibility } from "./components/motion/AnimatedVisibility.svelte"
-export { default as AnimatedContent } from "./components/motion/AnimatedContent.svelte"
-// Custom
-export { default as CodeBlock } from "./components/custom/CodeBlock.svelte"
-// Navigation
-export { default as NavHost } from "./core/navigation/NavHost.svelte";
-
-// =========================
-// TOKENS / API (TS only)
-// =========================
-export * from "./core/shapes/RoundedCornerShape"
-export * from "./core/theme/ColorScheme";
-export * from "./core/theme/TextStyle";
-export * from "./core/modifier/Modifier"
-export * from "./components/layouts/Arrangement";
-export * from "./components/layouts/Alignment";
-export * from "./components/ContentScale"
-export * from "./core/helpers/painterResource"
-export * from "./components/ContentScale"
-export * from "./core/theme/Density"
-export * from "./core/motion/AnimationSpec"
-export * from "./core/motion/transitions"
-export * from "./core/motion/contentTransitions"
-export * from "./core/navigation/Route";
-export * from "./core/navigation/NavController";
-export * from "./core/navigation/rememberNavController";
-export * from "./core/navigation/composable";*/
+export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
+export { default as AppRoot } from "./components/AppRoot.svelte";
+export { default as Column } from "./components/layouts/Column.svelte";
+export { default as Row } from "./components/layouts/Row.svelte";
+export { default as Box } from "./components/layouts/Box.svelte";
+export { default as Spacer } from "./components/Spacer.svelte";
+export { default as LazyColumn } from "./components/layouts/LazyColumn.svelte";
+export { default as LazyRow } from "./components/layouts/LazyRow.svelte";
+export { default as Scaffold } from "./components/layouts/Scaffold.svelte";
+export { default as Surface } from "./components/Surface.svelte";
+export { default as Text } from "./components/Text.svelte";
+export { default as Button } from "./components/buttons/Button.svelte";
+export { default as TextButton } from "./components/buttons/TextButton.svelte";
+export { default as TonalButton } from "./components/TonalButton.svelte";
+export { default as IconButton } from "./components/buttons/IconButton.svelte";
+export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.svelte";
+export { default as OutlinedButton } from "./components/buttons/OutlinedButton.svelte";
+export { default as OutlinedButtonWithIcon } from "./components/buttons/OutlinedButtonWithIcon.svelte";
+export { default as CheckButton } from "./components/buttons/CheckButton.svelte";
+export { default as OutlinedIconButton } from "./components/buttons/OutlinedIconButton.svelte";
+export { default as Card } from "./components/cards/Card.svelte";
+export { default as OutlinedCard } from "./components/cards/OutlinedCard.svelte";
+export { default as TextField } from "./components/textFields/TextField.svelte";
+export { default as OutlinedTextField } from "./components/textFields/OutlinedTextField.svelte";
+export { default as DropdownMenu } from "./components/menus/DropdownMenu.svelte";
+export { default as DropdownMenuItem } from "./components/menus/DropdownMenuItem.svelte";
+export { default as Image } from "./components/Image.svelte";
+export { default as Icon } from "./components/Icon.svelte";
+export { default as AnimatedVisibility } from "./components/motion/motion/AnimatedVisibility.svelte";
+export { default as AnimatedContent } from "./components/motion/motion/AnimatedContent.svelte";
+export { default as NavHost } from "./core/navigation/NavHost.svelte";
+export { default as CodeBlock } from "./components/custom/CodeBlock.svelte";
+export * from "./core/modifier/Modifier";
+export * from "./core/shapes/RoundedCornerShape";
+export * from "./components/layouts/Alignment";
+export * from "./components/layouts/Arrangement";
+export * from "./components/ContentScale";
+export * from "./core/theme/ColorScheme";
+export * from "./core/theme/TextStyle";
+export * from "./core/theme/Density";
+export * from "./core/motion/AnimationSpec";
+export * from "./core/motion/transitions";
+export * from "./core/motion/contentTransitions";
+export * from "./core/helpers/painterResource";
+export * from "./core/navigation/Route";
+export * from "./core/navigation/NavController";
+export * from "./core/navigation/rememberNavController";
+export * from "./core/navigation/composable";

package/dist/index.js

@@ -1,3 +1,4 @@
+//import "./core/styles/baseline.css";
 // Root
 export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
 export { default as AppRoot } from "./components/AppRoot.svelte";
@@ -20,21 +21,25 @@ export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.s
 export { default as OutlinedButton } from "./components/buttons/OutlinedButton.svelte";
 export { default as OutlinedButtonWithIcon } from "./components/buttons/OutlinedButtonWithIcon.svelte";
 export { default as CheckButton } from "./components/buttons/CheckButton.svelte";
+export { default as OutlinedIconButton } from "./components/buttons/OutlinedIconButton.svelte";
 export { default as Card } from "./components/cards/Card.svelte";
 export { default as OutlinedCard } from "./components/cards/OutlinedCard.svelte";
 export { default as TextField } from "./components/textFields/TextField.svelte";
 export { default as OutlinedTextField } from "./components/textFields/OutlinedTextField.svelte";
+export { default as DropdownMenu } from "./components/menus/DropdownMenu.svelte";
+export { default as DropdownMenuItem } from "./components/menus/DropdownMenuItem.svelte";
 export { default as Image } from "./components/Image.svelte";
 export { default as Icon } from "./components/Icon.svelte";
 // Motion
-export { default as AnimatedVisibility } from "./components/motion/AnimatedVisibility.svelte";
-export { default as AnimatedContent } from "./components/motion/AnimatedContent.svelte";
+export { default as AnimatedVisibility } from "./components/motion/motion/AnimatedVisibility.svelte";
+export { default as AnimatedContent } from "./components/motion/motion/AnimatedContent.svelte";
 // Navigation
 export { default as NavHost } from "./core/navigation/NavHost.svelte";
 // Custom
 export { default as CodeBlock } from "./components/custom/CodeBlock.svelte";
 // TS-only exports
 export * from "./core/modifier/Modifier";
+export * from "./core/shapes/RoundedCornerShape";
 export * from "./components/layouts/Alignment";
 export * from "./components/layouts/Arrangement";
 export * from "./components/ContentScale";

package/package.json

@@ -1,58 +1,73 @@
-{
-  "name": "@danielito1996/compose-svelted",
-  "version": "0.2.7",
-  "description": "Compose-like UI toolkit for Svelte, inspired by Jetpack Compose",
-  "license": "MIT",
-  "type": "module",
-  "author": "Daniel Imbert Tabares",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/danielitoCode/compose_svelted"
-  },
-  "homepage": "https://github.com/danielitoCode/compose_svelted#readme",
-  "bugs": {
-    "url": "https://github.com/danielitoCode/compose_svelted/issues"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "package": "svelte-package",
-    "prepublishOnly": "npm run package"
-  },
-
-  "devDependencies": {
-    "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "svelte": "^5.43.8",
-    "typescript": "^5.9.0",
-    "vite": "^5.4.0",
-    "tailwindcss": "^4.1.18",
-    "postcss": "^8.5.6",
-    "autoprefixer": "^10.4.23"
-  },
-
-  "keywords": [
-    "svelte",
-    "svelte-components",
-    "ui",
-    "compose",
-    "jetpack-compose",
-    "design-system"
-  ]
-}
+{
+  "name": "@danielito1996/compose-svelted",
+  "version": "0.2.8-alpha01",
+  "description": "Compose-like UI toolkit for Svelte, inspired by Jetpack Compose",
+  "license": "MIT",
+  "type": "module",
+  "author": "Daniel Imbert Tabares",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/danielitoCode/compose_svelted"
+  },
+  "homepage": "https://github.com/danielitoCode/compose_svelted#readme",
+  "bugs": {
+    "url": "https://github.com/danielitoCode/compose_svelted/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "svelte": "./dist/index.js"
+    },
+    "./baseline.css": "./dist/core/styles/baseline.css",
+    "./baseline-safe.css": "./dist/core/styles/baseline-safe.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "workspaces": [
+    "playground"
+  ],
+  "scripts": {
+    "dev": "npm run playground:dev",
+    "build": "npm run package",
+    "check": "svelte-check --tsconfig ./playground/tsconfig.app.json && tsc -p ./playground/tsconfig.node.json",
+    "package": "svelte-package",
+    "prepublishOnly": "npm run package",
+
+    "dev:playground": "npm --prefix playground run dev",
+    "playground:dev": "npm --prefix playground run dev",
+    "playground:build": "npm --prefix playground run build",
+    "playground:check": "npm run check"
+  },
+  "devDependencies": {
+    "@tsconfig/svelte": "^5.0.5",
+    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/node": "^24.10.1",
+    "svelte": "^5.43.8",
+    "svelte-check": "^4.3.4",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "keywords": [
+    "svelte",
+    "svelte-components",
+    "ui",
+    "compose",
+    "jetpack-compose",
+    "design-system"
+  ]
+}

package/dist/components/motion/AnimatedContent.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-    import type { ContentTransition } from "../../core/motion/ContentTransition";
-    import { fade } from "../../core/motion/contentTransitions";
-
-    export let targetState: any;
-    export let transition: ContentTransition = fade();
-
-    let currentKey = targetState;
-    let exiting = false;
-
-    let timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-    $: if (targetState !== currentKey) {
-        exiting = true;
-
-        if (timeoutId) clearTimeout(timeoutId);
-
-        timeoutId = setTimeout(() => {
-            currentKey = targetState;
-            exiting = false;
-            timeoutId = null;
-        }, transition.duration);
-    }
-</script>
-
-<div class="relative w-full h-full overflow-hidden">
-    <div
-            class={`w-full h-full transition-all ${
-      exiting ? transition.exit : transition.enter
-    }`}
-    >
-        <slot />
-    </div>
-</div>