@svelte-atoms/core 1.0.0-alpha.31 → 1.0.0-alpha.33

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 (136) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +289 -853
  3. package/dist/attachments/index.d.ts +1 -0
  4. package/dist/attachments/index.js +1 -0
  5. package/dist/components/accordion/accordion-root.svelte +65 -65
  6. package/dist/components/accordion/accordion.stories.svelte +70 -70
  7. package/dist/components/accordion/item/accordion-item-body.svelte +44 -44
  8. package/dist/components/accordion/item/accordion-item-header.svelte +51 -51
  9. package/dist/components/accordion/item/accordion-item-indicator.svelte +51 -51
  10. package/dist/components/accordion/item/accordion-item-root.svelte +66 -66
  11. package/dist/components/alert/alert-close-button.svelte +66 -66
  12. package/dist/components/alert/alert-description.svelte +42 -42
  13. package/dist/components/alert/alert-root.svelte +68 -68
  14. package/dist/components/atom/html-atom.svelte +26 -194
  15. package/dist/components/atom/types.d.ts +3 -2
  16. package/dist/components/atom/utils.d.ts +37 -0
  17. package/dist/components/atom/utils.js +208 -0
  18. package/dist/components/breadcrumb/breadcrumb-item.svelte +1 -1
  19. package/dist/components/breadcrumb/breadcrumb-separator.svelte +5 -1
  20. package/dist/components/breadcrumb/breadcrumb.stories.svelte +16 -16
  21. package/dist/components/calendar/calendar-day.svelte +101 -101
  22. package/dist/components/checkbox/checkbox.svelte +159 -159
  23. package/dist/components/collapsible/bond.svelte.js +2 -1
  24. package/dist/components/collapsible/collapsible-body.svelte +3 -2
  25. package/dist/components/collapsible/motion.svelte.d.ts +6 -0
  26. package/dist/components/collapsible/motion.svelte.js +15 -0
  27. package/dist/components/combobox/atoms.d.ts +3 -3
  28. package/dist/components/combobox/atoms.js +3 -3
  29. package/dist/components/combobox/bond.svelte.d.ts +6 -6
  30. package/dist/components/combobox/bond.svelte.js +3 -26
  31. package/dist/components/combobox/combobox-control.svelte +52 -52
  32. package/dist/components/combobox/{compobox-item.svelte → combobox-item.svelte} +62 -68
  33. package/dist/components/combobox/combobox-item.svelte.d.ts +12 -0
  34. package/dist/components/combobox/combobox.stories.svelte +50 -0
  35. package/dist/components/combobox/combobox.stories.svelte.d.ts +3 -0
  36. package/dist/components/datagrid/tr/datagrid-tr.svelte +90 -90
  37. package/dist/components/date-picker/bond.svelte.d.ts +15 -5
  38. package/dist/components/date-picker/bond.svelte.js +6 -11
  39. package/dist/components/date-picker/date-picker-calendar.svelte +1 -8
  40. package/dist/components/dialog/bond.svelte.js +5 -20
  41. package/dist/components/dialog/dialog-content.svelte +44 -44
  42. package/dist/components/dialog/dialog-root.svelte +91 -91
  43. package/dist/components/drawer/bond.svelte.d.ts +18 -16
  44. package/dist/components/drawer/bond.svelte.js +8 -18
  45. package/dist/components/drawer/drawer-content.svelte +49 -49
  46. package/dist/components/drawer/drawer-root.svelte +5 -4
  47. package/dist/components/drawer/drawer.stories.svelte +141 -144
  48. package/dist/components/drawer/motion.js +1 -1
  49. package/dist/components/dropdown/atoms.d.ts +1 -1
  50. package/dist/components/dropdown/atoms.js +1 -1
  51. package/dist/components/dropdown/bond.svelte.d.ts +21 -22
  52. package/dist/components/dropdown/bond.svelte.js +29 -53
  53. package/dist/components/dropdown/dropdown-root.svelte +65 -59
  54. package/dist/components/dropdown/dropdown-values.svelte +17 -17
  55. package/dist/components/dropdown/dropdown-values.svelte.d.ts +1 -2
  56. package/dist/components/dropdown/dropdown.stories.svelte +83 -80
  57. package/dist/components/dropdown/index.d.ts +1 -0
  58. package/dist/components/dropdown/index.js +1 -0
  59. package/dist/components/dropdown/item/attachments.svelte.d.ts +2 -2
  60. package/dist/components/dropdown/item/attachments.svelte.js +2 -2
  61. package/dist/components/dropdown/item/controller.svelte.d.ts +34 -0
  62. package/dist/components/dropdown/item/controller.svelte.js +82 -0
  63. package/dist/components/dropdown/item/dropdown-item.svelte +109 -102
  64. package/dist/components/dropdown/item/dropdown-item.svelte.d.ts +13 -28
  65. package/dist/components/dropdown/item/index.d.ts +3 -0
  66. package/dist/components/dropdown/item/index.js +3 -0
  67. package/dist/components/dropdown/item/types.d.ts +29 -0
  68. package/dist/components/dropdown/item/types.js +1 -0
  69. package/dist/components/list/list-item.svelte +20 -20
  70. package/dist/components/menu/atoms.d.ts +8 -3
  71. package/dist/components/menu/atoms.js +8 -3
  72. package/dist/components/menu/bond.svelte.d.ts +54 -0
  73. package/dist/components/menu/bond.svelte.js +132 -0
  74. package/dist/components/menu/index.d.ts +1 -0
  75. package/dist/components/menu/index.js +1 -0
  76. package/dist/components/menu/item/controller.svelte.d.ts +26 -0
  77. package/dist/components/menu/item/controller.svelte.js +69 -0
  78. package/dist/components/menu/item/index.d.ts +2 -0
  79. package/dist/components/menu/item/index.js +2 -0
  80. package/dist/components/menu/item/menu-item.svelte +103 -0
  81. package/dist/components/menu/item/menu-item.svelte.d.ts +31 -0
  82. package/dist/components/menu/item/types.d.ts +62 -0
  83. package/dist/components/menu/item/types.js +1 -0
  84. package/dist/components/menu/{menu-list.svelte → menu-content.svelte} +40 -40
  85. package/dist/components/menu/{menu-list.svelte.d.ts → menu-content.svelte.d.ts} +3 -3
  86. package/dist/components/menu/menu-root.svelte +15 -0
  87. package/dist/components/menu/menu-root.svelte.d.ts +8 -0
  88. package/dist/components/menu/menu.stories.svelte +33 -33
  89. package/dist/components/menu/types.d.ts +0 -7
  90. package/dist/components/popover/bond.svelte.d.ts +11 -14
  91. package/dist/components/popover/bond.svelte.js +27 -44
  92. package/dist/components/popover/popover-content.svelte +137 -137
  93. package/dist/components/popover/popover.stories.svelte +37 -49
  94. package/dist/components/portal/active-portal.svelte +29 -29
  95. package/dist/components/portal/portal-root.svelte +76 -76
  96. package/dist/components/portal/teleport.svelte +49 -49
  97. package/dist/components/radio/radio.svelte +109 -109
  98. package/dist/components/root/index.d.ts +1 -0
  99. package/dist/components/root/index.js +1 -0
  100. package/dist/components/root/l0-portal.svelte +8 -0
  101. package/dist/components/root/l0-portal.svelte.d.ts +26 -0
  102. package/dist/components/root/l1-portal.svelte +7 -0
  103. package/dist/components/root/l1-portal.svelte.d.ts +26 -0
  104. package/dist/components/root/root.css +119 -119
  105. package/dist/components/root/root.svelte +17 -18
  106. package/dist/components/root/root.svelte.d.ts +2 -6
  107. package/dist/components/root/toasts-portal.svelte +7 -0
  108. package/dist/components/root/toasts-portal.svelte.d.ts +26 -0
  109. package/dist/components/root/types.d.ts +17 -0
  110. package/dist/components/sidebar/motion.svelte.js +3 -3
  111. package/dist/components/sidebar/sidebar-content.svelte +40 -40
  112. package/dist/components/textarea/textarea-input.svelte +9 -9
  113. package/dist/components/textarea/textarea-root.svelte +9 -9
  114. package/dist/components/tooltip/tooltip-trigger.svelte +39 -39
  115. package/dist/components/tree/index.d.ts +1 -0
  116. package/dist/components/tree/index.js +1 -0
  117. package/dist/components/tree/motion.svelte.d.ts +6 -0
  118. package/dist/components/tree/motion.svelte.js +14 -0
  119. package/dist/components/tree/tree-body.svelte +4 -3
  120. package/dist/context/preset.svelte.d.ts +3 -1
  121. package/dist/icons/icon-copy.svelte +6 -6
  122. package/dist/utils/dom.svelte.d.ts +2 -0
  123. package/dist/utils/dom.svelte.js +21 -0
  124. package/dist/utils/function.d.ts +1 -1
  125. package/dist/utils/promise.svelte.d.ts +5 -0
  126. package/dist/utils/promise.svelte.js +20 -0
  127. package/package.json +4 -2
  128. package/dist/components/combobox/compobox-item.svelte.d.ts +0 -34
  129. package/dist/components/combobox/compobox.stories.svelte +0 -51
  130. package/dist/components/combobox/compobox.stories.svelte.d.ts +0 -3
  131. package/dist/components/dropdown/item/bond.svelte.d.ts +0 -42
  132. package/dist/components/dropdown/item/bond.svelte.js +0 -99
  133. package/dist/components/menu/menu-item.svelte +0 -69
  134. package/dist/components/menu/menu-item.svelte.d.ts +0 -37
  135. package/dist/utils/markdown-to-llm.d.ts +0 -28
  136. package/dist/utils/markdown-to-llm.js +0 -76
@@ -1,109 +1,109 @@
1
- <script lang="ts">
2
- import { getRadioGroupContext } from './context';
3
- import { Stack } from '../stack';
4
- import { toClassValue } from '../../utils';
5
- import { HtmlAtom, type Base } from '../atom';
6
-
7
- const radioGroupContext = getRadioGroupContext();
8
-
9
- let {
10
- class: klass = '',
11
- value = $bindable(undefined),
12
- group = $bindable(),
13
- id = undefined,
14
- name = undefined,
15
- disabled = false,
16
- required = false,
17
- readonly = false,
18
- onchange = undefined,
19
- oninput = undefined,
20
- checkedContent = undefined,
21
- ...restProps
22
- } = $props();
23
-
24
- const _disabled = $derived(radioGroupContext?.disabled);
25
- const _required = $derived(radioGroupContext?.required);
26
- const _readonly = $derived(radioGroupContext?.readonly);
27
- const _name = $derived(radioGroupContext?.name);
28
-
29
- const proxy = {
30
- get current() {
31
- return radioGroupContext?.value ?? group;
32
- },
33
- set current(v) {
34
- group = v;
35
- if (radioGroupContext) {
36
- radioGroupContext.value = v;
37
- }
38
- }
39
- };
40
-
41
- const isDisabled = $derived(_disabled || disabled);
42
- const isRequired = $derived(_required || required);
43
- const isReadonly = $derived(_readonly || readonly);
44
- const isChecked = $derived(proxy.current === value);
45
-
46
- function handleChange(ev: Event) {
47
- const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
48
-
49
- onchange?.(ev, {
50
- checked,
51
- value: checked,
52
- type: 'boolean'
53
- });
54
- }
55
-
56
- function handleInput(ev: Event) {
57
- const currentTarget = ev.currentTarget as HTMLInputElement;
58
- const _checked = currentTarget?.checked ?? false;
59
-
60
- oninput?.(ev, {
61
- checked: _checked,
62
- value: _checked,
63
- type: 'boolean'
64
- });
65
-
66
- if (ev.defaultPrevented) {
67
- return;
68
- }
69
- }
70
- </script>
71
-
72
- <Stack.Root
73
- preset="radio"
74
- class={[
75
- 'text-foreground bg-input box-border inline-flex aspect-square size-4 max-h-fit max-w-fit cursor-pointer place-items-center rounded-full border p-0',
76
- isDisabled && 'pointer-events-none opacity-50',
77
- '$preset',
78
- toClassValue.apply(null, [klass, {}])
79
- ]}
80
- as="label"
81
- {...restProps}
82
- >
83
- <Stack.Item class="pointer-events-none flex size-full">
84
- <input
85
- bind:group={proxy.current}
86
- {id}
87
- {value}
88
- class="pointer-events-auto size-0 opacity-0"
89
- type="radio"
90
- name={_name ?? name}
91
- disabled={isDisabled}
92
- required={isRequired}
93
- readonly={isReadonly}
94
- onchange={handleChange}
95
- oninput={handleInput}
96
- />
97
- </Stack.Item>
98
-
99
- {#if isChecked}
100
- {#if checkedContent}
101
- <HtmlAtom
102
- class="rounded-inherit pointer-events-none size-full scale-50 bg-current"
103
- base={checkedContent}
104
- />
105
- {:else}
106
- <Stack.Item class="rounded-inherit pointer-events-none size-full scale-50 bg-current" />
107
- {/if}
108
- {/if}
109
- </Stack.Root>
1
+ <script lang="ts">
2
+ import { getRadioGroupContext } from './context';
3
+ import { Stack } from '../stack';
4
+ import { toClassValue } from '../../utils';
5
+ import { HtmlAtom, type Base } from '../atom';
6
+
7
+ const radioGroupContext = getRadioGroupContext();
8
+
9
+ let {
10
+ class: klass = '',
11
+ value = $bindable(undefined),
12
+ group = $bindable(),
13
+ id = undefined,
14
+ name = undefined,
15
+ disabled = false,
16
+ required = false,
17
+ readonly = false,
18
+ onchange = undefined,
19
+ oninput = undefined,
20
+ checkedContent = undefined,
21
+ ...restProps
22
+ } = $props();
23
+
24
+ const _disabled = $derived(radioGroupContext?.disabled);
25
+ const _required = $derived(radioGroupContext?.required);
26
+ const _readonly = $derived(radioGroupContext?.readonly);
27
+ const _name = $derived(radioGroupContext?.name);
28
+
29
+ const proxy = {
30
+ get current() {
31
+ return radioGroupContext?.value ?? group;
32
+ },
33
+ set current(v) {
34
+ group = v;
35
+ if (radioGroupContext) {
36
+ radioGroupContext.value = v;
37
+ }
38
+ }
39
+ };
40
+
41
+ const isDisabled = $derived(_disabled || disabled);
42
+ const isRequired = $derived(_required || required);
43
+ const isReadonly = $derived(_readonly || readonly);
44
+ const isChecked = $derived(proxy.current === value);
45
+
46
+ function handleChange(ev: Event) {
47
+ const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
48
+
49
+ onchange?.(ev, {
50
+ checked,
51
+ value: checked,
52
+ type: 'boolean'
53
+ });
54
+ }
55
+
56
+ function handleInput(ev: Event) {
57
+ const currentTarget = ev.currentTarget as HTMLInputElement;
58
+ const _checked = currentTarget?.checked ?? false;
59
+
60
+ oninput?.(ev, {
61
+ checked: _checked,
62
+ value: _checked,
63
+ type: 'boolean'
64
+ });
65
+
66
+ if (ev.defaultPrevented) {
67
+ return;
68
+ }
69
+ }
70
+ </script>
71
+
72
+ <Stack.Root
73
+ preset="radio"
74
+ class={[
75
+ 'text-foreground bg-input box-border inline-flex aspect-square size-4 max-h-fit max-w-fit cursor-pointer place-items-center rounded-full border p-0',
76
+ isDisabled && 'pointer-events-none opacity-50',
77
+ '$preset',
78
+ toClassValue.apply(null, [klass, {}])
79
+ ]}
80
+ as="label"
81
+ {...restProps}
82
+ >
83
+ <Stack.Item class="pointer-events-none flex size-full">
84
+ <input
85
+ bind:group={proxy.current}
86
+ {id}
87
+ {value}
88
+ class="pointer-events-auto size-0 opacity-0"
89
+ type="radio"
90
+ name={_name ?? name}
91
+ disabled={isDisabled}
92
+ required={isRequired}
93
+ readonly={isReadonly}
94
+ onchange={handleChange}
95
+ oninput={handleInput}
96
+ />
97
+ </Stack.Item>
98
+
99
+ {#if isChecked}
100
+ {#if checkedContent}
101
+ <HtmlAtom
102
+ class="rounded-inherit pointer-events-none size-full scale-50 bg-current"
103
+ base={checkedContent}
104
+ />
105
+ {:else}
106
+ <Stack.Item class="rounded-inherit pointer-events-none size-full scale-50 bg-current" />
107
+ {/if}
108
+ {/if}
109
+ </Stack.Root>
@@ -1,2 +1,3 @@
1
1
  export { default as Root } from './root.svelte';
2
2
  export { RootBondState, type RootStateProps, RootBond } from './bond.svelte';
3
+ export * from './types';
@@ -1,2 +1,3 @@
1
1
  export { default as Root } from './root.svelte';
2
2
  export { RootBondState, RootBond } from './bond.svelte';
3
+ export * from './types';
@@ -0,0 +1,8 @@
1
+ <script>
2
+ import { Portal } from "../portal";
3
+
4
+ </script>
5
+
6
+ <Portal.Outer id="root.l0" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
7
+ <Portal.Inner />
8
+ </Portal.Outer>
@@ -0,0 +1,26 @@
1
+ export default L0Portal;
2
+ type L0Portal = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string;
8
+ };
9
+ declare const L0Portal: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1,7 @@
1
+ <script>
2
+ import { Portal } from '../portal';
3
+ </script>
4
+
5
+ <Portal.Outer id="root.l1" class="pointer-events-none absolute inset-0 z-12 overflow-hidden">
6
+ <Portal.Inner />
7
+ </Portal.Outer>
@@ -0,0 +1,26 @@
1
+ export default L1Portal;
2
+ type L1Portal = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string;
8
+ };
9
+ declare const L1Portal: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -1,119 +1,119 @@
1
- @import 'tailwindcss';
2
-
3
- :root {
4
- --background: oklch(1 0 0);
5
- --foreground: oklch(0.145 0 0);
6
- --card: oklch(1 0 0);
7
- --card-foreground: oklch(0.145 0 0);
8
- --popover: oklch(1 0 0);
9
- --popover-foreground: oklch(0.145 0 0);
10
- --primary: oklch(0.205 0 0);
11
- --primary-foreground: oklch(0.985 0 0);
12
- --secondary: oklch(0.97 0 0);
13
- --secondary-foreground: oklch(0.205 0 0);
14
- --muted: oklch(0.97 0 0);
15
- --muted-foreground: oklch(0.556 0 0);
16
- --accent: oklch(0.97 0 0);
17
- --accent-foreground: oklch(0.205 0 0);
18
- --destructive: oklch(0.577 0.245 27.325);
19
- --destructive-foreground: oklch(1 0 0);
20
- --border: oklch(0.922 0 0);
21
- --input: oklch(0.922 0 0);
22
- --ring: oklch(0.708 0 0);
23
- --chart-1: oklch(0.646 0.222 41.116);
24
- --chart-2: oklch(0.6 0.118 184.704);
25
- --chart-3: oklch(0.398 0.07 227.392);
26
- --chart-4: oklch(0.828 0.189 84.429);
27
- --chart-5: oklch(0.769 0.188 70.08);
28
- --radius: 0.625rem;
29
- --sidebar: oklch(0.985 0 0);
30
- --sidebar-foreground: oklch(0.145 0 0);
31
- --sidebar-primary: oklch(0.205 0 0);
32
- --sidebar-primary-foreground: oklch(0.985 0 0);
33
- --sidebar-accent: oklch(0.97 0 0);
34
- --sidebar-accent-foreground: oklch(0.205 0 0);
35
- --sidebar-border: oklch(0.922 0 0);
36
- --sidebar-ring: oklch(0.708 0 0);
37
- --radius: 0.625rem;
38
- --shadow-x: 0px;
39
- --shadow-y: 1px;
40
- --shadow-blur: 2px;
41
- --shadow-spread: 0px;
42
- --shadow-opacity: 0.18;
43
- --shadow-color: hsl(0 0% 0%);
44
- --tracking-normal: 0em;
45
- --spacing: 0.25rem;
46
- }
47
-
48
- .dark {
49
- --background: oklch(0.145 0 0);
50
- --foreground: oklch(0.985 0 0);
51
- --card: oklch(0.205 0 0);
52
- --card-foreground: oklch(0.985 0 0);
53
- --popover: oklch(0.205 0 0);
54
- --popover-foreground: oklch(0.985 0 0);
55
- --primary: oklch(0.922 0 0);
56
- --primary-foreground: oklch(0.205 0 0);
57
- --secondary: oklch(0.269 0 0);
58
- --secondary-foreground: oklch(0.985 0 0);
59
- --muted: oklch(0.269 0 0);
60
- --muted-foreground: oklch(0.708 0 0);
61
- --accent: oklch(0.269 0 0);
62
- --accent-foreground: oklch(0.985 0 0);
63
- --destructive: oklch(0.704 0.191 22.216);
64
- --destructive-foreground: oklch(0.985 0 0);
65
- --border: oklch(1 0 0 / 10%);
66
- --input: oklch(1 0 0 / 15%);
67
- --ring: oklch(0.556 0 0);
68
- --chart-1: oklch(0.488 0.243 264.376);
69
- --chart-2: oklch(0.696 0.17 162.48);
70
- --chart-3: oklch(0.769 0.188 70.08);
71
- --chart-4: oklch(0.627 0.265 303.9);
72
- --chart-5: oklch(0.645 0.246 16.439);
73
- --sidebar: oklch(0.205 0 0);
74
- --sidebar-foreground: oklch(0.985 0 0);
75
- --sidebar-primary: oklch(0.488 0.243 264.376);
76
- --sidebar-primary-foreground: oklch(0.985 0 0);
77
- --sidebar-accent: oklch(0.269 0 0);
78
- --sidebar-accent-foreground: oklch(0.985 0 0);
79
- --sidebar-border: oklch(1 0 0 / 10%);
80
- --sidebar-ring: oklch(0.556 0 0);
81
- --shadow-color: hsl(0, 0%, 100%);
82
- }
83
-
84
- @theme inline {
85
- --color-background: var(--background);
86
- --color-foreground: var(--foreground);
87
- --color-card: var(--card);
88
- --color-card-foreground: var(--card-foreground);
89
- --color-popover: var(--popover);
90
- --color-popover-foreground: var(--popover-foreground);
91
- --color-primary: var(--primary);
92
- --color-primary-foreground: var(--primary-foreground);
93
- --color-secondary: var(--secondary);
94
- --color-secondary-foreground: var(--secondary-foreground);
95
- --color-muted: var(--muted);
96
- --color-muted-foreground: var(--muted-foreground);
97
- --color-accent: var(--accent);
98
- --color-accent-foreground: var(--accent-foreground);
99
- --color-destructive: var(--destructive);
100
- --color-destructive-foreground: var(--destructive-foreground);
101
- --color-border: var(--border);
102
- --color-input: var(--input);
103
- --color-ring: var(--ring);
104
- --color-chart-1: var(--chart-1);
105
- --color-chart-2: var(--chart-2);
106
- --color-chart-3: var(--chart-3);
107
- --color-chart-4: var(--chart-4);
108
- --color-chart-5: var(--chart-5);
109
- --color-sidebar: var(--sidebar);
110
- --color-sidebar-foreground: var(--sidebar-foreground);
111
- --color-sidebar-primary: var(--sidebar-primary);
112
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
113
- --color-sidebar-accent: var(--sidebar-accent);
114
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
115
- --color-sidebar-border: var(--sidebar-border);
116
- --color-sidebar-ring: var(--sidebar-ring);
117
-
118
- --radius-inherit: inherit;
119
- }
1
+ @import 'tailwindcss';
2
+
3
+ :root {
4
+ --background: oklch(1 0 0);
5
+ --foreground: oklch(0.145 0 0);
6
+ --card: oklch(1 0 0);
7
+ --card-foreground: oklch(0.145 0 0);
8
+ --popover: oklch(1 0 0);
9
+ --popover-foreground: oklch(0.145 0 0);
10
+ --primary: oklch(0.205 0 0);
11
+ --primary-foreground: oklch(0.985 0 0);
12
+ --secondary: oklch(0.97 0 0);
13
+ --secondary-foreground: oklch(0.205 0 0);
14
+ --muted: oklch(0.97 0 0);
15
+ --muted-foreground: oklch(0.556 0 0);
16
+ --accent: oklch(0.97 0 0);
17
+ --accent-foreground: oklch(0.205 0 0);
18
+ --destructive: oklch(0.577 0.245 27.325);
19
+ --destructive-foreground: oklch(1 0 0);
20
+ --border: oklch(0.922 0 0);
21
+ --input: oklch(0.99 0 0);
22
+ --ring: oklch(0.708 0 0);
23
+ --chart-1: oklch(0.646 0.222 41.116);
24
+ --chart-2: oklch(0.6 0.118 184.704);
25
+ --chart-3: oklch(0.398 0.07 227.392);
26
+ --chart-4: oklch(0.828 0.189 84.429);
27
+ --chart-5: oklch(0.769 0.188 70.08);
28
+ --radius: 0.625rem;
29
+ --sidebar: oklch(0.985 0 0);
30
+ --sidebar-foreground: oklch(0.145 0 0);
31
+ --sidebar-primary: oklch(0.205 0 0);
32
+ --sidebar-primary-foreground: oklch(0.985 0 0);
33
+ --sidebar-accent: oklch(0.97 0 0);
34
+ --sidebar-accent-foreground: oklch(0.205 0 0);
35
+ --sidebar-border: oklch(0.922 0 0);
36
+ --sidebar-ring: oklch(0.708 0 0);
37
+ --radius: 0.625rem;
38
+ --shadow-x: 0px;
39
+ --shadow-y: 1px;
40
+ --shadow-blur: 2px;
41
+ --shadow-spread: 0px;
42
+ --shadow-opacity: 0.18;
43
+ --shadow-color: hsl(0 0% 0%);
44
+ --tracking-normal: 0em;
45
+ --spacing: 0.25rem;
46
+ }
47
+
48
+ .dark {
49
+ --background: oklch(0.145 0 0);
50
+ --foreground: oklch(0.985 0 0);
51
+ --card: oklch(0.205 0 0);
52
+ --card-foreground: oklch(0.985 0 0);
53
+ --popover: oklch(0.205 0 0);
54
+ --popover-foreground: oklch(0.985 0 0);
55
+ --primary: oklch(0.922 0 0);
56
+ --primary-foreground: oklch(0.205 0 0);
57
+ --secondary: oklch(0.269 0 0);
58
+ --secondary-foreground: oklch(0.985 0 0);
59
+ --muted: oklch(0.269 0 0);
60
+ --muted-foreground: oklch(0.708 0 0);
61
+ --accent: oklch(0.269 0 0);
62
+ --accent-foreground: oklch(0.985 0 0);
63
+ --destructive: oklch(0.704 0.191 22.216);
64
+ --destructive-foreground: oklch(0.985 0 0);
65
+ --border: oklch(1 0 0 / 10%);
66
+ --input: oklch(1 0 0 / 5%);
67
+ --ring: oklch(0.556 0 0);
68
+ --chart-1: oklch(0.488 0.243 264.376);
69
+ --chart-2: oklch(0.696 0.17 162.48);
70
+ --chart-3: oklch(0.769 0.188 70.08);
71
+ --chart-4: oklch(0.627 0.265 303.9);
72
+ --chart-5: oklch(0.645 0.246 16.439);
73
+ --sidebar: oklch(0.205 0 0);
74
+ --sidebar-foreground: oklch(0.985 0 0);
75
+ --sidebar-primary: oklch(0.488 0.243 264.376);
76
+ --sidebar-primary-foreground: oklch(0.985 0 0);
77
+ --sidebar-accent: oklch(0.269 0 0);
78
+ --sidebar-accent-foreground: oklch(0.985 0 0);
79
+ --sidebar-border: oklch(1 0 0 / 10%);
80
+ --sidebar-ring: oklch(0.556 0 0);
81
+ --shadow-color: hsl(0, 0%, 100%);
82
+ }
83
+
84
+ @theme inline {
85
+ --color-background: var(--background);
86
+ --color-foreground: var(--foreground);
87
+ --color-card: var(--card);
88
+ --color-card-foreground: var(--card-foreground);
89
+ --color-popover: var(--popover);
90
+ --color-popover-foreground: var(--popover-foreground);
91
+ --color-primary: var(--primary);
92
+ --color-primary-foreground: var(--primary-foreground);
93
+ --color-secondary: var(--secondary);
94
+ --color-secondary-foreground: var(--secondary-foreground);
95
+ --color-muted: var(--muted);
96
+ --color-muted-foreground: var(--muted-foreground);
97
+ --color-accent: var(--accent);
98
+ --color-accent-foreground: var(--accent-foreground);
99
+ --color-destructive: var(--destructive);
100
+ --color-destructive-foreground: var(--destructive-foreground);
101
+ --color-border: var(--border);
102
+ --color-input: var(--input);
103
+ --color-ring: var(--ring);
104
+ --color-chart-1: var(--chart-1);
105
+ --color-chart-2: var(--chart-2);
106
+ --color-chart-3: var(--chart-3);
107
+ --color-chart-4: var(--chart-4);
108
+ --color-chart-5: var(--chart-5);
109
+ --color-sidebar: var(--sidebar);
110
+ --color-sidebar-foreground: var(--sidebar-foreground);
111
+ --color-sidebar-primary: var(--sidebar-primary);
112
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
113
+ --color-sidebar-accent: var(--sidebar-accent);
114
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
115
+ --color-sidebar-border: var(--sidebar-border);
116
+ --color-sidebar-ring: var(--sidebar-ring);
117
+
118
+ --radius-inherit: inherit;
119
+ }
@@ -4,18 +4,23 @@
4
4
 
5
5
  <script lang="ts">
6
6
  import { cn, defineState, defineProperty } from '../../utils';
7
- import { Portal, ActivePortal, Portals } from '../portal';
7
+ import { ActivePortal, Portals } from '../portal';
8
8
  import { HtmlAtom as Atom } from '../atom';
9
9
  import { HtmlElement, MathmlElement, SvgElement } from '../element';
10
10
  import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
11
+ import L0Portal from './l0-portal.svelte';
12
+ import L1Portal from './l1-portal.svelte';
13
+ import type { RootProps } from './types';
11
14
 
12
15
  let {
13
16
  class: klass = '',
14
17
  base = undefined,
15
18
  children = undefined,
16
19
  portals = undefined,
20
+ l0portal = undefined,
21
+ l1portal = undefined,
17
22
  ...restProps
18
- } = $props();
23
+ }: RootProps = $props();
19
24
 
20
25
  let html: typeof HtmlElement | undefined = $state(HtmlElement);
21
26
  let svg: typeof SvgElement | undefined = $state(undefined);
@@ -77,26 +82,20 @@
77
82
  )}
78
83
  {...restProps}
79
84
  >
80
- {#if portals}
81
- {@render portals?.()}
85
+ {#if l0portal}
86
+ {@render l0portal?.()}
82
87
  {:else}
83
- <Portal.Outer id="root.l0" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
84
- <Portal.Inner />
85
- </Portal.Outer>
86
-
87
- <Portal.Outer id="root.l1" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
88
- <Portal.Inner />
89
- </Portal.Outer>
90
-
91
- <Portal.Outer id="root.l2" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
92
- <Portal.Inner />
93
- </Portal.Outer>
88
+ <L0Portal />
89
+ {/if}
94
90
 
95
- <Portal.Outer id="root.l3" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
96
- <Portal.Inner />
97
- </Portal.Outer>
91
+ {#if l1portal}
92
+ {@render l1portal?.()}
93
+ {:else}
94
+ <L1Portal />
98
95
  {/if}
99
96
 
97
+ {@render portals?.()}
98
+
100
99
  <ActivePortal portal="root.l0">
101
100
  {@render children?.()}
102
101
  </ActivePortal>
@@ -1,9 +1,5 @@
1
1
  export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
2
- declare const Root: import("svelte").Component<{
3
- class?: string;
4
- base?: any;
5
- children?: any;
6
- portals?: any;
7
- } & Record<string, any>, {}, "">;
2
+ import type { RootProps } from './types';
3
+ declare const Root: import("svelte").Component<RootProps<"div", import("../atom").ComponentBase | import("../atom").SnippetBase>, {}, "">;
8
4
  type Root = ReturnType<typeof Root>;
9
5
  export default Root;
@@ -0,0 +1,7 @@
1
+ <script>
2
+ import { Portal } from '../portal';
3
+ </script>
4
+
5
+ <Portal.Outer id="root.l3" class="pointer-events-none absolute inset-0 z-14 overflow-hidden">
6
+ <Portal.Inner />
7
+ </Portal.Outer>
@@ -0,0 +1,26 @@
1
+ export default ToastsPortal;
2
+ type ToastsPortal = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string;
8
+ };
9
+ declare const ToastsPortal: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ 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> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }