@uselets/ui 1.20.3 → 2.0.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/README.md +322 -425
- package/dist/as-child-Dxg3Xo1G.d.ts +41 -0
- package/dist/cli/uselets.mjs +5 -4
- package/dist/cli/uselets.mjs.map +1 -1
- package/dist/components/accordion.d.ts +12 -8
- package/dist/components/accordion.js +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/alert-dialog.d.ts +20 -15
- package/dist/components/alert-dialog.js +1 -1
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/alert.d.ts +1 -1
- package/dist/components/alert.js +1 -1
- package/dist/components/alert.js.map +1 -1
- package/dist/components/anchor.d.ts +3 -5
- package/dist/components/anchor.js +1 -1
- package/dist/components/anchor.js.map +1 -1
- package/dist/components/area-chart.d.ts +54 -0
- package/dist/components/area-chart.js +1 -1
- package/dist/components/area-chart.js.map +1 -1
- package/dist/components/avatar.d.ts +12 -7
- package/dist/components/avatar.js +1 -1
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.d.ts +3 -5
- package/dist/components/badge.js +1 -1
- package/dist/components/badge.js.map +1 -1
- package/dist/components/bar-chart.d.ts +48 -0
- package/dist/components/bar-chart.js +1 -1
- package/dist/components/bar-chart.js.map +1 -1
- package/dist/components/bottom-nav.d.ts +7 -3
- package/dist/components/bottom-nav.js +1 -1
- package/dist/components/bottom-nav.js.map +1 -1
- package/dist/components/breadcrumb.d.ts +3 -4
- package/dist/components/breadcrumb.js +1 -1
- package/dist/components/breadcrumb.js.map +1 -1
- package/dist/components/button-group.d.ts +3 -4
- package/dist/components/button-group.js +1 -1
- package/dist/components/button-group.js.map +1 -1
- package/dist/components/button.d.ts +8 -4
- package/dist/components/button.js +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/calendar.d.ts +4 -0
- package/dist/components/calendar.js +1 -1
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/card.d.ts +4 -0
- package/dist/components/card.js +1 -1
- package/dist/components/card.js.map +1 -1
- package/dist/components/carousel.d.ts +11 -3
- package/dist/components/carousel.js +1 -1
- package/dist/components/carousel.js.map +1 -1
- package/dist/components/center.d.ts +1 -1
- package/dist/components/center.js +1 -1
- package/dist/components/center.js.map +1 -1
- package/dist/components/chart.js +4 -4
- package/dist/components/chart.js.map +1 -1
- package/dist/components/checkbox.d.ts +14 -4
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/code.js +1 -1
- package/dist/components/code.js.map +1 -1
- package/dist/components/collapsible.d.ts +8 -7
- package/dist/components/collapsible.js +1 -1
- package/dist/components/collapsible.js.map +1 -1
- package/dist/components/combobox.d.ts +48 -26
- package/dist/components/combobox.js +1 -1
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/command.d.ts +16 -2
- package/dist/components/command.js +1 -1
- package/dist/components/command.js.map +1 -1
- package/dist/components/container.d.ts +1 -1
- package/dist/components/container.js +1 -1
- package/dist/components/container.js.map +1 -1
- package/dist/components/data-table.d.ts +177 -2
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-range-picker.d.ts +24 -2
- package/dist/components/date-range-picker.js +1 -1
- package/dist/components/date-range-picker.js.map +1 -1
- package/dist/components/dialog.d.ts +33 -15
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/direction.d.ts +7 -0
- package/dist/components/direction.js +1 -0
- package/dist/components/donut-chart.d.ts +12 -0
- package/dist/components/donut-chart.js +1 -1
- package/dist/components/donut-chart.js.map +1 -1
- package/dist/components/drawer.d.ts +33 -15
- package/dist/components/drawer.js +1 -1
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/dropdown-menu.d.ts +36 -26
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/dropzone.d.ts +19 -0
- package/dist/components/dropzone.js +1 -1
- package/dist/components/dropzone.js.map +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/empty.js.map +1 -1
- package/dist/components/field.d.ts +16 -4
- package/dist/components/field.js +1 -1
- package/dist/components/field.js.map +1 -1
- package/dist/components/flex.d.ts +1 -1
- package/dist/components/flex.js +1 -1
- package/dist/components/flex.js.map +1 -1
- package/dist/components/grid.d.ts +13 -0
- package/dist/components/grid.js +1 -1
- package/dist/components/grid.js.map +1 -1
- package/dist/components/group.d.ts +1 -1
- package/dist/components/group.js +1 -1
- package/dist/components/group.js.map +1 -1
- package/dist/components/heading.d.ts +3 -5
- package/dist/components/heading.js +1 -1
- package/dist/components/heading.js.map +1 -1
- package/dist/components/hover-card.d.ts +7 -6
- package/dist/components/hover-card.js +1 -1
- package/dist/components/hover-card.js.map +1 -1
- package/dist/components/input-group.d.ts +2 -2
- package/dist/components/input-group.js +1 -1
- package/dist/components/input-group.js.map +1 -1
- package/dist/components/input-otp.d.ts +4 -2
- package/dist/components/input-otp.js +1 -1
- package/dist/components/input-otp.js.map +1 -1
- package/dist/components/input.d.ts +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/input.js.map +1 -1
- package/dist/components/kbd.js +1 -1
- package/dist/components/kbd.js.map +1 -1
- package/dist/components/label.d.ts +3 -4
- package/dist/components/label.js +1 -1
- package/dist/components/label.js.map +1 -1
- package/dist/components/list.d.ts +8 -5
- package/dist/components/list.js +1 -1
- package/dist/components/list.js.map +1 -1
- package/dist/components/logo.d.ts +113 -0
- package/dist/components/logo.js +1 -1
- package/dist/components/marker.d.ts +4 -5
- package/dist/components/marker.js +1 -1
- package/dist/components/marker.js.map +1 -1
- package/dist/components/mask-input.d.ts +6 -0
- package/dist/components/mask-input.js +1 -1
- package/dist/components/mask-input.js.map +1 -1
- package/dist/components/native-select.d.ts +5 -1
- package/dist/components/native-select.js +1 -1
- package/dist/components/native-select.js.map +1 -1
- package/dist/components/navigation-menu.d.ts +19 -20
- package/dist/components/navigation-menu.js +1 -1
- package/dist/components/navigation-menu.js.map +1 -1
- package/dist/components/number-field.d.ts +18 -13
- package/dist/components/number-field.js +1 -1
- package/dist/components/number-field.js.map +1 -1
- package/dist/components/pagination.d.ts +9 -0
- package/dist/components/pagination.js +1 -1
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/phone-input.d.ts +6 -0
- package/dist/components/phone-input.js +1 -1
- package/dist/components/phone-input.js.map +1 -1
- package/dist/components/pie-chart.d.ts +53 -0
- package/dist/components/pie-chart.js +1 -1
- package/dist/components/pie-chart.js.map +1 -1
- package/dist/components/popover.d.ts +13 -12
- package/dist/components/popover.js +1 -1
- package/dist/components/popover.js.map +1 -1
- package/dist/components/progress.d.ts +9 -3
- package/dist/components/progress.js +1 -1
- package/dist/components/progress.js.map +1 -1
- package/dist/components/radio-group.d.ts +20 -6
- package/dist/components/radio-group.js +1 -1
- package/dist/components/radio-group.js.map +1 -1
- package/dist/components/resizable.d.ts +1 -0
- package/dist/components/resizable.js +1 -1
- package/dist/components/resizable.js.map +1 -1
- package/dist/components/ring-progress.d.ts +9 -1
- package/dist/components/ring-progress.js +1 -1
- package/dist/components/ring-progress.js.map +1 -1
- package/dist/components/scroll-area.d.ts +3 -3
- package/dist/components/scroll-area.js +1 -1
- package/dist/components/scroll-area.js.map +1 -1
- package/dist/components/select.d.ts +25 -20
- package/dist/components/select.js +1 -1
- package/dist/components/select.js.map +1 -1
- package/dist/components/separator.d.ts +9 -4
- package/dist/components/separator.js +1 -1
- package/dist/components/separator.js.map +1 -1
- package/dist/components/sidebar.d.ts +63 -18
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/simple-grid.d.ts +7 -0
- package/dist/components/simple-grid.js +1 -1
- package/dist/components/simple-grid.js.map +1 -1
- package/dist/components/skeleton.d.ts +4 -0
- package/dist/components/skeleton.js +1 -1
- package/dist/components/skeleton.js.map +1 -1
- package/dist/components/slider.d.ts +2 -2
- package/dist/components/slider.js +1 -1
- package/dist/components/slider.js.map +1 -1
- package/dist/components/sonner.js +1 -1
- package/dist/components/sonner.js.map +1 -1
- package/dist/components/spinner.d.ts +1 -1
- package/dist/components/spinner.js +1 -1
- package/dist/components/spinner.js.map +1 -1
- package/dist/components/stack.d.ts +1 -1
- package/dist/components/stack.js +1 -1
- package/dist/components/stack.js.map +1 -1
- package/dist/components/stepper.d.ts +46 -25
- package/dist/components/stepper.js +1 -1
- package/dist/components/stepper.js.map +1 -1
- package/dist/components/switch.d.ts +17 -3
- package/dist/components/switch.js +1 -1
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table.d.ts +10 -1
- package/dist/components/table.js +1 -1
- package/dist/components/table.js.map +1 -1
- package/dist/components/tabs.d.ts +14 -10
- package/dist/components/tabs.js +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/text.d.ts +3 -5
- package/dist/components/text.js +1 -1
- package/dist/components/text.js.map +1 -1
- package/dist/components/textarea.d.ts +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/textarea.js.map +1 -1
- package/dist/components/theme.d.ts +12 -0
- package/dist/components/theme.js +1 -1
- package/dist/components/theme.js.map +1 -1
- package/dist/components/timeline.d.ts +25 -1
- package/dist/components/timeline.js +1 -1
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/toggle-group.d.ts +16 -6
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle.d.ts +4 -4
- package/dist/components/toggle.js +1 -1
- package/dist/components/toggle.js.map +1 -1
- package/dist/components/tooltip.d.ts +15 -8
- package/dist/components/tooltip.js +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/unstyled-button.d.ts +3 -5
- package/dist/components/unstyled-button.js +1 -1
- package/dist/components/unstyled-button.js.map +1 -1
- package/dist/components/visibility.d.ts +2 -0
- package/dist/components/visibility.js +1 -1
- package/dist/components/visibility.js.map +1 -1
- package/dist/hooks/use-breakpoint-value.d.ts +1 -0
- package/dist/hooks/use-breakpoint-value.js.map +1 -1
- package/dist/hooks/use-breakpoint.d.ts +1 -0
- package/dist/hooks/use-breakpoint.js.map +1 -1
- package/dist/hooks/use-disclosure.d.ts +3 -0
- package/dist/hooks/use-disclosure.js +1 -1
- package/dist/hooks/use-disclosure.js.map +1 -1
- package/dist/hooks/use-document-visibility.d.ts +1 -0
- package/dist/hooks/use-document-visibility.js.map +1 -1
- package/dist/hooks/use-hotkeys.d.ts +1 -1
- package/dist/hooks/use-hotkeys.js +1 -1
- package/dist/hooks/use-idle.d.ts +9 -0
- package/dist/hooks/use-idle.js.map +1 -1
- package/dist/hooks/use-interval.d.ts +1 -0
- package/dist/hooks/use-interval.js.map +1 -1
- package/dist/hooks/use-local-storage.d.ts +6 -0
- package/dist/hooks/use-local-storage.js +1 -1
- package/dist/hooks/use-local-storage.js.map +1 -1
- package/dist/hooks/use-mask.d.ts +1 -0
- package/dist/hooks/use-mask.js.map +1 -1
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js.map +1 -1
- package/dist/index.d.ts +9 -7
- package/dist/index.js +1 -1
- package/dist/lib/as-child.d.ts +2 -0
- package/dist/lib/as-child.js +2 -0
- package/dist/lib/as-child.js.map +1 -0
- package/dist/lib/badge.js.map +1 -1
- package/dist/lib/button.js.map +1 -1
- package/dist/lib/color.js.map +1 -1
- package/dist/lib/compose-refs.js +1 -1
- package/dist/lib/compose-refs.js.map +1 -1
- package/dist/lib/progress.js.map +1 -1
- package/dist/lib/utils.d.ts +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/logo--R3_XDgA.js +2 -0
- package/dist/logo--R3_XDgA.js.map +1 -0
- package/dist/postcss.config.js.map +1 -1
- package/dist/resolve-class-name-BurP8ngI.js +2 -0
- package/dist/resolve-class-name-BurP8ngI.js.map +1 -0
- package/dist/skills/uselets-ui/SKILL.md +9 -3
- package/dist/skills/uselets-ui/references/component-catalog.md +31 -16
- package/dist/skills/uselets-ui/references/migration-v1-to-v2.md +599 -0
- package/dist/skills/uselets-ui/references/package-guide.md +23 -7
- package/dist/styles/base.css +21 -0
- package/dist/{use-hotkeys-DOjcX9Tt.d.ts → use-hotkeys-D1_TEIwN.d.ts} +2 -1
- package/dist/use-hotkeys-YDJmGWX6.js.map +1 -1
- package/package.json +18 -19
- package/skills/uselets-ui/SKILL.md +9 -3
- package/skills/uselets-ui/references/component-catalog.md +31 -16
- package/skills/uselets-ui/references/migration-v1-to-v2.md +599 -0
- package/skills/uselets-ui/references/package-guide.md +23 -7
- package/dist/data-table-DWWVGWbU.d.ts +0 -4184
- package/dist/logo-B0thHtTS.js +0 -2
- package/dist/logo-B0thHtTS.js.map +0 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { t as __name } from "../rolldown-runtime-BhWHdk3m.js";
|
|
2
|
+
import { n as AsChildProps } from "../as-child-Dxg3Xo1G.js";
|
|
2
3
|
import { Button } from "./button.js";
|
|
3
4
|
import { Separator } from "./separator.js";
|
|
4
5
|
import { Input } from "./input.js";
|
|
5
6
|
import { TooltipContent } from "./tooltip.js";
|
|
6
|
-
import { VariantProps } from "class-variance-authority";
|
|
7
7
|
import * as React from "react";
|
|
8
|
+
import { VariantProps } from "class-variance-authority";
|
|
8
9
|
//#region src/components/sidebar.d.ts
|
|
9
10
|
type SidebarContextProps = {
|
|
10
11
|
state: 'expanded' | 'collapsed';
|
|
@@ -21,16 +22,46 @@ type SidebarContextProps = {
|
|
|
21
22
|
hoverExpandCloseDelay: number;
|
|
22
23
|
};
|
|
23
24
|
export type SidebarProviderProps = React.ComponentProps<'div'> & {
|
|
25
|
+
/**
|
|
26
|
+
* Whether the sidebar starts expanded (uncontrolled).
|
|
27
|
+
* @default true
|
|
28
|
+
*/
|
|
24
29
|
defaultOpen?: boolean;
|
|
30
|
+
/** Whether the sidebar is expanded (controlled). */
|
|
25
31
|
open?: boolean;
|
|
32
|
+
/** Called when the sidebar expands or collapses. */
|
|
26
33
|
onOpenChange?: (open: boolean) => void;
|
|
34
|
+
/**
|
|
35
|
+
* With `collapsible="icon"`, shows a floating preview of the collapsed sidebar on hover or focus.
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
27
38
|
expandOnHover?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Delay in ms before the hover preview opens.
|
|
41
|
+
* @default 150
|
|
42
|
+
*/
|
|
28
43
|
hoverExpandOpenDelay?: number;
|
|
44
|
+
/**
|
|
45
|
+
* Delay in ms before the hover preview closes.
|
|
46
|
+
* @default 300
|
|
47
|
+
*/
|
|
29
48
|
hoverExpandCloseDelay?: number;
|
|
30
49
|
};
|
|
31
50
|
export type SidebarProps = React.ComponentProps<'div'> & {
|
|
51
|
+
/**
|
|
52
|
+
* Edge of the screen the sidebar sits on.
|
|
53
|
+
* @default 'left'
|
|
54
|
+
*/
|
|
32
55
|
side?: 'left' | 'right';
|
|
56
|
+
/**
|
|
57
|
+
* `floating` adds a gap and shadow; `inset` pairs with `SidebarInset` for an inset main area.
|
|
58
|
+
* @default 'sidebar'
|
|
59
|
+
*/
|
|
33
60
|
variant?: 'sidebar' | 'floating' | 'inset';
|
|
61
|
+
/**
|
|
62
|
+
* `offcanvas` slides the sidebar out, `icon` shrinks it to icons, `none` keeps it open.
|
|
63
|
+
* @default 'offcanvas'
|
|
64
|
+
*/
|
|
34
65
|
collapsible?: 'offcanvas' | 'icon' | 'none';
|
|
35
66
|
};
|
|
36
67
|
export type SidebarTriggerProps = React.ComponentProps<typeof Button>;
|
|
@@ -42,18 +73,14 @@ export type SidebarFooterProps = React.ComponentProps<'div'>;
|
|
|
42
73
|
export type SidebarSeparatorProps = React.ComponentProps<typeof Separator>;
|
|
43
74
|
export type SidebarContentProps = React.ComponentProps<'div'>;
|
|
44
75
|
export type SidebarGroupProps = React.ComponentProps<'div'>;
|
|
45
|
-
export type SidebarGroupLabelProps =
|
|
46
|
-
|
|
47
|
-
};
|
|
48
|
-
export type SidebarGroupActionProps = React.ComponentProps<'button'> & {
|
|
49
|
-
asChild?: boolean;
|
|
50
|
-
};
|
|
76
|
+
export type SidebarGroupLabelProps = AsChildProps<'div'>;
|
|
77
|
+
export type SidebarGroupActionProps = AsChildProps<'button'>;
|
|
51
78
|
export type SidebarGroupContentProps = React.ComponentProps<'div'>;
|
|
52
79
|
export type SidebarMenuProps = React.ComponentProps<'ul'>;
|
|
53
80
|
export type SidebarMenuItemProps = React.ComponentProps<'li'>;
|
|
54
81
|
declare function useSidebar(): SidebarContextProps;
|
|
55
82
|
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, expandOnHover, hoverExpandOpenDelay, hoverExpandCloseDelay, className, style, children, ...props }: SidebarProviderProps): React.JSX.Element;
|
|
56
|
-
declare function Sidebar({ side, variant, collapsible, className, children,
|
|
83
|
+
declare function Sidebar({ side, variant, collapsible, className, children, ...props }: SidebarProps): React.JSX.Element;
|
|
57
84
|
declare function SidebarTrigger({ className, onClick, asChild, children, ...props }: SidebarTriggerProps): React.JSX.Element;
|
|
58
85
|
declare function SidebarRail({ className, ...props }: SidebarRailProps): React.JSX.Element;
|
|
59
86
|
declare function SidebarInset({ className, ...props }: SidebarInsetProps): React.JSX.Element;
|
|
@@ -63,8 +90,8 @@ declare function SidebarFooter({ className, ...props }: SidebarFooterProps): Rea
|
|
|
63
90
|
declare function SidebarSeparator({ className, ...props }: SidebarSeparatorProps): React.JSX.Element;
|
|
64
91
|
declare function SidebarContent({ className, ...props }: SidebarContentProps): React.JSX.Element;
|
|
65
92
|
declare function SidebarGroup({ className, ...props }: SidebarGroupProps): React.JSX.Element;
|
|
66
|
-
declare function SidebarGroupLabel({ className,
|
|
67
|
-
declare function SidebarGroupAction({ className,
|
|
93
|
+
declare function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
94
|
+
declare function SidebarGroupAction({ className, ...props }: SidebarGroupActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
68
95
|
declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): React.JSX.Element;
|
|
69
96
|
declare function SidebarMenu({ className, ...props }: SidebarMenuProps): React.JSX.Element;
|
|
70
97
|
declare function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps): React.JSX.Element;
|
|
@@ -72,33 +99,51 @@ declare const sidebarMenuButtonVariants: (props?: ({
|
|
|
72
99
|
variant?: "default" | "outline" | null | undefined;
|
|
73
100
|
size?: "lg" | "md" | "sm" | null | undefined;
|
|
74
101
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
75
|
-
export type SidebarMenuButtonProps =
|
|
76
|
-
|
|
102
|
+
export type SidebarMenuButtonProps = AsChildProps<'button'> & {
|
|
103
|
+
/**
|
|
104
|
+
* Marks the item as the current page.
|
|
105
|
+
* @default false
|
|
106
|
+
*/
|
|
77
107
|
isActive?: boolean;
|
|
108
|
+
/** Label (or tooltip content props) shown when the sidebar is collapsed to icons. */
|
|
78
109
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
79
110
|
} & VariantProps<typeof sidebarMenuButtonVariants>;
|
|
80
|
-
export type SidebarMenuActionProps =
|
|
81
|
-
|
|
111
|
+
export type SidebarMenuActionProps = AsChildProps<'button'> & {
|
|
112
|
+
/**
|
|
113
|
+
* On desktop, hides the action until the menu item is hovered or focused.
|
|
114
|
+
* @default false
|
|
115
|
+
*/
|
|
82
116
|
showOnHover?: boolean;
|
|
83
117
|
};
|
|
84
118
|
export type SidebarMenuBadgeProps = React.ComponentProps<'div'>;
|
|
85
119
|
export type SidebarMenuSkeletonProps = React.ComponentProps<'div'> & {
|
|
120
|
+
/**
|
|
121
|
+
* Adds an icon placeholder before the text.
|
|
122
|
+
* @default false
|
|
123
|
+
*/
|
|
86
124
|
showIcon?: boolean;
|
|
87
125
|
};
|
|
88
126
|
export type SidebarMenuSubProps = React.ComponentProps<'ul'>;
|
|
89
127
|
export type SidebarMenuSubItemProps = React.ComponentProps<'li'>;
|
|
90
|
-
export type SidebarMenuSubButtonProps =
|
|
91
|
-
|
|
128
|
+
export type SidebarMenuSubButtonProps = AsChildProps<'a'> & {
|
|
129
|
+
/**
|
|
130
|
+
* Text size of the sub-item.
|
|
131
|
+
* @default 'md'
|
|
132
|
+
*/
|
|
92
133
|
size?: 'sm' | 'md';
|
|
134
|
+
/**
|
|
135
|
+
* Marks the sub-item as the current page.
|
|
136
|
+
* @default false
|
|
137
|
+
*/
|
|
93
138
|
isActive?: boolean;
|
|
94
139
|
};
|
|
95
140
|
declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: SidebarMenuButtonProps): React.JSX.Element;
|
|
96
|
-
declare function SidebarMenuAction({ className,
|
|
141
|
+
declare function SidebarMenuAction({ className, showOnHover, ...props }: SidebarMenuActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
97
142
|
declare function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): React.JSX.Element;
|
|
98
143
|
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: SidebarMenuSkeletonProps): React.JSX.Element;
|
|
99
144
|
declare function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps): React.JSX.Element;
|
|
100
145
|
declare function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps): React.JSX.Element;
|
|
101
|
-
declare function SidebarMenuSubButton({
|
|
146
|
+
declare function SidebarMenuSubButton({ size, isActive, className, ...props }: SidebarMenuSubButtonProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
102
147
|
//#endregion
|
|
103
148
|
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 };
|
|
104
149
|
//# sourceMappingURL=sidebar.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{Separator as n}from"./separator.js";import{Input as r}from"./input.js";import{Drawer as i,DrawerContent as a,DrawerDescription as o,DrawerHeader as s,DrawerTitle as c}from"./drawer.js";import{useIsMobile as l}from"../hooks/use-mobile.js";import{Skeleton as u}from"./skeleton.js";import{Tooltip as d}from"./tooltip.js";import{IconLayoutSidebar as f}from"@tabler/icons-react";import{Slot as p}from"radix-ui";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import*as v from"react";const y=v.createContext(null),b=v.createContext(null);function useSidebar(){let e=v.useContext(y);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function SidebarProvider({defaultOpen:t=!0,open:n,onOpenChange:r,expandOnHover:i=!1,hoverExpandOpenDelay:a=150,hoverExpandCloseDelay:o=300,className:s,style:c,children:u,...d}){let f=l(),[p,m]=v.useState(!1),[g,_]=v.useState(!1),x=v.useRef(!1),S=v.useCallback(()=>{x.current=!0,_(!1)},[]);v.useEffect(()=>{i||_(!1)},[i]);let[C,w]=v.useState(t),T=n??C,E=v.useCallback(e=>{let t=typeof e==`function`?e(T):e;T&&!t&&S(),r?r(t):w(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[r,T,S]),D=v.useCallback(()=>f?m(e=>!e):E(e=>!e),[f,E]);v.useEffect(()=>{let handleKeyDown=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),D())};return window.addEventListener(`keydown`,handleKeyDown),()=>window.removeEventListener(`keydown`,handleKeyDown)},[D]);let O=T?`expanded`:`collapsed`,k=v.useMemo(()=>({state:O,open:T,setOpen:E,isMobile:f,openMobile:p,setOpenMobile:m,toggleSidebar:D,expandOnHover:i,isHoverExpanded:g,setHoverExpanded:_,hoverExpandOpenDelay:a,hoverExpandCloseDelay:o}),[O,T,E,f,p,D,i,g,a,o]),A=v.useMemo(()=>({suppressedRef:x,dismissHoverPreview:S}),[S]);return h(y.Provider,{value:k,children:h(b.Provider,{value:A,children:h(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...c},className:e(`group/sidebar-wrapper relative flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar`,s),...d,children:u})})})}function Sidebar({side:t=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:l,children:u,dir:d,...f}){let{isMobile:p,state:m,openMobile:_,setOpenMobile:y,expandOnHover:x,isHoverExpanded:S,setHoverExpanded:C,hoverExpandOpenDelay:w,hoverExpandCloseDelay:T}=useSidebar(),E=x&&r===`icon`,D=E&&S,O=v.useRef(!1),k=v.useRef(!1),A=v.useRef(null),j=v.useRef(null),M=v.useRef(!1),N=v.useRef(null),P=v.useContext(b)?.suppressedRef,F=v.useCallback((e=!1)=>{A.current&&=(clearTimeout(A.current),null),j.current&&=(clearTimeout(j.current),null);let t=!P?.current&&(O.current||k.current);if(e){C(t);return}let n=t?A:j;n.current=setTimeout(()=>{n.current=null,C(t&&!P?.current)},t?w:T)},[C,w,T,P]);v.useEffect(()=>{if(!E)return;let handlePointerDown=()=>{M.current=!0},handleKeyDown=()=>{M.current=!1};return document.addEventListener(`pointerdown`,handlePointerDown,!0),document.addEventListener(`keydown`,handleKeyDown,!0),()=>{document.removeEventListener(`pointerdown`,handlePointerDown,!0),document.removeEventListener(`keydown`,handleKeyDown,!0)}},[E]),v.useEffect(()=>{let e=N.current;if(!E||p||!e)return;let handleMouseEnter=()=>{O.current=!0,P&&(P.current=!1),F()},handleMouseLeave=()=>{O.current=!1,P&&(P.current=!1),F()};return e.addEventListener(`mouseenter`,handleMouseEnter),e.addEventListener(`mouseleave`,handleMouseLeave),()=>{e.removeEventListener(`mouseenter`,handleMouseEnter),e.removeEventListener(`mouseleave`,handleMouseLeave)}},[E,p,F,P]),v.useEffect(()=>()=>{A.current&&clearTimeout(A.current),j.current&&clearTimeout(j.current),C(!1)},[C]);let handleFocus=e=>{if(!E)return;let t=e.target;k.current=!M.current||!e.currentTarget.contains(t)||t.matches(`textarea, select, [contenteditable]:not([contenteditable="false"]), input:not([type="button"], [type="checkbox"], [type="radio"], [type="reset"], [type="submit"])`),!M.current&&P&&(P.current=!1),F()},handleBlur=e=>{E&&(e.currentTarget.contains(e.relatedTarget)||(k.current=!1,F()))},handleKeyDown=e=>{E&&e.key===`Escape`&&S&&(O.current=!1,k.current=!1,F(!0),document.activeElement?.blur?.())};return r===`none`?h(`div`,{"data-slot":`sidebar`,className:e(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,l),...f,children:u}):p?h(i,{open:_,onOpenChange:y,direction:t,size:`sm`,children:g(a,{dir:d,"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`h-full w-(--sidebar-width) rounded-none bg-sidebar p-0 text-sidebar-foreground`,style:{"--sidebar-width":`18rem`},...f,children:[g(s,{className:`sr-only`,children:[h(c,{children:`Sidebar`}),h(o,{children:`Displays the mobile sidebar.`})]}),h(`div`,{className:`flex h-full w-full flex-col`,children:u})]})}):g(`div`,{className:`group peer hidden text-sidebar-foreground md:block`,"data-state":m,"data-collapsible":m===`collapsed`&&!D?r:``,"data-collapsible-raw":m===`collapsed`?r:``,"data-hover-expanded":D?`true`:void 0,"data-variant":n,"data-side":t,"data-slot":`sidebar`,ref:N,onFocus:handleFocus,onBlur:handleBlur,onKeyDown:handleKeyDown,children:[h(`div`,{"data-slot":`sidebar-gap`,className:e(`relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear`,`group-data-[collapsible-raw=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible-raw=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible-raw=icon]:w-(--sidebar-width-icon)`)}),h(`div`,{"data-slot":`sidebar-container`,"data-side":t,className:e(`fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex`,`data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width)`,`data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width)`,n===`floating`||n===`inset`?[`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]`,`[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)+2px-(--spacing(4))-2rem)/2)]`]:[`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`,`[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)-(--spacing(4))-2rem)/2)]`],n!==`floating`&&n!==`inset`&&`group-data-[side=left]:border-r group-data-[side=right]:border-l`,`group-data-[hover-expanded=true]:shadow-lg group-data-[hover-expanded=true]:ring-1 group-data-[hover-expanded=true]:ring-foreground/10`,l),...f,children:h(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:e(`flex size-full flex-col bg-sidebar`,`group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm`,`group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border`),children:u})})]})}function SidebarTrigger({className:n,onClick:r,asChild:i=!1,children:a,...o}){let{toggleSidebar:s,open:c,isHoverExpanded:l}=useSidebar(),u=v.useContext(b);return h(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,size:`icon-sm`,color:`zinc`,asChild:i,className:e(n),onClick:e=>{r?.(e),!e.defaultPrevented&&(l&&!c?u?.dismissHoverPreview():s())},...o,children:i?a:g(m,{children:[h(f,{}),h(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]})})}function SidebarRail({className:t,...n}){let{toggleSidebar:r,open:i,setOpen:a,isHoverExpanded:o}=useSidebar(),handleClick=()=>{o&&!i?a(!0):r()};return h(`button`,{"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:handleClick,title:`Toggle Sidebar`,className:e(`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`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:s-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2`,`[[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`,t),...n})}function SidebarInset({className:t,...n}){return h(`main`,{"data-slot":`sidebar-inset`,className:e(`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`,t),...n})}function SidebarInput({className:t,...n}){return h(r,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:e(`h-8 w-full bg-background shadow-none`,t),...n})}function SidebarHeader({className:t,...n}){return h(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:e(`flex flex-col gap-2 p-2`,t),...n})}function SidebarFooter({className:t,...n}){return h(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:e(`flex flex-col gap-2 p-2`,t),...n})}function SidebarSeparator({className:t,...r}){return h(n,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:e(`w-auto bg-sidebar-border`,t),...r})}function SidebarContent({className:t,...n}){return h(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:e(`no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,t),...n})}function SidebarGroup({className:t,...n}){return h(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:e(`relative flex w-full min-w-0 flex-col px-2`,t),...n})}function SidebarGroupLabel({className:t,asChild:n=!1,...r}){let i=n?p.Root:`div`;return h(i,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:e(`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]:pointer-events-none group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,t),...r})}function SidebarGroupAction({className:t,asChild:n=!1,...r}){let i=n?p.Root:`button`;return h(i,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:e(`absolute top-1.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`,t),...r})}function SidebarGroupContent({className:t,...n}){return h(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:e(`w-full text-sm mt-2`,t),...n})}function SidebarMenu({className:t,...n}){return h(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:e(`flex w-full min-w-0 flex-col gap-0`,t),...n})}function SidebarMenuItem({className:t,...n}){return h(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:e(`group/menu-item relative`,t),...n})}const x=_(`peer/menu-button group/menu-button font-medium 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,margin] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:ml-(--sidebar-menu-button-collapsed-offset) 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:[&_svg]:text-sidebar-primary data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate`,{variants:{variant:{default:`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,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))]`},size:{md:`h-8 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`md`}});function SidebarMenuButton({asChild:t=!1,isActive:n=!1,variant:r=`default`,size:i=`md`,tooltip:a,className:o,...s}){let c=t?p.Root:`button`,{isMobile:l,state:u,isHoverExpanded:f}=useSidebar(),m=h(c,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":i,"data-active":n,className:e(x({variant:r,size:i}),o),...s});return a?(typeof a==`string`&&(a={children:a}),h(d,{label:a.children,side:`right`,align:`center`,hidden:u!==`collapsed`||l||f,...a,children:m})):m}function SidebarMenuAction({className:t,asChild:n=!1,showOnHover:r=!1,...i}){let a=n?p.Root:`button`;return h(a,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:e(`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=md]/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`,r&&`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`,t),...i})}function SidebarMenuBadge({className:t,...n}){return h(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:e(`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=md]/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`,t),...n})}function SidebarMenuSkeleton({className:t,showIcon:n=!1,...r}){let[i]=v.useState(()=>`${Math.floor(Math.random()*40)+50}%`);return g(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:e(`flex h-8 items-center gap-2 rounded-md px-2`,t),...r,children:[n&&h(u,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),h(u,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":i}})]})}function SidebarMenuSub({className:t,...n}){return h(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:e(`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`,t),...n})}function SidebarMenuSubItem({className:t,...n}){return h(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:e(`group/menu-sub-item relative`,t),...n})}function SidebarMenuSubButton({asChild:t=!1,size:n=`md`,isActive:r=!1,className:i,...a}){let o=t?p.Root:`a`;return h(o,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":n,"data-active":r,className:e(`flex h-7 min-w-0 -translate-x-px items-center font-medium 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`,i),...a})}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};
|
|
1
|
+
import"../rolldown-runtime-BhWHdk3m.js";import{useAsChild as e}from"../lib/as-child.js";import{cn as t}from"../lib/utils.js";import{t as n}from"../resolve-class-name-BurP8ngI.js";import{Button as r}from"./button.js";import{Separator as i}from"./separator.js";import{Input as a}from"./input.js";import{Drawer as o,DrawerContent as s,DrawerDescription as c,DrawerHeader as l,DrawerTitle as u}from"./drawer.js";import{useIsMobile as d}from"../hooks/use-mobile.js";import{Skeleton as f}from"./skeleton.js";import{Tooltip as p}from"./tooltip.js";import{IconLayoutSidebar as m}from"@tabler/icons-react";import*as h from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{cva as y}from"class-variance-authority";const b=h.createContext(null),x=h.createContext(null);function useSidebar(){let e=h.useContext(b);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function isEditableContent(e){return e instanceof Element&&e.closest(`[contenteditable]:not([contenteditable="false"])`)!==null}function SidebarProvider({defaultOpen:e=!0,open:n,onOpenChange:r,expandOnHover:i=!1,hoverExpandOpenDelay:a=150,hoverExpandCloseDelay:o=300,className:s,style:c,children:l,...u}){let f=d(),[p,m]=h.useState(!1),[g,v]=h.useState(!1),y=h.useRef(!1),S=h.useCallback(()=>{y.current=!0,v(!1)},[]);h.useEffect(()=>{i||v(!1)},[i]);let[C,w]=h.useState(e),T=n??C,E=h.useCallback(e=>{let t=typeof e==`function`?e(T):e;T&&!t&&S(),r?r(t):w(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[r,T,S]),D=h.useCallback(()=>f?m(e=>!e):E(e=>!e),[f,E]);h.useEffect(()=>{let handleKeyDown=e=>{e.defaultPrevented||isEditableContent(e.target)||e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),D())};return window.addEventListener(`keydown`,handleKeyDown),()=>window.removeEventListener(`keydown`,handleKeyDown)},[D]);let O=T?`expanded`:`collapsed`,k=h.useMemo(()=>({state:O,open:T,setOpen:E,isMobile:f,openMobile:p,setOpenMobile:m,toggleSidebar:D,expandOnHover:i,isHoverExpanded:g,setHoverExpanded:v,hoverExpandOpenDelay:a,hoverExpandCloseDelay:o}),[O,T,E,f,p,D,i,g,a,o]),A=h.useMemo(()=>({suppressedRef:y,dismissHoverPreview:S}),[S]);return/* @__PURE__ */ _(b.Provider,{value:k,children:/* @__PURE__ */ _(x.Provider,{value:A,children:/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...c},className:t(`group/sidebar-wrapper relative flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar`,s),...u,children:l})})})}function Sidebar({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...d}){let{isMobile:f,state:p,openMobile:m,setOpenMobile:g,expandOnHover:y,isHoverExpanded:b,setHoverExpanded:S,hoverExpandOpenDelay:C,hoverExpandCloseDelay:w}=useSidebar(),T=y&&r===`icon`,E=T&&b,D=h.useRef(!1),O=h.useRef(!1),k=h.useRef(null),A=h.useRef(null),j=h.useRef(!1),M=h.useRef(null),N=h.useContext(x)?.suppressedRef,P=h.useCallback((e=!1)=>{k.current&&=(clearTimeout(k.current),null),A.current&&=(clearTimeout(A.current),null);let t=!N?.current&&(D.current||O.current);if(e){S(t);return}let n=t?k:A;n.current=setTimeout(()=>{n.current=null,S(t&&!N?.current)},t?C:w)},[S,C,w,N]);h.useEffect(()=>{if(!T)return;let handlePointerDown=()=>{j.current=!0},handleKeyDown=()=>{j.current=!1};return document.addEventListener(`pointerdown`,handlePointerDown,!0),document.addEventListener(`keydown`,handleKeyDown,!0),()=>{document.removeEventListener(`pointerdown`,handlePointerDown,!0),document.removeEventListener(`keydown`,handleKeyDown,!0)}},[T]),h.useEffect(()=>{let e=M.current;if(!T||f||!e)return;let handleMouseEnter=()=>{D.current=!0,N&&(N.current=!1),P()},handleMouseLeave=()=>{D.current=!1,N&&(N.current=!1),P()};return e.addEventListener(`mouseenter`,handleMouseEnter),e.addEventListener(`mouseleave`,handleMouseLeave),()=>{e.removeEventListener(`mouseenter`,handleMouseEnter),e.removeEventListener(`mouseleave`,handleMouseLeave)}},[T,f,P,N]),h.useEffect(()=>()=>{k.current&&clearTimeout(k.current),A.current&&clearTimeout(A.current),S(!1)},[S]),h.useEffect(()=>{f&&(k.current&&clearTimeout(k.current),A.current&&clearTimeout(A.current),k.current=null,A.current=null,D.current=!1,O.current=!1,S(!1))},[f,S]);let handleFocus=e=>{if(!T)return;let t=e.target;O.current=!j.current||!e.currentTarget.contains(t)||t.matches(`textarea, select, [contenteditable]:not([contenteditable="false"]), input:not([type="button"], [type="checkbox"], [type="radio"], [type="reset"], [type="submit"])`),!j.current&&N&&(N.current=!1),P()},handleBlur=e=>{T&&(e.currentTarget.contains(e.relatedTarget)||(O.current=!1,P()))},handleKeyDown=e=>{T&&e.key===`Escape`&&b&&(D.current=!1,O.current=!1,P(!0),document.activeElement?.blur?.())};return r===`none`?/* @__PURE__ */ _(`div`,{"data-slot":`sidebar`,className:t(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...d,children:a}):f?/* @__PURE__ */ _(o,{open:m,onOpenChange:g,direction:e,size:`sm`,children:/* @__PURE__ */ v(s,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`h-full w-(--sidebar-width) rounded-none bg-sidebar p-0 text-sidebar-foreground`,style:{"--sidebar-width":`18rem`},...d,children:[/* @__PURE__ */ v(l,{className:`sr-only`,children:[/* @__PURE__ */ _(u,{children:`Sidebar`}),/* @__PURE__ */ _(c,{children:`Displays the mobile sidebar.`})]}),/* @__PURE__ */ _(`div`,{className:`flex h-full w-full flex-col`,children:a})]})}):/* @__PURE__ */ v(`div`,{className:`group peer hidden text-sidebar-foreground md:block`,"data-state":p,"data-collapsible":p===`collapsed`&&!E?r:``,"data-collapsible-raw":p===`collapsed`?r:``,"data-hover-expanded":E?`true`:void 0,"data-variant":n,"data-side":e,"data-slot":`sidebar`,ref:M,onFocus:handleFocus,onBlur:handleBlur,onKeyDown:handleKeyDown,children:[/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-gap`,className:t(`relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear`,`group-data-[collapsible-raw=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible-raw=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible-raw=icon]:w-(--sidebar-width-icon)`)}),/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-container`,"data-side":e,className:t(`fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex`,`data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width)`,`data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width)`,n===`floating`||n===`inset`?[`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]`,`[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)+2px-(--spacing(4))-2rem)/2)]`]:[`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`,`[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)-(--spacing(4))-2rem)/2)]`],n!==`floating`&&n!==`inset`&&`group-data-[side=left]:border-r group-data-[side=right]:border-l`,`group-data-[hover-expanded=true]:shadow-lg group-data-[hover-expanded=true]:ring-1 group-data-[hover-expanded=true]:ring-foreground/10`,i),...d,children:/* @__PURE__ */ _(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:t(`flex size-full flex-col bg-sidebar`,`group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm`,`group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border`),children:a})})]})}function SidebarTrigger({className:e,onClick:n,asChild:i=!1,children:a,...o}){let{toggleSidebar:s,open:c,isHoverExpanded:l}=useSidebar(),u=h.useContext(x);return/* @__PURE__ */ _(r,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,size:`icon-sm`,color:`zinc`,asChild:i,className:t(e),onClick:e=>{n?.(e),!e.defaultPrevented&&(l&&!c?u?.dismissHoverPreview():s())},...o,children:i?a:/* @__PURE__ */ v(g,{children:[/* @__PURE__ */ _(m,{}),/* @__PURE__ */ _(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]})})}function SidebarRail({className:e,...n}){let{toggleSidebar:r,open:i,setOpen:a,isHoverExpanded:o}=useSidebar(),handleClick=()=>{o&&!i?a(!0):r()};return/* @__PURE__ */ _(`button`,{"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:handleClick,title:`Toggle Sidebar`,className:t(`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`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:s-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2`,`[[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`,e),...n})}function SidebarInset({className:e,...n}){return/* @__PURE__ */ _(`main`,{"data-slot":`sidebar-inset`,className:t(`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`,e),...n})}function SidebarInput({className:e,...n}){return/* @__PURE__ */ _(a,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:t(`h-8 w-full bg-background shadow-none`,e),...n})}function SidebarHeader({className:e,...n}){return/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:t(`flex flex-col gap-2 p-2`,e),...n})}function SidebarFooter({className:e,...n}){return/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:t(`flex flex-col gap-2 p-2`,e),...n})}function SidebarSeparator({className:e,...r}){return/* @__PURE__ */ _(i,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:r=>t(`w-auto bg-sidebar-border`,n(e,r)),...r})}function SidebarContent({className:e,...n}){return/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:t(`no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...n})}function SidebarGroup({className:e,...n}){return/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:t(`relative flex w-full min-w-0 flex-col px-2`,e),...n})}function SidebarGroupLabel({className:n,...r}){return e(`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:t(`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]:pointer-events-none group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,n),...r})}function SidebarGroupAction({className:n,...r}){return e(`button`,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:t(`absolute top-1.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`,n),...r})}function SidebarGroupContent({className:e,...n}){return/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:t(`w-full text-sm mt-2`,e),...n})}function SidebarMenu({className:e,...n}){return/* @__PURE__ */ _(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:t(`flex w-full min-w-0 flex-col gap-0`,e),...n})}function SidebarMenuItem({className:e,...n}){return/* @__PURE__ */ _(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:t(`group/menu-item relative`,e),...n})}const S=y(`peer/menu-button group/menu-button font-medium 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,margin] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:ml-(--sidebar-menu-button-collapsed-offset) 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-popup-open:hover:bg-sidebar-accent data-popup-open:hover:text-sidebar-accent-foreground data-panel-open:hover:bg-sidebar-accent data-panel-open:hover:text-sidebar-accent-foreground data-active:[&_svg]:text-sidebar-primary data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate`,{variants:{variant:{default:`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,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)]`},size:{md:`h-8 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`md`}});function SidebarMenuButton({asChild:n=!1,isActive:r=!1,variant:i=`default`,size:a=`md`,tooltip:o,className:s,...c}){let{isMobile:l,state:u,isHoverExpanded:d}=useSidebar(),f=e(`button`,{asChild:n,"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":a,"data-active":r,className:t(S({variant:i,size:a}),s),...c});return o?(typeof o==`string`&&(o={children:o}),/* @__PURE__ */ _(p,{label:o.children,side:`right`,align:`center`,hidden:u!==`collapsed`||l||d,...o,children:f})):f}function SidebarMenuAction({className:n,showOnHover:r=!1,...i}){return e(`button`,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:t(`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=md]/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`,r&&`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`,n),...i})}function SidebarMenuBadge({className:e,...n}){return/* @__PURE__ */ _(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:t(`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=md]/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`,e),...n})}function getSkeletonWidth(e){let t=0;for(let n of e)t=t*31+n.charCodeAt(0)|0;return`${Math.abs(t)%40+50}%`}function SidebarMenuSkeleton({className:e,showIcon:n=!1,...r}){let i=h.useId(),a=h.useMemo(()=>getSkeletonWidth(i),[i]);return/* @__PURE__ */ v(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:t(`flex h-8 items-center gap-2 rounded-md px-2`,e),...r,children:[n&&/* @__PURE__ */ _(f,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),/* @__PURE__ */ _(f,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":a}})]})}function SidebarMenuSub({className:e,...n}){return/* @__PURE__ */ _(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:t(`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`,e),...n})}function SidebarMenuSubItem({className:e,...n}){return/* @__PURE__ */ _(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:t(`group/menu-sub-item relative`,e),...n})}function SidebarMenuSubButton({size:n=`md`,isActive:r=!1,className:i,...a}){return e(`a`,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":n,"data-active":r,className:t(`flex h-7 min-w-0 -translate-x-px items-center font-medium 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`,i),...a})}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};
|
|
2
2
|
//# sourceMappingURL=sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","names":["Separator","Tooltip"],"sources":["../../src/components/sidebar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconLayoutSidebar } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from './drawer'\nimport { Input } from './input'\nimport { Separator } from './separator'\nimport { Skeleton } from './skeleton'\nimport { Tooltip, type TooltipContent } from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\nconst SIDEBAR_HOVER_EXPAND_OPEN_DELAY = 150\nconst SIDEBAR_HOVER_EXPAND_CLOSE_DELAY = 300\nconst SIDEBAR_TEXT_FIELD_SELECTOR =\n 'textarea, select, [contenteditable]:not([contenteditable=\"false\"]), input:not([type=\"button\"], [type=\"checkbox\"], [type=\"radio\"], [type=\"reset\"], [type=\"submit\"])'\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n expandOnHover: boolean\n isHoverExpanded: boolean\n setHoverExpanded: (hoverExpanded: boolean) => void\n hoverExpandOpenDelay: number\n hoverExpandCloseDelay: number\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\n// Internal (not exposed through `useSidebar`): lets a toggle dismiss the hover preview and keep it\n// suppressed until the pointer crosses the sidebar boundary again, so it doesn't reopen right away\n// under a cursor that is still over the sidebar.\ntype SidebarHoverPreviewContextProps = {\n suppressedRef: React.RefObject<boolean>\n dismissHoverPreview: () => void\n}\n\nconst SidebarHoverPreviewContext = React.createContext<SidebarHoverPreviewContextProps | null>(null)\n\nexport type SidebarProviderProps = React.ComponentProps<'div'> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n expandOnHover?: boolean\n hoverExpandOpenDelay?: number\n hoverExpandCloseDelay?: number\n}\n\nexport type SidebarProps = React.ComponentProps<'div'> & {\n side?: 'left' | 'right'\n variant?: 'sidebar' | 'floating' | 'inset'\n collapsible?: 'offcanvas' | 'icon' | 'none'\n}\n\nexport type SidebarTriggerProps = React.ComponentProps<typeof Button>\n\nexport type SidebarRailProps = React.ComponentProps<'button'>\n\nexport type SidebarInsetProps = React.ComponentProps<'main'>\n\nexport type SidebarInputProps = React.ComponentProps<typeof Input>\n\nexport type SidebarHeaderProps = React.ComponentProps<'div'>\n\nexport type SidebarFooterProps = React.ComponentProps<'div'>\n\nexport type SidebarSeparatorProps = React.ComponentProps<typeof Separator>\n\nexport type SidebarContentProps = React.ComponentProps<'div'>\n\nexport type SidebarGroupProps = React.ComponentProps<'div'>\n\nexport type SidebarGroupLabelProps = React.ComponentProps<'div'> & {\n asChild?: boolean\n}\n\nexport type SidebarGroupActionProps = React.ComponentProps<'button'> & {\n asChild?: boolean\n}\n\nexport type SidebarGroupContentProps = React.ComponentProps<'div'>\n\nexport type SidebarMenuProps = React.ComponentProps<'ul'>\n\nexport type SidebarMenuItemProps = React.ComponentProps<'li'>\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n\n return context\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n expandOnHover = false,\n hoverExpandOpenDelay = SIDEBAR_HOVER_EXPAND_OPEN_DELAY,\n hoverExpandCloseDelay = SIDEBAR_HOVER_EXPAND_CLOSE_DELAY,\n className,\n style,\n children,\n ...props\n}: SidebarProviderProps) {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n const [isHoverExpanded, setIsHoverExpanded] = React.useState(false)\n const hoverSuppressedRef = React.useRef(false)\n\n const dismissHoverPreview = React.useCallback(() => {\n hoverSuppressedRef.current = true\n setIsHoverExpanded(false)\n }, [])\n\n React.useEffect(() => {\n if (!expandOnHover) setIsHoverExpanded(false)\n }, [expandOnHover])\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value\n // Collapsing while hovered would otherwise fall straight back into the hover preview.\n if (open && !openState) dismissHoverPreview()\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n // biome-ignore lint/suspicious/noDocumentCookie: This package persists a simple UI preference cookie without framework-specific APIs.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open, dismissHoverPreview]\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n expandOnHover,\n isHoverExpanded,\n setHoverExpanded: setIsHoverExpanded,\n hoverExpandOpenDelay,\n hoverExpandCloseDelay\n }),\n [\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n toggleSidebar,\n expandOnHover,\n isHoverExpanded,\n hoverExpandOpenDelay,\n hoverExpandCloseDelay\n ]\n )\n\n const hoverPreviewContextValue = React.useMemo<SidebarHoverPreviewContextProps>(\n () => ({ suppressedRef: hoverSuppressedRef, dismissHoverPreview }),\n [dismissHoverPreview]\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <SidebarHoverPreviewContext.Provider value={hoverPreviewContextValue}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style\n } as React.CSSProperties\n }\n className={cn(\n 'group/sidebar-wrapper relative flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarHoverPreviewContext.Provider>\n </SidebarContext.Provider>\n )\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: SidebarProps) {\n const {\n isMobile,\n state,\n openMobile,\n setOpenMobile,\n expandOnHover,\n isHoverExpanded,\n setHoverExpanded,\n hoverExpandOpenDelay,\n hoverExpandCloseDelay\n } = useSidebar()\n\n const canHoverExpand = expandOnHover && collapsible === 'icon'\n const effectiveHoverExpanded = canHoverExpand && isHoverExpanded\n\n const pointerInsideRef = React.useRef(false)\n const focusInsideRef = React.useRef(false)\n const openTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n const pointerModalityRef = React.useRef(false)\n const sidebarRef = React.useRef<HTMLDivElement>(null)\n const hoverPreview = React.useContext(SidebarHoverPreviewContext)\n const suppressedRef = hoverPreview?.suppressedRef\n\n const scheduleHoverExpanded = React.useCallback(\n (immediate = false) => {\n if (openTimeoutRef.current) {\n clearTimeout(openTimeoutRef.current)\n openTimeoutRef.current = null\n }\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current)\n closeTimeoutRef.current = null\n }\n\n const shouldExpand = !suppressedRef?.current && (pointerInsideRef.current || focusInsideRef.current)\n\n if (immediate) {\n setHoverExpanded(shouldExpand)\n return\n }\n\n const timeoutRef = shouldExpand ? openTimeoutRef : closeTimeoutRef\n const delay = shouldExpand ? hoverExpandOpenDelay : hoverExpandCloseDelay\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = null\n // Re-checked on fire: a toggle may have dismissed the preview after this was scheduled.\n setHoverExpanded(shouldExpand && !suppressedRef?.current)\n }, delay)\n },\n [setHoverExpanded, hoverExpandOpenDelay, hoverExpandCloseDelay, suppressedRef]\n )\n\n // Tracks whether the latest input came from a pointer or the keyboard, so focus moved by a click (or\n // returned by an overlay closed with a click) doesn't hold the preview open like keyboard focus does.\n React.useEffect(() => {\n if (!canHoverExpand) return\n const handlePointerDown = () => {\n pointerModalityRef.current = true\n }\n const handleKeyDown = () => {\n pointerModalityRef.current = false\n }\n document.addEventListener('pointerdown', handlePointerDown, true)\n document.addEventListener('keydown', handleKeyDown, true)\n return () => {\n document.removeEventListener('pointerdown', handlePointerDown, true)\n document.removeEventListener('keydown', handleKeyDown, true)\n }\n }, [canHoverExpand])\n\n // Hover is tracked with native DOM events rather than React's synthetic ones: React bubbles\n // enter/leave through portals, so hovering a portaled menu counted as hovering the sidebar, and when\n // that menu unmounted under the cursor no leave ever fired, leaving the preview stuck open.\n React.useEffect(() => {\n const sidebar = sidebarRef.current\n if (!canHoverExpand || isMobile || !sidebar) return\n // Crossing the sidebar boundary in either direction lifts a toggle's preview suppression.\n const handleMouseEnter = () => {\n pointerInsideRef.current = true\n if (suppressedRef) suppressedRef.current = false\n scheduleHoverExpanded()\n }\n const handleMouseLeave = () => {\n pointerInsideRef.current = false\n if (suppressedRef) suppressedRef.current = false\n scheduleHoverExpanded()\n }\n sidebar.addEventListener('mouseenter', handleMouseEnter)\n sidebar.addEventListener('mouseleave', handleMouseLeave)\n return () => {\n sidebar.removeEventListener('mouseenter', handleMouseEnter)\n sidebar.removeEventListener('mouseleave', handleMouseLeave)\n }\n }, [canHoverExpand, isMobile, scheduleHoverExpanded, suppressedRef])\n\n React.useEffect(() => {\n return () => {\n if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)\n if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)\n setHoverExpanded(false)\n }\n }, [setHoverExpanded])\n\n const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n if (!canHoverExpand) return\n // Only keyboard focus holds the preview open, so clicking an item doesn't pin it after the pointer\n // leaves. Text fields always hold it (the user is about to type), and so does focus that lands\n // outside the sidebar's DOM (a portaled menu or popover opened from inside it), so the preview\n // doesn't collapse under an open overlay.\n const target = event.target as HTMLElement\n focusInsideRef.current =\n !pointerModalityRef.current ||\n !event.currentTarget.contains(target) ||\n target.matches(SIDEBAR_TEXT_FIELD_SELECTOR)\n // Keyboard focus is a deliberate way back into the sidebar, so it also lifts a toggle's suppression.\n if (!pointerModalityRef.current && suppressedRef) suppressedRef.current = false\n scheduleHoverExpanded()\n }\n const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n if (!canHoverExpand) return\n if (event.currentTarget.contains(event.relatedTarget as Node | null)) return\n focusInsideRef.current = false\n scheduleHoverExpanded()\n }\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!canHoverExpand || event.key !== 'Escape' || !isHoverExpanded) return\n pointerInsideRef.current = false\n focusInsideRef.current = false\n scheduleHoverExpanded(true)\n ;(document.activeElement as HTMLElement | null)?.blur?.()\n }\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}\n {...props}\n >\n {children}\n </div>\n )\n }\n\n if (isMobile) {\n return (\n <Drawer open={openMobile} onOpenChange={setOpenMobile} direction={side} size=\"sm\">\n <DrawerContent\n dir={dir}\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"h-full w-(--sidebar-width) rounded-none bg-sidebar p-0 text-sidebar-foreground\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE\n } as React.CSSProperties\n }\n {...props}\n >\n <DrawerHeader className=\"sr-only\">\n <DrawerTitle>Sidebar</DrawerTitle>\n <DrawerDescription>Displays the mobile sidebar.</DrawerDescription>\n </DrawerHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </DrawerContent>\n </Drawer>\n )\n }\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: Tracks pointer/focus presence for the expandOnHover preview; it exposes no interaction of its own, descendants keep their own semantics/roles.\n <div\n className=\"group peer hidden text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' && !effectiveHoverExpanded ? collapsible : ''}\n data-collapsible-raw={state === 'collapsed' ? collapsible : ''}\n data-hover-expanded={effectiveHoverExpanded ? 'true' : undefined}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n ref={sidebarRef}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible-raw=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible-raw=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible-raw=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n data-side={side}\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n 'data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width)',\n 'data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width)',\n // Adjust the padding for floating and inset variants, and the fixed (animatable) offset that\n // centers collapsed menu buttons: (menu width - button width) / 2.\n variant === 'floating' || variant === 'inset'\n ? [\n 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]',\n '[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)+2px-(--spacing(4))-2rem)/2)]'\n ]\n : [\n 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n '[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)-(--spacing(4))-2rem)/2)]'\n ],\n variant !== 'floating' &&\n variant !== 'inset' &&\n 'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n 'group-data-[hover-expanded=true]:shadow-lg group-data-[hover-expanded=true]:ring-1 group-data-[hover-expanded=true]:ring-foreground/10',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className={cn(\n 'flex size-full flex-col bg-sidebar',\n 'group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm',\n 'group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border'\n )}\n >\n {children}\n </div>\n </div>\n </div>\n )\n}\n\nfunction SidebarTrigger({ className, onClick, asChild = false, children, ...props }: SidebarTriggerProps) {\n const { toggleSidebar, open, isHoverExpanded } = useSidebar()\n const hoverPreview = React.useContext(SidebarHoverPreviewContext)\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n color=\"zinc\"\n asChild={asChild}\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event)\n if (event.defaultPrevented) return\n // During the hover preview the sidebar looks open, so the trigger closes it (the rail pins it).\n if (isHoverExpanded && !open) {\n hoverPreview?.dismissHoverPreview()\n } else {\n toggleSidebar()\n }\n }}\n {...props}\n >\n {asChild ? (\n children\n ) : (\n <>\n <IconLayoutSidebar />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </>\n )}\n </Button>\n )\n}\n\nfunction SidebarRail({ className, ...props }: SidebarRailProps) {\n const { toggleSidebar, open, setOpen, isHoverExpanded } = useSidebar()\n\n const handleClick = () => {\n if (isHoverExpanded && !open) {\n setOpen(true)\n } else {\n toggleSidebar()\n }\n }\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={handleClick}\n title=\"Toggle Sidebar\"\n className={cn(\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '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:s-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInset({ className, ...props }: SidebarInsetProps) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n '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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInput({ className, ...props }: SidebarInputProps) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('h-8 w-full bg-background shadow-none', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarHeader({ className, ...props }: SidebarHeaderProps) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarFooter({ className, ...props }: SidebarFooterProps) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarSeparator({ className, ...props }: SidebarSeparatorProps) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('w-auto bg-sidebar-border', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarContent({ className, ...props }: SidebarContentProps) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarGroup({ className, ...props }: SidebarGroupProps) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col px-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarGroupLabel({ className, asChild = false, ...props }: SidebarGroupLabelProps) {\n const Comp = asChild ? Slot.Root : 'div'\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n '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]:pointer-events-none group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: SidebarGroupActionProps) {\n const Comp = asChild ? Slot.Root : 'button'\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-1.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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarGroupContent({ className, ...props }: SidebarGroupContentProps) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm mt-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenu({ className, ...props }: SidebarMenuProps) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-0', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n )\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button group/menu-button font-medium 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,margin] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:ml-(--sidebar-menu-button-collapsed-offset) 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:[&_svg]:text-sidebar-primary data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n '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))]'\n },\n size: {\n md: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'\n }\n },\n defaultVariants: {\n variant: 'default',\n size: 'md'\n }\n }\n)\n\nexport type SidebarMenuButtonProps = React.ComponentProps<'button'> & {\n asChild?: boolean\n isActive?: boolean\n tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>\n\nexport type SidebarMenuActionProps = React.ComponentProps<'button'> & {\n asChild?: boolean\n showOnHover?: boolean\n}\n\nexport type SidebarMenuBadgeProps = React.ComponentProps<'div'>\n\nexport type SidebarMenuSkeletonProps = React.ComponentProps<'div'> & {\n showIcon?: boolean\n}\n\nexport type SidebarMenuSubProps = React.ComponentProps<'ul'>\n\nexport type SidebarMenuSubItemProps = React.ComponentProps<'li'>\n\nexport type SidebarMenuSubButtonProps = React.ComponentProps<'a'> & {\n asChild?: boolean\n size?: 'sm' | 'md'\n isActive?: boolean\n}\n\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'md',\n tooltip,\n className,\n ...props\n}: SidebarMenuButtonProps) {\n const Comp = asChild ? Slot.Root : 'button'\n const { isMobile, state, isHoverExpanded } = useSidebar()\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n )\n\n if (!tooltip) {\n return button\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip\n }\n }\n\n return (\n <Tooltip\n label={tooltip.children}\n side=\"right\"\n align=\"center\"\n hidden={state !== 'collapsed' || isMobile || isHoverExpanded}\n {...tooltip}\n >\n {button}\n </Tooltip>\n )\n}\n\nfunction SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }: SidebarMenuActionProps) {\n const Comp = asChild ? Slot.Root : 'button'\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n '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=md]/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',\n showOnHover &&\n '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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n '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=md]/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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSkeleton({ className, showIcon = false, ...props }: SidebarMenuSkeletonProps) {\n // Random width between 50 to 90%.\n const [width] = React.useState(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`\n })\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width\n } as React.CSSProperties\n }\n />\n </div>\n )\n}\n\nfunction SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n '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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: SidebarMenuSubButtonProps) {\n const Comp = asChild ? Slot.Root : 'a'\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'flex h-7 min-w-0 -translate-x-px items-center font-medium 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',\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sidebar.js","names":["resolveClassName","React","SidebarContext","SidebarHoverPreviewContext","context","target","openProp","setOpenProp","props","isMobile","useIsMobile","openMobile","setOpenMobile","isHoverExpanded","setIsHoverExpanded","hoverSuppressedRef","dismissHoverPreview","expandOnHover","_open","_setOpen","defaultOpen","open","setOpen","openState","value","toggleSidebar","event","state","contextValue","hoverExpandOpenDelay","hoverExpandCloseDelay","hoverPreviewContextValue","style","cn","className","canHoverExpand","collapsible","effectiveHoverExpanded","pointerInsideRef","focusInsideRef","openTimeoutRef","closeTimeoutRef","pointerModalityRef","sidebarRef","suppressedRef","scheduleHoverExpanded","shouldExpand","immediate","setHoverExpanded","timeoutRef","sidebar","Drawer","side","DrawerContent","DrawerHeader","DrawerTitle","DrawerDescription","variant","hoverPreview","Button","onClick","asChild","children","Fragment","IconLayoutSidebar","Input","Separator","useAsChild","sidebarMenuButtonVariants","cva","button","size","isActive","tooltip","Tooltip","showOnHover","hash","char","seed","id","width","showIcon","Skeleton"],"sources":["../../src/components/sidebar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconLayoutSidebar } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { type AsChildProps, useAsChild } from '../lib/as-child'\nimport { cn } from '../lib/utils'\nimport { resolveClassName } from '../utils/resolve-class-name'\nimport { Button } from './button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from './drawer'\nimport { Input } from './input'\nimport { Separator } from './separator'\nimport { Skeleton } from './skeleton'\nimport { Tooltip, type TooltipContent } from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\nconst SIDEBAR_HOVER_EXPAND_OPEN_DELAY = 150\nconst SIDEBAR_HOVER_EXPAND_CLOSE_DELAY = 300\nconst SIDEBAR_TEXT_FIELD_SELECTOR =\n 'textarea, select, [contenteditable]:not([contenteditable=\"false\"]), input:not([type=\"button\"], [type=\"checkbox\"], [type=\"radio\"], [type=\"reset\"], [type=\"submit\"])'\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n expandOnHover: boolean\n isHoverExpanded: boolean\n setHoverExpanded: (hoverExpanded: boolean) => void\n hoverExpandOpenDelay: number\n hoverExpandCloseDelay: number\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\n// Internal (not exposed through `useSidebar`): lets a toggle dismiss the hover preview and keep it\n// suppressed until the pointer crosses the sidebar boundary again, so it doesn't reopen right away\n// under a cursor that is still over the sidebar.\ntype SidebarHoverPreviewContextProps = {\n suppressedRef: React.RefObject<boolean>\n dismissHoverPreview: () => void\n}\n\nconst SidebarHoverPreviewContext = React.createContext<SidebarHoverPreviewContextProps | null>(null)\n\nexport type SidebarProviderProps = React.ComponentProps<'div'> & {\n /**\n * Whether the sidebar starts expanded (uncontrolled).\n * @default true\n */\n defaultOpen?: boolean\n /** Whether the sidebar is expanded (controlled). */\n open?: boolean\n /** Called when the sidebar expands or collapses. */\n onOpenChange?: (open: boolean) => void\n /**\n * With `collapsible=\"icon\"`, shows a floating preview of the collapsed sidebar on hover or focus.\n * @default false\n */\n expandOnHover?: boolean\n /**\n * Delay in ms before the hover preview opens.\n * @default 150\n */\n hoverExpandOpenDelay?: number\n /**\n * Delay in ms before the hover preview closes.\n * @default 300\n */\n hoverExpandCloseDelay?: number\n}\n\nexport type SidebarProps = React.ComponentProps<'div'> & {\n /**\n * Edge of the screen the sidebar sits on.\n * @default 'left'\n */\n side?: 'left' | 'right'\n /**\n * `floating` adds a gap and shadow; `inset` pairs with `SidebarInset` for an inset main area.\n * @default 'sidebar'\n */\n variant?: 'sidebar' | 'floating' | 'inset'\n /**\n * `offcanvas` slides the sidebar out, `icon` shrinks it to icons, `none` keeps it open.\n * @default 'offcanvas'\n */\n collapsible?: 'offcanvas' | 'icon' | 'none'\n}\n\nexport type SidebarTriggerProps = React.ComponentProps<typeof Button>\n\nexport type SidebarRailProps = React.ComponentProps<'button'>\n\nexport type SidebarInsetProps = React.ComponentProps<'main'>\n\nexport type SidebarInputProps = React.ComponentProps<typeof Input>\n\nexport type SidebarHeaderProps = React.ComponentProps<'div'>\n\nexport type SidebarFooterProps = React.ComponentProps<'div'>\n\nexport type SidebarSeparatorProps = React.ComponentProps<typeof Separator>\n\nexport type SidebarContentProps = React.ComponentProps<'div'>\n\nexport type SidebarGroupProps = React.ComponentProps<'div'>\n\nexport type SidebarGroupLabelProps = AsChildProps<'div'>\n\nexport type SidebarGroupActionProps = AsChildProps<'button'>\n\nexport type SidebarGroupContentProps = React.ComponentProps<'div'>\n\nexport type SidebarMenuProps = React.ComponentProps<'ul'>\n\nexport type SidebarMenuItemProps = React.ComponentProps<'li'>\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n\n return context\n}\n\nfunction isEditableContent(target: EventTarget | null) {\n return target instanceof Element && target.closest('[contenteditable]:not([contenteditable=\"false\"])') !== null\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n expandOnHover = false,\n hoverExpandOpenDelay = SIDEBAR_HOVER_EXPAND_OPEN_DELAY,\n hoverExpandCloseDelay = SIDEBAR_HOVER_EXPAND_CLOSE_DELAY,\n className,\n style,\n children,\n ...props\n}: SidebarProviderProps) {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n const [isHoverExpanded, setIsHoverExpanded] = React.useState(false)\n const hoverSuppressedRef = React.useRef(false)\n\n const dismissHoverPreview = React.useCallback(() => {\n hoverSuppressedRef.current = true\n setIsHoverExpanded(false)\n }, [])\n\n React.useEffect(() => {\n if (!expandOnHover) setIsHoverExpanded(false)\n }, [expandOnHover])\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value\n // Collapsing while hovered would otherwise fall straight back into the hover preview.\n if (open && !openState) dismissHoverPreview()\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n // biome-ignore lint/suspicious/noDocumentCookie: This package persists a simple UI preference cookie without framework-specific APIs.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open, dismissHoverPreview]\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n // Rich text editors use the same shortcut (bold), so leave it to them when they handle it or own the focus.\n if (event.defaultPrevented || isEditableContent(event.target)) return\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n expandOnHover,\n isHoverExpanded,\n setHoverExpanded: setIsHoverExpanded,\n hoverExpandOpenDelay,\n hoverExpandCloseDelay\n }),\n [\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n toggleSidebar,\n expandOnHover,\n isHoverExpanded,\n hoverExpandOpenDelay,\n hoverExpandCloseDelay\n ]\n )\n\n const hoverPreviewContextValue = React.useMemo<SidebarHoverPreviewContextProps>(\n () => ({ suppressedRef: hoverSuppressedRef, dismissHoverPreview }),\n [dismissHoverPreview]\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <SidebarHoverPreviewContext.Provider value={hoverPreviewContextValue}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style\n } as React.CSSProperties\n }\n className={cn(\n 'group/sidebar-wrapper relative flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarHoverPreviewContext.Provider>\n </SidebarContext.Provider>\n )\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: SidebarProps) {\n const {\n isMobile,\n state,\n openMobile,\n setOpenMobile,\n expandOnHover,\n isHoverExpanded,\n setHoverExpanded,\n hoverExpandOpenDelay,\n hoverExpandCloseDelay\n } = useSidebar()\n\n const canHoverExpand = expandOnHover && collapsible === 'icon'\n const effectiveHoverExpanded = canHoverExpand && isHoverExpanded\n\n const pointerInsideRef = React.useRef(false)\n const focusInsideRef = React.useRef(false)\n const openTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n const pointerModalityRef = React.useRef(false)\n const sidebarRef = React.useRef<HTMLDivElement>(null)\n const hoverPreview = React.useContext(SidebarHoverPreviewContext)\n const suppressedRef = hoverPreview?.suppressedRef\n\n const scheduleHoverExpanded = React.useCallback(\n (immediate = false) => {\n if (openTimeoutRef.current) {\n clearTimeout(openTimeoutRef.current)\n openTimeoutRef.current = null\n }\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current)\n closeTimeoutRef.current = null\n }\n\n const shouldExpand = !suppressedRef?.current && (pointerInsideRef.current || focusInsideRef.current)\n\n if (immediate) {\n setHoverExpanded(shouldExpand)\n return\n }\n\n const timeoutRef = shouldExpand ? openTimeoutRef : closeTimeoutRef\n const delay = shouldExpand ? hoverExpandOpenDelay : hoverExpandCloseDelay\n timeoutRef.current = setTimeout(() => {\n timeoutRef.current = null\n // Re-checked on fire: a toggle may have dismissed the preview after this was scheduled.\n setHoverExpanded(shouldExpand && !suppressedRef?.current)\n }, delay)\n },\n [setHoverExpanded, hoverExpandOpenDelay, hoverExpandCloseDelay, suppressedRef]\n )\n\n // Tracks whether the latest input came from a pointer or the keyboard, so focus moved by a click (or\n // returned by an overlay closed with a click) doesn't hold the preview open like keyboard focus does.\n React.useEffect(() => {\n if (!canHoverExpand) return\n const handlePointerDown = () => {\n pointerModalityRef.current = true\n }\n const handleKeyDown = () => {\n pointerModalityRef.current = false\n }\n document.addEventListener('pointerdown', handlePointerDown, true)\n document.addEventListener('keydown', handleKeyDown, true)\n return () => {\n document.removeEventListener('pointerdown', handlePointerDown, true)\n document.removeEventListener('keydown', handleKeyDown, true)\n }\n }, [canHoverExpand])\n\n // Hover is tracked with native DOM events rather than React's synthetic ones: React bubbles\n // enter/leave through portals, so hovering a portaled menu counted as hovering the sidebar, and when\n // that menu unmounted under the cursor no leave ever fired, leaving the preview stuck open.\n React.useEffect(() => {\n const sidebar = sidebarRef.current\n if (!canHoverExpand || isMobile || !sidebar) return\n // Crossing the sidebar boundary in either direction lifts a toggle's preview suppression.\n const handleMouseEnter = () => {\n pointerInsideRef.current = true\n if (suppressedRef) suppressedRef.current = false\n scheduleHoverExpanded()\n }\n const handleMouseLeave = () => {\n pointerInsideRef.current = false\n if (suppressedRef) suppressedRef.current = false\n scheduleHoverExpanded()\n }\n sidebar.addEventListener('mouseenter', handleMouseEnter)\n sidebar.addEventListener('mouseleave', handleMouseLeave)\n return () => {\n sidebar.removeEventListener('mouseenter', handleMouseEnter)\n sidebar.removeEventListener('mouseleave', handleMouseLeave)\n }\n }, [canHoverExpand, isMobile, scheduleHoverExpanded, suppressedRef])\n\n React.useEffect(() => {\n return () => {\n if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)\n if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)\n setHoverExpanded(false)\n }\n }, [setHoverExpanded])\n\n // Switching to mobile never fires a mouse leave, so drop the preview there; otherwise the trigger would\n // treat the first tap as \"close the preview\" instead of opening the drawer.\n React.useEffect(() => {\n if (!isMobile) return\n if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)\n if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)\n openTimeoutRef.current = null\n closeTimeoutRef.current = null\n pointerInsideRef.current = false\n focusInsideRef.current = false\n setHoverExpanded(false)\n }, [isMobile, setHoverExpanded])\n\n const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n if (!canHoverExpand) return\n // Only keyboard focus holds the preview open, so clicking an item doesn't pin it after the pointer\n // leaves. Text fields always hold it (the user is about to type), and so does focus that lands\n // outside the sidebar's DOM (a portaled menu or popover opened from inside it), so the preview\n // doesn't collapse under an open overlay.\n const target = event.target as HTMLElement\n focusInsideRef.current =\n !pointerModalityRef.current ||\n !event.currentTarget.contains(target) ||\n target.matches(SIDEBAR_TEXT_FIELD_SELECTOR)\n // Keyboard focus is a deliberate way back into the sidebar, so it also lifts a toggle's suppression.\n if (!pointerModalityRef.current && suppressedRef) suppressedRef.current = false\n scheduleHoverExpanded()\n }\n const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n if (!canHoverExpand) return\n if (event.currentTarget.contains(event.relatedTarget as Node | null)) return\n focusInsideRef.current = false\n scheduleHoverExpanded()\n }\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!canHoverExpand || event.key !== 'Escape' || !isHoverExpanded) return\n pointerInsideRef.current = false\n focusInsideRef.current = false\n scheduleHoverExpanded(true)\n ;(document.activeElement as HTMLElement | null)?.blur?.()\n }\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}\n {...props}\n >\n {children}\n </div>\n )\n }\n\n if (isMobile) {\n return (\n <Drawer open={openMobile} onOpenChange={setOpenMobile} direction={side} size=\"sm\">\n <DrawerContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"h-full w-(--sidebar-width) rounded-none bg-sidebar p-0 text-sidebar-foreground\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE\n } as React.CSSProperties\n }\n {...props}\n >\n <DrawerHeader className=\"sr-only\">\n <DrawerTitle>Sidebar</DrawerTitle>\n <DrawerDescription>Displays the mobile sidebar.</DrawerDescription>\n </DrawerHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </DrawerContent>\n </Drawer>\n )\n }\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: Tracks pointer/focus presence for the expandOnHover preview; it exposes no interaction of its own, descendants keep their own semantics/roles.\n <div\n className=\"group peer hidden text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' && !effectiveHoverExpanded ? collapsible : ''}\n data-collapsible-raw={state === 'collapsed' ? collapsible : ''}\n data-hover-expanded={effectiveHoverExpanded ? 'true' : undefined}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n ref={sidebarRef}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible-raw=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible-raw=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible-raw=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n data-side={side}\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n 'data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width)',\n 'data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width)',\n // Adjust the padding for floating and inset variants, and the fixed (animatable) offset that\n // centers collapsed menu buttons: (menu width - button width) / 2.\n variant === 'floating' || variant === 'inset'\n ? [\n 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]',\n '[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)+2px-(--spacing(4))-2rem)/2)]'\n ]\n : [\n 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n '[--sidebar-menu-button-collapsed-offset:calc((var(--sidebar-width-icon)-(--spacing(4))-2rem)/2)]'\n ],\n variant !== 'floating' &&\n variant !== 'inset' &&\n 'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n 'group-data-[hover-expanded=true]:shadow-lg group-data-[hover-expanded=true]:ring-1 group-data-[hover-expanded=true]:ring-foreground/10',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className={cn(\n 'flex size-full flex-col bg-sidebar',\n 'group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm',\n 'group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border'\n )}\n >\n {children}\n </div>\n </div>\n </div>\n )\n}\n\nfunction SidebarTrigger({ className, onClick, asChild = false, children, ...props }: SidebarTriggerProps) {\n const { toggleSidebar, open, isHoverExpanded } = useSidebar()\n const hoverPreview = React.useContext(SidebarHoverPreviewContext)\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n color=\"zinc\"\n asChild={asChild}\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event)\n if (event.defaultPrevented) return\n // During the hover preview the sidebar looks open, so the trigger closes it (the rail pins it).\n if (isHoverExpanded && !open) {\n hoverPreview?.dismissHoverPreview()\n } else {\n toggleSidebar()\n }\n }}\n {...props}\n >\n {asChild ? (\n children\n ) : (\n <>\n <IconLayoutSidebar />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </>\n )}\n </Button>\n )\n}\n\nfunction SidebarRail({ className, ...props }: SidebarRailProps) {\n const { toggleSidebar, open, setOpen, isHoverExpanded } = useSidebar()\n\n const handleClick = () => {\n if (isHoverExpanded && !open) {\n setOpen(true)\n } else {\n toggleSidebar()\n }\n }\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={handleClick}\n title=\"Toggle Sidebar\"\n className={cn(\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '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:s-1/2 after:w-0.5 hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInset({ className, ...props }: SidebarInsetProps) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n '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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInput({ className, ...props }: SidebarInputProps) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('h-8 w-full bg-background shadow-none', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarHeader({ className, ...props }: SidebarHeaderProps) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarFooter({ className, ...props }: SidebarFooterProps) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarSeparator({ className, ...props }: SidebarSeparatorProps) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={(state) => cn('w-auto bg-sidebar-border', resolveClassName(className, state))}\n {...props}\n />\n )\n}\n\nfunction SidebarContent({ className, ...props }: SidebarContentProps) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarGroup({ className, ...props }: SidebarGroupProps) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col px-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) {\n return useAsChild('div', {\n 'data-slot': 'sidebar-group-label',\n 'data-sidebar': 'group-label',\n className: cn(\n '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]:pointer-events-none group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className\n ),\n ...props\n })\n}\n\nfunction SidebarGroupAction({ className, ...props }: SidebarGroupActionProps) {\n return useAsChild('button', {\n 'data-slot': 'sidebar-group-action',\n 'data-sidebar': 'group-action',\n className: cn(\n 'absolute top-1.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',\n className\n ),\n ...props\n })\n}\n\nfunction SidebarGroupContent({ className, ...props }: SidebarGroupContentProps) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm mt-2', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenu({ className, ...props }: SidebarMenuProps) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-0', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n )\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button group/menu-button font-medium 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,margin] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:ml-(--sidebar-menu-button-collapsed-offset) 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-popup-open:hover:bg-sidebar-accent data-popup-open:hover:text-sidebar-accent-foreground data-panel-open:hover:bg-sidebar-accent data-panel-open:hover:text-sidebar-accent-foreground data-active:[&_svg]:text-sidebar-primary data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n '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)]'\n },\n size: {\n md: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'\n }\n },\n defaultVariants: {\n variant: 'default',\n size: 'md'\n }\n }\n)\n\nexport type SidebarMenuButtonProps = AsChildProps<'button'> & {\n /**\n * Marks the item as the current page.\n * @default false\n */\n isActive?: boolean\n /** Label (or tooltip content props) shown when the sidebar is collapsed to icons. */\n tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>\n\nexport type SidebarMenuActionProps = AsChildProps<'button'> & {\n /**\n * On desktop, hides the action until the menu item is hovered or focused.\n * @default false\n */\n showOnHover?: boolean\n}\n\nexport type SidebarMenuBadgeProps = React.ComponentProps<'div'>\n\nexport type SidebarMenuSkeletonProps = React.ComponentProps<'div'> & {\n /**\n * Adds an icon placeholder before the text.\n * @default false\n */\n showIcon?: boolean\n}\n\nexport type SidebarMenuSubProps = React.ComponentProps<'ul'>\n\nexport type SidebarMenuSubItemProps = React.ComponentProps<'li'>\n\nexport type SidebarMenuSubButtonProps = AsChildProps<'a'> & {\n /**\n * Text size of the sub-item.\n * @default 'md'\n */\n size?: 'sm' | 'md'\n /**\n * Marks the sub-item as the current page.\n * @default false\n */\n isActive?: boolean\n}\n\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'md',\n tooltip,\n className,\n ...props\n}: SidebarMenuButtonProps) {\n const { isMobile, state, isHoverExpanded } = useSidebar()\n\n const button = useAsChild('button', {\n asChild,\n 'data-slot': 'sidebar-menu-button',\n 'data-sidebar': 'menu-button',\n 'data-size': size,\n 'data-active': isActive,\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n ...props\n })\n\n if (!tooltip) {\n return button\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip\n }\n }\n\n return (\n <Tooltip\n label={tooltip.children}\n side=\"right\"\n align=\"center\"\n hidden={state !== 'collapsed' || isMobile || isHoverExpanded}\n {...tooltip}\n >\n {button}\n </Tooltip>\n )\n}\n\nfunction SidebarMenuAction({ className, showOnHover = false, ...props }: SidebarMenuActionProps) {\n return useAsChild('button', {\n 'data-slot': 'sidebar-menu-action',\n 'data-sidebar': 'menu-action',\n className: cn(\n '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=md]/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',\n showOnHover &&\n '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',\n className\n ),\n ...props\n })\n}\n\nfunction SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n '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=md]/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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction getSkeletonWidth(seed: string) {\n let hash = 0\n for (const char of seed) {\n hash = (hash * 31 + char.charCodeAt(0)) | 0\n }\n return `${(Math.abs(hash) % 40) + 50}%`\n}\n\nfunction SidebarMenuSkeleton({ className, showIcon = false, ...props }: SidebarMenuSkeletonProps) {\n // Width between 50 and 90%, derived from the id so the server and client render the same value.\n const id = React.useId()\n const width = React.useMemo(() => getSkeletonWidth(id), [id])\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width\n } as React.CSSProperties\n }\n />\n </div>\n )\n}\n\nfunction SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n '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',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubButton({ size = 'md', isActive = false, className, ...props }: SidebarMenuSubButtonProps) {\n return useAsChild('a', {\n 'data-slot': 'sidebar-menu-sub-button',\n 'data-sidebar': 'menu-sub-button',\n 'data-size': size,\n 'data-active': isActive,\n className: cn(\n 'flex h-7 min-w-0 -translate-x-px items-center font-medium 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',\n className\n ),\n ...props\n })\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar\n}\n"],"mappings":"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"}
|
|
@@ -3,9 +3,16 @@ import * as React from "react";
|
|
|
3
3
|
//#region src/components/simple-grid.d.ts
|
|
4
4
|
type SimpleGridSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
5
5
|
export type SimpleGridProps = React.ComponentProps<'div'> & {
|
|
6
|
+
/**
|
|
7
|
+
* Number of equal columns.
|
|
8
|
+
* @default 1
|
|
9
|
+
*/
|
|
6
10
|
cols?: number;
|
|
11
|
+
/** Space between rows and columns. */
|
|
7
12
|
gap?: SimpleGridSpacing;
|
|
13
|
+
/** Space between rows. Overrides `gap`. */
|
|
8
14
|
rowGap?: SimpleGridSpacing;
|
|
15
|
+
/** Space between columns. Overrides `gap`. */
|
|
9
16
|
columnGap?: SimpleGridSpacing;
|
|
10
17
|
};
|
|
11
18
|
declare function SimpleGrid({ className, cols, gap, rowGap, columnGap, style, ...props }: SimpleGridProps): React.JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";const n={xs:1,sm:2,md:4,lg:6,xl:8};function toSpacingValue(e){return`calc(var(--spacing) * ${n[e]})`}function SimpleGrid({className:n,cols:r=1,gap:i,rowGap:a,columnGap:o,style:s,...c}){return t(`div`,{"data-slot":`simple-grid`,className:e(`grid min-w-0`,`
|
|
1
|
+
import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";const n={xs:1,sm:2,md:4,lg:6,xl:8};function toSpacingValue(e){return`calc(var(--spacing) * ${n[e]})`}function SimpleGrid({className:n,cols:r=1,gap:i,rowGap:a,columnGap:o,style:s,...c}){return/* @__PURE__ */ t(`div`,{"data-slot":`simple-grid`,className:e(`grid min-w-0`,`grid-cols-[repeat(var(--simple-grid-cols),minmax(0,1fr))]`,`gap-(--simple-grid-gap) gap-y-(--simple-grid-row-gap) gap-x-(--simple-grid-column-gap)`,n),style:{"--simple-grid-cols":r,"--simple-grid-gap":i?toSpacingValue(i):`0px`,"--simple-grid-row-gap":a?toSpacingValue(a):`var(--simple-grid-gap)`,"--simple-grid-column-gap":o?toSpacingValue(o):`var(--simple-grid-gap)`,...s},...c})}export{SimpleGrid};
|
|
2
2
|
//# sourceMappingURL=simple-grid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simple-grid.js","names":[],"sources":["../../src/components/simple-grid.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\ntype SimpleGridSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nconst spacingScale: Record<SimpleGridSpacing, number> = {\n xs: 1,\n sm: 2,\n md: 4,\n lg: 6,\n xl: 8\n}\n\nfunction toSpacingValue(spacing: SimpleGridSpacing) {\n return `calc(var(--spacing) * ${spacingScale[spacing]})`\n}\n\nexport type SimpleGridProps = React.ComponentProps<'div'> & {\n cols?: number\n gap?: SimpleGridSpacing\n rowGap?: SimpleGridSpacing\n columnGap?: SimpleGridSpacing\n}\n\nfunction SimpleGrid({ className, cols = 1, gap, rowGap, columnGap, style, ...props }: SimpleGridProps) {\n return (\n <div\n data-slot=\"simple-grid\"\n className={cn(\n 'grid min-w-0',\n '
|
|
1
|
+
{"version":3,"file":"simple-grid.js","names":["spacingScale","spacing","props","cn","className","cols","gap","rowGap","columnGap","style"],"sources":["../../src/components/simple-grid.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\ntype SimpleGridSpacing = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nconst spacingScale: Record<SimpleGridSpacing, number> = {\n xs: 1,\n sm: 2,\n md: 4,\n lg: 6,\n xl: 8\n}\n\nfunction toSpacingValue(spacing: SimpleGridSpacing) {\n return `calc(var(--spacing) * ${spacingScale[spacing]})`\n}\n\nexport type SimpleGridProps = React.ComponentProps<'div'> & {\n /**\n * Number of equal columns.\n * @default 1\n */\n cols?: number\n /** Space between rows and columns. */\n gap?: SimpleGridSpacing\n /** Space between rows. Overrides `gap`. */\n rowGap?: SimpleGridSpacing\n /** Space between columns. Overrides `gap`. */\n columnGap?: SimpleGridSpacing\n}\n\nfunction SimpleGrid({ className, cols = 1, gap, rowGap, columnGap, style, ...props }: SimpleGridProps) {\n return (\n <div\n data-slot=\"simple-grid\"\n className={cn(\n 'grid min-w-0',\n 'grid-cols-[repeat(var(--simple-grid-cols),minmax(0,1fr))]',\n 'gap-(--simple-grid-gap) gap-y-(--simple-grid-row-gap) gap-x-(--simple-grid-column-gap)',\n className\n )}\n style={\n {\n '--simple-grid-cols': cols,\n '--simple-grid-gap': gap ? toSpacingValue(gap) : '0px',\n '--simple-grid-row-gap': rowGap ? toSpacingValue(rowGap) : 'var(--simple-grid-gap)',\n '--simple-grid-column-gap': columnGap ? toSpacingValue(columnGap) : 'var(--simple-grid-gap)',\n ...style\n } as React.CSSProperties\n }\n {...props}\n />\n )\n}\n\nexport { SimpleGrid }\n"],"mappings":"qHAMA,MAAMA,EAAkD,CACtD,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,CACN,EAEA,SAAS,eAAe,EAA4B,CAClD,MAAO,yBAAyBA,EAAaC,GAAS,EACxD,CAgBA,SAAS,WAAW,CAAE,YAAW,OAAO,EAAG,MAAK,SAAQ,YAAW,QAAO,GAAGC,GAA0B,CACrG,MACE,kBAAC,MAAD,CACE,YAAU,cACV,UAAWC,EACT,eACA,4DACA,yFACAC,CACF,EACA,MACE,CACE,qBAAsBC,EACtB,oBAAqBC,EAAM,eAAeA,CAAG,EAAI,MACjD,wBAAyBC,EAAS,eAAeA,CAAM,EAAI,yBAC3D,2BAA4BC,EAAY,eAAeA,CAAS,EAAI,yBACpE,GAAGC,CACL,EAEF,GAAIP,CACL,CAAA,CAEL"}
|
|
@@ -2,6 +2,10 @@ import { t as __name } from "../rolldown-runtime-BhWHdk3m.js";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
//#region src/components/skeleton.d.ts
|
|
4
4
|
export type SkeletonProps = React.ComponentProps<'div'> & {
|
|
5
|
+
/**
|
|
6
|
+
* Shows the placeholder; when `false`, the children are shown.
|
|
7
|
+
* @default true
|
|
8
|
+
*/
|
|
5
9
|
visible?: boolean;
|
|
6
10
|
};
|
|
7
11
|
declare function Skeleton({ className, children, visible, ...props }: SkeletonProps): React.JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";function Skeleton({className:r,children:i,visible:a=!0,...o}){return i==null
|
|
1
|
+
import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";function Skeleton({className:r,children:i,visible:a=!0,...o}){return i==null?/* @__PURE__ */ t(`div`,{"data-slot":`skeleton`,className:e(`bg-muted rounded-md animate-pulse`,r),...o}):/* @__PURE__ */ n(`div`,{"data-slot":`skeleton`,"aria-busy":a||void 0,className:e(`relative rounded-md`,r),...o,children:[/* @__PURE__ */ t(`div`,{"data-slot":`skeleton-content`,className:e(a&&`invisible`),"aria-hidden":a||void 0,children:i}),a&&/* @__PURE__ */ t(`div`,{"data-slot":`skeleton-overlay`,"aria-hidden":`true`,className:`pointer-events-none absolute inset-0 rounded-[inherit] bg-muted animate-pulse`})]})}export{Skeleton};
|
|
2
2
|
//# sourceMappingURL=skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport type SkeletonProps = React.ComponentProps<'div'> & {\n visible?: boolean\n}\n\nfunction Skeleton({ className, children, visible = true, ...props }: SkeletonProps) {\n if (children === undefined || children === null) {\n return <div data-slot=\"skeleton\" className={cn('bg-muted rounded-md animate-pulse', className)} {...props} />\n }\n\n return (\n <div\n data-slot=\"skeleton\"\n aria-busy={visible || undefined}\n className={cn('relative rounded-md', className)}\n {...props}\n >\n <div data-slot=\"skeleton-content\" className={cn(visible && 'invisible')} aria-hidden={visible || undefined}>\n {children}\n </div>\n {visible && (\n <div\n data-slot=\"skeleton-overlay\"\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-0 rounded-[inherit] bg-muted animate-pulse\"\n />\n )}\n </div>\n )\n}\n\nexport { Skeleton }\n"],"mappings":"+
|
|
1
|
+
{"version":3,"file":"skeleton.js","names":["props","children","cn","className","visible"],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport type SkeletonProps = React.ComponentProps<'div'> & {\n /**\n * Shows the placeholder; when `false`, the children are shown.\n * @default true\n */\n visible?: boolean\n}\n\nfunction Skeleton({ className, children, visible = true, ...props }: SkeletonProps) {\n if (children === undefined || children === null) {\n return <div data-slot=\"skeleton\" className={cn('bg-muted rounded-md animate-pulse', className)} {...props} />\n }\n\n return (\n <div\n data-slot=\"skeleton\"\n aria-busy={visible || undefined}\n className={cn('relative rounded-md', className)}\n {...props}\n >\n <div data-slot=\"skeleton-content\" className={cn(visible && 'invisible')} aria-hidden={visible || undefined}>\n {children}\n </div>\n {visible && (\n <div\n data-slot=\"skeleton-overlay\"\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-0 rounded-[inherit] bg-muted animate-pulse\"\n />\n )}\n </div>\n )\n}\n\nexport { Skeleton }\n"],"mappings":"+HAYA,SAAS,SAAS,CAAE,YAAW,WAAU,UAAU,GAAM,GAAGA,GAAwB,CAKlF,OAJIC,GAAuC,KAClC,kBAAC,MAAD,CAAK,YAAU,WAAW,UAAWC,EAAG,oCAAqCC,CAAS,EAAG,GAAIH,CAAQ,CAAA,EAI5G,kBAAC,MAAD,CACE,YAAU,WACV,YAAWI,GAAW,IAAA,GACtB,UAAWF,EAAG,sBAAuBC,CAAS,EAC9C,GAAIH,EAJN,SAAA,CAME,kBAAC,MAAD,CAAK,YAAU,mBAAmB,UAAWE,EAAGE,GAAW,WAAW,EAAG,cAAaA,GAAW,IAAA,GAC9F,UACE,CAAA,EACJA,GACC,kBAAC,MAAD,CACE,YAAU,mBACV,cAAY,OACZ,UAAU,+EACX,CAAA,CAEA,GAET"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as __name } from "../rolldown-runtime-BhWHdk3m.js";
|
|
2
|
-
import { Slider as Slider$1 } from "radix-ui";
|
|
3
2
|
import * as React from "react";
|
|
3
|
+
import { Slider as Slider$1 } from "@base-ui/react/slider";
|
|
4
4
|
//#region src/components/slider.d.ts
|
|
5
|
-
export type SliderProps = React.ComponentProps<typeof Slider$1.Root>;
|
|
5
|
+
export type SliderProps = Omit<React.ComponentProps<typeof Slider$1.Root>, 'render'>;
|
|
6
6
|
declare function Slider({ className, defaultValue, id, value, min, max, ...props }: SliderProps): React.JSX.Element;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { Slider };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{
|
|
1
|
+
import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{t}from"../resolve-class-name-BurP8ngI.js";import{useFieldControlId as n,useFieldLabelId as r}from"./field.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{Slider as o}from"@base-ui/react/slider";function Slider({className:s,defaultValue:c,id:l,value:u,min:d=0,max:f=100,...p}){let m=n(l),h=r(),g=u??c,_=Array.isArray(g)?g.length:1;return/* @__PURE__ */ i(o.Root,{id:m,"aria-labelledby":h,"data-slot":`slider`,defaultValue:c,value:u,min:d,max:f,thumbAlignment:`edge`,className:n=>e(`data-horizontal:w-full data-vertical:h-full`,t(s,n)),...p,children:/* @__PURE__ */ a(o.Control,{"data-slot":`slider-control`,className:e(`relative flex w-full touch-none items-center select-none data-disabled:opacity-50`,`data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col`),children:[/* @__PURE__ */ i(o.Track,{"data-slot":`slider-track`,className:e(`relative grow overflow-hidden rounded-full bg-muted select-none`,`data-horizontal:h-1 data-horizontal:w-full`,`data-vertical:h-full data-vertical:w-1`),children:/* @__PURE__ */ i(o.Indicator,{"data-slot":`slider-range`,className:`bg-primary select-none data-horizontal:h-full data-vertical:w-full`})}),Array.from({length:_},(t,n)=>/* @__PURE__ */ i(o.Thumb,{"data-slot":`slider-thumb`,index:n,className:e(`relative block size-3 shrink-0 rounded-full border border-ring bg-white dark:bg-primary ring-ring/50`,`transition-[color,box-shadow] select-none after:absolute after:-inset-2`,`hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 has-focus-visible:ring-3`,`data-disabled:pointer-events-none data-disabled:opacity-50`)},String(n)))]})})}export{Slider};
|
|
2
2
|
//# sourceMappingURL=slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","names":["SliderPrimitive"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Slider as SliderPrimitive } from '
|
|
1
|
+
{"version":3,"file":"slider.js","names":["SliderPrimitive","Slider$1","props","fieldControlId","useFieldControlId","id","fieldLabelId","useFieldLabelId","currentValue","value","defaultValue","thumbCount","cn","resolveClassName","className","state","index"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { Slider as SliderPrimitive } from '@base-ui/react/slider'\n\nimport { cn } from '../lib/utils'\nimport { resolveClassName } from '../utils/resolve-class-name'\nimport { useFieldControlId, useFieldLabelId } from './field'\n\nexport type SliderProps = Omit<React.ComponentProps<typeof SliderPrimitive.Root>, 'render'>\n\nfunction Slider({ className, defaultValue, id, value, min = 0, max = 100, ...props }: SliderProps) {\n const fieldControlId = useFieldControlId(id)\n const fieldLabelId = useFieldLabelId()\n // One thumb per value: a single number (or no value, which defaults to `min`) is a one-thumb slider.\n const currentValue = value ?? defaultValue\n const thumbCount = Array.isArray(currentValue) ? currentValue.length : 1\n\n return (\n <SliderPrimitive.Root\n id={fieldControlId}\n aria-labelledby={fieldLabelId}\n data-slot=\"slider\"\n defaultValue={defaultValue}\n value={value}\n min={min}\n max={max}\n thumbAlignment=\"edge\"\n className={(state) => cn('data-horizontal:w-full data-vertical:h-full', resolveClassName(className, state))}\n {...props}\n >\n <SliderPrimitive.Control\n data-slot=\"slider-control\"\n className={cn(\n 'relative flex w-full touch-none items-center select-none data-disabled:opacity-50',\n 'data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col'\n )}\n >\n <SliderPrimitive.Track\n data-slot=\"slider-track\"\n className={cn(\n 'relative grow overflow-hidden rounded-full bg-muted select-none',\n 'data-horizontal:h-1 data-horizontal:w-full',\n 'data-vertical:h-full data-vertical:w-1'\n )}\n >\n <SliderPrimitive.Indicator\n data-slot=\"slider-range\"\n className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n />\n </SliderPrimitive.Track>\n {Array.from({ length: thumbCount }, (_, index) => (\n <SliderPrimitive.Thumb\n data-slot=\"slider-thumb\"\n key={String(index)}\n index={index}\n className={cn(\n 'relative block size-3 shrink-0 rounded-full border border-ring bg-white dark:bg-primary ring-ring/50',\n 'transition-[color,box-shadow] select-none after:absolute after:-inset-2',\n 'hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 has-focus-visible:ring-3',\n 'data-disabled:pointer-events-none data-disabled:opacity-50'\n )}\n />\n ))}\n </SliderPrimitive.Control>\n </SliderPrimitive.Root>\n )\n}\n\nexport { Slider }\n"],"mappings":"mSAUA,SAAS,OAAO,CAAE,YAAW,eAAc,KAAI,QAAO,MAAM,EAAG,MAAM,IAAK,GAAGE,GAAsB,CACjG,IAAMC,EAAiBC,EAAkBC,CAAE,EACrCC,EAAeC,EAAgB,EAE/BC,EAAeC,GAASC,EACxBC,EAAa,MAAM,QAAQH,CAAY,EAAIA,EAAa,OAAS,EAEvE,MACE,kBAACR,EAAgB,KAAjB,CACE,GAAIG,EACJ,kBAAiBG,EACjB,YAAU,SACI,eACP,QACF,MACA,MACL,eAAe,OACf,UAAY,GAAUM,EAAG,8CAA+CC,EAAiBC,EAAWC,CAAK,CAAC,EAC1G,GAAIb,EAEJ,SAAA,kBAACF,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAWY,EACT,oFACA,yFACF,EALF,SAAA,CAOE,kBAACZ,EAAgB,MAAjB,CACE,YAAU,eACV,UAAWY,EACT,kEACA,6CACA,wCACF,EAEA,SAAA,kBAACZ,EAAgB,UAAjB,CACE,YAAU,eACV,UAAU,oEACX,CAAA,CACoB,CAAA,EACtB,MAAM,KAAK,CAAE,OAAQW,CAAW,GAAI,EAAG,IACtC,kBAACX,EAAgB,MAAjB,CACE,YAAU,eAEH,QACP,UAAWY,EACT,uGACA,0EACA,wGACA,4DACF,CACD,EARM,OAAOI,CAAK,CAQlB,CACF,CACsB,GACL,CAAA,CAE1B"}
|