uibee 3.1.6 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/index.d.ts +169 -2
- package/dist/src/components/index.js +477 -13
- package/dist/style.css +255 -0
- package/package.json +1 -1
- package/src/components/badge/badge.tsx +44 -0
- package/src/components/buttons/button.tsx +2 -1
- package/src/components/code/code.tsx +55 -0
- package/src/components/container/accordion.tsx +5 -1
- package/src/components/container/expandableCard.tsx +80 -0
- package/src/components/container/glassCard.tsx +14 -0
- package/src/components/container/tabs.tsx +3 -3
- package/src/components/empty/emptyState.tsx +26 -0
- package/src/components/footer/footer.tsx +25 -6
- package/src/components/index.ts +17 -0
- package/src/components/inputs/fileInput.tsx +100 -0
- package/src/components/inputs/input.tsx +2 -2
- package/src/components/inputs/multiSelect.tsx +8 -2
- package/src/components/inputs/shared/colorPickerPopup.tsx +1 -1
- package/src/components/inputs/shared/dateTimePickerPopup.tsx +1 -1
- package/src/components/inputs/switch.tsx +5 -1
- package/src/components/modal/modal.tsx +74 -0
- package/src/components/sidebar/sidebar.tsx +204 -0
- package/src/components/spinner/spinner.tsx +20 -0
- package/src/components/table/body.tsx +37 -27
- package/src/components/table/header.tsx +32 -22
- package/src/globals.css +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { t as useClickOutside$1 } from "../../useClickOutside-Cmp-RsP3.js";
|
|
3
3
|
import { D as Facebook, Kt as Wikijs, N as Github, W as Linkedin, x as Discord } from "../../icons-lZYQ6Vlr.js";
|
|
4
4
|
import React, { Suspense, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
5
|
-
import { AlertCircle, AlertTriangle, ArrowUpRight, Calendar, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, CircleAlert, CircleHelp, Clock, EllipsisVertical, ExternalLink, Eye, Globe, Info, LogIn, LogOut, Pencil, Search, TableIcon, TriangleAlert, User, X } from "lucide-react";
|
|
5
|
+
import { AlertCircle, AlertTriangle, ArrowUpRight, Calendar, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, CircleAlert, CircleHelp, Clock, Copy, EllipsisVertical, ExternalLink, Eye, FileIcon, Globe, Info, LogIn, LogOut, Pencil, Search, TableIcon, TriangleAlert, UploadCloud, User, X } from "lucide-react";
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import Markdown from "react-markdown";
|
|
8
8
|
import remarkGfm from "remark-gfm";
|
|
@@ -1242,7 +1242,7 @@ function MultiSelect({ label, name, options, value = [], onChange, placeholder =
|
|
|
1242
1242
|
const option = options.find((o) => o.value === val);
|
|
1243
1243
|
if (!option) return null;
|
|
1244
1244
|
return /* @__PURE__ */ jsxs("span", {
|
|
1245
|
-
className: "flex items-center gap-1 px-2 py-0.5
|
|
1245
|
+
className: "\n flex items-center gap-1 rounded px-2 py-0.5 text-sm\n border border-login-500 bg-login-600 text-login-100\n ",
|
|
1246
1246
|
children: [option.label, !disabled && /* @__PURE__ */ jsx("button", {
|
|
1247
1247
|
type: "button",
|
|
1248
1248
|
onClick: (e) => {
|
|
@@ -1260,7 +1260,7 @@ function MultiSelect({ label, name, options, value = [], onChange, placeholder =
|
|
|
1260
1260
|
})]
|
|
1261
1261
|
}),
|
|
1262
1262
|
open && options.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
1263
|
-
className: "absolute z-50 mt-1 w-full max-h-60 overflow-auto
|
|
1263
|
+
className: "\n absolute z-50 mt-1 w-full max-h-60 overflow-auto\n rounded-md border border-login-500/50 bg-login-800 shadow-lg\n ",
|
|
1264
1264
|
children: options.map((option) => {
|
|
1265
1265
|
const selected = value.includes(option.value);
|
|
1266
1266
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -1314,7 +1314,7 @@ function Switch(props) {
|
|
|
1314
1314
|
${inputProps.disabled ? "opacity-40 cursor-not-allowed" : ""}
|
|
1315
1315
|
${error ? "ring-1 ring-red-500/60" : ""}
|
|
1316
1316
|
`,
|
|
1317
|
-
children: /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 my-auto left-0.5 h-5 w-5
|
|
1317
|
+
children: /* @__PURE__ */ jsx("span", { className: "\n absolute inset-y-0 my-auto left-0.5 h-5 w-5\n rounded-full bg-white shadow-sm transition-all\n group-has-[input:checked]/sw:translate-x-full\n " })
|
|
1318
1318
|
})]
|
|
1319
1319
|
})
|
|
1320
1320
|
});
|
|
@@ -2054,11 +2054,18 @@ function Footer({ logo, sponsor, columns, socialLinks, copyright, version, lang
|
|
|
2054
2054
|
children: [/* @__PURE__ */ jsx("h4", {
|
|
2055
2055
|
className: "pb-2 text-sm font-medium tracking-widest text-login-100",
|
|
2056
2056
|
children: t(col.heading, lang)
|
|
2057
|
-
}), col.items.map((item, j) => item.href ? /* @__PURE__ */ jsx(
|
|
2058
|
-
className: "link--underscore-hover block",
|
|
2057
|
+
}), col.items.map((item, j) => item.href ? item.href.startsWith("/") ? /* @__PURE__ */ jsx(Link, {
|
|
2058
|
+
className: "link--underscore-hover block text-login-100",
|
|
2059
2059
|
href: item.href,
|
|
2060
2060
|
children: t(item.label, lang)
|
|
2061
|
-
}, j) : /* @__PURE__ */ jsx("
|
|
2061
|
+
}, j) : /* @__PURE__ */ jsx("a", {
|
|
2062
|
+
className: "link--underscore-hover block text-login-100",
|
|
2063
|
+
href: item.href,
|
|
2064
|
+
children: t(item.label, lang)
|
|
2065
|
+
}, j) : /* @__PURE__ */ jsx("p", {
|
|
2066
|
+
className: "text-login-100",
|
|
2067
|
+
children: t(item.label, lang)
|
|
2068
|
+
}, j))]
|
|
2062
2069
|
}, i))
|
|
2063
2070
|
}),
|
|
2064
2071
|
socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
@@ -2081,7 +2088,8 @@ function Footer({ logo, sponsor, columns, socialLinks, copyright, version, lang
|
|
|
2081
2088
|
children: [/* @__PURE__ */ jsxs("p", {
|
|
2082
2089
|
className: "text-xs wrap-break-word text-login-100",
|
|
2083
2090
|
children: [
|
|
2084
|
-
"
|
|
2091
|
+
lang === "no" ? "Opphavsrett" : "Copyright",
|
|
2092
|
+
" © ",
|
|
2085
2093
|
year,
|
|
2086
2094
|
" ",
|
|
2087
2095
|
t(copyright, lang)
|
|
@@ -2358,7 +2366,7 @@ function Accordion({ title, children, defaultOpen = false, className = "" }) {
|
|
|
2358
2366
|
children: [/* @__PURE__ */ jsxs("button", {
|
|
2359
2367
|
type: "button",
|
|
2360
2368
|
onClick: () => setOpen((o) => !o),
|
|
2361
|
-
className: "flex w-full cursor-pointer items-center justify-between
|
|
2369
|
+
className: "\n flex w-full cursor-pointer items-center justify-between\n bg-login-800 px-4 py-3 text-left select-none\n transition-colors duration-150 hover:bg-login-700\n ",
|
|
2362
2370
|
children: [/* @__PURE__ */ jsx("div", {
|
|
2363
2371
|
className: "text-sm font-medium text-login-50",
|
|
2364
2372
|
children: title
|
|
@@ -2641,7 +2649,7 @@ function Toaster() {
|
|
|
2641
2649
|
}
|
|
2642
2650
|
//#endregion
|
|
2643
2651
|
//#region src/components/buttons/button.tsx
|
|
2644
|
-
const variants = {
|
|
2652
|
+
const variants$1 = {
|
|
2645
2653
|
primary: "bg-login text-white hover:brightness-110",
|
|
2646
2654
|
secondary: "bg-login-500 text-login-50 hover:bg-login-400",
|
|
2647
2655
|
warning: "bg-yellow-500 text-black hover:brightness-110",
|
|
@@ -2658,7 +2666,7 @@ const iconWrap = (icon) => icon ? /* @__PURE__ */ jsx("span", {
|
|
|
2658
2666
|
children: icon
|
|
2659
2667
|
}) : null;
|
|
2660
2668
|
function Button({ text, className, icon, path, variant = "primary", type, onClick, disabled }) {
|
|
2661
|
-
const color = variants[variant];
|
|
2669
|
+
const color = variants$1[variant];
|
|
2662
2670
|
const sizing = icon && !text ? iconOnly : withText;
|
|
2663
2671
|
const cls = `${base} ${sizing} ${color} ${disabled ? disabledCls : ""} ${className || ""}`;
|
|
2664
2672
|
if (!path) return /* @__PURE__ */ jsxs("button", {
|
|
@@ -2846,7 +2854,11 @@ function Header({ columns, sort, onSort, hasMenu, hasSelect, hasExpand, allSelec
|
|
|
2846
2854
|
minWidth: "2.5rem"
|
|
2847
2855
|
},
|
|
2848
2856
|
children: /* @__PURE__ */ jsx("span", {
|
|
2849
|
-
className: `
|
|
2857
|
+
className: `
|
|
2858
|
+
flex items-center justify-center
|
|
2859
|
+
text-xs font-medium tracking-wider uppercase opacity-50
|
|
2860
|
+
${VARIANT_THEAD_TH[variant]}
|
|
2861
|
+
`,
|
|
2850
2862
|
children: "+"
|
|
2851
2863
|
})
|
|
2852
2864
|
}),
|
|
@@ -3713,4 +3725,456 @@ function Toggle({ value, onChange, left, right }) {
|
|
|
3713
3725
|
});
|
|
3714
3726
|
}
|
|
3715
3727
|
//#endregion
|
|
3716
|
-
|
|
3728
|
+
//#region src/components/inputs/fileInput.tsx
|
|
3729
|
+
function FileInput({ name, label, accept, multiple = false, onChange, className = "" }) {
|
|
3730
|
+
const [files, setFiles] = useState([]);
|
|
3731
|
+
const [dragging, setDragging] = useState(false);
|
|
3732
|
+
const inputRef = useRef(null);
|
|
3733
|
+
function handleFiles(incoming) {
|
|
3734
|
+
if (!incoming) return;
|
|
3735
|
+
const arr = multiple ? Array.from(incoming) : [incoming[0]];
|
|
3736
|
+
setFiles(arr);
|
|
3737
|
+
onChange(arr);
|
|
3738
|
+
}
|
|
3739
|
+
function removeFile(index) {
|
|
3740
|
+
const next = files.filter((_, i) => i !== index);
|
|
3741
|
+
setFiles(next);
|
|
3742
|
+
onChange(next);
|
|
3743
|
+
if (inputRef.current) inputRef.current.value = "";
|
|
3744
|
+
}
|
|
3745
|
+
function onDrop(e) {
|
|
3746
|
+
e.preventDefault();
|
|
3747
|
+
setDragging(false);
|
|
3748
|
+
handleFiles(e.dataTransfer.files);
|
|
3749
|
+
}
|
|
3750
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
3751
|
+
className: `flex flex-col gap-2 ${className}`,
|
|
3752
|
+
children: [
|
|
3753
|
+
label && /* @__PURE__ */ jsx("label", {
|
|
3754
|
+
className: "text-sm font-medium text-login-200",
|
|
3755
|
+
children: label
|
|
3756
|
+
}),
|
|
3757
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3758
|
+
role: "button",
|
|
3759
|
+
tabIndex: 0,
|
|
3760
|
+
onClick: () => inputRef.current?.click(),
|
|
3761
|
+
onKeyDown: (e) => {
|
|
3762
|
+
if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
|
|
3763
|
+
},
|
|
3764
|
+
onDragOver: (e) => {
|
|
3765
|
+
e.preventDefault();
|
|
3766
|
+
setDragging(true);
|
|
3767
|
+
},
|
|
3768
|
+
onDragLeave: () => setDragging(false),
|
|
3769
|
+
onDrop,
|
|
3770
|
+
className: `
|
|
3771
|
+
flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6
|
|
3772
|
+
transition-all duration-150
|
|
3773
|
+
${dragging ? "scale-[1.01] border-login bg-login/5" : "border-login-500/50 bg-login-800/30 hover:border-login/50 hover:bg-login/5"}
|
|
3774
|
+
`,
|
|
3775
|
+
children: [
|
|
3776
|
+
/* @__PURE__ */ jsx("input", {
|
|
3777
|
+
ref: inputRef,
|
|
3778
|
+
type: "file",
|
|
3779
|
+
name,
|
|
3780
|
+
accept,
|
|
3781
|
+
multiple,
|
|
3782
|
+
className: "hidden",
|
|
3783
|
+
onChange: (e) => handleFiles(e.target.files)
|
|
3784
|
+
}),
|
|
3785
|
+
/* @__PURE__ */ jsx(UploadCloud, { className: "h-7 w-7 text-login-400" }),
|
|
3786
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3787
|
+
className: "text-center",
|
|
3788
|
+
children: [/* @__PURE__ */ jsxs("p", {
|
|
3789
|
+
className: "text-sm text-login-200",
|
|
3790
|
+
children: ["Drop files here or ", /* @__PURE__ */ jsx("span", {
|
|
3791
|
+
className: "text-login",
|
|
3792
|
+
children: "browse"
|
|
3793
|
+
})]
|
|
3794
|
+
}), accept && /* @__PURE__ */ jsx("p", {
|
|
3795
|
+
className: "mt-0.5 text-xs text-login-400",
|
|
3796
|
+
children: accept
|
|
3797
|
+
})]
|
|
3798
|
+
})
|
|
3799
|
+
]
|
|
3800
|
+
}),
|
|
3801
|
+
files.length > 0 && /* @__PURE__ */ jsx("ul", {
|
|
3802
|
+
className: "flex flex-col gap-1.5",
|
|
3803
|
+
children: files.map((file, i) => /* @__PURE__ */ jsxs("li", {
|
|
3804
|
+
className: "\n flex items-center gap-2 rounded-lg\n border border-login-500/25 bg-login-800/50 px-3 py-2 text-sm\n ",
|
|
3805
|
+
children: [
|
|
3806
|
+
/* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4 shrink-0 text-login-400" }),
|
|
3807
|
+
/* @__PURE__ */ jsx("span", {
|
|
3808
|
+
className: "flex-1 truncate text-login-200",
|
|
3809
|
+
children: file.name
|
|
3810
|
+
}),
|
|
3811
|
+
/* @__PURE__ */ jsxs("span", {
|
|
3812
|
+
className: "shrink-0 text-xs text-login-400",
|
|
3813
|
+
children: [(file.size / 1024).toFixed(1), " KB"]
|
|
3814
|
+
}),
|
|
3815
|
+
/* @__PURE__ */ jsx("button", {
|
|
3816
|
+
type: "button",
|
|
3817
|
+
onClick: (e) => {
|
|
3818
|
+
e.stopPropagation();
|
|
3819
|
+
removeFile(i);
|
|
3820
|
+
},
|
|
3821
|
+
className: "cursor-pointer text-login-400 transition-colors hover:text-red-400",
|
|
3822
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
|
|
3823
|
+
})
|
|
3824
|
+
]
|
|
3825
|
+
}, i))
|
|
3826
|
+
})
|
|
3827
|
+
]
|
|
3828
|
+
});
|
|
3829
|
+
}
|
|
3830
|
+
//#endregion
|
|
3831
|
+
//#region src/components/container/glassCard.tsx
|
|
3832
|
+
function GlassCard({ children, className = "" }) {
|
|
3833
|
+
return /* @__PURE__ */ jsx("div", {
|
|
3834
|
+
className: `rounded-xl border border-login-500/20 bg-login-800/60 backdrop-blur-sm ${className}`,
|
|
3835
|
+
children
|
|
3836
|
+
});
|
|
3837
|
+
}
|
|
3838
|
+
//#endregion
|
|
3839
|
+
//#region src/components/container/expandableCard.tsx
|
|
3840
|
+
function ExpandableCard({ icon, iconTone = "orange", title, subtitle, pulse, trailing, isExpanded, onToggle, children }) {
|
|
3841
|
+
return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs("div", {
|
|
3842
|
+
role: "button",
|
|
3843
|
+
tabIndex: 0,
|
|
3844
|
+
onClick: onToggle,
|
|
3845
|
+
onKeyDown: (e) => {
|
|
3846
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
3847
|
+
e.preventDefault();
|
|
3848
|
+
onToggle();
|
|
3849
|
+
}
|
|
3850
|
+
},
|
|
3851
|
+
"aria-expanded": isExpanded,
|
|
3852
|
+
className: "group flex cursor-pointer select-none items-center gap-4 px-5 py-4",
|
|
3853
|
+
children: [
|
|
3854
|
+
/* @__PURE__ */ jsx(IconBubble, {
|
|
3855
|
+
icon,
|
|
3856
|
+
tone: iconTone,
|
|
3857
|
+
size: "sm"
|
|
3858
|
+
}),
|
|
3859
|
+
/* @__PURE__ */ jsxs("div", {
|
|
3860
|
+
className: "min-w-0 flex-1",
|
|
3861
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
3862
|
+
className: "flex flex-wrap items-center gap-3",
|
|
3863
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
3864
|
+
className: "font-semibold text-login-50 transition group-hover:text-login",
|
|
3865
|
+
children: title
|
|
3866
|
+
}), pulse && /* @__PURE__ */ jsxs("span", {
|
|
3867
|
+
className: "flex items-center gap-2 text-xs text-login-300",
|
|
3868
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
3869
|
+
className: "flex h-3 w-3 shrink-0 items-center justify-center",
|
|
3870
|
+
children: /* @__PURE__ */ jsx(PulseDot, {
|
|
3871
|
+
variant: pulse.variant,
|
|
3872
|
+
size: "sm"
|
|
3873
|
+
})
|
|
3874
|
+
}), pulse.label]
|
|
3875
|
+
})]
|
|
3876
|
+
}), subtitle && /* @__PURE__ */ jsx("div", {
|
|
3877
|
+
className: "mt-0.5 text-xs text-login-300",
|
|
3878
|
+
children: subtitle
|
|
3879
|
+
})]
|
|
3880
|
+
}),
|
|
3881
|
+
trailing && /* @__PURE__ */ jsx("div", {
|
|
3882
|
+
className: "flex shrink-0 items-center gap-3",
|
|
3883
|
+
onClick: (e) => e.stopPropagation(),
|
|
3884
|
+
children: trailing
|
|
3885
|
+
}),
|
|
3886
|
+
/* @__PURE__ */ jsx(Button, {
|
|
3887
|
+
variant: "secondary",
|
|
3888
|
+
icon: /* @__PURE__ */ jsx(ChevronDown, { className: `h-4 w-4 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }),
|
|
3889
|
+
onClick: (e) => {
|
|
3890
|
+
e.stopPropagation();
|
|
3891
|
+
onToggle();
|
|
3892
|
+
}
|
|
3893
|
+
})
|
|
3894
|
+
]
|
|
3895
|
+
}), isExpanded && children && /* @__PURE__ */ jsx("div", {
|
|
3896
|
+
className: "border-t border-white/5 px-5 pb-5 pt-4",
|
|
3897
|
+
children
|
|
3898
|
+
})] });
|
|
3899
|
+
}
|
|
3900
|
+
//#endregion
|
|
3901
|
+
//#region src/components/modal/modal.tsx
|
|
3902
|
+
const sizes$2 = {
|
|
3903
|
+
sm: "max-w-sm",
|
|
3904
|
+
md: "max-w-md",
|
|
3905
|
+
lg: "max-w-lg"
|
|
3906
|
+
};
|
|
3907
|
+
function Modal({ isOpen, onClose, title, children, footer, size = "md" }) {
|
|
3908
|
+
useEffect(() => {
|
|
3909
|
+
if (!isOpen) return;
|
|
3910
|
+
const handler = (e) => {
|
|
3911
|
+
if (e.key === "Escape") onClose();
|
|
3912
|
+
};
|
|
3913
|
+
document.addEventListener("keydown", handler);
|
|
3914
|
+
return () => document.removeEventListener("keydown", handler);
|
|
3915
|
+
}, [isOpen, onClose]);
|
|
3916
|
+
if (!isOpen) return null;
|
|
3917
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
3918
|
+
role: "dialog",
|
|
3919
|
+
"aria-modal": "true",
|
|
3920
|
+
className: "fixed inset-0 z-50 flex items-center justify-center",
|
|
3921
|
+
onClick: onClose,
|
|
3922
|
+
children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }), /* @__PURE__ */ jsxs("div", {
|
|
3923
|
+
className: `
|
|
3924
|
+
relative z-10 mx-4 w-full ${sizes$2[size]}
|
|
3925
|
+
flex flex-col rounded-xl border border-login-500/50
|
|
3926
|
+
bg-login-800 shadow-2xl
|
|
3927
|
+
`,
|
|
3928
|
+
onClick: (e) => e.stopPropagation(),
|
|
3929
|
+
children: [
|
|
3930
|
+
title && /* @__PURE__ */ jsxs("div", {
|
|
3931
|
+
className: "flex items-center justify-between px-6 pt-5 pb-4 border-b border-login-500/25",
|
|
3932
|
+
children: [/* @__PURE__ */ jsx("h2", {
|
|
3933
|
+
className: "text-login-50 text-base font-semibold leading-snug",
|
|
3934
|
+
children: title
|
|
3935
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
3936
|
+
type: "button",
|
|
3937
|
+
onClick: onClose,
|
|
3938
|
+
className: "\n cursor-pointer rounded-md p-1.5\n text-login-400 hover:text-login-100 hover:bg-login-600\n transition-colors\n ",
|
|
3939
|
+
children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
|
|
3940
|
+
})]
|
|
3941
|
+
}),
|
|
3942
|
+
/* @__PURE__ */ jsx("div", {
|
|
3943
|
+
className: "p-6",
|
|
3944
|
+
children
|
|
3945
|
+
}),
|
|
3946
|
+
footer && /* @__PURE__ */ jsx("div", {
|
|
3947
|
+
className: "px-6 pb-5 pt-4 border-t border-login-500/25",
|
|
3948
|
+
children: footer
|
|
3949
|
+
})
|
|
3950
|
+
]
|
|
3951
|
+
})]
|
|
3952
|
+
});
|
|
3953
|
+
}
|
|
3954
|
+
//#endregion
|
|
3955
|
+
//#region src/components/sidebar/sidebar.tsx
|
|
3956
|
+
const ITEM_HEIGHT = 48;
|
|
3957
|
+
const GAP = 4;
|
|
3958
|
+
const SUB_STRIDE = 40;
|
|
3959
|
+
function Sidebar({ items, header, bottomAction, mobile = false, initialExpanded = true, onExpandedChange, className = "" }) {
|
|
3960
|
+
const [expanded, setExpanded] = useState(initialExpanded);
|
|
3961
|
+
const pathname = usePathname();
|
|
3962
|
+
const searchParams = useSearchParams();
|
|
3963
|
+
const fullPath = pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "");
|
|
3964
|
+
function toggleExpanded() {
|
|
3965
|
+
const next = !expanded;
|
|
3966
|
+
setExpanded(next);
|
|
3967
|
+
onExpandedChange?.(next);
|
|
3968
|
+
}
|
|
3969
|
+
function isSubActive(sub) {
|
|
3970
|
+
return sub.path.includes("?") ? fullPath.startsWith(sub.path) : pathname === sub.path;
|
|
3971
|
+
}
|
|
3972
|
+
function isItemActive(item) {
|
|
3973
|
+
return pathname === item.path || !!item.items?.some((sub) => sub.path.includes("?") ? fullPath.startsWith(sub.path) : pathname === sub.path || pathname.startsWith(sub.path + "/"));
|
|
3974
|
+
}
|
|
3975
|
+
const activeIndex = items.findIndex(isItemActive);
|
|
3976
|
+
const activeOffset = items.slice(0, Math.max(activeIndex, 0)).reduce((acc, item) => acc + ITEM_HEIGHT + (item.items ? GAP : 0) + GAP, 0);
|
|
3977
|
+
return /* @__PURE__ */ jsxs("aside", {
|
|
3978
|
+
className: `
|
|
3979
|
+
flex flex-col border-r border-login-100/10 bg-login-900
|
|
3980
|
+
transition-all duration-300 ease-in-out
|
|
3981
|
+
${mobile ? "w-full" : `h-full ${expanded ? "w-64" : "w-20"}`}
|
|
3982
|
+
${className}
|
|
3983
|
+
`,
|
|
3984
|
+
children: [
|
|
3985
|
+
!mobile && /* @__PURE__ */ jsxs("div", {
|
|
3986
|
+
className: `relative mb-2 p-4 transition-all duration-300 ${expanded ? "h-16" : "h-20"}`,
|
|
3987
|
+
children: [header && /* @__PURE__ */ jsx("div", {
|
|
3988
|
+
className: `
|
|
3989
|
+
absolute top-4 flex items-center transition-all duration-300
|
|
3990
|
+
${expanded ? "left-4 gap-3" : "left-1/2 -translate-x-1/2 gap-0"}
|
|
3991
|
+
`,
|
|
3992
|
+
children: typeof header === "function" ? header(expanded) : header
|
|
3993
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
3994
|
+
onClick: toggleExpanded,
|
|
3995
|
+
className: `
|
|
3996
|
+
absolute cursor-pointer rounded-lg p-1.5
|
|
3997
|
+
text-login-200 transition-all duration-300 hover:bg-login-800
|
|
3998
|
+
${expanded ? "right-4 top-4" : "left-1/2 top-12 -translate-x-1/2"}
|
|
3999
|
+
`,
|
|
4000
|
+
children: expanded ? /* @__PURE__ */ jsx(ChevronLeft, { size: 20 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 20 })
|
|
4001
|
+
})]
|
|
4002
|
+
}),
|
|
4003
|
+
mobile && /* @__PURE__ */ jsx("div", { className: "h-4" }),
|
|
4004
|
+
/* @__PURE__ */ jsxs("div", {
|
|
4005
|
+
className: "relative flex flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto px-3 [scrollbar-width:none]",
|
|
4006
|
+
children: [activeIndex >= 0 && /* @__PURE__ */ jsx("span", {
|
|
4007
|
+
"aria-hidden": true,
|
|
4008
|
+
className: "absolute left-3 right-3 top-0 h-12 rounded-lg bg-login-800 transition-transform duration-300 ease-in-out",
|
|
4009
|
+
style: { transform: `translateY(${activeOffset}px)` }
|
|
4010
|
+
}), items.map((item, index) => {
|
|
4011
|
+
const isActive = isItemActive(item);
|
|
4012
|
+
const Icon = item.icon;
|
|
4013
|
+
const activeSubIndex = item.items ? item.items.findIndex(isSubActive) : -1;
|
|
4014
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
4015
|
+
className: "flex flex-col gap-1",
|
|
4016
|
+
children: [/* @__PURE__ */ jsxs(Link, {
|
|
4017
|
+
href: item.path,
|
|
4018
|
+
title: !expanded ? item.name : void 0,
|
|
4019
|
+
className: `
|
|
4020
|
+
group relative z-10 flex items-center
|
|
4021
|
+
overflow-hidden rounded-lg p-3 transition-all duration-200
|
|
4022
|
+
${isActive ? "text-login" : "text-login-200 hover:bg-login-800/50 hover:text-login-100"}
|
|
4023
|
+
`,
|
|
4024
|
+
children: [
|
|
4025
|
+
/* @__PURE__ */ jsx("div", {
|
|
4026
|
+
className: `
|
|
4027
|
+
flex min-w-6 w-6 items-center justify-center transition-all duration-300
|
|
4028
|
+
${expanded ? "" : "translate-x-1"}
|
|
4029
|
+
${isActive ? "[&>svg]:stroke-login" : "group-hover:[&>svg]:stroke-login-100"}
|
|
4030
|
+
`,
|
|
4031
|
+
children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
|
|
4032
|
+
}),
|
|
4033
|
+
/* @__PURE__ */ jsx("span", {
|
|
4034
|
+
className: `
|
|
4035
|
+
whitespace-nowrap overflow-hidden transition-all duration-300
|
|
4036
|
+
${expanded ? "ml-3 max-w-48 opacity-100" : "ml-0 max-w-0 opacity-0"}
|
|
4037
|
+
`,
|
|
4038
|
+
children: item.name
|
|
4039
|
+
}),
|
|
4040
|
+
item.status && /* @__PURE__ */ jsx("div", {
|
|
4041
|
+
className: `
|
|
4042
|
+
flex items-center justify-center
|
|
4043
|
+
${expanded ? "ml-auto" : "absolute right-1 top-1 scale-75"}
|
|
4044
|
+
`,
|
|
4045
|
+
children: item.status
|
|
4046
|
+
})
|
|
4047
|
+
]
|
|
4048
|
+
}), item.items && /* @__PURE__ */ jsxs("div", {
|
|
4049
|
+
className: `
|
|
4050
|
+
relative ml-6 flex flex-col gap-1 overflow-hidden
|
|
4051
|
+
border-l border-login-800 pl-2
|
|
4052
|
+
transition-all duration-300 ease-in-out
|
|
4053
|
+
${expanded && isActive ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}
|
|
4054
|
+
`,
|
|
4055
|
+
children: [activeSubIndex >= 0 && /* @__PURE__ */ jsx("span", {
|
|
4056
|
+
"aria-hidden": true,
|
|
4057
|
+
className: "\n absolute left-2 right-0 top-0 h-9 rounded-lg\n bg-login-800/50 transition-transform duration-300 ease-in-out\n ",
|
|
4058
|
+
style: { transform: `translateY(${activeSubIndex * SUB_STRIDE}px)` }
|
|
4059
|
+
}), item.items.map((sub, subIndex) => {
|
|
4060
|
+
const subActive = isSubActive(sub);
|
|
4061
|
+
return /* @__PURE__ */ jsx(Link, {
|
|
4062
|
+
href: sub.path,
|
|
4063
|
+
className: `
|
|
4064
|
+
relative z-10 rounded-lg p-2 text-sm
|
|
4065
|
+
transition-all duration-200
|
|
4066
|
+
${subActive ? "text-login" : "text-login-300 hover:bg-login-800/30 hover:text-login-100"}
|
|
4067
|
+
`,
|
|
4068
|
+
children: sub.name
|
|
4069
|
+
}, `${index}-${subIndex}`);
|
|
4070
|
+
})]
|
|
4071
|
+
})]
|
|
4072
|
+
}, index);
|
|
4073
|
+
})]
|
|
4074
|
+
}),
|
|
4075
|
+
bottomAction && /* @__PURE__ */ jsx("div", {
|
|
4076
|
+
className: "border-t border-login-100/10 p-3",
|
|
4077
|
+
children: bottomAction(expanded)
|
|
4078
|
+
})
|
|
4079
|
+
]
|
|
4080
|
+
});
|
|
4081
|
+
}
|
|
4082
|
+
//#endregion
|
|
4083
|
+
//#region src/components/badge/badge.tsx
|
|
4084
|
+
const variants = {
|
|
4085
|
+
default: "bg-login-600 text-login-100",
|
|
4086
|
+
success: "bg-emerald-500/15 text-emerald-400",
|
|
4087
|
+
warning: "bg-yellow-500/15 text-yellow-400",
|
|
4088
|
+
danger: "bg-red-500/15 text-red-400",
|
|
4089
|
+
info: "bg-sky-500/15 text-sky-400",
|
|
4090
|
+
amber: "bg-amber-500/15 text-amber-400",
|
|
4091
|
+
violet: "bg-violet-500/15 text-violet-400",
|
|
4092
|
+
blue: "bg-blue-500/15 text-blue-400",
|
|
4093
|
+
emerald: "bg-emerald-500/15 text-emerald-400",
|
|
4094
|
+
orange: "bg-login/15 text-login"
|
|
4095
|
+
};
|
|
4096
|
+
const sizes$1 = {
|
|
4097
|
+
sm: "px-2 py-0.5 text-xs",
|
|
4098
|
+
md: "px-2.5 py-1 text-sm"
|
|
4099
|
+
};
|
|
4100
|
+
function Badge({ text, variant = "default", size = "sm", className = "" }) {
|
|
4101
|
+
return /* @__PURE__ */ jsx("span", {
|
|
4102
|
+
className: `inline-flex items-center rounded-full font-medium ${variants[variant]} ${sizes$1[size]} ${className}`,
|
|
4103
|
+
children: text
|
|
4104
|
+
});
|
|
4105
|
+
}
|
|
4106
|
+
//#endregion
|
|
4107
|
+
//#region src/components/empty/emptyState.tsx
|
|
4108
|
+
function EmptyState({ icon: Icon, title, description, action, className = "" }) {
|
|
4109
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
4110
|
+
className: `flex flex-col items-center justify-center gap-3 py-12 text-center ${className}`,
|
|
4111
|
+
children: [
|
|
4112
|
+
Icon && /* @__PURE__ */ jsx("div", {
|
|
4113
|
+
className: "mb-1 rounded-xl bg-login-600/30 p-3 text-login-400",
|
|
4114
|
+
children: /* @__PURE__ */ jsx(Icon, { className: "h-7 w-7" })
|
|
4115
|
+
}),
|
|
4116
|
+
/* @__PURE__ */ jsx("p", {
|
|
4117
|
+
className: "text-sm font-semibold text-login-100",
|
|
4118
|
+
children: title
|
|
4119
|
+
}),
|
|
4120
|
+
description && /* @__PURE__ */ jsx("p", {
|
|
4121
|
+
className: "max-w-xs text-xs leading-relaxed text-login-400",
|
|
4122
|
+
children: description
|
|
4123
|
+
}),
|
|
4124
|
+
action && /* @__PURE__ */ jsx("div", {
|
|
4125
|
+
className: "mt-2",
|
|
4126
|
+
children: action
|
|
4127
|
+
})
|
|
4128
|
+
]
|
|
4129
|
+
});
|
|
4130
|
+
}
|
|
4131
|
+
//#endregion
|
|
4132
|
+
//#region src/components/spinner/spinner.tsx
|
|
4133
|
+
const sizes = {
|
|
4134
|
+
sm: "w-4 h-4 border-2",
|
|
4135
|
+
md: "w-6 h-6 border-2",
|
|
4136
|
+
lg: "w-9 h-9 border-[3px]"
|
|
4137
|
+
};
|
|
4138
|
+
function Spinner({ size = "md", className = "" }) {
|
|
4139
|
+
return /* @__PURE__ */ jsx("div", {
|
|
4140
|
+
role: "status",
|
|
4141
|
+
"aria-label": "Loading",
|
|
4142
|
+
className: `rounded-full border-login-500 border-t-login animate-spin ${sizes[size]} ${className}`
|
|
4143
|
+
});
|
|
4144
|
+
}
|
|
4145
|
+
//#endregion
|
|
4146
|
+
//#region src/components/code/code.tsx
|
|
4147
|
+
function Code({ children, className = "" }) {
|
|
4148
|
+
return /* @__PURE__ */ jsx("code", {
|
|
4149
|
+
className: `font-mono text-xs bg-login-700 text-login px-1.5 py-0.5 rounded ${className}`,
|
|
4150
|
+
children
|
|
4151
|
+
});
|
|
4152
|
+
}
|
|
4153
|
+
function CodeBlock({ code, language, className = "" }) {
|
|
4154
|
+
const [copied, setCopied] = useState(false);
|
|
4155
|
+
function copy() {
|
|
4156
|
+
navigator.clipboard.writeText(code);
|
|
4157
|
+
setCopied(true);
|
|
4158
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
4159
|
+
}
|
|
4160
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
4161
|
+
className: `relative group rounded-xl border border-login-500/30 bg-login-900 overflow-hidden ${className}`,
|
|
4162
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
4163
|
+
className: "flex items-center justify-between px-4 py-2 border-b border-login-500/20 bg-login-800",
|
|
4164
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
4165
|
+
className: "text-xs font-mono text-login-400",
|
|
4166
|
+
children: language ?? ""
|
|
4167
|
+
}), /* @__PURE__ */ jsxs("button", {
|
|
4168
|
+
type: "button",
|
|
4169
|
+
onClick: copy,
|
|
4170
|
+
className: "flex cursor-pointer items-center gap-1.5 text-xs text-login-400 hover:text-login-100 transition-colors",
|
|
4171
|
+
children: [copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 stroke-emerald-400" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" }), copied ? "Copied" : "Copy"]
|
|
4172
|
+
})]
|
|
4173
|
+
}), /* @__PURE__ */ jsx("pre", {
|
|
4174
|
+
className: "overflow-x-auto p-4 text-xs font-mono leading-relaxed text-login-100",
|
|
4175
|
+
children: /* @__PURE__ */ jsx("code", { children: code })
|
|
4176
|
+
})]
|
|
4177
|
+
});
|
|
4178
|
+
}
|
|
4179
|
+
//#endregion
|
|
4180
|
+
export { Accordion, AccordionGroup, Alert, Badge, Button, Card, Checkbox, Code, CodeBlock, ConfirmPopup, EmptyState, ExpandableCard, FileInput, Footer, GlassCard, Highlight, IconBubble, Input, LanguageToggle, LeftBarPanel, LoginPage, Logo, LogoSmall, MarkdownRender, MenuButton, Modal, MultiSelect, NavDropdown, NavItem, Navbar, PageContainer, Pagination, PulseDot, Radio, Range, SearchInput, Select, SeverityPill, Sidebar, Spinner, StatCard, Switch, TabPanel, Table, Tabs, TagInput, Textarea, ThemeToggle, Toaster, Toggle, VersionTag, loginAddress, loginCopyright, loginEmail, loginSocialLinks, loginSponsor, toast };
|