@rinzai/zen 0.8.6 → 0.10.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/dist/animated-number/index.d.ts +6 -2
- package/dist/animated-number/index.d.ts.map +1 -1
- package/dist/animated-number/index.js +69 -17
- package/dist/breadcrumbs/index.d.ts +15 -0
- package/dist/breadcrumbs/index.d.ts.map +1 -0
- package/dist/breadcrumbs/index.js +39 -0
- package/dist/calendar-heatmap/index.d.ts +25 -0
- package/dist/calendar-heatmap/index.d.ts.map +1 -0
- package/dist/calendar-heatmap/index.js +48 -0
- package/dist/card/index.d.ts +3 -1
- package/dist/card/index.d.ts.map +1 -1
- package/dist/card/index.js +3 -2
- package/dist/chart/allocation.d.ts +30 -0
- package/dist/chart/allocation.d.ts.map +1 -0
- package/dist/chart/allocation.js +69 -0
- package/dist/chart/donut.d.ts.map +1 -1
- package/dist/chart/donut.js +72 -70
- package/dist/chart/index.d.ts +1 -0
- package/dist/chart/index.d.ts.map +1 -1
- package/dist/chart/index.js +182 -178
- package/dist/code-block/index.d.ts +1 -1
- package/dist/code-block/index.d.ts.map +1 -1
- package/dist/code-block/index.js +31 -22
- package/dist/code-input/index.d.ts +20 -0
- package/dist/code-input/index.d.ts.map +1 -0
- package/dist/code-input/index.js +44 -0
- package/dist/collapse/index.d.ts +3 -2
- package/dist/collapse/index.d.ts.map +1 -1
- package/dist/collapse/index.js +1 -1
- package/dist/command-palette/index.d.ts +37 -0
- package/dist/command-palette/index.d.ts.map +1 -0
- package/dist/command-palette/index.js +120 -0
- package/dist/date-picker/index.d.ts +10 -2
- package/dist/date-picker/index.d.ts.map +1 -1
- package/dist/date-picker/index.js +43 -21
- package/dist/dialog/index.d.ts +13 -3
- package/dist/dialog/index.d.ts.map +1 -1
- package/dist/dialog/index.js +84 -44
- package/dist/editable-cell/index.d.ts +2 -1
- package/dist/editable-cell/index.d.ts.map +1 -1
- package/dist/editable-cell/index.js +24 -17
- package/dist/empty-state/index.d.ts +14 -0
- package/dist/empty-state/index.d.ts.map +1 -0
- package/dist/empty-state/index.js +31 -0
- package/dist/file-drop/index.d.ts +18 -0
- package/dist/file-drop/index.d.ts.map +1 -0
- package/dist/file-drop/index.js +49 -0
- package/dist/filter-bar/index.d.ts +21 -0
- package/dist/filter-bar/index.d.ts.map +1 -0
- package/dist/filter-bar/index.js +90 -0
- package/dist/icon-picker/index.d.ts +38 -0
- package/dist/icon-picker/index.d.ts.map +1 -0
- package/dist/icon-picker/index.js +112 -0
- package/dist/icons/arrow-left.js +23 -0
- package/dist/icons/micro/arrow-trending-down.d.ts +3 -0
- package/dist/icons/micro/arrow-trending-down.d.ts.map +1 -0
- package/dist/icons/micro/arrow-trending-down.js +21 -0
- package/dist/icons/micro/arrow-trending-up.d.ts +3 -0
- package/dist/icons/micro/arrow-trending-up.d.ts.map +1 -0
- package/dist/icons/micro/arrow-trending-up.js +21 -0
- package/dist/index.d.ts +30 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/kbd/index.d.ts +4 -0
- package/dist/kbd/index.d.ts.map +1 -0
- package/dist/kbd/index.js +12 -0
- package/dist/keypad/index.d.ts +20 -0
- package/dist/keypad/index.d.ts.map +1 -0
- package/dist/keypad/index.js +42 -0
- package/dist/lib.js +92 -65
- package/dist/load-more/index.d.ts +19 -0
- package/dist/load-more/index.d.ts.map +1 -0
- package/dist/load-more/index.js +37 -0
- package/dist/menu/index.d.ts +22 -3
- package/dist/menu/index.d.ts.map +1 -1
- package/dist/menu/index.js +132 -45
- package/dist/meter/index.d.ts +3 -1
- package/dist/meter/index.d.ts.map +1 -1
- package/dist/meter/index.js +19 -14
- package/dist/money-input/index.d.ts +3 -3
- package/dist/page-transition/index.d.ts +10 -0
- package/dist/page-transition/index.d.ts.map +1 -0
- package/dist/page-transition/index.js +16 -0
- package/dist/pagination/index.d.ts +26 -0
- package/dist/pagination/index.d.ts.map +1 -0
- package/dist/pagination/index.js +62 -0
- package/dist/progress-ring/index.d.ts +4 -1
- package/dist/progress-ring/index.d.ts.map +1 -1
- package/dist/progress-ring/index.js +47 -38
- package/dist/range-slider/index.d.ts +26 -0
- package/dist/range-slider/index.d.ts.map +1 -0
- package/dist/range-slider/index.js +44 -0
- package/dist/repeat-picker/index.d.ts +22 -0
- package/dist/repeat-picker/index.d.ts.map +1 -0
- package/dist/repeat-picker/index.js +115 -0
- package/dist/skeleton/index.d.ts +12 -2
- package/dist/skeleton/index.d.ts.map +1 -1
- package/dist/skeleton/index.js +11 -5
- package/dist/slider/index.d.ts +2 -0
- package/dist/slider/index.d.ts.map +1 -1
- package/dist/slider/index.js +19 -18
- package/dist/sortable/index.d.ts +33 -0
- package/dist/sortable/index.d.ts.map +1 -0
- package/dist/sortable/index.js +147 -0
- package/dist/sparkline/index.d.ts +15 -0
- package/dist/sparkline/index.d.ts.map +1 -0
- package/dist/sparkline/index.js +56 -0
- package/dist/stepper/index.d.ts +19 -0
- package/dist/stepper/index.d.ts.map +1 -0
- package/dist/stepper/index.js +53 -0
- package/dist/table/index.d.ts +11 -2
- package/dist/table/index.d.ts.map +1 -1
- package/dist/table/index.js +117 -53
- package/dist/table/selection.d.ts +55 -0
- package/dist/table/selection.d.ts.map +1 -0
- package/dist/table/selection.js +83 -0
- package/dist/table/swipe.d.ts +18 -0
- package/dist/table/swipe.d.ts.map +1 -0
- package/dist/table/swipe.js +53 -0
- package/dist/table-of-contents/index.d.ts +1 -0
- package/dist/table-of-contents/index.d.ts.map +1 -1
- package/dist/table-of-contents/index.js +25 -23
- package/dist/tabs/index.d.ts.map +1 -1
- package/dist/tabs/index.js +101 -51
- package/dist/tag-input/index.d.ts +19 -0
- package/dist/tag-input/index.d.ts.map +1 -0
- package/dist/tag-input/index.js +61 -0
- package/dist/theme-toggle/index.js +6 -6
- package/dist/theme.css +340 -8
- package/dist/timeline/index.d.ts +18 -0
- package/dist/timeline/index.d.ts.map +1 -0
- package/dist/timeline/index.js +45 -0
- package/dist/toast/index.js +25 -25
- package/dist/toggle/index.d.ts.map +1 -1
- package/dist/toggle/index.js +1 -1
- package/dist/tree/index.d.ts.map +1 -1
- package/dist/tree/index.js +68 -67
- package/dist/trend/index.d.ts +19 -0
- package/dist/trend/index.d.ts.map +1 -0
- package/dist/trend/index.js +27 -0
- package/dist/utils/date.d.ts +34 -0
- package/dist/utils/date.d.ts.map +1 -1
- package/dist/utils/date.js +45 -12
- package/dist/utils/indicator.d.ts.map +1 -1
- package/dist/utils/indicator.js +1 -1
- package/dist/utils/money.d.ts +3 -1
- package/dist/utils/money.d.ts.map +1 -1
- package/dist/utils/money.js +24 -1
- package/dist/utils/motion.d.ts +3 -0
- package/dist/utils/motion.d.ts.map +1 -0
- package/dist/utils/motion.js +7 -0
- package/dist/utils/repeat.d.ts +17 -0
- package/dist/utils/repeat.d.ts.map +1 -0
- package/dist/utils/repeat.js +38 -0
- package/dist/utils/section-link.d.ts +9 -0
- package/dist/utils/section-link.d.ts.map +1 -0
- package/dist/utils/section-link.js +10 -0
- package/dist/utils/swipe.d.ts +29 -0
- package/dist/utils/swipe.d.ts.map +1 -0
- package/dist/utils/swipe.js +85 -0
- package/dist/utils/theme-wave.d.ts.map +1 -1
- package/dist/utils/theme-wave.js +72 -71
- package/dist/utils/useAnchoredPopup.d.ts.map +1 -1
- package/dist/utils/useAnchoredPopup.js +3 -4
- package/dist/utils/useSeen.d.ts +4 -0
- package/dist/utils/useSeen.d.ts.map +1 -0
- package/dist/utils/useSeen.js +17 -0
- package/dist/zen.css +1 -1
- package/package.json +3 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A one-time code (sign-in, verification): a box per character. It's one real
|
|
4
|
+
* field under the boxes, so typing, pasting, deleting and the phone's
|
|
5
|
+
* autofill from a text message all work as in any field. `onComplete` gets the
|
|
6
|
+
* code once every box is filled.
|
|
7
|
+
*/
|
|
8
|
+
export default function CodeInput({ length, value: controlled, defaultValue, onValueChange, onComplete, allowed, className, disabled, ...rest }: CodeInputProps): import('react').JSX.Element;
|
|
9
|
+
export interface CodeInputProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'maxLength'> {
|
|
10
|
+
/** How many characters (boxes). */
|
|
11
|
+
length?: number;
|
|
12
|
+
value?: string;
|
|
13
|
+
defaultValue?: string;
|
|
14
|
+
onValueChange?: (value: string) => void;
|
|
15
|
+
/** Called with the code when the last box is filled. */
|
|
16
|
+
onComplete?: (code: string) => void;
|
|
17
|
+
/** Which characters count (one at a time); digits by default. Others typed or pasted are dropped. */
|
|
18
|
+
allowed?: RegExp;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/code-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,MAAU,EACV,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,UAAU,EACV,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,+BAgEhB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,WAAW,CAAC;IACzG,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx as e } from "../utils/cx.js";
|
|
3
|
+
import { useFieldProps as t } from "../field/index.js";
|
|
4
|
+
import { useState as n } from "react";
|
|
5
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
|
+
//#region packages/code-input/index.tsx
|
|
7
|
+
function a({ length: a = 6, value: o, defaultValue: s = "", onValueChange: c, onComplete: l, allowed: u = /\d/, className: d, disabled: f, ...p }) {
|
|
8
|
+
let [m, h] = n(s), g = o ?? m, [_, v] = n(!1), y = t(p), b = u.source === "\\d";
|
|
9
|
+
return /* @__PURE__ */ i("div", {
|
|
10
|
+
className: e("zen__code-input relative inline-flex gap-2", f && "opacity-50", d),
|
|
11
|
+
children: [/* @__PURE__ */ r("input", {
|
|
12
|
+
autoComplete: "one-time-code",
|
|
13
|
+
inputMode: b ? "numeric" : "text",
|
|
14
|
+
spellCheck: !1,
|
|
15
|
+
maxLength: a,
|
|
16
|
+
...p,
|
|
17
|
+
...y,
|
|
18
|
+
disabled: f,
|
|
19
|
+
value: g,
|
|
20
|
+
onChange: (e) => {
|
|
21
|
+
let t = e.target.value.split("").filter((e) => u.test(e)).join("").slice(0, a);
|
|
22
|
+
o === void 0 && h(t), c?.(t), t.length === a && g.length !== a && l?.(t);
|
|
23
|
+
},
|
|
24
|
+
onFocus: (e) => {
|
|
25
|
+
p.onFocus?.(e), v(!0);
|
|
26
|
+
let t = e.target.value.length;
|
|
27
|
+
e.target.setSelectionRange(t, t);
|
|
28
|
+
},
|
|
29
|
+
onBlur: (e) => {
|
|
30
|
+
p.onBlur?.(e), v(!1);
|
|
31
|
+
},
|
|
32
|
+
className: "absolute inset-0 z-10 cursor-text font-mono text-transparent caret-transparent opacity-0 outline-hidden selection:bg-transparent disabled:cursor-not-allowed"
|
|
33
|
+
}), Array.from({ length: a }, (t, n) => {
|
|
34
|
+
let o = _ && (n === g.length || n === a - 1 && g.length === a);
|
|
35
|
+
return /* @__PURE__ */ i("span", {
|
|
36
|
+
"aria-hidden": !0,
|
|
37
|
+
className: e("glow-border bg-tint/[0.035] relative grid h-12 w-10 place-items-center rounded-lg border font-mono text-lg tabular-nums [--glow-border-color:oklch(var(--glow)/0.22)]", "transition-[border-color,box-shadow,background-color] duration-200", o && "border-glow/60 bg-tint/[0.05] shadow-glow-focus [--glow-border-color:transparent]", y["aria-invalid"] && "border-destructive/60"),
|
|
38
|
+
children: [g[n], o && n === g.length && /* @__PURE__ */ r("span", { className: "zen__code-caret bg-foreground absolute h-5 w-px" })]
|
|
39
|
+
}, n);
|
|
40
|
+
})]
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
//#endregion
|
|
44
|
+
export { a as default };
|
package/dist/collapse/index.d.ts
CHANGED
|
@@ -3,8 +3,9 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
/**
|
|
4
4
|
* A row showing as many items as fit on one line, and the rest behind a "+N"
|
|
5
5
|
* button that opens them in a popover. It measures the items as rendered (any
|
|
6
|
-
* content, font or style), and fits again whenever the row resizes.
|
|
7
|
-
* row with className (e.g.
|
|
6
|
+
* content, font or style), and fits again whenever the row resizes. Its width
|
|
7
|
+
* is the room it's given, not its items': size the row with className (e.g.
|
|
8
|
+
* w-full, max-w-md, gap-1).
|
|
8
9
|
*/
|
|
9
10
|
export default function Collapse<TData>({ items, data, children, moreLabel, badgeVariant, badgeClassName, className, }: CollapseProps<TData>): import('react').JSX.Element;
|
|
10
11
|
export interface CollapseProps<TData> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/collapse/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAEhF
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/collapse/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAEhF;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,EACpC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAc,EACd,YAA0B,EAC1B,cAAc,EACd,SAAS,GACZ,EAAE,aAAa,CAAC,KAAK,CAAC,+BAqGtB;AAED,MAAM,WAAW,aAAa,CAAC,KAAK;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,SAAS,CAAC;IACvE,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACrC,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
package/dist/collapse/index.js
CHANGED
|
@@ -42,7 +42,7 @@ function d({ items: d, data: f, children: p, moreLabel: m = "", badgeVariant: h
|
|
|
42
42
|
let C = y ?? d.length, w = d.slice(C), T = (e) => `+${e}${m ? ` ${m}` : ""}`;
|
|
43
43
|
return /* @__PURE__ */ u("div", {
|
|
44
44
|
ref: v,
|
|
45
|
-
className: e("zen__collapse flex min-w-0 items-center overflow-hidden", _),
|
|
45
|
+
className: e("zen__collapse flex min-w-0 items-center overflow-hidden [contain:inline-size]", _),
|
|
46
46
|
children: [d.slice(0, C).map((e, t) => /* @__PURE__ */ l("span", {
|
|
47
47
|
"data-collapse-item": !0,
|
|
48
48
|
className: "flex shrink-0",
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Search everything and act on it (pages, commands, records): a field over a
|
|
4
|
+
* list that narrows as you type. Arrow keys move, Enter runs the item and
|
|
5
|
+
* closes. Open it from a button, or anywhere with ⌘K / Ctrl+K
|
|
6
|
+
* (useCommandPaletteShortcut).
|
|
7
|
+
*/
|
|
8
|
+
export default function CommandPalette({ open, onOpenChange, items, placeholder, empty, label, className, }: CommandPaletteProps): import('react').JSX.Element;
|
|
9
|
+
/** The items matching `query`: each of its words is in the label or keywords. Labels starting with it come first. */
|
|
10
|
+
export declare function search(items: CommandItem[], query: string): CommandItem[];
|
|
11
|
+
/** Calls `open` on ⌘K (Mac) or Ctrl+K, anywhere on the page. */
|
|
12
|
+
export declare function useCommandPaletteShortcut(open: () => void, key?: string): void;
|
|
13
|
+
export interface CommandItem {
|
|
14
|
+
/** Unique among the items; the label by default. */
|
|
15
|
+
id?: string;
|
|
16
|
+
label: string;
|
|
17
|
+
/** Items with the same group are listed together, under it. */
|
|
18
|
+
group?: string;
|
|
19
|
+
/** More words it's found by. */
|
|
20
|
+
keywords?: string[];
|
|
21
|
+
icon?: ReactNode;
|
|
22
|
+
/** Shown at the end, e.g. a shortcut or where it goes. */
|
|
23
|
+
hint?: ReactNode;
|
|
24
|
+
onSelect: () => void;
|
|
25
|
+
}
|
|
26
|
+
export interface CommandPaletteProps {
|
|
27
|
+
open: boolean;
|
|
28
|
+
onOpenChange: (open: boolean) => void;
|
|
29
|
+
items: CommandItem[];
|
|
30
|
+
placeholder?: string;
|
|
31
|
+
/** Shown when nothing matches. */
|
|
32
|
+
empty?: ReactNode;
|
|
33
|
+
/** Names the palette and its list, for screen readers. */
|
|
34
|
+
label?: string;
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/command-palette/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAA+C,MAAM,OAAO,CAAC;AAE9F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAuB,EACvB,KAAoB,EACpB,KAAkB,EAClB,SAAS,GACZ,EAAE,mBAAmB,+BAoIrB;AAED,qHAAqH;AACrH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,CAUzE;AAED,gEAAgE;AAChE,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,GAAG,SAAM,GAAG,IAAI,CAc3E;AAED,MAAM,WAAW,WAAW;IACxB,oDAAoD;IACpD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx as e } from "../utils/cx.js";
|
|
3
|
+
import { useModal as t } from "../dialog/index.js";
|
|
4
|
+
import { useEffect as n, useId as r, useMemo as i, useRef as a, useState as o } from "react";
|
|
5
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
6
|
+
//#region packages/command-palette/index.tsx
|
|
7
|
+
function l({ open: l, onOpenChange: d, items: f, placeholder: p = "Search…", empty: m = "No results", label: h = "Commands", className: g }) {
|
|
8
|
+
let _ = a(null), v = a(null), y = a(null), b = r(), [x, S] = o(""), [C, w] = o(0);
|
|
9
|
+
t(_, l, v);
|
|
10
|
+
let [T, E] = o(l);
|
|
11
|
+
l !== T && (E(l), l && (S(""), w(0)));
|
|
12
|
+
let D = i(() => u(f, x), [f, x]), O = i(() => {
|
|
13
|
+
let e = /* @__PURE__ */ new Map();
|
|
14
|
+
return D.forEach((t, n) => {
|
|
15
|
+
let r = t.group ?? "";
|
|
16
|
+
e.set(r, [...e.get(r) ?? [], {
|
|
17
|
+
item: t,
|
|
18
|
+
index: n
|
|
19
|
+
}]);
|
|
20
|
+
}), e;
|
|
21
|
+
}, [D]), k = Math.min(C, D.length - 1);
|
|
22
|
+
n(() => {
|
|
23
|
+
y.current?.querySelector(`[data-index="${k}"]`)?.scrollIntoView({ block: "nearest" });
|
|
24
|
+
}, [k]);
|
|
25
|
+
let A = (e) => {
|
|
26
|
+
e && (d(!1), e.onSelect());
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ c("dialog", {
|
|
29
|
+
ref: _,
|
|
30
|
+
"aria-label": h,
|
|
31
|
+
className: e("zen__dialog zen__command-palette glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-hidden p-0", "mx-auto mt-[12dvh] mb-auto w-[36rem] max-w-[calc(100vw-2rem)] rounded-xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", g),
|
|
32
|
+
onCancel: (e) => {
|
|
33
|
+
e.preventDefault(), d(!1);
|
|
34
|
+
},
|
|
35
|
+
onClick: (e) => e.target === e.currentTarget && d(!1),
|
|
36
|
+
children: [/* @__PURE__ */ s("input", {
|
|
37
|
+
ref: v,
|
|
38
|
+
role: "combobox",
|
|
39
|
+
"aria-expanded": !0,
|
|
40
|
+
"aria-controls": `${b}-list`,
|
|
41
|
+
"aria-activedescendant": D.length ? `${b}-${k}` : void 0,
|
|
42
|
+
"aria-autocomplete": "list",
|
|
43
|
+
"aria-label": h,
|
|
44
|
+
placeholder: p,
|
|
45
|
+
value: x,
|
|
46
|
+
onChange: (e) => {
|
|
47
|
+
S(e.target.value), w(0);
|
|
48
|
+
},
|
|
49
|
+
onKeyDown: (e) => {
|
|
50
|
+
let t = D.length - 1, n = e.key === "ArrowDown" ? (k + 1) % (t + 1) : e.key === "ArrowUp" ? (k - 1 + t + 1) % (t + 1) : e.key === "Home" && e.ctrlKey ? 0 : e.key === "End" && e.ctrlKey ? t : null;
|
|
51
|
+
n !== null && D.length ? (e.preventDefault(), w(n)) : e.key === "Enter" && (e.preventDefault(), A(D[k]));
|
|
52
|
+
},
|
|
53
|
+
className: "border-tint/[0.07] h-14 w-full border-b bg-transparent px-5 text-base outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"
|
|
54
|
+
}), /* @__PURE__ */ c("div", {
|
|
55
|
+
ref: y,
|
|
56
|
+
id: `${b}-list`,
|
|
57
|
+
role: "listbox",
|
|
58
|
+
"aria-label": h,
|
|
59
|
+
className: "max-h-[min(24rem,60dvh)] overflow-y-auto p-2",
|
|
60
|
+
children: [!D.length && /* @__PURE__ */ s("p", {
|
|
61
|
+
className: "text-muted-foreground my-0! px-3 py-8 text-center text-sm",
|
|
62
|
+
children: m
|
|
63
|
+
}), [...O].map(([e, t]) => /* @__PURE__ */ c("div", {
|
|
64
|
+
role: "group",
|
|
65
|
+
"aria-label": e || void 0,
|
|
66
|
+
className: "not-first:mt-2",
|
|
67
|
+
children: [e && /* @__PURE__ */ s("div", {
|
|
68
|
+
"aria-hidden": !0,
|
|
69
|
+
className: "text-muted-foreground text-2xs px-3 pt-2 pb-1 tracking-widest uppercase",
|
|
70
|
+
children: e
|
|
71
|
+
}), t.map(({ item: e, index: t }) => /* @__PURE__ */ c("div", {
|
|
72
|
+
id: `${b}-${t}`,
|
|
73
|
+
"data-index": t,
|
|
74
|
+
role: "option",
|
|
75
|
+
"aria-selected": t === k,
|
|
76
|
+
onPointerMove: () => t !== k && w(t),
|
|
77
|
+
onClick: () => A(e),
|
|
78
|
+
className: "text-muted-foreground aria-selected:bg-primary/15 aria-selected:text-foreground flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm aria-selected:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)] [&_svg]:size-4 [&_svg]:shrink-0",
|
|
79
|
+
children: [
|
|
80
|
+
e.icon,
|
|
81
|
+
/* @__PURE__ */ s("span", {
|
|
82
|
+
className: "min-w-0 flex-1 truncate",
|
|
83
|
+
children: e.label
|
|
84
|
+
}),
|
|
85
|
+
e.hint && /* @__PURE__ */ s("span", {
|
|
86
|
+
className: "text-muted-foreground text-xs",
|
|
87
|
+
children: e.hint
|
|
88
|
+
})
|
|
89
|
+
]
|
|
90
|
+
}, e.id ?? e.label))]
|
|
91
|
+
}, e))]
|
|
92
|
+
})]
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
function u(e, t) {
|
|
96
|
+
let n = t.toLowerCase().split(/\s+/).filter(Boolean);
|
|
97
|
+
if (!n.length) return e;
|
|
98
|
+
let r = t.trim().toLowerCase(), i = e.filter((e) => {
|
|
99
|
+
let t = [
|
|
100
|
+
e.label,
|
|
101
|
+
...e.keywords ?? [],
|
|
102
|
+
e.group ?? ""
|
|
103
|
+
].join(" ").toLowerCase();
|
|
104
|
+
return n.every((e) => t.includes(e));
|
|
105
|
+
}), a = (e) => +!e.label.toLowerCase().startsWith(r);
|
|
106
|
+
return i.sort((e, t) => a(e) - a(t));
|
|
107
|
+
}
|
|
108
|
+
function d(e, t = "k") {
|
|
109
|
+
let r = a(e);
|
|
110
|
+
n(() => {
|
|
111
|
+
r.current = e;
|
|
112
|
+
}), n(() => {
|
|
113
|
+
let e = (e) => {
|
|
114
|
+
e.key.toLowerCase() !== t || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || (e.preventDefault(), r.current());
|
|
115
|
+
};
|
|
116
|
+
return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
|
|
117
|
+
}, [t]);
|
|
118
|
+
}
|
|
119
|
+
//#endregion
|
|
120
|
+
export { l as default, u as search, d as useCommandPaletteShortcut };
|
|
@@ -10,9 +10,11 @@ export default function DatePicker({ value, onChange, locale, min, max, isDisabl
|
|
|
10
10
|
/**
|
|
11
11
|
* Date range field: pick a start and then an end in a Calendar (the days
|
|
12
12
|
* between are previewed while pointing); it closes once the range is complete.
|
|
13
|
-
* Shows the range the locale's way, e.g. "Sep 3 – 10, 2026".
|
|
13
|
+
* Shows the range the locale's way, e.g. "Sep 3 – 10, 2026". With `presets`,
|
|
14
|
+
* common ranges ("Last 30 days") sit beside the calendar, one tap each (see
|
|
15
|
+
* commonRanges).
|
|
14
16
|
*/
|
|
15
|
-
export declare function DateRangePicker({ value, onChange, locale, min, max, isDisabled, weekStartsOn, months, placeholder, onClear, clearLabel, ...rest }: DateRangePickerProps): import('react').JSX.Element;
|
|
17
|
+
export declare function DateRangePicker({ value, onChange, locale, min, max, isDisabled, weekStartsOn, months, placeholder, onClear, clearLabel, presets, ...rest }: DateRangePickerProps): import('react').JSX.Element;
|
|
16
18
|
interface PickerProps extends Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'defaultValue'> {
|
|
17
19
|
/** Decides the date format, month and weekday names, and the first day of the week, e.g. "en-IN". */
|
|
18
20
|
locale: string;
|
|
@@ -43,6 +45,12 @@ export interface DateRangePickerProps extends PickerProps {
|
|
|
43
45
|
onChange: (range: DateRange) => void;
|
|
44
46
|
/** Months shown side by side (2 suits wide screens). */
|
|
45
47
|
months?: number;
|
|
48
|
+
/** Ranges picked in one tap, beside the calendar. */
|
|
49
|
+
presets?: DateRangePreset[];
|
|
50
|
+
}
|
|
51
|
+
export interface DateRangePreset {
|
|
52
|
+
label: string;
|
|
53
|
+
range: DateRange;
|
|
46
54
|
}
|
|
47
55
|
export {};
|
|
48
56
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/date-picker/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAA+B,MAAM,iBAAiB,CAAC;AAG/F,OAAO,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,WAA2B,EAC3B,OAAO,EACP,UAAoB,EACpB,GAAG,IAAI,EACV,EAAE,eAAe,+BAsBjB;AAED
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/date-picker/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAA+B,MAAM,iBAAiB,CAAC;AAG/F,OAAO,EAAE,cAAc,EAAa,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,WAA2B,EAC3B,OAAO,EACP,UAAoB,EACpB,GAAG,IAAI,EACV,EAAE,eAAe,+BAsBjB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,YAAY,EACZ,MAAU,EACV,WAA0B,EAC1B,OAAO,EACP,UAAoB,EACpB,OAAO,EACP,GAAG,IAAI,EACV,EAAE,oBAAoB,+BA2DtB;AAmED,UAAU,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC/F,qGAAqG;IACrG,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,sCAAsC;IACtC,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,gEAAgE;IAChE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC3C,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,gGAAgG;AAChG,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAChD,sCAAsC;IACtC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACrD,+DAA+D;IAC/D,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CACpB"}
|
|
@@ -30,29 +30,51 @@ function f({ value: e, onChange: t, locale: n, min: r, max: i, isDisabled: o, we
|
|
|
30
30
|
})
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
|
-
function p({ value: e, onChange: t, locale: n, min: r, max: i, isDisabled: c, weekStartsOn: l, months:
|
|
34
|
-
let
|
|
33
|
+
function p({ value: e, onChange: t, locale: n, min: r, max: i, isDisabled: c, weekStartsOn: l, months: f = 1, placeholder: p = "Pick dates", onClear: h, clearLabel: g = "Clear", presets: _, ...v }) {
|
|
34
|
+
let y = e ? e.end ? o(e.start, e.end, n) : `${a(e.start, n)} – …` : null;
|
|
35
35
|
return /* @__PURE__ */ u(m, {
|
|
36
|
-
...
|
|
37
|
-
shown:
|
|
38
|
-
placeholder:
|
|
36
|
+
...v,
|
|
37
|
+
shown: y,
|
|
38
|
+
placeholder: p,
|
|
39
39
|
label: "Choose dates",
|
|
40
|
-
onClear: e ?
|
|
41
|
-
clearLabel:
|
|
42
|
-
calendar: (a) =>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
40
|
+
onClear: e ? h : void 0,
|
|
41
|
+
clearLabel: g,
|
|
42
|
+
calendar: (a) => {
|
|
43
|
+
let o = /* @__PURE__ */ u(s, {
|
|
44
|
+
autoFocus: !0,
|
|
45
|
+
mode: "range",
|
|
46
|
+
value: e,
|
|
47
|
+
onChange: (e) => {
|
|
48
|
+
t(e), e.end && a();
|
|
49
|
+
},
|
|
50
|
+
locale: n,
|
|
51
|
+
min: r,
|
|
52
|
+
max: i,
|
|
53
|
+
isDisabled: c,
|
|
54
|
+
weekStartsOn: l,
|
|
55
|
+
months: f
|
|
56
|
+
});
|
|
57
|
+
return _?.length ? /* @__PURE__ */ d("div", {
|
|
58
|
+
className: "flex flex-col gap-3 sm:flex-row",
|
|
59
|
+
children: [/* @__PURE__ */ u("div", {
|
|
60
|
+
role: "group",
|
|
61
|
+
"aria-label": "Presets",
|
|
62
|
+
className: "border-tint/[0.06] flex flex-wrap gap-1 sm:flex-col sm:flex-nowrap sm:border-e sm:pe-3",
|
|
63
|
+
children: _.map((n) => {
|
|
64
|
+
let r = e?.start === n.range.start && e?.end === n.range.end;
|
|
65
|
+
return /* @__PURE__ */ u("button", {
|
|
66
|
+
type: "button",
|
|
67
|
+
"aria-pressed": r,
|
|
68
|
+
onClick: () => {
|
|
69
|
+
t(n.range), a();
|
|
70
|
+
},
|
|
71
|
+
className: "text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground aria-pressed:bg-primary/12 aria-pressed:text-foreground focus-visible:ring-ring/40 cursor-pointer rounded-lg px-2.5 py-1.5 text-start text-sm whitespace-nowrap outline-hidden focus-visible:ring-2",
|
|
72
|
+
children: n.label
|
|
73
|
+
}, n.label);
|
|
74
|
+
})
|
|
75
|
+
}), o]
|
|
76
|
+
}) : o;
|
|
77
|
+
}
|
|
56
78
|
});
|
|
57
79
|
}
|
|
58
80
|
function m({ shown: a, placeholder: o, label: s, calendar: c, onClear: f, clearLabel: p, id: m, className: g, disabled: _ = !1, style: v, ...y }) {
|
package/dist/dialog/index.d.ts
CHANGED
|
@@ -3,11 +3,19 @@ import { ComponentProps, ReactNode, RefObject } from 'react';
|
|
|
3
3
|
/**
|
|
4
4
|
* Modal dialog on the native <dialog> element: focus is trapped and restored,
|
|
5
5
|
* the page behind is inert, and Escape closes it. `dismissible={false}` is for
|
|
6
|
-
* flows the user must finish (no Escape
|
|
6
|
+
* flows the user must finish (no Escape, outside-click or close button). With `side`,
|
|
7
7
|
* it's a sheet that slides in from that edge: a bottom sheet on phones, a side
|
|
8
|
-
* panel for filters or details.
|
|
8
|
+
* panel for filters or details. On touch, a sheet swipes back to its edge to close.
|
|
9
9
|
*/
|
|
10
|
-
export default function Dialog({ open, onOpenChange, title, description, children, dismissible, initialFocus, size, side, className, role, }: DialogProps): import('react').JSX.Element;
|
|
10
|
+
export default function Dialog({ open, onOpenChange, title, description, children, dismissible, initialFocus, size, side, className, role, closeLabel, }: DialogProps): import('react').JSX.Element;
|
|
11
|
+
/**
|
|
12
|
+
* Opens and closes a <dialog> as a modal with `open`: focus moves in (to
|
|
13
|
+
* `initialFocus` if given) and back after, the page behind is inert and
|
|
14
|
+
* doesn't scroll, and toasts show inside it while it's open. For your own
|
|
15
|
+
* modal on a <dialog> (Dialog and CommandPalette use it); give the element
|
|
16
|
+
* the zen__dialog class for the open and close animation.
|
|
17
|
+
*/
|
|
18
|
+
export declare function useModal(ref: RefObject<HTMLDialogElement | null>, open: boolean, initialFocus?: RefObject<HTMLElement | null>): void;
|
|
11
19
|
/** The row of actions at the end of a dialog, right-aligned. */
|
|
12
20
|
export declare function DialogFooter({ className, ...rest }: ComponentProps<'div'>): import('react').JSX.Element;
|
|
13
21
|
/**
|
|
@@ -30,5 +38,7 @@ export interface DialogProps {
|
|
|
30
38
|
side?: 'bottom' | 'left' | 'right';
|
|
31
39
|
className?: string;
|
|
32
40
|
role?: ComponentProps<'dialog'>['role'];
|
|
41
|
+
/** The close button's accessible name. */
|
|
42
|
+
closeLabel?: string;
|
|
33
43
|
}
|
|
34
44
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/dialog/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAIlD,OAAO,EACH,cAAc,EAGd,SAAS,EACT,SAAS,EAKZ,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAkB,EAClB,YAAY,EACZ,IAAW,EACX,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,UAAoB,GACvB,EAAE,WAAW,+BAuEb;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACpB,GAAG,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACxC,IAAI,EAAE,OAAO,EACb,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAC7C,IAAI,CA4BN;AAiCD,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAEzE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAW5D;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,sEAAsE;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}
|
package/dist/dialog/index.js
CHANGED
|
@@ -2,71 +2,111 @@
|
|
|
2
2
|
import { cx as e } from "../utils/cx.js";
|
|
3
3
|
import { useGraphicsMode as t } from "../utils/graphics.js";
|
|
4
4
|
import n from "../button/index.js";
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
5
|
+
import r from "../icons/micro/x-mark.js";
|
|
6
|
+
import { useToastHost as i } from "../toast/index.js";
|
|
7
|
+
import { useSwipe as a } from "../utils/swipe.js";
|
|
8
|
+
import { createContext as o, useContext as s, useEffect as c, useId as l, useRef as u } from "react";
|
|
9
|
+
import { jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
8
10
|
//#region packages/dialog/index.tsx
|
|
9
|
-
var
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
let e = b.current;
|
|
15
|
-
if (e) {
|
|
16
|
-
if (n && !e.open) {
|
|
17
|
-
let t = document.documentElement;
|
|
18
|
-
t.toggleAttribute("data-zen-scrollbar", window.innerWidth > t.clientWidth), e.showModal(), h?.current?.focus();
|
|
19
|
-
} else !n && e.open && e.close();
|
|
20
|
-
}
|
|
21
|
-
}, [n, h]), r(b, n), /* @__PURE__ */ l("dialog", {
|
|
22
|
-
ref: b,
|
|
11
|
+
var p = o(() => {});
|
|
12
|
+
function m({ open: t, onOpenChange: n, title: i, description: a, children: o, dismissible: s = !0, initialFocus: c, size: m = "md", side: g, className: v, role: y, closeLabel: b = "Close" }) {
|
|
13
|
+
let x = u(null), S = l(), C = l();
|
|
14
|
+
return _(x, s && t ? g : void 0, () => n?.(!1)), h(x, t, c), /* @__PURE__ */ f("dialog", {
|
|
15
|
+
ref: x,
|
|
23
16
|
role: y,
|
|
24
|
-
"aria-labelledby":
|
|
25
|
-
"aria-describedby":
|
|
26
|
-
"data-side":
|
|
27
|
-
className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !
|
|
17
|
+
"aria-labelledby": S,
|
|
18
|
+
"aria-describedby": a ? C : void 0,
|
|
19
|
+
"data-side": g,
|
|
20
|
+
className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !g && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !g && (m === "lg" ? "w-[60rem]" : "w-[28rem]"), g === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (g === "left" || g === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", g === "right" && "mr-0 ml-auto rounded-l-2xl", g === "left" && "mr-auto ml-0 rounded-r-2xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", v),
|
|
28
21
|
onCancel: (e) => {
|
|
29
|
-
e.preventDefault(),
|
|
22
|
+
e.preventDefault(), s && n?.(!1);
|
|
30
23
|
},
|
|
31
24
|
onClick: (e) => {
|
|
32
|
-
e.target === e.currentTarget &&
|
|
25
|
+
e.target === e.currentTarget && s && n?.(!1);
|
|
33
26
|
},
|
|
34
|
-
children: /* @__PURE__ */
|
|
35
|
-
className: e("flex flex-col gap-4 overflow-x-hidden overflow-y-auto p-6",
|
|
27
|
+
children: [/* @__PURE__ */ f("div", {
|
|
28
|
+
className: e("flex flex-col gap-4 overflow-x-hidden overflow-y-auto p-6", g ? g === "bottom" ? "max-h-[85dvh] pt-3" : "h-full" : "max-h-[calc(100dvh-2rem)]"),
|
|
36
29
|
children: [
|
|
37
|
-
|
|
30
|
+
g === "bottom" && /* @__PURE__ */ d("div", {
|
|
38
31
|
"aria-hidden": !0,
|
|
39
32
|
className: "bg-tint/20 mx-auto h-1 w-10 shrink-0 rounded-full"
|
|
40
33
|
}),
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
className: "flex flex-col gap-2",
|
|
43
|
-
children: [/* @__PURE__ */
|
|
44
|
-
id: x,
|
|
45
|
-
className: "text-lg font-semibold tracking-tight text-balance",
|
|
46
|
-
children: a
|
|
47
|
-
}), f && /* @__PURE__ */ l("p", {
|
|
34
|
+
/* @__PURE__ */ f("div", {
|
|
35
|
+
className: e("flex flex-col gap-2", s && "pe-8"),
|
|
36
|
+
children: [/* @__PURE__ */ d("h2", {
|
|
48
37
|
id: S,
|
|
38
|
+
className: "text-lg font-semibold tracking-tight text-balance",
|
|
39
|
+
children: i
|
|
40
|
+
}), a && /* @__PURE__ */ d("p", {
|
|
41
|
+
id: C,
|
|
49
42
|
className: "text-muted-foreground mt-0! text-sm leading-5",
|
|
50
|
-
children:
|
|
43
|
+
children: a
|
|
51
44
|
})]
|
|
52
45
|
}),
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
value: () =>
|
|
55
|
-
children:
|
|
46
|
+
/* @__PURE__ */ d(p.Provider, {
|
|
47
|
+
value: () => n?.(!1),
|
|
48
|
+
children: o
|
|
56
49
|
})
|
|
57
50
|
]
|
|
58
|
-
})
|
|
51
|
+
}), s && /* @__PURE__ */ d("button", {
|
|
52
|
+
type: "button",
|
|
53
|
+
"aria-label": b,
|
|
54
|
+
onClick: () => n?.(!1),
|
|
55
|
+
className: e("text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute end-4 grid size-8 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2", g === "bottom" ? "top-7.5" : "top-5.5"),
|
|
56
|
+
children: /* @__PURE__ */ d(r, { className: "size-4" })
|
|
57
|
+
})]
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
function h(e, n, r) {
|
|
61
|
+
t(), c(() => {
|
|
62
|
+
let t = e.current;
|
|
63
|
+
if (t) {
|
|
64
|
+
if (n && !t.open) {
|
|
65
|
+
let e = document.documentElement;
|
|
66
|
+
e.toggleAttribute("data-zen-scrollbar", window.innerWidth > e.clientWidth);
|
|
67
|
+
let n = document.activeElement === document.body ? null : document.activeElement?.getBoundingClientRect(), i = !!n && !t.dataset.side;
|
|
68
|
+
if (t.toggleAttribute("data-zen-from", i), t.showModal(), i) {
|
|
69
|
+
let e = n.left + n.width / 2 - t.offsetLeft, r = n.top + n.height / 2 - t.offsetTop;
|
|
70
|
+
t.style.transformOrigin = `${Math.round(e)}px ${Math.round(r)}px`;
|
|
71
|
+
}
|
|
72
|
+
r?.current?.focus();
|
|
73
|
+
} else !n && t.open && t.close();
|
|
74
|
+
}
|
|
75
|
+
}, [
|
|
76
|
+
e,
|
|
77
|
+
n,
|
|
78
|
+
r
|
|
79
|
+
]), i(e, n);
|
|
80
|
+
}
|
|
81
|
+
var g = .3;
|
|
82
|
+
function _(e, t, n) {
|
|
83
|
+
let r = t === "bottom" ? "y" : "x", i = t === "left" ? -1 : 1, o = () => r === "y" ? e.current.offsetHeight : e.current.offsetWidth, s = () => {
|
|
84
|
+
e.current?.style.removeProperty("--zen-swipe"), e.current?.style.removeProperty("--zen-swipe-progress");
|
|
85
|
+
};
|
|
86
|
+
c(s, [e, t]), a(e, t ? {
|
|
87
|
+
axis: r,
|
|
88
|
+
sign: i
|
|
89
|
+
} : void 0, {
|
|
90
|
+
move: (t) => {
|
|
91
|
+
let n = t > 0 ? t : t / 6;
|
|
92
|
+
e.current.style.setProperty("--zen-swipe", r === "y" ? `0 ${n}px` : `${n * i}px 0`), e.current.style.setProperty("--zen-swipe-progress", String(Math.max(0, Math.min(1, t / o()))));
|
|
93
|
+
},
|
|
94
|
+
release: (e, t) => {
|
|
95
|
+
e > o() * g || e > 0 && t > .5 ? n() : s();
|
|
96
|
+
},
|
|
97
|
+
cancel: s,
|
|
98
|
+
threshold: () => o() * g
|
|
59
99
|
});
|
|
60
100
|
}
|
|
61
|
-
function
|
|
62
|
-
return /* @__PURE__ */
|
|
101
|
+
function v({ className: t, ...n }) {
|
|
102
|
+
return /* @__PURE__ */ d("div", {
|
|
63
103
|
className: e("flex justify-end gap-2", t),
|
|
64
104
|
...n
|
|
65
105
|
});
|
|
66
106
|
}
|
|
67
|
-
function
|
|
68
|
-
let r =
|
|
69
|
-
return /* @__PURE__ */
|
|
107
|
+
function y({ onClick: e, ...t }) {
|
|
108
|
+
let r = s(p);
|
|
109
|
+
return /* @__PURE__ */ d(n, {
|
|
70
110
|
...t,
|
|
71
111
|
onClick: (t) => {
|
|
72
112
|
e?.(t), t.defaultPrevented || r();
|
|
@@ -74,4 +114,4 @@ function m({ onClick: e, ...t }) {
|
|
|
74
114
|
});
|
|
75
115
|
}
|
|
76
116
|
//#endregion
|
|
77
|
-
export {
|
|
117
|
+
export { y as DialogClose, v as DialogFooter, m as default, h as useModal };
|
|
@@ -3,7 +3,8 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
* A value edited in place, e.g. in a table cell: shows `children` as a button,
|
|
4
4
|
* and on click (or Enter) swaps in your editor. Call `close()` from the editor
|
|
5
5
|
* when it's done (committed or cancelled). Works with any editor: a compact
|
|
6
|
-
* MoneyInput, an Input, a Select.
|
|
6
|
+
* MoneyInput, an Input, a Select. A value changed by an edit glows briefly
|
|
7
|
+
* when the editor closes.
|
|
7
8
|
*/
|
|
8
9
|
export default function EditableCell({ children, editor, label, readOnly, editing: editingProp, onEditingChange, title, className, }: EditableCellProps): import('react').JSX.Element;
|
|
9
10
|
export interface EditableCellProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/editable-cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/editable-cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAIhF;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,OAAO,EAAE,WAAW,EACpB,eAAe,EACf,KAAK,EACL,SAAS,GACZ,EAAE,iBAAiB,+BAwCnB;AAED,MAAM,WAAW,iBAAiB;IAC9B,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,qEAAqE;IACrE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IACzC,qGAAqG;IACrG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|