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

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 (92) hide show
  1. package/README.md +852 -852
  2. package/dist/attachments/clickout.svelte.d.ts +1 -1
  3. package/dist/attachments/clickout.svelte.js +2 -2
  4. package/dist/components/accordion/accordion-root.svelte +61 -61
  5. package/dist/components/accordion/accordion-root.svelte.d.ts +1 -1
  6. package/dist/components/accordion/accordion.stories.svelte +145 -134
  7. package/dist/components/alert/alert.stories.svelte +400 -401
  8. package/dist/components/atom/html-atom.svelte +71 -17
  9. package/dist/components/avatar/avatar.stories.svelte +22 -27
  10. package/dist/components/badge/badge.stories.svelte +12 -17
  11. package/dist/components/badge/badge.svelte +19 -19
  12. package/dist/components/breadcrumb/breadcrumb.stories.svelte +16 -21
  13. package/dist/components/button/button.stories.svelte +27 -60
  14. package/dist/components/calendar/calendar-day.svelte +96 -96
  15. package/dist/components/calendar/calendar-header.svelte +29 -29
  16. package/dist/components/calendar/calendar-root.svelte +206 -206
  17. package/dist/components/calendar/calendar.stories.svelte +10 -15
  18. package/dist/components/card/card-body.svelte +39 -39
  19. package/dist/components/card/card-footer.svelte +41 -41
  20. package/dist/components/card/card-root.svelte +91 -91
  21. package/dist/components/card/card.stories.svelte +133 -145
  22. package/dist/components/checkbox/checkbox.stories.svelte +22 -27
  23. package/dist/components/checkbox/checkbox.svelte +155 -157
  24. package/dist/components/collapsible/collapsible.stories.svelte +172 -173
  25. package/dist/components/combobox/combobox-root.svelte +65 -65
  26. package/dist/components/combobox/compobox.stories.svelte +51 -54
  27. package/dist/components/container/container.stories.svelte +20 -23
  28. package/dist/components/datagrid/datagrid-root.svelte +59 -59
  29. package/dist/components/datagrid/datagrid.css +5 -5
  30. package/dist/components/datagrid/datagrid.stories.svelte +72 -75
  31. package/dist/components/date-picker/date-picker-calendar.svelte +67 -67
  32. package/dist/components/date-picker/date-picker-header.svelte +100 -100
  33. package/dist/components/date-picker/date-picker-months.svelte +142 -142
  34. package/dist/components/date-picker/date-picker-root.svelte +1 -1
  35. package/dist/components/date-picker/date-picker-years.svelte +205 -205
  36. package/dist/components/date-picker/date-picker.stories.svelte +11 -18
  37. package/dist/components/dialog/dialog-content.svelte +62 -62
  38. package/dist/components/dialog/dialog.stories.svelte +64 -67
  39. package/dist/components/drawer/attachments.svelte.js +8 -9
  40. package/dist/components/drawer/drawer-content.svelte +57 -42
  41. package/dist/components/drawer/drawer.stories.svelte +212 -224
  42. package/dist/components/dropdown/dropdown-root.svelte +59 -59
  43. package/dist/components/dropdown/dropdown.stories.svelte +80 -83
  44. package/dist/components/form/form.stories.svelte +96 -99
  45. package/dist/components/image/image.stories.svelte +20 -23
  46. package/dist/components/input/input.stories.svelte +35 -38
  47. package/dist/components/label/label.stories.svelte +15 -26
  48. package/dist/components/label/label.stories.svelte.d.ts +24 -4
  49. package/dist/components/lazy/lazy.stories.svelte +9 -16
  50. package/dist/components/lazy/lazy.svelte +28 -28
  51. package/dist/components/link/link.stories.svelte +15 -26
  52. package/dist/components/link/link.stories.svelte.d.ts +24 -4
  53. package/dist/components/menu/menu-list.svelte +40 -40
  54. package/dist/components/menu/menu.stories.svelte +33 -36
  55. package/dist/components/popover/bond.svelte.js +31 -25
  56. package/dist/components/popover/popover-arrow.svelte +111 -111
  57. package/dist/components/popover/popover-content.svelte +175 -178
  58. package/dist/components/popover/popover-indicator.svelte +44 -43
  59. package/dist/components/popover/popover-root.svelte +48 -48
  60. package/dist/components/popover/popover.stories.svelte +49 -52
  61. package/dist/components/qr-code/qr-code.stories.svelte +4 -13
  62. package/dist/components/qr-code/qr-code.svelte +75 -75
  63. package/dist/components/radio/radio-group.stories.svelte +41 -50
  64. package/dist/components/radio/radio.stories.svelte +17 -26
  65. package/dist/components/radio/radio.svelte +109 -109
  66. package/dist/components/root/root.svelte +121 -121
  67. package/dist/components/root/root.svelte.d.ts +1 -1
  68. package/dist/components/scrollable/scrollable.stories.svelte +116 -126
  69. package/dist/components/sidebar/sidebar-content.svelte +13 -2
  70. package/dist/components/sidebar/sidebar-root.svelte +10 -12
  71. package/dist/components/sidebar/sidebar.stories.svelte +8 -19
  72. package/dist/components/sidebar/types.d.ts +1 -0
  73. package/dist/components/tabs/tab/bond.svelte.d.ts +4 -1
  74. package/dist/components/tabs/tab/bond.svelte.js +4 -1
  75. package/dist/components/tabs/tabs.stories.svelte +56 -59
  76. package/dist/components/tooltip/tooltip-trigger.svelte +39 -37
  77. package/dist/components/tooltip/tooltip.stories.svelte +32 -35
  78. package/dist/components/tree/tree.stories.svelte +142 -134
  79. package/dist/context/preset.svelte.d.ts +3 -3
  80. package/dist/utils/function.d.ts +2 -0
  81. package/dist/utils/function.js +6 -0
  82. package/package.json +6 -9
  83. package/dist/actions/animation.svelte.d.ts +0 -6
  84. package/dist/actions/animation.svelte.js +0 -14
  85. package/dist/actions/clickout.svelte.d.ts +0 -2
  86. package/dist/actions/clickout.svelte.js +0 -15
  87. package/dist/actions/popover.svelte.d.ts +0 -19
  88. package/dist/actions/popover.svelte.js +0 -81
  89. package/dist/actions/portal.svelte.d.ts +0 -8
  90. package/dist/actions/portal.svelte.js +0 -32
  91. package/dist/attachments/gsap.svelte.d.ts +0 -2
  92. package/dist/attachments/gsap.svelte.js +0 -26
@@ -1,59 +1,56 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import { Tabs as Tabs_, Tab } from '.';
4
- import { Root as TabsRoot } from './atoms';
5
- import Root from '../root/root.svelte';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- title: 'Atoms/Tabs',
10
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
11
-
12
- parameters: {
13
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
14
- layout: 'fullscreen'
15
- },
16
- args: {}
17
- });
18
- </script>
19
-
20
- <script lang="ts">
21
- let value = $state('ar');
22
- </script>
23
-
24
- <Story name="Tabs" args={{}}>
25
- <Root class="p-4">
26
- <Tabs_.Root bind:value>
27
- <Tabs_.Header class="border-b" />
28
- <Tabs_.Body>
29
- <Tab.Root value="en">
30
- <Tab.Header>English</Tab.Header>
31
- <Tab.Body class="">
32
- <div>
33
- Ligula ex tincidunt efficitur netus consequat aenean finibus. Dictum ex pretium
34
- torquent vel scelerisque quisque class nisl penatibus blandit risus. Pretium praesent
35
- egestas ante placerat lacus pede risus pulvinar facilisi.
36
- </div>
37
- </Tab.Body>
38
- </Tab.Root>
39
-
40
- <Tab.Root value="ar">
41
- <Tab.Header>Arabic</Tab.Header>
42
- <Tab.Body class="h-[1440px]">
43
- <div>
44
- Interdum turpis taciti mauris orci condimentum vitae malesuada ornare ridiculus
45
- ultrices quisque feugiat pretium facilisis justo ligula pede volutpat nisi viverra
46
- adipiscing donec torquent ac sapien aliquet parturient posuere leo litora vivamus
47
- luctus vestibulum aptent faucibus platea libero dolor purus integer fusce nam senectus
48
- nibh nostra diam tortor dictumst praesent tellus montes ad iaculis sociosqu mollis
49
- sodales consectetuer hac accumsan dictum blandit conubia velit elit efficitur duis
50
- nascetur erat mattis semper et aliquam magna lorem bibendum ante id cursus nulla eget
51
- ut pellentesque himenaeos consectetur potenti si maximus ullamcorper etiam nec magnis
52
- ipsum mus porta lobortis natoque rhoncus fringilla
53
- </div>
54
- </Tab.Body>
55
- </Tab.Root>
56
- </Tabs_.Body>
57
- </Tabs_.Root>
58
- </Root>
59
- </Story>
1
+ <script module>
2
+ import { defineMeta } from '@storybook/addon-svelte-csf';
3
+ import { Tabs as Tabs_, Tab } from '.';
4
+ import { Root as TabsRoot } from './atoms';
5
+
6
+ // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
+ const { Story } = defineMeta({
8
+ title: 'Atoms/Tabs',
9
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
10
+
11
+ parameters: {
12
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
13
+ layout: 'fullscreen'
14
+ },
15
+ args: {}
16
+ });
17
+ </script>
18
+
19
+ <script lang="ts">
20
+ let value = $state('ar');
21
+ </script>
22
+
23
+ <Story name="Tabs" args={{}}>
24
+ <Tabs_.Root bind:value>
25
+ <Tabs_.Header class="border-b" />
26
+ <Tabs_.Body>
27
+ <Tab.Root value="en">
28
+ <Tab.Header>English</Tab.Header>
29
+ <Tab.Body class="">
30
+ <div>
31
+ Ligula ex tincidunt efficitur netus consequat aenean finibus. Dictum ex pretium torquent
32
+ vel scelerisque quisque class nisl penatibus blandit risus. Pretium praesent egestas
33
+ ante placerat lacus pede risus pulvinar facilisi.
34
+ </div>
35
+ </Tab.Body>
36
+ </Tab.Root>
37
+
38
+ <Tab.Root value="ar">
39
+ <Tab.Header>Arabic</Tab.Header>
40
+ <Tab.Body class="h-[1440px]">
41
+ <div>
42
+ Interdum turpis taciti mauris orci condimentum vitae malesuada ornare ridiculus ultrices
43
+ quisque feugiat pretium facilisis justo ligula pede volutpat nisi viverra adipiscing
44
+ donec torquent ac sapien aliquet parturient posuere leo litora vivamus luctus vestibulum
45
+ aptent faucibus platea libero dolor purus integer fusce nam senectus nibh nostra diam
46
+ tortor dictumst praesent tellus montes ad iaculis sociosqu mollis sodales consectetuer
47
+ hac accumsan dictum blandit conubia velit elit efficitur duis nascetur erat mattis
48
+ semper et aliquam magna lorem bibendum ante id cursus nulla eget ut pellentesque
49
+ himenaeos consectetur potenti si maximus ullamcorper etiam nec magnis ipsum mus porta
50
+ lobortis natoque rhoncus fringilla
51
+ </div>
52
+ </Tab.Body>
53
+ </Tab.Root>
54
+ </Tabs_.Body>
55
+ </Tabs_.Root>
56
+ </Story>
@@ -1,37 +1,39 @@
1
- <script lang="ts">
2
- import { PopoverBond } from '../popover/bond.svelte';
3
- import { Trigger } from '../popover/atoms';
4
-
5
- const popoverBond = PopoverBond.get();
6
-
7
- let { onmount, children, ...restProps } = $props();
8
-
9
- function tooltip(node: HTMLElement) {
10
- const onpointerenter = async (ev: PointerEvent) => {
11
- await popoverBond?.isReady;
12
- popoverBond?.state.open();
13
- };
14
- const onpointerleave = (ev: PointerEvent) => {
15
- popoverBond?.state.close();
16
- };
17
-
18
- node.addEventListener('pointerenter', onpointerenter);
19
- node.addEventListener('pointerleave', onpointerleave);
20
-
21
- const cleanup = () => {
22
- node.removeEventListener('pointerenter', onpointerenter);
23
- node.removeEventListener('pointerleave', onpointerleave);
24
- };
25
-
26
- const unmount = onmount?.(node);
27
-
28
- return () => {
29
- cleanup?.();
30
- unmount?.();
31
- };
32
- }
33
- </script>
34
-
35
- <Trigger preset="tooltip.trigger" onmount={tooltip} {...restProps}>
36
- {@render children?.()}
37
- </Trigger>
1
+ <script lang="ts">
2
+ import { PopoverBond } from '../popover/bond.svelte';
3
+ import { Trigger } from '../popover/atoms';
4
+
5
+ const popoverBond = PopoverBond.get();
6
+
7
+ let { onmount, children, ...restProps } = $props();
8
+
9
+ function tooltip(node: HTMLElement) {
10
+ const onpointerenter = async () => {
11
+ requestAnimationFrame(() => {
12
+ popoverBond?.state.open();
13
+ });
14
+ node.addEventListener('pointerleave', onpointerleave);
15
+ };
16
+ const onpointerleave = () => {
17
+ popoverBond?.state.close();
18
+ node.removeEventListener('pointerleave', onpointerleave);
19
+ };
20
+
21
+ node.addEventListener('pointerenter', onpointerenter, { passive: true });
22
+
23
+ const cleanup = () => {
24
+ node.removeEventListener('pointerenter', onpointerenter);
25
+ node.removeEventListener('pointerleave', onpointerleave);
26
+ };
27
+
28
+ const unmount = onmount?.(node);
29
+
30
+ return () => {
31
+ cleanup?.();
32
+ unmount?.();
33
+ };
34
+ }
35
+ </script>
36
+
37
+ <Trigger preset="tooltip.trigger" onmount={tooltip} {...restProps}>
38
+ {@render children?.()}
39
+ </Trigger>
@@ -1,35 +1,32 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import { Tooltip as Tooltip_ } from '.';
4
- import { Root as TooltipRoot } from './atoms';
5
- import Root from '../root/root.svelte';
6
- import { Button } from '../button';
7
-
8
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
9
- const { Story } = defineMeta({
10
- title: 'Atoms/Tooltip',
11
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
12
-
13
- parameters: {
14
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
15
- layout: 'fullscreen'
16
- },
17
- args: {}
18
- });
19
- </script>
20
-
21
- <script lang="ts">
22
- let open = $state(false);
23
- </script>
24
-
25
- <Story name="Tooltip" args={{}}>
26
- <Root class="p-4">
27
- <Tooltip_.Root bind:open offset={0}>
28
- <Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
29
- <Tooltip_.Content>
30
- <div>Hello World !</div>
31
- <Tooltip_.Arrow />
32
- </Tooltip_.Content>
33
- </Tooltip_.Root>
34
- </Root>
35
- </Story>
1
+ <script module>
2
+ import { defineMeta } from '@storybook/addon-svelte-csf';
3
+ import { Tooltip as Tooltip_ } from '.';
4
+ import { Root as TooltipRoot } from './atoms';
5
+ import { Button } from '../button';
6
+
7
+ // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
+ const { Story } = defineMeta({
9
+ title: 'Atoms/Tooltip',
10
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
11
+
12
+ parameters: {
13
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
14
+ layout: 'fullscreen'
15
+ },
16
+ args: {}
17
+ });
18
+ </script>
19
+
20
+ <script lang="ts">
21
+ let open = $state(false);
22
+ </script>
23
+
24
+ <Story name="Tooltip" args={{}}>
25
+ <Tooltip_.Root bind:open offset={0}>
26
+ <Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
27
+ <Tooltip_.Content>
28
+ <div>Hello World !</div>
29
+ <Tooltip_.Arrow />
30
+ </Tooltip_.Content>
31
+ </Tooltip_.Root>
32
+ </Story>
@@ -1,134 +1,142 @@
1
- <script module>
2
- import { untrack } from 'svelte';
3
- import gsap from 'gsap';
4
- import { RenderScan } from 'svelte-render-scan';
5
- import { defineMeta } from '@storybook/addon-svelte-csf';
6
- import { dev } from '$app/environment';
7
- import { Tree as Tree_ } from '.';
8
- import { tree } from './attachments.svelte';
9
- import { Root as TreeRoot } from './atoms';
10
- import { TreeBond } from './bond.svelte';
11
- import Root from '../root/root.svelte';
12
-
13
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
14
- const { Story } = defineMeta({
15
- title: 'Atoms/Tree',
16
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
17
-
18
- parameters: {
19
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
20
- layout: 'fullscreen'
21
- },
22
- args: {}
23
- });
24
- </script>
25
-
26
- <script lang="ts">
27
- let open = $state(true);
28
- </script>
29
-
30
- <Story name="Tree" args={{}}>
31
- <Root class="p-4">
32
- <Tree_.Root class="" bind:open>
33
- {#if dev}
34
- <RenderScan duration={300} />
35
- {/if}
36
-
37
- <Tree_.Header>Vehicles</Tree_.Header>
38
-
39
- <Tree_.Body
40
- class="border-l border-l-neutral-200"
41
- onmount={(node) => {
42
- const bond = TreeBond.get();
43
- const isOpen = untrack(() => bond?.state.props.open ?? false);
44
- gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
45
- }}
46
- {@attach tree((node, bond) => {
47
- const isOpen = bond?.state.props.open ?? false;
48
- gsap.to(node, {
49
- height: +isOpen ? 'auto' : 0,
50
- opacity: +isOpen,
51
- pointerEvents: isOpen ? 'all' : 'none',
52
- duration: 0.1
53
- });
54
- })}
55
- >
56
- <Tree_.Root>
57
- <Tree_.Header>Cars</Tree_.Header>
58
- <Tree_.Body
59
- class="border-l border-l-neutral-200"
60
- onmount={(node) => {
61
- const bond = TreeBond.get();
62
- const isOpen = bond?.state.props.open ?? false;
63
- gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
64
- }}
65
- animate={(node) => {
66
- const bond = TreeBond.get();
67
- const isOpen = bond?.state.props.open ?? false;
68
- gsap.to(node, {
69
- height: +isOpen ? 'auto' : 0,
70
- opacity: +isOpen,
71
- pointerEvents: isOpen ? 'all' : 'none',
72
- duration: 0.1
73
- });
74
- }}
75
- >
76
- Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
77
- tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
78
- dolor diam nascetur.
79
- </Tree_.Body>
80
- </Tree_.Root>
81
-
82
- <Tree_.Root>
83
- <Tree_.Header>Trucks</Tree_.Header>
84
- <Tree_.Body
85
- class="border-l border-l-neutral-200"
86
- onmount={(node) => {
87
- const bond = TreeBond.get();
88
- const isOpen = bond?.state.props.open ?? false;
89
- gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
90
- }}
91
- {@attach tree((node, bond) => {
92
- const isOpen = bond?.state.props.open ?? false;
93
- gsap.to(node, {
94
- height: +isOpen ? 'auto' : 0,
95
- opacity: +isOpen,
96
- pointerEvents: isOpen ? 'all' : 'none',
97
- duration: 0.1
98
- });
99
- })}
100
- >
101
- Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
102
- tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
103
- dolor diam nascetur.
104
- </Tree_.Body>
105
- </Tree_.Root>
106
-
107
- <Tree_.Root>
108
- <Tree_.Header>Bikes</Tree_.Header>
109
- <Tree_.Body
110
- class="border-l border-l-neutral-200"
111
- onmount={(node) => {
112
- const bond = TreeBond.get();
113
- const isOpen = untrack(() => bond?.state.props.open ?? false);
114
- gsap.set(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen });
115
- }}
116
- {@attach tree((node, bond) => {
117
- const isOpen = bond?.state.props.open ?? false;
118
- gsap.to(node, {
119
- height: +isOpen ? 'auto' : 0,
120
- opacity: +isOpen,
121
- pointerEvents: isOpen ? 'all' : 'none',
122
- duration: 0.1
123
- });
124
- })}
125
- >
126
- Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
127
- tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
128
- dolor diam nascetur.
129
- </Tree_.Body>
130
- </Tree_.Root>
131
- </Tree_.Body>
132
- </Tree_.Root>
133
- </Root>
134
- </Story>
1
+ <script module>
2
+ import { untrack } from 'svelte';
3
+ import { animate } from 'motion';
4
+ import { RenderScan } from 'svelte-render-scan';
5
+ import { defineMeta } from '@storybook/addon-svelte-csf';
6
+ import { dev } from '$app/environment';
7
+ import { Tree as Tree_ } from '.';
8
+ import { tree } from './attachments.svelte';
9
+ import { TreeBond } from './bond.svelte';
10
+
11
+ // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
12
+ const { Story } = defineMeta({
13
+ title: 'Atoms/Tree',
14
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
15
+
16
+ parameters: {
17
+ // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
18
+ layout: 'fullscreen'
19
+ },
20
+ args: {}
21
+ });
22
+ </script>
23
+
24
+ <script lang="ts">
25
+ let open = $state(true);
26
+ </script>
27
+
28
+ <Story name="Tree" args={{}}>
29
+ <Tree_.Root class="" bind:open>
30
+ {#if dev}
31
+ <RenderScan duration={300} />
32
+ {/if}
33
+
34
+ <Tree_.Header>Vehicles</Tree_.Header>
35
+
36
+ <Tree_.Body
37
+ class="border-l border-l-neutral-200"
38
+ onmount={(node) => {
39
+ const bond = TreeBond.get();
40
+ const isOpen = untrack(() => bond?.state.props.open ?? false);
41
+ animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
42
+ }}
43
+ {@attach tree((node, bond) => {
44
+ const isOpen = bond?.state.props.open ?? false;
45
+ animate(
46
+ node,
47
+ {
48
+ height: +isOpen ? 'auto' : 0,
49
+ opacity: +isOpen,
50
+ pointerEvents: isOpen ? 'all' : 'none'
51
+ },
52
+ { duration: 0.1 }
53
+ );
54
+ })}
55
+ >
56
+ <Tree_.Root>
57
+ <Tree_.Header>Cars</Tree_.Header>
58
+ <Tree_.Body
59
+ class="border-l border-l-neutral-200"
60
+ onmount={(node) => {
61
+ const bond = TreeBond.get();
62
+ const isOpen = bond?.state.props.open ?? false;
63
+ animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
64
+ }}
65
+ animate={(node) => {
66
+ const bond = TreeBond.get();
67
+ const isOpen = bond?.state.props.open ?? false;
68
+ animate(
69
+ node,
70
+ {
71
+ height: +isOpen ? 'auto' : 0,
72
+ opacity: +isOpen,
73
+ pointerEvents: isOpen ? 'all' : 'none'
74
+ },
75
+ { duration: 0.1 }
76
+ );
77
+ }}
78
+ >
79
+ Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
80
+ tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
81
+ dolor diam nascetur.
82
+ </Tree_.Body>
83
+ </Tree_.Root>
84
+
85
+ <Tree_.Root>
86
+ <Tree_.Header>Trucks</Tree_.Header>
87
+ <Tree_.Body
88
+ class="border-l border-l-neutral-200"
89
+ onmount={(node) => {
90
+ const bond = TreeBond.get();
91
+ const isOpen = bond?.state.props.open ?? false;
92
+ animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
93
+ }}
94
+ {@attach tree((node, bond) => {
95
+ const isOpen = bond?.state.props.open ?? false;
96
+ animate(
97
+ node,
98
+ {
99
+ height: +isOpen ? 'auto' : 0,
100
+ opacity: +isOpen,
101
+ pointerEvents: isOpen ? 'all' : 'none'
102
+ },
103
+ { duration: 0.1 }
104
+ );
105
+ })}
106
+ >
107
+ Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
108
+ tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
109
+ dolor diam nascetur.
110
+ </Tree_.Body>
111
+ </Tree_.Root>
112
+
113
+ <Tree_.Root>
114
+ <Tree_.Header>Bikes</Tree_.Header>
115
+ <Tree_.Body
116
+ class="border-l border-l-neutral-200"
117
+ onmount={(node) => {
118
+ const bond = TreeBond.get();
119
+ const isOpen = untrack(() => bond?.state.props.open ?? false);
120
+ animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
121
+ }}
122
+ {@attach tree((node, bond) => {
123
+ const isOpen = bond?.state.props.open ?? false;
124
+ animate(
125
+ node,
126
+ {
127
+ height: +isOpen ? 'auto' : 0,
128
+ opacity: +isOpen,
129
+ pointerEvents: isOpen ? 'all' : 'none'
130
+ },
131
+ { duration: 0.1 }
132
+ );
133
+ })}
134
+ >
135
+ Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
136
+ tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
137
+ dolor diam nascetur.
138
+ </Tree_.Body>
139
+ </Tree_.Root>
140
+ </Tree_.Body>
141
+ </Tree_.Root>
142
+ </Story>
@@ -2,7 +2,7 @@ import type { ClassValue } from 'svelte/elements';
2
2
  import type { Base } from '../components/atom';
3
3
  import type { Bond } from '../shared';
4
4
  export type PresetModuleName = 'accordion' | 'accordion.item.body' | 'accordion.item.header' | 'accordion.item.indicator' | 'accordion.item' | 'alert.actions' | 'alert.close-button' | 'alert.content' | 'alert.description' | 'alert.icon' | 'alert' | 'alert.title' | 'card.content' | 'card.description' | 'card.footer' | 'card.header' | 'card.media' | 'card' | 'card.subtitle' | 'card.title' | 'collapsible.body' | 'collapsible.header' | 'collapsible.indicator' | 'collapsible' | 'combobox.control' | 'combobox.trigger' | 'combobox.item' | 'dialog.close-button' | 'dialog.body' | 'dialog.content' | 'dialog.description' | 'dialog.footer' | 'dialog.header' | 'dialog' | 'dialog.title' | 'divider' | 'dropdown.placeholder' | 'dropdown.query' | 'dropdown.trigger' | 'dropdown.value' | 'dropdown' | 'field.control' | 'field.label' | 'field' | 'form' | 'icon' | 'input' | 'input.control' | 'input.placeholder' | 'label' | 'layer.inner' | 'layer' | 'link' | 'list.divider' | 'list.group' | 'list.item' | 'list.item' | 'list.item' | 'dropdown.item' | 'menu.body' | 'popover.arrow' | 'popover.indicator' | 'popover.content' | 'popover.trigger' | 'portal.inner' | 'portal' | 'root' | 'root.portals' | 'sidebar.content' | 'sidebar' | 'drawer.backdrop' | 'drawer.body' | 'drawer.content' | 'drawer.description' | 'drawer.title' | 'drawer.footer' | 'drawer.header' | 'drawer' | 'stack.root' | 'stack.item' | 'tabs.body' | 'tabs.header' | 'tabs' | 'tab.header' | 'tab.body' | 'tab.description' | 'tab' | 'tree.body' | 'tree.header' | 'tree.indicator' | 'tree' | 'datagrid' | 'datagrid.header' | 'datagrid.th' | 'datagrid.body' | 'datagrid.tr' | 'datagrid.td' | 'datagrid.footer' | 'datagrid.checkbox' | 'datagrid.sort-icon' | 'scrollable' | 'scrollable.container' | 'scrollable.content' | 'scrollable.track' | 'scrollable.thumb' | 'breadcrumb' | 'breadcrumb.item' | 'breadcrumb.separator' | 'badge' | 'button' | 'checkbox' | 'checkbox.checkmark' | 'checkbox.indeterminate' | 'radio' | 'radio.group' | 'container' | 'calendar' | 'calendar.day' | 'calendar.header' | 'calendar.weekday' | 'calendar.body' | 'datepicker.trigger' | 'datepicker.calendar' | 'datepicker.years' | 'datepicker.months' | 'datepicker.header';
5
- export type PresetEntryRecord = {
5
+ export interface PresetEntryRecord {
6
6
  [key: string]: unknown;
7
7
  class?: ClassValue;
8
8
  as?: string;
@@ -10,8 +10,8 @@ export type PresetEntryRecord = {
10
10
  variants?: Record<string, Record<string, any>>;
11
11
  compounds?: Array<Record<string, any>>;
12
12
  defaults?: Record<string, any>;
13
- };
14
- export type PresetEntry = (this: Bond | undefined | null, bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord;
13
+ }
14
+ export type PresetEntry = (bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord | (() => PresetEntryRecord);
15
15
  export type Preset = Record<PresetModuleName, PresetEntry>;
16
16
  export declare function getPreset<K extends PresetModuleName>(key: K): PresetEntry | undefined;
17
17
  export declare function getPreset(): Partial<Preset> | undefined;
@@ -0,0 +1,2 @@
1
+ export declare function call<const T = (...args: any) => any>(param: T, ...args: any[]): ReturnType<T>;
2
+ export declare function call<const T>(param: T, ...args: any[]): T;
@@ -0,0 +1,6 @@
1
+ export function call(param, ...args) {
2
+ if (typeof param === 'function') {
3
+ return param(...args);
4
+ }
5
+ return param;
6
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@svelte-atoms/core",
3
- "version": "1.0.0-alpha.29",
3
+ "version": "1.0.0-alpha.30",
4
4
  "description": "A modular, accessible, and extensible Svelte UI component library.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -357,11 +357,6 @@
357
357
  "svelte": "./dist/components/tooltip/atoms.js",
358
358
  "default": "./dist/components/tooltip/atoms.js"
359
359
  },
360
- "./components": {
361
- "types": "./dist/components/index.d.ts",
362
- "svelte": "./dist/components/index.js",
363
- "default": "./dist/components/index.js"
364
- },
365
360
  "./utils": {
366
361
  "types": "./dist/utils/index.d.ts",
367
362
  "svelte": "./dist/utils/index.js",
@@ -372,6 +367,10 @@
372
367
  "svelte": "./dist/shared/index.js",
373
368
  "default": "./dist/shared/index.js"
374
369
  },
370
+ "./tw": {
371
+ "svelte": "./dist/components/root/root.css",
372
+ "default": "./dist/components/root/root.css"
373
+ },
375
374
  "./styles/root": {
376
375
  "svelte": "./dist/components/root/root.css",
377
376
  "default": "./dist/components/root/root.css"
@@ -456,10 +455,8 @@
456
455
  "clsx": "^2.1.1",
457
456
  "date-fns": "^4.1.0",
458
457
  "es-toolkit": "^1.37.2",
459
- "gsap": "^3.13.0",
460
458
  "motion": "^12.23.22",
461
459
  "nanoid": "^5.1.5",
462
- "tailwind-merge": "^3.2.0",
463
- "uqr": "^0.1.2"
460
+ "tailwind-merge": "^3.2.0"
464
461
  }
465
462
  }
@@ -1,6 +0,0 @@
1
- export declare function animate(node: HTMLElement | SVGElement, fn: () => gsap.TweenVars): void;
2
- export type GsapFromToParams = {
3
- from: gsap.TweenVars;
4
- to: gsap.TweenVars;
5
- };
6
- export declare function gsapFromTo(node: HTMLElement | SVGElement, fn: () => GsapFromToParams): void;