mac-human-design 0.1.14 → 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 +22 -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 +41 -7
package/changelog.md
CHANGED
|
@@ -2,6 +2,28 @@
|
|
|
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
|
+
|
|
17
|
+
## 0.1.15
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Added shared macOS motion timing tokens and applied them to controls and
|
|
22
|
+
floating surfaces for more consistent UI motion.
|
|
23
|
+
- Replaced button active-state vertical translation with non-positional pressed
|
|
24
|
+
feedback, keeping icon-only controls visually anchored while pressed.
|
|
25
|
+
- Bumped the package to `0.1.15`.
|
|
26
|
+
|
|
5
27
|
## 0.1.14
|
|
6
28
|
|
|
7
29
|
### Added
|
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
|
}
|
|
@@ -24,6 +24,10 @@
|
|
|
24
24
|
0 1px 0 rgba(255, 255, 255, 0.86) inset,
|
|
25
25
|
0 1px 1px rgba(15, 23, 42, 0.08);
|
|
26
26
|
--hd-mac-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hd-mac-blue) 28%, transparent);
|
|
27
|
+
--hd-mac-motion-fast: 90ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
28
|
+
--hd-mac-motion-standard: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
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);
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
@media (prefers-color-scheme: dark) {
|
|
@@ -61,7 +65,10 @@
|
|
|
61
65
|
.hd-mac-stepper-button,
|
|
62
66
|
.hd-mac-switch,
|
|
63
67
|
.hd-mac-switch-thumb,
|
|
64
|
-
.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 {
|
|
65
72
|
transition-duration: 1ms !important;
|
|
66
73
|
animation-duration: 1ms !important;
|
|
67
74
|
animation-iteration-count: 1 !important;
|
|
@@ -157,11 +164,11 @@
|
|
|
157
164
|
user-select: none;
|
|
158
165
|
white-space: nowrap;
|
|
159
166
|
transition:
|
|
160
|
-
background-color
|
|
161
|
-
border-color
|
|
162
|
-
box-shadow
|
|
163
|
-
filter
|
|
164
|
-
transform
|
|
167
|
+
background-color var(--hd-mac-motion-standard),
|
|
168
|
+
border-color var(--hd-mac-motion-standard),
|
|
169
|
+
box-shadow var(--hd-mac-motion-standard),
|
|
170
|
+
filter var(--hd-mac-motion-fast),
|
|
171
|
+
transform var(--hd-mac-motion-fast);
|
|
165
172
|
}
|
|
166
173
|
|
|
167
174
|
.hd-mac-button:hover,
|
|
@@ -177,8 +184,10 @@
|
|
|
177
184
|
.hd-mac-toggle:active,
|
|
178
185
|
.hd-mac-toolbar-button:active,
|
|
179
186
|
.hd-mac-stepper-button:active {
|
|
180
|
-
transform: translateY(1px);
|
|
181
187
|
filter: brightness(0.98);
|
|
188
|
+
box-shadow:
|
|
189
|
+
0 1px 0 rgba(0, 0, 0, 0.06) inset,
|
|
190
|
+
0 1px 1px rgba(15, 23, 42, 0.04);
|
|
182
191
|
}
|
|
183
192
|
|
|
184
193
|
.hd-mac-button:focus-visible,
|
|
@@ -515,6 +524,11 @@
|
|
|
515
524
|
box-shadow: var(--hd-mac-shadow);
|
|
516
525
|
backdrop-filter: saturate(180%) blur(28px);
|
|
517
526
|
-webkit-backdrop-filter: saturate(180%) blur(28px);
|
|
527
|
+
transform-origin: center;
|
|
528
|
+
transition:
|
|
529
|
+
opacity var(--hd-mac-motion-surface),
|
|
530
|
+
transform var(--hd-mac-motion-surface),
|
|
531
|
+
box-shadow var(--hd-mac-motion-surface);
|
|
518
532
|
}
|
|
519
533
|
|
|
520
534
|
.hd-mac-popup,
|
|
@@ -1151,7 +1165,14 @@
|
|
|
1151
1165
|
border-bottom: 1px solid var(--hd-mac-border);
|
|
1152
1166
|
padding: 10px 16px;
|
|
1153
1167
|
background: var(--hd-mac-surface);
|
|
1168
|
+
backdrop-filter: saturate(180%) blur(20px);
|
|
1169
|
+
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
1154
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);
|
|
1155
1176
|
}
|
|
1156
1177
|
|
|
1157
1178
|
.hd-mac-window-toolbar-group,
|
|
@@ -1161,6 +1182,7 @@
|
|
|
1161
1182
|
align-items: center;
|
|
1162
1183
|
gap: 8px;
|
|
1163
1184
|
flex-wrap: wrap;
|
|
1185
|
+
transform-origin: center;
|
|
1164
1186
|
}
|
|
1165
1187
|
|
|
1166
1188
|
.hd-mac-window-toolbar-title {
|
|
@@ -1177,6 +1199,7 @@
|
|
|
1177
1199
|
min-width: 0;
|
|
1178
1200
|
color: var(--hd-mac-text);
|
|
1179
1201
|
font-family: var(--hd-mac-font);
|
|
1202
|
+
transform-origin: top center;
|
|
1180
1203
|
}
|
|
1181
1204
|
|
|
1182
1205
|
.hd-mac-data-table-bordered {
|
|
@@ -1201,6 +1224,12 @@
|
|
|
1201
1224
|
.hd-mac-data-table-row {
|
|
1202
1225
|
border-bottom: 1px solid var(--hd-mac-border);
|
|
1203
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);
|
|
1204
1233
|
}
|
|
1205
1234
|
|
|
1206
1235
|
.hd-mac-data-table-row:last-child {
|
|
@@ -1215,8 +1244,13 @@
|
|
|
1215
1244
|
background: var(--hd-mac-fill-hover);
|
|
1216
1245
|
}
|
|
1217
1246
|
|
|
1247
|
+
.hd-mac-data-table-row-interactive:active {
|
|
1248
|
+
filter: brightness(0.98);
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1218
1251
|
.hd-mac-data-table-row[data-selected] {
|
|
1219
1252
|
background: color-mix(in srgb, var(--hd-mac-blue) 18%, transparent);
|
|
1253
|
+
box-shadow: inset 3px 0 0 var(--hd-mac-blue);
|
|
1220
1254
|
}
|
|
1221
1255
|
|
|
1222
1256
|
.hd-mac-data-table-row[data-selected]:hover {
|