@photon-ai/pho-ui 2.10.0 → 2.11.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.
@@ -1,1466 +0,0 @@
1
- "use client";
2
- import { t as p } from "./cn-ChIgwEl3.js";
3
- import { n as Oe } from "./link-provider-DXzDQ08N.js";
4
- import { FADE_ENTRANCE as Ze, FADE_SWAP as et, SPRING_ENTRANCE as tt, TRAVEL_LINEAR as nt } from "../motion.js";
5
- import { a as ae, o as de } from "./button-CdqS_t5a.js";
6
- import { t as at } from "./createReactComponent-BqCmnqfX.js";
7
- import { t as rt } from "./error-D0yoFxCv.js";
8
- import { t as ee } from "./IconChevronLeft-CSWMKQ4C.js";
9
- import { a as pe, i as it, n as st, r as lt, s as ot } from "./data-table-Cmz0p-jt.js";
10
- import { t as we } from "./IconSearch-BKAHkLyX.js";
11
- import { t as ct } from "./IconX-pZ9vrtSr.js";
12
- import { t as ut } from "./toast-iSf6NuAS.js";
13
- import { t as se } from "./input-group-fc9_jD4d.js";
14
- import { t as dt } from "./animated-height-CCO-Ocoz.js";
15
- import { n as Le, t as Q } from "./scroll-area-BO-9PMM7.js";
16
- import { t as pt } from "./form-AiHbbw4m.js";
17
- import { i as j } from "./menu-BQeprfxB.js";
18
- import { Children as re, Fragment as ft, createContext as V, isValidElement as mt, useCallback as Be, useContext as S, useEffect as I, useId as ht, useLayoutEffect as G, useMemo as z, useRef as A, useState as b, useSyncExternalStore as fe } from "react";
19
- import { Fragment as Me, jsx as n, jsxs as w } from "react/jsx-runtime";
20
- import { AnimatePresence as W, motion as E, useIsPresent as gt, useReducedMotion as L } from "motion/react";
21
- import { Dialog as Z } from "@base-ui/react/dialog";
22
- import { createPortal as Ne } from "react-dom";
23
- var vt = [["path", {
24
- d: "M9 6l6 6l-6 6",
25
- key: "svg-0"
26
- }]], yt = at("outline", "chevron-right", "ChevronRight", vt), me = "rounded-base border border-pho-secondary bg-pho-primary", te = "divide-y divide-pho-secondary [&>:has(+[data-basic-page-alert])]:border-b-0", bt = `${me} ${te}`, Ae = "flex min-w-0 flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5", xt = "flex min-h-[4.25rem] min-w-0 flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6", wt = "flex flex-col gap-3 px-5 py-4", Nt = "-mx-5 -mb-4 flex items-center rounded-b-[calc(0.75rem-1px)] bg-pho-secondary py-1 pr-3 pl-5", At = "-mx-2 -mt-1.5 flex items-center rounded-sm bg-pho-secondary px-2 py-0.5", T = tt, B = Ze, X = 12, Et = 768;
27
- function Ct(e) {
28
- return Math.round(Math.min(Math.max(e * 0.4, 320), 448));
29
- }
30
- var De = V(null), He = V(null);
31
- function _t(e) {
32
- const [t, a] = b(null), [r, i] = b(!1), [c, o] = b(!1), [l, s] = b(() => ({
33
- width: typeof window > "u" ? 0 : window.innerWidth,
34
- height: null
35
- }));
36
- return G(() => {
37
- const d = e.current;
38
- if (!r || d == null) return;
39
- const f = be(d), u = () => {
40
- const g = d.offsetWidth, y = f?.clientHeight ?? null;
41
- s((h) => h.width === g && h.height === y ? h : {
42
- width: g,
43
- height: y
44
- });
45
- };
46
- if (u(), typeof ResizeObserver > "u") return;
47
- const m = new ResizeObserver(u);
48
- return m.observe(d), f != null && m.observe(f), () => m.disconnect();
49
- }, [e, r]), {
50
- host: z(() => ({
51
- slot: t,
52
- presentation: l.width >= Et ? "panel" : "page",
53
- width: Ct(l.width),
54
- paneHeight: l.height,
55
- setOpen: o,
56
- setPresent: i
57
- }), [t, l]),
58
- setSlot: a,
59
- open: c
60
- };
61
- }
62
- function St(e) {
63
- return e == null ? window.scrollY : e.scrollTop;
64
- }
65
- function Ee(e, t) {
66
- e == null ? window.scrollTo({ top: t }) : e.scrollTop = t;
67
- }
68
- function Rt({ condense: e = !0, width: t, className: a, children: r, ref: i, ...c }) {
69
- const o = S(ie)?.adopt ?? !1, l = S(He), [s, d] = b(!1), f = A(0), u = Be((H) => {
70
- f.current += H ? 1 : -1, d(f.current > 0);
71
- }, []), m = t === "wide" || t == null && s, [g] = b(ot), y = A(null), [h, C] = b(null), [v, P] = b(null), x = z(() => ({
72
- setTitle: C,
73
- setTail: P
74
- }), []);
75
- I(() => {
76
- if (l != null)
77
- return l.setBack(v), () => l.setBack(null);
78
- }, [l, v]);
79
- const { host: R, setSlot: M, open: O } = _t(y), k = O && R.presentation === "page", D = A(!1), $ = A(0);
80
- G(() => {
81
- const H = y.current;
82
- if (k === D.current || H == null) return;
83
- D.current = k;
84
- const N = be(H);
85
- k ? ($.current = St(N), Ee(N, 0)) : Ee(N, $.current);
86
- }, [k]);
87
- const Y = e ? /* @__PURE__ */ n(kt, {
88
- title: h,
89
- tail: l == null ? v : null,
90
- silent: k || l != null
91
- }) : null, U = /* @__PURE__ */ n("div", {
92
- "data-basic-page-column": "",
93
- className: p("mx-auto flex w-full min-w-0 flex-1 flex-col px-5 pt-12 pb-12 *:min-w-0", m ? "max-w-[84rem] md:px-8" : "max-w-[44.5rem]", o || l != null ? "[&_[data-basic-page-back]]:hidden" : "has-[[data-basic-page-back]]:pt-16"),
94
- children: e ? /* @__PURE__ */ n(ge.Provider, {
95
- value: x,
96
- children: r
97
- }) : r
98
- });
99
- return /* @__PURE__ */ n("div", {
100
- "data-basic-page-root": "",
101
- "data-basic-page-width": m ? "wide" : void 0,
102
- className: p("relative flex min-h-full w-full min-w-0 flex-row", a),
103
- ...c,
104
- ref: (H) => {
105
- y.current = H, typeof i == "function" ? i(H) : i != null && (i.current = H);
106
- },
107
- children: /* @__PURE__ */ n(De.Provider, {
108
- value: R,
109
- children: /* @__PURE__ */ n(it.Provider, {
110
- value: u,
111
- children: /* @__PURE__ */ w(pe.Provider, {
112
- value: g,
113
- children: [/* @__PURE__ */ w("div", {
114
- "data-basic-page-main": "",
115
- className: p("flex min-w-0 flex-1 flex-col", k && "hidden"),
116
- children: [Y, U]
117
- }), /* @__PURE__ */ n("div", {
118
- ref: M,
119
- className: "contents"
120
- })]
121
- })
122
- })
123
- })
124
- });
125
- }
126
- function kt({ title: e, tail: t, silent: a = !1 }) {
127
- const r = L(), [i, c] = b(!1), o = S(ie), l = ht();
128
- I(() => {
129
- if (o != null) {
130
- if (a) {
131
- o.store.clear(l);
132
- return;
133
- }
134
- o.store.set(l, {
135
- condensed: i,
136
- title: e?.label ?? null,
137
- back: t
138
- });
139
- }
140
- }, [
141
- o,
142
- l,
143
- i,
144
- e,
145
- t,
146
- a
147
- ]), I(() => {
148
- if (o != null)
149
- return () => o.store.clear(l);
150
- }, [o, l]);
151
- const s = e?.el ?? null;
152
- return I(() => {
153
- if (s == null || typeof IntersectionObserver > "u") return;
154
- const d = new IntersectionObserver(([f]) => c(f != null && !f.isIntersecting), { root: be(s) });
155
- return d.observe(s), () => d.disconnect();
156
- }, [s]), /* @__PURE__ */ n("div", {
157
- "data-basic-page-condense": "",
158
- className: "sticky top-0 z-20 h-0 overflow-visible",
159
- children: /* @__PURE__ */ n(W, { children: i && !(o?.adopt ?? !1) && /* @__PURE__ */ w(E.div, {
160
- initial: {
161
- opacity: 0,
162
- y: r ? 0 : Re
163
- },
164
- animate: {
165
- opacity: 1,
166
- y: 0
167
- },
168
- exit: {
169
- opacity: 0,
170
- y: r ? 0 : Re
171
- },
172
- transition: {
173
- ...ye,
174
- y: Gt
175
- },
176
- className: "border-pho-secondary bg-pho-page/85 relative grid h-12 grid-cols-[1fr_minmax(0,auto)_1fr] items-center border-b px-3 backdrop-blur",
177
- children: [/* @__PURE__ */ n("div", {
178
- className: "flex min-w-0 items-center justify-start",
179
- children: t != null && /* @__PURE__ */ n(de, {
180
- variant: "ghost",
181
- size: "sm",
182
- href: t.href,
183
- onClick: t.onClick,
184
- prefix: /* @__PURE__ */ n("span", {
185
- className: "inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0",
186
- children: /* @__PURE__ */ n(ee, {})
187
- }),
188
- className: "min-w-max",
189
- children: t.label
190
- })
191
- }), /* @__PURE__ */ n("span", {
192
- className: "text-pho-primary block max-w-full min-w-0 truncate text-center text-base font-medium",
193
- children: e?.label
194
- })]
195
- }) })
196
- });
197
- }
198
- function Tt(e) {
199
- return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
200
- }
201
- function Pt(e) {
202
- if (!(typeof e != "string" && typeof e != "number"))
203
- return Tt(String(e)) || void 0;
204
- }
205
- function he(e, t) {
206
- if (e !== "")
207
- return e ?? Pt(t);
208
- }
209
- var It = (e) => `basic-page-morph-${e}`, Ot = { layout: T }, Ce = 10, _e = {
210
- delay: 0.2,
211
- duration: 0.12,
212
- ease: "easeOut"
213
- }, Lt = {
214
- duration: 0.18,
215
- ease: "easeOut"
216
- }, Bt = -8, Mt = {
217
- duration: 0.16,
218
- ease: "easeOut"
219
- }, Dt = {
220
- delay: 0.14,
221
- duration: 0.16,
222
- ease: "easeOut"
223
- }, Fe = {
224
- duration: 0.12,
225
- ease: "easeOut"
226
- }, q = [];
227
- function Ht(e) {
228
- const t = A({ labels: e });
229
- t.current.labels = e, G(() => {
230
- const a = t.current;
231
- return q.push(a), () => {
232
- q.splice(q.indexOf(a), 1);
233
- };
234
- }, []);
235
- }
236
- function Ge() {
237
- const [e] = b(() => {
238
- const t = q[q.length - 1];
239
- return t ? { labels: [...t.labels] } : null;
240
- });
241
- return e;
242
- }
243
- var ge = V(null), ce = {
244
- condensed: !1,
245
- title: null,
246
- back: null
247
- }, ie = V(null), ve = () => () => {
248
- }, Se = () => ce;
249
- function Ft({ adopt: e = !0, children: t }) {
250
- const [a] = b(() => {
251
- let i = ce, c = null;
252
- const o = /* @__PURE__ */ new Set(), l = () => {
253
- for (const s of o) s();
254
- };
255
- return {
256
- get: () => i,
257
- set(s, d) {
258
- c = s, i = d, l();
259
- },
260
- clear(s) {
261
- c === s && (c = null, i = ce, l());
262
- },
263
- subscribe(s) {
264
- return o.add(s), () => o.delete(s);
265
- }
266
- };
267
- }), r = z(() => ({
268
- store: a,
269
- adopt: e
270
- }), [a, e]);
271
- return /* @__PURE__ */ n(ie.Provider, {
272
- value: r,
273
- children: t
274
- });
275
- }
276
- function ta() {
277
- const e = S(ie);
278
- return fe(e?.store.subscribe ?? ve, e?.store.get ?? Se, e?.store.get ?? Se);
279
- }
280
- var ye = et, Gt = nt, Re = -8;
281
- function be(e) {
282
- if (typeof getComputedStyle != "function") return null;
283
- for (let t = e.parentElement; t != null && t !== document.body; t = t.parentElement) {
284
- const { overflowY: a } = getComputedStyle(t);
285
- if (a === "auto" || a === "scroll") return t;
286
- }
287
- return null;
288
- }
289
- var le = /* @__PURE__ */ new Map(), zt = 96;
290
- function Vt(e) {
291
- const t = e.closest("[data-basic-page-root]"), a = t?.querySelector("[data-basic-page-column]");
292
- return !t || !a ? 0 : a.getBoundingClientRect().left - t.getBoundingClientRect().left;
293
- }
294
- function ze(e) {
295
- const [t] = b(() => {
296
- if (e == null) return !1;
297
- const r = le.get(e);
298
- return r != null && r.visible && r.el.isConnected && Vt(r.el) <= zt;
299
- }), a = A(null);
300
- return I(() => {
301
- if (e == null || typeof IntersectionObserver > "u") return;
302
- const r = a.current;
303
- if (!r) return;
304
- const i = new IntersectionObserver(([c]) => {
305
- c && le.set(e, {
306
- visible: c.isIntersecting,
307
- el: r
308
- });
309
- });
310
- return i.observe(r), () => {
311
- i.disconnect(), le.delete(e);
312
- };
313
- }, [e]), {
314
- fly: t,
315
- ref: a
316
- };
317
- }
318
- var $t = {
319
- fade: {
320
- initial: { opacity: 0 },
321
- animate: { opacity: 1 },
322
- transition: { opacity: B }
323
- },
324
- rise: {
325
- initial: {
326
- opacity: 0,
327
- y: X
328
- },
329
- animate: {
330
- opacity: 1,
331
- y: 0
332
- },
333
- transition: {
334
- y: T,
335
- opacity: B
336
- }
337
- },
338
- slide: {
339
- initial: { x: "-100%" },
340
- animate: { x: 0 },
341
- transition: { x: Dt }
342
- }
343
- };
344
- function Ve({ morphId: e, fromClassName: t, fly: a, morphRef: r, arrival: i, className: c, children: o }) {
345
- const [l, s] = b(!1), d = !a && i != null ? $t[i] : null;
346
- return /* @__PURE__ */ w(E.span, {
347
- ref: r,
348
- layoutId: It(e),
349
- initial: d?.initial,
350
- animate: d?.animate,
351
- transition: a ? Ot : {
352
- layout: { duration: 0 },
353
- ...d?.transition
354
- },
355
- onLayoutAnimationStart: () => {
356
- a && s(!0);
357
- },
358
- onLayoutAnimationComplete: () => s(!1),
359
- className: p("relative inline-block", c),
360
- children: [o, l && /* @__PURE__ */ n(E.span, {
361
- "aria-hidden": !0,
362
- initial: { opacity: 1 },
363
- animate: { opacity: 0 },
364
- transition: Lt,
365
- onAnimationComplete: () => s(!1),
366
- className: p("absolute inset-0", t),
367
- children: o
368
- })]
369
- });
370
- }
371
- var ke = "max-w-full min-w-0 truncate align-top";
372
- function jt({ id: e, morphId: t, enter: a, className: r, children: i, ...c }) {
373
- const o = he(e, i), l = L(), s = ze(t), d = Ge(), f = !l && (t != null || a === !0), u = a || d != null ? "rise" : void 0, m = S(ge), g = A(null);
374
- G(() => {
375
- if (m != null)
376
- return m.setTitle({
377
- label: i,
378
- el: g.current
379
- }), () => m.setTitle(null);
380
- }, [m, i]);
381
- const [y, h] = b(s.fly && d != null);
382
- return G(() => {
383
- q.length > 0 && h(!1);
384
- }, []), /* @__PURE__ */ w("h1", {
385
- id: o,
386
- className: p("text-display-base text-pho-primary max-w-full min-w-0 scroll-mt-12 px-5 font-medium", f ? "whitespace-nowrap" : "truncate", r),
387
- ...c,
388
- ref: (C) => {
389
- g.current = C;
390
- const v = c.ref;
391
- typeof v == "function" ? v(C) : v != null && (v.current = C);
392
- },
393
- children: [t != null && !l ? /* @__PURE__ */ n(Ve, {
394
- morphId: t,
395
- fromClassName: "text-pho-secondary",
396
- fly: s.fly,
397
- morphRef: s.ref,
398
- arrival: u,
399
- className: ke,
400
- children: i
401
- }) : a && !l ? /* @__PURE__ */ n(E.span, {
402
- initial: {
403
- opacity: 0,
404
- y: X
405
- },
406
- animate: {
407
- opacity: 1,
408
- y: 0
409
- },
410
- transition: {
411
- y: T,
412
- opacity: B
413
- },
414
- className: p("inline-block", ke),
415
- children: i
416
- }) : i, y && /* @__PURE__ */ n(E.span, {
417
- "aria-hidden": !0,
418
- initial: { opacity: 1 },
419
- animate: { opacity: 0 },
420
- transition: Fe,
421
- onAnimationComplete: () => h(!1),
422
- className: p("text-pho-secondary pointer-events-none absolute inline-flex items-center", bn),
423
- children: /* @__PURE__ */ n(ee, {})
424
- })]
425
- });
426
- }
427
- var $e = V(!1);
428
- function qt() {
429
- const e = S($e), t = L(), [a] = b(() => e && !t);
430
- return a;
431
- }
432
- var Wt = {
433
- height: 0,
434
- opacity: 0,
435
- paddingTop: 0,
436
- paddingBottom: 0,
437
- borderTopWidth: 0
438
- }, Xt = {
439
- y: T,
440
- opacity: B,
441
- height: T,
442
- paddingTop: T,
443
- paddingBottom: T,
444
- borderTopWidth: T
445
- };
446
- function xe() {
447
- const e = qt(), t = gt(), a = L();
448
- return {
449
- initial: e ? {
450
- opacity: 0,
451
- y: X
452
- } : !1,
453
- animate: {
454
- opacity: 1,
455
- y: 0
456
- },
457
- exit: Wt,
458
- transition: a ? { duration: 0 } : Xt,
459
- leaving: !t
460
- };
461
- }
462
- var Kt = typeof process < "u" && process.env.NODE_ENV !== "production";
463
- function je(e, t, a, r) {
464
- I(() => {
465
- if (!Kt || e.current == null || typeof getComputedStyle != "function") return;
466
- const i = (o) => {
467
- const l = getComputedStyle(o).rowGap;
468
- return l === "" || l === "normal" ? null : parseFloat(l);
469
- }, c = i(e.current);
470
- c != null && c !== a && console.warn(`[BasicPage.${t}] spaced at ${c}px instead of ${a}px. Spacing is the system's: Stack gap-10 between blocks, a block gap-3, Fields gap-5. Remove the class and move the wrapper instead.`, e.current);
471
- for (const o of Array.from(e.current.children)) {
472
- const l = r(o);
473
- if (l == null || getComputedStyle(o).display === "contents") continue;
474
- const s = i(o);
475
- s != null && s !== l && console.warn(`[BasicPage.${t}] a child is spaced at ${s}px instead of ${l}px. Spacing is the system's: Stack gap-10 between blocks, a block gap-3, Fields gap-5. Remove the class and move the wrapper instead.`, o);
476
- }
477
- });
478
- }
479
- function Qt({ enter: e = !0, className: t, children: a, ref: r, ...i }) {
480
- const c = L(), o = A(null);
481
- je(o, "Stack", 40, (u) => u.hasAttribute("data-basic-page-fields") ? 20 : 12);
482
- const l = i["aria-busy"], s = l === !0 || l === "true", d = A(s), f = d.current && !s;
483
- return I(() => {
484
- d.current = s;
485
- }), /* @__PURE__ */ n(E.div, {
486
- ref: (u) => {
487
- o.current = u, typeof r == "function" ? r(u) : r != null && (r.current = u);
488
- },
489
- "data-basic-page-stack": "",
490
- initial: c || !e ? !1 : {
491
- opacity: 0,
492
- y: X
493
- },
494
- animate: {
495
- opacity: 1,
496
- y: 0
497
- },
498
- transition: {
499
- y: T,
500
- opacity: B
501
- },
502
- className: p("mt-7 flex min-w-0 flex-col gap-10", "[&:has(>*:first-child:not([data-basic-page-callout])>[data-basic-page-header]:first-child)]:mt-6 [&:has(>*:first-child:not([data-basic-page-callout])>h2:first-child)]:mt-6 [&:has(>[data-basic-page-header]:first-child)]:mt-6 [&:has(>h2:first-child)]:mt-6", "*:flex *:min-w-0 *:flex-col [&>*:not([data-basic-page-fields])]:gap-3", t),
503
- ...i,
504
- children: /* @__PURE__ */ n($e.Provider, {
505
- value: f,
506
- children: a
507
- })
508
- });
509
- }
510
- var Te = "@container grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] mb-3 [&>:not([data-basic-page-search]):not([data-basic-page-header-action])]:col-start-1 [[data-basic-page-callout]_&]:mb-0 [[data-basic-page-stack]>*>&]:mb-0";
511
- function Yt({ enter: e, className: t, ...a }) {
512
- const r = L();
513
- return e && !r ? /* @__PURE__ */ n(E.div, {
514
- initial: {
515
- opacity: 0,
516
- y: X
517
- },
518
- animate: {
519
- opacity: 1,
520
- y: 0
521
- },
522
- transition: {
523
- y: T,
524
- opacity: B
525
- },
526
- "data-basic-page-header": "",
527
- className: p(Te, t),
528
- ...a
529
- }) : /* @__PURE__ */ n("div", {
530
- "data-basic-page-header": "",
531
- className: p(Te, t),
532
- ...a
533
- });
534
- }
535
- function Ut({ className: e, ...t }) {
536
- return /* @__PURE__ */ n("div", {
537
- "data-basic-page-header-action": "",
538
- className: p("flex items-center gap-2", "[[data-basic-page-header]>&]:col-start-3 [[data-basic-page-header]>&]:row-span-2 [[data-basic-page-header]>&]:row-start-1 [[data-basic-page-header]>&]:ml-4 [[data-basic-page-header]>&]:self-start [[data-basic-page-header]>&]:justify-self-end", e),
539
- ...t
540
- });
541
- }
542
- function Jt({ id: e, className: t, children: a, ...r }) {
543
- const i = he(e, a);
544
- return /* @__PURE__ */ n("h2", {
545
- id: i,
546
- className: p("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate px-5 font-medium", "mb-3 [[data-basic-page-callout]_&]:mb-0 [[data-basic-page-header]>&]:mb-0 [[data-basic-page-stack]>*>&]:mb-0", t),
547
- ...r,
548
- children: a
549
- });
550
- }
551
- function qe({ className: e, ...t }) {
552
- return /* @__PURE__ */ n("p", {
553
- className: p("text-display-xs text-pho-description px-5 font-normal", e),
554
- ...t
555
- });
556
- }
557
- function Zt({ one: e, other: t, ...a }) {
558
- const r = S(pe), i = fe(r?.subscribe ?? ve, () => r?.get().api ?? null, () => null);
559
- if (i == null) return null;
560
- const c = i.query.trim() !== "" ? `${i.matched} of ${i.total}.` : `${i.total} ${i.total === 1 ? e : t}.`;
561
- return /* @__PURE__ */ n(qe, {
562
- ...a,
563
- children: c
564
- });
565
- }
566
- function en({ className: e, ...t }) {
567
- return /* @__PURE__ */ n("p", {
568
- className: p("text-pho-description px-5 text-xs font-normal", "mt-3 [[data-basic-page-callout]_&]:mt-0 [[data-basic-page-stack]>*>&]:mt-0", e),
569
- ...t
570
- });
571
- }
572
- function tn({ animateHeight: e, className: t, children: a, ...r }) {
573
- const i = /* @__PURE__ */ n(W, { children: re.toArray(a) });
574
- return e ? /* @__PURE__ */ n("div", {
575
- className: p(me, "min-h-0 overflow-hidden", t),
576
- ...r,
577
- children: /* @__PURE__ */ n(dt, {
578
- transition: T,
579
- className: te,
580
- children: i
581
- })
582
- }) : /* @__PURE__ */ n("div", {
583
- className: p(bt, t),
584
- ...r,
585
- children: i
586
- });
587
- }
588
- function nn({ className: e, ...t }) {
589
- const { leaving: a, ...r } = xe();
590
- return /* @__PURE__ */ n(E.div, {
591
- ...r,
592
- className: p(wt, a && "overflow-hidden", e),
593
- ...t
594
- });
595
- }
596
- function an({ divided: e = !1, className: t, ...a }) {
597
- return /* @__PURE__ */ n("div", {
598
- className: p(e ? At : Nt, t),
599
- ...a
600
- });
601
- }
602
- function rn({ className: e, icon: t, children: a, ...r }) {
603
- if (t == null || t === !1 || t === !0) return /* @__PURE__ */ n("div", {
604
- "data-basic-page-callout": "",
605
- className: p(Ae, e),
606
- ...r,
607
- children: a
608
- });
609
- const [i, ...c] = re.toArray(a);
610
- return /* @__PURE__ */ w("div", {
611
- "data-basic-page-callout": "",
612
- className: p(Ae, e),
613
- ...r,
614
- children: [/* @__PURE__ */ w("div", {
615
- className: "relative",
616
- children: [/* @__PURE__ */ n("div", {
617
- className: "min-w-0 pr-16",
618
- children: i
619
- }), /* @__PURE__ */ n("div", {
620
- "aria-hidden": !0,
621
- className: "text-pho-primary pointer-events-none absolute top-0 right-0 size-14 opacity-[0.275] [&>svg]:size-full",
622
- children: t
623
- })]
624
- }), c]
625
- });
626
- }
627
- function sn({ id: e, className: t, children: a, ...r }) {
628
- const i = he(e, a);
629
- return /* @__PURE__ */ n("h2", {
630
- id: i,
631
- className: p("text-display-xs text-pho-primary max-w-full min-w-0 scroll-mt-12 truncate font-medium", t),
632
- ...r,
633
- children: a
634
- });
635
- }
636
- function ln({ className: e, ...t }) {
637
- return /* @__PURE__ */ n("p", {
638
- className: p("text-display-xs text-pho-description font-normal", e),
639
- ...t
640
- });
641
- }
642
- function on({ label: e, description: t, htmlFor: a, stacked: r = !1, className: i, children: c, ...o }) {
643
- const { leaving: l, ...s } = xe();
644
- return /* @__PURE__ */ w(E.div, {
645
- ...s,
646
- className: p(xt, r && "sm:flex-col sm:items-stretch sm:justify-start sm:gap-3", l && "overflow-hidden", i),
647
- ...o,
648
- children: [/* @__PURE__ */ w("div", {
649
- className: "min-w-0",
650
- children: [a ? /* @__PURE__ */ n("label", {
651
- htmlFor: a,
652
- className: "text-pho-primary block text-base font-normal",
653
- children: e
654
- }) : /* @__PURE__ */ n("div", {
655
- className: "text-pho-primary text-base font-normal",
656
- children: e
657
- }), t ? /* @__PURE__ */ n("p", {
658
- className: "text-pho-description text-xs",
659
- children: t
660
- }) : null]
661
- }), /* @__PURE__ */ n("div", {
662
- className: p("flex w-full min-w-0 items-center gap-2 sm:w-auto", r && "sm:w-full"),
663
- children: c
664
- })]
665
- });
666
- }
667
- function cn({ className: e, ...t }) {
668
- return /* @__PURE__ */ n("p", {
669
- className: p("text-pho-description max-w-full min-w-0 truncate text-base", e),
670
- ...t
671
- });
672
- }
673
- function un({ error: e, show: t, className: a, children: r, ...i }) {
674
- const c = L(), o = S(K), l = e ?? o?.error ?? void 0;
675
- return /* @__PURE__ */ n(W, {
676
- initial: !1,
677
- children: (t ?? !0) && (l != null || r != null) ? /* @__PURE__ */ n(E.div, {
678
- "data-basic-page-alert": "",
679
- className: "overflow-hidden",
680
- initial: {
681
- height: 0,
682
- opacity: 0
683
- },
684
- animate: {
685
- height: "auto",
686
- opacity: 1
687
- },
688
- exit: {
689
- height: 0,
690
- opacity: 0
691
- },
692
- transition: c ? { duration: 0 } : {
693
- height: T,
694
- opacity: B
695
- },
696
- children: /* @__PURE__ */ n(rt, {
697
- error: l,
698
- className: p("px-5 pb-3", a),
699
- ...i,
700
- children: r
701
- })
702
- }) : null
703
- });
704
- }
705
- function na() {
706
- return S(K)?.requestSave ?? null;
707
- }
708
- var aa = 800, oe = ut.createToastManager(), K = V(null);
709
- function dn({ action: e, errors: t, autoSave: a = !1, className: r, children: i, onChange: c, onBlur: o, ...l }) {
710
- const [s, d] = b(!1), [f, u] = b(!1), [m, g] = b(null), [y, h] = b(t ?? {}), [C, v] = b(null), P = A(null), x = A(null), R = A(null), M = A(!1), O = A(!1), k = A(null), D = A(async () => {
711
- });
712
- I(() => () => {
713
- x.current != null && clearTimeout(x.current);
714
- }, []);
715
- const $ = async () => {
716
- const N = P.current;
717
- if (N == null || e == null) return;
718
- if (M.current) {
719
- O.current = !0;
720
- return;
721
- }
722
- if (!N.checkValidity()) return;
723
- const _ = Object.fromEntries(new FormData(N).entries()), J = R.current;
724
- M.current = !0, v({
725
- field: J,
726
- phase: "saving"
727
- }), g(null);
728
- try {
729
- const F = (await e(_))?.errors;
730
- if (F != null && Object.keys(F).length > 0) {
731
- h(F), v(null);
732
- return;
733
- }
734
- h({}), u(!1), v({
735
- field: J,
736
- phase: "saved"
737
- }), k.current != null && (oe.close(k.current), k.current = null);
738
- } catch (F) {
739
- v(null), g(F), k.current != null && oe.close(k.current), k.current = oe.add({
740
- type: "error",
741
- title: "Couldn't save",
742
- description: F instanceof Error && F.message !== "" ? F.message : "The change is still here — try again.",
743
- timeout: 0,
744
- actionProps: {
745
- children: "Retry",
746
- onClick: () => {
747
- D.current();
748
- }
749
- }
750
- });
751
- } finally {
752
- M.current = !1, O.current && (O.current = !1, D.current());
753
- }
754
- };
755
- D.current = $;
756
- const Y = () => {
757
- x.current != null && clearTimeout(x.current), x.current = setTimeout(() => {
758
- x.current = null, D.current();
759
- }, 800);
760
- }, U = z(() => a ? (N) => {
761
- N != null && (R.current = N), u(!0), Y();
762
- } : null, [a]), H = z(() => ({
763
- pending: s,
764
- dirty: f,
765
- error: m,
766
- auto: C,
767
- requestSave: U
768
- }), [
769
- s,
770
- f,
771
- m,
772
- C,
773
- U
774
- ]);
775
- return /* @__PURE__ */ n(K.Provider, {
776
- value: H,
777
- children: /* @__PURE__ */ n(pt, {
778
- errors: y,
779
- onFormSubmit: async (N) => {
780
- if (e != null) {
781
- d(!0), g(null);
782
- try {
783
- const _ = (await e(N))?.errors;
784
- if (_ != null && Object.keys(_).length > 0) {
785
- h(_);
786
- return;
787
- }
788
- h({}), u(!1);
789
- } catch (_) {
790
- g(_);
791
- } finally {
792
- d(!1);
793
- }
794
- }
795
- },
796
- onChange: (N) => {
797
- u(!0), g(null);
798
- const _ = N.target.name;
799
- _ && _ in y && h((J) => {
800
- const { [_]: F, ...Je } = J;
801
- return Je;
802
- }), a && (_ && (R.current = _), Y()), c?.(N);
803
- },
804
- onBlur: (N) => {
805
- a && f && x.current != null && (clearTimeout(x.current), x.current = null, D.current()), o?.(N);
806
- },
807
- className: p("contents [[data-basic-page-stack]>&]:flex [[data-basic-page-stack]>&]:min-w-0 [[data-basic-page-stack]>&]:flex-col", r),
808
- ...l,
809
- ref: (N) => {
810
- P.current = N;
811
- const _ = l.ref;
812
- typeof _ == "function" ? _(N) : _ != null && (_.current = N);
813
- },
814
- children: /* @__PURE__ */ n("fieldset", {
815
- disabled: s,
816
- "aria-busy": s || void 0,
817
- className: "contents",
818
- children: i
819
- })
820
- })
821
- });
822
- }
823
- function pn({ name: e, className: t, ...a }) {
824
- const r = S(K), i = L(), c = r?.auto ?? null, o = c != null && (e == null || c.field === e), [l, s] = b(!1), d = o ? c.phase : null;
825
- I(() => {
826
- if (d !== "saved") return;
827
- s(!0);
828
- const m = setTimeout(() => s(!1), 1800);
829
- return () => clearTimeout(m);
830
- }, [d, c]);
831
- const f = d === "saving" ? "Saving…" : d === "saved" && l ? "Saved" : null, u = i ? "blur(0px)" : `blur(${Le}px)`;
832
- return /* @__PURE__ */ n("span", {
833
- className: "grid justify-items-end",
834
- children: /* @__PURE__ */ n(W, {
835
- initial: !1,
836
- children: f != null && /* @__PURE__ */ n(E.output, {
837
- initial: {
838
- opacity: 0,
839
- filter: u
840
- },
841
- animate: {
842
- opacity: 1,
843
- filter: "blur(0px)"
844
- },
845
- exit: {
846
- opacity: 0,
847
- filter: u
848
- },
849
- transition: ye,
850
- className: p("text-pho-description pl-8 [grid-area:1/1]", t),
851
- style: { background: "linear-gradient(to left, var(--background-color-pho-primary) calc(100% - 2rem), transparent)" },
852
- ...a,
853
- children: f
854
- }, f)
855
- })
856
- });
857
- }
858
- var fn = "flex min-w-0 flex-col gap-5 p-5 [&>[data-basic-page-alert]]:-mx-5 [&>[data-basic-page-alert]]:-mt-2 [&>[data-basic-page-alert]]:-mb-5 [&>[data-basic-page-footer]]:pr-0 [&>[data-basic-page-reveal]]:flex [&>[data-basic-page-reveal]]:flex-col [&>[data-basic-page-reveal]]:gap-5";
859
- function mn({ className: e, ...t }) {
860
- const a = A(null);
861
- return je(a, "Fields", 20, () => null), /* @__PURE__ */ n("div", {
862
- "data-basic-page-fields": "",
863
- className: p(me, fn, e),
864
- ...t,
865
- ref: (r) => {
866
- a.current = r;
867
- const i = t.ref;
868
- typeof i == "function" ? i(r) : i != null && (i.current = r);
869
- }
870
- });
871
- }
872
- function hn({ className: e, ...t }) {
873
- return /* @__PURE__ */ n("div", {
874
- className: p("flex min-w-0 flex-col gap-5 *:min-w-0 sm:flex-row sm:gap-3 sm:*:flex-1", e),
875
- ...t
876
- });
877
- }
878
- function gn({ children: e = "Save changes", ...t }) {
879
- const a = S(K);
880
- return /* @__PURE__ */ n(ae, {
881
- type: "submit",
882
- variant: "effect",
883
- size: "sm",
884
- loading: a?.pending,
885
- ...t,
886
- children: e
887
- });
888
- }
889
- function vn({ show: e, className: t, ...a }) {
890
- const r = S(K), i = e === "dirty" ? r?.dirty ?? !1 : e, c = /* @__PURE__ */ n("div", {
891
- "data-basic-page-footer": "",
892
- className: p("flex items-center justify-end gap-3 pr-[calc(1.25rem+2.5px)]", t),
893
- ...a
894
- });
895
- return i === void 0 ? c : /* @__PURE__ */ n(We, {
896
- show: i,
897
- gap: "block",
898
- clip: !1,
899
- children: c
900
- });
901
- }
902
- var yn = {
903
- stack: "-2.5rem",
904
- block: "-0.75rem",
905
- fields: "-1.25rem",
906
- none: "0px"
907
- };
908
- function We({ show: e, clip: t = !0, gap: a = "stack", dividers: r, className: i, ...c }) {
909
- const o = L(), l = yn[r ? "none" : a], s = A(null), d = A(e !== !0);
910
- I(() => {
911
- d.current = !0;
912
- }, []);
913
- const f = () => {
914
- t && s.current && (s.current.style.overflow = "hidden");
915
- }, u = () => {
916
- s.current && (s.current.style.overflow = "");
917
- };
918
- return e === void 0 ? /* @__PURE__ */ n(E.div, {
919
- initial: o ? !1 : {
920
- opacity: 0,
921
- y: X
922
- },
923
- animate: {
924
- opacity: 1,
925
- y: 0
926
- },
927
- transition: {
928
- y: T,
929
- opacity: B
930
- },
931
- className: p(r && te, i),
932
- ...c
933
- }) : /* @__PURE__ */ n(W, {
934
- initial: !1,
935
- children: e ? /* @__PURE__ */ n(E.div, {
936
- "data-basic-page-reveal": "",
937
- ref: (m) => {
938
- s.current = m, t && m && d.current && (m.style.overflow = "hidden");
939
- },
940
- onAnimationStart: f,
941
- onAnimationComplete: u,
942
- initial: {
943
- height: 0,
944
- opacity: 0,
945
- marginTop: l
946
- },
947
- animate: {
948
- height: "auto",
949
- opacity: 1,
950
- marginTop: 0
951
- },
952
- exit: {
953
- height: 0,
954
- opacity: 0,
955
- marginTop: l
956
- },
957
- transition: o ? { duration: 0 } : {
958
- height: T,
959
- marginTop: T,
960
- opacity: B
961
- },
962
- className: p(r && te, i),
963
- ...c
964
- }) : null
965
- });
966
- }
967
- var bn = "top-4 left-5 h-8 text-base [&>svg]:size-[1.125em] [&>svg]:shrink-0", xn = "(min-width: 40rem)";
968
- function wn() {
969
- return typeof window < "u" && typeof window.matchMedia == "function" && !window.matchMedia(xn).matches;
970
- }
971
- var Xe = V(null);
972
- function Ke({ className: e, children: t, ...a }) {
973
- const r = re.toArray(t).filter(mt), i = r.map((P) => P.props.children ?? null), c = Ge();
974
- Ht(i);
975
- const [o] = b(wn), l = L(), s = r.length, d = Oe(), f = !o && s >= Nn, u = S(ge), m = s > 0 ? r[s - 1]?.props : null, g = m?.children ?? "Back", y = m?.href, h = m?.onClick;
976
- G(() => {
977
- if (!(u == null || y == null))
978
- return u.setTail({
979
- label: g,
980
- href: y,
981
- onClick: h
982
- }), () => u.setTail(null);
983
- }, [
984
- u,
985
- g,
986
- y,
987
- h
988
- ]);
989
- const [C, v] = b(!l && !o && c != null && c.labels.length > s);
990
- return /* @__PURE__ */ n("nav", {
991
- "aria-label": "Breadcrumb",
992
- "data-basic-page-back": "",
993
- className: p("absolute top-4 left-3 flex min-w-max items-center", e),
994
- ...a,
995
- children: /* @__PURE__ */ w("ol", {
996
- className: "m-0 flex list-none items-center p-0",
997
- children: [r.map((P, x) => f && x > 0 && x < s - 2 ? null : /* @__PURE__ */ w(ft, { children: [f && x === s - 2 && /* @__PURE__ */ w("li", {
998
- className: "m-0 flex items-center max-sm:hidden",
999
- children: [/* @__PURE__ */ n("span", {
1000
- "aria-hidden": !0,
1001
- className: ue,
1002
- children: ne
1003
- }), /* @__PURE__ */ w(j.Root, { children: [/* @__PURE__ */ n(j.Trigger, { render: /* @__PURE__ */ n(ae, {
1004
- variant: "ghost",
1005
- size: "sm",
1006
- "aria-label": "Hidden pages",
1007
- className: "px-2",
1008
- children: An
1009
- }) }), /* @__PURE__ */ n(j.Portal, { children: /* @__PURE__ */ n(j.Positioner, {
1010
- align: "start",
1011
- sideOffset: 4,
1012
- children: /* @__PURE__ */ n(j.Popup, { children: r.slice(1, s - 2).map((R, M) => {
1013
- const O = R.props;
1014
- return /* @__PURE__ */ n(j.LinkItem, {
1015
- render: /* @__PURE__ */ n(d, {
1016
- href: O.href,
1017
- onClick: O.onClick
1018
- }),
1019
- children: O.children ?? "Back"
1020
- }, R.key ?? M);
1021
- }) })
1022
- }) })] })]
1023
- }), /* @__PURE__ */ n("li", {
1024
- className: p("m-0 flex items-center", x < s - 1 && "max-sm:hidden"),
1025
- children: /* @__PURE__ */ n(Xe.Provider, {
1026
- value: {
1027
- index: x,
1028
- count: s,
1029
- departing: c,
1030
- narrow: o
1031
- },
1032
- children: P
1033
- })
1034
- })] }, P.key ?? x)), C && /* @__PURE__ */ n("li", {
1035
- "aria-hidden": !0,
1036
- className: "m-0 flex items-center max-sm:hidden",
1037
- children: /* @__PURE__ */ n(E.span, {
1038
- initial: { opacity: 1 },
1039
- animate: { opacity: 0 },
1040
- transition: Fe,
1041
- onAnimationComplete: () => v(!1),
1042
- className: ue,
1043
- children: ne
1044
- })
1045
- })]
1046
- })
1047
- });
1048
- }
1049
- var ue = "text-pho-description -mx-1 inline-flex shrink-0 text-base select-none", ne = "/", Nn = 4, An = "…";
1050
- function Qe({ href: e, className: t, morphId: a, children: r = "Back", ...i }) {
1051
- const c = S(Xe), o = L(), l = a != null && !o, s = ze(l ? a : void 0);
1052
- if (c == null) throw new Error("BasicPage.Crumb must be rendered inside BasicPage.Breadcrumbs");
1053
- const { index: d, count: f, departing: u, narrow: m } = c, g = d === 0, y = d === f - 1, h = u != null && u.labels.length < f, C = u != null && u.labels.length > f, v = y && (u == null || h || m), P = g || y, x = g && y ? "" : g ? "max-sm:hidden" : "sm:hidden", R = u != null, M = y ? m ? C ? "slide" : "fade" : v ? "fade" : void 0 : void 0, [O, k] = b(l && m && s.fly && u != null && !C ? u.labels[u.labels.length - 1] : null), D = l && P && !R, $ = l && !g && y && (u == null || h);
1054
- return /* @__PURE__ */ w(Me, { children: [!g && /* @__PURE__ */ n("span", {
1055
- "aria-hidden": !0,
1056
- className: p(ue, "max-sm:hidden"),
1057
- children: $ ? /* @__PURE__ */ n(E.span, {
1058
- initial: s.fly ? {
1059
- opacity: 0,
1060
- x: Ce
1061
- } : { opacity: 0 },
1062
- animate: s.fly ? {
1063
- opacity: 1,
1064
- x: 0
1065
- } : { opacity: 1 },
1066
- transition: s.fly ? _e : B,
1067
- className: "inline-flex",
1068
- children: ne
1069
- }) : ne
1070
- }), /* @__PURE__ */ n(de, {
1071
- variant: "ghost",
1072
- size: "sm",
1073
- href: e,
1074
- prefix: P ? D ? /* @__PURE__ */ n(E.span, {
1075
- initial: s.fly ? {
1076
- opacity: 0,
1077
- x: Ce
1078
- } : { opacity: 0 },
1079
- animate: s.fly ? {
1080
- opacity: 1,
1081
- x: 0
1082
- } : { opacity: 1 },
1083
- transition: s.fly ? _e : B,
1084
- className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
1085
- children: /* @__PURE__ */ n(ee, {})
1086
- }) : /* @__PURE__ */ n("span", {
1087
- className: p("inline-flex [&>svg]:size-[1.125em] [&>svg]:shrink-0", x),
1088
- children: /* @__PURE__ */ n(ee, {})
1089
- }) : /* @__PURE__ */ n("span", { className: "hidden" }),
1090
- className: p("min-w-max", t),
1091
- ...i,
1092
- children: l && a != null ? /* @__PURE__ */ w("span", {
1093
- className: p("relative block", !s.fly && M === "slide" && "overflow-hidden", !y && "max-w-40 truncate"),
1094
- children: [/* @__PURE__ */ n(Ve, {
1095
- morphId: a,
1096
- fromClassName: "text-pho-primary",
1097
- fly: s.fly,
1098
- morphRef: s.ref,
1099
- arrival: M,
1100
- children: r
1101
- }), O != null && /* @__PURE__ */ n(E.span, {
1102
- "aria-hidden": !0,
1103
- initial: {
1104
- x: 0,
1105
- opacity: 1
1106
- },
1107
- animate: {
1108
- x: Bt,
1109
- opacity: 0
1110
- },
1111
- transition: Mt,
1112
- onAnimationComplete: () => k(null),
1113
- className: "pointer-events-none absolute inset-y-0 left-0 whitespace-nowrap",
1114
- children: O
1115
- })]
1116
- }) : /* @__PURE__ */ n("span", {
1117
- className: p("block", !y && "max-w-40 truncate"),
1118
- children: r
1119
- })
1120
- })] });
1121
- }
1122
- function En({ className: e, ...t }) {
1123
- return /* @__PURE__ */ n(Ke, {
1124
- className: e,
1125
- children: /* @__PURE__ */ n(Qe, { ...t })
1126
- });
1127
- }
1128
- function Cn({ label: e, description: t, leading: a, href: r, className: i, children: c, ...o }) {
1129
- const l = Oe(), s = z(() => E.create(l), [l]), { leaving: d, ...f } = xe();
1130
- return /* @__PURE__ */ w(s, {
1131
- href: r,
1132
- ...f,
1133
- ...o,
1134
- className: p("flex min-h-[4.25rem] min-w-0 flex-row items-center justify-between gap-6 px-5 py-4", "group outline-pho-brand hover:bg-pho-primary-hover cursor-pointer transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2", "aria-[current=page]:bg-pho-primary-hover", "first:rounded-t-[calc(var(--radius-base)-1px)] last:rounded-b-[calc(var(--radius-base)-1px)]", d && "overflow-hidden", i),
1135
- children: [/* @__PURE__ */ w("div", {
1136
- className: p("flex min-w-0 flex-1 items-center", a != null && "gap-3"),
1137
- children: [a, /* @__PURE__ */ w("div", {
1138
- className: "min-w-0",
1139
- children: [/* @__PURE__ */ n("div", {
1140
- className: "flex min-w-0 items-center gap-1",
1141
- children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ n("p", {
1142
- className: "text-pho-primary truncate text-base font-medium",
1143
- children: e
1144
- }) : e
1145
- }), t ? /* @__PURE__ */ n("div", {
1146
- className: "text-pho-description truncate text-xs",
1147
- children: t
1148
- }) : null]
1149
- })]
1150
- }), /* @__PURE__ */ w("div", {
1151
- className: "flex min-w-0 items-center justify-end gap-2",
1152
- children: [c != null ? /* @__PURE__ */ n("div", {
1153
- className: "min-w-0",
1154
- children: c
1155
- }) : null, /* @__PURE__ */ n(yt, {
1156
- "aria-hidden": !0,
1157
- className: "text-pho-secondary group-hover:text-pho-secondary-hover size-4 shrink-0 transition-colors"
1158
- })]
1159
- })]
1160
- });
1161
- }
1162
- function _n({ open: e, variant: t = "overlay", modal: a = !1, placeholder: r, onClose: i, children: c }) {
1163
- const o = S(De), l = e ?? re.toArray(c).length > 0, s = o?.setOpen, d = o?.setPresent;
1164
- return G(() => {
1165
- if (d != null)
1166
- return d(!0), () => d(!1);
1167
- }, [d]), G(() => {
1168
- if (s != null)
1169
- return s(l), () => s(!1);
1170
- }, [s, l]), I(() => {
1171
- o == null && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("BasicPage.Aside: needs a `BasicPage.Root` around it.");
1172
- }, [o]), o == null || o.slot == null ? null : o.presentation === "page" ? Ne(l ? /* @__PURE__ */ n("div", {
1173
- "data-basic-page-aside": "page",
1174
- className: "flex min-w-0 flex-1 flex-col",
1175
- children: c
1176
- }) : null, o.slot) : t === "inline" ? Ne(/* @__PURE__ */ n(Sn, {
1177
- width: o.width,
1178
- paneHeight: o.paneHeight,
1179
- onClose: i,
1180
- open: l,
1181
- placeholder: r,
1182
- children: c
1183
- }), o.slot) : /* @__PURE__ */ n(Rn, {
1184
- container: o.slot,
1185
- width: o.width,
1186
- paneHeight: o.paneHeight,
1187
- onClose: i,
1188
- open: l,
1189
- modal: a,
1190
- children: c
1191
- });
1192
- }
1193
- function Ye() {
1194
- const [e, t] = b(null), a = z(() => ({ setBack: t }), []), r = A(null);
1195
- return {
1196
- back: e,
1197
- panel: a,
1198
- closeRef: r,
1199
- leave: Be(() => {
1200
- const i = r.current?.querySelector("a, button");
1201
- return i == null ? !1 : (i.click(), !0);
1202
- }, [])
1203
- };
1204
- }
1205
- var Pe = {
1206
- variant: "ghost",
1207
- size: "sm",
1208
- svgOnly: !0,
1209
- "aria-label": "Close",
1210
- children: /* @__PURE__ */ n(ct, {})
1211
- };
1212
- function Ue({ back: e, onClose: t, closeRef: a, panel: r, children: i }) {
1213
- return /* @__PURE__ */ w(Me, { children: [/* @__PURE__ */ n("span", {
1214
- ref: a,
1215
- className: "absolute top-2 right-2 z-30",
1216
- children: e != null ? /* @__PURE__ */ n(de, {
1217
- ...Pe,
1218
- href: e.href,
1219
- onClick: e.onClick
1220
- }) : t != null ? /* @__PURE__ */ n(ae, {
1221
- ...Pe,
1222
- onClick: t
1223
- }) : null
1224
- }), /* @__PURE__ */ w(Q.Root, {
1225
- className: "min-h-0 flex-1",
1226
- children: [/* @__PURE__ */ n(Q.Viewport, { children: /* @__PURE__ */ n(Q.Content, {
1227
- className: "flex min-h-full flex-col",
1228
- children: /* @__PURE__ */ n(He.Provider, {
1229
- value: r,
1230
- children: i
1231
- })
1232
- }) }), /* @__PURE__ */ n(Q.Scrollbar, { children: /* @__PURE__ */ n(Q.Thumb, {}) })]
1233
- })] });
1234
- }
1235
- function Sn({ width: e, paneHeight: t, onClose: a, open: r, placeholder: i, children: c }) {
1236
- const o = L(), { back: l, panel: s, closeRef: d, leave: f } = Ye(), u = o ? "blur(0px)" : `blur(${Le}px)`, m = t ?? "100dvh";
1237
- I(() => {
1238
- const y = (h) => {
1239
- h.key !== "Escape" || h.defaultPrevented || f() && h.preventDefault();
1240
- };
1241
- return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
1242
- }, [f]);
1243
- const g = {
1244
- initial: {
1245
- opacity: 0,
1246
- filter: u
1247
- },
1248
- animate: {
1249
- opacity: 1,
1250
- filter: "blur(0px)"
1251
- },
1252
- exit: {
1253
- opacity: 0,
1254
- filter: u
1255
- },
1256
- transition: o ? { duration: 0 } : ye
1257
- };
1258
- return /* @__PURE__ */ n("aside", {
1259
- "data-basic-page-aside": "panel",
1260
- "data-basic-page-aside-variant": "inline",
1261
- className: "relative flex shrink-0 flex-col",
1262
- style: {
1263
- width: e,
1264
- minHeight: m
1265
- },
1266
- children: /* @__PURE__ */ n("div", {
1267
- className: "border-pho-secondary bg-pho-primary sticky top-0 grid border-l *:min-h-0 *:[grid-area:1/1]",
1268
- style: { height: m },
1269
- children: /* @__PURE__ */ n(W, {
1270
- initial: !1,
1271
- children: r ? /* @__PURE__ */ n(E.div, {
1272
- ...g,
1273
- className: "relative flex flex-col",
1274
- children: /* @__PURE__ */ n(Ue, {
1275
- back: l,
1276
- onClose: a,
1277
- closeRef: d,
1278
- panel: s,
1279
- children: c
1280
- })
1281
- }, "page") : /* @__PURE__ */ n(E.div, {
1282
- ...g,
1283
- className: "flex flex-col",
1284
- children: i
1285
- }, "empty")
1286
- })
1287
- })
1288
- });
1289
- }
1290
- function Rn({ container: e, width: t, paneHeight: a, onClose: r, open: i, modal: c, children: o }) {
1291
- const { back: l, panel: s, closeRef: d, leave: f } = Ye(), u = a ?? "100dvh";
1292
- return /* @__PURE__ */ n(Z.Root, {
1293
- open: i,
1294
- modal: c ? "trap-focus" : !1,
1295
- disablePointerDismissal: !0,
1296
- onOpenChange: (m, g) => {
1297
- m || (g.cancel(), f());
1298
- },
1299
- children: /* @__PURE__ */ w(Z.Portal, {
1300
- container: e,
1301
- className: "contents",
1302
- children: [c ? /* @__PURE__ */ n(Z.Backdrop, {
1303
- "data-basic-page-aside-backdrop": "",
1304
- className: p("bg-pho-overlay absolute inset-0 z-30 transition-opacity duration-200 ease-out motion-reduce:transition-none", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0"),
1305
- onClick: f
1306
- }) : null, /* @__PURE__ */ n(Z.Popup, {
1307
- "data-basic-page-aside": "panel",
1308
- "data-basic-page-aside-variant": "overlay",
1309
- initialFocus: c ? void 0 : !1,
1310
- finalFocus: c ? void 0 : !1,
1311
- className: p("absolute inset-y-0 right-0 z-30 flex flex-col outline-none", "transition-[translate,opacity] duration-250 ease-out motion-reduce:transition-none", "data-[ending-style]:translate-x-3 data-[ending-style]:opacity-0 data-[ending-style]:duration-200 data-[starting-style]:translate-x-3 data-[starting-style]:opacity-0"),
1312
- style: { width: t },
1313
- children: /* @__PURE__ */ n("div", {
1314
- className: "border-pho-secondary bg-pho-primary shadow-pho-xl sticky top-0 flex flex-col border-l",
1315
- style: { height: u },
1316
- children: /* @__PURE__ */ n(Ue, {
1317
- back: l,
1318
- onClose: r,
1319
- closeRef: d,
1320
- panel: s,
1321
- children: o
1322
- })
1323
- })
1324
- })]
1325
- })
1326
- });
1327
- }
1328
- var kn = "14rem", Tn = "transition-[width] duration-[330ms] ease-pho-spring motion-reduce:transition-none", Ie = "transition-[opacity,visibility] duration-200 ease-out motion-reduce:transition-none";
1329
- function Pn({ variant: e = "box", fold: t = "auto", value: a, onValueChange: r, placeholder: i, label: c, className: o, ...l }) {
1330
- const s = S(pe), d = fe(s?.subscribe ?? ve, () => s?.get().api ?? null, () => null), f = a != null;
1331
- I(() => {
1332
- if (!(s == null || f))
1333
- return s.adopt(!0), () => s.adopt(!1);
1334
- }, [s, f]);
1335
- const u = f ? {
1336
- query: a,
1337
- setQuery: r,
1338
- placeholder: i ?? "Search",
1339
- label: c ?? i ?? "Search"
1340
- } : d == null ? null : {
1341
- query: d.query,
1342
- setQuery: d.setQuery,
1343
- placeholder: d.placeholder,
1344
- label: c ?? d.placeholder
1345
- }, [m, g] = b(!1), y = A(null), h = m || (u?.query ?? "") !== "";
1346
- if (I(() => {
1347
- if (!m) return;
1348
- let v = 0, P = 0;
1349
- const x = () => {
1350
- const R = y.current;
1351
- R != null && (R.focus(), document.activeElement !== R && P++ < 5 && (v = requestAnimationFrame(x)));
1352
- };
1353
- return v = requestAnimationFrame(x), () => cancelAnimationFrame(v);
1354
- }, [m]), e === "ghost") return /* @__PURE__ */ n("div", {
1355
- "data-basic-page-search": "",
1356
- "data-variant": "ghost",
1357
- className: p("flex min-w-0 flex-1", u == null && "hidden", o),
1358
- ...l,
1359
- children: u != null && /* @__PURE__ */ n(lt, {
1360
- value: u.query,
1361
- onChange: u.setQuery,
1362
- placeholder: u.placeholder,
1363
- "aria-label": u.label,
1364
- onKeyDown: (v) => {
1365
- v.key === "Escape" && (v.preventDefault(), u.setQuery(""), v.currentTarget.blur());
1366
- }
1367
- })
1368
- });
1369
- const C = t === "auto";
1370
- return /* @__PURE__ */ n("div", {
1371
- "data-basic-page-search": "",
1372
- "data-expanded": h || void 0,
1373
- className: p("grid min-w-0 content-center", "[[data-basic-page-header]>&]:col-start-2 [[data-basic-page-header]>&]:row-span-2 [[data-basic-page-header]>&]:row-start-1 [[data-basic-page-header]>&]:ml-4 [[data-basic-page-header]>&]:justify-items-end [[data-basic-page-header]>&]:self-center", "[[data-basic-page-header]:has([data-basic-page-header-action])>&]:self-start", u == null && "hidden", o),
1374
- ...l,
1375
- children: u != null && /* @__PURE__ */ w("div", {
1376
- className: p("grid w-9 max-w-full justify-items-end *:[grid-area:1/1]", Tn, C && "@[36rem]:w-56"),
1377
- style: h ? { width: kn } : void 0,
1378
- children: [/* @__PURE__ */ n(ae, {
1379
- variant: "outlined",
1380
- size: "sm",
1381
- shape: "circle",
1382
- svgOnly: !0,
1383
- "aria-label": u.label,
1384
- "aria-hidden": h || void 0,
1385
- tabIndex: h ? -1 : void 0,
1386
- onClick: () => g(!0),
1387
- className: p(Ie, h ? "pointer-events-none invisible opacity-0" : "visible opacity-100", C && "@[36rem]:pointer-events-none @[36rem]:invisible @[36rem]:opacity-0"),
1388
- children: /* @__PURE__ */ n(we, {})
1389
- }), /* @__PURE__ */ n("div", {
1390
- inert: !C && !h,
1391
- className: p("w-full min-w-0", Ie, h ? "visible opacity-100" : "pointer-events-none invisible opacity-0", C && "@[36rem]:pointer-events-auto @[36rem]:visible @[36rem]:opacity-100"),
1392
- children: /* @__PURE__ */ w(se.Root, {
1393
- size: "sm",
1394
- className: "w-full",
1395
- children: [/* @__PURE__ */ n(se.Addon, { children: /* @__PURE__ */ n(we, {}) }), /* @__PURE__ */ n(se.Input, {
1396
- ref: y,
1397
- type: "search",
1398
- value: u.query,
1399
- onChange: (v) => u.setQuery(v.target.value),
1400
- onBlur: () => {
1401
- u.query === "" && g(!1);
1402
- },
1403
- onKeyDown: (v) => {
1404
- v.key === "Escape" && (v.preventDefault(), u.setQuery(""), g(!1), v.currentTarget.blur());
1405
- },
1406
- placeholder: u.placeholder,
1407
- "aria-label": u.label
1408
- })]
1409
- })
1410
- })]
1411
- })
1412
- });
1413
- }
1414
- var ra = {
1415
- Root: Rt,
1416
- Aside: _n,
1417
- Search: Pn,
1418
- Table: st,
1419
- CondenseScope: Ft,
1420
- Breadcrumbs: Ke,
1421
- Crumb: Qe,
1422
- Back: En,
1423
- Title: jt,
1424
- Stack: Qt,
1425
- Header: Yt,
1426
- HeaderAction: Ut,
1427
- SectionTitle: Jt,
1428
- Description: qe,
1429
- TableCount: Zt,
1430
- SectionFooter: en,
1431
- Card: tn,
1432
- Item: nn,
1433
- ItemPanel: an,
1434
- Callout: rn,
1435
- CalloutTitle: sn,
1436
- CalloutDescription: ln,
1437
- Row: on,
1438
- RowLink: Cn,
1439
- Value: cn,
1440
- Alert: un,
1441
- Footer: vn,
1442
- Form: dn,
1443
- Saved: pn,
1444
- Fields: mn,
1445
- Inline: hn,
1446
- Submit: gn,
1447
- Reveal: We
1448
- };
1449
- export {
1450
- Nt as a,
1451
- ra as c,
1452
- Gt as d,
1453
- oe as f,
1454
- wt as i,
1455
- ye as l,
1456
- ta as m,
1457
- Ae as n,
1458
- At as o,
1459
- na as p,
1460
- bt as r,
1461
- xt as s,
1462
- aa as t,
1463
- Re as u
1464
- };
1465
-
1466
- //# sourceMappingURL=basic-page-CB8dQ0jX.js.map