@smuikit/core 0.1.0
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/dist/chunk-3SIG5GVW.mjs +94 -0
- package/dist/chunk-CG7MB4D7.mjs +139 -0
- package/dist/chunk-DEYVI3GG.js +37 -0
- package/dist/chunk-ECS4ZLAD.mjs +94 -0
- package/dist/chunk-EQR2S6TY.js +97 -0
- package/dist/chunk-IRJ3PEU4.mjs +35 -0
- package/dist/chunk-JTKA5LGK.mjs +35 -0
- package/dist/chunk-KQF35W7O.mjs +32 -0
- package/dist/chunk-KWFE67IV.js +56 -0
- package/dist/chunk-O7JRMYZ5.js +97 -0
- package/dist/chunk-OLRCZXKS.js +34 -0
- package/dist/chunk-Y34GDQYY.js +142 -0
- package/dist/chunk-YFNMWGC7.mjs +54 -0
- package/dist/chunk-YTHNCP77.js +44 -0
- package/dist/create-machine-DsOUIlfe.d.mts +30 -0
- package/dist/create-machine-DsOUIlfe.d.ts +30 -0
- package/dist/index.d.mts +26 -0
- package/dist/index.d.ts +26 -0
- package/dist/index.js +119 -0
- package/dist/index.mjs +46 -0
- package/dist/machines/button/index.d.mts +44 -0
- package/dist/machines/button/index.d.ts +44 -0
- package/dist/machines/button/index.js +16 -0
- package/dist/machines/button/index.mjs +3 -0
- package/dist/machines/card/index.d.mts +17 -0
- package/dist/machines/card/index.d.ts +17 -0
- package/dist/machines/card/index.js +10 -0
- package/dist/machines/card/index.mjs +1 -0
- package/dist/machines/input/index.d.mts +48 -0
- package/dist/machines/input/index.d.ts +48 -0
- package/dist/machines/input/index.js +16 -0
- package/dist/machines/input/index.mjs +3 -0
- package/dist/machines/modal/index.d.mts +44 -0
- package/dist/machines/modal/index.d.ts +44 -0
- package/dist/machines/modal/index.js +15 -0
- package/dist/machines/modal/index.mjs +2 -0
- package/dist/machines/typography/index.d.mts +15 -0
- package/dist/machines/typography/index.d.ts +15 -0
- package/dist/machines/typography/index.js +10 -0
- package/dist/machines/typography/index.mjs +1 -0
- package/dist/types-DxOTxdrs.d.mts +9 -0
- package/dist/types-DxOTxdrs.d.ts +9 -0
- package/package.json +87 -0
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { getAriaDisabled } from './chunk-IRJ3PEU4.mjs';
|
|
2
|
+
import { createMachine } from './chunk-YFNMWGC7.mjs';
|
|
3
|
+
|
|
4
|
+
// src/machines/button/button.machine.ts
|
|
5
|
+
function createButtonMachine(initialContext) {
|
|
6
|
+
return createMachine({
|
|
7
|
+
id: "button",
|
|
8
|
+
initial: "idle",
|
|
9
|
+
context: {
|
|
10
|
+
disabled: false,
|
|
11
|
+
loading: false,
|
|
12
|
+
variant: "primary",
|
|
13
|
+
size: "md",
|
|
14
|
+
...initialContext
|
|
15
|
+
},
|
|
16
|
+
states: {
|
|
17
|
+
idle: {
|
|
18
|
+
on: {
|
|
19
|
+
PRESS: "pressed",
|
|
20
|
+
FOCUS: "focused",
|
|
21
|
+
SET_LOADING: {
|
|
22
|
+
target: "idle",
|
|
23
|
+
actions: (_ctx, event) => ({ loading: event.loading })
|
|
24
|
+
},
|
|
25
|
+
SET_DISABLED: {
|
|
26
|
+
target: "idle",
|
|
27
|
+
actions: (_ctx, event) => ({ disabled: event.disabled })
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
pressed: {
|
|
32
|
+
on: {
|
|
33
|
+
RELEASE: "idle",
|
|
34
|
+
BLUR: "idle"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
focused: {
|
|
38
|
+
on: {
|
|
39
|
+
PRESS: "pressed",
|
|
40
|
+
BLUR: "idle"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// src/machines/button/button.connect.ts
|
|
48
|
+
function connectButton(options) {
|
|
49
|
+
const { state, context, send, onClick } = options;
|
|
50
|
+
const { disabled, loading, variant, size } = context;
|
|
51
|
+
const isDisabled = disabled || loading;
|
|
52
|
+
return {
|
|
53
|
+
state,
|
|
54
|
+
isDisabled,
|
|
55
|
+
isLoading: loading,
|
|
56
|
+
rootProps: {
|
|
57
|
+
role: "button",
|
|
58
|
+
type: "button",
|
|
59
|
+
disabled: isDisabled,
|
|
60
|
+
"data-state": state,
|
|
61
|
+
"data-variant": variant,
|
|
62
|
+
"data-size": size,
|
|
63
|
+
...getAriaDisabled(isDisabled),
|
|
64
|
+
...loading ? { "aria-busy": true } : {},
|
|
65
|
+
onClick: (event) => {
|
|
66
|
+
if (isDisabled) return;
|
|
67
|
+
onClick?.(event);
|
|
68
|
+
},
|
|
69
|
+
onPointerDown: () => {
|
|
70
|
+
if (isDisabled) return;
|
|
71
|
+
send({ type: "PRESS" });
|
|
72
|
+
},
|
|
73
|
+
onPointerUp: () => {
|
|
74
|
+
if (isDisabled) return;
|
|
75
|
+
send({ type: "RELEASE" });
|
|
76
|
+
},
|
|
77
|
+
onFocus: () => {
|
|
78
|
+
if (isDisabled) return;
|
|
79
|
+
send({ type: "FOCUS" });
|
|
80
|
+
},
|
|
81
|
+
onBlur: () => {
|
|
82
|
+
send({ type: "BLUR" });
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
loadingProps: {
|
|
86
|
+
"aria-hidden": true,
|
|
87
|
+
style: {
|
|
88
|
+
display: loading ? "inline-flex" : "none"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
export { connectButton, createButtonMachine };
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { getAriaRequired, getAriaInvalid, getAriaDisabled } from './chunk-IRJ3PEU4.mjs';
|
|
2
|
+
import { createMachine } from './chunk-YFNMWGC7.mjs';
|
|
3
|
+
|
|
4
|
+
// src/machines/input/input.machine.ts
|
|
5
|
+
function createInputMachine(initialContext) {
|
|
6
|
+
const id = initialContext?.id || `input-${Date.now()}`;
|
|
7
|
+
return createMachine({
|
|
8
|
+
id: "input",
|
|
9
|
+
initial: "idle",
|
|
10
|
+
context: {
|
|
11
|
+
value: "",
|
|
12
|
+
disabled: false,
|
|
13
|
+
readOnly: false,
|
|
14
|
+
required: false,
|
|
15
|
+
error: null,
|
|
16
|
+
placeholder: "",
|
|
17
|
+
label: "",
|
|
18
|
+
id,
|
|
19
|
+
...initialContext
|
|
20
|
+
},
|
|
21
|
+
states: {
|
|
22
|
+
idle: {
|
|
23
|
+
on: {
|
|
24
|
+
FOCUS: "focused",
|
|
25
|
+
CHANGE: {
|
|
26
|
+
target: "filled",
|
|
27
|
+
actions: (_ctx, event) => ({ value: event.value })
|
|
28
|
+
},
|
|
29
|
+
SET_ERROR: {
|
|
30
|
+
target: "error",
|
|
31
|
+
actions: (_ctx, event) => ({ error: event.error })
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
focused: {
|
|
36
|
+
on: {
|
|
37
|
+
BLUR: "idle",
|
|
38
|
+
CHANGE: {
|
|
39
|
+
target: "focused",
|
|
40
|
+
actions: (_ctx, event) => ({ value: event.value })
|
|
41
|
+
},
|
|
42
|
+
SET_ERROR: {
|
|
43
|
+
target: "error",
|
|
44
|
+
actions: (_ctx, event) => ({ error: event.error })
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
filled: {
|
|
49
|
+
on: {
|
|
50
|
+
FOCUS: "focused",
|
|
51
|
+
CHANGE: {
|
|
52
|
+
target: "filled",
|
|
53
|
+
actions: (_ctx, event) => ({ value: event.value })
|
|
54
|
+
},
|
|
55
|
+
CLEAR: {
|
|
56
|
+
target: "idle",
|
|
57
|
+
actions: () => ({ value: "" })
|
|
58
|
+
},
|
|
59
|
+
SET_ERROR: {
|
|
60
|
+
target: "error",
|
|
61
|
+
actions: (_ctx, event) => ({ error: event.error })
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
error: {
|
|
66
|
+
on: {
|
|
67
|
+
FOCUS: "focused",
|
|
68
|
+
CHANGE: {
|
|
69
|
+
target: "error",
|
|
70
|
+
actions: (_ctx, event) => ({ value: event.value })
|
|
71
|
+
},
|
|
72
|
+
SET_ERROR: {
|
|
73
|
+
target: "error",
|
|
74
|
+
actions: (_ctx, event) => {
|
|
75
|
+
const err = event.error;
|
|
76
|
+
return err === null ? {} : { error: err };
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// src/machines/input/input.connect.ts
|
|
86
|
+
function connectInput(options) {
|
|
87
|
+
const { state, context, send, onChange } = options;
|
|
88
|
+
const { value, disabled, readOnly, required, error, placeholder, id } = context;
|
|
89
|
+
const hasError = state === "error" || error !== null;
|
|
90
|
+
const errorId = `${id}-error`;
|
|
91
|
+
const labelId = `${id}-label`;
|
|
92
|
+
return {
|
|
93
|
+
state,
|
|
94
|
+
value,
|
|
95
|
+
hasError,
|
|
96
|
+
rootProps: {
|
|
97
|
+
"data-state": state,
|
|
98
|
+
"data-disabled": disabled ? "" : void 0
|
|
99
|
+
},
|
|
100
|
+
labelProps: {
|
|
101
|
+
id: labelId,
|
|
102
|
+
htmlFor: id
|
|
103
|
+
},
|
|
104
|
+
inputProps: {
|
|
105
|
+
id,
|
|
106
|
+
value,
|
|
107
|
+
disabled,
|
|
108
|
+
readOnly,
|
|
109
|
+
placeholder,
|
|
110
|
+
"aria-labelledby": labelId,
|
|
111
|
+
...getAriaDisabled(disabled),
|
|
112
|
+
...getAriaInvalid(hasError),
|
|
113
|
+
...getAriaRequired(required),
|
|
114
|
+
...hasError ? { "aria-describedby": errorId } : {},
|
|
115
|
+
"data-state": state,
|
|
116
|
+
onFocus: () => {
|
|
117
|
+
if (disabled) return;
|
|
118
|
+
send({ type: "FOCUS" });
|
|
119
|
+
},
|
|
120
|
+
onBlur: () => {
|
|
121
|
+
send({ type: "BLUR" });
|
|
122
|
+
},
|
|
123
|
+
onChange: (event) => {
|
|
124
|
+
if (disabled || readOnly) return;
|
|
125
|
+
const val = event && typeof event === "object" && "target" in event ? event.target.value : String(event);
|
|
126
|
+
send({ type: "CHANGE", value: val });
|
|
127
|
+
onChange?.(val);
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
errorProps: {
|
|
131
|
+
id: errorId,
|
|
132
|
+
role: "alert",
|
|
133
|
+
"aria-live": "polite",
|
|
134
|
+
style: { display: hasError ? "block" : "none" }
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
export { connectInput, createInputMachine };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/machines/typography/typography.connect.ts
|
|
4
|
+
var variantElementMap = {
|
|
5
|
+
h1: "h1",
|
|
6
|
+
h2: "h2",
|
|
7
|
+
h3: "h3",
|
|
8
|
+
h4: "h4",
|
|
9
|
+
h5: "h5",
|
|
10
|
+
h6: "h6",
|
|
11
|
+
body: "p",
|
|
12
|
+
body1: "p",
|
|
13
|
+
body2: "p",
|
|
14
|
+
caption: "span",
|
|
15
|
+
overline: "span"
|
|
16
|
+
};
|
|
17
|
+
function connectTypography(options) {
|
|
18
|
+
const { variant, align, truncate, color } = options;
|
|
19
|
+
const element = variantElementMap[variant];
|
|
20
|
+
const style = {};
|
|
21
|
+
if (align) style.textAlign = align;
|
|
22
|
+
if (color) style.color = color;
|
|
23
|
+
if (truncate) {
|
|
24
|
+
style.overflow = "hidden";
|
|
25
|
+
style.textOverflow = "ellipsis";
|
|
26
|
+
style.whiteSpace = "nowrap";
|
|
27
|
+
}
|
|
28
|
+
return {
|
|
29
|
+
element,
|
|
30
|
+
rootProps: {
|
|
31
|
+
"data-variant": variant,
|
|
32
|
+
...Object.keys(style).length > 0 ? { style } : {}
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
exports.connectTypography = connectTypography;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { createMachine } from './chunk-YFNMWGC7.mjs';
|
|
2
|
+
|
|
3
|
+
// src/machines/modal/modal.machine.ts
|
|
4
|
+
function createModalMachine(initialContext) {
|
|
5
|
+
const id = `modal-${Date.now()}`;
|
|
6
|
+
return createMachine({
|
|
7
|
+
id: "modal",
|
|
8
|
+
initial: "closed",
|
|
9
|
+
context: {
|
|
10
|
+
triggerId: `${id}-trigger`,
|
|
11
|
+
contentId: `${id}-content`,
|
|
12
|
+
titleId: `${id}-title`,
|
|
13
|
+
closeOnOverlayClick: true,
|
|
14
|
+
closeOnEscape: true,
|
|
15
|
+
trapFocus: true,
|
|
16
|
+
...initialContext
|
|
17
|
+
},
|
|
18
|
+
states: {
|
|
19
|
+
closed: {
|
|
20
|
+
on: {
|
|
21
|
+
OPEN: "open",
|
|
22
|
+
TOGGLE: "open"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
open: {
|
|
26
|
+
on: {
|
|
27
|
+
CLOSE: "closed",
|
|
28
|
+
TOGGLE: "closed",
|
|
29
|
+
ESCAPE: "closed",
|
|
30
|
+
OVERLAY_CLICK: "closed"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// src/machines/modal/modal.connect.ts
|
|
38
|
+
function connectModal(options) {
|
|
39
|
+
const { state, context, send, onOpenChange } = options;
|
|
40
|
+
const { triggerId, contentId, titleId, closeOnOverlayClick, closeOnEscape } = context;
|
|
41
|
+
const isOpen = state === "open";
|
|
42
|
+
function handleOpen() {
|
|
43
|
+
send({ type: "OPEN" });
|
|
44
|
+
onOpenChange?.(true);
|
|
45
|
+
}
|
|
46
|
+
function handleClose() {
|
|
47
|
+
send({ type: "CLOSE" });
|
|
48
|
+
onOpenChange?.(false);
|
|
49
|
+
}
|
|
50
|
+
return {
|
|
51
|
+
state,
|
|
52
|
+
isOpen,
|
|
53
|
+
triggerProps: {
|
|
54
|
+
id: triggerId,
|
|
55
|
+
"aria-haspopup": "dialog",
|
|
56
|
+
"aria-expanded": isOpen,
|
|
57
|
+
"aria-controls": isOpen ? contentId : void 0,
|
|
58
|
+
onClick: handleOpen
|
|
59
|
+
},
|
|
60
|
+
contentProps: {
|
|
61
|
+
id: contentId,
|
|
62
|
+
role: "dialog",
|
|
63
|
+
"aria-modal": true,
|
|
64
|
+
"aria-labelledby": titleId,
|
|
65
|
+
"data-state": state,
|
|
66
|
+
tabIndex: -1,
|
|
67
|
+
onKeyDown: (event) => {
|
|
68
|
+
if (!closeOnEscape) return;
|
|
69
|
+
const e = event;
|
|
70
|
+
if (e.key === "Escape") {
|
|
71
|
+
handleClose();
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
overlayProps: {
|
|
76
|
+
"data-state": state,
|
|
77
|
+
"aria-hidden": true,
|
|
78
|
+
onClick: () => {
|
|
79
|
+
if (closeOnOverlayClick) {
|
|
80
|
+
handleClose();
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
closeProps: {
|
|
85
|
+
"aria-label": "Close",
|
|
86
|
+
onClick: handleClose
|
|
87
|
+
},
|
|
88
|
+
titleProps: {
|
|
89
|
+
id: titleId
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
export { connectModal, createModalMachine };
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkYTHNCP77_js = require('./chunk-YTHNCP77.js');
|
|
4
|
+
var chunkKWFE67IV_js = require('./chunk-KWFE67IV.js');
|
|
5
|
+
|
|
6
|
+
// src/machines/button/button.machine.ts
|
|
7
|
+
function createButtonMachine(initialContext) {
|
|
8
|
+
return chunkKWFE67IV_js.createMachine({
|
|
9
|
+
id: "button",
|
|
10
|
+
initial: "idle",
|
|
11
|
+
context: {
|
|
12
|
+
disabled: false,
|
|
13
|
+
loading: false,
|
|
14
|
+
variant: "primary",
|
|
15
|
+
size: "md",
|
|
16
|
+
...initialContext
|
|
17
|
+
},
|
|
18
|
+
states: {
|
|
19
|
+
idle: {
|
|
20
|
+
on: {
|
|
21
|
+
PRESS: "pressed",
|
|
22
|
+
FOCUS: "focused",
|
|
23
|
+
SET_LOADING: {
|
|
24
|
+
target: "idle",
|
|
25
|
+
actions: (_ctx, event) => ({ loading: event.loading })
|
|
26
|
+
},
|
|
27
|
+
SET_DISABLED: {
|
|
28
|
+
target: "idle",
|
|
29
|
+
actions: (_ctx, event) => ({ disabled: event.disabled })
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
pressed: {
|
|
34
|
+
on: {
|
|
35
|
+
RELEASE: "idle",
|
|
36
|
+
BLUR: "idle"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
focused: {
|
|
40
|
+
on: {
|
|
41
|
+
PRESS: "pressed",
|
|
42
|
+
BLUR: "idle"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// src/machines/button/button.connect.ts
|
|
50
|
+
function connectButton(options) {
|
|
51
|
+
const { state, context, send, onClick } = options;
|
|
52
|
+
const { disabled, loading, variant, size } = context;
|
|
53
|
+
const isDisabled = disabled || loading;
|
|
54
|
+
return {
|
|
55
|
+
state,
|
|
56
|
+
isDisabled,
|
|
57
|
+
isLoading: loading,
|
|
58
|
+
rootProps: {
|
|
59
|
+
role: "button",
|
|
60
|
+
type: "button",
|
|
61
|
+
disabled: isDisabled,
|
|
62
|
+
"data-state": state,
|
|
63
|
+
"data-variant": variant,
|
|
64
|
+
"data-size": size,
|
|
65
|
+
...chunkYTHNCP77_js.getAriaDisabled(isDisabled),
|
|
66
|
+
...loading ? { "aria-busy": true } : {},
|
|
67
|
+
onClick: (event) => {
|
|
68
|
+
if (isDisabled) return;
|
|
69
|
+
onClick?.(event);
|
|
70
|
+
},
|
|
71
|
+
onPointerDown: () => {
|
|
72
|
+
if (isDisabled) return;
|
|
73
|
+
send({ type: "PRESS" });
|
|
74
|
+
},
|
|
75
|
+
onPointerUp: () => {
|
|
76
|
+
if (isDisabled) return;
|
|
77
|
+
send({ type: "RELEASE" });
|
|
78
|
+
},
|
|
79
|
+
onFocus: () => {
|
|
80
|
+
if (isDisabled) return;
|
|
81
|
+
send({ type: "FOCUS" });
|
|
82
|
+
},
|
|
83
|
+
onBlur: () => {
|
|
84
|
+
send({ type: "BLUR" });
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
loadingProps: {
|
|
88
|
+
"aria-hidden": true,
|
|
89
|
+
style: {
|
|
90
|
+
display: loading ? "inline-flex" : "none"
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
exports.connectButton = connectButton;
|
|
97
|
+
exports.createButtonMachine = createButtonMachine;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// src/utils/accessibility.ts
|
|
2
|
+
function getAriaDisabled(disabled) {
|
|
3
|
+
if (!disabled) return {};
|
|
4
|
+
return {
|
|
5
|
+
"aria-disabled": true,
|
|
6
|
+
"data-disabled": ""
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
function getAriaPressed(pressed) {
|
|
10
|
+
return { "aria-pressed": pressed };
|
|
11
|
+
}
|
|
12
|
+
function getAriaExpanded(expanded) {
|
|
13
|
+
return { "aria-expanded": expanded };
|
|
14
|
+
}
|
|
15
|
+
function getAriaInvalid(invalid) {
|
|
16
|
+
return { "aria-invalid": invalid };
|
|
17
|
+
}
|
|
18
|
+
function getAriaRequired(required) {
|
|
19
|
+
return { "aria-required": required };
|
|
20
|
+
}
|
|
21
|
+
function getAriaModal() {
|
|
22
|
+
return {
|
|
23
|
+
"aria-modal": true,
|
|
24
|
+
role: "dialog"
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
var idCounter = 0;
|
|
28
|
+
function generateId(prefix) {
|
|
29
|
+
return `${prefix}-${++idCounter}`;
|
|
30
|
+
}
|
|
31
|
+
function resetIdCounter() {
|
|
32
|
+
idCounter = 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export { generateId, getAriaDisabled, getAriaExpanded, getAriaInvalid, getAriaModal, getAriaPressed, getAriaRequired, resetIdCounter };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// src/machines/typography/typography.connect.ts
|
|
2
|
+
var variantElementMap = {
|
|
3
|
+
h1: "h1",
|
|
4
|
+
h2: "h2",
|
|
5
|
+
h3: "h3",
|
|
6
|
+
h4: "h4",
|
|
7
|
+
h5: "h5",
|
|
8
|
+
h6: "h6",
|
|
9
|
+
body: "p",
|
|
10
|
+
body1: "p",
|
|
11
|
+
body2: "p",
|
|
12
|
+
caption: "span",
|
|
13
|
+
overline: "span"
|
|
14
|
+
};
|
|
15
|
+
function connectTypography(options) {
|
|
16
|
+
const { variant, align, truncate, color } = options;
|
|
17
|
+
const element = variantElementMap[variant];
|
|
18
|
+
const style = {};
|
|
19
|
+
if (align) style.textAlign = align;
|
|
20
|
+
if (color) style.color = color;
|
|
21
|
+
if (truncate) {
|
|
22
|
+
style.overflow = "hidden";
|
|
23
|
+
style.textOverflow = "ellipsis";
|
|
24
|
+
style.whiteSpace = "nowrap";
|
|
25
|
+
}
|
|
26
|
+
return {
|
|
27
|
+
element,
|
|
28
|
+
rootProps: {
|
|
29
|
+
"data-variant": variant,
|
|
30
|
+
...Object.keys(style).length > 0 ? { style } : {}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export { connectTypography };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// src/machines/card/card.connect.ts
|
|
2
|
+
function connectCard(options = {}) {
|
|
3
|
+
const { variant = "elevated", padding = "md", interactive = false, onClick } = options;
|
|
4
|
+
return {
|
|
5
|
+
rootProps: {
|
|
6
|
+
"data-variant": variant,
|
|
7
|
+
"data-padding": padding,
|
|
8
|
+
...interactive ? {
|
|
9
|
+
role: "button",
|
|
10
|
+
tabIndex: 0,
|
|
11
|
+
onClick,
|
|
12
|
+
onKeyDown: (event) => {
|
|
13
|
+
const e = event;
|
|
14
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
15
|
+
onClick?.(event);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
} : {}
|
|
19
|
+
},
|
|
20
|
+
headerProps: {
|
|
21
|
+
"data-part": "header"
|
|
22
|
+
},
|
|
23
|
+
bodyProps: {
|
|
24
|
+
"data-part": "body"
|
|
25
|
+
},
|
|
26
|
+
footerProps: {
|
|
27
|
+
"data-part": "footer"
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { connectCard };
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/create-machine.ts
|
|
4
|
+
function createMachine(config) {
|
|
5
|
+
let currentState = config.initial;
|
|
6
|
+
let context = { ...config.context };
|
|
7
|
+
let snapshot = { state: currentState, context };
|
|
8
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
9
|
+
let running = false;
|
|
10
|
+
function updateSnapshot() {
|
|
11
|
+
snapshot = { state: currentState, context };
|
|
12
|
+
}
|
|
13
|
+
function notify() {
|
|
14
|
+
for (const listener of listeners) {
|
|
15
|
+
listener();
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
return {
|
|
19
|
+
send(event) {
|
|
20
|
+
if (!running) return;
|
|
21
|
+
const stateConfig = config.states[currentState];
|
|
22
|
+
if (!stateConfig?.on) return;
|
|
23
|
+
const transition = stateConfig.on[event.type];
|
|
24
|
+
if (!transition) return;
|
|
25
|
+
if (typeof transition === "string") {
|
|
26
|
+
currentState = transition;
|
|
27
|
+
} else {
|
|
28
|
+
const t = transition;
|
|
29
|
+
currentState = t.target;
|
|
30
|
+
if (t.actions) {
|
|
31
|
+
context = { ...context, ...t.actions(context, event) };
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
updateSnapshot();
|
|
35
|
+
notify();
|
|
36
|
+
},
|
|
37
|
+
subscribe(listener) {
|
|
38
|
+
listeners.add(listener);
|
|
39
|
+
return () => {
|
|
40
|
+
listeners.delete(listener);
|
|
41
|
+
};
|
|
42
|
+
},
|
|
43
|
+
getSnapshot() {
|
|
44
|
+
return snapshot;
|
|
45
|
+
},
|
|
46
|
+
start() {
|
|
47
|
+
running = true;
|
|
48
|
+
},
|
|
49
|
+
stop() {
|
|
50
|
+
running = false;
|
|
51
|
+
listeners.clear();
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
exports.createMachine = createMachine;
|