mac-human-design 0.1.15 → 0.1.16
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/changelog.md +12 -0
- package/package.json +1 -1
- package/src/components/MacDataTable.tsx +41 -8
- package/src/components/MacWindowToolbar.tsx +39 -10
- package/src/styles/macosBaseUi.css +25 -1
package/changelog.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
This file tracks changes between published npm versions of `mac-human-design`.
|
|
4
4
|
|
|
5
|
+
## 0.1.16
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Added shared Motion-backed entrance and layout transitions to
|
|
10
|
+
`MacWindowToolbar` so Tauri toolbars animate consistently with the Base UI
|
|
11
|
+
wrappers while keeping icon controls centered.
|
|
12
|
+
- Added shared Motion-backed row and state transitions to `MacDataTable`,
|
|
13
|
+
including subtle selected-row emphasis and non-layout-shifting interactive
|
|
14
|
+
feedback.
|
|
15
|
+
- Bumped the package to `0.1.16`.
|
|
16
|
+
|
|
5
17
|
## 0.1.15
|
|
6
18
|
|
|
7
19
|
### Changed
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { motion, type Transition } from "motion/react";
|
|
2
3
|
|
|
3
4
|
export type MacDataTableColumn<Row> = {
|
|
4
5
|
id: string;
|
|
@@ -43,6 +44,11 @@ function alignmentClassName(align: MacDataTableColumn<unknown>["align"]) {
|
|
|
43
44
|
return undefined;
|
|
44
45
|
}
|
|
45
46
|
|
|
47
|
+
const tableTransition: Transition = {
|
|
48
|
+
default: { type: "spring", stiffness: 520, damping: 44, mass: 0.78 },
|
|
49
|
+
opacity: { duration: 0.12, ease: "easeOut" },
|
|
50
|
+
};
|
|
51
|
+
|
|
46
52
|
export function MacDataTable<Row>({
|
|
47
53
|
columns,
|
|
48
54
|
rows,
|
|
@@ -63,14 +69,19 @@ export function MacDataTable<Row>({
|
|
|
63
69
|
const hasInteractiveRows = Boolean(onRowClick || onRowDoubleClick);
|
|
64
70
|
|
|
65
71
|
return (
|
|
66
|
-
<div
|
|
72
|
+
<motion.div
|
|
73
|
+
initial={{ opacity: 0 }}
|
|
74
|
+
animate={{ opacity: 1 }}
|
|
75
|
+
transition={tableTransition}
|
|
67
76
|
className={joinClasses("hd-mac-data-table", bordered && "hd-mac-data-table-bordered", className)}
|
|
68
77
|
style={style}
|
|
69
78
|
>
|
|
70
|
-
<div
|
|
79
|
+
<motion.div
|
|
80
|
+
layout
|
|
71
81
|
className="hd-mac-data-table-header"
|
|
72
82
|
role="row"
|
|
73
83
|
style={{ gridTemplateColumns }}
|
|
84
|
+
transition={tableTransition}
|
|
74
85
|
>
|
|
75
86
|
{columns.map((column) => (
|
|
76
87
|
<div
|
|
@@ -86,18 +97,40 @@ export function MacDataTable<Row>({
|
|
|
86
97
|
{column.header}
|
|
87
98
|
</div>
|
|
88
99
|
))}
|
|
89
|
-
</div>
|
|
100
|
+
</motion.div>
|
|
90
101
|
|
|
91
102
|
{loading ? (
|
|
92
|
-
<div
|
|
103
|
+
<motion.div
|
|
104
|
+
initial={{ opacity: 0, y: -2 }}
|
|
105
|
+
animate={{ opacity: 1, y: 0 }}
|
|
106
|
+
transition={tableTransition}
|
|
107
|
+
className="hd-mac-data-table-message"
|
|
108
|
+
>
|
|
109
|
+
{loadingContent}
|
|
110
|
+
</motion.div>
|
|
93
111
|
) : rows.length === 0 ? (
|
|
94
|
-
<div
|
|
112
|
+
<motion.div
|
|
113
|
+
initial={{ opacity: 0, y: -2 }}
|
|
114
|
+
animate={{ opacity: 1, y: 0 }}
|
|
115
|
+
transition={tableTransition}
|
|
116
|
+
className="hd-mac-data-table-message"
|
|
117
|
+
>
|
|
118
|
+
{emptyContent}
|
|
119
|
+
</motion.div>
|
|
95
120
|
) : (
|
|
96
121
|
rows.map((row, index) => {
|
|
97
122
|
const selected = isRowSelected?.(row, index) ?? false;
|
|
98
123
|
return (
|
|
99
|
-
<div
|
|
124
|
+
<motion.div
|
|
100
125
|
key={getRowKey(row, index)}
|
|
126
|
+
layout
|
|
127
|
+
initial={{ opacity: 0, y: 3 }}
|
|
128
|
+
animate={{ opacity: 1, y: 0 }}
|
|
129
|
+
whileTap={hasInteractiveRows ? { scale: 0.998 } : undefined}
|
|
130
|
+
transition={{
|
|
131
|
+
...tableTransition,
|
|
132
|
+
delay: Math.min(index * 0.012, 0.06),
|
|
133
|
+
}}
|
|
101
134
|
className={joinClasses(
|
|
102
135
|
"hd-mac-data-table-row",
|
|
103
136
|
hasInteractiveRows && "hd-mac-data-table-row-interactive",
|
|
@@ -123,10 +156,10 @@ export function MacDataTable<Row>({
|
|
|
123
156
|
{column.render(row, index)}
|
|
124
157
|
</div>
|
|
125
158
|
))}
|
|
126
|
-
</div>
|
|
159
|
+
</motion.div>
|
|
127
160
|
);
|
|
128
161
|
})
|
|
129
162
|
)}
|
|
130
|
-
</div>
|
|
163
|
+
</motion.div>
|
|
131
164
|
);
|
|
132
165
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { motion, type Transition } from "motion/react";
|
|
2
3
|
|
|
3
4
|
export type MacWindowToolbarProps = {
|
|
4
5
|
leading?: React.ReactNode;
|
|
@@ -13,6 +14,11 @@ function joinClasses(...classes: Array<string | undefined | false>) {
|
|
|
13
14
|
return classes.filter(Boolean).join(" ");
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
const toolbarTransition: Transition = {
|
|
18
|
+
default: { type: "spring", stiffness: 500, damping: 42, mass: 0.8 },
|
|
19
|
+
opacity: { duration: 0.14, ease: "easeOut" },
|
|
20
|
+
};
|
|
21
|
+
|
|
16
22
|
export function MacWindowToolbar({
|
|
17
23
|
leading,
|
|
18
24
|
title,
|
|
@@ -22,31 +28,54 @@ export function MacWindowToolbar({
|
|
|
22
28
|
style,
|
|
23
29
|
}: MacWindowToolbarProps) {
|
|
24
30
|
return (
|
|
25
|
-
<div
|
|
31
|
+
<motion.div
|
|
32
|
+
initial={{ opacity: 0, y: -4 }}
|
|
33
|
+
animate={{ opacity: 1, y: 0 }}
|
|
34
|
+
transition={toolbarTransition}
|
|
26
35
|
className={joinClasses("hd-mac-window-toolbar", className)}
|
|
27
36
|
data-tauri-drag-region
|
|
28
37
|
style={style}
|
|
29
38
|
>
|
|
30
39
|
{leading ? (
|
|
31
|
-
<div
|
|
40
|
+
<motion.div
|
|
41
|
+
layout
|
|
42
|
+
className="hd-mac-window-toolbar-group"
|
|
43
|
+
data-tauri-no-drag-region
|
|
44
|
+
transition={toolbarTransition}
|
|
45
|
+
>
|
|
32
46
|
{leading}
|
|
33
|
-
</div>
|
|
47
|
+
</motion.div>
|
|
34
48
|
) : null}
|
|
35
49
|
{title ? (
|
|
36
|
-
<div
|
|
50
|
+
<motion.div
|
|
51
|
+
layout
|
|
52
|
+
className="hd-mac-window-toolbar-title"
|
|
53
|
+
data-tauri-drag-region
|
|
54
|
+
transition={toolbarTransition}
|
|
55
|
+
>
|
|
37
56
|
{title}
|
|
38
|
-
</div>
|
|
57
|
+
</motion.div>
|
|
39
58
|
) : null}
|
|
40
59
|
{children ? (
|
|
41
|
-
<div
|
|
60
|
+
<motion.div
|
|
61
|
+
layout
|
|
62
|
+
className="hd-mac-window-toolbar-content"
|
|
63
|
+
data-tauri-no-drag-region
|
|
64
|
+
transition={toolbarTransition}
|
|
65
|
+
>
|
|
42
66
|
{children}
|
|
43
|
-
</div>
|
|
67
|
+
</motion.div>
|
|
44
68
|
) : null}
|
|
45
69
|
{trailing ? (
|
|
46
|
-
<div
|
|
70
|
+
<motion.div
|
|
71
|
+
layout
|
|
72
|
+
className="hd-mac-window-toolbar-group"
|
|
73
|
+
data-tauri-no-drag-region
|
|
74
|
+
transition={toolbarTransition}
|
|
75
|
+
>
|
|
47
76
|
{trailing}
|
|
48
|
-
</div>
|
|
77
|
+
</motion.div>
|
|
49
78
|
) : null}
|
|
50
|
-
</div>
|
|
79
|
+
</motion.div>
|
|
51
80
|
);
|
|
52
81
|
}
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
--hd-mac-motion-fast: 90ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
28
28
|
--hd-mac-motion-standard: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
29
29
|
--hd-mac-motion-surface: 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
30
|
+
--hd-mac-motion-row: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
@media (prefers-color-scheme: dark) {
|
|
@@ -64,7 +65,10 @@
|
|
|
64
65
|
.hd-mac-stepper-button,
|
|
65
66
|
.hd-mac-switch,
|
|
66
67
|
.hd-mac-switch-thumb,
|
|
67
|
-
.hd-mac-slider-thumb
|
|
68
|
+
.hd-mac-slider-thumb,
|
|
69
|
+
.hd-mac-window-toolbar,
|
|
70
|
+
.hd-mac-data-table,
|
|
71
|
+
.hd-mac-data-table-row {
|
|
68
72
|
transition-duration: 1ms !important;
|
|
69
73
|
animation-duration: 1ms !important;
|
|
70
74
|
animation-iteration-count: 1 !important;
|
|
@@ -1161,7 +1165,14 @@
|
|
|
1161
1165
|
border-bottom: 1px solid var(--hd-mac-border);
|
|
1162
1166
|
padding: 10px 16px;
|
|
1163
1167
|
background: var(--hd-mac-surface);
|
|
1168
|
+
backdrop-filter: saturate(180%) blur(20px);
|
|
1169
|
+
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
1164
1170
|
box-sizing: border-box;
|
|
1171
|
+
transform-origin: top center;
|
|
1172
|
+
transition:
|
|
1173
|
+
background-color var(--hd-mac-motion-surface),
|
|
1174
|
+
border-color var(--hd-mac-motion-surface),
|
|
1175
|
+
box-shadow var(--hd-mac-motion-surface);
|
|
1165
1176
|
}
|
|
1166
1177
|
|
|
1167
1178
|
.hd-mac-window-toolbar-group,
|
|
@@ -1171,6 +1182,7 @@
|
|
|
1171
1182
|
align-items: center;
|
|
1172
1183
|
gap: 8px;
|
|
1173
1184
|
flex-wrap: wrap;
|
|
1185
|
+
transform-origin: center;
|
|
1174
1186
|
}
|
|
1175
1187
|
|
|
1176
1188
|
.hd-mac-window-toolbar-title {
|
|
@@ -1187,6 +1199,7 @@
|
|
|
1187
1199
|
min-width: 0;
|
|
1188
1200
|
color: var(--hd-mac-text);
|
|
1189
1201
|
font-family: var(--hd-mac-font);
|
|
1202
|
+
transform-origin: top center;
|
|
1190
1203
|
}
|
|
1191
1204
|
|
|
1192
1205
|
.hd-mac-data-table-bordered {
|
|
@@ -1211,6 +1224,12 @@
|
|
|
1211
1224
|
.hd-mac-data-table-row {
|
|
1212
1225
|
border-bottom: 1px solid var(--hd-mac-border);
|
|
1213
1226
|
padding: 8px 10px;
|
|
1227
|
+
transform-origin: center;
|
|
1228
|
+
transition:
|
|
1229
|
+
background-color var(--hd-mac-motion-row),
|
|
1230
|
+
border-color var(--hd-mac-motion-row),
|
|
1231
|
+
box-shadow var(--hd-mac-motion-row),
|
|
1232
|
+
filter var(--hd-mac-motion-fast);
|
|
1214
1233
|
}
|
|
1215
1234
|
|
|
1216
1235
|
.hd-mac-data-table-row:last-child {
|
|
@@ -1225,8 +1244,13 @@
|
|
|
1225
1244
|
background: var(--hd-mac-fill-hover);
|
|
1226
1245
|
}
|
|
1227
1246
|
|
|
1247
|
+
.hd-mac-data-table-row-interactive:active {
|
|
1248
|
+
filter: brightness(0.98);
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1228
1251
|
.hd-mac-data-table-row[data-selected] {
|
|
1229
1252
|
background: color-mix(in srgb, var(--hd-mac-blue) 18%, transparent);
|
|
1253
|
+
box-shadow: inset 3px 0 0 var(--hd-mac-blue);
|
|
1230
1254
|
}
|
|
1231
1255
|
|
|
1232
1256
|
.hd-mac-data-table-row[data-selected]:hover {
|