@konstructio/ui 0.1.5 → 0.1.6

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.
@@ -1,25 +1,30 @@
1
- import { useEffect as s, useState as l } from "react";
2
- var u = "https://gravatar.com/avatar", c = (r) => Array.from(new Uint8Array(r)).map((t) => t.toString(16).padStart(2, "0")).join(""), i = async (r, t) => {
3
- const a = globalThis.crypto?.subtle;
4
- if (!a) return null;
5
- const e = new TextEncoder().encode(r.trim().toLowerCase()), n = c(await a.digest("SHA-256", e));
6
- return `${u}/${n}?d=404&s=${t}`;
7
- }, f = (r, t) => {
8
- const [a, e] = l(null);
9
- return s(() => {
1
+ import { useEffect as c, useState as v } from "react";
2
+ var d = "https://gravatar.com/avatar", o = /* @__PURE__ */ new Map(), l = (r, t) => `${r.trim().toLowerCase()}|${t}`, f = (r) => Array.from(new Uint8Array(r)).map((t) => t.toString(16).padStart(2, "0")).join(""), h = async (r, t) => {
3
+ const n = globalThis.crypto?.subtle;
4
+ if (!n) return null;
5
+ const e = new TextEncoder().encode(r.trim().toLowerCase()), a = f(await n.digest("SHA-256", e));
6
+ return `${d}/${a}?d=404&s=${t}`;
7
+ }, p = (r, t) => {
8
+ const [n, e] = v(() => r ? o.get(l(r, t)) ?? null : null);
9
+ return c(() => {
10
10
  if (!r) {
11
11
  e(null);
12
12
  return;
13
13
  }
14
- let n = !1;
15
- return i(r, t).then((o) => {
16
- n || e(o);
14
+ const a = l(r, t);
15
+ if (o.has(a)) {
16
+ e(o.get(a) ?? null);
17
+ return;
18
+ }
19
+ let s = !1;
20
+ return h(r, t).then((u) => {
21
+ o.set(a, u), s || e(u);
17
22
  }), () => {
18
- n = !0;
23
+ s = !0;
19
24
  };
20
- }, [r, t]), a;
25
+ }, [r, t]), n;
21
26
  };
22
27
  export {
23
- i as buildGravatarUrl,
24
- f as useGravatarUrl
28
+ h as buildGravatarUrl,
29
+ p as useGravatarUrl
25
30
  };
@@ -1,30 +1,31 @@
1
- import { t as x } from "../../dist-CK8FUUUn.js";
2
- import { t as b } from "../../utils-DnIJruo0.js";
3
- import { buttonVariants as l } from "./Button.variants.js";
4
- import { forwardRef as v } from "react";
5
- import { jsx as B } from "react/jsx-runtime";
6
- var N = v(({ appearance: r, asChild: o = !1, className: n, disabled: t = !1, shape: a, size: e, theme: m, variant: s, version: p, ...f }, u) => {
7
- const i = o ? x : "button", c = o && t ? {
1
+ import { t as b } from "../../dist-CK8FUUUn.js";
2
+ import { t as l } from "../../utils-DnIJruo0.js";
3
+ import { buttonVariants as v } from "./Button.variants.js";
4
+ import { forwardRef as B } from "react";
5
+ import { jsx as N } from "react/jsx-runtime";
6
+ var j = B(({ appearance: r, asChild: o = !1, className: e, disabled: t = !1, pressEffect: n = !0, shape: a, size: m, theme: s, variant: p, version: f, ...u }, i) => {
7
+ const c = o ? b : "button", x = o && t ? {
8
8
  "aria-disabled": !0,
9
9
  tabIndex: -1
10
10
  } : { disabled: t };
11
- return /* @__PURE__ */ B(i, {
12
- ref: u,
13
- "data-theme": m,
14
- className: b(l({
11
+ return /* @__PURE__ */ N(c, {
12
+ ref: i,
13
+ "data-theme": s,
14
+ className: l(v({
15
15
  appearance: r,
16
- className: n,
16
+ className: e,
17
17
  disabled: t,
18
+ pressEffect: n,
18
19
  shape: a,
19
- size: e,
20
- variant: s,
21
- version: p
20
+ size: m,
21
+ variant: p,
22
+ version: f
22
23
  }), o && t && "pointer-events-none"),
23
- ...c,
24
- ...f
24
+ ...x,
25
+ ...u
25
26
  });
26
27
  });
27
- N.displayName = "KonstructButton";
28
+ j.displayName = "KonstructButton";
28
29
  export {
29
- N as Button
30
+ j as Button
30
31
  };
@@ -20,7 +20,6 @@ var a = r([
20
20
  "rounded",
21
21
  "transition-[color,background-color,border-color,transform]",
22
22
  "duration-150",
23
- "pointer-coarse:motion-safe:active:scale-[0.97]",
24
23
  "whitespace-nowrap",
25
24
  "h-10",
26
25
  "pointer-coarse:min-h-11",
@@ -40,6 +39,10 @@ var a = r([
40
39
  "kubefirst:text-white"
41
40
  ], {
42
41
  variants: {
42
+ pressEffect: {
43
+ true: "pointer-coarse:motion-safe:active:scale-[0.97]",
44
+ false: ""
45
+ },
43
46
  variant: {
44
47
  primary: "",
45
48
  secondary: ["bg-white"],
@@ -321,6 +324,7 @@ var a = r([
321
324
  }
322
325
  ],
323
326
  defaultVariants: {
327
+ pressEffect: !0,
324
328
  variant: "primary",
325
329
  version: "default",
326
330
  disabled: !1,
@@ -1,166 +1,351 @@
1
1
  "use client";
2
- import { a as K, o as V, r as J, s as Q, t as U } from "../../dist-DWopnVS-.js";
3
- import { t as s } from "../../utils-DnIJruo0.js";
4
- import { shouldDismissSheet as W } from "./utils/index.js";
5
- import { useCallback as X, useRef as g, useState as b } from "react";
6
- import { jsx as e, jsxs as p } from "react/jsx-runtime";
7
- import { AnimatePresence as A, motion as d, useDragControls as Y, useReducedMotion as Z } from "motion/react";
8
- var T = {
2
+ import { a as lt, o as ut, r as dt, s as ft, t as ht } from "../../dist-DWopnVS-.js";
3
+ import { t as mt } from "../../chevron-left-B1zWfqll.js";
4
+ import { t as m } from "../../utils-DnIJruo0.js";
5
+ import { SheetStep as pt } from "./components/SheetStep/SheetStep.js";
6
+ import { resolveSheetGesture as gt, shouldSwipeBack as vt } from "./utils/index.js";
7
+ import { useCallback as yt, useEffect as bt, useLayoutEffect as xt, useRef as r, useState as p } from "react";
8
+ import { Fragment as Ce, jsx as a, jsxs as b } from "react/jsx-runtime";
9
+ import { AnimatePresence as ue, animate as u, motion as v, useMotionValue as f, useReducedMotion as kt } from "motion/react";
10
+ var Pe = {
9
11
  duration: 0.2,
10
12
  ease: "easeOut"
11
- }, k = {
12
- duration: 0.6,
13
- ease: [
14
- 0.4,
15
- 0,
16
- 0.2,
17
- 1
18
- ]
19
- }, u = "100%", w = 0.05, ee = {
20
- bounceStiffness: 500,
21
- bounceDamping: 40
22
- }, te = {
23
- bounceStiffness: 1e4,
24
- bounceDamping: 1e3
25
- }, ae = {
26
- enter: (n) => ({
13
+ }, Me = {
14
+ type: "spring",
15
+ stiffness: 380,
16
+ damping: 38
17
+ }, j = { duration: 0 }, Rt = 0.05, Te = (i) => typeof i == "number" ? i : i.direction, wt = {
18
+ enter: (i) => ({
27
19
  opacity: 0,
28
- x: n > 0 ? u : `-${u}`
20
+ x: Te(i) > 0 ? w : -w
29
21
  }),
30
22
  center: {
31
23
  opacity: 1,
32
24
  x: 0
33
25
  },
34
- exit: (n) => ({
26
+ exit: (i) => typeof i == "object" && i.instant ? {
35
27
  opacity: 0,
36
- x: n > 0 ? `-${u}` : u
37
- })
38
- }, ne = ({ isOpen: n, onClose: v, title: C, hideTitle: E = !1, leading: I, position: a = "bottom", step: r = 0, className: P, bodyClassName: O, headerClassName: _, titleClassName: H, theme: F, children: M }) => {
39
- const o = Z(), x = Y(), m = g(null), c = g(null), l = g(null), [z, f] = b("auto"), [G, y] = b(!1), [h, j] = b({
40
- step: r,
41
- direction: 1
42
- });
43
- h.step !== r && j({
44
- step: r,
45
- direction: r > h.step ? 1 : -1
28
+ transition: j
29
+ } : {
30
+ opacity: 0,
31
+ x: Te(i) > 0 ? -w : w
32
+ }
33
+ }, de = "text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-metal-400", w = 24, Ht = "96px", St = {
34
+ duration: 0.45,
35
+ ease: "easeOut"
36
+ }, Ot = (i) => i instanceof Element && i.closest("[data-sheet-grip]") !== null, Nt = ({ isOpen: i, onClose: fe, onBack: W, title: H, hideTitle: De = !1, leading: Xe, position: o = "bottom", expandable: N = !1, step: c = 0, className: _e, bodyClassName: Le, headerClassName: Fe, titleClassName: q, theme: Ge, children: K }) => {
37
+ const h = kt(), A = r(null), he = r(null), E = r(null), B = r(null), [ze, I] = p("auto"), [Ve, me] = p(!1), [s, $] = p(!1), [je, pe] = p(!1), ge = r(0), C = r(null), J = r(!1), Q = r(!1), P = r(null), S = f(0), d = f("auto"), U = r({
38
+ step: c,
39
+ title: H,
40
+ children: K
41
+ }), M = r(null), Y = r(!1), ve = r(null), x = r(0), T = r(0), [g, Z] = p(null), [ee, O] = p("idle"), [te, ye] = p(!1), [We, qe] = p(0), ne = r(!1), D = f(0), X = f(0), _ = f(0), L = f(1), F = f(0), G = f(0), z = f(1), ae = f("0px"), re = r(!1), ie = r(null), be = r(0);
42
+ U.current.step !== c && (M.current = U.current), U.current = {
43
+ step: c,
44
+ title: H,
45
+ children: K
46
+ }, s && (!i || !N) && ($(!1), d.set("auto"));
47
+ const [se, Ke] = p({
48
+ step: c,
49
+ direction: 1,
50
+ animated: !0
46
51
  });
47
- const { direction: S } = h, R = a === "bottom" ? "100%" : "-100%", L = o ? {
52
+ if (se.step !== c) {
53
+ const e = !Y.current;
54
+ Ke({
55
+ step: c,
56
+ direction: c > se.step ? 1 : -1,
57
+ animated: e
58
+ }), Y.current = !1, ie.current = e && !h && !s ? be.current : null;
59
+ }
60
+ const { direction: V, animated: k } = se, ce = o === "bottom" ? 1 : -1, l = h ? j : Me, xe = () => {
61
+ D.set(0), X.set(0), _.set(0), L.set(1), F.set(0), G.set(0), z.set(1);
62
+ };
63
+ bt(() => {
64
+ Z(null), O("idle"), xe(), s || d.set("auto");
65
+ }, [c]), xt(() => {
66
+ x.current = ve.current?.getBoundingClientRect().height ?? 0, g && !s && x.current > T.current && Re(), g && ne.current && (ne.current = !1, O("settling"), Ee(1), qe((e) => e + 1));
67
+ }, [g]);
68
+ const ke = o === "bottom" ? "100%" : "-100%", $e = h ? {
48
69
  initial: !1,
49
70
  animate: { y: 0 }
50
71
  } : {
51
- initial: { y: R },
72
+ initial: { y: ke },
52
73
  animate: { y: 0 },
53
- exit: { y: R }
54
- }, $ = a === "bottom" ? {
55
- top: w,
56
- bottom: 1
57
- } : {
58
- top: 1,
59
- bottom: w
60
- }, D = (t) => {
61
- t.pointerType === "mouse" && t.button !== 0 || x.start(t);
62
- }, q = (t, i) => {
63
- W({
64
- offset: i.offset.y,
65
- velocity: i.velocity.y,
66
- panelHeight: m.current?.offsetHeight ?? 0,
67
- position: a
68
- }) && v();
69
- }, N = /* @__PURE__ */ e("div", {
74
+ exit: { y: ke }
75
+ }, Re = () => {
76
+ ae.set(Ht), re.current = !1, ye(!0);
77
+ }, we = N && !s, Je = (e) => {
78
+ const t = e.pointerType !== "mouse" || e.button === 0, n = Ot(e.target);
79
+ J.current = t && (n || we), Q.current = t && !n, P.current = null;
80
+ }, He = (e) => (P.current === null && (P.current = Math.abs(e.offset.x) > Math.abs(e.offset.y) ? "x" : "y"), P.current), Qe = (e, t) => {
81
+ if (!J.current || He(t) === "x") return;
82
+ J.current = !1;
83
+ const n = A.current?.offsetHeight ?? 0;
84
+ C.current = {
85
+ startHeight: n,
86
+ restHeight: s ? ge.current : n,
87
+ maxHeight: window.visualViewport?.height ?? window.innerHeight
88
+ }, d.set(n), pe(!0);
89
+ }, Ue = (e, t) => {
90
+ const n = C.current;
91
+ if (!n) return;
92
+ const R = t.offset.y * ce;
93
+ if (!N) {
94
+ S.set(R >= 0 ? t.offset.y : t.offset.y * Rt);
95
+ return;
96
+ }
97
+ const y = n.startHeight - R;
98
+ if (y >= n.restHeight) {
99
+ d.set(Math.min(y, n.maxHeight)), S.set(0);
100
+ return;
101
+ }
102
+ d.set(n.restHeight), S.set((n.restHeight - y) * ce);
103
+ }, oe = (e, t, n) => {
104
+ if (u(S, 0, l), t) {
105
+ u(d, e.maxHeight, {
106
+ ...l,
107
+ velocity: n
108
+ });
109
+ return;
110
+ }
111
+ u(d, e.restHeight, {
112
+ ...l,
113
+ velocity: n,
114
+ onComplete: () => d.set("auto")
115
+ });
116
+ }, Ye = (e, t) => {
117
+ const n = C.current;
118
+ if (!n) return;
119
+ C.current = null, pe(!1);
120
+ const R = gt({
121
+ offset: t.offset.y,
122
+ velocity: t.velocity.y,
123
+ panelHeight: n.startHeight,
124
+ position: o,
125
+ expandable: N,
126
+ isExpanded: s,
127
+ restHeight: n.restHeight
128
+ }), y = -t.velocity.y * ce;
129
+ R === "dismiss" ? (d.set("auto"), fe()) : R === "expand" ? (ge.current = n.restHeight, $(!0), oe(n, !0, y)) : R === "collapse" ? ($(!1), oe(n, !1, y)) : oe(n, s, y);
130
+ }, Se = !!W && c > 0, le = () => A.current?.offsetWidth || 1, Oe = () => x.current > 0 && !s, Ze = (e) => Q.current && He(e) === "x", Ne = (e) => {
131
+ const t = M.current, n = t !== null && t.step > 0;
132
+ return {
133
+ previewX: -0.3 * le() * (1 - e),
134
+ previewOpacity: e,
135
+ titleOutX: w * e,
136
+ titleOutOpacity: 1 - e,
137
+ titleInX: (n ? 0 : -36) * e - w * (1 - e),
138
+ titleInOpacity: e,
139
+ chevronOpacity: n ? 1 : 1 - e
140
+ };
141
+ }, Ae = (e) => {
142
+ const t = Ne(e);
143
+ if (D.set(t.previewX), X.set(t.previewOpacity), _.set(t.titleOutX), L.set(t.titleOutOpacity), F.set(t.titleInX), G.set(t.titleInOpacity), z.set(t.chevronOpacity), Oe()) {
144
+ const n = T.current;
145
+ I(n + (x.current - n) * e);
146
+ }
147
+ }, Ee = (e) => {
148
+ const t = Ne(e);
149
+ u(D, t.previewX, l), u(X, t.previewOpacity, l), u(_, t.titleOutX, l), u(L, t.titleOutOpacity, l), u(F, t.titleInX, l), u(G, t.titleInOpacity, l), u(z, t.chevronOpacity, l), Oe() && I(e === 1 ? x.current : T.current);
150
+ }, Be = () => {
151
+ Q.current = !1, T.current = he.current?.getBoundingClientRect().height ?? 0, x.current = 0, Ae(0), Z(M.current), O("dragging");
152
+ }, et = (e) => {
153
+ Ae(Math.min(e / le(), 1));
154
+ }, tt = (e) => {
155
+ const t = vt({
156
+ offset: e.offset.x,
157
+ velocity: e.velocity.x,
158
+ panelWidth: le()
159
+ });
160
+ return O("settling"), Ee(t ? 1 : 0), t ? "back" : "stay";
161
+ }, nt = (e) => {
162
+ const t = ie.current;
163
+ ie.current = null, t !== null && e > t && Re();
164
+ }, at = () => {
165
+ if (ee !== "idle" || !M.current) {
166
+ W?.();
167
+ return;
168
+ }
169
+ ne.current = !0, Be();
170
+ }, rt = () => {
171
+ Y.current = !0, W?.();
172
+ }, it = () => {
173
+ Z(null), O("idle"), xe();
174
+ }, st = () => {
175
+ !te || ee === "dragging" || re.current || (re.current = !0, u(ae, "0px", {
176
+ ...h ? j : St,
177
+ onComplete: () => ye(!1)
178
+ }));
179
+ }, ct = h || !Ve || ee === "dragging" ? j : Me, Ie = /* @__PURE__ */ a("div", {
70
180
  "aria-hidden": "true",
71
181
  "data-sheet-handle": "",
72
- className: s("flex shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing", a === "bottom" ? "pb-2" : "pt-2"),
73
- onPointerDown: D,
74
- children: /* @__PURE__ */ e("div", { className: "h-1 w-10 rounded-full bg-slate-300 dark:bg-metal-600" })
75
- }), B = X((t) => {
76
- if (c.current?.disconnect(), c.current = null, l.current !== null && (cancelAnimationFrame(l.current), l.current = null), !t) {
77
- y(!1), f("auto");
182
+ "data-sheet-grip": "",
183
+ "data-active": je || void 0,
184
+ className: m("group flex shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing", o === "bottom" ? "pb-2" : "pt-2"),
185
+ children: /* @__PURE__ */ a("div", { className: m("h-1 w-10 rounded-full transition-colors duration-150", "bg-slate-300 dark:bg-metal-600", "group-data-[active]:bg-slate-400 dark:group-data-[active]:bg-metal-400") })
186
+ }), ot = yt((e) => {
187
+ if (he.current = e, E.current?.disconnect(), E.current = null, B.current !== null && (cancelAnimationFrame(B.current), B.current = null), !e) {
188
+ me(!1), I("auto");
78
189
  return;
79
190
  }
80
- f(t.getBoundingClientRect().height), typeof ResizeObserver < "u" && (c.current = new ResizeObserver(([i]) => {
81
- i && f(i.contentRect.height);
82
- }), c.current.observe(t)), l.current = requestAnimationFrame(() => {
83
- y(!0);
191
+ const t = (n) => {
192
+ be.current = n, I(n);
193
+ };
194
+ t(e.getBoundingClientRect().height), typeof ResizeObserver < "u" && (E.current = new ResizeObserver(([n]) => {
195
+ n && t(n.contentRect.height);
196
+ }), E.current.observe(e)), B.current = requestAnimationFrame(() => {
197
+ me(!0);
84
198
  });
85
199
  }, []);
86
- return /* @__PURE__ */ e(U, {
87
- open: n,
88
- onOpenChange: (t) => !t && v(),
89
- children: /* @__PURE__ */ e(A, { children: n && /* @__PURE__ */ e(V, {
200
+ return /* @__PURE__ */ a(ht, {
201
+ open: i,
202
+ onOpenChange: (e) => !e && fe(),
203
+ children: /* @__PURE__ */ a(ue, { children: i && /* @__PURE__ */ a(ut, {
90
204
  forceMount: !0,
91
- children: /* @__PURE__ */ p("div", {
92
- "data-theme": F,
205
+ children: /* @__PURE__ */ b("div", {
206
+ "data-theme": Ge,
93
207
  className: "contents",
94
- children: [/* @__PURE__ */ e(K, {
208
+ children: [/* @__PURE__ */ a(lt, {
95
209
  asChild: !0,
96
210
  forceMount: !0,
97
- children: /* @__PURE__ */ e(d.div, {
98
- className: "fixed inset-0 z-50 bg-black/55",
211
+ children: /* @__PURE__ */ a(v.div, {
212
+ className: "fixed inset-0 z-70 bg-black/55",
99
213
  initial: { opacity: 0 },
100
214
  animate: { opacity: 1 },
101
215
  exit: { opacity: 0 },
102
- transition: T
216
+ transition: Pe
103
217
  })
104
- }), /* @__PURE__ */ e(J, {
218
+ }), /* @__PURE__ */ a(dt, {
105
219
  asChild: !0,
106
220
  forceMount: !0,
107
- onOpenAutoFocus: (t) => {
108
- t.preventDefault(), m.current?.focus();
221
+ onOpenAutoFocus: (e) => {
222
+ e.preventDefault(), A.current?.focus();
109
223
  },
110
- children: /* @__PURE__ */ p(d.div, {
111
- ref: m,
224
+ children: /* @__PURE__ */ b(v.div, {
225
+ ref: A,
112
226
  tabIndex: -1,
113
- className: s("konstruct-sheet fixed inset-x-0 z-50 flex max-h-[calc(100dvh-4rem)] flex-col", "bg-white text-slate-800 shadow-xl outline-none", "dark:bg-metal-800 dark:text-metal-50", a === "bottom" ? "bottom-0 rounded-t-lg pt-2 pb-[calc(1rem+env(safe-area-inset-bottom))]" : "top-0 rounded-b-lg pb-2 pt-[calc(1rem+env(safe-area-inset-top))]", P),
114
- "data-position": a,
115
- "data-step": r,
116
- transition: T,
117
- drag: "y",
118
- dragListener: !1,
119
- dragControls: x,
120
- dragConstraints: {
121
- top: 0,
122
- bottom: 0
227
+ className: m("konstruct-sheet fixed inset-x-0 z-70 flex flex-col", "bg-white text-slate-800 shadow-xl outline-none", "dark:bg-metal-800 dark:text-metal-50", o === "bottom" ? "bottom-0 pb-[calc(1rem+env(safe-area-inset-bottom))]" : "top-0 pt-[calc(1rem+env(safe-area-inset-top))]", s ? "max-h-dvh" : "max-h-[calc(100dvh-4rem)]", o === "bottom" ? "rounded-t-lg" : "rounded-b-lg", o === "bottom" && (s ? "pt-[calc(0.5rem+env(safe-area-inset-top))]" : "pt-2"), o === "top" && (s ? "pb-[calc(0.5rem+env(safe-area-inset-bottom))]" : "pb-2"), _e),
228
+ "data-position": o,
229
+ "data-step": c,
230
+ "data-expanded": s || void 0,
231
+ style: {
232
+ y: S,
233
+ height: d
123
234
  },
124
- dragElastic: $,
125
- dragMomentum: !1,
126
- dragTransition: o ? te : ee,
127
- onDragEnd: q,
128
- ...L,
235
+ transition: Pe,
236
+ onPointerDownCapture: Je,
237
+ onPanStart: Qe,
238
+ onPan: Ue,
239
+ onPanEnd: Ye,
240
+ ...$e,
129
241
  children: [
130
- a === "bottom" && N,
131
- /* @__PURE__ */ p("div", {
132
- className: s("flex min-h-9 shrink-0 touch-none items-center gap-2 px-6 pb-2", _, E && "sr-only"),
133
- onPointerDown: D,
134
- children: [I, /* @__PURE__ */ e(Q, {
135
- className: s("text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-metal-400", H),
136
- children: C
242
+ o === "bottom" && Ie,
243
+ /* @__PURE__ */ b("div", {
244
+ className: m("flex min-h-9 shrink-0 touch-none items-center gap-2 px-6 pb-2", Fe, De && "sr-only"),
245
+ "data-sheet-grip": "",
246
+ children: [/* @__PURE__ */ a(ft, {
247
+ className: "sr-only",
248
+ children: H
249
+ }), /* @__PURE__ */ a(ue, {
250
+ mode: "popLayout",
251
+ initial: !1,
252
+ custom: {
253
+ direction: V,
254
+ instant: !k
255
+ },
256
+ children: /* @__PURE__ */ a(v.div, {
257
+ custom: V,
258
+ className: "flex min-h-9 items-center gap-2",
259
+ variants: !h && k ? wt : void 0,
260
+ initial: !h && k ? "enter" : !1,
261
+ animate: "center",
262
+ exit: !h && k ? "exit" : void 0,
263
+ transition: l,
264
+ children: Se ? /* @__PURE__ */ a(Ce, { children: /* @__PURE__ */ b("button", {
265
+ type: "button",
266
+ "data-sheet-back": "",
267
+ onClick: at,
268
+ className: m("-my-1 -ml-2 flex h-9 items-center gap-2 rounded pr-2 outline-none", "focus-visible:ring-1 focus-visible:ring-aurora-500", "pointer-coarse:active:bg-slate-100 dark:pointer-coarse:active:bg-metal-700"),
269
+ children: [/* @__PURE__ */ a(v.span, {
270
+ className: "flex size-9 shrink-0 items-center justify-center text-slate-800 dark:text-metal-50",
271
+ style: { opacity: z },
272
+ children: /* @__PURE__ */ a(mt, {
273
+ "aria-hidden": "true",
274
+ className: "size-5"
275
+ })
276
+ }), /* @__PURE__ */ b("span", {
277
+ className: "relative flex items-center",
278
+ children: [/* @__PURE__ */ a(v.span, {
279
+ className: m(de, q),
280
+ style: {
281
+ x: _,
282
+ opacity: L
283
+ },
284
+ children: H
285
+ }), g && /* @__PURE__ */ a(v.span, {
286
+ "aria-hidden": "true",
287
+ "data-sheet-preview-title": "",
288
+ className: m("absolute left-0 whitespace-nowrap", de, q),
289
+ style: {
290
+ x: F,
291
+ opacity: G
292
+ },
293
+ children: g.title
294
+ })]
295
+ })]
296
+ }) }) : /* @__PURE__ */ b(Ce, { children: [Xe, /* @__PURE__ */ a("span", {
297
+ "aria-hidden": "true",
298
+ className: m(de, q),
299
+ children: H
300
+ })] })
301
+ }, c)
137
302
  })]
138
303
  }),
139
- /* @__PURE__ */ e(d.div, {
140
- className: s("flex min-h-0 flex-col overflow-y-auto overflow-x-hidden", O),
141
- animate: { height: z },
142
- transition: o || !G ? { duration: 0 } : k,
143
- children: /* @__PURE__ */ e("div", {
144
- ref: B,
304
+ /* @__PURE__ */ a(v.div, {
305
+ className: m("flex min-h-0 flex-col overflow-x-hidden", g || te ? "overflow-y-hidden" : "overflow-y-auto", we && "touch-none", te && "[mask-image:linear-gradient(to_bottom,black_calc(100%-var(--sheet-reveal)),transparent)]", s && "flex-1", Le),
306
+ style: { "--sheet-reveal": ae },
307
+ animate: { height: s ? "auto" : ze },
308
+ transition: ct,
309
+ onAnimationComplete: st,
310
+ children: /* @__PURE__ */ b("div", {
311
+ ref: ot,
145
312
  className: "relative",
146
- children: /* @__PURE__ */ e(A, {
313
+ children: [g && /* @__PURE__ */ a(v.div, {
314
+ ref: ve,
315
+ "aria-hidden": "true",
316
+ "data-sheet-preview": "",
317
+ className: "pointer-events-none absolute inset-x-0 top-0 flex w-full flex-col",
318
+ style: {
319
+ x: D,
320
+ opacity: X
321
+ },
322
+ children: g.children
323
+ }), /* @__PURE__ */ a(ue, {
147
324
  mode: "popLayout",
148
325
  initial: !1,
149
- custom: S,
150
- children: /* @__PURE__ */ e(d.div, {
151
- custom: S,
152
- className: "flex w-full flex-col",
153
- variants: o ? void 0 : ae,
154
- initial: o ? !1 : "enter",
155
- animate: "center",
156
- exit: o ? void 0 : "exit",
157
- transition: k,
158
- children: M
159
- }, r)
160
- })
326
+ custom: {
327
+ direction: V,
328
+ instant: !k
329
+ },
330
+ children: /* @__PURE__ */ a(pt, {
331
+ step: c,
332
+ direction: V,
333
+ animated: !h && k,
334
+ canSwipeBack: Se,
335
+ onMount: nt,
336
+ commitSignal: We,
337
+ isArmed: Ze,
338
+ onBackStart: Be,
339
+ onBackMove: et,
340
+ onBackEnd: tt,
341
+ onBackCommit: rt,
342
+ onBackCancel: it,
343
+ children: K
344
+ }, c)
345
+ })]
161
346
  })
162
347
  }),
163
- a === "top" && N
348
+ o === "top" && Ie
164
349
  ]
165
350
  })
166
351
  })]
@@ -168,7 +353,7 @@ var T = {
168
353
  }) })
169
354
  });
170
355
  };
171
- ne.displayName = "KonstructSheet";
356
+ Nt.displayName = "KonstructSheet";
172
357
  export {
173
- ne as Sheet
358
+ Nt as Sheet
174
359
  };