react-shadcn-kit 0.0.1 → 0.0.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/README.md +6 -6
- package/dist/assets/global.css +1 -1
- package/dist/atoms/chart.d.ts +12 -2
- package/dist/atoms/chart.js +35 -35
- package/dist/atoms/sidebar.d.ts +2 -1
- package/dist/atoms/sidebar.js +44 -42
- package/dist/config/blog-layout.config.js +19 -0
- package/dist/config/default-Sidebar.js +83 -0
- package/dist/config/default-layout.js +21 -0
- package/dist/config/default-navigation.js +3 -82
- package/dist/config/sidebar.config.js +11 -0
- package/dist/index.d.ts +6 -2
- package/dist/index.js +348 -341
- package/dist/layouts/blog-layout.d.ts +7 -0
- package/dist/layouts/blog-layout.js +29 -0
- package/dist/layouts/default-layout.d.ts +7 -0
- package/dist/layouts/default-layout.js +54 -0
- package/dist/layouts/sidebar-scroll-layout.d.ts +8 -0
- package/dist/layouts/sidebar-scroll-layout.js +49 -0
- package/dist/molecules/theme-toggle.d.ts +9 -0
- package/dist/molecules/theme-toggle.js +30 -0
- package/dist/molecules/user-menu.d.ts +18 -0
- package/dist/molecules/user-menu.js +29 -0
- package/dist/{molecules → organisms}/app-navbar.d.ts +4 -2
- package/dist/organisms/app-navbar.js +89 -0
- package/dist/{molecules → organisms}/app-sidebar.d.ts +4 -1
- package/dist/organisms/app-sidebar.js +169 -0
- package/package.json +33 -10
- package/dist/molecules/app-navbar.js +0 -117
- package/dist/molecules/app-sidebar.js +0 -121
- package/dist/organisms/layout.d.ts +0 -3
- package/dist/organisms/layout.js +0 -16
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { jsxs as r, Fragment as p, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { Search as b, Bell as k, Sun as C, Moon as M, User as I, Settings as S, LogOut as y } from "lucide-react";
|
|
3
|
-
import { Input as D } from "../atoms/input.js";
|
|
4
|
-
import { SidebarTrigger as P } from "../atoms/sidebar.js";
|
|
5
|
-
import { Separator as T } from "../atoms/separator.js";
|
|
6
|
-
import { defaultNavbarConfig as t } from "../config/default-navigation.js";
|
|
7
|
-
import { Button as c } from "../atoms/button.js";
|
|
8
|
-
import { useTheme as z } from "next-themes";
|
|
9
|
-
import { DropdownMenu as d, DropdownMenuTrigger as m, DropdownMenuContent as h, DropdownMenuLabel as f, DropdownMenuSeparator as u, DropdownMenuItem as n } from "../atoms/dropdown-menu.js";
|
|
10
|
-
import { Avatar as A, AvatarImage as L, AvatarFallback as j } from "../atoms/avatar.js";
|
|
11
|
-
function Q({
|
|
12
|
-
config: l,
|
|
13
|
-
showSearch: N = !0,
|
|
14
|
-
showSidebarTrigger: g = !0,
|
|
15
|
-
showThemeToggle: x = !0,
|
|
16
|
-
showUserMenu: w = !0,
|
|
17
|
-
showNotifications: v = !0
|
|
18
|
-
}) {
|
|
19
|
-
const { setTheme: i } = z(), a = {
|
|
20
|
-
items: l?.items || t.items,
|
|
21
|
-
searchPlaceholder: l?.searchPlaceholder || t.searchPlaceholder,
|
|
22
|
-
user: l?.user || t.user,
|
|
23
|
-
userMenuItems: l?.userMenuItems || t.userMenuItems,
|
|
24
|
-
notifications: l?.notifications || t.notifications
|
|
25
|
-
};
|
|
26
|
-
return /* @__PURE__ */ r("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-background sticky top-0 z-50", children: [
|
|
27
|
-
g && /* @__PURE__ */ r(p, { children: [
|
|
28
|
-
/* @__PURE__ */ e(P, { className: "-ml-1" }),
|
|
29
|
-
/* @__PURE__ */ e(T, { orientation: "vertical", className: "mr-2 h-4" })
|
|
30
|
-
] }),
|
|
31
|
-
/* @__PURE__ */ r("div", { className: "ml-auto flex items-center gap-2", children: [
|
|
32
|
-
N && /* @__PURE__ */ r("div", { className: "relative", children: [
|
|
33
|
-
/* @__PURE__ */ e(b, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
|
|
34
|
-
/* @__PURE__ */ e(
|
|
35
|
-
D,
|
|
36
|
-
{
|
|
37
|
-
placeholder: a.searchPlaceholder,
|
|
38
|
-
className: "pl-8 w-[200px] lg:w-[300px]"
|
|
39
|
-
}
|
|
40
|
-
)
|
|
41
|
-
] }),
|
|
42
|
-
v && a.notifications && /* @__PURE__ */ r(d, { children: [
|
|
43
|
-
/* @__PURE__ */ e(m, { asChild: !0, children: /* @__PURE__ */ r(c, { variant: "ghost", size: "icon", className: "relative", children: [
|
|
44
|
-
/* @__PURE__ */ e(k, { className: "h-5 w-5" }),
|
|
45
|
-
a.notifications.some((s) => !s.read) && /* @__PURE__ */ e("span", { className: "absolute right-2 top-2 h-2 w-2 rounded-full bg-red-600" }),
|
|
46
|
-
/* @__PURE__ */ e("span", { className: "sr-only", children: "Notifications" })
|
|
47
|
-
] }) }),
|
|
48
|
-
/* @__PURE__ */ r(h, { align: "end", className: "w-80", children: [
|
|
49
|
-
/* @__PURE__ */ e(f, { children: "Notifications" }),
|
|
50
|
-
/* @__PURE__ */ e(u, {}),
|
|
51
|
-
a.notifications.map((s, o) => /* @__PURE__ */ r(
|
|
52
|
-
n,
|
|
53
|
-
{
|
|
54
|
-
className: "flex flex-col items-start gap-1 p-3 cursor-pointer",
|
|
55
|
-
children: [
|
|
56
|
-
/* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between", children: [
|
|
57
|
-
/* @__PURE__ */ e("span", { className: "font-medium", children: s.title }),
|
|
58
|
-
/* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: s.date })
|
|
59
|
-
] }),
|
|
60
|
-
/* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground line-clamp-2", children: s.description })
|
|
61
|
-
]
|
|
62
|
-
},
|
|
63
|
-
o
|
|
64
|
-
)),
|
|
65
|
-
a.notifications.length === 0 && /* @__PURE__ */ e("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No new notifications" })
|
|
66
|
-
] })
|
|
67
|
-
] }),
|
|
68
|
-
x && /* @__PURE__ */ r(d, { children: [
|
|
69
|
-
/* @__PURE__ */ e(m, { asChild: !0, children: /* @__PURE__ */ r(c, { variant: "ghost", size: "icon", children: [
|
|
70
|
-
/* @__PURE__ */ e(C, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
|
|
71
|
-
/* @__PURE__ */ e(M, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
|
|
72
|
-
/* @__PURE__ */ e("span", { className: "sr-only", children: "Toggle theme" })
|
|
73
|
-
] }) }),
|
|
74
|
-
/* @__PURE__ */ r(h, { align: "end", children: [
|
|
75
|
-
/* @__PURE__ */ e(n, { onClick: () => i("light"), children: "Light" }),
|
|
76
|
-
/* @__PURE__ */ e(n, { onClick: () => i("dark"), children: "Dark" }),
|
|
77
|
-
/* @__PURE__ */ e(n, { onClick: () => i("system"), children: "System" })
|
|
78
|
-
] })
|
|
79
|
-
] }),
|
|
80
|
-
w && a.user && /* @__PURE__ */ r(d, { children: [
|
|
81
|
-
/* @__PURE__ */ e(m, { asChild: !0, children: /* @__PURE__ */ e(c, { variant: "ghost", size: "icon", className: "rounded-full", children: /* @__PURE__ */ r(A, { className: "h-8 w-8", children: [
|
|
82
|
-
/* @__PURE__ */ e(L, { src: a.user.avatar, alt: a.user.name }),
|
|
83
|
-
/* @__PURE__ */ e(j, { children: "CN" })
|
|
84
|
-
] }) }) }),
|
|
85
|
-
/* @__PURE__ */ r(h, { align: "end", children: [
|
|
86
|
-
/* @__PURE__ */ e(f, { children: /* @__PURE__ */ r("div", { className: "flex flex-col space-y-1", children: [
|
|
87
|
-
/* @__PURE__ */ e("p", { className: "text-sm font-medium leading-none", children: a.user.name }),
|
|
88
|
-
/* @__PURE__ */ e("p", { className: "text-xs leading-none text-muted-foreground", children: a.user.email })
|
|
89
|
-
] }) }),
|
|
90
|
-
/* @__PURE__ */ e(u, {}),
|
|
91
|
-
a.userMenuItems?.map((s, o) => /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ r("a", { href: s.href || "#", onClick: s.onClick, children: [
|
|
92
|
-
s.icon && /* @__PURE__ */ e(s.icon, { className: "mr-2 h-4 w-4" }),
|
|
93
|
-
/* @__PURE__ */ e("span", { children: s.label })
|
|
94
|
-
] }) }, o)),
|
|
95
|
-
!a.userMenuItems && /* @__PURE__ */ r(p, { children: [
|
|
96
|
-
/* @__PURE__ */ r(n, { children: [
|
|
97
|
-
/* @__PURE__ */ e(I, { className: "mr-2 h-4 w-4" }),
|
|
98
|
-
/* @__PURE__ */ e("span", { children: "Profile" })
|
|
99
|
-
] }),
|
|
100
|
-
/* @__PURE__ */ r(n, { children: [
|
|
101
|
-
/* @__PURE__ */ e(S, { className: "mr-2 h-4 w-4" }),
|
|
102
|
-
/* @__PURE__ */ e("span", { children: "Settings" })
|
|
103
|
-
] }),
|
|
104
|
-
/* @__PURE__ */ e(u, {}),
|
|
105
|
-
/* @__PURE__ */ r(n, { children: [
|
|
106
|
-
/* @__PURE__ */ e(y, { className: "mr-2 h-4 w-4" }),
|
|
107
|
-
/* @__PURE__ */ e("span", { children: "Log out" })
|
|
108
|
-
] })
|
|
109
|
-
] })
|
|
110
|
-
] })
|
|
111
|
-
] })
|
|
112
|
-
] })
|
|
113
|
-
] });
|
|
114
|
-
}
|
|
115
|
-
export {
|
|
116
|
-
Q as AppNavbar
|
|
117
|
-
};
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronDown as u, LogOut as D } from "lucide-react";
|
|
3
|
-
import { Sidebar as I, SidebarHeader as m, SidebarMenu as c, SidebarMenuItem as o, SidebarMenuButton as d, SidebarContent as z, SidebarGroup as y, SidebarGroupLabel as p, SidebarGroupContent as b, SidebarMenuSub as L, SidebarMenuSubItem as j, SidebarMenuSubButton as k, SidebarFooter as G } from "../atoms/sidebar.js";
|
|
4
|
-
import { Collapsible as f, CollapsibleTrigger as g, CollapsibleContent as x } from "../atoms/collapsible.js";
|
|
5
|
-
import { defaultSidebarConfig as s } from "../config/default-navigation.js";
|
|
6
|
-
import { Avatar as N, AvatarImage as C, AvatarFallback as v } from "../atoms/avatar.js";
|
|
7
|
-
import { DropdownMenu as O, DropdownMenuTrigger as B, DropdownMenuContent as F, DropdownMenuLabel as T, DropdownMenuSeparator as q, DropdownMenuItem as S } from "../atoms/dropdown-menu.js";
|
|
8
|
-
function U({
|
|
9
|
-
config: i,
|
|
10
|
-
side: M = "left",
|
|
11
|
-
variant: w = "sidebar",
|
|
12
|
-
collapsible: A = "icon"
|
|
13
|
-
}) {
|
|
14
|
-
const r = {
|
|
15
|
-
groups: i?.groups || s.groups,
|
|
16
|
-
header: i?.header || s.header,
|
|
17
|
-
footer: i?.footer || s.footer,
|
|
18
|
-
user: i?.user || s.user,
|
|
19
|
-
userMenuItems: i?.userMenuItems || s.userMenuItems,
|
|
20
|
-
branding: i?.branding || s.branding,
|
|
21
|
-
fixed: i?.fixed ?? s.fixed
|
|
22
|
-
};
|
|
23
|
-
return /* @__PURE__ */ a(
|
|
24
|
-
I,
|
|
25
|
-
{
|
|
26
|
-
side: M,
|
|
27
|
-
variant: w,
|
|
28
|
-
collapsible: A,
|
|
29
|
-
className: r.fixed ? void 0 : "absolute h-full",
|
|
30
|
-
children: [
|
|
31
|
-
r.header && /* @__PURE__ */ e(m, { children: r.header }),
|
|
32
|
-
r.branding && !r.header && /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(d, { size: "lg", asChild: !0, children: /* @__PURE__ */ a("a", { href: r.branding.href || "#", children: [
|
|
33
|
-
/* @__PURE__ */ e("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg", children: r.branding.logo && /* @__PURE__ */ e(r.branding.logo, { className: "size-4" }) }),
|
|
34
|
-
/* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
35
|
-
/* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.branding.name }),
|
|
36
|
-
/* @__PURE__ */ e("span", { className: "truncate text-xs", children: "Enterprise" })
|
|
37
|
-
] })
|
|
38
|
-
] }) }) }) }) }),
|
|
39
|
-
/* @__PURE__ */ e(z, { children: r.groups.map((n, h) => /* @__PURE__ */ a(y, { children: [
|
|
40
|
-
n.label && (n.collapsible ? /* @__PURE__ */ a(f, { defaultOpen: !0, className: "group/collapsible", children: [
|
|
41
|
-
/* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ a(g, { children: [
|
|
42
|
-
n.label,
|
|
43
|
-
/* @__PURE__ */ e(u, { className: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" })
|
|
44
|
-
] }) }),
|
|
45
|
-
/* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(c, { children: n.items.map((l) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(d, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a("a", { href: l.href, children: [
|
|
46
|
-
l.icon && /* @__PURE__ */ e(l.icon, {}),
|
|
47
|
-
/* @__PURE__ */ e("span", { children: l.label })
|
|
48
|
-
] }) }) }, l.href)) }) }) })
|
|
49
|
-
] }) : /* @__PURE__ */ e(p, { children: n.label })),
|
|
50
|
-
!n.collapsible && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(c, { children: n.items.map((l) => /* @__PURE__ */ e(o, { children: l.items && l.items.length > 0 ? /* @__PURE__ */ a(f, { className: "group/collapsible", children: [
|
|
51
|
-
/* @__PURE__ */ e(d, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a(g, { children: [
|
|
52
|
-
l.icon && /* @__PURE__ */ e(l.icon, {}),
|
|
53
|
-
/* @__PURE__ */ e("span", { children: l.label }),
|
|
54
|
-
/* @__PURE__ */ e(u, { className: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" })
|
|
55
|
-
] }) }),
|
|
56
|
-
/* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(L, { children: l.items.map((t) => /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(k, { asChild: !0, isActive: t.isActive, children: /* @__PURE__ */ e("a", { href: t.href, children: /* @__PURE__ */ e("span", { children: t.label }) }) }) }, t.href)) }) })
|
|
57
|
-
] }) : /* @__PURE__ */ e(d, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a("a", { href: l.href, children: [
|
|
58
|
-
l.icon && /* @__PURE__ */ e(l.icon, {}),
|
|
59
|
-
/* @__PURE__ */ e("span", { children: l.label })
|
|
60
|
-
] }) }) }, l.href)) }) })
|
|
61
|
-
] }, n.label || h)) }),
|
|
62
|
-
/* @__PURE__ */ a(G, { children: [
|
|
63
|
-
r.user && /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ a(O, { children: [
|
|
64
|
-
/* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ a(
|
|
65
|
-
d,
|
|
66
|
-
{
|
|
67
|
-
size: "lg",
|
|
68
|
-
className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
|
|
69
|
-
children: [
|
|
70
|
-
/* @__PURE__ */ a(N, { className: "h-8 w-8 rounded-lg", children: [
|
|
71
|
-
/* @__PURE__ */ e(C, { src: r.user.avatar, alt: r.user.name }),
|
|
72
|
-
/* @__PURE__ */ e(v, { className: "rounded-lg", children: "CN" })
|
|
73
|
-
] }),
|
|
74
|
-
/* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
75
|
-
/* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.user.name }),
|
|
76
|
-
/* @__PURE__ */ e("span", { className: "truncate text-xs", children: r.user.email })
|
|
77
|
-
] }),
|
|
78
|
-
/* @__PURE__ */ e(u, { className: "ml-auto size-4" })
|
|
79
|
-
]
|
|
80
|
-
}
|
|
81
|
-
) }),
|
|
82
|
-
/* @__PURE__ */ a(
|
|
83
|
-
F,
|
|
84
|
-
{
|
|
85
|
-
className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
|
|
86
|
-
side: "bottom",
|
|
87
|
-
align: "end",
|
|
88
|
-
sideOffset: 4,
|
|
89
|
-
children: [
|
|
90
|
-
/* @__PURE__ */ e(T, { className: "p-0 font-normal", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
|
|
91
|
-
/* @__PURE__ */ a(N, { className: "h-8 w-8 rounded-lg", children: [
|
|
92
|
-
/* @__PURE__ */ e(C, { src: r.user.avatar, alt: r.user.name }),
|
|
93
|
-
/* @__PURE__ */ e(v, { className: "rounded-lg", children: "CN" })
|
|
94
|
-
] }),
|
|
95
|
-
/* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
96
|
-
/* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.user.name }),
|
|
97
|
-
/* @__PURE__ */ e("span", { className: "truncate text-xs", children: r.user.email })
|
|
98
|
-
] })
|
|
99
|
-
] }) }),
|
|
100
|
-
/* @__PURE__ */ e(q, {}),
|
|
101
|
-
r.userMenuItems?.map((n, h) => /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ a("a", { href: n.href || "#", onClick: n.onClick, children: [
|
|
102
|
-
n.icon && /* @__PURE__ */ e(n.icon, { className: "mr-2 h-4 w-4" }),
|
|
103
|
-
/* @__PURE__ */ e("span", { children: n.label })
|
|
104
|
-
] }) }, h)),
|
|
105
|
-
!r.userMenuItems && /* @__PURE__ */ a(S, { children: [
|
|
106
|
-
/* @__PURE__ */ e(D, { className: "mr-2 h-4 w-4" }),
|
|
107
|
-
/* @__PURE__ */ e("span", { children: "Log out" })
|
|
108
|
-
] })
|
|
109
|
-
]
|
|
110
|
-
}
|
|
111
|
-
)
|
|
112
|
-
] }) }) }),
|
|
113
|
-
r.footer
|
|
114
|
-
] })
|
|
115
|
-
]
|
|
116
|
-
}
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
export {
|
|
120
|
-
U as AppSidebar
|
|
121
|
-
};
|
package/dist/organisms/layout.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { SidebarProvider as i, SidebarInset as a } from "../atoms/sidebar.js";
|
|
3
|
-
import { AppSidebar as p } from "../molecules/app-sidebar.js";
|
|
4
|
-
import { AppNavbar as t } from "../molecules/app-navbar.js";
|
|
5
|
-
function s({ children: o }) {
|
|
6
|
-
return /* @__PURE__ */ e(i, { children: [
|
|
7
|
-
/* @__PURE__ */ r(p, {}),
|
|
8
|
-
/* @__PURE__ */ e(a, { children: [
|
|
9
|
-
/* @__PURE__ */ r(t, {}),
|
|
10
|
-
/* @__PURE__ */ r("div", { className: "flex flex-1 flex-col gap-4 p-4", children: o })
|
|
11
|
-
] })
|
|
12
|
-
] });
|
|
13
|
-
}
|
|
14
|
-
export {
|
|
15
|
-
s as default
|
|
16
|
-
};
|