shadcn-packaged 0.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 +50 -0
- package/hooks/use-mobile.d.ts +1 -0
- package/hooks/use-mobile.jsx +15 -0
- package/hooks/use-toast.d.ts +44 -0
- package/hooks/use-toast.js +128 -0
- package/index.d.ts +51 -0
- package/lib/utils.d.ts +2 -0
- package/lib/utils.js +5 -0
- package/package.json +76 -0
- package/tailwind.config.js +89 -0
- package/ui/accordion.d.ts +7 -0
- package/ui/accordion.jsx +20 -0
- package/ui/alert-dialog.d.ts +20 -0
- package/ui/alert-dialog.jsx +29 -0
- package/ui/alert.d.ts +8 -0
- package/ui/alert.jsx +21 -0
- package/ui/aspect-ratio.d.ts +3 -0
- package/ui/aspect-ratio.jsx +4 -0
- package/ui/avatar.d.ts +6 -0
- package/ui/avatar.jsx +11 -0
- package/ui/badge.d.ts +9 -0
- package/ui/badge.jsx +20 -0
- package/ui/breadcrumb.d.ts +19 -0
- package/ui/breadcrumb.jsx +27 -0
- package/ui/button.d.ts +11 -0
- package/ui/button.jsx +32 -0
- package/ui/calendar.d.ts +8 -0
- package/ui/calendar.jsx +37 -0
- package/ui/card.d.ts +8 -0
- package/ui/card.jsx +15 -0
- package/ui/carousel.d.ts +18 -0
- package/ui/carousel.jsx +110 -0
- package/ui/chart.d.ts +62 -0
- package/ui/chart.jsx +164 -0
- package/ui/checkbox.d.ts +4 -0
- package/ui/checkbox.jsx +12 -0
- package/ui/collapsible.d.ts +5 -0
- package/ui/collapsible.jsx +6 -0
- package/ui/command.d.ts +80 -0
- package/ui/command.jsx +37 -0
- package/ui/context-menu.d.ts +27 -0
- package/ui/context-menu.jsx +52 -0
- package/ui/dialog.d.ts +19 -0
- package/ui/dialog.jsx +31 -0
- package/ui/drawer.d.ts +22 -0
- package/ui/drawer.jsx +28 -0
- package/ui/dropdown-menu.d.ts +27 -0
- package/ui/dropdown-menu.jsx +54 -0
- package/ui/form.d.ts +23 -0
- package/ui/form.jsx +68 -0
- package/ui/hover-card.d.ts +6 -0
- package/ui/hover-card.jsx +9 -0
- package/ui/input-otp.d.ts +34 -0
- package/ui/input-otp.jsx +25 -0
- package/ui/input.d.ts +3 -0
- package/ui/input.jsx +7 -0
- package/ui/label.d.ts +5 -0
- package/ui/label.jsx +9 -0
- package/ui/menubar.d.ts +33 -0
- package/ui/menubar.jsx +54 -0
- package/ui/navigation-menu.d.ts +12 -0
- package/ui/navigation-menu.jsx +33 -0
- package/ui/pagination.d.ts +28 -0
- package/ui/pagination.jsx +31 -0
- package/ui/popover.d.ts +6 -0
- package/ui/popover.jsx +11 -0
- package/ui/progress.d.ts +4 -0
- package/ui/progress.jsx +9 -0
- package/ui/radio-group.d.ts +5 -0
- package/ui/radio-group.jsx +18 -0
- package/ui/resizable.d.ts +23 -0
- package/ui/resizable.jsx +12 -0
- package/ui/scroll-area.d.ts +5 -0
- package/ui/scroll-area.jsx +19 -0
- package/ui/select.d.ts +13 -0
- package/ui/select.jsx +51 -0
- package/ui/separator.d.ts +4 -0
- package/ui/separator.jsx +7 -0
- package/ui/sheet.d.ts +25 -0
- package/ui/sheet.jsx +45 -0
- package/ui/sidebar.d.ts +66 -0
- package/ui/sidebar.jsx +253 -0
- package/ui/skeleton.d.ts +2 -0
- package/ui/skeleton.jsx +5 -0
- package/ui/slider.d.ts +4 -0
- package/ui/slider.jsx +12 -0
- package/ui/sonner.d.ts +4 -0
- package/ui/sonner.jsx +15 -0
- package/ui/switch.d.ts +4 -0
- package/ui/switch.jsx +9 -0
- package/ui/table.d.ts +10 -0
- package/ui/table.jsx +21 -0
- package/ui/tabs.d.ts +7 -0
- package/ui/tabs.jsx +12 -0
- package/ui/textarea.d.ts +3 -0
- package/ui/textarea.jsx +7 -0
- package/ui/toast.d.ts +15 -0
- package/ui/toast.jsx +35 -0
- package/ui/toaster.d.ts +1 -0
- package/ui/toaster.jsx +19 -0
- package/ui/toggle-group.d.ts +12 -0
- package/ui/toggle-group.jsx +26 -0
- package/ui/toggle.d.ts +12 -0
- package/ui/toggle.jsx +25 -0
- package/ui/tooltip.d.ts +7 -0
- package/ui/tooltip.jsx +10 -0
package/ui/command.d.ts
ADDED
@@ -0,0 +1,80 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { type DialogProps } from "@radix-ui/react-dialog";
|
3
|
+
declare const Command: React.ForwardRefExoticComponent<Omit<{
|
4
|
+
children?: React.ReactNode;
|
5
|
+
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
6
|
+
ref?: React.Ref<HTMLDivElement>;
|
7
|
+
} & {
|
8
|
+
asChild?: boolean;
|
9
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
10
|
+
label?: string;
|
11
|
+
shouldFilter?: boolean;
|
12
|
+
filter?: (value: string, search: string, keywords?: string[]) => number;
|
13
|
+
defaultValue?: string;
|
14
|
+
value?: string;
|
15
|
+
onValueChange?: (value: string) => void;
|
16
|
+
loop?: boolean;
|
17
|
+
disablePointerSelection?: boolean;
|
18
|
+
vimBindings?: boolean;
|
19
|
+
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
20
|
+
declare const CommandDialog: ({ children, ...props }: DialogProps) => React.JSX.Element;
|
21
|
+
declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
|
22
|
+
ref?: React.Ref<HTMLInputElement>;
|
23
|
+
} & {
|
24
|
+
asChild?: boolean;
|
25
|
+
}, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
|
26
|
+
value?: string;
|
27
|
+
onValueChange?: (search: string) => void;
|
28
|
+
} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
29
|
+
declare const CommandList: React.ForwardRefExoticComponent<Omit<{
|
30
|
+
children?: React.ReactNode;
|
31
|
+
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
32
|
+
ref?: React.Ref<HTMLDivElement>;
|
33
|
+
} & {
|
34
|
+
asChild?: boolean;
|
35
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
36
|
+
label?: string;
|
37
|
+
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
38
|
+
declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
|
39
|
+
children?: React.ReactNode;
|
40
|
+
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
41
|
+
ref?: React.Ref<HTMLDivElement>;
|
42
|
+
} & {
|
43
|
+
asChild?: boolean;
|
44
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
45
|
+
declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
|
46
|
+
children?: React.ReactNode;
|
47
|
+
} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
48
|
+
ref?: React.Ref<HTMLDivElement>;
|
49
|
+
} & {
|
50
|
+
asChild?: boolean;
|
51
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
|
52
|
+
heading?: React.ReactNode;
|
53
|
+
value?: string;
|
54
|
+
forceMount?: boolean;
|
55
|
+
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
56
|
+
declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
57
|
+
ref?: React.Ref<HTMLDivElement>;
|
58
|
+
} & {
|
59
|
+
asChild?: boolean;
|
60
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
|
61
|
+
alwaysRender?: boolean;
|
62
|
+
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
63
|
+
declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
|
64
|
+
children?: React.ReactNode;
|
65
|
+
} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
66
|
+
ref?: React.Ref<HTMLDivElement>;
|
67
|
+
} & {
|
68
|
+
asChild?: boolean;
|
69
|
+
}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "disabled" | "onSelect"> & {
|
70
|
+
disabled?: boolean;
|
71
|
+
onSelect?: (value: string) => void;
|
72
|
+
value?: string;
|
73
|
+
keywords?: string[];
|
74
|
+
forceMount?: boolean;
|
75
|
+
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
76
|
+
declare const CommandShortcut: {
|
77
|
+
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
78
|
+
displayName: string;
|
79
|
+
};
|
80
|
+
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
|
package/ui/command.jsx
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import { Command as CommandPrimitive } from "cmdk";
|
4
|
+
import { Search } from "lucide-react";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
import { Dialog, DialogContent } from "../ui/dialog";
|
7
|
+
const Command = React.forwardRef(({ className, ...props }, ref) => (<CommandPrimitive ref={ref} className={cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className)} {...props}/>));
|
8
|
+
Command.displayName = CommandPrimitive.displayName;
|
9
|
+
const CommandDialog = ({ children, ...props }) => {
|
10
|
+
return (<Dialog {...props}>
|
11
|
+
<DialogContent className="overflow-hidden p-0 shadow-lg">
|
12
|
+
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
13
|
+
{children}
|
14
|
+
</Command>
|
15
|
+
</DialogContent>
|
16
|
+
</Dialog>);
|
17
|
+
};
|
18
|
+
const CommandInput = React.forwardRef(({ className, ...props }, ref) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
19
|
+
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50"/>
|
20
|
+
<CommandPrimitive.Input ref={ref} className={cn("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className)} {...props}/>
|
21
|
+
</div>));
|
22
|
+
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
23
|
+
const CommandList = React.forwardRef(({ className, ...props }, ref) => (<CommandPrimitive.List ref={ref} className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} {...props}/>));
|
24
|
+
CommandList.displayName = CommandPrimitive.List.displayName;
|
25
|
+
const CommandEmpty = React.forwardRef((props, ref) => (<CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props}/>));
|
26
|
+
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
27
|
+
const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (<CommandPrimitive.Group ref={ref} className={cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className)} {...props}/>));
|
28
|
+
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
29
|
+
const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (<CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props}/>));
|
30
|
+
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
31
|
+
const CommandItem = React.forwardRef(({ className, ...props }, ref) => (<CommandPrimitive.Item ref={ref} className={cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className)} {...props}/>));
|
32
|
+
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
33
|
+
const CommandShortcut = ({ className, ...props }) => {
|
34
|
+
return (<span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props}/>);
|
35
|
+
};
|
36
|
+
CommandShortcut.displayName = "CommandShortcut";
|
37
|
+
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
|
3
|
+
declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
|
4
|
+
declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
|
5
|
+
declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
6
|
+
declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
|
7
|
+
declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
|
8
|
+
declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
9
|
+
declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
10
|
+
inset?: boolean;
|
11
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
12
|
+
declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
13
|
+
declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
14
|
+
declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
15
|
+
inset?: boolean;
|
16
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
17
|
+
declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
18
|
+
declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
19
|
+
declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
20
|
+
inset?: boolean;
|
21
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
22
|
+
declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
23
|
+
declare const ContextMenuShortcut: {
|
24
|
+
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
25
|
+
displayName: string;
|
26
|
+
};
|
27
|
+
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
@@ -0,0 +1,52 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
|
4
|
+
import { Check, ChevronRight, Circle } from "lucide-react";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
const ContextMenu = ContextMenuPrimitive.Root;
|
7
|
+
const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
|
8
|
+
const ContextMenuGroup = ContextMenuPrimitive.Group;
|
9
|
+
const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
10
|
+
const ContextMenuSub = ContextMenuPrimitive.Sub;
|
11
|
+
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
|
12
|
+
const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (<ContextMenuPrimitive.SubTrigger ref={ref} className={cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className)} {...props}>
|
13
|
+
{children}
|
14
|
+
<ChevronRight className="ml-auto h-4 w-4"/>
|
15
|
+
</ContextMenuPrimitive.SubTrigger>));
|
16
|
+
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
17
|
+
const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (<ContextMenuPrimitive.SubContent ref={ref} className={cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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", className)} {...props}/>));
|
18
|
+
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
19
|
+
const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (<ContextMenuPrimitive.Portal>
|
20
|
+
<ContextMenuPrimitive.Content ref={ref} className={cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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", className)} {...props}/>
|
21
|
+
</ContextMenuPrimitive.Portal>));
|
22
|
+
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
23
|
+
const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (<ContextMenuPrimitive.Item ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)} {...props}/>));
|
24
|
+
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
25
|
+
const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (<ContextMenuPrimitive.CheckboxItem ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} checked={checked} {...props}>
|
26
|
+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
27
|
+
<ContextMenuPrimitive.ItemIndicator>
|
28
|
+
<Check className="h-4 w-4"/>
|
29
|
+
</ContextMenuPrimitive.ItemIndicator>
|
30
|
+
</span>
|
31
|
+
{children}
|
32
|
+
</ContextMenuPrimitive.CheckboxItem>));
|
33
|
+
ContextMenuCheckboxItem.displayName =
|
34
|
+
ContextMenuPrimitive.CheckboxItem.displayName;
|
35
|
+
const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (<ContextMenuPrimitive.RadioItem ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} {...props}>
|
36
|
+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
37
|
+
<ContextMenuPrimitive.ItemIndicator>
|
38
|
+
<Circle className="h-2 w-2 fill-current"/>
|
39
|
+
</ContextMenuPrimitive.ItemIndicator>
|
40
|
+
</span>
|
41
|
+
{children}
|
42
|
+
</ContextMenuPrimitive.RadioItem>));
|
43
|
+
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
44
|
+
const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (<ContextMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)} {...props}/>));
|
45
|
+
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
46
|
+
const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (<ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props}/>));
|
47
|
+
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
|
48
|
+
const ContextMenuShortcut = ({ className, ...props }) => {
|
49
|
+
return (<span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props}/>);
|
50
|
+
};
|
51
|
+
ContextMenuShortcut.displayName = "ContextMenuShortcut";
|
52
|
+
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
package/ui/dialog.d.ts
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
3
|
+
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
4
|
+
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
5
|
+
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
6
|
+
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
7
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
8
|
+
declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
9
|
+
declare const DialogHeader: {
|
10
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
11
|
+
displayName: string;
|
12
|
+
};
|
13
|
+
declare const DialogFooter: {
|
14
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
15
|
+
displayName: string;
|
16
|
+
};
|
17
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
18
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
19
|
+
export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
|
package/ui/dialog.jsx
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
4
|
+
import { X } from "lucide-react";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
const Dialog = DialogPrimitive.Root;
|
7
|
+
const DialogTrigger = DialogPrimitive.Trigger;
|
8
|
+
const DialogPortal = DialogPrimitive.Portal;
|
9
|
+
const DialogClose = DialogPrimitive.Close;
|
10
|
+
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (<DialogPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)} {...props}/>));
|
11
|
+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
12
|
+
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (<DialogPortal>
|
13
|
+
<DialogOverlay />
|
14
|
+
<DialogPrimitive.Content ref={ref} className={cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className)} {...props}>
|
15
|
+
{children}
|
16
|
+
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
17
|
+
<X className="h-4 w-4"/>
|
18
|
+
<span className="sr-only">Close</span>
|
19
|
+
</DialogPrimitive.Close>
|
20
|
+
</DialogPrimitive.Content>
|
21
|
+
</DialogPortal>));
|
22
|
+
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
23
|
+
const DialogHeader = ({ className, ...props }) => (<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props}/>);
|
24
|
+
DialogHeader.displayName = "DialogHeader";
|
25
|
+
const DialogFooter = ({ className, ...props }) => (<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props}/>);
|
26
|
+
DialogFooter.displayName = "DialogFooter";
|
27
|
+
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (<DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props}/>));
|
28
|
+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
29
|
+
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (<DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props}/>));
|
30
|
+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
31
|
+
export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
|
package/ui/drawer.d.ts
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { Drawer as DrawerPrimitive } from "vaul";
|
3
|
+
declare const Drawer: {
|
4
|
+
({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
|
5
|
+
displayName: string;
|
6
|
+
};
|
7
|
+
declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
8
|
+
declare const DrawerPortal: typeof import("vaul").Portal;
|
9
|
+
declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
10
|
+
declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
11
|
+
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
12
|
+
declare const DrawerHeader: {
|
13
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
14
|
+
displayName: string;
|
15
|
+
};
|
16
|
+
declare const DrawerFooter: {
|
17
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
18
|
+
displayName: string;
|
19
|
+
};
|
20
|
+
declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
21
|
+
declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
22
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
package/ui/drawer.jsx
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import { Drawer as DrawerPrimitive } from "vaul";
|
4
|
+
import { cn } from "../lib/utils";
|
5
|
+
const Drawer = ({ shouldScaleBackground = true, ...props }) => (<DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props}/>);
|
6
|
+
Drawer.displayName = "Drawer";
|
7
|
+
const DrawerTrigger = DrawerPrimitive.Trigger;
|
8
|
+
const DrawerPortal = DrawerPrimitive.Portal;
|
9
|
+
const DrawerClose = DrawerPrimitive.Close;
|
10
|
+
const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => (<DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80", className)} {...props}/>));
|
11
|
+
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
|
12
|
+
const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (<DrawerPortal>
|
13
|
+
<DrawerOverlay />
|
14
|
+
<DrawerPrimitive.Content ref={ref} className={cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className)} {...props}>
|
15
|
+
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"/>
|
16
|
+
{children}
|
17
|
+
</DrawerPrimitive.Content>
|
18
|
+
</DrawerPortal>));
|
19
|
+
DrawerContent.displayName = "DrawerContent";
|
20
|
+
const DrawerHeader = ({ className, ...props }) => (<div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props}/>);
|
21
|
+
DrawerHeader.displayName = "DrawerHeader";
|
22
|
+
const DrawerFooter = ({ className, ...props }) => (<div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props}/>);
|
23
|
+
DrawerFooter.displayName = "DrawerFooter";
|
24
|
+
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (<DrawerPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props}/>));
|
25
|
+
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
|
26
|
+
const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (<DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props}/>));
|
27
|
+
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
|
28
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
3
|
+
declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
4
|
+
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
5
|
+
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
6
|
+
declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
7
|
+
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
8
|
+
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
9
|
+
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
10
|
+
inset?: boolean;
|
11
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
12
|
+
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
13
|
+
declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
14
|
+
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
15
|
+
inset?: boolean;
|
16
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
17
|
+
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
18
|
+
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
19
|
+
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
20
|
+
inset?: boolean;
|
21
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
22
|
+
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
23
|
+
declare const DropdownMenuShortcut: {
|
24
|
+
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
25
|
+
displayName: string;
|
26
|
+
};
|
27
|
+
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
|
@@ -0,0 +1,54 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
4
|
+
import { Check, ChevronRight, Circle } from "lucide-react";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
const DropdownMenu = DropdownMenuPrimitive.Root;
|
7
|
+
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
8
|
+
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
9
|
+
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
10
|
+
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
11
|
+
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
12
|
+
const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (<DropdownMenuPrimitive.SubTrigger ref={ref} className={cn("flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className)} {...props}>
|
13
|
+
{children}
|
14
|
+
<ChevronRight className="ml-auto"/>
|
15
|
+
</DropdownMenuPrimitive.SubTrigger>));
|
16
|
+
DropdownMenuSubTrigger.displayName =
|
17
|
+
DropdownMenuPrimitive.SubTrigger.displayName;
|
18
|
+
const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (<DropdownMenuPrimitive.SubContent ref={ref} className={cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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", className)} {...props}/>));
|
19
|
+
DropdownMenuSubContent.displayName =
|
20
|
+
DropdownMenuPrimitive.SubContent.displayName;
|
21
|
+
const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (<DropdownMenuPrimitive.Portal>
|
22
|
+
<DropdownMenuPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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", className)} {...props}/>
|
23
|
+
</DropdownMenuPrimitive.Portal>));
|
24
|
+
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
25
|
+
const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (<DropdownMenuPrimitive.Item ref={ref} className={cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className)} {...props}/>));
|
26
|
+
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
27
|
+
const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (<DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} checked={checked} {...props}>
|
28
|
+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
29
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
30
|
+
<Check className="h-4 w-4"/>
|
31
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
32
|
+
</span>
|
33
|
+
{children}
|
34
|
+
</DropdownMenuPrimitive.CheckboxItem>));
|
35
|
+
DropdownMenuCheckboxItem.displayName =
|
36
|
+
DropdownMenuPrimitive.CheckboxItem.displayName;
|
37
|
+
const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (<DropdownMenuPrimitive.RadioItem ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} {...props}>
|
38
|
+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
39
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
40
|
+
<Circle className="h-2 w-2 fill-current"/>
|
41
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
42
|
+
</span>
|
43
|
+
{children}
|
44
|
+
</DropdownMenuPrimitive.RadioItem>));
|
45
|
+
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
46
|
+
const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (<DropdownMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props}/>));
|
47
|
+
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
48
|
+
const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (<DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props}/>));
|
49
|
+
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
50
|
+
const DropdownMenuShortcut = ({ className, ...props }) => {
|
51
|
+
return (<span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props}/>);
|
52
|
+
};
|
53
|
+
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
54
|
+
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
|
package/ui/form.d.ts
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
3
|
+
import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
|
4
|
+
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
5
|
+
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
|
6
|
+
declare const useFormField: () => {
|
7
|
+
invalid: boolean;
|
8
|
+
isDirty: boolean;
|
9
|
+
isTouched: boolean;
|
10
|
+
isValidating: boolean;
|
11
|
+
error?: import("react-hook-form").FieldError;
|
12
|
+
id: string;
|
13
|
+
name: string;
|
14
|
+
formItemId: string;
|
15
|
+
formDescriptionId: string;
|
16
|
+
formMessageId: string;
|
17
|
+
};
|
18
|
+
declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
19
|
+
declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
|
20
|
+
declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
|
21
|
+
declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
22
|
+
declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
23
|
+
export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
|
package/ui/form.jsx
ADDED
@@ -0,0 +1,68 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
4
|
+
import { Controller, FormProvider, useFormContext, } from "react-hook-form";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
import { Label } from "../ui/label";
|
7
|
+
const Form = FormProvider;
|
8
|
+
const FormFieldContext = React.createContext({});
|
9
|
+
const FormField = ({ ...props }) => {
|
10
|
+
return (<FormFieldContext.Provider value={{ name: props.name }}>
|
11
|
+
<Controller {...props}/>
|
12
|
+
</FormFieldContext.Provider>);
|
13
|
+
};
|
14
|
+
const useFormField = () => {
|
15
|
+
const fieldContext = React.useContext(FormFieldContext);
|
16
|
+
const itemContext = React.useContext(FormItemContext);
|
17
|
+
const { getFieldState, formState } = useFormContext();
|
18
|
+
const fieldState = getFieldState(fieldContext.name, formState);
|
19
|
+
if (!fieldContext) {
|
20
|
+
throw new Error("useFormField should be used within <FormField>");
|
21
|
+
}
|
22
|
+
const { id } = itemContext;
|
23
|
+
return {
|
24
|
+
id,
|
25
|
+
name: fieldContext.name,
|
26
|
+
formItemId: `${id}-form-item`,
|
27
|
+
formDescriptionId: `${id}-form-item-description`,
|
28
|
+
formMessageId: `${id}-form-item-message`,
|
29
|
+
...fieldState,
|
30
|
+
};
|
31
|
+
};
|
32
|
+
const FormItemContext = React.createContext({});
|
33
|
+
const FormItem = React.forwardRef(({ className, ...props }, ref) => {
|
34
|
+
const id = React.useId();
|
35
|
+
return (<FormItemContext.Provider value={{ id }}>
|
36
|
+
<div ref={ref} className={cn("space-y-2", className)} {...props}/>
|
37
|
+
</FormItemContext.Provider>);
|
38
|
+
});
|
39
|
+
FormItem.displayName = "FormItem";
|
40
|
+
const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
|
41
|
+
const { error, formItemId } = useFormField();
|
42
|
+
return (<Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props}/>);
|
43
|
+
});
|
44
|
+
FormLabel.displayName = "FormLabel";
|
45
|
+
const FormControl = React.forwardRef(({ ...props }, ref) => {
|
46
|
+
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
47
|
+
return (<Slot ref={ref} id={formItemId} aria-describedby={!error
|
48
|
+
? `${formDescriptionId}`
|
49
|
+
: `${formDescriptionId} ${formMessageId}`} aria-invalid={!!error} {...props}/>);
|
50
|
+
});
|
51
|
+
FormControl.displayName = "FormControl";
|
52
|
+
const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
|
53
|
+
const { formDescriptionId } = useFormField();
|
54
|
+
return (<p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props}/>);
|
55
|
+
});
|
56
|
+
FormDescription.displayName = "FormDescription";
|
57
|
+
const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
|
58
|
+
const { error, formMessageId } = useFormField();
|
59
|
+
const body = error ? String(error?.message) : children;
|
60
|
+
if (!body) {
|
61
|
+
return null;
|
62
|
+
}
|
63
|
+
return (<p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
|
64
|
+
{body}
|
65
|
+
</p>);
|
66
|
+
});
|
67
|
+
FormMessage.displayName = "FormMessage";
|
68
|
+
export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
3
|
+
declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
|
4
|
+
declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
|
5
|
+
declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
6
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
@@ -0,0 +1,9 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
4
|
+
import { cn } from "../lib/utils";
|
5
|
+
const HoverCard = HoverCardPrimitive.Root;
|
6
|
+
const HoverCardTrigger = HoverCardPrimitive.Trigger;
|
7
|
+
const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (<HoverCardPrimitive.Content ref={ref} align={align} sideOffset={sideOffset} className={cn("z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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", className)} {...props}/>));
|
8
|
+
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
9
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "textAlign" | "value" | "onChange" | "maxLength" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
|
3
|
+
value?: string;
|
4
|
+
onChange?: (newValue: string) => unknown;
|
5
|
+
maxLength: number;
|
6
|
+
textAlign?: "left" | "center" | "right";
|
7
|
+
onComplete?: (...args: any[]) => unknown;
|
8
|
+
pushPasswordManagerStrategy?: "increase-width" | "none";
|
9
|
+
pasteTransformer?: (pasted: string) => string;
|
10
|
+
containerClassName?: string;
|
11
|
+
noScriptCSSFallback?: string | null;
|
12
|
+
} & {
|
13
|
+
render: (props: import("input-otp").RenderProps) => React.ReactNode;
|
14
|
+
children?: never;
|
15
|
+
} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "textAlign" | "value" | "onChange" | "maxLength" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
|
16
|
+
value?: string;
|
17
|
+
onChange?: (newValue: string) => unknown;
|
18
|
+
maxLength: number;
|
19
|
+
textAlign?: "left" | "center" | "right";
|
20
|
+
onComplete?: (...args: any[]) => unknown;
|
21
|
+
pushPasswordManagerStrategy?: "increase-width" | "none";
|
22
|
+
pasteTransformer?: (pasted: string) => string;
|
23
|
+
containerClassName?: string;
|
24
|
+
noScriptCSSFallback?: string | null;
|
25
|
+
} & {
|
26
|
+
render?: never;
|
27
|
+
children: React.ReactNode;
|
28
|
+
} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
|
29
|
+
declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
30
|
+
declare const InputOTPSlot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
31
|
+
index: number;
|
32
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
33
|
+
declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
34
|
+
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
|
package/ui/input-otp.jsx
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import { OTPInput, OTPInputContext } from "input-otp";
|
4
|
+
import { Dot } from "lucide-react";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => (<OTPInput ref={ref} containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)} className={cn("disabled:cursor-not-allowed", className)} {...props}/>));
|
7
|
+
InputOTP.displayName = "InputOTP";
|
8
|
+
const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("flex items-center", className)} {...props}/>));
|
9
|
+
InputOTPGroup.displayName = "InputOTPGroup";
|
10
|
+
const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
|
11
|
+
const inputOTPContext = React.useContext(OTPInputContext);
|
12
|
+
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
|
13
|
+
return (<div ref={ref} className={cn("relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md", isActive && "z-10 ring-2 ring-ring ring-offset-background", className)} {...props}>
|
14
|
+
{char}
|
15
|
+
{hasFakeCaret && (<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
16
|
+
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000"/>
|
17
|
+
</div>)}
|
18
|
+
</div>);
|
19
|
+
});
|
20
|
+
InputOTPSlot.displayName = "InputOTPSlot";
|
21
|
+
const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => (<div ref={ref} role="separator" {...props}>
|
22
|
+
<Dot />
|
23
|
+
</div>));
|
24
|
+
InputOTPSeparator.displayName = "InputOTPSeparator";
|
25
|
+
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
|
package/ui/input.d.ts
ADDED
package/ui/input.jsx
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { cn } from "../lib/utils";
|
3
|
+
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
|
4
|
+
return (<input type={type} className={cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className)} ref={ref} {...props}/>);
|
5
|
+
});
|
6
|
+
Input.displayName = "Input";
|
7
|
+
export { Input };
|
package/ui/label.d.ts
ADDED
@@ -0,0 +1,5 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
3
|
+
import { type VariantProps } from "class-variance-authority";
|
4
|
+
declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLLabelElement>>;
|
5
|
+
export { Label };
|
package/ui/label.jsx
ADDED
@@ -0,0 +1,9 @@
|
|
1
|
+
"use client";
|
2
|
+
import * as React from "react";
|
3
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
4
|
+
import { cva } from "class-variance-authority";
|
5
|
+
import { cn } from "../lib/utils";
|
6
|
+
const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
|
7
|
+
const Label = React.forwardRef(({ className, ...props }, ref) => (<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props}/>));
|
8
|
+
Label.displayName = LabelPrimitive.Root.displayName;
|
9
|
+
export { Label };
|