@danielito1996/compose-svelted 0.2.3 → 0.2.6

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

@@ -0,0 +1,120 @@
+/**
+ * Material Design 3 - Type Scale
+ * Nombres EXACTOS a Jetpack Compose Material 3:
+ * displayLarge, displayMedium, displaySmall,
+ * headlineLarge, headlineMedium, headlineSmall,
+ * titleLarge, titleMedium, titleSmall,
+ * bodyLarge, bodyMedium, bodySmall,
+ * labelLarge, labelMedium, labelSmall
+ *
+ * Valores (size/lineHeight/letterSpacing/fontWeight) corresponden a MD3.
+ * fontFamily: system stack por defecto (overrideable por el consumidor).
+ */
+var fontFamily = "system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif";
+export var defaultTypography = {
+    displayLarge: {
+        fontFamily: fontFamily,
+        fontSize: "57px",
+        lineHeight: "64px",
+        letterSpacing: "-0.25px",
+        fontWeight: 400,
+    },
+    displayMedium: {
+        fontFamily: fontFamily,
+        fontSize: "45px",
+        lineHeight: "52px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    displaySmall: {
+        fontFamily: fontFamily,
+        fontSize: "36px",
+        lineHeight: "44px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    headlineLarge: {
+        fontFamily: fontFamily,
+        fontSize: "32px",
+        lineHeight: "40px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    headlineMedium: {
+        fontFamily: fontFamily,
+        fontSize: "28px",
+        lineHeight: "36px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    headlineSmall: {
+        fontFamily: fontFamily,
+        fontSize: "24px",
+        lineHeight: "32px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    titleLarge: {
+        fontFamily: fontFamily,
+        fontSize: "22px",
+        lineHeight: "28px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    titleMedium: {
+        fontFamily: fontFamily,
+        fontSize: "16px",
+        lineHeight: "24px",
+        letterSpacing: "0.15px",
+        fontWeight: 500,
+    },
+    titleSmall: {
+        fontFamily: fontFamily,
+        fontSize: "14px",
+        lineHeight: "20px",
+        letterSpacing: "0.1px",
+        fontWeight: 500,
+    },
+    bodyLarge: {
+        fontFamily: fontFamily,
+        fontSize: "16px",
+        lineHeight: "24px",
+        letterSpacing: "0.5px",
+        fontWeight: 400,
+    },
+    bodyMedium: {
+        fontFamily: fontFamily,
+        fontSize: "14px",
+        lineHeight: "20px",
+        letterSpacing: "0.25px",
+        fontWeight: 400,
+    },
+    bodySmall: {
+        fontFamily: fontFamily,
+        fontSize: "12px",
+        lineHeight: "16px",
+        letterSpacing: "0.4px",
+        fontWeight: 400,
+    },
+    labelLarge: {
+        fontFamily: fontFamily,
+        fontSize: "14px",
+        lineHeight: "20px",
+        letterSpacing: "0.1px",
+        fontWeight: 500,
+    },
+    labelMedium: {
+        fontFamily: fontFamily,
+        fontSize: "12px",
+        lineHeight: "16px",
+        letterSpacing: "0.5px",
+        fontWeight: 500,
+    },
+    labelSmall: {
+        fontFamily: fontFamily,
+        fontSize: "11px",
+        lineHeight: "16px",
+        letterSpacing: "0.5px",
+        fontWeight: 500,
+    },
+};

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

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

package/dist/core/theme/elevation.js

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

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

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

package/dist/core/theme/getCurrentColor.js

@@ -0,0 +1,9 @@
+import { get } from "svelte/store";
+import { resolvedTheme } from "./store";
+export function getCurrentColor(token) {
+    var theme = get(resolvedTheme);
+    if (!theme)
+        return "#2a2a2a"; // fallback
+    // Buscamos el token en el colorScheme actual
+    return theme.colorScheme[token] || "#2a2a2a";
+}

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

@@ -0,0 +1,5 @@
+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/resolve.js

@@ -0,0 +1,17 @@
+export var resolveColor = function (c) {
+    return "var(--md-sys-color-".concat(c, ")");
+};
+export function resolveTintColor(color) {
+    if (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl")) {
+        return color; // directo
+    }
+    // Para token del tema, resolvemos var a hex/RGB real usando getComputedStyle
+    var dummy = document.createElement("div");
+    dummy.style.color = resolveColor(color); // var(--...)
+    document.body.appendChild(dummy);
+    var computed = getComputedStyle(dummy).color; // rgb(...) o hex
+    document.body.removeChild(dummy);
+    return computed;
+}
+// Ahora resolvemos cada propiedad por separado
+export var resolveTextStyle = function (t) { return "\n    font-family: var(--md-sys-typescale-".concat(t, "-font-family);\n    font-size: var(--md-sys-typescale-").concat(t, "-font-size);\n    line-height: var(--md-sys-typescale-").concat(t, "-line-height);\n    letter-spacing: var(--md-sys-typescale-").concat(t, "-letter-spacing);\n    font-weight: var(--md-sys-typescale-").concat(t, "-font-weight);\n"); };

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

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

package/dist/core/theme/shapes.js

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

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

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

package/dist/core/theme/spacing.js

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

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

@@ -0,0 +1,7 @@
+import type { ComposeTheme, ThemeMode } from "./theme";
+export declare const themeState: import("svelte/store").Writable<{
+    light: ComposeTheme;
+    dark: ComposeTheme;
+    mode: ThemeMode;
+}>;
+export declare const resolvedTheme: import("svelte/store").Readable<ComposeTheme>;

package/dist/core/theme/store.js

@@ -0,0 +1,15 @@
+import { writable, derived } from "svelte/store";
+import { systemTheme } from "./systemTheme";
+export var themeState = writable(null);
+// 🔑 ESTE es el tema efectivo (como MaterialTheme)
+export var resolvedTheme = derived([themeState, systemTheme], function (_a) {
+    var $theme = _a[0], $system = _a[1];
+    if (!$theme)
+        return null;
+    var mode = $theme.mode === "system"
+        ? $system
+        : $theme.mode;
+    return mode === "dark"
+        ? $theme.dark
+        : $theme.light;
+});

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

@@ -0,0 +1,2 @@
+export type SystemTheme = "light" | "dark";
+export declare const systemTheme: import("svelte/store").Readable<SystemTheme>;

package/dist/core/theme/systemTheme.js

@@ -0,0 +1,14 @@
+import { readable } from "svelte/store";
+export var systemTheme = readable("light", function (set) {
+    if (typeof window === "undefined")
+        return;
+    var media = window.matchMedia("(prefers-color-scheme: dark)");
+    var update = function () {
+        set(media.matches ? "dark" : "light");
+    };
+    update(); // estado inicial
+    media.addEventListener("change", update);
+    return function () {
+        media.removeEventListener("change", update);
+    };
+});

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

@@ -0,0 +1,13 @@
+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/theme.js

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

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

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

package/dist/core/theme/typography.js

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

package/dist/index.d.ts

@@ -4,16 +4,12 @@
 
 import type { SvelteComponent } from "svelte";
 
-// =======================================
-// Root / Theme
-// =======================================
-
+// ---------- Svelte components (typed as components) ----------
 export class ComposeTheme extends SvelteComponent {}
 export class AppRoot extends SvelteComponent {}
 
-// =======================================
-// Layouts
-// =======================================
+export class Surface extends SvelteComponent {}
+export class Text extends SvelteComponent {}
 
 export class Column extends SvelteComponent {}
 export class Row extends SvelteComponent {}
@@ -23,12 +19,6 @@ export class LazyColumn extends SvelteComponent {}
 export class LazyRow extends SvelteComponent {}
 export class Scaffold extends SvelteComponent {}
 
-// =======================================
-// Core UI Components
-// =======================================
-
-export class Surface extends SvelteComponent {}
-export class Text extends SvelteComponent {}
 export class Button extends SvelteComponent {}
 export class TextButton extends SvelteComponent {}
 export class TonalButton extends SvelteComponent {}
@@ -47,50 +37,37 @@ export class OutlinedTextField extends SvelteComponent {}
 export class Image extends SvelteComponent {}
 export class Icon extends SvelteComponent {}
 
-// =======================================
-// Motion
-// =======================================
-
 export class AnimatedVisibility extends SvelteComponent {}
 export class AnimatedContent extends SvelteComponent {}
 
-// =======================================
-// Navigation
-// =======================================
-
 export class NavHost extends SvelteComponent {}
 
-// =======================================
-// Custom / Docs
-// =======================================
-
 export class CodeBlock extends SvelteComponent {}
 
-// =======================================
-// Tokens / Helpers (TypeScript only)
-// =======================================
-
-export * from "../lib/core/shapes/RoundedCornerShape";
-export * from "../lib/core/theme/ColorScheme";
-export * from "../lib/core/theme/TextStyle";
-export * from "../lib/core/theme/Density";
+// ---------- 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 "../lib/core/modifier/Modifier";
+export * from "./core/modifier/Modifier";
 
-export * from "../lib/components/layouts/Arrangement";
-export * from "../lib/components/layouts/Alignment";
-export * from "../lib/components/ContentScale";
+export * from "./components/layouts/Arrangement";
+export * from "./components/layouts/Alignment";
+export * from "./components/ContentScale";
 
-export * from "../lib/core/helpers/painterResource";
+export * from "./core/helpers/painterResource";
 
-export * from "../lib/core/motion/AnimationSpec";
-export * from "../lib/core/motion/transitions";
-export * from "../lib/core/motion/contentTransitions";
+export * from "./core/motion/AnimationSpec";
+export * from "./core/motion/transitions";
+export * from "./core/motion/contentTransitions";
 
-export * from "../lib/core/navigation/Route";
-export * from "../lib/core/navigation/NavController";
-export * from "../lib/core/navigation/rememberNavController";
-export * from "../lib/core/navigation/composable";
+export * from "./core/navigation/Route";
+export * from "./core/navigation/NavController";
+export * from "./core/navigation/rememberNavController";
+export * from "./core/navigation/composable";
 /*// =========================
 // COMPONENTS (Svelte)
 // =========================

package/package.json

@@ -1,27 +1,62 @@
 {
   "name": "@danielito1996/compose-svelted",
-  "version": "0.2.3",
-  "type": "module",
+  "version": "0.2.6",
+  "description": "Compose-like UI toolkit for Svelte, inspired by Jetpack Compose",
   "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"
+  "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",
       "default": "./dist/index.js"
     }
   },
-  "files": ["dist"],
+  "svelte": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
+
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "package": "svelte-package",
+    "prepublishOnly": "npm run package"
+  },
+
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "svelte": "^5.43.8"
-  }
+    "@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"
+  ]
 }