@allbluecn/ui 0.3.13 → 0.4.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/ai-command-button.d.ts +10 -0
- package/dist/ai-command-button.js +12 -0
- package/dist/ai-stream-text.d.ts +9 -0
- package/dist/ai-stream-text.js +12 -0
- package/dist/alert-dialog.d.ts +20 -0
- package/dist/alert-dialog.js +101 -0
- package/dist/animated-theme-toggler.d.ts +11 -0
- package/dist/animated-theme-toggler.js +169 -0
- package/dist/auth-client.d.ts +27 -0
- package/dist/auth-client.js +86 -0
- package/dist/auth-layout.d.ts +14 -0
- package/dist/auth-layout.js +43 -0
- package/dist/avatar.d.ts +13 -0
- package/dist/avatar.js +51 -0
- package/dist/badge.d.ts +11 -0
- package/dist/badge.js +28 -0
- package/dist/button.d.ts +12 -0
- package/dist/button.js +48 -0
- package/dist/card.d.ts +13 -0
- package/dist/card.js +56 -0
- package/dist/checkbox.d.ts +6 -0
- package/dist/checkbox.js +22 -0
- package/dist/context-menu.d.ts +33 -0
- package/dist/context-menu.js +125 -0
- package/dist/dialog.d.ts +19 -0
- package/dist/dialog.js +95 -0
- package/dist/dropdown-menu.d.ts +31 -0
- package/dist/dropdown-menu.js +128 -0
- package/dist/empty.d.ts +13 -0
- package/dist/empty.js +59 -0
- package/dist/grid-pattern.d.ts +14 -0
- package/dist/grid-pattern.js +47 -0
- package/dist/icon-packs/index.d.ts +2 -0
- package/dist/icon-packs/index.js +4 -0
- package/dist/icon-packs/knowledge.d.ts +2 -0
- package/dist/icon-packs/knowledge.js +70 -0
- package/dist/icon-packs/prd.d.ts +2 -0
- package/dist/icon-packs/prd.js +86 -0
- package/dist/icon-packs/project.d.ts +2 -0
- package/dist/icon-packs/project.js +74 -0
- package/dist/icon-picker.d.ts +11 -0
- package/dist/icon-picker.js +39 -0
- package/dist/index-CQsbeClc.d.ts +17 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +7 -0
- package/dist/input.d.ts +5 -0
- package/dist/input.js +14 -0
- package/dist/item.d.ts +25 -0
- package/dist/item.js +118 -0
- package/dist/kbd.d.ts +4 -0
- package/dist/kbd.js +12 -0
- package/dist/label.d.ts +6 -0
- package/dist/label.js +14 -0
- package/dist/layout-panel-top.d.ts +12 -0
- package/dist/layout-panel-top.js +127 -0
- package/dist/name-confirm-dialog.d.ts +15 -0
- package/dist/name-confirm-dialog.js +105 -0
- package/dist/nav-float-button.d.ts +12 -0
- package/dist/nav-float-button.js +249 -0
- package/dist/notion-avatar.d.ts +13 -0
- package/dist/notion-avatar.js +83 -0
- package/dist/placeholder-page.d.ts +10 -0
- package/dist/placeholder-page.js +28 -0
- package/dist/popover.d.ts +12 -0
- package/dist/popover.js +56 -0
- package/dist/reference-inline.d.ts +10 -0
- package/dist/reference-inline.js +35 -0
- package/dist/reference-search.d.ts +12 -0
- package/dist/reference-search.js +26 -0
- package/dist/resizable.d.ts +9 -0
- package/dist/resizable.js +28 -0
- package/dist/select.d.ts +17 -0
- package/dist/select.js +99 -0
- package/dist/separator.d.ts +6 -0
- package/dist/separator.js +17 -0
- package/dist/sheet.d.ts +16 -0
- package/dist/sheet.js +90 -0
- package/dist/sidebar.d.ts +71 -0
- package/dist/sidebar.js +369 -0
- package/dist/skeleton.d.ts +4 -0
- package/dist/skeleton.js +12 -0
- package/dist/sonner.d.ts +5 -0
- package/dist/sonner.js +19 -0
- package/dist/switch.d.ts +8 -0
- package/dist/switch.js +19 -0
- package/dist/textarea.d.ts +5 -0
- package/dist/textarea.js +13 -0
- package/dist/timezone-provider.d.ts +18 -0
- package/dist/timezone-provider.js +29 -0
- package/dist/tooltip.d.ts +9 -0
- package/dist/tooltip.js +35 -0
- package/dist/use-mobile.d.ts +4 -0
- package/dist/use-mobile.js +18 -0
- package/dist/user-avatar.d.ts +14 -0
- package/dist/user-avatar.js +34 -0
- package/dist/utils.d.ts +5 -0
- package/dist/utils.js +8 -0
- package/package.json +178 -49
- package/src/ai-command-button.tsx +0 -36
- package/src/ai-stream-text.tsx +0 -37
- package/src/alert-dialog.tsx +0 -216
- package/src/animated-theme-toggler.tsx +0 -272
- package/src/auth-client.ts +0 -108
- package/src/auth-layout.tsx +0 -66
- package/src/avatar.tsx +0 -129
- package/src/badge.tsx +0 -66
- package/src/button.tsx +0 -84
- package/src/card.tsx +0 -120
- package/src/checkbox.tsx +0 -50
- package/src/context-menu.tsx +0 -280
- package/src/dialog.tsx +0 -183
- package/src/dropdown-menu.tsx +0 -286
- package/src/empty.tsx +0 -121
- package/src/grid-pattern.tsx +0 -87
- package/src/icon-packs/index.ts +0 -27
- package/src/icon-packs/knowledge.ts +0 -55
- package/src/icon-packs/prd.ts +0 -63
- package/src/icon-packs/project.ts +0 -59
- package/src/icon-picker.tsx +0 -68
- package/src/index.ts +0 -23
- package/src/input.tsx +0 -36
- package/src/item.tsx +0 -213
- package/src/kbd.tsx +0 -33
- package/src/label.tsx +0 -39
- package/src/layout-panel-top.tsx +0 -160
- package/src/name-confirm-dialog.tsx +0 -153
- package/src/nav-float-button.tsx +0 -301
- package/src/notion-avatar.tsx +0 -126
- package/src/placeholder-page.tsx +0 -42
- package/src/popover.tsx +0 -106
- package/src/reference-inline.tsx +0 -53
- package/src/reference-search.tsx +0 -52
- package/src/resizable.tsx +0 -67
- package/src/select.tsx +0 -207
- package/src/separator.tsx +0 -45
- package/src/sheet.tsx +0 -164
- package/src/sidebar.tsx +0 -708
- package/src/skeleton.tsx +0 -30
- package/src/sonner.tsx +0 -37
- package/src/switch.tsx +0 -48
- package/src/textarea.tsx +0 -35
- package/src/timezone-provider.tsx +0 -55
- package/src/tooltip.tsx +0 -72
- package/src/use-mobile.ts +0 -36
- package/src/user-avatar.tsx +0 -79
- package/src/utils.ts +0 -6
package/dist/sidebar.js
ADDED
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "./utils.js";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
|
+
import { Input } from "./input.js";
|
|
5
|
+
import { Separator as Separator$1 } from "./separator.js";
|
|
6
|
+
import { Tooltip as Tooltip$1, TooltipContent, TooltipTrigger } from "./tooltip.js";
|
|
7
|
+
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
|
|
8
|
+
import { useIsMobile } from "./use-mobile.js";
|
|
9
|
+
import { Skeleton } from "./skeleton.js";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import * as React$1 from "react";
|
|
12
|
+
import { Slot } from "radix-ui";
|
|
13
|
+
import { cva } from "class-variance-authority";
|
|
14
|
+
import { PanelLeftIcon } from "lucide-react";
|
|
15
|
+
import { useHotkey } from "@tanstack/react-hotkeys";
|
|
16
|
+
//#region src/sidebar.tsx
|
|
17
|
+
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
18
|
+
const SIDEBAR_COOKIE_MAX_AGE = 604800;
|
|
19
|
+
const SIDEBAR_WIDTH = "16rem";
|
|
20
|
+
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
21
|
+
const SIDEBAR_WIDTH_ICON = "3rem";
|
|
22
|
+
const SidebarContext = React$1.createContext(null);
|
|
23
|
+
function useSidebar() {
|
|
24
|
+
const context = React$1.useContext(SidebarContext);
|
|
25
|
+
if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
26
|
+
return context;
|
|
27
|
+
}
|
|
28
|
+
function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
|
|
29
|
+
const isMobile = useIsMobile();
|
|
30
|
+
const [openMobile, setOpenMobile] = React$1.useState(false);
|
|
31
|
+
const [_open, _setOpen] = React$1.useState(defaultOpen);
|
|
32
|
+
const open = openProp ?? _open;
|
|
33
|
+
const setOpen = React$1.useCallback((value) => {
|
|
34
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
35
|
+
if (setOpenProp) setOpenProp(openState);
|
|
36
|
+
else _setOpen(openState);
|
|
37
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
38
|
+
}, [setOpenProp, open]);
|
|
39
|
+
const toggleSidebar = React$1.useCallback(() => {
|
|
40
|
+
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
|
41
|
+
}, [
|
|
42
|
+
isMobile,
|
|
43
|
+
setOpen,
|
|
44
|
+
setOpenMobile
|
|
45
|
+
]);
|
|
46
|
+
useHotkey("Mod+B", toggleSidebar, { ignoreInputs: false });
|
|
47
|
+
const state = open ? "expanded" : "collapsed";
|
|
48
|
+
const contextValue = React$1.useMemo(() => ({
|
|
49
|
+
state,
|
|
50
|
+
open,
|
|
51
|
+
setOpen,
|
|
52
|
+
isMobile,
|
|
53
|
+
openMobile,
|
|
54
|
+
setOpenMobile,
|
|
55
|
+
toggleSidebar
|
|
56
|
+
}), [
|
|
57
|
+
state,
|
|
58
|
+
open,
|
|
59
|
+
setOpen,
|
|
60
|
+
isMobile,
|
|
61
|
+
openMobile,
|
|
62
|
+
setOpenMobile,
|
|
63
|
+
toggleSidebar
|
|
64
|
+
]);
|
|
65
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, {
|
|
66
|
+
value: contextValue,
|
|
67
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
68
|
+
"data-slot": "sidebar-wrapper",
|
|
69
|
+
style: {
|
|
70
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
71
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
72
|
+
...style
|
|
73
|
+
},
|
|
74
|
+
className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
|
|
75
|
+
...props,
|
|
76
|
+
children
|
|
77
|
+
})
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) {
|
|
81
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
82
|
+
if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
|
|
83
|
+
"data-slot": "sidebar",
|
|
84
|
+
className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
|
|
85
|
+
...props,
|
|
86
|
+
children
|
|
87
|
+
});
|
|
88
|
+
if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
|
|
89
|
+
open: openMobile,
|
|
90
|
+
onOpenChange: setOpenMobile,
|
|
91
|
+
...props,
|
|
92
|
+
children: /* @__PURE__ */ jsxs(SheetContent, {
|
|
93
|
+
dir,
|
|
94
|
+
"data-sidebar": "sidebar",
|
|
95
|
+
"data-slot": "sidebar",
|
|
96
|
+
"data-mobile": "true",
|
|
97
|
+
className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
|
|
98
|
+
style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
|
|
99
|
+
side,
|
|
100
|
+
children: [/* @__PURE__ */ jsxs(SheetHeader, {
|
|
101
|
+
className: "sr-only",
|
|
102
|
+
children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
|
|
103
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
104
|
+
className: "flex h-full w-full flex-col",
|
|
105
|
+
children
|
|
106
|
+
})]
|
|
107
|
+
})
|
|
108
|
+
});
|
|
109
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
110
|
+
className: "group peer hidden text-sidebar-foreground md:block",
|
|
111
|
+
"data-state": state,
|
|
112
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
113
|
+
"data-variant": variant,
|
|
114
|
+
"data-side": side,
|
|
115
|
+
"data-slot": "sidebar",
|
|
116
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
117
|
+
"data-slot": "sidebar-gap",
|
|
118
|
+
className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
|
|
119
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
120
|
+
"data-slot": "sidebar-container",
|
|
121
|
+
"data-side": side,
|
|
122
|
+
className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
|
|
123
|
+
...props,
|
|
124
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
125
|
+
"data-sidebar": "sidebar",
|
|
126
|
+
"data-slot": "sidebar-inner",
|
|
127
|
+
className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
|
|
128
|
+
children
|
|
129
|
+
})
|
|
130
|
+
})]
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
function SidebarTrigger({ className, onClick, ...props }) {
|
|
134
|
+
const { toggleSidebar } = useSidebar();
|
|
135
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
136
|
+
"data-sidebar": "trigger",
|
|
137
|
+
"data-slot": "sidebar-trigger",
|
|
138
|
+
variant: "ghost",
|
|
139
|
+
size: "icon-sm",
|
|
140
|
+
className: cn(className),
|
|
141
|
+
onClick: (event) => {
|
|
142
|
+
onClick?.(event);
|
|
143
|
+
toggleSidebar();
|
|
144
|
+
},
|
|
145
|
+
...props,
|
|
146
|
+
children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
147
|
+
className: "sr-only",
|
|
148
|
+
children: "Toggle Sidebar"
|
|
149
|
+
})]
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
function SidebarRail({ className, ...props }) {
|
|
153
|
+
const { toggleSidebar } = useSidebar();
|
|
154
|
+
return /* @__PURE__ */ jsx("button", {
|
|
155
|
+
"data-sidebar": "rail",
|
|
156
|
+
"data-slot": "sidebar-rail",
|
|
157
|
+
"aria-label": "Toggle Sidebar",
|
|
158
|
+
tabIndex: -1,
|
|
159
|
+
onClick: toggleSidebar,
|
|
160
|
+
title: "Toggle Sidebar",
|
|
161
|
+
className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
|
|
162
|
+
...props
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
function SidebarInset({ className, ...props }) {
|
|
166
|
+
return /* @__PURE__ */ jsx("main", {
|
|
167
|
+
"data-slot": "sidebar-inset",
|
|
168
|
+
className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
|
|
169
|
+
...props
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
function SidebarInput({ className, ...props }) {
|
|
173
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
174
|
+
"data-slot": "sidebar-input",
|
|
175
|
+
"data-sidebar": "input",
|
|
176
|
+
className: cn("h-8 w-full bg-background shadow-none", className),
|
|
177
|
+
...props
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
function SidebarHeader({ className, ...props }) {
|
|
181
|
+
return /* @__PURE__ */ jsx("div", {
|
|
182
|
+
"data-slot": "sidebar-header",
|
|
183
|
+
"data-sidebar": "header",
|
|
184
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
185
|
+
...props
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
function SidebarFooter({ className, ...props }) {
|
|
189
|
+
return /* @__PURE__ */ jsx("div", {
|
|
190
|
+
"data-slot": "sidebar-footer",
|
|
191
|
+
"data-sidebar": "footer",
|
|
192
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
193
|
+
...props
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
function SidebarSeparator({ className, ...props }) {
|
|
197
|
+
return /* @__PURE__ */ jsx(Separator$1, {
|
|
198
|
+
"data-slot": "sidebar-separator",
|
|
199
|
+
"data-sidebar": "separator",
|
|
200
|
+
className: cn("mx-2 w-auto bg-sidebar-border", className),
|
|
201
|
+
...props
|
|
202
|
+
});
|
|
203
|
+
}
|
|
204
|
+
function SidebarContent({ className, ...props }) {
|
|
205
|
+
return /* @__PURE__ */ jsx("div", {
|
|
206
|
+
"data-slot": "sidebar-content",
|
|
207
|
+
"data-sidebar": "content",
|
|
208
|
+
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
|
|
209
|
+
...props
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
function SidebarGroup({ className, ...props }) {
|
|
213
|
+
return /* @__PURE__ */ jsx("div", {
|
|
214
|
+
"data-slot": "sidebar-group",
|
|
215
|
+
"data-sidebar": "group",
|
|
216
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
217
|
+
...props
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
function SidebarGroupLabel({ className, asChild = false, ...props }) {
|
|
221
|
+
const Comp = asChild ? Slot.Root : "div";
|
|
222
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
223
|
+
"data-slot": "sidebar-group-label",
|
|
224
|
+
"data-sidebar": "group-label",
|
|
225
|
+
className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className),
|
|
226
|
+
...props
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
function SidebarGroupAction({ className, asChild = false, ...props }) {
|
|
230
|
+
const Comp = asChild ? Slot.Root : "button";
|
|
231
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
232
|
+
"data-slot": "sidebar-group-action",
|
|
233
|
+
"data-sidebar": "group-action",
|
|
234
|
+
className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
|
|
235
|
+
...props
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
function SidebarGroupContent({ className, ...props }) {
|
|
239
|
+
return /* @__PURE__ */ jsx("div", {
|
|
240
|
+
"data-slot": "sidebar-group-content",
|
|
241
|
+
"data-sidebar": "group-content",
|
|
242
|
+
className: cn("w-full text-sm", className),
|
|
243
|
+
...props
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
function SidebarMenu({ className, ...props }) {
|
|
247
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
248
|
+
"data-slot": "sidebar-menu",
|
|
249
|
+
"data-sidebar": "menu",
|
|
250
|
+
className: cn("flex w-full min-w-0 flex-col gap-0", className),
|
|
251
|
+
...props
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
255
|
+
return /* @__PURE__ */ jsx("li", {
|
|
256
|
+
"data-slot": "sidebar-menu-item",
|
|
257
|
+
"data-sidebar": "menu-item",
|
|
258
|
+
className: cn("group/menu-item relative", className),
|
|
259
|
+
...props
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate cursor-pointer", {
|
|
263
|
+
variants: {
|
|
264
|
+
variant: {
|
|
265
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
266
|
+
outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
|
|
267
|
+
},
|
|
268
|
+
size: {
|
|
269
|
+
default: "h-8 text-sm",
|
|
270
|
+
sm: "h-7 text-xs",
|
|
271
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
defaultVariants: {
|
|
275
|
+
variant: "default",
|
|
276
|
+
size: "default"
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
|
|
280
|
+
const Comp = asChild ? Slot.Root : "button";
|
|
281
|
+
const { isMobile, state } = useSidebar();
|
|
282
|
+
const button = /* @__PURE__ */ jsx(Comp, {
|
|
283
|
+
"data-slot": "sidebar-menu-button",
|
|
284
|
+
"data-sidebar": "menu-button",
|
|
285
|
+
"data-size": size,
|
|
286
|
+
"data-active": isActive || void 0,
|
|
287
|
+
className: cn(sidebarMenuButtonVariants({
|
|
288
|
+
variant,
|
|
289
|
+
size
|
|
290
|
+
}), className),
|
|
291
|
+
...props
|
|
292
|
+
});
|
|
293
|
+
if (!tooltip) return button;
|
|
294
|
+
if (typeof tooltip === "string") tooltip = { children: tooltip };
|
|
295
|
+
return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
296
|
+
asChild: true,
|
|
297
|
+
children: button
|
|
298
|
+
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
299
|
+
side: "right",
|
|
300
|
+
align: "center",
|
|
301
|
+
hidden: state !== "collapsed" || isMobile,
|
|
302
|
+
...tooltip
|
|
303
|
+
})] });
|
|
304
|
+
}
|
|
305
|
+
function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
|
|
306
|
+
const Comp = asChild ? Slot.Root : "button";
|
|
307
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
308
|
+
"data-slot": "sidebar-menu-action",
|
|
309
|
+
"data-sidebar": "menu-action",
|
|
310
|
+
className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
|
|
311
|
+
...props
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
function SidebarMenuBadge({ className, ...props }) {
|
|
315
|
+
return /* @__PURE__ */ jsx("div", {
|
|
316
|
+
"data-slot": "sidebar-menu-badge",
|
|
317
|
+
"data-sidebar": "menu-badge",
|
|
318
|
+
className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
|
|
319
|
+
...props
|
|
320
|
+
});
|
|
321
|
+
}
|
|
322
|
+
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
323
|
+
const [width] = React$1.useState(() => {
|
|
324
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
325
|
+
});
|
|
326
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
327
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
328
|
+
"data-sidebar": "menu-skeleton",
|
|
329
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
330
|
+
...props,
|
|
331
|
+
children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
|
|
332
|
+
className: "size-4 rounded-md",
|
|
333
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
334
|
+
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
335
|
+
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
336
|
+
"data-sidebar": "menu-skeleton-text",
|
|
337
|
+
style: { "--skeleton-width": width }
|
|
338
|
+
})]
|
|
339
|
+
});
|
|
340
|
+
}
|
|
341
|
+
function SidebarMenuSub({ className, ...props }) {
|
|
342
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
343
|
+
"data-slot": "sidebar-menu-sub",
|
|
344
|
+
"data-sidebar": "menu-sub",
|
|
345
|
+
className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
|
|
346
|
+
...props
|
|
347
|
+
});
|
|
348
|
+
}
|
|
349
|
+
function SidebarMenuSubItem({ className, ...props }) {
|
|
350
|
+
return /* @__PURE__ */ jsx("li", {
|
|
351
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
352
|
+
"data-sidebar": "menu-sub-item",
|
|
353
|
+
className: cn("group/menu-sub-item relative", className),
|
|
354
|
+
...props
|
|
355
|
+
});
|
|
356
|
+
}
|
|
357
|
+
function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
|
|
358
|
+
const Comp = asChild ? Slot.Root : "a";
|
|
359
|
+
return /* @__PURE__ */ jsx(Comp, {
|
|
360
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
361
|
+
"data-sidebar": "menu-sub-button",
|
|
362
|
+
"data-size": size,
|
|
363
|
+
"data-active": isActive || void 0,
|
|
364
|
+
className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground cursor-pointer", className),
|
|
365
|
+
...props
|
|
366
|
+
});
|
|
367
|
+
}
|
|
368
|
+
//#endregion
|
|
369
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
|
package/dist/skeleton.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { cn } from "./utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/skeleton.tsx
|
|
4
|
+
function Skeleton({ className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6
|
+
"data-slot": "skeleton",
|
|
7
|
+
className: cn("animate-pulse rounded-md bg-muted", className),
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Skeleton };
|
package/dist/sonner.d.ts
ADDED
package/dist/sonner.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
|
|
3
|
+
import { Toaster as Toaster$1, toast } from "sonner";
|
|
4
|
+
//#region src/sonner.tsx
|
|
5
|
+
const Toaster = ({ ...props }) => {
|
|
6
|
+
return /* @__PURE__ */ jsx(Toaster$1, {
|
|
7
|
+
className: "toaster group",
|
|
8
|
+
icons: {
|
|
9
|
+
success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4 text-emerald-600 dark:text-emerald-500" }),
|
|
10
|
+
info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4 text-sky-600 dark:text-sky-500" }),
|
|
11
|
+
warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4 text-amber-600 dark:text-amber-500" }),
|
|
12
|
+
error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4 text-red-600 dark:text-red-500" }),
|
|
13
|
+
loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
|
|
14
|
+
},
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
//#endregion
|
|
19
|
+
export { Toaster, toast };
|
package/dist/switch.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import { Switch as Switch$1 } from "radix-ui";
|
|
3
|
+
//#region src/switch.d.ts
|
|
4
|
+
declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof Switch$1.Root> & {
|
|
5
|
+
size?: "sm" | "default";
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Switch };
|
package/dist/switch.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { cn } from "./utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { Switch as Switch$1 } from "radix-ui";
|
|
5
|
+
//#region src/switch.tsx
|
|
6
|
+
function Switch({ className, size = "default", ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Switch$1.Root, {
|
|
8
|
+
"data-slot": "switch",
|
|
9
|
+
"data-size": size,
|
|
10
|
+
className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
|
|
11
|
+
...props,
|
|
12
|
+
children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
|
|
13
|
+
"data-slot": "switch-thumb",
|
|
14
|
+
className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0 dark:data-[state=unchecked]:bg-foreground"
|
|
15
|
+
})
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
//#endregion
|
|
19
|
+
export { Switch };
|
package/dist/textarea.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { cn } from "./utils.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
//#region src/textarea.tsx
|
|
5
|
+
function Textarea({ className, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
7
|
+
"data-slot": "textarea",
|
|
8
|
+
className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
//#endregion
|
|
13
|
+
export { Textarea };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
//#region src/timezone-provider.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* 提供用户级全局时区。
|
|
5
|
+
* 项目时区覆盖由 useProjectTimezone hook 处理(在项目路由组件内调用)。
|
|
6
|
+
*/
|
|
7
|
+
declare function TimezoneProvider({ userTimezone, children }: {
|
|
8
|
+
userTimezone?: string | null;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function useTimezone(): string;
|
|
12
|
+
/**
|
|
13
|
+
* 在项目内使用:合并项目时区与用户时区。
|
|
14
|
+
* @param projectTz 项目时区(来自 loader 数据),null 表示跟随用户
|
|
15
|
+
*/
|
|
16
|
+
declare function useProjectTimezone(projectTz?: string | null): string;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { TimezoneProvider, useProjectTimezone, useTimezone };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
import { resolveTimezone } from "@allbluecn/shared/lib/datetime";
|
|
4
|
+
//#region src/timezone-provider.tsx
|
|
5
|
+
const TimezoneContext = createContext(typeof Intl !== "undefined" ? Intl.DateTimeFormat().resolvedOptions().timeZone : "Asia/Shanghai");
|
|
6
|
+
/**
|
|
7
|
+
* 提供用户级全局时区。
|
|
8
|
+
* 项目时区覆盖由 useProjectTimezone hook 处理(在项目路由组件内调用)。
|
|
9
|
+
*/
|
|
10
|
+
function TimezoneProvider({ userTimezone, children }) {
|
|
11
|
+
const tz = resolveTimezone(null, userTimezone);
|
|
12
|
+
return /* @__PURE__ */ jsx(TimezoneContext.Provider, {
|
|
13
|
+
value: tz,
|
|
14
|
+
children
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
function useTimezone() {
|
|
18
|
+
return useContext(TimezoneContext);
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* 在项目内使用:合并项目时区与用户时区。
|
|
22
|
+
* @param projectTz 项目时区(来自 loader 数据),null 表示跟随用户
|
|
23
|
+
*/
|
|
24
|
+
function useProjectTimezone(projectTz) {
|
|
25
|
+
const userTz = useContext(TimezoneContext);
|
|
26
|
+
return resolveTimezone(projectTz, userTz);
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
export { TimezoneProvider, useProjectTimezone, useTimezone };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import { Tooltip as Tooltip$1 } from "radix-ui";
|
|
3
|
+
//#region src/tooltip.d.ts
|
|
4
|
+
declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof Tooltip$1.Provider>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Root>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
package/dist/tooltip.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { cn } from "./utils.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { Tooltip as Tooltip$1 } from "radix-ui";
|
|
5
|
+
//#region src/tooltip.tsx
|
|
6
|
+
function TooltipProvider({ delayDuration = 0, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
|
|
8
|
+
"data-slot": "tooltip-provider",
|
|
9
|
+
delayDuration,
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function Tooltip({ ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Root, {
|
|
15
|
+
"data-slot": "tooltip",
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function TooltipTrigger({ ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
|
|
21
|
+
"data-slot": "tooltip-trigger",
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
function TooltipContent({ className, sideOffset = 0, children, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(Tooltip$1.Content, {
|
|
27
|
+
"data-slot": "tooltip-content",
|
|
28
|
+
sideOffset,
|
|
29
|
+
className: cn("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
30
|
+
...props,
|
|
31
|
+
children: [children, /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })]
|
|
32
|
+
}) });
|
|
33
|
+
}
|
|
34
|
+
//#endregion
|
|
35
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
//#region src/use-mobile.ts
|
|
3
|
+
const MOBILE_BREAKPOINT = 768;
|
|
4
|
+
function useIsMobile() {
|
|
5
|
+
const [isMobile, setIsMobile] = React$1.useState(void 0);
|
|
6
|
+
React$1.useEffect(() => {
|
|
7
|
+
const mql = window.matchMedia(`(max-width: 767px)`);
|
|
8
|
+
const onChange = () => {
|
|
9
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
10
|
+
};
|
|
11
|
+
mql.addEventListener("change", onChange);
|
|
12
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
13
|
+
return () => mql.removeEventListener("change", onChange);
|
|
14
|
+
}, []);
|
|
15
|
+
return !!isMobile;
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { useIsMobile };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { AvatarConfig, ShapeType } from "@allbluecn/shared";
|
|
2
|
+
//#region src/user-avatar.d.ts
|
|
3
|
+
type UserAvatarProps = {
|
|
4
|
+
avatarConfig?: AvatarConfig | null;
|
|
5
|
+
bgShape?: ShapeType | null;
|
|
6
|
+
bgColor?: string | null;
|
|
7
|
+
name?: string | null;
|
|
8
|
+
imageUrl?: string | null;
|
|
9
|
+
className?: string;
|
|
10
|
+
size?: "xs" | "sm" | "md" | "lg";
|
|
11
|
+
};
|
|
12
|
+
declare function UserAvatar({ avatarConfig, bgShape, bgColor, name, imageUrl, className, size }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
//#endregion
|
|
14
|
+
export { UserAvatar };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { NotionAvatar } from "./notion-avatar.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/user-avatar.tsx
|
|
5
|
+
const sizeClasses = {
|
|
6
|
+
xs: "w-5 h-5",
|
|
7
|
+
sm: "w-6 h-6",
|
|
8
|
+
md: "w-8 h-8",
|
|
9
|
+
lg: "w-10 h-10"
|
|
10
|
+
};
|
|
11
|
+
function UserAvatar({ avatarConfig, bgShape, bgColor, name, imageUrl, className, size = "md" }) {
|
|
12
|
+
const initial = (name || "U").charAt(0).toUpperCase();
|
|
13
|
+
const shapeClass = bgShape === "circle" ? "rounded-full" : bgShape === "square" ? "rounded-none" : "rounded-lg";
|
|
14
|
+
if (avatarConfig) return /* @__PURE__ */ jsx(NotionAvatar, {
|
|
15
|
+
config: avatarConfig,
|
|
16
|
+
shape: bgShape ?? "square",
|
|
17
|
+
bgColor: bgColor ?? "#fff",
|
|
18
|
+
className: `${sizeClasses[size]} shrink-0 ${className ?? ""}`
|
|
19
|
+
});
|
|
20
|
+
if (imageUrl) return /* @__PURE__ */ jsx("div", {
|
|
21
|
+
className: `relative shrink-0 overflow-hidden ${shapeClass} ${sizeClasses[size]} ${className ?? ""}`,
|
|
22
|
+
children: /* @__PURE__ */ jsx("img", {
|
|
23
|
+
src: imageUrl,
|
|
24
|
+
alt: name || "",
|
|
25
|
+
className: "h-full w-full object-cover"
|
|
26
|
+
})
|
|
27
|
+
});
|
|
28
|
+
return /* @__PURE__ */ jsx("div", {
|
|
29
|
+
className: `flex shrink-0 items-center justify-center ${shapeClass} bg-muted text-xs font-medium ${sizeClasses[size]} ${className ?? ""}`,
|
|
30
|
+
children: initial
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
export { UserAvatar };
|
package/dist/utils.d.ts
ADDED