@danielito1996/compose-svelted 0.2.3 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/dist/components/AppRoot.svelte +15 -0
  2. package/dist/components/AppRoot.svelte.d.ts +30 -0
  3. package/dist/components/ContentScale.d.ts +10 -0
  4. package/dist/components/ContentScale.js +9 -0
  5. package/dist/components/Icon.svelte +47 -0
  6. package/dist/components/Icon.svelte.d.ts +24 -0
  7. package/dist/components/Image.svelte +31 -0
  8. package/dist/components/Image.svelte.d.ts +25 -0
  9. package/dist/components/Spacer.svelte +11 -0
  10. package/dist/components/Spacer.svelte.d.ts +24 -0
  11. package/dist/components/Surface.svelte +19 -0
  12. package/dist/components/Surface.svelte.d.ts +32 -0
  13. package/dist/components/Text.svelte +23 -0
  14. package/dist/components/Text.svelte.d.ts +34 -0
  15. package/dist/components/TonalButton.svelte +34 -0
  16. package/dist/components/TonalButton.svelte.d.ts +36 -0
  17. package/dist/components/buttons/Button.svelte +34 -0
  18. package/dist/components/buttons/Button.svelte.d.ts +36 -0
  19. package/dist/components/buttons/ButtonWithIcon.svelte +0 -0
  20. package/dist/components/buttons/ButtonWithIcon.svelte.d.ts +26 -0
  21. package/dist/components/buttons/CheckButton.svelte +77 -0
  22. package/dist/components/buttons/CheckButton.svelte.d.ts +35 -0
  23. package/dist/components/buttons/IconButton.svelte +0 -0
  24. package/dist/components/buttons/IconButton.svelte.d.ts +26 -0
  25. package/dist/components/buttons/OutlinedButton.svelte +0 -0
  26. package/dist/components/buttons/OutlinedButton.svelte.d.ts +26 -0
  27. package/dist/components/buttons/OutlinedButtonWithIcon.svelte +0 -0
  28. package/dist/components/buttons/OutlinedButtonWithIcon.svelte.d.ts +26 -0
  29. package/dist/components/buttons/OutlinedIconButton.svelte +0 -0
  30. package/dist/components/buttons/OutlinedIconButton.svelte.d.ts +26 -0
  31. package/dist/components/buttons/TextButton.svelte +0 -0
  32. package/dist/components/buttons/TextButton.svelte.d.ts +26 -0
  33. package/dist/components/cards/Card.svelte +26 -0
  34. package/dist/components/cards/Card.svelte.d.ts +33 -0
  35. package/dist/components/cards/OutlinedCard.svelte +0 -0
  36. package/dist/components/cards/OutlinedCard.svelte.d.ts +26 -0
  37. package/dist/components/custom/CodeBlock.svelte +41 -0
  38. package/dist/components/custom/CodeBlock.svelte.d.ts +32 -0
  39. package/dist/components/layouts/Alignment.d.ts +20 -0
  40. package/dist/components/layouts/Alignment.js +20 -0
  41. package/dist/components/layouts/Arrangement.d.ts +23 -0
  42. package/dist/components/layouts/Arrangement.js +46 -0
  43. package/dist/components/layouts/Box.svelte +25 -0
  44. package/dist/components/layouts/Box.svelte.d.ts +32 -0
  45. package/dist/components/layouts/Column.svelte +23 -0
  46. package/dist/components/layouts/Column.svelte.d.ts +34 -0
  47. package/dist/components/layouts/LazyColumn.svelte +107 -0
  48. package/dist/components/layouts/LazyColumn.svelte.d.ts +39 -0
  49. package/dist/components/layouts/LazyRow.svelte +71 -0
  50. package/dist/components/layouts/LazyRow.svelte.d.ts +42 -0
  51. package/dist/components/layouts/Row.svelte +23 -0
  52. package/dist/components/layouts/Row.svelte.d.ts +34 -0
  53. package/dist/components/layouts/Scaffold.svelte +73 -0
  54. package/dist/components/layouts/Scaffold.svelte.d.ts +38 -0
  55. package/dist/components/menus/DropdownMenu.svelte +0 -0
  56. package/dist/components/menus/DropdownMenu.svelte.d.ts +26 -0
  57. package/dist/components/menus/DropdownMenuItem.svelte +0 -0
  58. package/dist/components/menus/DropdownMenuItem.svelte.d.ts +26 -0
  59. package/dist/components/motion/AnimatedContent.svelte +34 -0
  60. package/dist/components/motion/AnimatedContent.svelte.d.ts +31 -0
  61. package/dist/components/motion/AnimatedVisibility.svelte +59 -0
  62. package/dist/components/motion/AnimatedVisibility.svelte.d.ts +32 -0
  63. package/dist/components/textFields/BaseTextField.svelte +188 -0
  64. package/dist/components/textFields/BaseTextField.svelte.d.ts +41 -0
  65. package/dist/components/textFields/OutlinedTextField.svelte +64 -0
  66. package/dist/components/textFields/OutlinedTextField.svelte.d.ts +46 -0
  67. package/dist/components/textFields/TextField.svelte +49 -0
  68. package/dist/components/textFields/TextField.svelte.d.ts +46 -0
  69. package/dist/components/textFields/TextFieldColors.d.ts +12 -0
  70. package/dist/components/textFields/TextFieldColors.js +1 -0
  71. package/dist/components/textFields/TextFieldDefaults.d.ts +11 -0
  72. package/dist/components/textFields/TextFieldDefaults.js +42 -0
  73. package/dist/core/elevation/elevation.d.ts +1 -0
  74. package/dist/core/elevation/elevation.js +6 -0
  75. package/dist/core/helpers/painterResource.d.ts +12 -0
  76. package/dist/core/helpers/painterResource.js +22 -0
  77. package/dist/core/modifier/Modifier.d.ts +195 -0
  78. package/dist/core/modifier/Modifier.js +237 -0
  79. package/dist/core/modifier/ModifierImpl.d.ts +38 -0
  80. package/dist/core/modifier/ModifierImpl.js +214 -0
  81. package/dist/core/motion/AnimationSpec.d.ts +6 -0
  82. package/dist/core/motion/AnimationSpec.js +1 -0
  83. package/dist/core/motion/ContentTransition.d.ts +5 -0
  84. package/dist/core/motion/ContentTransition.js +1 -0
  85. package/dist/core/motion/applyAnimation.d.ts +0 -0
  86. package/dist/core/motion/applyAnimation.js +0 -0
  87. package/dist/core/motion/contentTransitions.d.ts +4 -0
  88. package/dist/core/motion/contentTransitions.js +22 -0
  89. package/dist/core/motion/transitions.d.ts +7 -0
  90. package/dist/core/motion/transitions.js +70 -0
  91. package/dist/core/navigation/NavBackStackEntry.d.ts +4 -0
  92. package/dist/core/navigation/NavBackStackEntry.js +1 -0
  93. package/dist/core/navigation/NavController.d.ts +9 -0
  94. package/dist/core/navigation/NavController.js +31 -0
  95. package/dist/core/navigation/NavHost.svelte +45 -0
  96. package/dist/core/navigation/NavHost.svelte.d.ts +31 -0
  97. package/dist/core/navigation/NavStore.d.ts +7 -0
  98. package/dist/core/navigation/NavStore.js +24 -0
  99. package/dist/core/navigation/Route.d.ts +3 -0
  100. package/dist/core/navigation/Route.js +1 -0
  101. package/dist/core/navigation/composable.d.ts +5 -0
  102. package/dist/core/navigation/composable.js +6 -0
  103. package/dist/core/navigation/rememberNavController.d.ts +2 -0
  104. package/dist/core/navigation/rememberNavController.js +4 -0
  105. package/dist/core/shapes/RoundedCornerShape.d.ts +13 -0
  106. package/dist/core/shapes/RoundedCornerShape.js +27 -0
  107. package/dist/core/shapes/Shape.d.ts +3 -0
  108. package/dist/core/shapes/Shape.js +1 -0
  109. package/dist/core/theme/ColorScheme.d.ts +17 -0
  110. package/dist/core/theme/ColorScheme.js +15 -0
  111. package/dist/core/theme/ComposeTheme.svelte +22 -0
  112. package/dist/core/theme/ComposeTheme.svelte.d.ts +32 -0
  113. package/dist/core/theme/Density.d.ts +5 -0
  114. package/dist/core/theme/Density.js +4 -0
  115. package/dist/core/theme/TextStyle.d.ts +19 -0
  116. package/dist/core/theme/TextStyle.js +17 -0
  117. package/dist/core/theme/colors.d.ts +15 -0
  118. package/dist/core/theme/colors.js +1 -0
  119. package/dist/core/theme/cssVars.d.ts +2 -0
  120. package/dist/core/theme/cssVars.js +29 -0
  121. package/dist/core/theme/defaults/darkColors.d.ts +2 -0
  122. package/dist/core/theme/defaults/darkColors.js +15 -0
  123. package/dist/core/theme/defaults/defaultTheme.d.ts +3 -0
  124. package/dist/core/theme/defaults/defaultTheme.js +40 -0
  125. package/dist/core/theme/defaults/lightColors.d.ts +2 -0
  126. package/dist/core/theme/defaults/lightColors.js +15 -0
  127. package/dist/core/theme/defaults/typography.d.ts +2 -0
  128. package/dist/core/theme/defaults/typography.js +120 -0
  129. package/dist/core/theme/elevation.d.ts +7 -0
  130. package/dist/core/theme/elevation.js +1 -0
  131. package/dist/core/theme/getCurrentColor.d.ts +1 -0
  132. package/dist/core/theme/getCurrentColor.js +9 -0
  133. package/dist/core/theme/resolve.d.ts +5 -0
  134. package/dist/core/theme/resolve.js +17 -0
  135. package/dist/core/theme/shapes.d.ts +7 -0
  136. package/dist/core/theme/shapes.js +1 -0
  137. package/dist/core/theme/spacing.d.ts +7 -0
  138. package/dist/core/theme/spacing.js +1 -0
  139. package/dist/core/theme/store.d.ts +7 -0
  140. package/dist/core/theme/store.js +15 -0
  141. package/dist/core/theme/systemTheme.d.ts +2 -0
  142. package/dist/core/theme/systemTheme.js +14 -0
  143. package/dist/core/theme/theme.d.ts +13 -0
  144. package/dist/core/theme/theme.js +1 -0
  145. package/dist/core/theme/typography.d.ts +24 -0
  146. package/dist/core/theme/typography.js +1 -0
  147. package/dist/index.d.ts +22 -45
  148. package/package.json +46 -11
  149. package/dist/index.js +0 -1164
  150. package/dist/vite.svg +0 -1
File without changes
File without changes
@@ -0,0 +1,4 @@
1
+ import type { ContentTransition } from "./ContentTransition";
2
+ export declare function slideHorizontal(): ContentTransition;
3
+ export declare function scaleFade(): ContentTransition;
4
+ export declare function fade(duration?: number): ContentTransition;
@@ -0,0 +1,22 @@
1
+ export function slideHorizontal() {
2
+ return {
3
+ enter: "transition-transform duration-200 ease-out translate-x-0",
4
+ exit: "transition-transform duration-200 ease-in -translate-x-full",
5
+ duration: 200
6
+ };
7
+ }
8
+ export function scaleFade() {
9
+ return {
10
+ enter: "transition-all duration-220 ease-out opacity-100 scale-100",
11
+ exit: "transition-all duration-180 ease-in opacity-0 scale-95",
12
+ duration: 220
13
+ };
14
+ }
15
+ export function fade(duration) {
16
+ if (duration === void 0) { duration = 300; }
17
+ return {
18
+ enter: "animate-fade-in",
19
+ exit: "animate-fade-out",
20
+ duration: duration
21
+ };
22
+ }
@@ -0,0 +1,7 @@
1
+ import type { AnimationSpec } from "./AnimationSpec";
2
+ export declare function fadeIn(duration?: number): AnimationSpec;
3
+ export declare function fadeOut(duration?: number): AnimationSpec;
4
+ export declare function scaleIn(duration?: number): AnimationSpec;
5
+ export declare function scaleOut(duration?: number): AnimationSpec;
6
+ export declare function slideIn(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;
7
+ export declare function slideOut(duration?: number, direction?: "left" | "right" | "up" | "down"): AnimationSpec;
@@ -0,0 +1,70 @@
1
+ var defaultEnter = 280;
2
+ var defaultExit = 220;
3
+ export function fadeIn(duration) {
4
+ if (duration === void 0) { duration = defaultEnter; }
5
+ return {
6
+ base: "transition-opacity duration-[".concat(duration, "ms] ease-out"),
7
+ from: "opacity-0",
8
+ to: "opacity-100",
9
+ duration: duration
10
+ };
11
+ }
12
+ export function fadeOut(duration) {
13
+ if (duration === void 0) { duration = defaultExit; }
14
+ return {
15
+ base: "transition-opacity duration-[".concat(duration, "ms] ease-in"),
16
+ from: "opacity-100",
17
+ to: "opacity-0",
18
+ duration: duration
19
+ };
20
+ }
21
+ export function scaleIn(duration) {
22
+ if (duration === void 0) { duration = defaultEnter; }
23
+ return {
24
+ base: "transition-all duration-[".concat(duration, "ms] ease-out"),
25
+ from: "opacity-0 scale-95",
26
+ to: "opacity-100 scale-100",
27
+ duration: duration
28
+ };
29
+ }
30
+ export function scaleOut(duration) {
31
+ if (duration === void 0) { duration = defaultExit; }
32
+ return {
33
+ base: "transition-all duration-[".concat(duration, "ms] ease-in"),
34
+ from: "opacity-100 scale-100",
35
+ to: "opacity-0 scale-95",
36
+ duration: duration
37
+ };
38
+ }
39
+ export function slideIn(duration, direction) {
40
+ if (duration === void 0) { duration = defaultEnter; }
41
+ if (direction === void 0) { direction = "right"; }
42
+ var fromMap = {
43
+ left: "-translate-x-4",
44
+ right: "translate-x-4",
45
+ up: "-translate-y-4",
46
+ down: "translate-y-4"
47
+ };
48
+ return {
49
+ base: "transition-all duration-[".concat(duration, "ms] ease-out"),
50
+ from: "opacity-0 ".concat(fromMap[direction]),
51
+ to: "opacity-100 translate-x-0 translate-y-0",
52
+ duration: duration
53
+ };
54
+ }
55
+ export function slideOut(duration, direction) {
56
+ if (duration === void 0) { duration = defaultExit; }
57
+ if (direction === void 0) { direction = "right"; }
58
+ var toMap = {
59
+ left: "-translate-x-4",
60
+ right: "translate-x-4",
61
+ up: "-translate-y-4",
62
+ down: "translate-y-4"
63
+ };
64
+ return {
65
+ base: "transition-all duration-[".concat(duration, "ms] ease-in"),
66
+ from: "opacity-100 translate-x-0 translate-y-0",
67
+ to: "opacity-0 ".concat(toMap[direction]),
68
+ duration: duration
69
+ };
70
+ }
@@ -0,0 +1,4 @@
1
+ export type NavBackStackEntry<T = unknown> = {
2
+ route: string;
3
+ args?: T;
4
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,9 @@
1
+ import { type Writable } from "svelte/store";
2
+ import type { NavBackStackEntry } from "./NavBackStackEntry";
3
+ export declare class NavController {
4
+ private readonly stackStore;
5
+ constructor(startDestination: string);
6
+ _getStackStore(): Writable<NavBackStackEntry[]>;
7
+ navigate<T = unknown>(route: string, args?: T): void;
8
+ popBackStack(): void;
9
+ }
@@ -0,0 +1,31 @@
1
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
2
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
3
+ if (ar || !(i in from)) {
4
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
5
+ ar[i] = from[i];
6
+ }
7
+ }
8
+ return to.concat(ar || Array.prototype.slice.call(from));
9
+ };
10
+ import { writable } from "svelte/store";
11
+ var NavController = /** @class */ (function () {
12
+ function NavController(startDestination) {
13
+ this.stackStore = writable([
14
+ { route: startDestination }
15
+ ]);
16
+ }
17
+ // ✅ siempre devuelve EL MISMO store
18
+ NavController.prototype._getStackStore = function () {
19
+ return this.stackStore;
20
+ };
21
+ NavController.prototype.navigate = function (route, args) {
22
+ this.stackStore.update(function (s) { return __spreadArray(__spreadArray([], s, true), [{ route: route, args: args }], false); });
23
+ };
24
+ NavController.prototype.popBackStack = function () {
25
+ this.stackStore.update(function (s) {
26
+ return s.length > 1 ? s.slice(0, -1) : s;
27
+ });
28
+ };
29
+ return NavController;
30
+ }());
31
+ export { NavController };
@@ -0,0 +1,45 @@
1
+ <script lang="ts">
2
+ import { Modifier } from "../modifier/Modifier";
3
+ import type { NavController } from "./NavController";
4
+ import AnimatedContent from "../../components/motion/AnimatedContent.svelte";
5
+ import type { ContentTransition } from "../motion/ContentTransition";
6
+ import { fade } from "../motion/contentTransitions";
7
+
8
+ export let navController: NavController;
9
+
10
+ export let routes: {
11
+ route: { path: string };
12
+ component: any;
13
+ }[];
14
+
15
+ // 🔹 Transición única, Compose-like
16
+ export let transition: ContentTransition = fade(320);
17
+
18
+ export let modifier: Modifier = Modifier.empty();
19
+
20
+ // 🔹 Store interno (estable)
21
+ const stackStore = navController._getStackStore();
22
+
23
+ $: stack = $stackStore;
24
+ $: currentEntry = stack.at(-1);
25
+
26
+ $: active =
27
+ routes.find(r => r.route.path === currentEntry?.route);
28
+ </script>
29
+
30
+ <div style={modifier.toStyle()}>
31
+ <AnimatedContent
32
+ targetState={currentEntry?.route}
33
+ transition={transition}
34
+ modifier={Modifier.fillMaxSize()}
35
+ let:value
36
+ >
37
+ {#if active}
38
+ <svelte:component
39
+ this={active.component}
40
+ navController={navController}
41
+ navBackStackEntry={currentEntry}
42
+ />
43
+ {/if}
44
+ </AnimatedContent>
45
+ </div>
@@ -0,0 +1,31 @@
1
+ import { Modifier } from "../modifier/Modifier";
2
+ import type { NavController } from "./NavController";
3
+ import type { ContentTransition } from "../motion/ContentTransition";
4
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
14
+ };
15
+ z_$$bindings?: Bindings;
16
+ }
17
+ declare const NavHost: $$__sveltets_2_IsomorphicComponent<{
18
+ navController: NavController;
19
+ routes: {
20
+ route: {
21
+ path: string;
22
+ };
23
+ component: any;
24
+ }[];
25
+ transition?: ContentTransition;
26
+ modifier?: Modifier;
27
+ }, {
28
+ [evt: string]: CustomEvent<any>;
29
+ }, {}, {}, string>;
30
+ type NavHost = InstanceType<typeof NavHost>;
31
+ export default NavHost;
@@ -0,0 +1,7 @@
1
+ import type { NavBackStackEntry } from "./NavBackStackEntry";
2
+ export declare function createNavStore(startDestination: string): {
3
+ stack: import("svelte/store").Writable<NavBackStackEntry[]>;
4
+ navigate<T = unknown>(route: string, args?: T): void;
5
+ pop(): void;
6
+ };
7
+ export type NavStore = ReturnType<typeof createNavStore>;
@@ -0,0 +1,24 @@
1
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
2
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
3
+ if (ar || !(i in from)) {
4
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
5
+ ar[i] = from[i];
6
+ }
7
+ }
8
+ return to.concat(ar || Array.prototype.slice.call(from));
9
+ };
10
+ import { writable } from "svelte/store";
11
+ export function createNavStore(startDestination) {
12
+ var stack = writable([
13
+ { route: startDestination }
14
+ ]);
15
+ return {
16
+ stack: stack,
17
+ navigate: function (route, args) {
18
+ stack.update(function (s) { return __spreadArray(__spreadArray([], s, true), [{ route: route, args: args }], false); });
19
+ },
20
+ pop: function () {
21
+ stack.update(function (s) { return (s.length > 1 ? s.slice(0, -1) : s); });
22
+ }
23
+ };
24
+ }
@@ -0,0 +1,3 @@
1
+ export type Route<T = unknown> = {
2
+ path: string;
3
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,5 @@
1
+ import type { Route } from "./Route";
2
+ export declare function composable<T>(route: Route<T>, factory: () => any): {
3
+ route: Route<T>;
4
+ component: any;
5
+ };
@@ -0,0 +1,6 @@
1
+ export function composable(route, factory) {
2
+ return {
3
+ route: route,
4
+ component: factory()
5
+ };
6
+ }
@@ -0,0 +1,2 @@
1
+ import { NavController } from "./NavController";
2
+ export declare function rememberNavController(startDestination: string): NavController;
@@ -0,0 +1,4 @@
1
+ import { NavController } from "./NavController";
2
+ export function rememberNavController(startDestination) {
3
+ return new NavController(startDestination);
4
+ }
@@ -0,0 +1,13 @@
1
+ import type { Shape } from "./Shape";
2
+ type CornerSize = number | string;
3
+ type RoundedCornerParams = CornerSize | {
4
+ topStart?: CornerSize;
5
+ topEnd?: CornerSize;
6
+ bottomEnd?: CornerSize;
7
+ bottomStart?: CornerSize;
8
+ };
9
+ /**
10
+ * Compose-like factory
11
+ */
12
+ export declare function RoundedCornerShape(params: RoundedCornerParams): Shape;
13
+ export {};
@@ -0,0 +1,27 @@
1
+ function toCss(value) {
2
+ if (value === undefined)
3
+ return "0px";
4
+ return typeof value === "number" ? "".concat(value, "px") : value;
5
+ }
6
+ var RoundedCornerShapeImpl = /** @class */ (function () {
7
+ function RoundedCornerShapeImpl(params) {
8
+ this.params = params;
9
+ }
10
+ RoundedCornerShapeImpl.prototype.toCssBorderRadius = function () {
11
+ // Caso: un solo valor → todas las esquinas
12
+ if (typeof this.params === "number" || typeof this.params === "string") {
13
+ var v = toCss(this.params);
14
+ return "".concat(v, " ").concat(v, " ").concat(v, " ").concat(v);
15
+ }
16
+ var _a = this.params, _b = _a.topStart, topStart = _b === void 0 ? 0 : _b, _c = _a.topEnd, topEnd = _c === void 0 ? 0 : _c, _d = _a.bottomEnd, bottomEnd = _d === void 0 ? 0 : _d, _e = _a.bottomStart, bottomStart = _e === void 0 ? 0 : _e;
17
+ // CSS: top-left, top-right, bottom-right, bottom-left
18
+ return "\n ".concat(toCss(topStart), "\n ").concat(toCss(topEnd), "\n ").concat(toCss(bottomEnd), "\n ").concat(toCss(bottomStart), "\n ").trim();
19
+ };
20
+ return RoundedCornerShapeImpl;
21
+ }());
22
+ /**
23
+ * Compose-like factory
24
+ */
25
+ export function RoundedCornerShape(params) {
26
+ return new RoundedCornerShapeImpl(params);
27
+ }
@@ -0,0 +1,3 @@
1
+ export interface Shape {
2
+ toCssBorderRadius(): string;
3
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,17 @@
1
+ import type { ColorScheme as Def } from "./colors";
2
+ export type ColorToken = keyof Def;
3
+ export declare const ColorScheme: {
4
+ readonly Primary: "primary";
5
+ readonly OnPrimary: "onPrimary";
6
+ readonly Secondary: "secondary";
7
+ readonly OnSecondary: "onSecondary";
8
+ readonly Background: "background";
9
+ readonly OnBackground: "onBackground";
10
+ readonly Surface: "surface";
11
+ readonly OnSurface: "onSurface";
12
+ readonly SurfaceVariant: "surfaceVariant";
13
+ readonly OnSurfaceVariant: "onSurfaceVariant";
14
+ readonly Outline: "outline";
15
+ readonly Error: "error";
16
+ readonly OnError: "onError";
17
+ };
@@ -0,0 +1,15 @@
1
+ export var ColorScheme = {
2
+ Primary: "primary",
3
+ OnPrimary: "onPrimary",
4
+ Secondary: "secondary",
5
+ OnSecondary: "onSecondary",
6
+ Background: "background",
7
+ OnBackground: "onBackground",
8
+ Surface: "surface",
9
+ OnSurface: "onSurface",
10
+ SurfaceVariant: "surfaceVariant",
11
+ OnSurfaceVariant: "onSurfaceVariant",
12
+ Outline: "outline",
13
+ Error: "error",
14
+ OnError: "onError",
15
+ };
@@ -0,0 +1,22 @@
1
+ <script lang="ts">
2
+ import { themeState, resolvedTheme } from "./store";
3
+ import { themeToCssVars } from "./cssVars";
4
+ import { defaultLightTheme, defaultDarkTheme } from "./defaults/defaultTheme";
5
+ import type { ComposeTheme as Theme, ThemeMode } from "./theme";
6
+
7
+ export let light: Theme | undefined = undefined;
8
+ export let dark: Theme | undefined = undefined;
9
+ export let mode: ThemeMode = "system";
10
+
11
+ $: themeState.set({
12
+ light: light ?? defaultLightTheme,
13
+ dark: dark ?? defaultDarkTheme,
14
+ mode,
15
+ });
16
+
17
+ $: css = $resolvedTheme ? themeToCssVars($resolvedTheme) : "";
18
+ </script>
19
+
20
+ <div style={css}>
21
+ <slot />
22
+ </div>
@@ -0,0 +1,32 @@
1
+ import type { ComposeTheme as Theme, ThemeMode } from "./theme";
2
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
3
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
16
+ default: any;
17
+ } ? Props extends Record<string, never> ? any : {
18
+ children?: any;
19
+ } : {});
20
+ declare const ComposeTheme: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
21
+ light?: Theme | undefined;
22
+ dark?: Theme | undefined;
23
+ mode?: ThemeMode;
24
+ }, {
25
+ default: {};
26
+ }>, {
27
+ [evt: string]: CustomEvent<any>;
28
+ }, {
29
+ default: {};
30
+ }, {}, string>;
31
+ type ComposeTheme = InstanceType<typeof ComposeTheme>;
32
+ export default ComposeTheme;
@@ -0,0 +1,5 @@
1
+ export declare const Density: {
2
+ readonly Default: "default";
3
+ readonly Compact: "compact";
4
+ };
5
+ export type DensityToken = typeof Density[keyof typeof Density];
@@ -0,0 +1,4 @@
1
+ export var Density = {
2
+ Default: "default",
3
+ Compact: "compact",
4
+ };
@@ -0,0 +1,19 @@
1
+ import type { Typography } from "./typography";
2
+ export type TextStyleToken = keyof Typography;
3
+ export declare const TextStyle: {
4
+ readonly DisplayLarge: "displayLarge";
5
+ readonly DisplayMedium: "displayMedium";
6
+ readonly DisplaySmall: "displaySmall";
7
+ readonly HeadlineLarge: "headlineLarge";
8
+ readonly HeadlineMedium: "headlineMedium";
9
+ readonly HeadlineSmall: "headlineSmall";
10
+ readonly TitleLarge: "titleLarge";
11
+ readonly TitleMedium: "titleMedium";
12
+ readonly TitleSmall: "titleSmall";
13
+ readonly BodyLarge: "bodyLarge";
14
+ readonly BodyMedium: "bodyMedium";
15
+ readonly BodySmall: "bodySmall";
16
+ readonly LabelLarge: "labelLarge";
17
+ readonly LabelMedium: "labelMedium";
18
+ readonly LabelSmall: "labelSmall";
19
+ };
@@ -0,0 +1,17 @@
1
+ export var TextStyle = {
2
+ DisplayLarge: "displayLarge",
3
+ DisplayMedium: "displayMedium",
4
+ DisplaySmall: "displaySmall",
5
+ HeadlineLarge: "headlineLarge",
6
+ HeadlineMedium: "headlineMedium",
7
+ HeadlineSmall: "headlineSmall",
8
+ TitleLarge: "titleLarge",
9
+ TitleMedium: "titleMedium",
10
+ TitleSmall: "titleSmall",
11
+ BodyLarge: "bodyLarge",
12
+ BodyMedium: "bodyMedium",
13
+ BodySmall: "bodySmall",
14
+ LabelLarge: "labelLarge",
15
+ LabelMedium: "labelMedium",
16
+ LabelSmall: "labelSmall",
17
+ };
@@ -0,0 +1,15 @@
1
+ export interface ColorScheme {
2
+ primary: string;
3
+ onPrimary: string;
4
+ secondary: string;
5
+ onSecondary: string;
6
+ background: string;
7
+ onBackground: string;
8
+ surface: string;
9
+ onSurface: string;
10
+ surfaceVariant: string;
11
+ onSurfaceVariant: string;
12
+ outline: string;
13
+ error: string;
14
+ onError: string;
15
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ import type { ComposeTheme } from "./theme";
2
+ export declare function themeToCssVars(theme: ComposeTheme): string;
@@ -0,0 +1,29 @@
1
+ export function themeToCssVars(theme) {
2
+ var vars = [];
3
+ Object.entries(theme.colorScheme).forEach(function (_a) {
4
+ var k = _a[0], v = _a[1];
5
+ return vars.push("--md-sys-color-".concat(k, ": ").concat(v, ";"));
6
+ });
7
+ // === Tipografía: una variable por cada propiedad (¡esto soluciona el bug!) ===
8
+ Object.entries(theme.typography).forEach(function (_a) {
9
+ var styleKey = _a[0], style = _a[1];
10
+ vars.push("--md-sys-typescale-".concat(styleKey, "-font-family: ").concat(style.fontFamily, ";"));
11
+ vars.push("--md-sys-typescale-".concat(styleKey, "-font-size: ").concat(style.fontSize, ";"));
12
+ vars.push("--md-sys-typescale-".concat(styleKey, "-line-height: ").concat(style.lineHeight, ";"));
13
+ vars.push("--md-sys-typescale-".concat(styleKey, "-letter-spacing: ").concat(style.letterSpacing, ";"));
14
+ vars.push("--md-sys-typescale-".concat(styleKey, "-font-weight: ").concat(style.fontWeight, ";"));
15
+ });
16
+ Object.entries(theme.shapes).forEach(function (_a) {
17
+ var k = _a[0], v = _a[1];
18
+ return vars.push("--md-sys-shape-".concat(k, ": ").concat(v, ";"));
19
+ });
20
+ Object.entries(theme.elevation).forEach(function (_a) {
21
+ var k = _a[0], v = _a[1];
22
+ return vars.push("--md-sys-elevation-".concat(k, ": ").concat(v, ";"));
23
+ });
24
+ Object.entries(theme.spacing).forEach(function (_a) {
25
+ var k = _a[0], v = _a[1];
26
+ return vars.push("--md-sys-spacing-".concat(k, ": ").concat(v, ";"));
27
+ });
28
+ return vars.join("\n");
29
+ }
@@ -0,0 +1,2 @@
1
+ import type { ColorScheme } from "../colors";
2
+ export declare const darkColors: ColorScheme;
@@ -0,0 +1,15 @@
1
+ export var darkColors = {
2
+ primary: "#FC4B19",
3
+ onPrimary: "#E6E6E6",
4
+ secondary: "#3A3E49",
5
+ onSecondary: "#E6E6E6",
6
+ background: "#080808",
7
+ onBackground: "#E6E6E6",
8
+ surface: "#101010",
9
+ onSurface: "#E6E6E6",
10
+ surfaceVariant: "#1E1E1E",
11
+ onSurfaceVariant: "#CAC4D0",
12
+ outline: "#4A4A4A",
13
+ error: "#FF6F61",
14
+ onError: "#080808",
15
+ };
@@ -0,0 +1,3 @@
1
+ import type { ComposeTheme } from "../theme";
2
+ export declare const defaultLightTheme: ComposeTheme;
3
+ export declare const defaultDarkTheme: ComposeTheme;
@@ -0,0 +1,40 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { lightColors } from "./lightColors";
13
+ import { darkColors } from "./darkColors";
14
+ import { defaultTypography } from "./typography";
15
+ export var defaultLightTheme = {
16
+ colorScheme: lightColors,
17
+ typography: defaultTypography,
18
+ shapes: {
19
+ none: "0px",
20
+ extraSmall: "4px",
21
+ small: "8px",
22
+ medium: "12px",
23
+ large: "16px",
24
+ },
25
+ spacing: {
26
+ xs: "4px",
27
+ sm: "8px",
28
+ md: "16px",
29
+ lg: "24px",
30
+ xl: "32px",
31
+ },
32
+ elevation: {
33
+ level0: "none",
34
+ level1: "0 1px 2px rgba(0,0,0,0.2)",
35
+ level2: "0 2px 6px rgba(0,0,0,0.2)",
36
+ level3: "0 6px 12px rgba(0,0,0,0.25)",
37
+ level4: "0 12px 24px rgba(0,0,0,0.3)",
38
+ },
39
+ };
40
+ export var defaultDarkTheme = __assign(__assign({}, defaultLightTheme), { colorScheme: darkColors });
@@ -0,0 +1,2 @@
1
+ import type { ColorScheme } from "../colors";
2
+ export declare const lightColors: ColorScheme;
@@ -0,0 +1,15 @@
1
+ export var lightColors = {
2
+ primary: "#FF732F", // Violeta más intenso
3
+ onPrimary: "#FFFBF2",
4
+ secondary: "#3A3E49", // Teal vibrante
5
+ onSecondary: "#FFFFFF",
6
+ background: "#FFFBF2",
7
+ onBackground: "#1C1B1F",
8
+ surface: "#FFFFFF",
9
+ onSurface: "#1C1B1F",
10
+ surfaceVariant: "#F8F9FA",
11
+ onSurfaceVariant: "#DEE1E6",
12
+ outline: "#B0B0B0",
13
+ error: "#BA1A1A",
14
+ onError: "#FFFFFF",
15
+ };
@@ -0,0 +1,2 @@
1
+ import type { Typography } from "../typography";
2
+ export declare const defaultTypography: Typography;