@locusgraph/components 0.0.0-stage → 0.1.1
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/LICENSE +21 -0
- package/README.md +51 -2
- package/dist/action/button-group.d.ts +11 -0
- package/dist/action/button-group.js +27 -0
- package/dist/action/button.d.ts +10 -0
- package/dist/action/button.js +35 -0
- package/dist/action/toggle-group.d.ts +9 -0
- package/dist/action/toggle-group.js +22 -0
- package/dist/action/toggle.d.ts +9 -0
- package/dist/action/toggle.js +26 -0
- package/dist/display/avatar.d.ts +6 -0
- package/dist/display/avatar.js +14 -0
- package/dist/display/badge.d.ts +9 -0
- package/dist/display/badge.js +24 -0
- package/dist/display/chart/chart-container.d.ts +43 -0
- package/dist/display/chart/chart-container.js +59 -0
- package/dist/display/chart/chart-legend.d.ts +8 -0
- package/dist/display/chart/chart-legend.js +22 -0
- package/dist/display/chart/chart-tooltip.d.ts +13 -0
- package/dist/display/chart/chart-tooltip.js +49 -0
- package/dist/display/chat/attachment/attachment-parts.d.ts +10 -0
- package/dist/display/chat/attachment/attachment-parts.js +21 -0
- package/dist/display/chat/attachment/attachment.d.ts +16 -0
- package/dist/display/chat/attachment/attachment.js +40 -0
- package/dist/display/chat/bubble.d.ts +17 -0
- package/dist/display/chat/bubble.js +50 -0
- package/dist/display/chat/marker.d.ts +11 -0
- package/dist/display/chat/marker.js +24 -0
- package/dist/display/chat/message-scroller.d.ts +10 -0
- package/dist/display/chat/message-scroller.js +25 -0
- package/dist/display/chat/message.d.ts +10 -0
- package/dist/display/chat/message.js +21 -0
- package/dist/display/content/item.d.ts +23 -0
- package/dist/display/content/item.js +66 -0
- package/dist/display/content/kbd.d.ts +3 -0
- package/dist/display/content/kbd.js +9 -0
- package/dist/display/media/aspect-ratio.d.ts +3 -0
- package/dist/display/media/aspect-ratio.js +7 -0
- package/dist/display/media/carousel-controls.d.ts +5 -0
- package/dist/display/media/carousel-controls.js +19 -0
- package/dist/display/media/carousel.d.ts +25 -0
- package/dist/display/media/carousel.js +77 -0
- package/dist/display/rule-grid/rule-grid.d.ts +14 -0
- package/dist/display/rule-grid/rule-grid.js +35 -0
- package/dist/display/separator.d.ts +4 -0
- package/dist/display/separator.js +8 -0
- package/dist/display/status/alert.d.ts +9 -0
- package/dist/display/status/alert.js +24 -0
- package/dist/display/status/empty.d.ts +11 -0
- package/dist/display/status/empty.js +33 -0
- package/dist/display/status/progress.d.ts +4 -0
- package/dist/display/status/progress.js +8 -0
- package/dist/display/status/skeleton.d.ts +2 -0
- package/dist/display/status/skeleton.js +6 -0
- package/dist/display/status/spinner.d.ts +2 -0
- package/dist/display/status/spinner.js +7 -0
- package/dist/display/table.d.ts +10 -0
- package/dist/display/table.js +27 -0
- package/dist/feedback/toaster.d.ts +5 -0
- package/dist/feedback/toaster.js +32 -0
- package/dist/form/advanced/calendar-day-button.d.ts +4 -0
- package/dist/form/advanced/calendar-day-button.js +19 -0
- package/dist/form/advanced/calendar.d.ts +7 -0
- package/dist/form/advanced/calendar.js +64 -0
- package/dist/form/advanced/combobox/combobox-chips.d.ts +9 -0
- package/dist/form/advanced/combobox/combobox-chips.js +20 -0
- package/dist/form/advanced/combobox/combobox-items.d.ts +8 -0
- package/dist/form/advanced/combobox/combobox-items.js +24 -0
- package/dist/form/advanced/combobox/combobox.d.ts +11 -0
- package/dist/form/advanced/combobox/combobox.js +26 -0
- package/dist/form/advanced/input-otp.d.ts +11 -0
- package/dist/form/advanced/input-otp.js +21 -0
- package/dist/form/choice/checkbox.d.ts +4 -0
- package/dist/form/choice/checkbox.js +9 -0
- package/dist/form/choice/radio-group.d.ts +5 -0
- package/dist/form/choice/radio-group.js +12 -0
- package/dist/form/choice/select.d.ts +15 -0
- package/dist/form/choice/select.js +38 -0
- package/dist/form/choice/slider.d.ts +4 -0
- package/dist/form/choice/slider.js +10 -0
- package/dist/form/choice/switch.d.ts +4 -0
- package/dist/form/choice/switch.js +8 -0
- package/dist/form/field/field-error.d.ts +8 -0
- package/dist/form/field/field-error.js +20 -0
- package/dist/form/field/field-separator.d.ts +3 -0
- package/dist/form/field/field-separator.js +7 -0
- package/dist/form/field/field-set.d.ts +6 -0
- package/dist/form/field/field-set.js +9 -0
- package/dist/form/field/field-text.d.ts +6 -0
- package/dist/form/field/field-text.js +13 -0
- package/dist/form/field/field.d.ts +9 -0
- package/dist/form/field/field.js +33 -0
- package/dist/form/hook-form/form.d.ts +24 -0
- package/dist/form/hook-form/form.js +57 -0
- package/dist/form/input-group.d.ts +16 -0
- package/dist/form/input-group.js +65 -0
- package/dist/form/input.d.ts +3 -0
- package/dist/form/input.js +6 -0
- package/dist/form/label.d.ts +4 -0
- package/dist/form/label.js +8 -0
- package/dist/form/native-select.d.ts +7 -0
- package/dist/form/native-select.js +13 -0
- package/dist/form/textarea.d.ts +3 -0
- package/dist/form/textarea.js +6 -0
- package/dist/index.d.ts +96 -0
- package/dist/index.js +95 -0
- package/dist/layout/accordion.d.ts +7 -0
- package/dist/layout/accordion.js +18 -0
- package/dist/layout/collapsible.d.ts +5 -0
- package/dist/layout/collapsible.js +13 -0
- package/dist/layout/resizable.d.ts +7 -0
- package/dist/layout/resizable.js +15 -0
- package/dist/layout/scroll/direction.d.ts +7 -0
- package/dist/layout/scroll/direction.js +8 -0
- package/dist/layout/scroll/scroll-area.d.ts +5 -0
- package/dist/layout/scroll/scroll-area.js +11 -0
- package/dist/layout/sidebar/sidebar-context.d.ts +19 -0
- package/dist/layout/sidebar/sidebar-context.js +72 -0
- package/dist/layout/sidebar/sidebar-menu-sub.d.ts +12 -0
- package/dist/layout/sidebar/sidebar-menu-sub.js +26 -0
- package/dist/layout/sidebar/sidebar-menu.d.ts +20 -0
- package/dist/layout/sidebar/sidebar-menu.js +53 -0
- package/dist/layout/sidebar/sidebar-sections.d.ts +17 -0
- package/dist/layout/sidebar/sidebar-sections.js +37 -0
- package/dist/layout/sidebar/sidebar.d.ts +11 -0
- package/dist/layout/sidebar/sidebar.js +40 -0
- package/dist/layout/tabs.d.ts +11 -0
- package/dist/layout/tabs.js +30 -0
- package/dist/layout/use-mobile.d.ts +1 -0
- package/dist/layout/use-mobile.js +15 -0
- package/dist/navigation/breadcrumb.d.ts +11 -0
- package/dist/navigation/breadcrumb.js +27 -0
- package/dist/navigation/menubar/menubar-items.d.ts +15 -0
- package/dist/navigation/menubar/menubar-items.js +27 -0
- package/dist/navigation/menubar/menubar-sub.d.ts +8 -0
- package/dist/navigation/menubar/menubar-sub.js +15 -0
- package/dist/navigation/menubar/menubar.d.ts +9 -0
- package/dist/navigation/menubar/menubar.js +23 -0
- package/dist/navigation/navigation-menu.d.ts +14 -0
- package/dist/navigation/navigation-menu.js +31 -0
- package/dist/navigation/pagination.d.ts +13 -0
- package/dist/navigation/pagination.js +29 -0
- package/dist/overlay/alert-dialog.d.ts +18 -0
- package/dist/overlay/alert-dialog.js +42 -0
- package/dist/overlay/context-menu/context-menu-items.d.ts +15 -0
- package/dist/overlay/context-menu/context-menu-items.js +27 -0
- package/dist/overlay/context-menu/context-menu-sub.d.ts +8 -0
- package/dist/overlay/context-menu/context-menu-sub.js +15 -0
- package/dist/overlay/context-menu/context-menu.d.ts +8 -0
- package/dist/overlay/context-menu/context-menu.js +20 -0
- package/dist/overlay/dialog.d.ts +16 -0
- package/dist/overlay/dialog.js +40 -0
- package/dist/overlay/floating/command.d.ts +18 -0
- package/dist/overlay/floating/command.js +34 -0
- package/dist/overlay/floating/drawer.d.ts +13 -0
- package/dist/overlay/floating/drawer.js +35 -0
- package/dist/overlay/floating/hover-card.d.ts +6 -0
- package/dist/overlay/floating/hover-card.js +14 -0
- package/dist/overlay/menu/dropdown-menu-choice.d.ts +6 -0
- package/dist/overlay/menu/dropdown-menu-choice.js +15 -0
- package/dist/overlay/menu/dropdown-menu-item.d.ts +12 -0
- package/dist/overlay/menu/dropdown-menu-item.js +17 -0
- package/dist/overlay/menu/dropdown-menu-sub.d.ts +8 -0
- package/dist/overlay/menu/dropdown-menu-sub.js +15 -0
- package/dist/overlay/menu/dropdown-menu.d.ts +8 -0
- package/dist/overlay/menu/dropdown-menu.js +20 -0
- package/dist/overlay/popover.d.ts +6 -0
- package/dist/overlay/popover.js +14 -0
- package/dist/overlay/sheet.d.ts +14 -0
- package/dist/overlay/sheet.js +40 -0
- package/dist/overlay/tooltip.d.ts +7 -0
- package/dist/overlay/tooltip.js +17 -0
- package/dist/shell/app-header.d.ts +11 -0
- package/dist/shell/app-header.js +10 -0
- package/dist/shell/app-shell.d.ts +10 -0
- package/dist/shell/app-shell.js +8 -0
- package/dist/shell/breadcrumbs.d.ts +12 -0
- package/dist/shell/breadcrumbs.js +18 -0
- package/dist/shell/docs/docs-header.d.ts +22 -0
- package/dist/shell/docs/docs-header.js +20 -0
- package/dist/shell/docs/docs-shell.d.ts +9 -0
- package/dist/shell/docs/docs-shell.js +7 -0
- package/dist/shell/docs/docs-sidebar.d.ts +17 -0
- package/dist/shell/docs/docs-sidebar.js +12 -0
- package/dist/shell/docs/on-this-page.d.ts +11 -0
- package/dist/shell/docs/on-this-page.js +12 -0
- package/dist/shell/docs/use-active-section.d.ts +2 -0
- package/dist/shell/docs/use-active-section.js +54 -0
- package/dist/shell/link.d.ts +4 -0
- package/dist/shell/link.js +1 -0
- package/dist/shell/navigation/app-sidebar.d.ts +19 -0
- package/dist/shell/navigation/app-sidebar.js +12 -0
- package/dist/shell/navigation/nav-group.d.ts +23 -0
- package/dist/shell/navigation/nav-group.js +17 -0
- package/dist/shell/theme-toggle.d.ts +7 -0
- package/dist/shell/theme-toggle.js +9 -0
- package/dist/styles/theme.css +4 -0
- package/package.json +65 -3
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { TooltipProvider } from "../../overlay/tooltip.js";
|
|
6
|
+
import { useIsMobile } from "../use-mobile.js";
|
|
7
|
+
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
8
|
+
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
9
|
+
const SIDEBAR_WIDTH = "15rem";
|
|
10
|
+
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
11
|
+
const SIDEBAR_WIDTH_ICON = "3rem";
|
|
12
|
+
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
13
|
+
const SidebarContext = React.createContext(null);
|
|
14
|
+
function useSidebar() {
|
|
15
|
+
const context = React.useContext(SidebarContext);
|
|
16
|
+
if (!context) {
|
|
17
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
18
|
+
}
|
|
19
|
+
return context;
|
|
20
|
+
}
|
|
21
|
+
function persistSidebarState(open) {
|
|
22
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
23
|
+
}
|
|
24
|
+
function useSidebarKeyboardShortcut(toggleSidebar) {
|
|
25
|
+
React.useEffect(() => {
|
|
26
|
+
const handleKeyDown = (event) => {
|
|
27
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
toggleSidebar();
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
33
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
34
|
+
}, [toggleSidebar]);
|
|
35
|
+
}
|
|
36
|
+
const sidebarMobileHitArea = "after:absolute after:-inset-2 md:after:hidden";
|
|
37
|
+
function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
|
|
38
|
+
const isMobile = useIsMobile();
|
|
39
|
+
const [openMobile, setOpenMobile] = React.useState(false);
|
|
40
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
|
|
41
|
+
const open = openProp ?? uncontrolledOpen;
|
|
42
|
+
const setOpen = React.useCallback((value) => {
|
|
43
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
44
|
+
if (setOpenProp) {
|
|
45
|
+
setOpenProp(openState);
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
setUncontrolledOpen(openState);
|
|
49
|
+
}
|
|
50
|
+
persistSidebarState(openState);
|
|
51
|
+
}, [setOpenProp, open]);
|
|
52
|
+
const toggleSidebar = React.useCallback(() => {
|
|
53
|
+
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
|
54
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
|
55
|
+
useSidebarKeyboardShortcut(toggleSidebar);
|
|
56
|
+
const state = open ? "expanded" : "collapsed";
|
|
57
|
+
const contextValue = React.useMemo(() => ({
|
|
58
|
+
state,
|
|
59
|
+
open,
|
|
60
|
+
setOpen,
|
|
61
|
+
isMobile,
|
|
62
|
+
openMobile,
|
|
63
|
+
setOpenMobile,
|
|
64
|
+
toggleSidebar,
|
|
65
|
+
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
|
|
66
|
+
return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
|
|
67
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
68
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
69
|
+
...style,
|
|
70
|
+
}, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
|
|
71
|
+
}
|
|
72
|
+
export { SIDEBAR_WIDTH_MOBILE, SidebarProvider, sidebarMobileHitArea, useSidebar };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
|
|
3
|
+
showIcon?: boolean;
|
|
4
|
+
}): React.JSX.Element;
|
|
5
|
+
declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
6
|
+
declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
7
|
+
declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
size?: "sm" | "md";
|
|
10
|
+
isActive?: boolean;
|
|
11
|
+
}): React.JSX.Element;
|
|
12
|
+
export { SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import * as Slot from "radix-ui/slot";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { Skeleton } from "../../display/status/skeleton.js";
|
|
7
|
+
function randomSkeletonWidth() {
|
|
8
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
9
|
+
}
|
|
10
|
+
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
11
|
+
const width = React.useMemo(randomSkeletonWidth, []);
|
|
12
|
+
return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
|
|
13
|
+
"--skeleton-width": width,
|
|
14
|
+
} })] }));
|
|
15
|
+
}
|
|
16
|
+
function SidebarMenuSub({ className, ...props }) {
|
|
17
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", 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), ...props }));
|
|
18
|
+
}
|
|
19
|
+
function SidebarMenuSubItem({ className, ...props }) {
|
|
20
|
+
return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
|
|
21
|
+
}
|
|
22
|
+
function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
|
|
23
|
+
const Comp = asChild ? Slot.Root : "a";
|
|
24
|
+
return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, 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 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
25
|
+
}
|
|
26
|
+
export { SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
import { TooltipContent } from "../../overlay/tooltip.js";
|
|
4
|
+
declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
5
|
+
declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
6
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
7
|
+
variant?: "default" | "outline" | null | undefined;
|
|
8
|
+
size?: "default" | "lg" | "sm" | null | undefined;
|
|
9
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
|
+
declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
|
|
11
|
+
asChild?: boolean;
|
|
12
|
+
isActive?: boolean;
|
|
13
|
+
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
14
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
|
|
15
|
+
declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
|
|
16
|
+
asChild?: boolean;
|
|
17
|
+
showOnHover?: boolean;
|
|
18
|
+
}): React.JSX.Element;
|
|
19
|
+
declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
20
|
+
export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, sidebarMenuButtonVariants, };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "cn";
|
|
5
|
+
import * as Slot from "radix-ui/slot";
|
|
6
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../../overlay/tooltip.js";
|
|
7
|
+
import { sidebarMobileHitArea, useSidebar } from "./sidebar-context.js";
|
|
8
|
+
function SidebarMenu({ className, ...props }) {
|
|
9
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-1", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
12
|
+
return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
|
|
13
|
+
}
|
|
14
|
+
const sidebarMenuButtonVariants = cva("peer/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-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
|
|
15
|
+
variants: {
|
|
16
|
+
variant: {
|
|
17
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
18
|
+
outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
|
|
19
|
+
},
|
|
20
|
+
size: {
|
|
21
|
+
default: "h-8 text-sm",
|
|
22
|
+
sm: "h-7 text-xs",
|
|
23
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
variant: "default",
|
|
28
|
+
size: "default",
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
|
|
32
|
+
const Comp = asChild ? Slot.Root : "button";
|
|
33
|
+
const { isMobile, state } = useSidebar();
|
|
34
|
+
const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
|
|
35
|
+
if (!tooltip) {
|
|
36
|
+
return button;
|
|
37
|
+
}
|
|
38
|
+
if (typeof tooltip === "string") {
|
|
39
|
+
tooltip = {
|
|
40
|
+
children: tooltip,
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })] }));
|
|
44
|
+
}
|
|
45
|
+
function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
|
|
46
|
+
const Comp = asChild ? Slot.Root : "button";
|
|
47
|
+
return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", 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 peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", sidebarMobileHitArea, "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
|
|
48
|
+
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0", className), ...props }));
|
|
49
|
+
}
|
|
50
|
+
function SidebarMenuBadge({ className, ...props }) {
|
|
51
|
+
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", 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", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
52
|
+
}
|
|
53
|
+
export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, sidebarMenuButtonVariants, };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
import { Separator } from "../../display/separator.js";
|
|
3
|
+
import { Input } from "../../form/input.js";
|
|
4
|
+
declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
|
|
5
|
+
declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
6
|
+
declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
7
|
+
declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
|
|
8
|
+
declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
9
|
+
declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
10
|
+
declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<"div"> & {
|
|
11
|
+
asChild?: boolean;
|
|
12
|
+
}): React.JSX.Element;
|
|
13
|
+
declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
|
|
14
|
+
asChild?: boolean;
|
|
15
|
+
}): React.JSX.Element;
|
|
16
|
+
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
17
|
+
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarSeparator, };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import * as Slot from "radix-ui/slot";
|
|
5
|
+
import { Separator } from "../../display/separator.js";
|
|
6
|
+
import { Input } from "../../form/input.js";
|
|
7
|
+
import { sidebarMobileHitArea } from "./sidebar-context.js";
|
|
8
|
+
function SidebarInput({ className, ...props }) {
|
|
9
|
+
return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function SidebarHeader({ className, ...props }) {
|
|
12
|
+
return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props }));
|
|
13
|
+
}
|
|
14
|
+
function SidebarFooter({ className, ...props }) {
|
|
15
|
+
return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn("flex flex-col gap-2 p-2", className), ...props }));
|
|
16
|
+
}
|
|
17
|
+
function SidebarSeparator({ className, ...props }) {
|
|
18
|
+
return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("mx-2 w-auto bg-sidebar-border", className), ...props }));
|
|
19
|
+
}
|
|
20
|
+
function SidebarContent({ className, ...props }) {
|
|
21
|
+
return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
function SidebarGroup({ className, ...props }) {
|
|
24
|
+
return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
|
|
25
|
+
}
|
|
26
|
+
function SidebarGroupLabel({ className, asChild = false, ...props }) {
|
|
27
|
+
const Comp = asChild ? Slot.Root : "div";
|
|
28
|
+
return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", 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 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
function SidebarGroupAction({ className, asChild = false, ...props }) {
|
|
31
|
+
const Comp = asChild ? Slot.Root : "button";
|
|
32
|
+
return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", 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 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", sidebarMobileHitArea, "group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
function SidebarGroupContent({ className, ...props }) {
|
|
35
|
+
return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));
|
|
36
|
+
}
|
|
37
|
+
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarSeparator, };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
import { Button } from "../../action/button.js";
|
|
3
|
+
declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<"div"> & {
|
|
4
|
+
side?: "left" | "right";
|
|
5
|
+
variant?: "sidebar" | "floating" | "inset";
|
|
6
|
+
collapsible?: "offcanvas" | "icon" | "none";
|
|
7
|
+
}): React.JSX.Element;
|
|
8
|
+
declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
|
|
9
|
+
declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
|
|
10
|
+
declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
|
|
11
|
+
export { Sidebar, SidebarInset, SidebarRail, SidebarTrigger };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import { PanelLeftIcon } from "lucide-react";
|
|
5
|
+
import { Button } from "../../action/button.js";
|
|
6
|
+
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "../../overlay/sheet.js";
|
|
7
|
+
import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./sidebar-context.js";
|
|
8
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
|
|
9
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
10
|
+
if (collapsible === "none") {
|
|
11
|
+
return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
|
|
12
|
+
}
|
|
13
|
+
if (isMobile) {
|
|
14
|
+
return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
|
|
15
|
+
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
|
16
|
+
}, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
|
|
17
|
+
}
|
|
18
|
+
return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", 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"
|
|
19
|
+
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
|
20
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left"
|
|
21
|
+
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
22
|
+
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset"
|
|
23
|
+
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
|
24
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", 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", children: children }) })] }));
|
|
25
|
+
}
|
|
26
|
+
function SidebarTrigger({ className, onClick, ...props }) {
|
|
27
|
+
const { toggleSidebar } = useSidebar();
|
|
28
|
+
return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon", className: cn("size-7", className), onClick: (event) => {
|
|
29
|
+
onClick?.(event);
|
|
30
|
+
toggleSidebar();
|
|
31
|
+
}, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
|
|
32
|
+
}
|
|
33
|
+
function SidebarRail({ className, ...props }) {
|
|
34
|
+
const { toggleSidebar } = useSidebar();
|
|
35
|
+
return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex", "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), ...props }));
|
|
36
|
+
}
|
|
37
|
+
function SidebarInset({ className, ...props }) {
|
|
38
|
+
return (_jsx("main", { "data-slot": "sidebar-inset", 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), ...props }));
|
|
39
|
+
}
|
|
40
|
+
export { Sidebar, SidebarInset, SidebarRail, SidebarTrigger };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import * as TabsPrimitive from "radix-ui/tabs";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
|
|
5
|
+
declare const tabsListVariants: (props?: ({
|
|
6
|
+
variant?: "default" | "line" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
|
|
9
|
+
declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
|
|
10
|
+
declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
|
|
11
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "cn";
|
|
5
|
+
import * as TabsPrimitive from "radix-ui/tabs";
|
|
6
|
+
function Tabs({ className, orientation = "horizontal", ...props }) {
|
|
7
|
+
return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "bg-muted",
|
|
13
|
+
line: "gap-1 bg-transparent",
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
defaultVariants: {
|
|
17
|
+
variant: "default",
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
function TabsList({ className, variant = "default", ...props }) {
|
|
21
|
+
return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
function TabsTrigger({ className, ...props }) {
|
|
24
|
+
return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-[color,background-color,border-color,box-shadow] duration-150 ease-out group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className), ...props }));
|
|
25
|
+
}
|
|
26
|
+
const visibleKeyboardFocusOutline = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-ring/70";
|
|
27
|
+
function TabsContent({ className, ...props }) {
|
|
28
|
+
return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", visibleKeyboardFocusOutline, className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useIsMobile(): boolean;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const MOBILE_BREAKPOINT = 768;
|
|
3
|
+
export function useIsMobile() {
|
|
4
|
+
const [isMobile, setIsMobile] = React.useState(undefined);
|
|
5
|
+
React.useEffect(() => {
|
|
6
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
7
|
+
const onChange = () => {
|
|
8
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
9
|
+
};
|
|
10
|
+
mql.addEventListener("change", onChange);
|
|
11
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
12
|
+
return () => mql.removeEventListener("change", onChange);
|
|
13
|
+
}, []);
|
|
14
|
+
return !!isMobile;
|
|
15
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): React.JSX.Element;
|
|
3
|
+
declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
|
|
4
|
+
declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
5
|
+
declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
}): React.JSX.Element;
|
|
8
|
+
declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
9
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
10
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
11
|
+
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "cn";
|
|
3
|
+
import { ChevronRight, MoreHorizontal } from "lucide-react";
|
|
4
|
+
import * as Slot from "radix-ui/slot";
|
|
5
|
+
function Breadcrumb({ ...props }) {
|
|
6
|
+
return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
|
|
7
|
+
}
|
|
8
|
+
function BreadcrumbList({ className, ...props }) {
|
|
9
|
+
return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function BreadcrumbItem({ className, ...props }) {
|
|
12
|
+
return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }));
|
|
13
|
+
}
|
|
14
|
+
function BreadcrumbLink({ asChild, className, ...props }) {
|
|
15
|
+
const Comp = asChild ? Slot.Root : "a";
|
|
16
|
+
return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("transition-colors hover:text-foreground", className), ...props }));
|
|
17
|
+
}
|
|
18
|
+
function BreadcrumbPage({ className, ...props }) {
|
|
19
|
+
return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
22
|
+
return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
|
|
23
|
+
}
|
|
24
|
+
function BreadcrumbEllipsis({ className, ...props }) {
|
|
25
|
+
return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
|
|
26
|
+
}
|
|
27
|
+
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as MenubarPrimitive from "radix-ui/menubar";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
|
|
4
|
+
inset?: boolean;
|
|
5
|
+
variant?: "default" | "destructive";
|
|
6
|
+
}): React.JSX.Element;
|
|
7
|
+
declare function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): React.JSX.Element;
|
|
8
|
+
declare function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): React.JSX.Element;
|
|
9
|
+
declare function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>): React.JSX.Element;
|
|
10
|
+
declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
|
|
11
|
+
inset?: boolean;
|
|
12
|
+
}): React.JSX.Element;
|
|
13
|
+
declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): React.JSX.Element;
|
|
14
|
+
declare function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
15
|
+
export { MenubarCheckboxItem, MenubarItem, MenubarLabel, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import { CheckIcon, CircleIcon } from "lucide-react";
|
|
5
|
+
import * as MenubarPrimitive from "radix-ui/menubar";
|
|
6
|
+
function MenubarItem({ className, inset, variant = "default", ...props }) {
|
|
7
|
+
return (_jsx(MenubarPrimitive.Item, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
function MenubarCheckboxItem({ className, children, checked, ...props }) {
|
|
10
|
+
return (_jsxs(MenubarPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", className: cn("relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
|
|
11
|
+
}
|
|
12
|
+
function MenubarRadioGroup({ ...props }) {
|
|
13
|
+
return _jsx(MenubarPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
|
|
14
|
+
}
|
|
15
|
+
function MenubarRadioItem({ className, children, ...props }) {
|
|
16
|
+
return (_jsxs(MenubarPrimitive.RadioItem, { "data-slot": "menubar-radio-item", className: cn("relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
|
|
17
|
+
}
|
|
18
|
+
function MenubarLabel({ className, inset, ...props }) {
|
|
19
|
+
return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", "data-inset": inset, className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
function MenubarSeparator({ className, ...props }) {
|
|
22
|
+
return (_jsx(MenubarPrimitive.Separator, { "data-slot": "menubar-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
function MenubarShortcut({ className, ...props }) {
|
|
25
|
+
return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
|
|
26
|
+
}
|
|
27
|
+
export { MenubarCheckboxItem, MenubarItem, MenubarLabel, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as MenubarPrimitive from "radix-ui/menubar";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>): React.JSX.Element;
|
|
4
|
+
declare function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
|
|
5
|
+
inset?: boolean;
|
|
6
|
+
}): React.JSX.Element;
|
|
7
|
+
declare function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>): React.JSX.Element;
|
|
8
|
+
export { MenubarSub, MenubarSubContent, MenubarSubTrigger };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import { ChevronRightIcon } from "lucide-react";
|
|
5
|
+
import * as MenubarPrimitive from "radix-ui/menubar";
|
|
6
|
+
function MenubarSub({ ...props }) {
|
|
7
|
+
return _jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
|
|
8
|
+
}
|
|
9
|
+
function MenubarSubTrigger({ className, inset, children, ...props }) {
|
|
10
|
+
return (_jsxs(MenubarPrimitive.SubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }));
|
|
11
|
+
}
|
|
12
|
+
function MenubarSubContent({ className, ...props }) {
|
|
13
|
+
return (_jsx(MenubarPrimitive.SubContent, { "data-slot": "menubar-sub-content", className: cn("z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
export { MenubarSub, MenubarSubContent, MenubarSubTrigger };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as MenubarPrimitive from "radix-ui/menubar";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): React.JSX.Element;
|
|
4
|
+
declare function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>): React.JSX.Element;
|
|
5
|
+
declare function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>): React.JSX.Element;
|
|
6
|
+
declare function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>): React.JSX.Element;
|
|
7
|
+
declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
|
|
8
|
+
declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): React.JSX.Element;
|
|
9
|
+
export { Menubar, MenubarContent, MenubarGroup, MenubarMenu, MenubarPortal, MenubarTrigger };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import * as MenubarPrimitive from "radix-ui/menubar";
|
|
5
|
+
function Menubar({ className, ...props }) {
|
|
6
|
+
return (_jsx(MenubarPrimitive.Root, { "data-slot": "menubar", className: cn("flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs", className), ...props }));
|
|
7
|
+
}
|
|
8
|
+
function MenubarMenu({ ...props }) {
|
|
9
|
+
return _jsx(MenubarPrimitive.Menu, { "data-slot": "menubar-menu", ...props });
|
|
10
|
+
}
|
|
11
|
+
function MenubarGroup({ ...props }) {
|
|
12
|
+
return _jsx(MenubarPrimitive.Group, { "data-slot": "menubar-group", ...props });
|
|
13
|
+
}
|
|
14
|
+
function MenubarPortal({ ...props }) {
|
|
15
|
+
return _jsx(MenubarPrimitive.Portal, { "data-slot": "menubar-portal", ...props });
|
|
16
|
+
}
|
|
17
|
+
function MenubarTrigger({ className, ...props }) {
|
|
18
|
+
return (_jsx(MenubarPrimitive.Trigger, { "data-slot": "menubar-trigger", className: cn("flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className), ...props }));
|
|
19
|
+
}
|
|
20
|
+
function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
|
|
21
|
+
return (_jsx(MenubarPortal, { children: _jsx(MenubarPrimitive.Content, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props }) }));
|
|
22
|
+
}
|
|
23
|
+
export { Menubar, MenubarContent, MenubarGroup, MenubarMenu, MenubarPortal, MenubarTrigger };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as NavigationMenuPrimitive from "radix-ui/navigation-menu";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
|
4
|
+
viewport?: boolean;
|
|
5
|
+
}): React.JSX.Element;
|
|
6
|
+
declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): React.JSX.Element;
|
|
7
|
+
declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): React.JSX.Element;
|
|
8
|
+
declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
9
|
+
declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): React.JSX.Element;
|
|
10
|
+
declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): React.JSX.Element;
|
|
11
|
+
declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): React.JSX.Element;
|
|
12
|
+
declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): React.JSX.Element;
|
|
13
|
+
declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): React.JSX.Element;
|
|
14
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { cn } from "cn";
|
|
4
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
5
|
+
import * as NavigationMenuPrimitive from "radix-ui/navigation-menu";
|
|
6
|
+
function NavigationMenu({ className, children, viewport = true, ...props }) {
|
|
7
|
+
return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
|
|
8
|
+
}
|
|
9
|
+
function NavigationMenuList({ className, ...props }) {
|
|
10
|
+
return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn("group flex flex-1 list-none items-center justify-center gap-1", className), ...props }));
|
|
11
|
+
}
|
|
12
|
+
function NavigationMenuItem({ className, ...props }) {
|
|
13
|
+
return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent");
|
|
16
|
+
function NavigationMenuTrigger({ className, children, ...props }) {
|
|
17
|
+
return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", _jsx(ChevronDownIcon, { className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
|
|
18
|
+
}
|
|
19
|
+
function NavigationMenuContent({ className, ...props }) {
|
|
20
|
+
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn("top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95", className), ...props }));
|
|
21
|
+
}
|
|
22
|
+
function NavigationMenuViewport({ className, ...props }) {
|
|
23
|
+
return (_jsx("div", { className: cn("absolute top-full left-0 isolate z-50 flex justify-center"), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]", className), ...props }) }));
|
|
24
|
+
}
|
|
25
|
+
function NavigationMenuLink({ className, ...props }) {
|
|
26
|
+
return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props }));
|
|
27
|
+
}
|
|
28
|
+
function NavigationMenuIndicator({ className, ...props }) {
|
|
29
|
+
return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in", className), ...props, children: _jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" }) }));
|
|
30
|
+
}
|
|
31
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type Button } from "../action/button.js";
|
|
3
|
+
declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
|
|
4
|
+
declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
5
|
+
declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
6
|
+
type PaginationLinkProps = {
|
|
7
|
+
isActive?: boolean;
|
|
8
|
+
} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
|
|
9
|
+
declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
|
|
10
|
+
declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
|
|
11
|
+
declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
|
|
12
|
+
declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
13
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
|