duet-ui 0.2.2 → 0.2.3
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/chrome.js +1 -1
- package/dist/duet.css +4 -4
- package/package.json +1 -1
package/dist/chrome.js
CHANGED
|
@@ -506,7 +506,7 @@ export function Duet(props) {
|
|
|
506
506
|
return null;
|
|
507
507
|
const close = kind === "more" && !morph, rolling = menu !== kind;
|
|
508
508
|
return (_jsxs(GlassSurface, { preset: "control", className: "duet-glass duet-menu", role: "menu", "data-style": morph ? "morph" : undefined, style: morph ? morphAt(anchor, items.length) : menuAt(anchor, items.length + (close ? 1 : 0)), "data-closing": rolling || undefined, onAnimationEnd: (e) => { if (rolling && (e.animationName === "duet-roll" || e.animationName === "duet-unmorph"))
|
|
509
|
-
setClosing(null); }, children: [items.map((a, i) => (_jsxs("button", { role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? a.id === selected : undefined, "aria-label": a.label, className: "duet-menu-item", "data-on": (radio && a.id === selected) || undefined, "data-destructive": a.destructive || undefined, "data-sep": (a.destructive && i > 0 && !items[i - 1].destructive) || undefined, "data-tint": a.tint ? "" : undefined, style: { ...tint(a), ...(rolling ? undefined : { animationDelay: `${morph ? 0.
|
|
509
|
+
setClosing(null); }, children: [items.map((a, i) => (_jsxs("button", { role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? a.id === selected : undefined, "aria-label": a.label, className: "duet-menu-item", "data-on": (radio && a.id === selected) || undefined, "data-destructive": a.destructive || undefined, "data-sep": (a.destructive && i > 0 && !items[i - 1].destructive) || undefined, "data-tint": a.tint ? "" : undefined, style: { ...tint(a), ...(rolling ? undefined : { animationDelay: `${morph ? 0.06 + 0.025 * i : 0.05 + 0.035 * (items.length - i)}s` }) }, onClick: () => { setMenu(null); if (radio)
|
|
510
510
|
select(a.id);
|
|
511
511
|
else
|
|
512
512
|
a.onPress?.(); }, children: [a.icon, morph && _jsx("span", { className: "duet-menu-label", children: a.label }), badge(a)] }, a.id))), close && _jsx("button", { className: "duet-menu-item", "aria-label": "Close", onClick: () => setMenu(null), children: _jsx(X, { size: 20 }) })] }));
|
package/dist/duet.css
CHANGED
|
@@ -163,9 +163,9 @@
|
|
|
163
163
|
.duet-menu {
|
|
164
164
|
position: fixed; z-index: 51; display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
|
|
165
165
|
padding: 0 3px; overflow: hidden; transition: none;
|
|
166
|
-
animation: duet-unroll 0.
|
|
166
|
+
animation: duet-unroll 0.36s var(--duet-spring-out) both, duet-thin 0.36s ease-out both;
|
|
167
167
|
}
|
|
168
|
-
.duet-menu[data-closing] { animation: duet-roll 0.
|
|
168
|
+
.duet-menu[data-closing] { animation: duet-roll 0.22s cubic-bezier(0.32, 0.72, 0, 1) both, duet-thin 0.22s ease-out both; pointer-events: none; }
|
|
169
169
|
/* A touch denser than the controls, so the strip under it does not compete with the menu icons. */
|
|
170
170
|
.duet-menu::before { background-color: var(--duet-menu); }
|
|
171
171
|
.duet-menu > * { animation: duet-fade 0.16s 0.03s var(--duet-spring-out) both; }
|
|
@@ -202,9 +202,9 @@
|
|
|
202
202
|
circle (--x0/--y0 is its top-left) and springs out to the list; closing shrinks it back into the button. */
|
|
203
203
|
.duet-menu[data-style="morph"] {
|
|
204
204
|
flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px; border-radius: 22px;
|
|
205
|
-
animation: duet-morph 0.
|
|
205
|
+
animation: duet-morph 0.36s var(--duet-spring-out) both;
|
|
206
206
|
}
|
|
207
|
-
.duet-menu[data-style="morph"][data-closing] { animation: duet-unmorph 0.
|
|
207
|
+
.duet-menu[data-style="morph"][data-closing] { animation: duet-unmorph 0.2s cubic-bezier(0.32, 0.72, 0, 1) both; }
|
|
208
208
|
.duet[data-side="left"] .duet-menu[data-style="morph"] { flex-direction: column; }
|
|
209
209
|
.duet-menu[data-style="morph"] > .duet-menu-item {
|
|
210
210
|
width: auto; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px;
|
package/package.json
CHANGED