@rinzai/zen 0.7.4 → 0.8.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/README.md +1 -1
- package/dist/badge/index.js +2 -2
- package/dist/base.css +3 -2
- package/dist/button/index.js +2 -2
- package/dist/calendar/index.js +1 -1
- package/dist/card/index.js +2 -2
- package/dist/chart/donut.d.ts +4 -2
- package/dist/chart/donut.d.ts.map +1 -1
- package/dist/chart/donut.js +61 -49
- package/dist/chart/index.js +1 -1
- package/dist/checkbox/index.js +2 -2
- package/dist/code-block/index.js +1 -1
- package/dist/combobox/index.d.ts.map +1 -1
- package/dist/combobox/index.js +86 -86
- package/dist/date-picker/index.js +2 -2
- package/dist/dialog/index.js +2 -2
- package/dist/disclosure/index.d.ts.map +1 -1
- package/dist/disclosure/index.js +3 -3
- package/dist/input/index.d.ts.map +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input-group/index.js +1 -1
- package/dist/meter/index.js +1 -1
- package/dist/month-picker/index.d.ts.map +1 -1
- package/dist/month-picker/index.js +49 -49
- package/dist/page-header/index.js +1 -1
- package/dist/progress-ring/index.js +1 -1
- package/dist/radio-group/index.js +2 -2
- package/dist/segmented/index.js +1 -1
- package/dist/select/index.js +2 -2
- package/dist/side-nav/index.d.ts.map +1 -1
- package/dist/side-nav/index.js +1 -1
- package/dist/slider/index.js +1 -1
- package/dist/status-pill/index.js +2 -2
- package/dist/tab-bar/index.js +1 -1
- package/dist/table-of-contents/index.js +1 -1
- package/dist/textarea/index.d.ts.map +1 -1
- package/dist/textarea/index.js +1 -1
- package/dist/theme.css +42 -6
- package/dist/toast/index.js +5 -5
- package/dist/toggle/index.js +2 -2
- package/dist/tree/index.d.ts.map +1 -1
- package/dist/tree/index.js +1 -1
- package/dist/utils/field-chevron.js +1 -1
- package/dist/utils/styles.d.ts +9 -3
- package/dist/utils/styles.d.ts.map +1 -1
- package/dist/utils/styles.js +2 -2
- package/dist/utils/theme.d.ts.map +1 -1
- package/dist/utils/theme.js +9 -6
- package/dist/variables.css +22 -1
- package/dist/zen.css +1 -1
- package/package.json +13 -24
package/dist/segmented/index.js
CHANGED
|
@@ -20,7 +20,7 @@ function l({ label: n, value: r, onChange: l, name: u, className: d, children: f
|
|
|
20
20
|
className: "glow-edge border-tint/10 bg-tint/[0.03] relative inline-flex w-fit flex-wrap gap-1 rounded-xl border p-1",
|
|
21
21
|
children: [h && /* @__PURE__ */ o("span", {
|
|
22
22
|
"aria-hidden": !0,
|
|
23
|
-
className: "bg-primary/15 absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500
|
|
23
|
+
className: "zen__segmented-indicator bg-primary/15 ease-out-soft absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500",
|
|
24
24
|
style: {
|
|
25
25
|
translate: `${h.x}px ${h.y}px`,
|
|
26
26
|
width: h.w,
|
package/dist/select/index.js
CHANGED
|
@@ -79,9 +79,9 @@ function C({ value: a, onChange: c, placeholder: l = "Select…", disabled: u =
|
|
|
79
79
|
onKeyDown: (e) => {
|
|
80
80
|
D?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !z.open && (e.preventDefault(), z.setOpen(!0));
|
|
81
81
|
},
|
|
82
|
-
className: e("zen__select group", i, "w-full", z.open && "border-glow/60 [--glow-border-color:transparent] shadow-
|
|
82
|
+
className: e("zen__select group", i, "w-full", z.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", g),
|
|
83
83
|
children: [/* @__PURE__ */ b("span", {
|
|
84
|
-
className: e("truncate", U === void 0 && "text-muted-foreground"),
|
|
84
|
+
className: e("truncate", U === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
|
|
85
85
|
children: U ?? l
|
|
86
86
|
}), /* @__PURE__ */ b(s, { open: z.open })]
|
|
87
87
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/side-nav/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAE5E;AAED,+BAA+B;AAC/B,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/side-nav/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAE5E;AAED,+BAA+B;AAC/B,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BASA;AAQD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAO9F;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACzD,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
|
package/dist/side-nav/index.js
CHANGED
|
@@ -13,7 +13,7 @@ function a({ title: t, children: i, className: a }) {
|
|
|
13
13
|
return /* @__PURE__ */ r("div", {
|
|
14
14
|
className: e("flex flex-col gap-1", a),
|
|
15
15
|
children: [t && /* @__PURE__ */ n("span", {
|
|
16
|
-
className: "text-muted-foreground px-3 pb-1
|
|
16
|
+
className: "text-muted-foreground text-2xs px-3 pb-1 tracking-widest uppercase",
|
|
17
17
|
children: t
|
|
18
18
|
}), i]
|
|
19
19
|
});
|
package/dist/slider/index.js
CHANGED
|
@@ -26,7 +26,7 @@ function i({ value: i, min: a = 0, max: o = 100, step: s = 1, onValueChange: c,
|
|
|
26
26
|
"--zen-track": y,
|
|
27
27
|
"--zen-thumb": d ?? "oklch(var(--primary))"
|
|
28
28
|
},
|
|
29
|
-
className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)]", "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-moz-range-thumb]:[background:var(--zen-thumb)]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4", "focus-visible:[&::-moz-range-thumb]:ring-ring/40 focus-visible:[&::-moz-range-thumb]:ring-4", p),
|
|
29
|
+
className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)]", "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-moz-range-thumb]:[background:var(--zen-thumb)]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4", "focus-visible:[&::-moz-range-thumb]:ring-ring/40 focus-visible:[&::-moz-range-thumb]:ring-4", p),
|
|
30
30
|
...h
|
|
31
31
|
});
|
|
32
32
|
}
|
|
@@ -5,13 +5,13 @@ import { jsx as t } from "react/jsx-runtime";
|
|
|
5
5
|
var n = {
|
|
6
6
|
default: "border-tint/10 bg-tint/[0.05] text-muted-foreground",
|
|
7
7
|
positive: "border-primary/35 bg-primary/12 text-primary",
|
|
8
|
-
negative: "border-destructive/40 bg-destructive/
|
|
8
|
+
negative: "border-destructive/40 bg-destructive/10 text-destructive"
|
|
9
9
|
};
|
|
10
10
|
function r({ tone: r = "default", quiet: i = !1, className: a, ...o }) {
|
|
11
11
|
return /* @__PURE__ */ t("span", {
|
|
12
12
|
role: "status",
|
|
13
13
|
...o,
|
|
14
|
-
className: e("zen__status-pill inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium whitespace-nowrap [&_svg]:size-3.5 [&_svg]:shrink-0", "transition-[color,background-color,border-color,opacity] duration-300", i ? "text-muted-foreground border-transparent bg-transparent
|
|
14
|
+
className: e("zen__status-pill inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium whitespace-nowrap [&_svg]:size-3.5 [&_svg]:shrink-0", "transition-[color,background-color,border-color,opacity] duration-300", i ? "text-muted-foreground border-transparent bg-transparent" : n[r], a)
|
|
15
15
|
});
|
|
16
16
|
}
|
|
17
17
|
function i({ className: n, type: r = "button", ...i }) {
|
package/dist/tab-bar/index.js
CHANGED
|
@@ -15,7 +15,7 @@ function a({ hideFrom: t = "md", className: i, children: a, ...o }) {
|
|
|
15
15
|
})
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
|
-
var o = e("flex flex-col items-center gap-1 py-2.5 text-
|
|
18
|
+
var o = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
|
|
19
19
|
function s({ icon: n, active: a, asChild: s, className: c, children: l, ...u }) {
|
|
20
20
|
let d = {
|
|
21
21
|
...u,
|
|
@@ -17,7 +17,7 @@ function a({ items: a, title: o = "On this page", className: s }) {
|
|
|
17
17
|
"aria-label": o,
|
|
18
18
|
className: e("zen__toc flex flex-col gap-3", s),
|
|
19
19
|
children: [/* @__PURE__ */ r("p", {
|
|
20
|
-
className: "text-muted-foreground mt-0!
|
|
20
|
+
className: "text-muted-foreground text-2xs mt-0! tracking-widest uppercase",
|
|
21
21
|
children: o
|
|
22
22
|
}), /* @__PURE__ */ r("ul", {
|
|
23
23
|
className: "border-tint/[0.07] flex flex-col gap-2 border-l text-sm",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}
|
package/dist/textarea/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { jsx as r } from "react/jsx-runtime";
|
|
|
7
7
|
function i(i) {
|
|
8
8
|
let { className: a, ...o } = i, s = n(o);
|
|
9
9
|
return /* @__PURE__ */ r("textarea", {
|
|
10
|
-
className: e(t.replace("h-10", ""), "h-32 w-full resize-y py-2", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", a),
|
|
10
|
+
className: e("zen__textarea", t.replace("h-10", ""), "h-32 w-full resize-y py-2", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", a),
|
|
11
11
|
...o,
|
|
12
12
|
...s
|
|
13
13
|
});
|
package/dist/theme.css
CHANGED
|
@@ -64,11 +64,21 @@
|
|
|
64
64
|
|
|
65
65
|
--color-tint: oklch(var(--tint));
|
|
66
66
|
|
|
67
|
+
/* Surfaces (cards, dialogs, popups) are rounded-xl/2xl: derived too, so --radius reaches them. */
|
|
68
|
+
--radius-2xl: calc(var(--radius) + 6px);
|
|
69
|
+
--radius-xl: calc(var(--radius) + 2px);
|
|
67
70
|
--radius-lg: var(--radius);
|
|
68
71
|
--radius-md: calc(var(--radius) - 2px);
|
|
69
72
|
--radius-sm: calc(var(--radius) - 4px);
|
|
70
73
|
|
|
71
|
-
|
|
74
|
+
/* The small uppercase label over a stat, a nav group or a contents list; badges and tab-bar labels. */
|
|
75
|
+
--text-2xs: 0.68rem;
|
|
76
|
+
|
|
77
|
+
/* A focused (or open) field: a faint ring in the glow colour and a halo that follows --glow-strength. */
|
|
78
|
+
--shadow-glow-focus:
|
|
79
|
+
0 0 0 3px oklch(var(--glow) / 0.16), 0 0 24px -6px oklch(var(--glow) / calc(0.6 * var(--glow-k)));
|
|
80
|
+
|
|
81
|
+
--font-sans: 'Geist Variable', Geist, ui-sans-serif, system-ui, sans-serif;
|
|
72
82
|
|
|
73
83
|
--ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
74
84
|
|
|
@@ -305,26 +315,47 @@ html[data-zen-graphics='lite'] :is(.zen-topo--lit, .zen-dots--lit) {
|
|
|
305
315
|
.zen__table-container[data-under-top] .zen__sticky-top,
|
|
306
316
|
.zen__table-container[data-under-left] .zen__sticky-left,
|
|
307
317
|
.zen__table-container[data-under-bottom] .zen__sticky-bottom {
|
|
308
|
-
|
|
318
|
+
--zen-sticky-fill: oklch(var(--card) / 0.6);
|
|
319
|
+
background-color: var(--zen-sticky-fill);
|
|
309
320
|
-webkit-backdrop-filter: blur(18px) saturate(1.4);
|
|
310
321
|
backdrop-filter: blur(18px) saturate(1.4);
|
|
311
322
|
}
|
|
312
323
|
html[data-zen-graphics='lite'] .zen__table-container[data-under-top] .zen__sticky-top,
|
|
313
324
|
html[data-zen-graphics='lite'] .zen__table-container[data-under-left] .zen__sticky-left,
|
|
314
325
|
html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__sticky-bottom {
|
|
326
|
+
--zen-sticky-fill: oklch(var(--card));
|
|
315
327
|
-webkit-backdrop-filter: none;
|
|
316
328
|
backdrop-filter: none;
|
|
317
|
-
background-color: oklch(var(--card));
|
|
318
329
|
}
|
|
319
330
|
@media (hover: none), (pointer: coarse), (prefers-reduced-transparency: reduce) {
|
|
320
331
|
.zen__table-container[data-under-top] .zen__sticky-top,
|
|
321
332
|
.zen__table-container[data-under-left] .zen__sticky-left,
|
|
322
333
|
.zen__table-container[data-under-bottom] .zen__sticky-bottom {
|
|
334
|
+
--zen-sticky-fill: oklch(var(--card));
|
|
323
335
|
-webkit-backdrop-filter: none;
|
|
324
336
|
backdrop-filter: none;
|
|
325
|
-
background-color: oklch(var(--card));
|
|
326
337
|
}
|
|
327
338
|
}
|
|
339
|
+
/*
|
|
340
|
+
* Rows passing under the header or footer fade into it over a short band, so
|
|
341
|
+
* the row cut by its edge reads as "more to scroll", not as clipped.
|
|
342
|
+
*/
|
|
343
|
+
.zen__table-container[data-under-top] .zen__sticky-top::after,
|
|
344
|
+
.zen__table-container[data-under-bottom] .zen__sticky-bottom::before {
|
|
345
|
+
content: '';
|
|
346
|
+
position: absolute;
|
|
347
|
+
inset-inline: 0;
|
|
348
|
+
height: 1.75rem;
|
|
349
|
+
pointer-events: none;
|
|
350
|
+
}
|
|
351
|
+
.zen__table-container[data-under-top] .zen__sticky-top::after {
|
|
352
|
+
top: 100%;
|
|
353
|
+
background: linear-gradient(to bottom, var(--zen-sticky-fill), transparent);
|
|
354
|
+
}
|
|
355
|
+
.zen__table-container[data-under-bottom] .zen__sticky-bottom::before {
|
|
356
|
+
bottom: 100%;
|
|
357
|
+
background: linear-gradient(to top, var(--zen-sticky-fill), transparent);
|
|
358
|
+
}
|
|
328
359
|
|
|
329
360
|
/* ───────────────────────── Code ───────────────────────── */
|
|
330
361
|
|
|
@@ -348,6 +379,7 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
|
|
|
348
379
|
--sh-entity: oklch(0.5 0.12 200);
|
|
349
380
|
--sh-string: oklch(0.5 0.14 150);
|
|
350
381
|
--sh-keyword: oklch(0.5 0.2 330);
|
|
382
|
+
--sh-comment: oklch(var(--muted-foreground));
|
|
351
383
|
}
|
|
352
384
|
|
|
353
385
|
/* ───────────────────────── Backdrop: contours / dots + light ───────────────────────── */
|
|
@@ -456,7 +488,7 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
|
|
|
456
488
|
background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
|
|
457
489
|
box-shadow:
|
|
458
490
|
inset 0 0 0 1px oklch(var(--glow) / 0.35),
|
|
459
|
-
0 0 24px -4px oklch(var(--glow) / 0.6);
|
|
491
|
+
0 0 24px -4px oklch(var(--glow) / calc(0.6 * var(--glow-k)));
|
|
460
492
|
}
|
|
461
493
|
:has(> .zen__tab-bar[data-pending]) > [role='tab'][aria-selected='true'] {
|
|
462
494
|
/* The bar straddles the track's bottom border: 1px above its edge, 1px below. */
|
|
@@ -1108,7 +1140,11 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
|
|
|
1108
1140
|
}
|
|
1109
1141
|
}
|
|
1110
1142
|
|
|
1111
|
-
/*
|
|
1143
|
+
/*
|
|
1144
|
+
* Reduced motion: the OS setting, or opt in with html.reduce-motion. It reaches
|
|
1145
|
+
* every element with a zen__ class, so each part that moves (a meter's fill, a
|
|
1146
|
+
* toggle's thumb, a chevron) carries one of its own.
|
|
1147
|
+
*/
|
|
1112
1148
|
@media (prefers-reduced-motion: reduce) {
|
|
1113
1149
|
.zen-backdrop *,
|
|
1114
1150
|
.zen-backdrop *::before,
|
package/dist/toast/index.js
CHANGED
|
@@ -72,7 +72,7 @@ function E({ children: n, offset: r, viewportClassName: i }) {
|
|
|
72
72
|
onBlur: (e) => {
|
|
73
73
|
e.currentTarget.contains(e.relatedTarget) || z(!1);
|
|
74
74
|
},
|
|
75
|
-
className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "transition-[height] duration-300
|
|
75
|
+
className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "ease-out-soft transition-[height] duration-300", i),
|
|
76
76
|
style: {
|
|
77
77
|
height: Y,
|
|
78
78
|
...r && { "--zen-toast-offset": r }
|
|
@@ -117,14 +117,14 @@ var A = {
|
|
|
117
117
|
ring: "border-primary/30",
|
|
118
118
|
badge: "bg-primary/15 text-primary",
|
|
119
119
|
bar: "bg-primary",
|
|
120
|
-
glow: "shadow-[0_18px_50px_-18px_oklch(var(--glow)/0.55)]"
|
|
120
|
+
glow: "shadow-[0_18px_50px_-18px_oklch(var(--glow)/calc(0.55*var(--glow-k)))]"
|
|
121
121
|
},
|
|
122
122
|
error: {
|
|
123
123
|
icon: n,
|
|
124
124
|
ring: "border-destructive/40",
|
|
125
|
-
badge: "bg-destructive/
|
|
125
|
+
badge: "bg-destructive/10 text-destructive",
|
|
126
126
|
bar: "bg-destructive",
|
|
127
|
-
glow: "shadow-[0_18px_50px_-18px_oklch(var(--destructive)/0.55)]"
|
|
127
|
+
glow: "shadow-[0_18px_50px_-18px_oklch(var(--destructive)/calc(0.55*var(--glow-k)))]"
|
|
128
128
|
},
|
|
129
129
|
info: {
|
|
130
130
|
icon: i,
|
|
@@ -197,7 +197,7 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
|
|
|
197
197
|
onPointerMove: k,
|
|
198
198
|
onPointerUp: j,
|
|
199
199
|
onPointerCancel: j,
|
|
200
|
-
className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400
|
|
200
|
+
className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", b && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", g.ring, g.glow),
|
|
201
201
|
style: {
|
|
202
202
|
zIndex: r,
|
|
203
203
|
height: n.height,
|
package/dist/toggle/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
|
5
5
|
function r(r) {
|
|
6
6
|
let { className: i, onChange: a, onKeyDown: o, disabled: s, ...c } = r;
|
|
7
7
|
return /* @__PURE__ */ n("label", {
|
|
8
|
-
className: e("zen__toggle
|
|
8
|
+
className: e("zen__toggle bg-tint/[0.06] relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] p-0.5", "has-focus-visible:ring-glow/50 transition-[background-color,box-shadow,border-color] duration-300 has-focus-visible:ring-2", "has-checked:border-glow/60 has-checked:bg-glow/40 has-checked:shadow-[0_0_18px_-2px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", "has-disabled:cursor-not-allowed has-disabled:opacity-50", i),
|
|
9
9
|
children: [/* @__PURE__ */ t("input", {
|
|
10
10
|
type: "checkbox",
|
|
11
11
|
role: "switch",
|
|
@@ -18,7 +18,7 @@ function r(r) {
|
|
|
18
18
|
...c
|
|
19
19
|
}), /* @__PURE__ */ t("span", {
|
|
20
20
|
"aria-hidden": !0,
|
|
21
|
-
className: e("size-[1.125rem] rounded-full bg-
|
|
21
|
+
className: e("size-[1.125rem] rounded-full bg-[var(--zen-thumb-off)] shadow-md", "zen__toggle-thumb ease-out-soft transition-[translate,background-color] duration-300", "peer-checked:translate-x-5 peer-checked:bg-white")
|
|
22
22
|
})]
|
|
23
23
|
});
|
|
24
24
|
}
|
package/dist/tree/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAY,MAAM,YAAY,CAAC;AAEjE,OAAO,EACH,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,SAAS,EAKZ,MAAM,OAAO,CAAC;AAEf,iCAAiC;AACjC,MAAM,WAAW,WAAW,CAAC,CAAC;IAC1B,IAAI,EAAE,CAAC,CAAC;IACR,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,eAAsB,EAAE,SAAc,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;;kBAoE3F,MAAM;sBA5DU,MAAM;kBA4JzB,MAAM;oBACJ,MAAM;IACtB,yCAAyC;;IAEzC,wBAAwB;;IAExB,kCAAkC;;;;oBAzCf,WAAW,CAAC,CAAC,CAAC;;;;;;;;qBAQpB,UAAU,CAAC,WAAW,CAAC;uBAGrB,aAAa,CAAC,WAAW,CAAC;;eAOK,aAAa;4BACvC;YAAE,aAAa,EAAE,MAAM,CAAA;SAAE;;uBAMvB,WAAW,CAAC,CAAC,CAAC;;;;;;EAsB3C;AAED,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpD,+FAA+F;AAC/F,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,+BAkBvG;AAED,qGAAqG;AACrG,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAQjF;AAED,6GAA6G;AAC7G,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,+BAU9F;AAED,4FAA4F;AAC5F,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/tree/index.js
CHANGED
|
@@ -148,7 +148,7 @@ function m({ expanded: t, onToggle: n, className: i, ...a }) {
|
|
|
148
148
|
"aria-expanded": t,
|
|
149
149
|
className: e("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground focus-visible:ring-ring/50 -ml-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", i),
|
|
150
150
|
...a,
|
|
151
|
-
children: /* @__PURE__ */ c(r, { className: e("size-4 transition-transform duration-200 ease-out", t && "rotate-90") })
|
|
151
|
+
children: /* @__PURE__ */ c(r, { className: e("zen__tree-chevron size-4 transition-transform duration-200 ease-out", t && "rotate-90") })
|
|
152
152
|
});
|
|
153
153
|
}
|
|
154
154
|
//#endregion
|
|
@@ -4,7 +4,7 @@ import t from "../icons/micro/chevron-down.js";
|
|
|
4
4
|
import { jsx as n } from "react/jsx-runtime";
|
|
5
5
|
//#region packages/utils/field-chevron.tsx
|
|
6
6
|
function r({ open: r, className: i }) {
|
|
7
|
-
return /* @__PURE__ */ n(t, { className: e("text-muted-foreground size-4 shrink-0 transition-transform duration-300", r && "rotate-180", i) });
|
|
7
|
+
return /* @__PURE__ */ n(t, { className: e("zen__field-chevron text-muted-foreground size-4 shrink-0 transition-transform duration-300", r && "rotate-180", i) });
|
|
8
8
|
}
|
|
9
9
|
//#endregion
|
|
10
10
|
export { r as FieldChevron };
|
package/dist/utils/styles.d.ts
CHANGED
|
@@ -1,20 +1,26 @@
|
|
|
1
1
|
/** Shared field look: faint glass, a hairline in the glow colour (white would grey it out) lit by the pointer, violet glow on focus. */
|
|
2
2
|
export declare const FIELD: string;
|
|
3
|
+
/**
|
|
4
|
+
* Placeholder text in a trigger that shows one (Select, MonthPicker, DatePicker…). Fields use the same
|
|
5
|
+
* colours through placeholder: in FIELD. --zen-placeholder dims it on dark glass, so a placeholder can't
|
|
6
|
+
* pass for a value there (about 4.9:1 against 16.6:1); light mode already separates them.
|
|
7
|
+
*/
|
|
8
|
+
export declare const PLACEHOLDER = "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]";
|
|
3
9
|
/** A picker's previous/next arrows (Calendar, MonthPicker). */
|
|
4
10
|
export declare const PICKER_NAV = "text-muted-foreground cursor-pointer hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2";
|
|
5
11
|
/** A month in a picker's month grid (Calendar, MonthPicker); add PICKER_MONTH_ON for the chosen one. */
|
|
6
12
|
export declare const PICKER_MONTH = "cursor-pointer rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35 focus-visible:ring-ring/50 focus-visible:ring-2 hover:bg-tint/[0.07]";
|
|
7
13
|
export declare const PICKER_MONTH_ON = "bg-primary text-primary-foreground hover:bg-primary";
|
|
8
14
|
/** Glow a trigger carries while its popup is open. */
|
|
9
|
-
export declare const TRIGGER_OPEN = "border-glow/60 [--glow-border-color:transparent] shadow-
|
|
15
|
+
export declare const TRIGGER_OPEN = "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus";
|
|
10
16
|
/** Trigger for popup fields (dropdown): a field that glows while open. */
|
|
11
17
|
export declare const TRIGGER: string;
|
|
12
18
|
/** Popup panel (popover, dropdown list): glass with a soft glow. */
|
|
13
|
-
export declare const POPUP = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/0.5)] outline-hidden";
|
|
19
|
+
export declare const POPUP = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/calc(0.5*var(--glow-k)))] outline-hidden";
|
|
14
20
|
/** Pills (and TabList variant="pills"): a glass track… */
|
|
15
21
|
export declare const PILL_TRACK = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1";
|
|
16
22
|
/** …a glowing pill that slides to the active item (its look is repeated in theme.css, for before it's measured)… */
|
|
17
|
-
export declare const PILL_INDICATOR = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/0.6)] transition-[translate,width] duration-500 ease-
|
|
23
|
+
export declare const PILL_INDICATOR = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/calc(0.6*var(--glow-k)))] transition-[translate,width] duration-500 ease-out-soft";
|
|
18
24
|
/** …and items that sit above it, lit when current (a link) or selected (a tab). Only their text colour
|
|
19
25
|
* transitions: the pill they wear before the indicator is measured (theme.css) must go at once. */
|
|
20
26
|
export declare const PILL: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../packages/utils/styles.ts"],"names":[],"mappings":"AAEA,wIAAwI;AACxI,eAAO,MAAM,KAAK,QAKmC,CAAC;AAEtD,+DAA+D;AAC/D,eAAO,MAAM,UAAU,+MACyL,CAAC;AAEjN,wGAAwG;AACxG,eAAO,MAAM,YAAY,iMACyK,CAAC;AACnM,eAAO,MAAM,eAAe,wDAAwD,CAAC;AAErF,sDAAsD;AACtD,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../packages/utils/styles.ts"],"names":[],"mappings":"AAEA,wIAAwI;AACxI,eAAO,MAAM,KAAK,QAKmC,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,WAAW,uEAAuE,CAAC;AAEhG,+DAA+D;AAC/D,eAAO,MAAM,UAAU,+MACyL,CAAC;AAEjN,wGAAwG;AACxG,eAAO,MAAM,YAAY,iMACyK,CAAC;AACnM,eAAO,MAAM,eAAe,wDAAwD,CAAC;AAErF,sDAAsD;AACtD,eAAO,MAAM,YAAY,uEAAuE,CAAC;AAEjG,0EAA0E;AAC1E,eAAO,MAAM,OAAO,QAA+F,CAAC;AAEpH,oEAAoE;AACpE,eAAO,MAAM,KAAK,sJACqI,CAAC;AAExJ,0DAA0D;AAC1D,eAAO,MAAM,UAAU,0GACoF,CAAC;AAE5G,oHAAoH;AACpH,eAAO,MAAM,cAAc,gOACsM,CAAC;AAElO;mGACmG;AACnG,eAAO,MAAM,IAAI,QAEkG,CAAC;AAEpH;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAK4B,CAAC"}
|
package/dist/utils/styles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cx as e } from "./cx.js";
|
|
3
3
|
//#region packages/utils/styles.ts
|
|
4
|
-
var t = "glow-border h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-muted-foreground hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-visible:border-glow/60 focus-visible:[--glow-border-color:transparent] focus-visible:bg-tint/[0.05] focus-visible:shadow-
|
|
4
|
+
var t = "glow-border h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))] hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-visible:border-glow/60 focus-visible:[--glow-border-color:transparent] focus-visible:bg-tint/[0.05] focus-visible:shadow-glow-focus focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", n = "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]", r = "text-muted-foreground cursor-pointer hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", i = "cursor-pointer rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35 focus-visible:ring-ring/50 focus-visible:ring-2 hover:bg-tint/[0.07]", a = "bg-primary text-primary-foreground hover:bg-primary", o = "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", s = e(t, "inline-flex cursor-pointer items-center justify-between gap-2 whitespace-nowrap"), c = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/calc(0.5*var(--glow-k)))] outline-hidden", l = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1", u = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/calc(0.6*var(--glow-k)))] transition-[translate,width] duration-500 ease-out-soft", d = "relative z-10 cursor-pointer disabled:cursor-not-allowed rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap outline-hidden transition-[color] duration-300 select-none focus-visible:ring-2 focus-visible:ring-ring/40 text-muted-foreground hover:text-foreground aria-[current=page]:text-foreground aria-selected:text-foreground", f = "glow-border flex w-full items-center gap-1.5 h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))] hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-within:border-glow/60 focus-within:[--glow-border-color:transparent] focus-within:bg-tint/[0.05] focus-within:shadow-glow-focus focus-within:outline-hidden disabled:cursor-not-allowed disabled:opacity-50";
|
|
5
5
|
//#endregion
|
|
6
|
-
export { t as FIELD,
|
|
6
|
+
export { t as FIELD, f as FIELD_WITHIN, i as PICKER_MONTH, a as PICKER_MONTH_ON, r as PICKER_NAV, d as PILL, u as PILL_INDICATOR, l as PILL_TRACK, n as PLACEHOLDER, c as POPUP, s as TRIGGER, o as TRIGGER_OPEN };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../packages/utils/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW,iDAAkD,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChC,6DAA6D;IAC7D,UAAU,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC5C;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcjB,CAAC;AACJ,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEtD,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,aAQ3B,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,GAAG,aAAa,CAG7E;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CACrB,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,CAAC,GAClE,aAAa,CAEf;AAQD,qFAAqF;AACrF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,GAAE,UAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../packages/utils/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW,iDAAkD,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChC,6DAA6D;IAC7D,UAAU,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC5C;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcjB,CAAC;AACJ,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEtD,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,aAQ3B,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,GAAG,aAAa,CAG7E;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CACrB,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,CAAC,GAClE,aAAa,CAEf;AAQD,qFAAqF;AACrF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,GAAE,UAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyEvG;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,aAAa,EACpB,EAAE,UAAmB,EAAE,MAAM,EAAE,GAAE;IAAE,UAAU,CAAC,EAAE,UAAU,CAAC;IAAC,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACxF,IAAI,CAGN;AAED,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAGrD;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG,aAAa,CAkB1D;AAID,sDAAsD;AACtD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAa1E;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAO1D"}
|
package/dist/utils/theme.js
CHANGED
|
@@ -92,7 +92,10 @@ function c(e, t = "dark") {
|
|
|
92
92
|
off: 0,
|
|
93
93
|
subtle: .55,
|
|
94
94
|
visible: 1
|
|
95
|
-
}[e.topography]) }
|
|
95
|
+
}[e.topography]) }, d = (t) => ({
|
|
96
|
+
"glow-strength": String(t[e.glow]),
|
|
97
|
+
"glow-k": `calc(var(--glow-strength) / ${t.soft})`
|
|
98
|
+
});
|
|
96
99
|
return t === "light" ? {
|
|
97
100
|
background: l(i ? .995 : .985, .4),
|
|
98
101
|
foreground: o(i ? .16 : .21, .02, n),
|
|
@@ -116,11 +119,11 @@ function c(e, t = "dark") {
|
|
|
116
119
|
glow: o(.62, c ? .02 : Math.min(.2, r * 1.4), n),
|
|
117
120
|
"glow-2": o(.65, c ? .02 : r * 1.05, n + 30),
|
|
118
121
|
tint: o(.21, .02, n),
|
|
119
|
-
|
|
122
|
+
...d({
|
|
120
123
|
off: 0,
|
|
121
124
|
soft: .4,
|
|
122
125
|
bright: .8
|
|
123
|
-
}
|
|
126
|
+
}),
|
|
124
127
|
...u
|
|
125
128
|
} : {
|
|
126
129
|
background: l(i ? .13 : .155),
|
|
@@ -141,15 +144,15 @@ function c(e, t = "dark") {
|
|
|
141
144
|
"accent-foreground": o(.88, r * .5, n),
|
|
142
145
|
ring: o(.72, r, n),
|
|
143
146
|
destructive: o(.64, .2, 25),
|
|
144
|
-
"destructive-foreground": o(.
|
|
147
|
+
"destructive-foreground": o(.13, .02, 25),
|
|
145
148
|
glow: o(.7, c ? .02 : r, n),
|
|
146
149
|
"glow-2": o(.72, c ? .02 : r * .75, n + 30),
|
|
147
150
|
tint: o(1, 0, 0),
|
|
148
|
-
|
|
151
|
+
...d({
|
|
149
152
|
off: 0,
|
|
150
153
|
soft: .55,
|
|
151
154
|
bright: 1
|
|
152
|
-
}
|
|
155
|
+
}),
|
|
153
156
|
...u
|
|
154
157
|
};
|
|
155
158
|
}
|
package/dist/variables.css
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
--accent: 0.3 0.046 295;
|
|
28
28
|
--accent-foreground: 0.88 0.065 295;
|
|
29
29
|
--destructive: 0.64 0.2 25;
|
|
30
|
-
--destructive-foreground: 0.
|
|
30
|
+
--destructive-foreground: 0.13 0.02 25;
|
|
31
31
|
|
|
32
32
|
--border: 0.28 0.021 295;
|
|
33
33
|
--input: 0.28 0.021 295;
|
|
@@ -37,12 +37,27 @@
|
|
|
37
37
|
--glow: 0.7 0.13 295;
|
|
38
38
|
--glow-2: 0.72 0.098 325; /* analogous, a little further round the wheel */
|
|
39
39
|
--glow-strength: 0.55; /* 0 turns every glow off */
|
|
40
|
+
/*
|
|
41
|
+
* Component halos (a checked box, a primary button, a focused field) are
|
|
42
|
+
* tuned at the default strength; their alphas are scaled by this, so the
|
|
43
|
+
* default looks as designed and 0 turns them off too.
|
|
44
|
+
*/
|
|
45
|
+
--glow-k: calc(var(--glow-strength) / 0.55);
|
|
40
46
|
|
|
41
47
|
/*
|
|
42
48
|
* Ink for translucent overlays (hairlines, glass fills, hover tints), used as
|
|
43
49
|
* oklch(var(--tint) / alpha): white on dark, deep violet-grey on light.
|
|
44
50
|
*/
|
|
45
51
|
--tint: 1 0 0;
|
|
52
|
+
/*
|
|
53
|
+
* Contrast floors for neutral parts, per theme (internal: no utilities of their own).
|
|
54
|
+
* Edges of unchecked checkboxes, radios and switches reach 3:1 against a card;
|
|
55
|
+
* placeholders reach 4.5:1 while staying clearly dimmer than a typed value.
|
|
56
|
+
*/
|
|
57
|
+
--zen-control-edge: 0.35;
|
|
58
|
+
--zen-control-edge-hover: 0.5;
|
|
59
|
+
--zen-placeholder: 0.8;
|
|
60
|
+
--zen-thumb-off: oklch(1 0 0 / 0.7);
|
|
46
61
|
--glass-shadow: 0 10px 40px -12px hsl(0 0% 0% / 0.6);
|
|
47
62
|
--popup-shadow: 0 20px 60px -20px hsl(0 0% 0% / 0.8);
|
|
48
63
|
--toast-shadow: 0 18px 50px -20px oklch(0 0 0 / 0.8);
|
|
@@ -93,8 +108,14 @@
|
|
|
93
108
|
--glow: 0.62 0.182 295;
|
|
94
109
|
--glow-2: 0.65 0.137 325;
|
|
95
110
|
--glow-strength: 0.4;
|
|
111
|
+
--glow-k: calc(var(--glow-strength) / 0.4);
|
|
96
112
|
|
|
97
113
|
--tint: 0.21 0.02 295;
|
|
114
|
+
--zen-control-edge: 0.5;
|
|
115
|
+
--zen-control-edge-hover: 0.65;
|
|
116
|
+
--zen-placeholder: 1;
|
|
117
|
+
/* A white thumb is lost on the pale track. */
|
|
118
|
+
--zen-thumb-off: oklch(var(--tint) / 0.5);
|
|
98
119
|
--glass-shadow: 0 10px 30px -14px oklch(0.3 0.05 295 / 0.25);
|
|
99
120
|
--popup-shadow: 0 20px 50px -20px oklch(0.3 0.05 295 / 0.35);
|
|
100
121
|
--toast-shadow: 0 18px 50px -20px oklch(0.3 0.05 295 / 0.35);
|