@danielito1996/compose-svelted 0.0.1 → 0.2.0

package/src/lib/core/theme/defaults/typography.ts

@@ -1,128 +0,0 @@
-import type { Typography } from "../typography";
-
-/**
- * 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).
- */
-const fontFamily =
-    "system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif";
-
-export const defaultTypography: Typography = {
-    displayLarge: {
-        fontFamily,
-        fontSize: "57px",
-        lineHeight: "64px",
-        letterSpacing: "-0.25px",
-        fontWeight: 400,
-    },
-    displayMedium: {
-        fontFamily,
-        fontSize: "45px",
-        lineHeight: "52px",
-        letterSpacing: "0px",
-        fontWeight: 400,
-    },
-    displaySmall: {
-        fontFamily,
-        fontSize: "36px",
-        lineHeight: "44px",
-        letterSpacing: "0px",
-        fontWeight: 400,
-    },
-
-    headlineLarge: {
-        fontFamily,
-        fontSize: "32px",
-        lineHeight: "40px",
-        letterSpacing: "0px",
-        fontWeight: 400,
-    },
-    headlineMedium: {
-        fontFamily,
-        fontSize: "28px",
-        lineHeight: "36px",
-        letterSpacing: "0px",
-        fontWeight: 400,
-    },
-    headlineSmall: {
-        fontFamily,
-        fontSize: "24px",
-        lineHeight: "32px",
-        letterSpacing: "0px",
-        fontWeight: 400,
-    },
-
-    titleLarge: {
-        fontFamily,
-        fontSize: "22px",
-        lineHeight: "28px",
-        letterSpacing: "0px",
-        fontWeight: 400,
-    },
-    titleMedium: {
-        fontFamily,
-        fontSize: "16px",
-        lineHeight: "24px",
-        letterSpacing: "0.15px",
-        fontWeight: 500,
-    },
-    titleSmall: {
-        fontFamily,
-        fontSize: "14px",
-        lineHeight: "20px",
-        letterSpacing: "0.1px",
-        fontWeight: 500,
-    },
-
-    bodyLarge: {
-        fontFamily,
-        fontSize: "16px",
-        lineHeight: "24px",
-        letterSpacing: "0.5px",
-        fontWeight: 400,
-    },
-    bodyMedium: {
-        fontFamily,
-        fontSize: "14px",
-        lineHeight: "20px",
-        letterSpacing: "0.25px",
-        fontWeight: 400,
-    },
-    bodySmall: {
-        fontFamily,
-        fontSize: "12px",
-        lineHeight: "16px",
-        letterSpacing: "0.4px",
-        fontWeight: 400,
-    },
-
-    labelLarge: {
-        fontFamily,
-        fontSize: "14px",
-        lineHeight: "20px",
-        letterSpacing: "0.1px",
-        fontWeight: 500,
-    },
-    labelMedium: {
-        fontFamily,
-        fontSize: "12px",
-        lineHeight: "16px",
-        letterSpacing: "0.5px",
-        fontWeight: 500,
-    },
-    labelSmall: {
-        fontFamily,
-        fontSize: "11px",
-        lineHeight: "16px",
-        letterSpacing: "0.5px",
-        fontWeight: 500,
-    },
-};

package/src/lib/core/theme/getCurrentColor.ts

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

package/src/lib/core/theme/resolve.ts

@@ -1,29 +0,0 @@
-import type { ColorToken } from "./ColorScheme";
-import type { TextStyleToken } from "./TextStyle";
-
-export const resolveColor = (c: ColorToken) =>
-    `var(--md-sys-color-${c})`;
-
-export function resolveTintColor(color: ColorToken | string): string {
-    if (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl")) {
-        return color; // directo
-    }
-
-    // Para token del tema, resolvemos var a hex/RGB real usando getComputedStyle
-    const dummy = document.createElement("div");
-    dummy.style.color = resolveColor(color as ColorToken); // var(--...)
-    document.body.appendChild(dummy);
-    const computed = getComputedStyle(dummy).color; // rgb(...) o hex
-    document.body.removeChild(dummy);
-
-    return computed;
-}
-
-// Ahora resolvemos cada propiedad por separado
-export const resolveTextStyle = (t: TextStyleToken) => `
-    font-family: var(--md-sys-typescale-${t}-font-family);
-    font-size: var(--md-sys-typescale-${t}-font-size);
-    line-height: var(--md-sys-typescale-${t}-line-height);
-    letter-spacing: var(--md-sys-typescale-${t}-letter-spacing);
-    font-weight: var(--md-sys-typescale-${t}-font-weight);
-`;

package/src/lib/core/theme/store.ts

@@ -1,26 +0,0 @@
-import { writable, derived } from "svelte/store";
-import type { ComposeTheme, ThemeMode } from "./theme";
-import { systemTheme } from "./systemTheme";
-
-export const themeState = writable<{
-    light: ComposeTheme;
-    dark: ComposeTheme;
-    mode: ThemeMode;
-} | null>(null);
-
-// 🔑 ESTE es el tema efectivo (como MaterialTheme)
-export const resolvedTheme = derived(
-    [themeState, systemTheme],
-    ([$theme, $system]) => {
-        if (!$theme) return null;
-
-        const mode =
-            $theme.mode === "system"
-                ? $system
-                : $theme.mode;
-
-        return mode === "dark"
-            ? $theme.dark
-            : $theme.light;
-    }
-);

package/src/lib/core/theme/systemTheme.ts

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

package/src/lib/index.ts

@@ -1,42 +0,0 @@
-// =========================
-// 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 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"
-
-// =========================
-// 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"

package/src/main.ts

@@ -1,9 +0,0 @@
-import { mount } from 'svelte'
-import './app.css'
-import App from './App.svelte'
-
-const app = mount(App, {
-  target: document.getElementById('app')!,
-})
-
-export default app

package/svelte.config.js

@@ -1,8 +0,0 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-
-/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
-export default {
-  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
-}

package/tsconfig.app.json

@@ -1,21 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "types": ["svelte", "vite/client"],
-    "noEmit": true,
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
-    "allowJs": true,
-    "checkJs": true,
-    "moduleDetection": "force"
-  },
-  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import tailwindcss from '@tailwindcss/vite'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-      svelte(),
-      tailwindcss(),
-  ],
-})