@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.
- package/README.md +853 -852
- package/dist/components/accordion/accordion-root.svelte +7 -3
- package/dist/components/accordion/accordion.stories.svelte +7 -82
- package/dist/components/accordion/item/accordion-item-body.svelte +44 -42
- package/dist/components/accordion/item/accordion-item-header.svelte +51 -50
- package/dist/components/accordion/item/accordion-item-indicator.svelte +51 -50
- package/dist/components/accordion/item/accordion-item-root.svelte +66 -65
- package/dist/components/accordion/item/bond.svelte.d.ts +2 -0
- package/dist/components/accordion/item/index.d.ts +3 -0
- package/dist/components/accordion/item/index.js +3 -0
- package/dist/components/accordion/item/motion.svelte.d.ts +15 -0
- package/dist/components/accordion/item/motion.svelte.js +30 -0
- package/dist/components/accordion/item/types.d.ts +7 -24
- package/dist/components/alert/alert-close-button.svelte +66 -70
- package/dist/components/alert/alert-description.svelte +42 -42
- package/dist/components/alert/alert-description.svelte.d.ts +3 -6
- package/dist/components/alert/alert-root.svelte +68 -103
- package/dist/components/alert/alert-root.svelte.d.ts +2 -2
- package/dist/components/alert/alert.stories.svelte +400 -400
- package/dist/components/alert/bond.svelte.d.ts +0 -13
- package/dist/components/alert/bond.svelte.js +0 -32
- package/dist/components/alert/types.d.ts +8 -32
- package/dist/components/atom/html-atom.svelte +261 -261
- package/dist/components/avatar/avatar.stories.svelte +22 -22
- package/dist/components/badge/badge.stories.svelte +12 -12
- package/dist/components/badge/badge.svelte +19 -19
- package/dist/components/breadcrumb/breadcrumb.stories.svelte +5 -5
- package/dist/components/button/button.stories.svelte +27 -27
- package/dist/components/calendar/calendar-day.svelte +101 -96
- package/dist/components/calendar/calendar.stories.svelte +26 -26
- package/dist/components/card/card-body.svelte +39 -39
- package/dist/components/card/card-footer.svelte +41 -41
- package/dist/components/card/card-root.svelte +91 -91
- package/dist/components/card/card.stories.svelte +133 -133
- package/dist/components/checkbox/checkbox.stories.svelte +22 -22
- package/dist/components/checkbox/checkbox.svelte +6 -2
- package/dist/components/collapsible/collapsible.stories.svelte +172 -172
- package/dist/components/combobox/atoms.d.ts +1 -1
- package/dist/components/combobox/atoms.js +1 -1
- package/dist/components/combobox/combobox-root.svelte +65 -65
- package/dist/components/combobox/compobox.stories.svelte +51 -51
- package/dist/components/combobox/index.d.ts +1 -0
- package/dist/components/container/container.stories.svelte +20 -20
- package/dist/components/container/container.svelte.d.ts +1 -1
- package/dist/components/datagrid/datagrid.stories.svelte +72 -72
- package/dist/components/datagrid/tr/bond.svelte.d.ts +4 -2
- package/dist/components/datagrid/tr/bond.svelte.js +9 -7
- package/dist/components/datagrid/tr/datagrid-tr.svelte +90 -88
- package/dist/components/date-picker/date-picker-calendar.svelte +67 -67
- package/dist/components/date-picker/date-picker-root.svelte +95 -95
- package/dist/components/date-picker/date-picker.stories.svelte +35 -35
- package/dist/components/dialog/bond.svelte.d.ts +13 -3
- package/dist/components/dialog/bond.svelte.js +66 -5
- package/dist/components/dialog/dialog-content.svelte +44 -62
- package/dist/components/dialog/dialog-root.svelte +91 -110
- package/dist/components/dialog/dialog.stories.svelte +64 -64
- package/dist/components/dialog/motion.svelte.d.ts +13 -0
- package/dist/components/dialog/motion.svelte.js +44 -0
- package/dist/components/drawer/attachments.svelte.d.ts +1 -1
- package/dist/components/drawer/attachments.svelte.js +1 -3
- package/dist/components/drawer/bond.svelte.d.ts +24 -5
- package/dist/components/drawer/bond.svelte.js +77 -11
- package/dist/components/drawer/drawer-content.svelte +6 -14
- package/dist/components/drawer/drawer.stories.svelte +27 -95
- package/dist/components/drawer/index.d.ts +2 -0
- package/dist/components/drawer/index.js +2 -0
- package/dist/components/drawer/motion.d.ts +15 -0
- package/dist/components/drawer/motion.js +28 -0
- package/dist/components/dropdown/atoms.d.ts +1 -1
- package/dist/components/dropdown/atoms.js +1 -1
- package/dist/components/dropdown/bond.svelte.d.ts +5 -1
- package/dist/components/dropdown/dropdown-root.svelte +59 -59
- package/dist/components/dropdown/dropdown.stories.svelte +80 -80
- package/dist/components/dropdown/index.d.ts +1 -0
- package/dist/components/form/form.stories.svelte +96 -96
- package/dist/components/image/image.stories.svelte +20 -20
- package/dist/components/input/input.stories.svelte +35 -35
- package/dist/components/label/label.stories.svelte +15 -15
- package/dist/components/lazy/lazy.stories.svelte +28 -28
- package/dist/components/link/link.stories.svelte +15 -15
- package/dist/components/list/list-item.svelte +20 -20
- package/dist/components/menu/atoms.d.ts +1 -0
- package/dist/components/menu/atoms.js +1 -0
- package/dist/components/menu/index.d.ts +2 -1
- package/dist/components/menu/index.js +1 -1
- package/dist/components/menu/menu-item.svelte +69 -51
- package/dist/components/menu/menu-item.svelte.d.ts +1 -0
- package/dist/components/menu/menu.stories.svelte +33 -33
- package/dist/components/popover/bond.svelte.d.ts +20 -7
- package/dist/components/popover/bond.svelte.js +80 -27
- package/dist/components/popover/motion.d.ts +6 -0
- package/dist/components/popover/motion.js +56 -0
- package/dist/components/popover/popover-arrow.svelte +111 -111
- package/dist/components/popover/popover-content.svelte +34 -72
- package/dist/components/popover/popover-indicator.svelte +44 -44
- package/dist/components/popover/popover-root.svelte +48 -48
- package/dist/components/popover/popover.stories.svelte +3 -3
- package/dist/components/popover/types.d.ts +9 -7
- package/dist/components/portal/active-portal.svelte +29 -22
- package/dist/components/portal/active-portal.svelte.d.ts +2 -9
- package/dist/components/portal/portal-root.svelte +76 -83
- package/dist/components/portal/portal-root.svelte.d.ts +4 -6
- package/dist/components/portal/teleport.svelte +49 -50
- package/dist/components/portal/teleport.svelte.d.ts +3 -4
- package/dist/components/qr-code/qr-code.stories.svelte +18 -18
- package/dist/components/radio/radio-group.stories.svelte +41 -41
- package/dist/components/radio/radio.stories.svelte +17 -17
- package/dist/components/radio/radio.svelte +1 -1
- package/dist/components/radio/types.d.ts +98 -0
- package/dist/components/radio/types.js +2 -0
- package/dist/components/root/root.svelte +13 -30
- package/dist/components/root/root.svelte.d.ts +1 -1
- package/dist/components/scrollable/scrollable-root.svelte.d.ts +2 -2
- package/dist/components/scrollable/scrollable.stories.svelte +116 -116
- package/dist/components/sidebar/index.d.ts +2 -0
- package/dist/components/sidebar/index.js +2 -0
- package/dist/components/sidebar/motion.svelte.d.ts +11 -0
- package/dist/components/sidebar/motion.svelte.js +16 -0
- package/dist/components/sidebar/sidebar-content.svelte +3 -13
- package/dist/components/sidebar/sidebar-root.svelte +39 -39
- package/dist/components/sidebar/sidebar.stories.svelte +43 -43
- package/dist/components/sidebar/types.d.ts +2 -12
- package/dist/components/tabs/tabs.stories.svelte +56 -56
- package/dist/components/textarea/atoms.d.ts +1 -0
- package/dist/components/textarea/atoms.js +1 -0
- package/dist/components/textarea/textarea-input.svelte +9 -6
- package/dist/components/textarea/textarea-root.svelte +9 -9
- package/dist/components/textarea/textarea-root.svelte.d.ts +2 -0
- package/dist/components/tooltip/tooltip-trigger.svelte +2 -2
- package/dist/components/tooltip/tooltip-trigger.svelte.d.ts +1 -0
- package/dist/components/tooltip/tooltip.stories.svelte +32 -32
- package/dist/components/tree/tree.stories.svelte +142 -142
- package/dist/icons/icon-copy.svelte +6 -0
- package/dist/{components/radio/types.svelte.d.ts → icons/icon-copy.svelte.d.ts} +3 -3
- package/dist/utils/markdown-to-llm.d.ts +28 -0
- package/dist/utils/markdown-to-llm.js +76 -0
- package/package.json +1 -2
- package/dist/components/radio/types.svelte +0 -0
- package/llm/composition.md +0 -395
- package/llm/crafting.md +0 -838
- package/llm/motion.md +0 -970
- package/llm/philosophy.md +0 -23
- package/llm/preset-variant-integration.md +0 -516
- package/llm/preset.md +0 -383
- package/llm/styling.md +0 -216
- package/llm/usage.md +0 -46
- 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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
}
|