@rinzai/zen 0.10.3 → 0.13.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 +38 -8
- package/dist/accordion/index.d.ts +41 -0
- package/dist/accordion/index.d.ts.map +1 -0
- package/dist/accordion/index.js +81 -0
- package/dist/animated-number/index.d.ts +3 -2
- package/dist/animated-number/index.d.ts.map +1 -1
- package/dist/animated-number/index.js +40 -38
- package/dist/avatar/index.d.ts +8 -3
- package/dist/avatar/index.d.ts.map +1 -1
- package/dist/avatar/index.js +29 -21
- package/dist/backdrop/index.d.ts +4 -4
- package/dist/backdrop/index.d.ts.map +1 -1
- package/dist/backdrop/index.js +41 -39
- package/dist/badge/index.d.ts +4 -2
- package/dist/badge/index.d.ts.map +1 -1
- package/dist/badge/index.js +20 -11
- package/dist/base.css +4 -0
- package/dist/breadcrumbs/index.d.ts +1 -1
- package/dist/breadcrumbs/index.d.ts.map +1 -1
- package/dist/breadcrumbs/index.js +25 -24
- package/dist/button/index.d.ts +3 -3
- package/dist/button/index.d.ts.map +1 -1
- package/dist/button/index.js +16 -11
- package/dist/button-group/index.d.ts +13 -0
- package/dist/button-group/index.d.ts.map +1 -0
- package/dist/button-group/index.js +14 -0
- package/dist/calendar/index.d.ts +15 -8
- package/dist/calendar/index.d.ts.map +1 -1
- package/dist/calendar/index.js +97 -91
- package/dist/calendar-heatmap/index.d.ts +7 -5
- package/dist/calendar-heatmap/index.d.ts.map +1 -1
- package/dist/calendar-heatmap/index.js +32 -30
- package/dist/canvas/geometry.d.ts +51 -0
- package/dist/canvas/geometry.d.ts.map +1 -0
- package/dist/canvas/geometry.js +90 -0
- package/dist/canvas/index.d.ts +59 -0
- package/dist/canvas/index.d.ts.map +1 -0
- package/dist/canvas/index.js +305 -0
- package/dist/carousel/index.d.ts +27 -0
- package/dist/carousel/index.d.ts.map +1 -0
- package/dist/carousel/index.js +162 -0
- package/dist/chart/index.d.ts +5 -4
- package/dist/chart/index.d.ts.map +1 -1
- package/dist/chart/index.js +137 -135
- package/dist/chart/palette.js +0 -1
- package/dist/checkbox/index.d.ts +3 -3
- package/dist/checkbox/index.d.ts.map +1 -1
- package/dist/checkbox/index.js +33 -30
- package/dist/chip/index.js +1 -1
- package/dist/code-block/index.d.ts.map +1 -1
- package/dist/code-block/index.js +27 -32
- package/dist/code-input/index.d.ts.map +1 -1
- package/dist/code-input/index.js +30 -24
- package/dist/collapse/index.d.ts +4 -3
- package/dist/collapse/index.d.ts.map +1 -1
- package/dist/collapse/index.js +42 -39
- package/dist/color-picker/index.d.ts +43 -0
- package/dist/color-picker/index.d.ts.map +1 -0
- package/dist/color-picker/index.js +221 -0
- package/dist/combobox/index.d.ts +14 -6
- package/dist/combobox/index.d.ts.map +1 -1
- package/dist/combobox/index.js +151 -139
- package/dist/command-palette/index.d.ts +4 -3
- package/dist/command-palette/index.d.ts.map +1 -1
- package/dist/command-palette/index.js +60 -57
- package/dist/confirm-dialog/index.d.ts +6 -7
- package/dist/confirm-dialog/index.d.ts.map +1 -1
- package/dist/confirm-dialog/index.js +20 -16
- package/dist/date-picker/index.d.ts +23 -14
- package/dist/date-picker/index.d.ts.map +1 -1
- package/dist/date-picker/index.js +109 -93
- package/dist/dialog/index.d.ts +3 -4
- package/dist/dialog/index.d.ts.map +1 -1
- package/dist/dialog/index.js +58 -55
- package/dist/disclosure/index.d.ts +8 -0
- package/dist/disclosure/index.d.ts.map +1 -1
- package/dist/disclosure/index.js +31 -32
- package/dist/editable-cell/index.d.ts +4 -5
- package/dist/editable-cell/index.d.ts.map +1 -1
- package/dist/editable-cell/index.js +23 -22
- package/dist/field/index.d.ts +8 -8
- package/dist/field/index.d.ts.map +1 -1
- package/dist/field/index.js +20 -18
- package/dist/filter-bar/index.d.ts +2 -2
- package/dist/filter-bar/index.d.ts.map +1 -1
- package/dist/filter-bar/index.js +38 -36
- package/dist/header/index.d.ts +1 -1
- package/dist/header/index.d.ts.map +1 -1
- package/dist/header/index.js +13 -11
- package/dist/hover-card/index.d.ts +32 -0
- package/dist/hover-card/index.d.ts.map +1 -0
- package/dist/hover-card/index.js +84 -0
- package/dist/icon-picker/index.d.ts +16 -5
- package/dist/icon-picker/index.d.ts.map +1 -1
- package/dist/icon-picker/index.js +42 -47
- package/dist/icons/micro/plus.d.ts +3 -0
- package/dist/icons/micro/plus.d.ts.map +1 -0
- package/dist/icons/micro/plus.js +17 -0
- package/dist/index.d.ts +41 -24
- package/dist/index.d.ts.map +1 -1
- package/dist/input/index.d.ts +5 -1
- package/dist/input/index.d.ts.map +1 -1
- package/dist/input/index.js +10 -10
- package/dist/input-group/index.d.ts +4 -1
- package/dist/input-group/index.d.ts.map +1 -1
- package/dist/input-group/index.js +17 -17
- package/dist/keypad/index.d.ts +9 -7
- package/dist/keypad/index.d.ts.map +1 -1
- package/dist/keypad/index.js +22 -19
- package/dist/lib.js +112 -93
- package/dist/load-more/index.d.ts +4 -2
- package/dist/load-more/index.d.ts.map +1 -1
- package/dist/load-more/index.js +26 -23
- package/dist/locale-provider/index.d.ts +23 -0
- package/dist/locale-provider/index.d.ts.map +1 -0
- package/dist/locale-provider/index.js +35 -0
- package/dist/menu/index.d.ts +62 -9
- package/dist/menu/index.d.ts.map +1 -1
- package/dist/menu/index.js +371 -128
- package/dist/meter/index.d.ts +2 -2
- package/dist/meter/index.d.ts.map +1 -1
- package/dist/meter/index.js +4 -4
- package/dist/money-input/index.d.ts +20 -10
- package/dist/money-input/index.d.ts.map +1 -1
- package/dist/money-input/index.js +199 -190
- package/dist/month-picker/index.d.ts +17 -10
- package/dist/month-picker/index.d.ts.map +1 -1
- package/dist/month-picker/index.js +97 -86
- package/dist/navigation-menu/index.d.ts +42 -0
- package/dist/navigation-menu/index.d.ts.map +1 -0
- package/dist/navigation-menu/index.js +144 -0
- package/dist/number-field/index.d.ts +34 -0
- package/dist/number-field/index.d.ts.map +1 -0
- package/dist/number-field/index.js +119 -0
- package/dist/page-header/index.d.ts +4 -3
- package/dist/page-header/index.d.ts.map +1 -1
- package/dist/page-header/index.js +2 -1
- package/dist/pagination/index.d.ts +1 -1
- package/dist/pagination/index.d.ts.map +1 -1
- package/dist/pagination/index.js +35 -33
- package/dist/progress-ring/index.d.ts +4 -3
- package/dist/progress-ring/index.d.ts.map +1 -1
- package/dist/progress-ring/index.js +11 -10
- package/dist/radio-cards/index.d.ts +9 -5
- package/dist/radio-cards/index.d.ts.map +1 -1
- package/dist/radio-cards/index.js +26 -24
- package/dist/radio-group/index.d.ts +9 -8
- package/dist/radio-group/index.d.ts.map +1 -1
- package/dist/radio-group/index.js +35 -34
- package/dist/range-slider/index.d.ts +10 -4
- package/dist/range-slider/index.d.ts.map +1 -1
- package/dist/range-slider/index.js +43 -31
- package/dist/repeat-picker/index.d.ts +13 -6
- package/dist/repeat-picker/index.d.ts.map +1 -1
- package/dist/repeat-picker/index.js +74 -62
- package/dist/resizable/index.d.ts +29 -0
- package/dist/resizable/index.d.ts.map +1 -0
- package/dist/resizable/index.js +135 -0
- package/dist/segmented/index.d.ts +8 -5
- package/dist/segmented/index.d.ts.map +1 -1
- package/dist/segmented/index.js +36 -34
- package/dist/select/index.d.ts +9 -3
- package/dist/select/index.d.ts.map +1 -1
- package/dist/select/index.js +94 -91
- package/dist/separator/index.d.ts +14 -0
- package/dist/separator/index.d.ts.map +1 -0
- package/dist/separator/index.js +15 -0
- package/dist/side-nav/index.js +1 -1
- package/dist/skeleton/index.d.ts +4 -4
- package/dist/skeleton/index.d.ts.map +1 -1
- package/dist/skeleton/index.js +4 -3
- package/dist/slider/index.d.ts +6 -3
- package/dist/slider/index.d.ts.map +1 -1
- package/dist/slider/index.js +29 -23
- package/dist/sortable/index.d.ts +10 -20
- package/dist/sortable/index.d.ts.map +1 -1
- package/dist/sortable/index.js +72 -134
- package/dist/sortable/shared.d.ts +56 -0
- package/dist/sortable/shared.d.ts.map +1 -0
- package/dist/sortable/shared.js +104 -0
- package/dist/sortable/tree-model.d.ts +46 -0
- package/dist/sortable/tree-model.d.ts.map +1 -0
- package/dist/sortable/tree-model.js +87 -0
- package/dist/sortable/tree.d.ts +31 -0
- package/dist/sortable/tree.d.ts.map +1 -0
- package/dist/sortable/tree.js +150 -0
- package/dist/sparkline/index.d.ts +1 -1
- package/dist/sparkline/index.d.ts.map +1 -1
- package/dist/sparkline/index.js +26 -25
- package/dist/spinner/index.d.ts +4 -3
- package/dist/spinner/index.d.ts.map +1 -1
- package/dist/spinner/index.js +2 -1
- package/dist/status-pill/index.d.ts.map +1 -1
- package/dist/status-pill/index.js +1 -1
- package/dist/stepper/index.d.ts +1 -1
- package/dist/stepper/index.d.ts.map +1 -1
- package/dist/stepper/index.js +31 -30
- package/dist/tab-bar/index.js +1 -1
- package/dist/table/index.d.ts +5 -5
- package/dist/table/index.d.ts.map +1 -1
- package/dist/table/index.js +66 -64
- package/dist/table/selection.d.ts +2 -2
- package/dist/table/selection.d.ts.map +1 -1
- package/dist/table/selection.js +41 -38
- package/dist/table/swipe.d.ts +1 -1
- package/dist/table/swipe.d.ts.map +1 -1
- package/dist/table/swipe.js +1 -1
- package/dist/table-of-contents/index.d.ts +4 -2
- package/dist/table-of-contents/index.d.ts.map +1 -1
- package/dist/table-of-contents/index.js +27 -25
- package/dist/tabs/index.d.ts.map +1 -1
- package/dist/tabs/index.js +90 -88
- package/dist/tag-input/index.d.ts +3 -1
- package/dist/tag-input/index.d.ts.map +1 -1
- package/dist/tag-input/index.js +61 -52
- package/dist/textarea/index.js +4 -4
- package/dist/theme-toggle/index.d.ts +9 -8
- package/dist/theme-toggle/index.d.ts.map +1 -1
- package/dist/theme-toggle/index.js +30 -28
- package/dist/theme.css +90 -12
- package/dist/time-field/index.d.ts +31 -0
- package/dist/time-field/index.d.ts.map +1 -0
- package/dist/time-field/index.js +175 -0
- package/dist/timeline/index.js +1 -1
- package/dist/toast/index.d.ts +1 -1
- package/dist/toast/index.d.ts.map +1 -1
- package/dist/toast/index.js +127 -125
- package/dist/toggle/index.d.ts +2 -2
- package/dist/toggle/index.d.ts.map +1 -1
- package/dist/toggle/index.js +8 -6
- package/dist/toggle-group/index.d.ts +35 -0
- package/dist/toggle-group/index.d.ts.map +1 -0
- package/dist/toggle-group/index.js +53 -0
- package/dist/toolbar/index.d.ts +19 -0
- package/dist/toolbar/index.d.ts.map +1 -0
- package/dist/toolbar/index.js +36 -0
- package/dist/tooltip/index.d.ts.map +1 -1
- package/dist/tooltip/index.js +40 -74
- package/dist/tree/index.d.ts.map +1 -1
- package/dist/tree/index.js +105 -102
- package/dist/trend/index.d.ts +2 -2
- package/dist/trend/index.d.ts.map +1 -1
- package/dist/trend/index.js +20 -19
- package/dist/utils/color.d.ts +35 -0
- package/dist/utils/color.d.ts.map +1 -0
- package/dist/utils/color.js +65 -0
- package/dist/utils/cva.js +0 -1
- package/dist/utils/cx.js +0 -1
- package/dist/utils/date.d.ts +6 -0
- package/dist/utils/date.d.ts.map +1 -1
- package/dist/utils/date.js +1 -2
- package/dist/utils/direction.d.ts +7 -0
- package/dist/utils/direction.d.ts.map +1 -0
- package/dist/utils/direction.js +6 -0
- package/dist/utils/form-value.d.ts +15 -0
- package/dist/utils/form-value.d.ts.map +1 -0
- package/dist/utils/form-value.js +29 -0
- package/dist/utils/fx.js +0 -1
- package/dist/utils/merge.js +0 -1
- package/dist/utils/messages.d.ts +137 -0
- package/dist/utils/messages.d.ts.map +1 -0
- package/dist/utils/messages.js +133 -0
- package/dist/utils/money.js +0 -1
- package/dist/utils/month.js +0 -1
- package/dist/utils/motion.js +0 -1
- package/dist/utils/refs.d.ts +6 -0
- package/dist/utils/refs.d.ts.map +1 -0
- package/dist/utils/refs.js +13 -0
- package/dist/utils/repeat.d.ts +3 -1
- package/dist/utils/repeat.d.ts.map +1 -1
- package/dist/utils/repeat.js +28 -25
- package/dist/utils/roving.d.ts +17 -0
- package/dist/utils/roving.d.ts.map +1 -0
- package/dist/utils/roving.js +35 -0
- package/dist/utils/section-link.js +0 -1
- package/dist/utils/slot.d.ts.map +1 -1
- package/dist/utils/slot.js +7 -11
- package/dist/utils/status-icons.js +7 -7
- package/dist/utils/styles.d.ts +9 -2
- package/dist/utils/styles.d.ts.map +1 -1
- package/dist/utils/styles.js +6 -3
- package/dist/utils/theme-wave.d.ts.map +1 -1
- package/dist/utils/theme-wave.js +70 -70
- package/dist/utils/theme.d.ts.map +1 -1
- package/dist/utils/theme.js +56 -60
- package/dist/utils/useAnchoredPopup.d.ts +7 -4
- package/dist/utils/useAnchoredPopup.d.ts.map +1 -1
- package/dist/utils/useAnchoredPopup.js +18 -11
- package/dist/utils/useControllable.d.ts +9 -0
- package/dist/utils/useControllable.d.ts.map +1 -0
- package/dist/utils/useControllable.js +15 -0
- package/dist/utils/useCopyToClipboard.d.ts +13 -0
- package/dist/utils/useCopyToClipboard.d.ts.map +1 -0
- package/dist/utils/useCopyToClipboard.js +26 -0
- package/dist/utils/useHoverPopup.d.ts +39 -0
- package/dist/utils/useHoverPopup.d.ts.map +1 -0
- package/dist/utils/useHoverPopup.js +64 -0
- package/dist/zen.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/pagination/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/pagination/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAwC,EACxC,QAAY,EACZ,SAAS,EACT,YAAY,EAAE,SAAS,GAC1B,EAAE,eAAe,sCAsDjB;AAED,mHAAmH;AACnH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CAavF;AAED,MAAM,WAAW,eAAe;IAC5B,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,uCAAuC;IACvC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACrE,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}
|
package/dist/pagination/index.js
CHANGED
|
@@ -1,55 +1,57 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cx as e } from "../utils/cx.js";
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
3
|
+
import { useLocale as t, useMessages as n } from "../locale-provider/index.js";
|
|
4
|
+
import { buttonVariants as r } from "../button/index.js";
|
|
5
|
+
import i from "../icons/chevron-left.js";
|
|
6
|
+
import a from "../icons/chevron-right.js";
|
|
7
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
7
8
|
//#region packages/pagination/index.tsx
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
function c({ page: c, count: u, onPageChange: d, href: f, renderLink: p = (e) => /* @__PURE__ */ o("a", { ...e }), siblings: m = 1, className: h, "aria-label": g }) {
|
|
10
|
+
let _ = n(), v = new Intl.NumberFormat(t()), y = g ?? _.pages;
|
|
11
|
+
if (u < 2) return null;
|
|
12
|
+
let b = (t, n, i) => {
|
|
13
|
+
let a = t < 1 || t > u, s = e(r({
|
|
12
14
|
variant: "ghost",
|
|
13
15
|
size: "icon"
|
|
14
|
-
}), "min-w-9 w-auto px-2 tabular-nums",
|
|
15
|
-
"aria-label":
|
|
16
|
-
"aria-current":
|
|
16
|
+
}), "min-w-9 w-auto px-2 tabular-nums", i.current && "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.3),0_0_18px_-6px_oklch(var(--glow)/calc(0.6*var(--glow-k)))] hover:bg-primary/20"), c = {
|
|
17
|
+
"aria-label": i["aria-label"],
|
|
18
|
+
"aria-current": i.current ? "page" : void 0,
|
|
17
19
|
className: s
|
|
18
20
|
};
|
|
19
|
-
return
|
|
20
|
-
...
|
|
21
|
-
href:
|
|
22
|
-
onClick:
|
|
23
|
-
children:
|
|
24
|
-
},
|
|
21
|
+
return f && !a ? p({
|
|
22
|
+
...c,
|
|
23
|
+
href: f(t),
|
|
24
|
+
onClick: d && (() => d(t)),
|
|
25
|
+
children: n
|
|
26
|
+
}, t) : /* @__PURE__ */ o("button", {
|
|
25
27
|
type: "button",
|
|
26
|
-
...
|
|
27
|
-
disabled:
|
|
28
|
-
onClick: () => !
|
|
29
|
-
children:
|
|
28
|
+
...c,
|
|
29
|
+
disabled: a,
|
|
30
|
+
onClick: () => !i.current && d?.(t),
|
|
31
|
+
children: n
|
|
30
32
|
});
|
|
31
33
|
};
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
-
"aria-label":
|
|
34
|
-
className: e("zen__pagination",
|
|
35
|
-
children: /* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ o("nav", {
|
|
35
|
+
"aria-label": y,
|
|
36
|
+
className: e("zen__pagination", h),
|
|
37
|
+
children: /* @__PURE__ */ s("ul", {
|
|
36
38
|
className: "flex items-center gap-1",
|
|
37
39
|
children: [
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
|
|
40
|
+
/* @__PURE__ */ o("li", { children: b(c - 1, /* @__PURE__ */ o(i, { className: "size-4 rtl:-scale-x-100" }), { "aria-label": _.previousPage }) }),
|
|
41
|
+
l(c, u, m).map((e, t) => /* @__PURE__ */ o("li", { children: e === "gap" ? /* @__PURE__ */ o("span", {
|
|
40
42
|
"aria-hidden": !0,
|
|
41
43
|
className: "text-muted-foreground grid w-6 place-items-center",
|
|
42
44
|
children: "…"
|
|
43
|
-
}) :
|
|
44
|
-
"aria-label":
|
|
45
|
-
current: e ===
|
|
45
|
+
}) : b(e, v.format(e), {
|
|
46
|
+
"aria-label": _.page(e),
|
|
47
|
+
current: e === c
|
|
46
48
|
}) }, e === "gap" ? `gap${t}` : e)),
|
|
47
|
-
/* @__PURE__ */
|
|
49
|
+
/* @__PURE__ */ o("li", { children: b(c + 1, /* @__PURE__ */ o(a, { className: "size-4 rtl:-scale-x-100" }), { "aria-label": _.nextPage }) })
|
|
48
50
|
]
|
|
49
51
|
})
|
|
50
52
|
});
|
|
51
53
|
}
|
|
52
|
-
function
|
|
54
|
+
function l(e, t, n = 1) {
|
|
53
55
|
let r = /* @__PURE__ */ new Set([1, t]);
|
|
54
56
|
for (let i = e - n; i <= e + n; i++) i >= 1 && i <= t && r.add(i);
|
|
55
57
|
let i = [...r].sort((e, t) => e - t), a = [];
|
|
@@ -59,4 +61,4 @@ function s(e, t, n = 1) {
|
|
|
59
61
|
}), a;
|
|
60
62
|
}
|
|
61
63
|
//#endregion
|
|
62
|
-
export {
|
|
64
|
+
export { c as default, l as pageRange };
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ComponentProps, ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Circular progress, 0–1, with optional content in the middle. Reaching 1
|
|
4
4
|
* while shown sends out a ring of glow, once.
|
|
5
5
|
*/
|
|
6
|
-
export default function ProgressRing({ value, size, stroke, label, children, className }: ProgressRingProps): import('react').JSX.Element;
|
|
7
|
-
|
|
6
|
+
export default function ProgressRing({ value, size, stroke, label, children, className, ...rest }: ProgressRingProps): import('react').JSX.Element;
|
|
7
|
+
/** Other props (data-*, an id) go on the progressbar. */
|
|
8
|
+
export interface ProgressRingProps extends ComponentProps<'div'> {
|
|
8
9
|
/** Progress from 0 to 1; values outside are clamped. */
|
|
9
10
|
value: number;
|
|
10
11
|
size?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/progress-ring/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/progress-ring/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAK,EACL,IAAS,EACT,MAAU,EACV,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,iBAAiB,+BAsDnB;AAED,yDAAyD;AACzD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC5D,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -3,14 +3,15 @@ import { cx as e } from "../utils/cx.js";
|
|
|
3
3
|
import { useState as t } from "react";
|
|
4
4
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
5
5
|
//#region packages/progress-ring/index.tsx
|
|
6
|
-
function i({ value: i, size: a = 84, stroke: o = 7, label: s, children: c, className: l }) {
|
|
7
|
-
let
|
|
8
|
-
return
|
|
6
|
+
function i({ value: i, size: a = 84, stroke: o = 7, label: s, children: c, className: l, ...u }) {
|
|
7
|
+
let d = (a - o) / 2, f = 2 * Math.PI * d, p = Math.min(Math.max(i, 0), 1), [m, h] = t(p), [g, _] = t(0);
|
|
8
|
+
return p !== m && (h(p), m < 1 && p === 1 && _(g + 1)), /* @__PURE__ */ r("div", {
|
|
9
|
+
...u,
|
|
9
10
|
role: "progressbar",
|
|
10
11
|
"aria-label": s,
|
|
11
12
|
"aria-valuemin": 0,
|
|
12
13
|
"aria-valuemax": 100,
|
|
13
|
-
"aria-valuenow": Math.round(
|
|
14
|
+
"aria-valuenow": Math.round(p * 100),
|
|
14
15
|
className: e("zen__progress-ring relative grid shrink-0 place-items-center", l),
|
|
15
16
|
style: {
|
|
16
17
|
width: a,
|
|
@@ -26,27 +27,27 @@ function i({ value: i, size: a = 84, stroke: o = 7, label: s, children: c, class
|
|
|
26
27
|
children: [/* @__PURE__ */ n("circle", {
|
|
27
28
|
cx: a / 2,
|
|
28
29
|
cy: a / 2,
|
|
29
|
-
r:
|
|
30
|
+
r: d,
|
|
30
31
|
fill: "none",
|
|
31
32
|
strokeWidth: o,
|
|
32
33
|
className: "stroke-tint/[0.07]"
|
|
33
34
|
}), /* @__PURE__ */ n("circle", {
|
|
34
35
|
cx: a / 2,
|
|
35
36
|
cy: a / 2,
|
|
36
|
-
r:
|
|
37
|
+
r: d,
|
|
37
38
|
fill: "none",
|
|
38
39
|
strokeWidth: o,
|
|
39
40
|
strokeLinecap: "round",
|
|
40
|
-
strokeDasharray:
|
|
41
|
-
strokeDashoffset:
|
|
41
|
+
strokeDasharray: f,
|
|
42
|
+
strokeDashoffset: f * (1 - p),
|
|
42
43
|
className: "zen__progress-ring-arc stroke-primary [filter:drop-shadow(0_0_6px_oklch(var(--glow)/calc(0.45*var(--glow-k))))] transition-[stroke-dashoffset] duration-700 ease-out"
|
|
43
44
|
})]
|
|
44
45
|
}),
|
|
45
|
-
|
|
46
|
+
g > 0 && /* @__PURE__ */ n("span", {
|
|
46
47
|
"aria-hidden": !0,
|
|
47
48
|
className: "zen__ring-burst border-primary pointer-events-none absolute inset-0 rounded-full",
|
|
48
49
|
style: { borderWidth: o }
|
|
49
|
-
},
|
|
50
|
+
}, g),
|
|
50
51
|
/* @__PURE__ */ n("div", {
|
|
51
52
|
className: "absolute inset-0 grid place-items-center text-center",
|
|
52
53
|
children: c
|
|
@@ -1,21 +1,25 @@
|
|
|
1
|
-
import { CSSProperties, ReactNode } from 'react';
|
|
1
|
+
import { ComponentProps, CSSProperties, ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* A choice of one among a few cards, each showing what it picks (a palette, a
|
|
4
4
|
* plan). Native radio inputs underneath, so arrow keys and forms work as for any
|
|
5
5
|
* radio group. Lay the cards out with className (e.g. a grid); fill it with
|
|
6
6
|
* RadioCard. For short text options, use Segmented.
|
|
7
7
|
*/
|
|
8
|
-
export default function RadioCards<V extends string>({ label, value,
|
|
8
|
+
export default function RadioCards<V extends string>({ label, value: valueProp, defaultValue, onValueChange, name, className, children, ...rest }: RadioCardsProps<V>): import('react').JSX.Element;
|
|
9
9
|
/**
|
|
10
10
|
* One card: a native radio covering whatever you put inside, so the whole card
|
|
11
11
|
* is the click target. Outlined, lit when chosen; style it further with
|
|
12
12
|
* className and style (e.g. a background showing the choice).
|
|
13
13
|
*/
|
|
14
14
|
export declare function RadioCard({ value, disabled, className, style, children }: RadioCardProps): import('react').JSX.Element;
|
|
15
|
-
|
|
15
|
+
/** Other props (aria-*, data-*, an id) go on the cards' container, the radiogroup. */
|
|
16
|
+
export interface RadioCardsProps<V extends string> extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
|
|
16
17
|
label: string;
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
/** The chosen card, when you keep it. */
|
|
19
|
+
value?: V;
|
|
20
|
+
/** The first chosen card, when the group keeps its own. */
|
|
21
|
+
defaultValue?: V;
|
|
22
|
+
onValueChange?: (value: V) => void;
|
|
19
23
|
/** Form field name; defaults to a generated one. */
|
|
20
24
|
name?: string;
|
|
21
25
|
/** Classes for the cards' container: its layout (e.g. a grid). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-cards/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-cards/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,aAAa,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAUnG;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,eAAe,CAAC,CAAC,CAAC,+BAiBpB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAyBxF;AAED,sFAAsF;AACtF,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC/G,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB"}
|
|
@@ -1,48 +1,50 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cx as e } from "../utils/cx.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { useControllable as t } from "../utils/useControllable.js";
|
|
4
|
+
import { createContext as n, useContext as r, useId as i } from "react";
|
|
5
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
5
6
|
//#region packages/radio-cards/index.tsx
|
|
6
|
-
var
|
|
7
|
-
function
|
|
8
|
-
let
|
|
9
|
-
return /* @__PURE__ */
|
|
7
|
+
var s = n(null);
|
|
8
|
+
function c({ label: e, value: n, defaultValue: r, onValueChange: c, name: l, className: u, children: d, ...f }) {
|
|
9
|
+
let [p, m] = t(n, r, c), h = i();
|
|
10
|
+
return /* @__PURE__ */ o("div", {
|
|
10
11
|
className: "zen__radio-cards flex flex-col gap-2",
|
|
11
|
-
children: [/* @__PURE__ */
|
|
12
|
-
id:
|
|
12
|
+
children: [/* @__PURE__ */ a("span", {
|
|
13
|
+
id: h,
|
|
13
14
|
className: "text-sm font-medium",
|
|
14
15
|
children: e
|
|
15
|
-
}), /* @__PURE__ */
|
|
16
|
+
}), /* @__PURE__ */ a("div", {
|
|
16
17
|
role: "radiogroup",
|
|
17
|
-
"aria-labelledby":
|
|
18
|
-
className:
|
|
19
|
-
|
|
18
|
+
"aria-labelledby": h,
|
|
19
|
+
className: u,
|
|
20
|
+
...f,
|
|
21
|
+
children: /* @__PURE__ */ a(s.Provider, {
|
|
20
22
|
value: {
|
|
21
|
-
name:
|
|
22
|
-
value:
|
|
23
|
-
|
|
23
|
+
name: l ?? h,
|
|
24
|
+
value: p,
|
|
25
|
+
select: m
|
|
24
26
|
},
|
|
25
|
-
children:
|
|
27
|
+
children: d
|
|
26
28
|
})
|
|
27
29
|
})]
|
|
28
30
|
});
|
|
29
31
|
}
|
|
30
|
-
function
|
|
31
|
-
let u =
|
|
32
|
+
function l({ value: t, disabled: n, className: i, style: c, children: l }) {
|
|
33
|
+
let u = r(s);
|
|
32
34
|
if (!u) throw Error("<RadioCard> must be inside <RadioCards>");
|
|
33
|
-
return /* @__PURE__ */
|
|
35
|
+
return /* @__PURE__ */ o("label", {
|
|
34
36
|
style: c,
|
|
35
|
-
className: e("zen__radio-card border-tint/10 relative flex items-center gap-3 rounded-xl border p-2.5 text-
|
|
36
|
-
children: [/* @__PURE__ */
|
|
37
|
+
className: e("zen__radio-card border-tint/10 relative flex items-center gap-3 rounded-xl border p-2.5 text-start text-sm transition-[border-color,box-shadow] duration-200", "hover:has-enabled:border-tint/20 has-checked:border-primary/60 has-checked:shadow-[0_0_0_3px_oklch(var(--primary)/0.15)]", "has- has-focus-ring has-disabled:opacity-60", i),
|
|
38
|
+
children: [/* @__PURE__ */ a("input", {
|
|
37
39
|
type: "radio",
|
|
38
40
|
name: u.name,
|
|
39
41
|
value: t,
|
|
40
42
|
checked: u.value === t,
|
|
41
|
-
disabled:
|
|
42
|
-
onChange: () => u.
|
|
43
|
+
disabled: n,
|
|
44
|
+
onChange: () => u.select(t),
|
|
43
45
|
className: "absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-[inherit] opacity-0 disabled:cursor-not-allowed"
|
|
44
46
|
}), l]
|
|
45
47
|
});
|
|
46
48
|
}
|
|
47
49
|
//#endregion
|
|
48
|
-
export {
|
|
50
|
+
export { l as RadioCard, c as default };
|
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ComponentProps, ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Choose one of a list: native radios underneath, so arrow keys move and pick
|
|
4
4
|
* within the group, and forms work as usual. Fill it with Radio. For a few
|
|
5
5
|
* short options side by side use Segmented; for options that show themselves,
|
|
6
6
|
* RadioCards.
|
|
7
7
|
*/
|
|
8
|
-
export default function RadioGroup<V extends string>({ label, value,
|
|
8
|
+
export default function RadioGroup<V extends string>({ label, value: valueProp, defaultValue, onValueChange, name, disabled, orientation, className, children, ...rest }: RadioGroupProps<V>): import('react').JSX.Element;
|
|
9
9
|
/** One option: a round radio that fills with a glowing dot when chosen, its label, and an optional description. */
|
|
10
10
|
export declare function Radio({ value, disabled, description, className, children }: RadioProps): import('react').JSX.Element;
|
|
11
|
-
|
|
11
|
+
/** Other props (aria-*, data-*, an id) go on the options' container, the radiogroup. */
|
|
12
|
+
export interface RadioGroupProps<V extends string> extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
|
|
12
13
|
/** Shown above the options, naming the group. Without it, give the group an aria-label. */
|
|
13
14
|
label?: ReactNode;
|
|
14
|
-
/** The chosen option, or null for none yet. */
|
|
15
|
-
value
|
|
16
|
-
|
|
15
|
+
/** The chosen option when you keep it, or null for none yet. */
|
|
16
|
+
value?: V | null;
|
|
17
|
+
/** The first chosen option, when the group keeps its own. */
|
|
18
|
+
defaultValue?: V | null;
|
|
19
|
+
onValueChange?: (value: V) => void;
|
|
17
20
|
/** Form field name; defaults to a generated one. */
|
|
18
21
|
name?: string;
|
|
19
22
|
disabled?: boolean;
|
|
20
23
|
/** Options in a column (default) or wrapping in a row. */
|
|
21
24
|
orientation?: 'vertical' | 'horizontal';
|
|
22
|
-
'aria-label'?: string;
|
|
23
|
-
'aria-describedby'?: string;
|
|
24
25
|
/** Classes for the options' container. */
|
|
25
26
|
className?: string;
|
|
26
27
|
/** The Radios. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-group/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAqB,MAAM,OAAO,CAAC;AAWpF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,aAAa,EACb,IAAI,EACJ,QAAgB,EAChB,WAAwB,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,eAAe,CAAC,CAAC,CAAC,+BA8BpB;AAED,mHAAmH;AACnH,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAoCtF;AAED,wFAAwF;AACxF,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC/G,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gEAAgE;IAChE,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,QAAQ,EAAE,SAAS,CAAC;CACvB"}
|
|
@@ -1,63 +1,64 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cx as e } from "../utils/cx.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { useControllable as t } from "../utils/useControllable.js";
|
|
4
|
+
import { createContext as n, useContext as r, useId as i } from "react";
|
|
5
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
5
6
|
//#region packages/radio-group/index.tsx
|
|
6
|
-
var
|
|
7
|
-
function
|
|
8
|
-
let
|
|
9
|
-
return /* @__PURE__ */
|
|
7
|
+
var s = n(null);
|
|
8
|
+
function c({ label: n, value: r, defaultValue: c = null, onValueChange: l, name: u, disabled: d = !1, orientation: f = "vertical", className: p, children: m, ...h }) {
|
|
9
|
+
let [g, _] = t(r, c, l), v = i();
|
|
10
|
+
return /* @__PURE__ */ o("div", {
|
|
10
11
|
className: "zen__radio-group flex flex-col gap-2",
|
|
11
|
-
children: [
|
|
12
|
-
id:
|
|
12
|
+
children: [n && /* @__PURE__ */ a("span", {
|
|
13
|
+
id: v,
|
|
13
14
|
className: "text-sm font-medium",
|
|
14
|
-
children:
|
|
15
|
-
}), /* @__PURE__ */
|
|
15
|
+
children: n
|
|
16
|
+
}), /* @__PURE__ */ a("div", {
|
|
16
17
|
role: "radiogroup",
|
|
17
|
-
"aria-labelledby":
|
|
18
|
-
"aria-orientation":
|
|
19
|
-
"aria-disabled":
|
|
20
|
-
...
|
|
21
|
-
className: e("flex",
|
|
22
|
-
children: /* @__PURE__ */
|
|
18
|
+
"aria-labelledby": n ? v : void 0,
|
|
19
|
+
"aria-orientation": f,
|
|
20
|
+
"aria-disabled": d || void 0,
|
|
21
|
+
...h,
|
|
22
|
+
className: e("flex", f === "vertical" ? "flex-col gap-2.5" : "flex-wrap gap-x-5 gap-y-2", p),
|
|
23
|
+
children: /* @__PURE__ */ a(s.Provider, {
|
|
23
24
|
value: {
|
|
24
|
-
name:
|
|
25
|
-
value:
|
|
26
|
-
|
|
27
|
-
disabled:
|
|
25
|
+
name: u ?? v,
|
|
26
|
+
value: g,
|
|
27
|
+
select: _,
|
|
28
|
+
disabled: d
|
|
28
29
|
},
|
|
29
|
-
children:
|
|
30
|
+
children: m
|
|
30
31
|
})
|
|
31
32
|
})]
|
|
32
33
|
});
|
|
33
34
|
}
|
|
34
|
-
function
|
|
35
|
-
let u =
|
|
35
|
+
function l({ value: t, disabled: n, description: i, className: c, children: l }) {
|
|
36
|
+
let u = r(s);
|
|
36
37
|
if (!u) throw Error("<Radio> must be inside <RadioGroup>");
|
|
37
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ o("label", {
|
|
38
39
|
className: e("inline-flex cursor-pointer items-start gap-2.5 text-sm has-disabled:cursor-not-allowed has-disabled:opacity-60", c),
|
|
39
|
-
children: [/* @__PURE__ */
|
|
40
|
+
children: [/* @__PURE__ */ o("span", {
|
|
40
41
|
className: "relative mt-px inline-grid size-[1.125rem] shrink-0 place-items-center",
|
|
41
|
-
children: [/* @__PURE__ */
|
|
42
|
+
children: [/* @__PURE__ */ a("input", {
|
|
42
43
|
type: "radio",
|
|
43
44
|
name: u.name,
|
|
44
45
|
value: t,
|
|
45
46
|
checked: u.value === t,
|
|
46
|
-
disabled:
|
|
47
|
-
onChange: () => u.
|
|
48
|
-
className: e("peer bg-tint/[0.04] m-0 size-full cursor-pointer appearance-none rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] outline-hidden", "transition-[border-color,box-shadow] duration-200", "
|
|
49
|
-
}), /* @__PURE__ */
|
|
47
|
+
disabled: n || u.disabled,
|
|
48
|
+
onChange: () => u.select(t),
|
|
49
|
+
className: e("peer bg-tint/[0.04] m-0 size-full cursor-pointer appearance-none rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] outline-hidden", "transition-[border-color,box-shadow] duration-200", " focus-ring hover:enabled:border-[color:oklch(var(--tint)/var(--zen-control-edge-hover))]", "checked:border-primary checked:shadow-[0_0_14px_-3px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] disabled:cursor-not-allowed")
|
|
50
|
+
}), /* @__PURE__ */ a("span", {
|
|
50
51
|
"aria-hidden": !0,
|
|
51
52
|
className: "zen__radio-dot bg-primary pointer-events-none absolute size-2 scale-0 rounded-full shadow-[0_0_8px_oklch(var(--glow)/calc(0.9*var(--glow-k)))] transition-transform duration-200 ease-[cubic-bezier(0.3,1.6,0.5,1)] peer-checked:scale-100"
|
|
52
53
|
})]
|
|
53
|
-
}), /* @__PURE__ */
|
|
54
|
+
}), /* @__PURE__ */ o("span", {
|
|
54
55
|
className: "flex flex-col gap-0.5",
|
|
55
|
-
children: [l,
|
|
56
|
+
children: [l, i && /* @__PURE__ */ a("span", {
|
|
56
57
|
className: "text-muted-foreground text-xs",
|
|
57
|
-
children:
|
|
58
|
+
children: i
|
|
58
59
|
})]
|
|
59
60
|
})]
|
|
60
61
|
});
|
|
61
62
|
}
|
|
62
63
|
//#endregion
|
|
63
|
-
export {
|
|
64
|
+
export { l as Radio, c as default };
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
1
2
|
/**
|
|
2
3
|
* Two thumbs on one track, for a span such as an amount from $50 to $500:
|
|
3
4
|
* two native range inputs (keyboard, forms and screen readers work as on
|
|
4
5
|
* Slider), the span between them filled. The thumbs can meet but not cross.
|
|
5
6
|
*/
|
|
6
|
-
export default function RangeSlider({ value:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export default function RangeSlider({ value: valueProp, defaultValue, min, max, step, onValueChange, onValueCommit, label, thumbLabels: thumbLabelsProp, valueText, name, disabled, className, style, ...rest }: RangeSliderProps): import('react').JSX.Element;
|
|
8
|
+
/** Other props (aria-*, data-*, an id) go on the group around the thumbs. */
|
|
9
|
+
export interface RangeSliderProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
|
|
10
|
+
/** The span, low then high, when you keep it. */
|
|
11
|
+
value?: readonly [number, number];
|
|
12
|
+
/** The first span, when the slider keeps its own (default the whole range). */
|
|
13
|
+
defaultValue?: readonly [number, number];
|
|
14
|
+
/** Form field name: low and high are submitted under it, in that order. */
|
|
15
|
+
name?: string;
|
|
10
16
|
min?: number;
|
|
11
17
|
max?: number;
|
|
12
18
|
step?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/range-slider/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/range-slider/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAE9D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,gBAAgB,+BA6DlB;AAED,6EAA6E;AAC7E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC9F,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,+EAA+E;IAC/E,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAClD,2DAA2D;IAC3D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAClD,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -1,44 +1,56 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cx as e } from "../utils/cx.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { useControllable as t } from "../utils/useControllable.js";
|
|
4
|
+
import { useMessages as n } from "../locale-provider/index.js";
|
|
5
|
+
import { useFormReset as r } from "../utils/form-value.js";
|
|
6
|
+
import { THUMB as i } from "../slider/index.js";
|
|
7
|
+
import { useRef as a } from "react";
|
|
8
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
5
9
|
//#region packages/range-slider/index.tsx
|
|
6
|
-
function
|
|
7
|
-
let
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
function c({ value: c, defaultValue: l, min: u = 0, max: d = 100, step: f = 1, onValueChange: p, onValueCommit: m, label: h, thumbLabels: g, valueText: _, name: v, disabled: y, className: b, style: x, ...S }) {
|
|
11
|
+
let C = n(), w = g ?? [C.minimum, C.maximum], [[T, E], D, O] = t(c, l ?? [u, d], p), k = a(null);
|
|
12
|
+
r(k, O);
|
|
13
|
+
let A = (e) => d > u ? (e - u) / (d - u) * 100 : 0, j = [{
|
|
14
|
+
value: T,
|
|
15
|
+
set: (e) => [Math.min(e, E), E]
|
|
10
16
|
}, {
|
|
11
|
-
value:
|
|
12
|
-
set: (e) => [
|
|
17
|
+
value: E,
|
|
18
|
+
set: (e) => [T, Math.max(e, T)]
|
|
13
19
|
}];
|
|
14
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ s("div", {
|
|
15
21
|
role: "group",
|
|
16
|
-
"aria-label":
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
22
|
+
"aria-label": h,
|
|
23
|
+
...S,
|
|
24
|
+
className: e("zen__range-slider relative h-5 w-full", y && "opacity-50", b),
|
|
25
|
+
style: {
|
|
26
|
+
"--zen-thumb": "oklch(var(--primary))",
|
|
27
|
+
...x
|
|
28
|
+
},
|
|
29
|
+
children: [/* @__PURE__ */ o("div", {
|
|
20
30
|
"aria-hidden": !0,
|
|
21
|
-
className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 rounded-full",
|
|
22
|
-
style: { background: `linear-gradient(to
|
|
23
|
-
}),
|
|
31
|
+
className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 rounded-full [--zen-end:right] rtl:[--zen-end:left]",
|
|
32
|
+
style: { background: `linear-gradient(to var(--zen-end), oklch(var(--muted)) ${A(T)}%, oklch(var(--primary)) ${A(T)}% ${A(E)}%, oklch(var(--muted)) ${A(E)}%)` }
|
|
33
|
+
}), j.map((t, n) => /* @__PURE__ */ o("input", {
|
|
34
|
+
ref: n === 0 ? k : void 0,
|
|
24
35
|
type: "range",
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"aria-
|
|
36
|
+
name: v,
|
|
37
|
+
min: u,
|
|
38
|
+
max: d,
|
|
39
|
+
step: f,
|
|
40
|
+
value: t.value,
|
|
41
|
+
disabled: y,
|
|
42
|
+
"aria-label": w[n],
|
|
43
|
+
"aria-valuetext": _?.(t.value),
|
|
32
44
|
onChange: (e) => {
|
|
33
|
-
let [
|
|
34
|
-
|
|
45
|
+
let [n, r] = t.set(Number(e.target.value));
|
|
46
|
+
D([n, r]);
|
|
35
47
|
},
|
|
36
|
-
onPointerUp: () =>
|
|
37
|
-
onKeyUp: () =>
|
|
38
|
-
style: { zIndex:
|
|
39
|
-
className: e("pointer-events-none absolute inset-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-moz-range-track]:h-2.5 [&::-moz-range-track]:bg-transparent", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto",
|
|
40
|
-
},
|
|
48
|
+
onPointerUp: () => m?.([T, E]),
|
|
49
|
+
onKeyUp: () => m?.([T, E]),
|
|
50
|
+
style: { zIndex: n === 0 && T > (u + d) / 2 ? 2 : 1 },
|
|
51
|
+
className: e("pointer-events-none absolute inset-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-moz-range-track]:h-2.5 [&::-moz-range-track]:bg-transparent", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto", i)
|
|
52
|
+
}, n))]
|
|
41
53
|
});
|
|
42
54
|
}
|
|
43
55
|
//#endregion
|
|
44
|
-
export {
|
|
56
|
+
export { c as default };
|
|
@@ -1,16 +1,23 @@
|
|
|
1
1
|
import { DateString } from '../utils/date';
|
|
2
2
|
import { Repeat } from '../utils/repeat';
|
|
3
|
+
import { ComponentProps } from 'react';
|
|
3
4
|
/**
|
|
4
5
|
* How often something recurs, e.g. a bill: every n days, weeks, months or
|
|
5
6
|
* years, on chosen weekdays or a day of the month. Says what it means in
|
|
6
7
|
* words, and with a `start` date, the next few dates it falls on.
|
|
7
8
|
*/
|
|
8
|
-
export default function RepeatPicker({ value,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
export default function RepeatPicker({ value: valueProp, defaultValue, onValueChange, locale: localeProp, start, weekStartsOn: weekStartsOnProp, label: labelProp, name, className, ...rest }: RepeatPickerProps): import('react').JSX.Element;
|
|
10
|
+
/** Other props (aria-*, data-*, an id) go on the fieldset. */
|
|
11
|
+
export interface RepeatPickerProps extends Omit<ComponentProps<'fieldset'>, 'defaultValue' | 'children'> {
|
|
12
|
+
/** The rule, when you keep it. */
|
|
13
|
+
value?: Repeat;
|
|
14
|
+
/** The first rule, when the picker keeps its own. Every month by default. */
|
|
15
|
+
defaultValue?: Repeat;
|
|
16
|
+
onValueChange?: (value: Repeat) => void;
|
|
17
|
+
/** Form field name: the rule is submitted as JSON. */
|
|
18
|
+
name?: string;
|
|
19
|
+
/** For weekday and date names, and the week's first day. Defaults to the LocaleProvider's. */
|
|
20
|
+
locale?: string;
|
|
14
21
|
/** When it starts: its weekday and day of the month are the defaults, and the next dates are shown. */
|
|
15
22
|
start?: DateString;
|
|
16
23
|
/** 0 for Sunday … 6. Defaults to the locale's. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/repeat-picker/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/repeat-picker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,UAAU,EAAkD,MAAM,iBAAiB,CAAC;AAClG,OAAO,EAAmC,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAIjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAK,EAAE,SAAS,EAChB,YAA0C,EAC1C,aAAa,EACb,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACV,EAAE,iBAAiB,+BAkGnB;AAED,8DAA8D;AAC9D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACpG,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uGAAuG;IACvG,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|