@geomak/ui 1.5.1 → 1.5.3
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/index.cjs +127 -58
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +17 -4
- package/dist/index.d.ts +17 -4
- package/dist/index.js +127 -58
- package/dist/index.js.map +1 -1
- package/dist/styles.css +44 -87
- package/package.json +14 -3
package/dist/index.cjs
CHANGED
|
@@ -337,7 +337,7 @@ function Modal({
|
|
|
337
337
|
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
338
338
|
framerMotion.motion.div,
|
|
339
339
|
{
|
|
340
|
-
className: "fixed inset-0 bg-
|
|
340
|
+
className: "fixed inset-0 bg-black/40 z-overlay",
|
|
341
341
|
initial: { opacity: 0 },
|
|
342
342
|
animate: { opacity: 1 },
|
|
343
343
|
exit: { opacity: 0 },
|
|
@@ -347,10 +347,9 @@ function Modal({
|
|
|
347
347
|
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
348
348
|
framerMotion.motion.div,
|
|
349
349
|
{
|
|
350
|
-
className: "fixed left-1/2 top-1/2 z-
|
|
350
|
+
className: "fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none",
|
|
351
351
|
style: {
|
|
352
|
-
|
|
353
|
-
height: size[1],
|
|
352
|
+
maxWidth: size[0],
|
|
354
353
|
x: "-50%",
|
|
355
354
|
y: "-50%"
|
|
356
355
|
},
|
|
@@ -364,19 +363,19 @@ function Modal({
|
|
|
364
363
|
duration: 0.25
|
|
365
364
|
},
|
|
366
365
|
children: [
|
|
367
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 flex-shrink-0 items-center justify-between border-b border-
|
|
368
|
-
/* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-base font-semibold text-
|
|
366
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 flex-shrink-0 items-center justify-between border-b border-border px-5", children: [
|
|
367
|
+
/* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-base font-semibold text-foreground tracking-tight", children: title }),
|
|
369
368
|
/* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
370
369
|
"button",
|
|
371
370
|
{
|
|
372
371
|
"aria-label": "Close",
|
|
373
|
-
className: "flex h-7 w-7 items-center justify-center rounded-lg text-
|
|
372
|
+
className: "flex h-7 w-7 items-center justify-center rounded-lg text-foreground-muted hover:bg-surface-raised hover:text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
374
373
|
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
|
|
375
374
|
}
|
|
376
375
|
) })
|
|
377
376
|
] }),
|
|
378
377
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children: isOpen && children }),
|
|
379
|
-
hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-
|
|
378
|
+
hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-border px-5 py-3", children: [
|
|
380
379
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
381
380
|
Button,
|
|
382
381
|
{
|
|
@@ -421,7 +420,7 @@ function Drawer({
|
|
|
421
420
|
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
422
421
|
framerMotion.motion.div,
|
|
423
422
|
{
|
|
424
|
-
className: "fixed inset-0 bg-
|
|
423
|
+
className: "fixed inset-0 bg-black/40 z-overlay",
|
|
425
424
|
initial: { opacity: 0 },
|
|
426
425
|
animate: { opacity: 1 },
|
|
427
426
|
exit: { opacity: 0 },
|
|
@@ -431,8 +430,8 @@ function Drawer({
|
|
|
431
430
|
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
432
431
|
framerMotion.motion.div,
|
|
433
432
|
{
|
|
434
|
-
className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-
|
|
435
|
-
style: { width },
|
|
433
|
+
className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none`,
|
|
434
|
+
style: { width: `min(calc(100vw - 1rem), ${width}px)` },
|
|
436
435
|
initial: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
|
|
437
436
|
animate: { x: 0, opacity: 1 },
|
|
438
437
|
exit: { x: reduced ? 0 : hiddenX, opacity: reduced ? 0 : 1 },
|
|
@@ -446,19 +445,19 @@ function Drawer({
|
|
|
446
445
|
opacity: { duration: 0 }
|
|
447
446
|
},
|
|
448
447
|
children: [
|
|
449
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex h-14 flex-shrink-0 items-center justify-between border-b border-
|
|
450
|
-
/* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-base font-semibold text-
|
|
448
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex h-14 flex-shrink-0 items-center justify-between border-b border-border px-5 ${isRight ? "flex-row-reverse" : ""}`, children: [
|
|
449
|
+
/* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { className: "text-base font-semibold text-foreground tracking-tight", children: title }),
|
|
451
450
|
/* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
452
451
|
"button",
|
|
453
452
|
{
|
|
454
453
|
"aria-label": "Close drawer",
|
|
455
|
-
className: "flex h-7 w-7 items-center justify-center rounded-lg text-
|
|
454
|
+
className: "flex h-7 w-7 items-center justify-center rounded-lg text-foreground-muted hover:bg-surface-raised hover:text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
456
455
|
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
|
|
457
456
|
}
|
|
458
457
|
) })
|
|
459
458
|
] }),
|
|
460
459
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5", children: isOpen && children }),
|
|
461
|
-
hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-
|
|
460
|
+
hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-border px-5 py-3 ${isRight ? "justify-start" : "justify-end"}`, children: [
|
|
462
461
|
/* @__PURE__ */ jsxRuntime.jsx(Button, { style: { width: 90 }, content: cancelText, onClick: onCancel }),
|
|
463
462
|
/* @__PURE__ */ jsxRuntime.jsx(Button, { style: { width: 90 }, content: okText, onClick: onOk })
|
|
464
463
|
] })
|
|
@@ -490,11 +489,11 @@ function Tooltip({
|
|
|
490
489
|
className: [
|
|
491
490
|
// Layout + typography
|
|
492
491
|
"pointer-events-none z-[500000] max-w-[220px] px-2.5 py-1.5",
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
"
|
|
496
|
-
//
|
|
497
|
-
"shadow-md",
|
|
492
|
+
// Inverted surface: dark on light, light on dark — both readable
|
|
493
|
+
"bg-foreground text-background",
|
|
494
|
+
"text-xs font-medium leading-snug",
|
|
495
|
+
// Shape + shadow
|
|
496
|
+
"rounded-md shadow-md",
|
|
498
497
|
// Out animation (always the same — just fade)
|
|
499
498
|
"data-[state=closed]:animate-tooltip-out",
|
|
500
499
|
// In animation — direction-aware
|
|
@@ -507,7 +506,7 @@ function Tooltip({
|
|
|
507
506
|
{
|
|
508
507
|
width: 10,
|
|
509
508
|
height: 5,
|
|
510
|
-
className: "fill-foreground
|
|
509
|
+
className: "fill-foreground"
|
|
511
510
|
}
|
|
512
511
|
)
|
|
513
512
|
]
|
|
@@ -560,15 +559,15 @@ function Tabs({
|
|
|
560
559
|
onValueChange: handleValueChange,
|
|
561
560
|
className: "h-full max-w-full flex flex-col gap-2",
|
|
562
561
|
children: [
|
|
563
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "
|
|
562
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface border border-border rounded-lg flex items-center justify-between flex-shrink-0 w-full p-1 overflow-hidden", children: [
|
|
564
563
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
565
564
|
"button",
|
|
566
565
|
{
|
|
567
566
|
type: "button",
|
|
568
567
|
onClick: toPreviousTab,
|
|
569
568
|
"aria-label": "Previous tab",
|
|
570
|
-
className: "cursor-pointer rounded-lg transition-
|
|
571
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke:
|
|
569
|
+
className: "cursor-pointer rounded-lg transition-colors duration-150 hover:bg-surface-raised text-foreground-secondary hover:text-foreground rotate-180 flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
570
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-6 w-6", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
572
571
|
}
|
|
573
572
|
),
|
|
574
573
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -580,7 +579,7 @@ function Tabs({
|
|
|
580
579
|
TabsPrimitive__namespace.Trigger,
|
|
581
580
|
{
|
|
582
581
|
value: tab.key,
|
|
583
|
-
className: "snap-start snap-always flex items-center justify-between gap-2
|
|
582
|
+
className: "snap-start snap-always flex items-center justify-between gap-2 px-3 py-2 rounded-3xl cursor-pointer transition-all duration-200 select-none h-10 flex-1 min-w-[120px] max-w-[220px] flex-shrink-0\n text-foreground-secondary bg-surface-raised\n hover:bg-surface hover:text-foreground\n data-[state=active]:bg-accent data-[state=active]:text-accent-foreground\n focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
584
583
|
children: [
|
|
585
584
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm", children: tab.title }),
|
|
586
585
|
tabsClosable && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -592,8 +591,8 @@ function Tabs({
|
|
|
592
591
|
e.stopPropagation();
|
|
593
592
|
onTabClose?.(tab.key);
|
|
594
593
|
},
|
|
595
|
-
className: "flex-shrink-0 rounded hover:bg-
|
|
596
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke:
|
|
594
|
+
className: "flex-shrink-0 rounded hover:bg-black/10 p-0.5 transition-colors",
|
|
595
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
597
596
|
}
|
|
598
597
|
)
|
|
599
598
|
]
|
|
@@ -608,12 +607,12 @@ function Tabs({
|
|
|
608
607
|
type: "button",
|
|
609
608
|
onClick: toNextTab,
|
|
610
609
|
"aria-label": "Next tab",
|
|
611
|
-
className: "cursor-pointer rounded-lg transition-
|
|
612
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke:
|
|
610
|
+
className: "cursor-pointer rounded-lg transition-colors duration-150 hover:bg-surface-raised text-foreground-secondary hover:text-foreground flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
611
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-6 w-6", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
613
612
|
}
|
|
614
613
|
)
|
|
615
614
|
] }),
|
|
616
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 rounded-lg w-full h-
|
|
615
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 rounded-lg w-full flex-1 min-h-0 bg-surface border border-border overflow-hidden", children: isLazy ? (
|
|
617
616
|
// Mount only the active content
|
|
618
617
|
tabs.filter((t) => t.key === value).map((t) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { value: t.key, className: "w-full h-full focus:outline-none", children: t.content }, t.key))
|
|
619
618
|
) : (
|
|
@@ -637,7 +636,7 @@ function TreeNodeItem({
|
|
|
637
636
|
"button",
|
|
638
637
|
{
|
|
639
638
|
type: "button",
|
|
640
|
-
className: "flex w-full items-center gap-2.5 cursor-pointer select-none group text-left rounded-md px-2 py-1.5 hover:bg-
|
|
639
|
+
className: "flex w-full items-center gap-2.5 cursor-pointer select-none group text-left rounded-md px-2 py-1.5 hover:bg-surface-raised transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
641
640
|
style: { paddingLeft: depth * 12 + 8 },
|
|
642
641
|
onClick: () => onNodeClick({
|
|
643
642
|
isParent: false,
|
|
@@ -647,8 +646,8 @@ function TreeNodeItem({
|
|
|
647
646
|
parentLabel: item.parentLabel
|
|
648
647
|
}),
|
|
649
648
|
children: [
|
|
650
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full flex-shrink-0 bg-
|
|
651
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-
|
|
649
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full flex-shrink-0 bg-foreground-muted group-hover:bg-accent transition-colors duration-150" }),
|
|
650
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-secondary group-hover:text-foreground transition-colors duration-150", children: item.label })
|
|
652
651
|
]
|
|
653
652
|
}
|
|
654
653
|
);
|
|
@@ -661,7 +660,7 @@ function TreeNodeItem({
|
|
|
661
660
|
defaultValue: initialOpen,
|
|
662
661
|
style: { paddingLeft: depth * 12 },
|
|
663
662
|
children: /* @__PURE__ */ jsxRuntime.jsxs(Accordion__namespace.Item, { value: item.key, className: "border-none", children: [
|
|
664
|
-
/* @__PURE__ */ jsxRuntime.jsxs(Accordion__namespace.Trigger, { className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
663
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Accordion__namespace.Trigger, { className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-accent w-full text-left rounded-md hover:bg-surface-raised transition-colors duration-150", children: [
|
|
665
664
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
666
665
|
"svg",
|
|
667
666
|
{
|
|
@@ -669,7 +668,7 @@ function TreeNodeItem({
|
|
|
669
668
|
fill: "none",
|
|
670
669
|
stroke: "currentColor",
|
|
671
670
|
strokeWidth: 2.5,
|
|
672
|
-
className: "h-3.5 w-3.5 flex-shrink-0 text-
|
|
671
|
+
className: "h-3.5 w-3.5 flex-shrink-0 text-foreground-muted transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
|
|
673
672
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
674
673
|
"path",
|
|
675
674
|
{
|
|
@@ -683,7 +682,7 @@ function TreeNodeItem({
|
|
|
683
682
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
684
683
|
"span",
|
|
685
684
|
{
|
|
686
|
-
className: "text-sm font-semibold text-
|
|
685
|
+
className: "text-sm font-semibold text-foreground select-none",
|
|
687
686
|
onClick: () => onNodeClick({
|
|
688
687
|
isParent: true,
|
|
689
688
|
key: item.key,
|
|
@@ -695,7 +694,7 @@ function TreeNodeItem({
|
|
|
695
694
|
}
|
|
696
695
|
)
|
|
697
696
|
] }),
|
|
698
|
-
/* @__PURE__ */ jsxRuntime.jsx(Accordion__namespace.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3.5 border-l border-
|
|
697
|
+
/* @__PURE__ */ jsxRuntime.jsx(Accordion__namespace.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3.5 border-l border-border py-0.5", children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
699
698
|
TreeNodeItem,
|
|
700
699
|
{
|
|
701
700
|
item: child,
|
|
@@ -1649,10 +1648,10 @@ function createDatasets(rows, perPage) {
|
|
|
1649
1648
|
return all;
|
|
1650
1649
|
}
|
|
1651
1650
|
function TableHeader({ columns }) {
|
|
1652
|
-
return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "
|
|
1651
|
+
return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-surface-raised min-h-[50px] border-b border-b-border flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "flex w-full items-center justify-center", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1653
1652
|
"th",
|
|
1654
1653
|
{
|
|
1655
|
-
className: "text-center w-full text-[13px] text-
|
|
1654
|
+
className: "text-center w-full text-[13px] text-foreground",
|
|
1656
1655
|
children: col.label
|
|
1657
1656
|
},
|
|
1658
1657
|
col.key
|
|
@@ -1683,7 +1682,7 @@ function TableBody({
|
|
|
1683
1682
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1684
1683
|
"tr",
|
|
1685
1684
|
{
|
|
1686
|
-
className: `border-b border-b-
|
|
1685
|
+
className: `border-b border-b-border flex min-w-max hover:bg-surface-raised transition-all duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
|
|
1687
1686
|
children: [
|
|
1688
1687
|
expandRow.enabled && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1689
1688
|
"span",
|
|
@@ -1691,13 +1690,13 @@ function TableBody({
|
|
|
1691
1690
|
onClick: () => toggleRow(row.key),
|
|
1692
1691
|
className: `p-2 cursor-pointer origin-center transition-all duration-200 ${visibleRows[row.key]?.visible ? "rotate-180" : "rotate-0"}`,
|
|
1693
1692
|
children: expandRow.expandIcon ?? /* PlusCircle */
|
|
1694
|
-
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill:
|
|
1693
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z", clipRule: "evenodd" }) })
|
|
1695
1694
|
}
|
|
1696
1695
|
) }),
|
|
1697
1696
|
columns.map((col, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1698
1697
|
"td",
|
|
1699
1698
|
{
|
|
1700
|
-
className: `text-center min-h-[40px] w-full flex items-center justify-center p-1 border-
|
|
1699
|
+
className: `text-center min-h-[40px] w-full flex items-center justify-center p-1 border-border ${index !== columns.length - 1 ? "border-r-2" : ""}`,
|
|
1701
1700
|
children: "component" in col && col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
|
|
1702
1701
|
},
|
|
1703
1702
|
index
|
|
@@ -1744,8 +1743,8 @@ function Pagination({
|
|
|
1744
1743
|
const navBtn = (icon, disabled, onClick) => /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick, icon });
|
|
1745
1744
|
const chevronRight = (color) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
|
|
1746
1745
|
const doubleChevronRight = (color) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
|
|
1747
|
-
const disabledColor =
|
|
1748
|
-
const enabledColor =
|
|
1746
|
+
const disabledColor = "var(--color-foreground-muted)";
|
|
1747
|
+
const enabledColor = "var(--color-foreground)";
|
|
1749
1748
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end pt-2", children: [
|
|
1750
1749
|
navBtn(
|
|
1751
1750
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight(activePage === 0 ? disabledColor : enabledColor) }),
|
|
@@ -1757,7 +1756,7 @@ function Pagination({
|
|
|
1757
1756
|
activePage === 0,
|
|
1758
1757
|
() => activePage > 0 && onPageChange(activePage - 1)
|
|
1759
1758
|
),
|
|
1760
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-
|
|
1759
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-surface-raised rounded-lg ml-2 mr-2 shadow-sm p-2 w-10 text-center select-none text-foreground", children: activePage + 1 }),
|
|
1761
1760
|
navBtn(
|
|
1762
1761
|
chevronRight(activePage === maxPage ? disabledColor : enabledColor),
|
|
1763
1762
|
activePage === maxPage,
|
|
@@ -1875,10 +1874,10 @@ function Table({
|
|
|
1875
1874
|
)
|
|
1876
1875
|
] }),
|
|
1877
1876
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: header }),
|
|
1878
|
-
/* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full
|
|
1877
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
|
|
1879
1878
|
/* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns }),
|
|
1880
1879
|
/* @__PURE__ */ jsxRuntime.jsx(TableBody, { columns, rows: currentPageRows, expandRow })
|
|
1881
|
-
] }),
|
|
1880
|
+
] }) }),
|
|
1882
1881
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: footer })
|
|
1883
1882
|
] });
|
|
1884
1883
|
}
|
|
@@ -2077,10 +2076,48 @@ function AppShell({
|
|
|
2077
2076
|
className = ""
|
|
2078
2077
|
}) {
|
|
2079
2078
|
const [expanded, setExpanded] = React9.useState(sidebarDefaultExpanded);
|
|
2079
|
+
const [isMobile, setIsMobile] = React9.useState(false);
|
|
2080
|
+
const [mobileOpen, setMobileOpen] = React9.useState(false);
|
|
2081
|
+
React9.useEffect(() => {
|
|
2082
|
+
const mq = window.matchMedia("(max-width: 767px)");
|
|
2083
|
+
const update = (e) => setIsMobile(e.matches);
|
|
2084
|
+
update(mq);
|
|
2085
|
+
mq.addEventListener("change", update);
|
|
2086
|
+
return () => mq.removeEventListener("change", update);
|
|
2087
|
+
}, []);
|
|
2088
|
+
React9.useEffect(() => {
|
|
2089
|
+
if (!isMobile) setMobileOpen(false);
|
|
2090
|
+
}, [isMobile]);
|
|
2091
|
+
const hasSidebar = sidebarSections.length > 0;
|
|
2080
2092
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col h-screen bg-background ${className}`, children: [
|
|
2081
|
-
topBar && /* @__PURE__ */ jsxRuntime.
|
|
2093
|
+
topBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 flex items-stretch z-topbar", children: [
|
|
2094
|
+
hasSidebar && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2095
|
+
"button",
|
|
2096
|
+
{
|
|
2097
|
+
type: "button",
|
|
2098
|
+
className: [
|
|
2099
|
+
"md:hidden flex-shrink-0 self-stretch flex items-center justify-center w-14",
|
|
2100
|
+
"border-r border-border",
|
|
2101
|
+
"text-foreground-secondary hover:bg-surface-raised hover:text-foreground",
|
|
2102
|
+
"transition-colors duration-100",
|
|
2103
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent"
|
|
2104
|
+
].join(" "),
|
|
2105
|
+
onClick: () => setMobileOpen((o) => !o),
|
|
2106
|
+
"aria-label": mobileOpen ? "Close navigation" : "Open navigation",
|
|
2107
|
+
"aria-expanded": mobileOpen,
|
|
2108
|
+
children: mobileOpen ? (
|
|
2109
|
+
/* X icon */
|
|
2110
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
|
|
2111
|
+
) : (
|
|
2112
|
+
/* Hamburger icon */
|
|
2113
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) })
|
|
2114
|
+
)
|
|
2115
|
+
}
|
|
2116
|
+
),
|
|
2117
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: topBar })
|
|
2118
|
+
] }),
|
|
2082
2119
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
|
|
2083
|
-
|
|
2120
|
+
hasSidebar && !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2084
2121
|
Sidebar,
|
|
2085
2122
|
{
|
|
2086
2123
|
sections: sidebarSections,
|
|
@@ -2091,15 +2128,47 @@ function AppShell({
|
|
|
2091
2128
|
footer: sidebarFooter
|
|
2092
2129
|
}
|
|
2093
2130
|
),
|
|
2094
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2095
|
-
framerMotion.
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2131
|
+
hasSidebar && isMobile && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2132
|
+
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2133
|
+
framerMotion.motion.div,
|
|
2134
|
+
{
|
|
2135
|
+
className: "fixed inset-0 bg-black/40 z-overlay md:hidden",
|
|
2136
|
+
initial: { opacity: 0 },
|
|
2137
|
+
animate: { opacity: 1 },
|
|
2138
|
+
exit: { opacity: 0 },
|
|
2139
|
+
transition: { duration: 0.2, ease: "easeOut" },
|
|
2140
|
+
onClick: () => setMobileOpen(false),
|
|
2141
|
+
"aria-hidden": "true"
|
|
2142
|
+
}
|
|
2143
|
+
) }),
|
|
2144
|
+
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2145
|
+
framerMotion.motion.div,
|
|
2146
|
+
{
|
|
2147
|
+
className: "fixed inset-y-0 left-0 z-modal md:hidden",
|
|
2148
|
+
initial: { x: "-100%" },
|
|
2149
|
+
animate: { x: 0 },
|
|
2150
|
+
exit: { x: "-100%" },
|
|
2151
|
+
transition: {
|
|
2152
|
+
type: "tween",
|
|
2153
|
+
duration: 0.26,
|
|
2154
|
+
ease: [0.16, 1, 0.3, 1]
|
|
2155
|
+
// ease-out-expo
|
|
2156
|
+
},
|
|
2157
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2158
|
+
Sidebar,
|
|
2159
|
+
{
|
|
2160
|
+
sections: sidebarSections,
|
|
2161
|
+
isExpanded: true,
|
|
2162
|
+
onToggle: () => setMobileOpen(false),
|
|
2163
|
+
expandedWidth: sidebarExpandedWidth,
|
|
2164
|
+
collapsedWidth: sidebarCollapsedWidth,
|
|
2165
|
+
footer: sidebarFooter
|
|
2166
|
+
}
|
|
2167
|
+
)
|
|
2168
|
+
}
|
|
2169
|
+
) })
|
|
2170
|
+
] }),
|
|
2171
|
+
/* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full p-6", children }) })
|
|
2103
2172
|
] })
|
|
2104
2173
|
] });
|
|
2105
2174
|
}
|