@svelte-atoms/core 1.0.0-alpha.27 → 1.0.0-alpha.29

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 (186) hide show
  1. package/README.md +852 -645
  2. package/dist/components/accordion/accordion-root.svelte +61 -61
  3. package/dist/components/accordion/item/accordion-item-body.svelte +42 -42
  4. package/dist/components/accordion/item/accordion-item-header.svelte +50 -50
  5. package/dist/components/accordion/item/accordion-item-indicator.svelte +50 -50
  6. package/dist/components/accordion/item/accordion-item-root.svelte +65 -65
  7. package/dist/components/alert/alert-actions.svelte +43 -42
  8. package/dist/components/alert/alert-close-button.svelte +70 -72
  9. package/dist/components/alert/alert-content.svelte +43 -42
  10. package/dist/components/alert/alert-description.svelte +42 -41
  11. package/dist/components/alert/alert-icon.svelte +47 -46
  12. package/dist/components/alert/alert-root.svelte +103 -102
  13. package/dist/components/alert/alert-title.svelte +42 -41
  14. package/dist/components/alert/alert.stories.svelte +384 -23
  15. package/dist/components/alert/alert.stories.svelte.d.ts +2 -5
  16. package/dist/components/atom/html-atom.svelte +207 -201
  17. package/dist/components/atom/html-atom.svelte.d.ts +1 -1
  18. package/dist/components/atom/snippet-renderer.svelte +5 -0
  19. package/dist/components/atom/snippet-renderer.svelte.d.ts +5 -0
  20. package/dist/components/avatar/avatar.stories.svelte.d.ts +1 -1
  21. package/dist/components/badge/badge.stories.svelte.d.ts +1 -1
  22. package/dist/components/breadcrumb/breadcrumb.stories.svelte.d.ts +1 -1
  23. package/dist/components/button/button.stories.svelte +17 -14
  24. package/dist/components/calendar/atoms.d.ts +5 -0
  25. package/dist/components/calendar/atoms.js +5 -0
  26. package/dist/components/calendar/bond.svelte.d.ts +72 -0
  27. package/dist/components/calendar/bond.svelte.js +132 -0
  28. package/dist/components/calendar/calendar-body.svelte +107 -0
  29. package/dist/components/calendar/calendar-body.svelte.d.ts +8 -0
  30. package/dist/components/calendar/calendar-day.svelte +96 -0
  31. package/dist/components/calendar/calendar-day.svelte.d.ts +4 -0
  32. package/dist/components/calendar/calendar-header.svelte +29 -0
  33. package/dist/components/calendar/calendar-header.svelte.d.ts +6 -0
  34. package/dist/components/calendar/calendar-root.svelte +206 -0
  35. package/dist/components/calendar/calendar-root.svelte.d.ts +8 -0
  36. package/dist/components/calendar/calendar-week-day.svelte +34 -0
  37. package/dist/components/calendar/calendar-week-day.svelte.d.ts +9 -0
  38. package/dist/components/calendar/calendar.css +26 -0
  39. package/dist/components/calendar/calendar.stories.svelte +31 -0
  40. package/dist/components/calendar/calendar.stories.svelte.d.ts +26 -0
  41. package/dist/components/calendar/index.d.ts +4 -0
  42. package/dist/components/calendar/index.js +4 -0
  43. package/dist/components/calendar/runes.svelte.d.ts +3 -0
  44. package/dist/components/calendar/runes.svelte.js +25 -0
  45. package/dist/components/calendar/types.d.ts +62 -0
  46. package/dist/components/calendar/types.js +1 -0
  47. package/dist/components/card/card-body.svelte +39 -39
  48. package/dist/components/card/card-description.svelte +41 -41
  49. package/dist/components/card/card-footer.svelte +41 -41
  50. package/dist/components/card/card-header.svelte +41 -41
  51. package/dist/components/card/card-media.svelte +41 -41
  52. package/dist/components/card/card-root.svelte +91 -91
  53. package/dist/components/card/card-subtitle.svelte +41 -41
  54. package/dist/components/card/card-title.svelte +45 -45
  55. package/dist/components/collapsible/collapsible-body.svelte +39 -39
  56. package/dist/components/collapsible/collapsible-header.svelte +39 -39
  57. package/dist/components/collapsible/collapsible-indicator.svelte +50 -50
  58. package/dist/components/collapsible/collapsible-root.svelte +66 -66
  59. package/dist/components/combobox/combobox-root.svelte +65 -65
  60. package/dist/components/container/container.stories.svelte.d.ts +1 -1
  61. package/dist/components/contextmenu/contextmenu-trigger.svelte.d.ts +1 -1
  62. package/dist/components/datagrid/bond.svelte.d.ts +2 -2
  63. package/dist/components/datagrid/datagrid-body.svelte +37 -37
  64. package/dist/components/datagrid/datagrid-checkbox.svelte +101 -101
  65. package/dist/components/datagrid/datagrid-footer.svelte +34 -34
  66. package/dist/components/datagrid/datagrid-header.svelte +49 -49
  67. package/dist/components/datagrid/datagrid-root.svelte +2 -2
  68. package/dist/components/datagrid/datagrid.css +5 -47
  69. package/dist/components/datagrid/td/datagrid-td.svelte +66 -66
  70. package/dist/components/datagrid/th/datagrid-th.svelte +106 -106
  71. package/dist/components/datagrid/tr/datagrid-tr.svelte +88 -88
  72. package/dist/components/datagrid/types.d.ts +1 -1
  73. package/dist/components/date-picker/atoms.d.ts +3 -0
  74. package/dist/components/date-picker/atoms.js +3 -0
  75. package/dist/components/date-picker/bond.svelte.d.ts +67 -0
  76. package/dist/components/date-picker/bond.svelte.js +174 -0
  77. package/dist/components/date-picker/date-picker-calendar.svelte +67 -0
  78. package/dist/components/date-picker/date-picker-calendar.svelte.d.ts +4 -0
  79. package/dist/components/date-picker/date-picker-header.svelte +100 -0
  80. package/dist/components/date-picker/date-picker-header.svelte.d.ts +4 -0
  81. package/dist/components/date-picker/date-picker-months.svelte +142 -0
  82. package/dist/components/date-picker/date-picker-months.svelte.d.ts +4 -0
  83. package/dist/components/date-picker/date-picker-root.svelte +95 -0
  84. package/dist/components/date-picker/date-picker-root.svelte.d.ts +4 -0
  85. package/dist/components/date-picker/date-picker-years.svelte +205 -0
  86. package/dist/components/date-picker/date-picker-years.svelte.d.ts +4 -0
  87. package/dist/components/date-picker/date-picker.stories.svelte +42 -0
  88. package/dist/components/date-picker/date-picker.stories.svelte.d.ts +3 -0
  89. package/dist/components/date-picker/index.d.ts +3 -0
  90. package/dist/components/date-picker/index.js +3 -0
  91. package/dist/components/date-picker/types.d.ts +53 -0
  92. package/dist/components/date-picker/types.js +1 -0
  93. package/dist/components/dialog/dialog-body.svelte +39 -39
  94. package/dist/components/dialog/dialog-close-button.svelte +58 -58
  95. package/dist/components/dialog/dialog-content.svelte +1 -1
  96. package/dist/components/dialog/dialog-description.svelte +40 -40
  97. package/dist/components/dialog/dialog-footer.svelte +39 -39
  98. package/dist/components/dialog/dialog-header.svelte +39 -39
  99. package/dist/components/dialog/dialog-root.svelte +110 -110
  100. package/dist/components/dialog/dialog-title.svelte +41 -41
  101. package/dist/components/drawer/drawer-backdrop.svelte +38 -38
  102. package/dist/components/drawer/drawer-body.svelte +42 -42
  103. package/dist/components/drawer/drawer-content.svelte +42 -42
  104. package/dist/components/drawer/drawer-description.svelte +44 -44
  105. package/dist/components/drawer/drawer-footer.svelte +41 -41
  106. package/dist/components/drawer/drawer-header.svelte +43 -43
  107. package/dist/components/drawer/drawer-root.svelte +93 -93
  108. package/dist/components/drawer/drawer-title.svelte +44 -44
  109. package/dist/components/dropdown/dropdown-query.svelte +54 -54
  110. package/dist/components/dropdown/dropdown-root.svelte +59 -59
  111. package/dist/components/dropdown/dropdown-trigger.svelte +41 -41
  112. package/dist/components/dropdown/dropdown-value.svelte +60 -60
  113. package/dist/components/element/types.d.ts +1 -1
  114. package/dist/components/form/bond.svelte.d.ts +1 -1
  115. package/dist/components/form/field/field-control.svelte +48 -48
  116. package/dist/components/form/field/field-label.svelte +24 -24
  117. package/dist/components/form/field/field-root.svelte +59 -59
  118. package/dist/components/icon/icon.svelte +44 -44
  119. package/dist/components/image/image.stories.svelte.d.ts +1 -1
  120. package/dist/components/index.d.ts +4 -0
  121. package/dist/components/index.js +4 -0
  122. package/dist/components/input/input-control.svelte +103 -103
  123. package/dist/components/label/label.svelte +25 -25
  124. package/dist/components/lazy/index.d.ts +1 -0
  125. package/dist/components/lazy/index.js +1 -0
  126. package/dist/components/lazy/lazy.stories.svelte +35 -0
  127. package/dist/components/lazy/lazy.stories.svelte.d.ts +19 -0
  128. package/dist/components/lazy/lazy.svelte +28 -0
  129. package/dist/components/lazy/lazy.svelte.d.ts +5 -0
  130. package/dist/components/lazy/types.d.ts +10 -0
  131. package/dist/components/lazy/types.js +1 -0
  132. package/dist/components/menu/menu-list.svelte +40 -39
  133. package/dist/components/menu/menu-list.svelte.d.ts +1 -0
  134. package/dist/components/popover/popover-arrow.svelte +111 -111
  135. package/dist/components/popover/popover-content.svelte +178 -139
  136. package/dist/components/popover/popover-root.svelte +16 -17
  137. package/dist/components/popover/popover.stories.svelte +0 -15
  138. package/dist/components/portal/portal-root.svelte +83 -83
  139. package/dist/components/portal/teleport.svelte +50 -50
  140. package/dist/components/qr-code/index.d.ts +2 -0
  141. package/dist/components/qr-code/index.js +2 -0
  142. package/dist/components/qr-code/qr-code.stories.svelte +27 -0
  143. package/dist/components/qr-code/qr-code.stories.svelte.d.ts +26 -0
  144. package/dist/components/qr-code/qr-code.svelte +75 -0
  145. package/dist/components/qr-code/qr-code.svelte.d.ts +4 -0
  146. package/dist/components/qr-code/types.d.ts +14 -0
  147. package/dist/components/qr-code/types.js +1 -0
  148. package/dist/components/radio/radio.svelte +109 -109
  149. package/dist/components/radio/types.svelte.d.ts +1 -1
  150. package/dist/components/scrollable/scrollable-container.svelte +82 -82
  151. package/dist/components/scrollable/scrollable-content.svelte +41 -41
  152. package/dist/components/scrollable/scrollable-root.svelte +100 -100
  153. package/dist/components/scrollable/scrollable-thumb.svelte +75 -75
  154. package/dist/components/scrollable/scrollable-track.svelte +59 -59
  155. package/dist/components/scrollable/scrollable.stories.svelte.d.ts +1 -1
  156. package/dist/components/sidebar/bond.svelte.d.ts +0 -5
  157. package/dist/components/sidebar/bond.svelte.js +1 -12
  158. package/dist/components/sidebar/sidebar-content.svelte +39 -39
  159. package/dist/components/sidebar/sidebar-content.svelte.d.ts +2 -2
  160. package/dist/components/sidebar/sidebar-root.svelte +41 -68
  161. package/dist/components/sidebar/sidebar-root.svelte.d.ts +2 -2
  162. package/dist/components/sidebar/sidebar.stories.svelte +54 -52
  163. package/dist/components/sidebar/types.d.ts +6 -6
  164. package/dist/components/tabs/tab/tab-body.svelte +52 -52
  165. package/dist/components/tabs/tab/tab-description.svelte +41 -41
  166. package/dist/components/tabs/tab/tab-header.svelte +71 -71
  167. package/dist/components/tabs/tab/tab-root.svelte +86 -86
  168. package/dist/components/toast/toast-description.svelte +38 -38
  169. package/dist/components/toast/toast-root.svelte +61 -61
  170. package/dist/components/toast/toast-title.svelte +35 -35
  171. package/dist/components/tree/tree-body.svelte +39 -39
  172. package/dist/components/tree/tree-header.svelte +54 -54
  173. package/dist/components/tree/tree-indicator.svelte +40 -40
  174. package/dist/components/tree/tree-root.svelte +65 -65
  175. package/dist/components/virtual/virtual-root.svelte +239 -239
  176. package/dist/context/preset.svelte.d.ts +1 -1
  177. package/dist/icons/icon-arrow-down.svelte.d.ts +1 -1
  178. package/dist/icons/icon-checkmark.svelte.d.ts +1 -1
  179. package/dist/icons/icon-close.svelte.d.ts +1 -1
  180. package/dist/icons/icon-more-vert.svelte.d.ts +1 -1
  181. package/dist/runes/container.svelte.d.ts +2 -2
  182. package/dist/shared/bond.svelte.d.ts +1 -1
  183. package/dist/utils/state.d.ts +1 -1
  184. package/dist/utils/state.js +2 -1
  185. package/llm/variants.md +650 -103
  186. package/package.json +465 -437
@@ -1,39 +1,39 @@
1
- <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
- import { TreeBond } from './bond.svelte';
3
- import { HtmlAtom, type Base } from '../atom';
4
- import type { TreeBodyProps } from './types';
5
-
6
- const bond = TreeBond.get();
7
-
8
- let {
9
- class: klass = '',
10
- children = undefined,
11
- onmount = undefined,
12
- ondestroy = undefined,
13
- animate = undefined,
14
- enter = undefined,
15
- exit = undefined,
16
- initial = undefined,
17
- ...restProps
18
- }: TreeBodyProps<E, B> = $props();
19
-
20
- const bodyProps = $derived({
21
- ...bond?.body(),
22
- ...restProps
23
- });
24
- </script>
25
-
26
- <HtmlAtom
27
- {bond}
28
- preset="tree.body"
29
- class={['border-border pl-4', '$preset', klass]}
30
- onmount={onmount?.bind(bond.state)}
31
- ondestroy={ondestroy?.bind(bond.state)}
32
- animate={animate?.bind(bond.state)}
33
- enter={enter?.bind(bond.state)}
34
- exit={exit?.bind(bond.state)}
35
- initial={initial?.bind(bond.state)}
36
- {...bodyProps}
37
- >
38
- {@render children?.({ tree: bond })}
39
- </HtmlAtom>
1
+ <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
+ import { TreeBond } from './bond.svelte';
3
+ import { HtmlAtom, type Base } from '../atom';
4
+ import type { TreeBodyProps } from './types';
5
+
6
+ const bond = TreeBond.get();
7
+
8
+ let {
9
+ class: klass = '',
10
+ children = undefined,
11
+ onmount = undefined,
12
+ ondestroy = undefined,
13
+ animate = undefined,
14
+ enter = undefined,
15
+ exit = undefined,
16
+ initial = undefined,
17
+ ...restProps
18
+ }: TreeBodyProps<E, B> = $props();
19
+
20
+ const bodyProps = $derived({
21
+ ...bond?.body(),
22
+ ...restProps
23
+ });
24
+ </script>
25
+
26
+ <HtmlAtom
27
+ {bond}
28
+ preset="tree.body"
29
+ class={['border-border pl-4', '$preset', klass]}
30
+ onmount={onmount?.bind(bond.state)}
31
+ ondestroy={ondestroy?.bind(bond.state)}
32
+ animate={animate?.bind(bond.state)}
33
+ enter={enter?.bind(bond.state)}
34
+ exit={exit?.bind(bond.state)}
35
+ initial={initial?.bind(bond.state)}
36
+ {...bodyProps}
37
+ >
38
+ {@render children?.({ tree: bond })}
39
+ </HtmlAtom>
@@ -1,54 +1,54 @@
1
- <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
- import type { HTMLAttributes } from 'svelte/elements';
3
- import { HtmlAtom, type Base } from '../atom';
4
- import { TreeBond } from './bond.svelte';
5
- import type { TreeHeaderProps } from './types';
6
-
7
- type Element = HTMLElementTagNameMap[E];
8
-
9
- const bond = TreeBond.get();
10
-
11
- let {
12
- class: klass = '',
13
- children = undefined,
14
- onpointerdown = undefined,
15
- onmount = undefined,
16
- ondestroy = undefined,
17
- animate = undefined,
18
- enter = undefined,
19
- exit = undefined,
20
- initial = undefined,
21
- ...restProps
22
- }: TreeHeaderProps<E, B> & HTMLAttributes<Element> = $props();
23
-
24
- const headerProps = $derived({
25
- ...bond?.header(),
26
- ...restProps
27
- });
28
-
29
- function handlePointerDown(ev: PointerEvent) {
30
- onpointerdown?.(ev);
31
-
32
- if (ev.defaultPrevented) {
33
- return;
34
- }
35
-
36
- bond?.state.toggle();
37
- }
38
- </script>
39
-
40
- <HtmlAtom
41
- {bond}
42
- preset="tree.header"
43
- class={['border-border cursor-pointer', '$preset', klass]}
44
- onmount={onmount?.bind(bond.state)}
45
- ondestroy={ondestroy?.bind(bond.state)}
46
- animate={animate?.bind(bond.state)}
47
- enter={enter?.bind(bond.state)}
48
- exit={exit?.bind(bond.state)}
49
- initial={initial?.bind(bond.state)}
50
- onpointerdown={handlePointerDown}
51
- {...headerProps}
52
- >
53
- {@render children?.({ tree: bond })}
54
- </HtmlAtom>
1
+ <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import { HtmlAtom, type Base } from '../atom';
4
+ import { TreeBond } from './bond.svelte';
5
+ import type { TreeHeaderProps } from './types';
6
+
7
+ type Element = HTMLElementTagNameMap[E];
8
+
9
+ const bond = TreeBond.get();
10
+
11
+ let {
12
+ class: klass = '',
13
+ children = undefined,
14
+ onpointerdown = undefined,
15
+ onmount = undefined,
16
+ ondestroy = undefined,
17
+ animate = undefined,
18
+ enter = undefined,
19
+ exit = undefined,
20
+ initial = undefined,
21
+ ...restProps
22
+ }: TreeHeaderProps<E, B> & HTMLAttributes<Element> = $props();
23
+
24
+ const headerProps = $derived({
25
+ ...bond?.header(),
26
+ ...restProps
27
+ });
28
+
29
+ function handlePointerDown(ev: PointerEvent) {
30
+ onpointerdown?.(ev);
31
+
32
+ if (ev.defaultPrevented) {
33
+ return;
34
+ }
35
+
36
+ bond?.state.toggle();
37
+ }
38
+ </script>
39
+
40
+ <HtmlAtom
41
+ {bond}
42
+ preset="tree.header"
43
+ class={['border-border cursor-pointer', '$preset', klass]}
44
+ onmount={onmount?.bind(bond.state)}
45
+ ondestroy={ondestroy?.bind(bond.state)}
46
+ animate={animate?.bind(bond.state)}
47
+ enter={enter?.bind(bond.state)}
48
+ exit={exit?.bind(bond.state)}
49
+ initial={initial?.bind(bond.state)}
50
+ onpointerdown={handlePointerDown}
51
+ {...headerProps}
52
+ >
53
+ {@render children?.({ tree: bond })}
54
+ </HtmlAtom>
@@ -1,40 +1,40 @@
1
- <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
- import { HtmlAtom, type Base } from '../atom';
3
- import { TreeBond } from './bond.svelte';
4
- import type { TreeIndicatorProps } from './types';
5
-
6
- const bond = TreeBond.get();
7
-
8
- let {
9
- open = $bindable(false),
10
- class: klass = '',
11
- children = undefined,
12
- onmount = undefined,
13
- ondestroy = undefined,
14
- animate = undefined,
15
- enter = undefined,
16
- exit = undefined,
17
- initial = undefined,
18
- ...restProps
19
- }: TreeIndicatorProps<E, B> = $props();
20
-
21
- const indicatorProps = $derived({
22
- ...bond?.indicator(),
23
- ...restProps
24
- });
25
- </script>
26
-
27
- <HtmlAtom
28
- {bond}
29
- preset="tree.indicator"
30
- class={['border-border aspect-square h-fit', '$preset', klass]}
31
- onmount={onmount?.bind(bond.state)}
32
- ondestroy={ondestroy?.bind(bond.state)}
33
- animate={animate?.bind(bond.state)}
34
- enter={enter?.bind(bond.state)}
35
- exit={exit?.bind(bond.state)}
36
- initial={initial?.bind(bond.state)}
37
- {...indicatorProps}
38
- >
39
- {@render children?.({ tree: bond })}
40
- </HtmlAtom>
1
+ <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
+ import { HtmlAtom, type Base } from '../atom';
3
+ import { TreeBond } from './bond.svelte';
4
+ import type { TreeIndicatorProps } from './types';
5
+
6
+ const bond = TreeBond.get();
7
+
8
+ let {
9
+ open = $bindable(false),
10
+ class: klass = '',
11
+ children = undefined,
12
+ onmount = undefined,
13
+ ondestroy = undefined,
14
+ animate = undefined,
15
+ enter = undefined,
16
+ exit = undefined,
17
+ initial = undefined,
18
+ ...restProps
19
+ }: TreeIndicatorProps<E, B> = $props();
20
+
21
+ const indicatorProps = $derived({
22
+ ...bond?.indicator(),
23
+ ...restProps
24
+ });
25
+ </script>
26
+
27
+ <HtmlAtom
28
+ {bond}
29
+ preset="tree.indicator"
30
+ class={['border-border aspect-square h-fit', '$preset', klass]}
31
+ onmount={onmount?.bind(bond.state)}
32
+ ondestroy={ondestroy?.bind(bond.state)}
33
+ animate={animate?.bind(bond.state)}
34
+ enter={enter?.bind(bond.state)}
35
+ exit={exit?.bind(bond.state)}
36
+ initial={initial?.bind(bond.state)}
37
+ {...indicatorProps}
38
+ >
39
+ {@render children?.({ tree: bond })}
40
+ </HtmlAtom>
@@ -1,65 +1,65 @@
1
- <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
- import { defineProperty, defineState } from '../../utils';
3
- import { HtmlAtom, type Base } from '../atom';
4
- import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
5
- import type { TreeRootProps } from './types';
6
-
7
- let {
8
- open = $bindable(false),
9
- disabled = false,
10
- class: klass = '',
11
- children = undefined,
12
- factory = _factory,
13
- onmount = undefined,
14
- ondestroy = undefined,
15
- animate = undefined,
16
- enter = undefined,
17
- exit = undefined,
18
- initial = undefined,
19
- ...restProps
20
- }: TreeRootProps<E, B> = $props();
21
-
22
- const bondProps = defineState<TreeBondProps>(
23
- [
24
- defineProperty(
25
- 'open',
26
- () => open,
27
- (v) => {
28
- open = v;
29
- }
30
- )
31
- ],
32
- () => ({ disabled })
33
- );
34
-
35
- const bond = factory(bondProps).share();
36
-
37
- const rootProps = $derived({
38
- ...bond.root(),
39
- ...restProps
40
- });
41
-
42
- function _factory(props: typeof bondProps) {
43
- const bondState = new TreeBondState(() => props);
44
- return new TreeBond(bondState);
45
- }
46
-
47
- export function getBond() {
48
- return bond;
49
- }
50
- </script>
51
-
52
- <HtmlAtom
53
- {bond}
54
- preset="tree"
55
- class={['border-border flex flex-col', '$preset', klass]}
56
- onmount={onmount?.bind(bond.state)}
57
- ondestroy={ondestroy?.bind(bond.state)}
58
- animate={animate?.bind(bond.state)}
59
- enter={enter?.bind(bond.state)}
60
- exit={exit?.bind(bond.state)}
61
- initial={initial?.bind(bond.state)}
62
- {...rootProps}
63
- >
64
- {@render children?.({ tree: bond })}
65
- </HtmlAtom>
1
+ <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
2
+ import { defineProperty, defineState } from '../../utils';
3
+ import { HtmlAtom, type Base } from '../atom';
4
+ import { TreeBond, TreeBondState, type TreeBondProps } from './bond.svelte';
5
+ import type { TreeRootProps } from './types';
6
+
7
+ let {
8
+ open = $bindable(false),
9
+ disabled = false,
10
+ class: klass = '',
11
+ children = undefined,
12
+ factory = _factory,
13
+ onmount = undefined,
14
+ ondestroy = undefined,
15
+ animate = undefined,
16
+ enter = undefined,
17
+ exit = undefined,
18
+ initial = undefined,
19
+ ...restProps
20
+ }: TreeRootProps<E, B> = $props();
21
+
22
+ const bondProps = defineState<TreeBondProps>(
23
+ [
24
+ defineProperty(
25
+ 'open',
26
+ () => open,
27
+ (v) => {
28
+ open = v;
29
+ }
30
+ )
31
+ ],
32
+ () => ({ disabled })
33
+ );
34
+
35
+ const bond = factory(bondProps).share();
36
+
37
+ const rootProps = $derived({
38
+ ...bond.root(),
39
+ ...restProps
40
+ });
41
+
42
+ function _factory(props: typeof bondProps) {
43
+ const bondState = new TreeBondState(() => props);
44
+ return new TreeBond(bondState);
45
+ }
46
+
47
+ export function getBond() {
48
+ return bond;
49
+ }
50
+ </script>
51
+
52
+ <HtmlAtom
53
+ {bond}
54
+ preset="tree"
55
+ class={['border-border flex flex-col', '$preset', klass]}
56
+ onmount={onmount?.bind(bond.state)}
57
+ ondestroy={ondestroy?.bind(bond.state)}
58
+ animate={animate?.bind(bond.state)}
59
+ enter={enter?.bind(bond.state)}
60
+ exit={exit?.bind(bond.state)}
61
+ initial={initial?.bind(bond.state)}
62
+ {...rootProps}
63
+ >
64
+ {@render children?.({ tree: bond })}
65
+ </HtmlAtom>