@minutemailer/kit 0.2.0 → 1.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/components/ui/alert.d.ts +9 -0
- package/components/ui/alert.js +24 -0
- package/components/ui/avatar.d.ts +6 -0
- package/components/ui/avatar.js +13 -0
- package/components/ui/button.d.ts +10 -0
- package/components/ui/button.js +31 -0
- package/components/ui/checkbox.d.ts +4 -0
- package/components/ui/checkbox.js +9 -0
- package/components/ui/dropdown-menu.d.ts +25 -0
- package/components/ui/dropdown-menu.js +50 -0
- package/components/ui/input.d.ts +3 -0
- package/components/ui/input.js +6 -0
- package/components/ui/label.d.ts +4 -0
- package/components/ui/label.js +8 -0
- package/components/ui/separator.d.ts +4 -0
- package/components/ui/separator.js +7 -0
- package/components/ui/sheet.d.ts +13 -0
- package/components/ui/sheet.js +40 -0
- package/components/ui/sidebar.d.ts +69 -0
- package/components/ui/sidebar.js +222 -0
- package/components/ui/skeleton.d.ts +2 -0
- package/components/ui/skeleton.js +6 -0
- package/components/ui/sonner.d.ts +3 -0
- package/components/ui/sonner.js +12 -0
- package/components/ui/tooltip.d.ts +7 -0
- package/components/ui/tooltip.js +16 -0
- package/hooks/use-mobile.d.ts +1 -0
- package/hooks/use-mobile.js +15 -0
- package/icons/Alert.d.ts +1 -1
- package/icons/AlertFilled.d.ts +1 -1
- package/icons/Arrow.d.ts +1 -1
- package/icons/ArrowDown.d.ts +1 -1
- package/icons/Attachment.d.ts +1 -1
- package/icons/Automate.d.ts +1 -1
- package/icons/Bold.d.ts +1 -1
- package/icons/BorderBottom.d.ts +1 -1
- package/icons/BorderLeft.d.ts +1 -1
- package/icons/BorderRight.d.ts +1 -1
- package/icons/BorderTop.d.ts +1 -1
- package/icons/BottomAlign.d.ts +1 -1
- package/icons/BottomLeftCorner.d.ts +1 -1
- package/icons/BottomRightCorner.d.ts +1 -1
- package/icons/Button.d.ts +1 -1
- package/icons/Calendar.d.ts +1 -1
- package/icons/Center.d.ts +1 -1
- package/icons/Check.d.ts +1 -1
- package/icons/CheckFilled.d.ts +1 -1
- package/icons/Checkmark.d.ts +1 -1
- package/icons/Chevron.d.ts +1 -1
- package/icons/ChevronDown.d.ts +1 -1
- package/icons/ChevronLeft.d.ts +1 -1
- package/icons/ChevronUp.d.ts +1 -1
- package/icons/Close.d.ts +1 -1
- package/icons/CloseBold.d.ts +1 -1
- package/icons/CloseCircle.d.ts +1 -1
- package/icons/Column1.d.ts +1 -1
- package/icons/Column12.d.ts +1 -1
- package/icons/Column13.d.ts +1 -1
- package/icons/Column2.d.ts +1 -1
- package/icons/Column21.d.ts +1 -1
- package/icons/Column3.d.ts +1 -1
- package/icons/Column31.d.ts +1 -1
- package/icons/Column4.d.ts +1 -1
- package/icons/Contacts.d.ts +1 -1
- package/icons/Crop.d.ts +1 -1
- package/icons/Divider.d.ts +1 -1
- package/icons/Download.d.ts +1 -1
- package/icons/Duplicate.d.ts +1 -1
- package/icons/Email.d.ts +1 -1
- package/icons/Feedback.d.ts +1 -1
- package/icons/File.d.ts +1 -1
- package/icons/Filter.d.ts +1 -1
- package/icons/Flip.d.ts +1 -1
- package/icons/Flop.d.ts +1 -1
- package/icons/Form.d.ts +1 -1
- package/icons/Gift.d.ts +1 -1
- package/icons/HeartRound.d.ts +1 -1
- package/icons/Home.d.ts +1 -1
- package/icons/HorisontalCenter.d.ts +1 -1
- package/icons/Image.d.ts +1 -1
- package/icons/Images.d.ts +1 -1
- package/icons/Info.d.ts +1 -1
- package/icons/Integrations.d.ts +1 -1
- package/icons/Italics.d.ts +1 -1
- package/icons/Justified.d.ts +1 -1
- package/icons/Left.d.ts +1 -1
- package/icons/LeftAlign.d.ts +1 -1
- package/icons/LetterSpacing.d.ts +1 -1
- package/icons/LineHeight.d.ts +1 -1
- package/icons/LineThickness.d.ts +1 -1
- package/icons/Link.d.ts +1 -1
- package/icons/List.d.ts +1 -1
- package/icons/ListMenu.d.ts +1 -1
- package/icons/ListNumbered.d.ts +1 -1
- package/icons/Location.d.ts +1 -1
- package/icons/LockChain.d.ts +1 -1
- package/icons/Locked.d.ts +1 -1
- package/icons/Logo.d.ts +1 -1
- package/icons/Logout.d.ts +1 -1
- package/icons/Lowercase.d.ts +1 -1
- package/icons/Magic.d.ts +1 -1
- package/icons/MarginBottom.d.ts +1 -1
- package/icons/MarginLeft.d.ts +1 -1
- package/icons/MarginRight.d.ts +1 -1
- package/icons/MarginTop.d.ts +1 -1
- package/icons/Menu.d.ts +1 -1
- package/icons/Minus.d.ts +1 -1
- package/icons/MinusBold.d.ts +1 -1
- package/icons/More.d.ts +1 -1
- package/icons/Move.d.ts +1 -1
- package/icons/MoveDirections.d.ts +1 -1
- package/icons/MoveVertical.d.ts +1 -1
- package/icons/Openclose.d.ts +1 -1
- package/icons/Pen.d.ts +1 -1
- package/icons/Phone.d.ts +1 -1
- package/icons/Plane.d.ts +1 -1
- package/icons/PlaneOutline.d.ts +1 -1
- package/icons/Plus.d.ts +1 -1
- package/icons/PlusBold.d.ts +1 -1
- package/icons/PlusCircle.d.ts +1 -1
- package/icons/Result.d.ts +1 -1
- package/icons/Right.d.ts +1 -1
- package/icons/RightAlign.d.ts +1 -1
- package/icons/Rotate.d.ts +1 -1
- package/icons/Search.d.ts +1 -1
- package/icons/Settings.d.ts +1 -1
- package/icons/Sms.d.ts +1 -1
- package/icons/Spacing.d.ts +1 -1
- package/icons/Spinner.d.ts +1 -1
- package/icons/StarFilled.d.ts +1 -1
- package/icons/StarOutline.d.ts +1 -1
- package/icons/Stars.d.ts +1 -1
- package/icons/Stats.d.ts +1 -1
- package/icons/Stop.d.ts +1 -1
- package/icons/Strikethrough.d.ts +1 -1
- package/icons/Support.d.ts +1 -1
- package/icons/Tags.d.ts +1 -1
- package/icons/Team.d.ts +1 -1
- package/icons/Text.d.ts +1 -1
- package/icons/Thumbsdown.d.ts +1 -1
- package/icons/Thumbsup.d.ts +1 -1
- package/icons/TopAlign.d.ts +1 -1
- package/icons/TopLeftCorner.d.ts +1 -1
- package/icons/TopRightCorner.d.ts +1 -1
- package/icons/Trash.d.ts +1 -1
- package/icons/Underscore.d.ts +1 -1
- package/icons/Unlink.d.ts +1 -1
- package/icons/UnlockChain.d.ts +1 -1
- package/icons/Unlocked.d.ts +1 -1
- package/icons/Upload.d.ts +1 -1
- package/icons/Uppercase.d.ts +1 -1
- package/icons/VerticalCenter.d.ts +1 -1
- package/icons/Video.d.ts +1 -1
- package/icons/Warning.d.ts +1 -1
- package/icons/Website.d.ts +1 -1
- package/icons/Width.d.ts +1 -1
- package/icons/Write.d.ts +1 -1
- package/icons/index.d.ts +129 -129
- package/icons/index.js.map +1 -1
- package/package.json +67 -43
- package/state/index.js +3 -1
- package/state/index.js.map +2 -2
- package/state/index.test.js +15 -7
- package/store/index.js.map +1 -1
- package/store/useSelector.d.ts +1 -1
- package/store/useSelector.js +1 -1
- package/stories/Alert.stories.d.ts +12 -0
- package/stories/Alert.stories.js +29 -0
- package/stories/Button.stories.d.ts +17 -0
- package/stories/Button.stories.js +61 -0
- package/stories/Checkbox.stories.d.ts +14 -0
- package/stories/Checkbox.stories.js +37 -0
- package/stories/Input.stories.d.ts +14 -0
- package/stories/Input.stories.js +31 -0
- package/stories/Label.stories.d.ts +9 -0
- package/stories/Label.stories.js +12 -0
- package/stories/Separator.stories.d.ts +10 -0
- package/stories/Separator.stories.js +13 -0
- package/stories/Sidebar.stories.d.ts +9 -0
- package/stories/Sidebar.stories.js +53 -0
- package/stories/Skeleton.stories.d.ts +9 -0
- package/stories/Skeleton.stories.js +10 -0
- package/stories/Sonner.stories.d.ts +11 -0
- package/stories/Sonner.stories.js +22 -0
- package/stories/Todo.js +11 -7
- package/stories/Tooltip.stories.d.ts +9 -0
- package/stories/Tooltip.stories.js +11 -0
- package/stories/TrafficLights.js +5 -5
- package/utils/utils.d.ts +2 -0
- package/utils/utils.js +5 -0
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const alertVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { Alert, AlertTitle, AlertDescription };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from '@/utils/utils';
|
|
4
|
+
const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', {
|
|
5
|
+
variants: {
|
|
6
|
+
variant: {
|
|
7
|
+
default: 'bg-card text-card-foreground',
|
|
8
|
+
destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
defaultVariants: {
|
|
12
|
+
variant: 'default',
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
function Alert({ className, variant, ...props }) {
|
|
16
|
+
return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
|
|
17
|
+
}
|
|
18
|
+
function AlertTitle({ className, ...props }) {
|
|
19
|
+
return (_jsx("div", { "data-slot": "alert-title", className: cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
function AlertDescription({ className, ...props }) {
|
|
22
|
+
return (_jsx("div", { "data-slot": "alert-description", className: cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
export { Alert, AlertTitle, AlertDescription };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
3
|
+
declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export { Avatar, AvatarImage, AvatarFallback };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
3
|
+
import { cn } from '@/utils/utils';
|
|
4
|
+
function Avatar({ className, ...props }) {
|
|
5
|
+
return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", className: cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className), ...props }));
|
|
6
|
+
}
|
|
7
|
+
function AvatarImage({ className, ...props }) {
|
|
8
|
+
return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
|
|
9
|
+
}
|
|
10
|
+
function AvatarFallback({ className, ...props }) {
|
|
11
|
+
return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted flex size-full items-center justify-center rounded-full', className), ...props }));
|
|
12
|
+
}
|
|
13
|
+
export { Avatar, AvatarImage, AvatarFallback };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
5
|
+
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { cn } from '@/utils/utils';
|
|
5
|
+
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-semibold transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
|
9
|
+
destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
|
10
|
+
outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
|
11
|
+
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
|
12
|
+
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
|
13
|
+
link: 'text-primary underline-offset-4 hover:underline',
|
|
14
|
+
},
|
|
15
|
+
size: {
|
|
16
|
+
default: 'h-11 px-6 py-3 has-[>svg]:px-5',
|
|
17
|
+
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
|
18
|
+
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
|
19
|
+
icon: 'size-9',
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: 'default',
|
|
24
|
+
size: 'default',
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
function Button({ className, variant, size, asChild = false, ...props }) {
|
|
28
|
+
const Comp = asChild ? Slot : 'button';
|
|
29
|
+
return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
|
|
30
|
+
}
|
|
31
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
4
|
+
import { CheckIcon } from 'lucide-react';
|
|
5
|
+
import { cn } from '@/utils/utils';
|
|
6
|
+
function Checkbox({ className, ...props }) {
|
|
7
|
+
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
|
|
8
|
+
}
|
|
9
|
+
export { Checkbox };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
3
|
+
declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
|
9
|
+
inset?: boolean;
|
|
10
|
+
variant?: 'default' | 'destructive';
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
|
16
|
+
inset?: boolean;
|
|
17
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
22
|
+
inset?: boolean;
|
|
23
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
3
|
+
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
|
|
4
|
+
import { cn } from '@/utils/utils';
|
|
5
|
+
function DropdownMenu({ ...props }) {
|
|
6
|
+
return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
|
|
7
|
+
}
|
|
8
|
+
function DropdownMenuPortal({ ...props }) {
|
|
9
|
+
return (_jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props }));
|
|
10
|
+
}
|
|
11
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
12
|
+
return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
|
|
13
|
+
}
|
|
14
|
+
function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
15
|
+
return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', className), ...props }) }));
|
|
16
|
+
}
|
|
17
|
+
function DropdownMenuGroup({ ...props }) {
|
|
18
|
+
return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
|
|
19
|
+
}
|
|
20
|
+
function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
|
|
21
|
+
return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
24
|
+
return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
|
|
25
|
+
}
|
|
26
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
27
|
+
return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
|
|
28
|
+
}
|
|
29
|
+
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
30
|
+
return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
|
|
31
|
+
}
|
|
32
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
33
|
+
return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className), ...props }));
|
|
34
|
+
}
|
|
35
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
36
|
+
return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
|
|
37
|
+
}
|
|
38
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
39
|
+
return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
|
|
40
|
+
}
|
|
41
|
+
function DropdownMenuSub({ ...props }) {
|
|
42
|
+
return (_jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props }));
|
|
43
|
+
}
|
|
44
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
45
|
+
return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
|
|
46
|
+
}
|
|
47
|
+
function DropdownMenuSubContent({ className, ...props }) {
|
|
48
|
+
return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', className), ...props }));
|
|
49
|
+
}
|
|
50
|
+
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '@/utils/utils';
|
|
3
|
+
function Input({ className, type, ...props }) {
|
|
4
|
+
return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-11 w-full min-w-0 rounded-md border bg-transparent px-4 py-2 text-base shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:border-muted-foreground/30 hover:bg-muted/30', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className), ...props }));
|
|
5
|
+
}
|
|
6
|
+
export { Input };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
4
|
+
import { cn } from '@/utils/utils';
|
|
5
|
+
function Label({ className, ...props }) {
|
|
6
|
+
return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), ...props }));
|
|
7
|
+
}
|
|
8
|
+
export { Label };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
3
|
+
declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export { Separator };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
3
|
+
import { cn } from '@/utils/utils';
|
|
4
|
+
function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
|
|
5
|
+
return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), ...props }));
|
|
6
|
+
}
|
|
7
|
+
export { Separator };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
|
3
|
+
declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
|
7
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
import { XIcon } from 'lucide-react';
|
|
5
|
+
import { cn } from '@/utils/utils';
|
|
6
|
+
function Sheet({ ...props }) {
|
|
7
|
+
return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
8
|
+
}
|
|
9
|
+
function SheetTrigger({ ...props }) {
|
|
10
|
+
return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
|
|
11
|
+
}
|
|
12
|
+
function SheetClose({ ...props }) {
|
|
13
|
+
return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
|
|
14
|
+
}
|
|
15
|
+
function SheetPortal({ ...props }) {
|
|
16
|
+
return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
17
|
+
}
|
|
18
|
+
function SheetOverlay({ className, ...props }) {
|
|
19
|
+
return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
|
|
20
|
+
}
|
|
21
|
+
function SheetContent({ className, children, side = 'right', ...props }) {
|
|
22
|
+
return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500', side === 'right' &&
|
|
23
|
+
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm', side === 'left' &&
|
|
24
|
+
'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm', side === 'top' &&
|
|
25
|
+
'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b', side === 'bottom' &&
|
|
26
|
+
'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t', className), ...props, children: [children, _jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
|
|
27
|
+
}
|
|
28
|
+
function SheetHeader({ className, ...props }) {
|
|
29
|
+
return (_jsx("div", { "data-slot": "sheet-header", className: cn('flex flex-col gap-1.5 p-4', className), ...props }));
|
|
30
|
+
}
|
|
31
|
+
function SheetFooter({ className, ...props }) {
|
|
32
|
+
return (_jsx("div", { "data-slot": "sheet-footer", className: cn('mt-auto flex flex-col gap-2 p-4', className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
function SheetTitle({ className, ...props }) {
|
|
35
|
+
return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-foreground font-semibold', className), ...props }));
|
|
36
|
+
}
|
|
37
|
+
function SheetDescription({ className, ...props }) {
|
|
38
|
+
return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-muted-foreground text-sm', className), ...props }));
|
|
39
|
+
}
|
|
40
|
+
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { Button } from '@/components/ui/button';
|
|
4
|
+
import { Input } from '@/components/ui/input';
|
|
5
|
+
import { Separator } from '@/components/ui/separator';
|
|
6
|
+
import { TooltipContent } from '@/components/ui/tooltip';
|
|
7
|
+
type SidebarContextProps = {
|
|
8
|
+
state: 'expanded' | 'collapsed';
|
|
9
|
+
open: boolean;
|
|
10
|
+
setOpen: (open: boolean) => void;
|
|
11
|
+
openMobile: boolean;
|
|
12
|
+
setOpenMobile: (open: boolean) => void;
|
|
13
|
+
isMobile: boolean;
|
|
14
|
+
toggleSidebar: () => void;
|
|
15
|
+
};
|
|
16
|
+
declare function useSidebar(): SidebarContextProps;
|
|
17
|
+
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
|
|
18
|
+
defaultOpen?: boolean;
|
|
19
|
+
open?: boolean;
|
|
20
|
+
onOpenChange?: (open: boolean) => void;
|
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<'div'> & {
|
|
23
|
+
side?: 'left' | 'right';
|
|
24
|
+
variant?: 'sidebar' | 'floating' | 'inset';
|
|
25
|
+
collapsible?: 'offcanvas' | 'icon' | 'none';
|
|
26
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function SidebarRail({ className, ...props }: React.ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
|
|
37
|
+
asChild?: boolean;
|
|
38
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
|
|
40
|
+
asChild?: boolean;
|
|
41
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
46
|
+
variant?: "default" | "outline" | null | undefined;
|
|
47
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
48
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
49
|
+
declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
|
|
50
|
+
asChild?: boolean;
|
|
51
|
+
isActive?: boolean;
|
|
52
|
+
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
53
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
|
|
55
|
+
asChild?: boolean;
|
|
56
|
+
showOnHover?: boolean;
|
|
57
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
58
|
+
declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
|
|
60
|
+
showIcon?: boolean;
|
|
61
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<'a'> & {
|
|
65
|
+
asChild?: boolean;
|
|
66
|
+
size?: 'sm' | 'md';
|
|
67
|
+
isActive?: boolean;
|
|
68
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
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, };
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
5
|
+
import { cva } from 'class-variance-authority';
|
|
6
|
+
import { PanelLeftIcon } from 'lucide-react';
|
|
7
|
+
import { useIsMobile } from '@/hooks/use-mobile';
|
|
8
|
+
import { cn } from '@/utils/utils';
|
|
9
|
+
import { Button } from '@/components/ui/button';
|
|
10
|
+
import { Input } from '@/components/ui/input';
|
|
11
|
+
import { Separator } from '@/components/ui/separator';
|
|
12
|
+
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '@/components/ui/sheet';
|
|
13
|
+
import { Skeleton } from '@/components/ui/skeleton';
|
|
14
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip';
|
|
15
|
+
const SIDEBAR_COOKIE_NAME = 'sidebar_state';
|
|
16
|
+
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
17
|
+
const SIDEBAR_WIDTH = '16rem';
|
|
18
|
+
const SIDEBAR_WIDTH_MOBILE = '18rem';
|
|
19
|
+
const SIDEBAR_WIDTH_ICON = '3rem';
|
|
20
|
+
const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
|
|
21
|
+
const SidebarContext = React.createContext(null);
|
|
22
|
+
function useSidebar() {
|
|
23
|
+
const context = React.useContext(SidebarContext);
|
|
24
|
+
if (!context) {
|
|
25
|
+
throw new Error('useSidebar must be used within a SidebarProvider.');
|
|
26
|
+
}
|
|
27
|
+
return context;
|
|
28
|
+
}
|
|
29
|
+
function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
|
|
30
|
+
const isMobile = useIsMobile();
|
|
31
|
+
const [openMobile, setOpenMobile] = React.useState(false);
|
|
32
|
+
// This is the internal state of the sidebar.
|
|
33
|
+
// We use openProp and setOpenProp for control from outside the component.
|
|
34
|
+
const [_open, _setOpen] = React.useState(defaultOpen);
|
|
35
|
+
const open = openProp ?? _open;
|
|
36
|
+
const setOpen = React.useCallback((value) => {
|
|
37
|
+
const openState = typeof value === 'function' ? value(open) : value;
|
|
38
|
+
if (setOpenProp) {
|
|
39
|
+
setOpenProp(openState);
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
_setOpen(openState);
|
|
43
|
+
}
|
|
44
|
+
// This sets the cookie to keep the sidebar state.
|
|
45
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
46
|
+
}, [setOpenProp, open]);
|
|
47
|
+
// Helper to toggle the sidebar.
|
|
48
|
+
const toggleSidebar = React.useCallback(() => {
|
|
49
|
+
return isMobile
|
|
50
|
+
? setOpenMobile((open) => !open)
|
|
51
|
+
: setOpen((open) => !open);
|
|
52
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
|
53
|
+
// Adds a keyboard shortcut to toggle the sidebar.
|
|
54
|
+
React.useEffect(() => {
|
|
55
|
+
const handleKeyDown = (event) => {
|
|
56
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
|
57
|
+
(event.metaKey || event.ctrlKey)) {
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
toggleSidebar();
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
63
|
+
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
64
|
+
}, [toggleSidebar]);
|
|
65
|
+
// We add a state so that we can do data-state="expanded" or "collapsed".
|
|
66
|
+
// This makes it easier to style the sidebar with Tailwind classes.
|
|
67
|
+
const state = open ? 'expanded' : 'collapsed';
|
|
68
|
+
const contextValue = React.useMemo(() => ({
|
|
69
|
+
state,
|
|
70
|
+
open,
|
|
71
|
+
setOpen,
|
|
72
|
+
isMobile,
|
|
73
|
+
openMobile,
|
|
74
|
+
setOpenMobile,
|
|
75
|
+
toggleSidebar,
|
|
76
|
+
}), [
|
|
77
|
+
state,
|
|
78
|
+
open,
|
|
79
|
+
setOpen,
|
|
80
|
+
isMobile,
|
|
81
|
+
openMobile,
|
|
82
|
+
setOpenMobile,
|
|
83
|
+
toggleSidebar,
|
|
84
|
+
]);
|
|
85
|
+
return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
|
|
86
|
+
'--sidebar-width': SIDEBAR_WIDTH,
|
|
87
|
+
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
|
|
88
|
+
...style,
|
|
89
|
+
}, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className), ...props, children: children }) }) }));
|
|
90
|
+
}
|
|
91
|
+
function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }) {
|
|
92
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
93
|
+
if (collapsible === 'none') {
|
|
94
|
+
return (_jsx("div", { "data-slot": "sidebar", className: cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className), ...props, children: children }));
|
|
95
|
+
}
|
|
96
|
+
if (isMobile) {
|
|
97
|
+
return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
|
|
98
|
+
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
|
|
99
|
+
}, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
|
|
100
|
+
}
|
|
101
|
+
return (_jsxs("div", { className: "group peer text-sidebar-foreground hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
|
|
102
|
+
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
|
|
103
|
+
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { "data-slot": "sidebar-container", className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
|
|
104
|
+
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
|
|
105
|
+
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
|
|
106
|
+
// Adjust the padding for floating and inset variants.
|
|
107
|
+
variant === 'floating' || variant === 'inset'
|
|
108
|
+
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
|
|
109
|
+
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", children: children }) })] }));
|
|
110
|
+
}
|
|
111
|
+
function SidebarTrigger({ className, onClick, ...props }) {
|
|
112
|
+
const { toggleSidebar } = useSidebar();
|
|
113
|
+
return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon", className: cn('size-7', className), onClick: (event) => {
|
|
114
|
+
onClick?.(event);
|
|
115
|
+
toggleSidebar();
|
|
116
|
+
}, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
|
|
117
|
+
}
|
|
118
|
+
function SidebarRail({ className, ...props }) {
|
|
119
|
+
const { toggleSidebar } = useSidebar();
|
|
120
|
+
return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
|
|
121
|
+
}
|
|
122
|
+
function SidebarInset({ className, ...props }) {
|
|
123
|
+
return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));
|
|
124
|
+
}
|
|
125
|
+
function SidebarInput({ className, ...props }) {
|
|
126
|
+
return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('bg-background h-8 w-full shadow-none', className), ...props }));
|
|
127
|
+
}
|
|
128
|
+
function SidebarHeader({ className, ...props }) {
|
|
129
|
+
return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props }));
|
|
130
|
+
}
|
|
131
|
+
function SidebarFooter({ className, ...props }) {
|
|
132
|
+
return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props }));
|
|
133
|
+
}
|
|
134
|
+
function SidebarSeparator({ className, ...props }) {
|
|
135
|
+
return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className), ...props }));
|
|
136
|
+
}
|
|
137
|
+
function SidebarContent({ className, ...props }) {
|
|
138
|
+
return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
|
|
139
|
+
}
|
|
140
|
+
function SidebarGroup({ className, ...props }) {
|
|
141
|
+
return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
|
|
142
|
+
}
|
|
143
|
+
function SidebarGroupLabel({ className, asChild = false, ...props }) {
|
|
144
|
+
const Comp = asChild ? Slot : 'div';
|
|
145
|
+
return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
|
|
146
|
+
}
|
|
147
|
+
function SidebarGroupAction({ className, asChild = false, ...props }) {
|
|
148
|
+
const Comp = asChild ? Slot : 'button';
|
|
149
|
+
return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
|
|
150
|
+
// Increases the hit area of the button on mobile.
|
|
151
|
+
'after:absolute after:-inset-2 md:after:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
|
|
152
|
+
}
|
|
153
|
+
function SidebarGroupContent({ className, ...props }) {
|
|
154
|
+
return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props }));
|
|
155
|
+
}
|
|
156
|
+
function SidebarMenu({ className, ...props }) {
|
|
157
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className), ...props }));
|
|
158
|
+
}
|
|
159
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
160
|
+
return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
|
|
161
|
+
}
|
|
162
|
+
const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
|
|
163
|
+
variants: {
|
|
164
|
+
variant: {
|
|
165
|
+
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
|
|
166
|
+
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))]',
|
|
167
|
+
},
|
|
168
|
+
size: {
|
|
169
|
+
default: 'h-8 text-sm',
|
|
170
|
+
sm: 'h-7 text-xs',
|
|
171
|
+
lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
defaultVariants: {
|
|
175
|
+
variant: 'default',
|
|
176
|
+
size: 'default',
|
|
177
|
+
},
|
|
178
|
+
});
|
|
179
|
+
function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }) {
|
|
180
|
+
const Comp = asChild ? Slot : 'button';
|
|
181
|
+
const { isMobile, state } = useSidebar();
|
|
182
|
+
const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
|
|
183
|
+
if (!tooltip) {
|
|
184
|
+
return button;
|
|
185
|
+
}
|
|
186
|
+
if (typeof tooltip === 'string') {
|
|
187
|
+
tooltip = {
|
|
188
|
+
children: tooltip,
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, ...tooltip })] }));
|
|
192
|
+
}
|
|
193
|
+
function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
|
|
194
|
+
const Comp = asChild ? Slot : 'button';
|
|
195
|
+
return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
|
|
196
|
+
// Increases the hit area of the button on mobile.
|
|
197
|
+
'after:absolute after:-inset-2 md:after:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
|
|
198
|
+
'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className), ...props }));
|
|
199
|
+
}
|
|
200
|
+
function SidebarMenuBadge({ className, ...props }) {
|
|
201
|
+
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
|
|
202
|
+
}
|
|
203
|
+
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
204
|
+
// Random width between 50 to 90%.
|
|
205
|
+
const width = React.useMemo(() => {
|
|
206
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
207
|
+
}, []);
|
|
208
|
+
return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className), ...props, children: [showIcon && (_jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
|
|
209
|
+
'--skeleton-width': width,
|
|
210
|
+
} })] }));
|
|
211
|
+
}
|
|
212
|
+
function SidebarMenuSub({ className, ...props }) {
|
|
213
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
|
|
214
|
+
}
|
|
215
|
+
function SidebarMenuSubItem({ className, ...props }) {
|
|
216
|
+
return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn('group/menu-sub-item relative', className), ...props }));
|
|
217
|
+
}
|
|
218
|
+
function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, className, ...props }) {
|
|
219
|
+
const Comp = asChild ? Slot : 'a';
|
|
220
|
+
return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
|
|
221
|
+
}
|
|
222
|
+
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, };
|