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

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 (147) hide show
  1. package/README.md +853 -852
  2. package/dist/components/accordion/accordion-root.svelte +7 -3
  3. package/dist/components/accordion/accordion.stories.svelte +7 -82
  4. package/dist/components/accordion/item/accordion-item-body.svelte +44 -42
  5. package/dist/components/accordion/item/accordion-item-header.svelte +51 -50
  6. package/dist/components/accordion/item/accordion-item-indicator.svelte +51 -50
  7. package/dist/components/accordion/item/accordion-item-root.svelte +66 -65
  8. package/dist/components/accordion/item/bond.svelte.d.ts +2 -0
  9. package/dist/components/accordion/item/index.d.ts +3 -0
  10. package/dist/components/accordion/item/index.js +3 -0
  11. package/dist/components/accordion/item/motion.svelte.d.ts +15 -0
  12. package/dist/components/accordion/item/motion.svelte.js +30 -0
  13. package/dist/components/accordion/item/types.d.ts +7 -24
  14. package/dist/components/alert/alert-close-button.svelte +66 -70
  15. package/dist/components/alert/alert-description.svelte +42 -42
  16. package/dist/components/alert/alert-description.svelte.d.ts +3 -6
  17. package/dist/components/alert/alert-root.svelte +68 -103
  18. package/dist/components/alert/alert-root.svelte.d.ts +2 -2
  19. package/dist/components/alert/alert.stories.svelte +400 -400
  20. package/dist/components/alert/bond.svelte.d.ts +0 -13
  21. package/dist/components/alert/bond.svelte.js +0 -32
  22. package/dist/components/alert/types.d.ts +8 -32
  23. package/dist/components/atom/html-atom.svelte +261 -261
  24. package/dist/components/avatar/avatar.stories.svelte +22 -22
  25. package/dist/components/badge/badge.stories.svelte +12 -12
  26. package/dist/components/badge/badge.svelte +19 -19
  27. package/dist/components/breadcrumb/breadcrumb.stories.svelte +5 -5
  28. package/dist/components/button/button.stories.svelte +27 -27
  29. package/dist/components/calendar/calendar-day.svelte +101 -96
  30. package/dist/components/calendar/calendar.stories.svelte +26 -26
  31. package/dist/components/card/card-body.svelte +39 -39
  32. package/dist/components/card/card-footer.svelte +41 -41
  33. package/dist/components/card/card-root.svelte +91 -91
  34. package/dist/components/card/card.stories.svelte +133 -133
  35. package/dist/components/checkbox/checkbox.stories.svelte +22 -22
  36. package/dist/components/checkbox/checkbox.svelte +6 -2
  37. package/dist/components/collapsible/collapsible.stories.svelte +172 -172
  38. package/dist/components/combobox/atoms.d.ts +1 -1
  39. package/dist/components/combobox/atoms.js +1 -1
  40. package/dist/components/combobox/combobox-root.svelte +65 -65
  41. package/dist/components/combobox/compobox.stories.svelte +51 -51
  42. package/dist/components/combobox/index.d.ts +1 -0
  43. package/dist/components/container/container.stories.svelte +20 -20
  44. package/dist/components/container/container.svelte.d.ts +1 -1
  45. package/dist/components/datagrid/datagrid.stories.svelte +72 -72
  46. package/dist/components/datagrid/tr/bond.svelte.d.ts +4 -2
  47. package/dist/components/datagrid/tr/bond.svelte.js +9 -7
  48. package/dist/components/datagrid/tr/datagrid-tr.svelte +90 -88
  49. package/dist/components/date-picker/date-picker-calendar.svelte +67 -67
  50. package/dist/components/date-picker/date-picker-root.svelte +95 -95
  51. package/dist/components/date-picker/date-picker.stories.svelte +35 -35
  52. package/dist/components/dialog/bond.svelte.d.ts +13 -3
  53. package/dist/components/dialog/bond.svelte.js +66 -5
  54. package/dist/components/dialog/dialog-content.svelte +44 -62
  55. package/dist/components/dialog/dialog-root.svelte +91 -110
  56. package/dist/components/dialog/dialog.stories.svelte +64 -64
  57. package/dist/components/dialog/motion.svelte.d.ts +13 -0
  58. package/dist/components/dialog/motion.svelte.js +44 -0
  59. package/dist/components/drawer/attachments.svelte.d.ts +1 -1
  60. package/dist/components/drawer/attachments.svelte.js +1 -3
  61. package/dist/components/drawer/bond.svelte.d.ts +24 -5
  62. package/dist/components/drawer/bond.svelte.js +77 -11
  63. package/dist/components/drawer/drawer-content.svelte +6 -14
  64. package/dist/components/drawer/drawer.stories.svelte +27 -95
  65. package/dist/components/drawer/index.d.ts +2 -0
  66. package/dist/components/drawer/index.js +2 -0
  67. package/dist/components/drawer/motion.d.ts +15 -0
  68. package/dist/components/drawer/motion.js +28 -0
  69. package/dist/components/dropdown/atoms.d.ts +1 -1
  70. package/dist/components/dropdown/atoms.js +1 -1
  71. package/dist/components/dropdown/bond.svelte.d.ts +5 -1
  72. package/dist/components/dropdown/dropdown-root.svelte +59 -59
  73. package/dist/components/dropdown/dropdown.stories.svelte +80 -80
  74. package/dist/components/dropdown/index.d.ts +1 -0
  75. package/dist/components/form/form.stories.svelte +96 -96
  76. package/dist/components/image/image.stories.svelte +20 -20
  77. package/dist/components/input/input.stories.svelte +35 -35
  78. package/dist/components/label/label.stories.svelte +15 -15
  79. package/dist/components/lazy/lazy.stories.svelte +28 -28
  80. package/dist/components/link/link.stories.svelte +15 -15
  81. package/dist/components/list/list-item.svelte +20 -20
  82. package/dist/components/menu/atoms.d.ts +1 -0
  83. package/dist/components/menu/atoms.js +1 -0
  84. package/dist/components/menu/index.d.ts +2 -1
  85. package/dist/components/menu/index.js +1 -1
  86. package/dist/components/menu/menu-item.svelte +69 -51
  87. package/dist/components/menu/menu-item.svelte.d.ts +1 -0
  88. package/dist/components/menu/menu.stories.svelte +33 -33
  89. package/dist/components/popover/bond.svelte.d.ts +20 -7
  90. package/dist/components/popover/bond.svelte.js +80 -27
  91. package/dist/components/popover/motion.d.ts +6 -0
  92. package/dist/components/popover/motion.js +56 -0
  93. package/dist/components/popover/popover-arrow.svelte +111 -111
  94. package/dist/components/popover/popover-content.svelte +34 -72
  95. package/dist/components/popover/popover-indicator.svelte +44 -44
  96. package/dist/components/popover/popover-root.svelte +48 -48
  97. package/dist/components/popover/popover.stories.svelte +3 -3
  98. package/dist/components/popover/types.d.ts +9 -7
  99. package/dist/components/portal/active-portal.svelte +29 -22
  100. package/dist/components/portal/active-portal.svelte.d.ts +2 -9
  101. package/dist/components/portal/portal-root.svelte +76 -83
  102. package/dist/components/portal/portal-root.svelte.d.ts +4 -6
  103. package/dist/components/portal/teleport.svelte +49 -50
  104. package/dist/components/portal/teleport.svelte.d.ts +3 -4
  105. package/dist/components/qr-code/qr-code.stories.svelte +18 -18
  106. package/dist/components/radio/radio-group.stories.svelte +41 -41
  107. package/dist/components/radio/radio.stories.svelte +17 -17
  108. package/dist/components/radio/radio.svelte +1 -1
  109. package/dist/components/radio/types.d.ts +98 -0
  110. package/dist/components/radio/types.js +2 -0
  111. package/dist/components/root/root.svelte +13 -30
  112. package/dist/components/root/root.svelte.d.ts +1 -1
  113. package/dist/components/scrollable/scrollable-root.svelte.d.ts +2 -2
  114. package/dist/components/scrollable/scrollable.stories.svelte +116 -116
  115. package/dist/components/sidebar/index.d.ts +2 -0
  116. package/dist/components/sidebar/index.js +2 -0
  117. package/dist/components/sidebar/motion.svelte.d.ts +11 -0
  118. package/dist/components/sidebar/motion.svelte.js +16 -0
  119. package/dist/components/sidebar/sidebar-content.svelte +3 -13
  120. package/dist/components/sidebar/sidebar-root.svelte +39 -39
  121. package/dist/components/sidebar/sidebar.stories.svelte +43 -43
  122. package/dist/components/sidebar/types.d.ts +2 -12
  123. package/dist/components/tabs/tabs.stories.svelte +56 -56
  124. package/dist/components/textarea/atoms.d.ts +1 -0
  125. package/dist/components/textarea/atoms.js +1 -0
  126. package/dist/components/textarea/textarea-input.svelte +9 -6
  127. package/dist/components/textarea/textarea-root.svelte +9 -9
  128. package/dist/components/textarea/textarea-root.svelte.d.ts +2 -0
  129. package/dist/components/tooltip/tooltip-trigger.svelte +2 -2
  130. package/dist/components/tooltip/tooltip-trigger.svelte.d.ts +1 -0
  131. package/dist/components/tooltip/tooltip.stories.svelte +32 -32
  132. package/dist/components/tree/tree.stories.svelte +142 -142
  133. package/dist/icons/icon-copy.svelte +6 -0
  134. package/dist/{components/radio/types.svelte.d.ts → icons/icon-copy.svelte.d.ts} +3 -3
  135. package/dist/utils/markdown-to-llm.d.ts +28 -0
  136. package/dist/utils/markdown-to-llm.js +76 -0
  137. package/package.json +1 -2
  138. package/dist/components/radio/types.svelte +0 -0
  139. package/llm/composition.md +0 -395
  140. package/llm/crafting.md +0 -838
  141. package/llm/motion.md +0 -970
  142. package/llm/philosophy.md +0 -23
  143. package/llm/preset-variant-integration.md +0 -516
  144. package/llm/preset.md +0 -383
  145. package/llm/styling.md +0 -216
  146. package/llm/usage.md +0 -46
  147. package/llm/variants.md +0 -1259
@@ -1,8 +1,5 @@
1
1
  import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
2
2
  export type AlertBondProps = BondStateProps & {
3
- variant?: 'info' | 'success' | 'warning' | 'error';
4
- dismissible?: boolean;
5
- dismissed?: boolean;
6
3
  disabled?: boolean;
7
4
  extend?: Record<string, unknown>;
8
5
  };
@@ -25,9 +22,6 @@ export declare class AlertBond<State extends AlertBondState<AlertBondProps> = Al
25
22
  'aria-labelledby': string;
26
23
  'aria-describedby': string;
27
24
  'aria-disabled': boolean;
28
- 'data-variant': "success" | "error" | "info" | "warning";
29
- 'data-dismissed': boolean;
30
- 'data-dismissible': boolean;
31
25
  };
32
26
  icon(props?: Record<string, unknown>): {
33
27
  id: string;
@@ -49,17 +43,10 @@ export declare class AlertBond<State extends AlertBondState<AlertBondProps> = Al
49
43
  id: string;
50
44
  type: string;
51
45
  'aria-label': string;
52
- 'aria-expanded': boolean;
53
- onclick: () => void;
54
46
  };
55
47
  static get(): AlertBond | undefined;
56
48
  static set(bond: AlertBond): AlertBond;
57
49
  }
58
50
  export declare class AlertBondState<Props extends AlertBondProps> extends BondState<Props> {
59
51
  constructor(props: () => Props);
60
- dismiss(): void;
61
- restore(): void;
62
- get isDismissed(): boolean;
63
- get isDismissible(): boolean;
64
- get variant(): "success" | "error" | "info" | "warning";
65
52
  }
@@ -10,8 +10,6 @@ export class AlertBond extends Bond {
10
10
  return AlertBond.set(this);
11
11
  }
12
12
  root(props = {}) {
13
- const variant = this.state.props.variant ?? 'info';
14
- const dismissed = this.state.props.dismissed ?? false;
15
13
  const disabled = this.state.props.disabled ?? false;
16
14
  return {
17
15
  id: `alert-root-${this.id}`,
@@ -19,9 +17,6 @@ export class AlertBond extends Bond {
19
17
  'aria-labelledby': `alert-title-${this.id}`,
20
18
  'aria-describedby': `alert-description-${this.id}`,
21
19
  'aria-disabled': disabled,
22
- 'data-variant': variant,
23
- 'data-dismissed': dismissed,
24
- 'data-dismissible': this.state.props.dismissible ?? false,
25
20
  ...props,
26
21
  [createAttachmentKey()]: (node) => {
27
22
  this.elements.root = node;
@@ -75,13 +70,10 @@ export class AlertBond extends Bond {
75
70
  };
76
71
  }
77
72
  closeButton(props = {}) {
78
- const dismissed = this.state.props.dismissed ?? false;
79
73
  return {
80
74
  id: `alert-close-button-${this.id}`,
81
75
  type: 'button',
82
76
  'aria-label': 'Dismiss alert',
83
- 'aria-expanded': !dismissed,
84
- onclick: () => this.state.dismiss(),
85
77
  ...props,
86
78
  [createAttachmentKey()]: (node) => {
87
79
  this.elements.closeButton = node;
@@ -99,28 +91,4 @@ export class AlertBondState extends BondState {
99
91
  constructor(props) {
100
92
  super(props);
101
93
  }
102
- dismiss() {
103
- if (this.props.dismissible && !this.props.disabled) {
104
- // Update the dismissed state through props if mutable
105
- const props = this.props;
106
- if ('dismissed' in props) {
107
- props.dismissed = true;
108
- }
109
- }
110
- }
111
- restore() {
112
- const props = this.props;
113
- if ('dismissed' in props) {
114
- props.dismissed = false;
115
- }
116
- }
117
- get isDismissed() {
118
- return this.props.dismissed ?? false;
119
- }
120
- get isDismissible() {
121
- return this.props.dismissible ?? false;
122
- }
123
- get variant() {
124
- return this.props.variant ?? 'info';
125
- }
126
94
  }
@@ -1,6 +1,6 @@
1
1
  import type { Snippet } from 'svelte';
2
2
  import type { HtmlAtomProps, Base } from '../atom';
3
- import type { Factory, Override } from '../../types';
3
+ import type { Factory } from '../../types';
4
4
  import type { AlertBond } from './bond.svelte';
5
5
  /**
6
6
  * Extend this interface to add custom alert root properties in your application.
@@ -37,7 +37,7 @@ export interface AlertActionsExtendProps {
37
37
  */
38
38
  export interface AlertCloseButtonExtendProps {
39
39
  }
40
- export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, AlertRootExtendProps {
40
+ export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertRootExtendProps {
41
41
  dismissible?: boolean;
42
42
  dismissed?: boolean;
43
43
  disabled?: boolean;
@@ -47,39 +47,15 @@ export interface AlertRootProps<E extends keyof HTMLElementTagNameMap = 'div', B
47
47
  alert: AlertBond;
48
48
  }]>;
49
49
  }
50
- export interface AlertContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
51
- children?: Snippet<[{
52
- alert: AlertBond;
53
- }]>;
54
- }>, AlertContentExtendProps {
50
+ export interface AlertContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertContentExtendProps {
55
51
  }
56
- export interface AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
57
- children?: Snippet<[{
58
- alert: AlertBond;
59
- }]>;
60
- }>, AlertTitleExtendProps {
52
+ export interface AlertTitleProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertTitleExtendProps {
61
53
  }
62
- export interface AlertDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
63
- children?: Snippet<[{
64
- alert: AlertBond;
65
- }]>;
66
- }>, AlertDescriptionExtendProps {
54
+ export interface AlertDescriptionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertDescriptionExtendProps {
67
55
  }
68
- export interface AlertIconProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
69
- children?: Snippet<[{
70
- alert: AlertBond;
71
- }]>;
72
- }>, AlertIconExtendProps {
56
+ export interface AlertIconProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertIconExtendProps {
73
57
  }
74
- export interface AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
75
- children?: Snippet<[{
76
- alert: AlertBond;
77
- }]>;
78
- }>, AlertActionsExtendProps {
58
+ export interface AlertActionsProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertActionsExtendProps {
79
59
  }
80
- export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
81
- children?: Snippet<[{
82
- alert: AlertBond;
83
- }]>;
84
- }>, AlertCloseButtonExtendProps {
60
+ export interface AlertCloseButtonProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, AlertCloseButtonExtendProps {
85
61
  }