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

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 (163) hide show
  1. package/README.md +856 -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 +2 -1
  8. package/dist/components/alert/alert-close-button.svelte +18 -20
  9. package/dist/components/alert/alert-content.svelte +2 -1
  10. package/dist/components/alert/alert-description.svelte +2 -1
  11. package/dist/components/alert/alert-icon.svelte +2 -1
  12. package/dist/components/alert/alert-root.svelte +3 -2
  13. package/dist/components/alert/alert-title.svelte +2 -1
  14. package/dist/components/alert/alert.stories.svelte +401 -40
  15. package/dist/components/alert/alert.stories.svelte.d.ts +2 -5
  16. package/dist/components/atom/html-atom.svelte +205 -201
  17. package/dist/components/atom/snippet-renderer.svelte +5 -0
  18. package/dist/components/atom/snippet-renderer.svelte.d.ts +5 -0
  19. package/dist/components/avatar/avatar.stories.svelte.d.ts +1 -1
  20. package/dist/components/badge/badge.stories.svelte.d.ts +1 -1
  21. package/dist/components/breadcrumb/breadcrumb.stories.svelte.d.ts +1 -1
  22. package/dist/components/button/button.stories.svelte +60 -57
  23. package/dist/components/calendar/atoms.d.ts +5 -0
  24. package/dist/components/calendar/atoms.js +5 -0
  25. package/dist/components/calendar/bond.svelte.d.ts +72 -0
  26. package/dist/components/calendar/bond.svelte.js +132 -0
  27. package/dist/components/calendar/calendar-body.svelte +107 -0
  28. package/dist/components/calendar/calendar-body.svelte.d.ts +8 -0
  29. package/dist/components/calendar/calendar-day.svelte +97 -0
  30. package/dist/components/calendar/calendar-day.svelte.d.ts +4 -0
  31. package/dist/components/calendar/calendar-header.svelte +33 -0
  32. package/dist/components/calendar/calendar-header.svelte.d.ts +7 -0
  33. package/dist/components/calendar/calendar-root.svelte +208 -0
  34. package/dist/components/calendar/calendar-root.svelte.d.ts +8 -0
  35. package/dist/components/calendar/calendar-week-day.svelte +34 -0
  36. package/dist/components/calendar/calendar-week-day.svelte.d.ts +9 -0
  37. package/dist/components/calendar/calendar.css +26 -0
  38. package/dist/components/calendar/calendar.stories.svelte +36 -0
  39. package/dist/components/calendar/calendar.stories.svelte.d.ts +6 -0
  40. package/dist/components/calendar/index.d.ts +4 -0
  41. package/dist/components/calendar/index.js +4 -0
  42. package/dist/components/calendar/runes.svelte.d.ts +3 -0
  43. package/dist/components/calendar/runes.svelte.js +25 -0
  44. package/dist/components/calendar/types.d.ts +62 -0
  45. package/dist/components/calendar/types.js +1 -0
  46. package/dist/components/card/card-body.svelte +39 -39
  47. package/dist/components/card/card-description.svelte +41 -41
  48. package/dist/components/card/card-footer.svelte +41 -41
  49. package/dist/components/card/card-header.svelte +41 -41
  50. package/dist/components/card/card-media.svelte +41 -41
  51. package/dist/components/card/card-root.svelte +91 -91
  52. package/dist/components/card/card-subtitle.svelte +41 -41
  53. package/dist/components/card/card-title.svelte +45 -45
  54. package/dist/components/collapsible/collapsible-body.svelte +39 -39
  55. package/dist/components/collapsible/collapsible-header.svelte +39 -39
  56. package/dist/components/collapsible/collapsible-indicator.svelte +50 -50
  57. package/dist/components/collapsible/collapsible-root.svelte +66 -66
  58. package/dist/components/combobox/combobox-root.svelte +65 -65
  59. package/dist/components/container/container.stories.svelte.d.ts +1 -1
  60. package/dist/components/contextmenu/contextmenu-trigger.svelte.d.ts +1 -1
  61. package/dist/components/datagrid/bond.svelte.d.ts +2 -2
  62. package/dist/components/datagrid/datagrid-body.svelte +37 -37
  63. package/dist/components/datagrid/datagrid-checkbox.svelte +101 -101
  64. package/dist/components/datagrid/datagrid-footer.svelte +34 -34
  65. package/dist/components/datagrid/datagrid-header.svelte +49 -49
  66. package/dist/components/datagrid/datagrid-root.svelte +59 -59
  67. package/dist/components/datagrid/td/datagrid-td.svelte +66 -66
  68. package/dist/components/datagrid/th/datagrid-th.svelte +106 -106
  69. package/dist/components/datagrid/tr/datagrid-tr.svelte +88 -88
  70. package/dist/components/date-picker/atoms.d.ts +7 -0
  71. package/dist/components/date-picker/atoms.js +7 -0
  72. package/dist/components/date-picker/bond.svelte.d.ts +67 -0
  73. package/dist/components/date-picker/bond.svelte.js +174 -0
  74. package/dist/components/date-picker/date-picker-calendar.svelte +42 -0
  75. package/dist/components/date-picker/date-picker-calendar.svelte.d.ts +7 -0
  76. package/dist/components/date-picker/date-picker-header.svelte +105 -0
  77. package/dist/components/date-picker/date-picker-header.svelte.d.ts +7 -0
  78. package/dist/components/date-picker/date-picker-months.svelte +150 -0
  79. package/dist/components/date-picker/date-picker-months.svelte.d.ts +7 -0
  80. package/dist/components/date-picker/date-picker-root.svelte +94 -0
  81. package/dist/components/date-picker/date-picker-root.svelte.d.ts +17 -0
  82. package/dist/components/date-picker/date-picker-years.svelte +214 -0
  83. package/dist/components/date-picker/date-picker-years.svelte.d.ts +7 -0
  84. package/dist/components/date-picker/date-picker.stories.svelte +51 -0
  85. package/dist/components/date-picker/date-picker.stories.svelte.d.ts +3 -0
  86. package/dist/components/date-picker/index.d.ts +3 -0
  87. package/dist/components/date-picker/index.js +3 -0
  88. package/dist/components/date-picker/types.d.ts +1 -0
  89. package/dist/components/date-picker/types.js +1 -0
  90. package/dist/components/dialog/dialog-body.svelte +39 -39
  91. package/dist/components/dialog/dialog-close-button.svelte +58 -58
  92. package/dist/components/dialog/dialog-content.svelte +62 -62
  93. package/dist/components/dialog/dialog-description.svelte +40 -40
  94. package/dist/components/dialog/dialog-footer.svelte +39 -39
  95. package/dist/components/dialog/dialog-header.svelte +39 -39
  96. package/dist/components/dialog/dialog-root.svelte +110 -110
  97. package/dist/components/dialog/dialog-title.svelte +41 -41
  98. package/dist/components/drawer/drawer-backdrop.svelte +38 -38
  99. package/dist/components/drawer/drawer-body.svelte +42 -42
  100. package/dist/components/drawer/drawer-content.svelte +42 -42
  101. package/dist/components/drawer/drawer-description.svelte +44 -44
  102. package/dist/components/drawer/drawer-footer.svelte +41 -41
  103. package/dist/components/drawer/drawer-header.svelte +43 -43
  104. package/dist/components/drawer/drawer-root.svelte +93 -93
  105. package/dist/components/drawer/drawer-title.svelte +44 -44
  106. package/dist/components/dropdown/dropdown-query.svelte +54 -54
  107. package/dist/components/dropdown/dropdown-root.svelte +59 -59
  108. package/dist/components/dropdown/dropdown-trigger.svelte +41 -41
  109. package/dist/components/dropdown/dropdown-value.svelte +60 -60
  110. package/dist/components/element/html-element.svelte +85 -85
  111. package/dist/components/form/bond.svelte.d.ts +1 -1
  112. package/dist/components/form/field/field-control.svelte +48 -48
  113. package/dist/components/form/field/field-label.svelte +24 -24
  114. package/dist/components/form/field/field-root.svelte +59 -59
  115. package/dist/components/icon/icon.svelte +44 -44
  116. package/dist/components/image/image.stories.svelte.d.ts +1 -1
  117. package/dist/components/index.d.ts +3 -0
  118. package/dist/components/index.js +3 -0
  119. package/dist/components/input/input-control.svelte +103 -103
  120. package/dist/components/label/label.svelte +25 -25
  121. package/dist/components/popover/popover-arrow.svelte +111 -111
  122. package/dist/components/popover/popover-content.svelte +46 -7
  123. package/dist/components/popover/popover-root.svelte +48 -49
  124. package/dist/components/popover/popover.stories.svelte +52 -67
  125. package/dist/components/portal/portal-root.svelte +83 -83
  126. package/dist/components/portal/teleport.svelte +50 -50
  127. package/dist/components/qr-code/index.d.ts +1 -0
  128. package/dist/components/qr-code/index.js +1 -0
  129. package/dist/components/qr-code/qr-code.stories.svelte +24 -0
  130. package/dist/components/qr-code/qr-code.stories.svelte.d.ts +26 -0
  131. package/dist/components/qr-code/qr-code.svelte +25 -0
  132. package/dist/components/qr-code/qr-code.svelte.d.ts +6 -0
  133. package/dist/components/radio/radio.svelte +109 -109
  134. package/dist/components/radio/types.svelte.d.ts +1 -1
  135. package/dist/components/scrollable/scrollable-container.svelte +82 -82
  136. package/dist/components/scrollable/scrollable-content.svelte +41 -41
  137. package/dist/components/scrollable/scrollable-root.svelte +100 -100
  138. package/dist/components/scrollable/scrollable-thumb.svelte +75 -75
  139. package/dist/components/scrollable/scrollable-track.svelte +59 -59
  140. package/dist/components/scrollable/scrollable.stories.svelte.d.ts +1 -1
  141. package/dist/components/tabs/tab/tab-body.svelte +52 -52
  142. package/dist/components/tabs/tab/tab-description.svelte +41 -41
  143. package/dist/components/tabs/tab/tab-header.svelte +71 -71
  144. package/dist/components/tabs/tab/tab-root.svelte +86 -86
  145. package/dist/components/toast/toast-description.svelte +38 -38
  146. package/dist/components/toast/toast-root.svelte +61 -61
  147. package/dist/components/toast/toast-title.svelte +35 -35
  148. package/dist/components/tree/tree-body.svelte +39 -39
  149. package/dist/components/tree/tree-header.svelte +54 -54
  150. package/dist/components/tree/tree-indicator.svelte +40 -40
  151. package/dist/components/tree/tree-root.svelte +65 -65
  152. package/dist/components/virtual/virtual-root.svelte +239 -239
  153. package/dist/context/preset.svelte.d.ts +1 -1
  154. package/dist/icons/icon-arrow-down.svelte.d.ts +1 -1
  155. package/dist/icons/icon-checkmark.svelte.d.ts +1 -1
  156. package/dist/icons/icon-close.svelte.d.ts +1 -1
  157. package/dist/icons/icon-more-vert.svelte.d.ts +1 -1
  158. package/dist/runes/container.svelte.d.ts +2 -2
  159. package/dist/shared/bond.svelte.d.ts +1 -1
  160. package/dist/utils/state.d.ts +1 -1
  161. package/dist/utils/state.js +2 -1
  162. package/llm/variants.md +1261 -712
  163. package/package.json +464 -437
@@ -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>