@epa-datos/ui 0.1.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/LICENSE +21 -0
- package/README.md +98 -0
- package/dist/components/epa/conversion-funnel.d.ts +17 -0
- package/dist/components/epa/conversion-funnel.js +52 -0
- package/dist/components/epa/date-range-picker.d.ts +42 -0
- package/dist/components/epa/date-range-picker.js +184 -0
- package/dist/components/epa/heatmap.d.ts +25 -0
- package/dist/components/epa/heatmap.js +79 -0
- package/dist/components/epa/metric-card-group.d.ts +41 -0
- package/dist/components/epa/metric-card-group.js +47 -0
- package/dist/components/ui/accordion.d.ts +6 -0
- package/dist/components/ui/accordion.js +17 -0
- package/dist/components/ui/alert-dialog.d.ts +18 -0
- package/dist/components/ui/alert-dialog.js +42 -0
- package/dist/components/ui/alert.d.ts +10 -0
- package/dist/components/ui/alert.js +30 -0
- package/dist/components/ui/aspect-ratio.d.ts +4 -0
- package/dist/components/ui/aspect-ratio.js +8 -0
- package/dist/components/ui/attachment.d.ts +23 -0
- package/dist/components/ui/attachment.js +68 -0
- package/dist/components/ui/avatar.d.ts +11 -0
- package/dist/components/ui/avatar.js +23 -0
- package/dist/components/ui/badge.d.ts +7 -0
- package/dist/components/ui/badge.js +36 -0
- package/dist/components/ui/breadcrumb.d.ts +10 -0
- package/dist/components/ui/breadcrumb.js +36 -0
- package/dist/components/ui/bubble.d.ts +16 -0
- package/dist/components/ui/bubble.js +59 -0
- package/dist/components/ui/button-group.d.ts +10 -0
- package/dist/components/ui/button-group.js +36 -0
- package/dist/components/ui/button.d.ts +8 -0
- package/dist/components/ui/button.js +34 -0
- package/dist/components/ui/calendar.d.ts +10 -0
- package/dist/components/ui/calendar.js +76 -0
- package/dist/components/ui/card.d.ts +12 -0
- package/dist/components/ui/card.js +33 -0
- package/dist/components/ui/carousel.d.ts +28 -0
- package/dist/components/ui/carousel.js +91 -0
- package/dist/components/ui/chart.d.ts +44 -0
- package/dist/components/ui/chart.js +132 -0
- package/dist/components/ui/checkbox.d.ts +3 -0
- package/dist/components/ui/checkbox.js +9 -0
- package/dist/components/ui/collapsible.d.ts +5 -0
- package/dist/components/ui/collapsible.js +13 -0
- package/dist/components/ui/combobox.d.ts +24 -0
- package/dist/components/ui/combobox.js +58 -0
- package/dist/components/ui/command.d.ts +19 -0
- package/dist/components/ui/command.js +35 -0
- package/dist/components/ui/context-menu.d.ts +29 -0
- package/dist/components/ui/context-menu.js +51 -0
- package/dist/components/ui/dialog.d.ts +17 -0
- package/dist/components/ui/dialog.js +37 -0
- package/dist/components/ui/direction.d.ts +1 -0
- package/dist/components/ui/direction.js +2 -0
- package/dist/components/ui/drawer.d.ts +16 -0
- package/dist/components/ui/drawer.js +75 -0
- package/dist/components/ui/dropdown-menu.d.ts +29 -0
- package/dist/components/ui/dropdown-menu.js +51 -0
- package/dist/components/ui/empty.d.ts +11 -0
- package/dist/components/ui/empty.js +33 -0
- package/dist/components/ui/field.d.ts +24 -0
- package/dist/components/ui/field.js +68 -0
- package/dist/components/ui/hover-card.d.ts +5 -0
- package/dist/components/ui/hover-card.js +14 -0
- package/dist/components/ui/input-group.d.ts +18 -0
- package/dist/components/ui/input-group.js +57 -0
- package/dist/components/ui/input-otp.d.ts +11 -0
- package/dist/components/ui/input-otp.js +21 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/input.js +7 -0
- package/dist/components/ui/item.d.ts +22 -0
- package/dist/components/ui/item.js +78 -0
- package/dist/components/ui/kbd.d.ts +3 -0
- package/dist/components/ui/kbd.js +9 -0
- package/dist/components/ui/label.d.ts +3 -0
- package/dist/components/ui/label.js +7 -0
- package/dist/components/ui/marker.d.ts +10 -0
- package/dist/components/ui/marker.js +34 -0
- package/dist/components/ui/menubar.d.ts +29 -0
- package/dist/components/ui/menubar.js +56 -0
- package/dist/components/ui/message-scroller.d.ts +10 -0
- package/dist/components/ui/message-scroller.js +25 -0
- package/dist/components/ui/message.d.ts +10 -0
- package/dist/components/ui/message.js +21 -0
- package/dist/components/ui/native-select.d.ts +8 -0
- package/dist/components/ui/native-select.js +13 -0
- package/dist/components/ui/navigation-menu.d.ts +11 -0
- package/dist/components/ui/navigation-menu.js +31 -0
- package/dist/components/ui/pagination.d.ts +17 -0
- package/dist/components/ui/pagination.js +26 -0
- package/dist/components/ui/popover.d.ts +9 -0
- package/dist/components/ui/popover.js +23 -0
- package/dist/components/ui/progress.d.ts +7 -0
- package/dist/components/ui/progress.js +20 -0
- package/dist/components/ui/questionnaire.d.ts +19 -0
- package/dist/components/ui/questionnaire.js +52 -0
- package/dist/components/ui/radio-group.d.ts +5 -0
- package/dist/components/ui/radio-group.js +12 -0
- package/dist/components/ui/resizable.d.ts +7 -0
- package/dist/components/ui/resizable.js +14 -0
- package/dist/components/ui/scroll-area.d.ts +5 -0
- package/dist/components/ui/scroll-area.js +11 -0
- package/dist/components/ui/select.d.ts +15 -0
- package/dist/components/ui/select.js +34 -0
- package/dist/components/ui/separator.d.ts +3 -0
- package/dist/components/ui/separator.js +8 -0
- package/dist/components/ui/sheet.d.ts +14 -0
- package/dist/components/ui/sheet.js +37 -0
- package/dist/components/ui/sidebar.d.ts +63 -0
- package/dist/components/ui/sidebar.js +256 -0
- package/dist/components/ui/skeleton.d.ts +2 -0
- package/dist/components/ui/skeleton.js +6 -0
- package/dist/components/ui/slider.d.ts +3 -0
- package/dist/components/ui/slider.js +12 -0
- package/dist/components/ui/spinner.d.ts +2 -0
- package/dist/components/ui/spinner.js +7 -0
- package/dist/components/ui/switch.d.ts +5 -0
- package/dist/components/ui/switch.js +8 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/components/ui/table.js +28 -0
- package/dist/components/ui/tabs.d.ts +10 -0
- package/dist/components/ui/tabs.js +29 -0
- package/dist/components/ui/textarea.d.ts +3 -0
- package/dist/components/ui/textarea.js +6 -0
- package/dist/components/ui/toast.d.ts +16 -0
- package/dist/components/ui/toast.js +66 -0
- package/dist/components/ui/toggle-group.d.ts +11 -0
- package/dist/components/ui/toggle-group.js +24 -0
- package/dist/components/ui/toggle.d.ts +8 -0
- package/dist/components/ui/toggle.js +26 -0
- package/dist/components/ui/tooltip.d.ts +6 -0
- package/dist/components/ui/tooltip.js +17 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +15 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.js +5 -0
- package/dist/styles/tokens.css +200 -0
- package/package.json +100 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
|
|
3
|
+
declare function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props): React.JSX.Element;
|
|
4
|
+
declare function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props): React.JSX.Element;
|
|
5
|
+
declare function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props): React.JSX.Element;
|
|
6
|
+
declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
|
|
7
|
+
declare function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props): React.JSX.Element;
|
|
8
|
+
declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuPrimitive.GroupLabel.Props & {
|
|
9
|
+
inset?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuPrimitive.Item.Props & {
|
|
12
|
+
inset?: boolean;
|
|
13
|
+
variant?: "default" | "destructive";
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
|
|
16
|
+
declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuPrimitive.SubmenuTrigger.Props & {
|
|
17
|
+
inset?: boolean;
|
|
18
|
+
}): React.JSX.Element;
|
|
19
|
+
declare function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>): React.JSX.Element;
|
|
20
|
+
declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: ContextMenuPrimitive.CheckboxItem.Props & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
}): React.JSX.Element;
|
|
23
|
+
declare function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props): React.JSX.Element;
|
|
24
|
+
declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuPrimitive.RadioItem.Props & {
|
|
25
|
+
inset?: boolean;
|
|
26
|
+
}): React.JSX.Element;
|
|
27
|
+
declare function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props): React.JSX.Element;
|
|
28
|
+
declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
29
|
+
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
|
|
4
|
+
import { cn } from "../../lib/utils.js";
|
|
5
|
+
import { ChevronRightIcon, CheckIcon } from "lucide-react";
|
|
6
|
+
function ContextMenu({ ...props }) {
|
|
7
|
+
return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
|
|
8
|
+
}
|
|
9
|
+
function ContextMenuPortal({ ...props }) {
|
|
10
|
+
return (_jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", ...props }));
|
|
11
|
+
}
|
|
12
|
+
function ContextMenuTrigger({ className, ...props }) {
|
|
13
|
+
return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", className: cn("select-none", className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
|
|
16
|
+
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
17
|
+
}
|
|
18
|
+
function ContextMenuGroup({ ...props }) {
|
|
19
|
+
return (_jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props }));
|
|
20
|
+
}
|
|
21
|
+
function ContextMenuLabel({ className, inset, ...props }) {
|
|
22
|
+
return (_jsx(ContextMenuPrimitive.Group, { children: _jsx(ContextMenuPrimitive.GroupLabel, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }) }));
|
|
23
|
+
}
|
|
24
|
+
function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
25
|
+
return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
|
|
26
|
+
}
|
|
27
|
+
function ContextMenuSub({ ...props }) {
|
|
28
|
+
return (_jsx(ContextMenuPrimitive.SubmenuRoot, { "data-slot": "context-menu-sub", ...props }));
|
|
29
|
+
}
|
|
30
|
+
function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
31
|
+
return (_jsxs(ContextMenuPrimitive.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
|
|
32
|
+
}
|
|
33
|
+
function ContextMenuSubContent({ ...props }) {
|
|
34
|
+
return (_jsx(ContextMenuContent, { "data-slot": "context-menu-sub-content", className: "shadow-lg", side: "right", ...props }));
|
|
35
|
+
}
|
|
36
|
+
function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
37
|
+
return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 right-2", children: _jsx(ContextMenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
38
|
+
}
|
|
39
|
+
function ContextMenuRadioGroup({ ...props }) {
|
|
40
|
+
return (_jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props }));
|
|
41
|
+
}
|
|
42
|
+
function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
43
|
+
return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 right-2", children: _jsx(ContextMenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
44
|
+
}
|
|
45
|
+
function ContextMenuSeparator({ className, ...props }) {
|
|
46
|
+
return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
47
|
+
}
|
|
48
|
+
function ContextMenuShortcut({ className, ...props }) {
|
|
49
|
+
return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className), ...props }));
|
|
50
|
+
}
|
|
51
|
+
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
3
|
+
declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
|
|
4
|
+
declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
|
|
5
|
+
declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
|
|
6
|
+
declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
|
|
7
|
+
declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
|
|
8
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
|
|
13
|
+
showCloseButton?: boolean;
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
|
|
16
|
+
declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
|
|
17
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
4
|
+
import { cn } from "../../lib/utils.js";
|
|
5
|
+
import { Button } from "../../components/ui/button.js";
|
|
6
|
+
import { XIcon } from "lucide-react";
|
|
7
|
+
function Dialog({ ...props }) {
|
|
8
|
+
return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
9
|
+
}
|
|
10
|
+
function DialogTrigger({ ...props }) {
|
|
11
|
+
return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
12
|
+
}
|
|
13
|
+
function DialogPortal({ ...props }) {
|
|
14
|
+
return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
15
|
+
}
|
|
16
|
+
function DialogClose({ ...props }) {
|
|
17
|
+
return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
18
|
+
}
|
|
19
|
+
function DialogOverlay({ className, ...props }) {
|
|
20
|
+
return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
|
|
21
|
+
}
|
|
22
|
+
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
23
|
+
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
|
|
24
|
+
}
|
|
25
|
+
function DialogHeader({ className, ...props }) {
|
|
26
|
+
return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
|
|
27
|
+
}
|
|
28
|
+
function DialogFooter({ className, showCloseButton = false, children, ...props }) {
|
|
29
|
+
return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: "Close" }))] }));
|
|
30
|
+
}
|
|
31
|
+
function DialogTitle({ className, ...props }) {
|
|
32
|
+
return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("font-heading text-base leading-none font-medium", className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
function DialogDescription({ className, ...props }) {
|
|
35
|
+
return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
|
|
36
|
+
}
|
|
37
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DirectionProvider, useDirection, } from "@base-ui/react/direction-provider";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
|
3
|
+
declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: DrawerPrimitive.Root.Props & {
|
|
4
|
+
showSwipeHandle?: boolean;
|
|
5
|
+
}): React.JSX.Element;
|
|
6
|
+
declare function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props): React.JSX.Element;
|
|
7
|
+
declare function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props): React.JSX.Element;
|
|
8
|
+
declare function DrawerClose({ ...props }: DrawerPrimitive.Close.Props): React.JSX.Element;
|
|
9
|
+
declare function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props): React.JSX.Element;
|
|
10
|
+
declare function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
|
+
declare function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props): React.JSX.Element;
|
|
12
|
+
declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
13
|
+
declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
14
|
+
declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.JSX.Element;
|
|
15
|
+
declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.JSX.Element;
|
|
16
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
|
5
|
+
import { cn } from "../../lib/utils.js";
|
|
6
|
+
const DrawerContext = React.createContext(null);
|
|
7
|
+
function useDrawer() {
|
|
8
|
+
const context = React.useContext(DrawerContext);
|
|
9
|
+
if (!context) {
|
|
10
|
+
throw new Error("useDrawer must be used within a Drawer.");
|
|
11
|
+
}
|
|
12
|
+
return context;
|
|
13
|
+
}
|
|
14
|
+
function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", ...props }) {
|
|
15
|
+
const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
|
|
16
|
+
const contextValue = React.useMemo(() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), [hasSnapPoints, modal, showSwipeHandle, swipeDirection]);
|
|
17
|
+
return (_jsx(DrawerContext.Provider, { value: contextValue, children: _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", modal: modal, snapPoints: snapPoints, swipeDirection: swipeDirection, ...props }) }));
|
|
18
|
+
}
|
|
19
|
+
function DrawerTrigger({ ...props }) {
|
|
20
|
+
return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
|
|
21
|
+
}
|
|
22
|
+
function DrawerPortal({ ...props }) {
|
|
23
|
+
return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
|
|
24
|
+
}
|
|
25
|
+
function DrawerClose({ ...props }) {
|
|
26
|
+
return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
|
|
27
|
+
}
|
|
28
|
+
function DrawerOverlay({ className, ...props }) {
|
|
29
|
+
return (_jsx(DrawerPrimitive.Backdrop, { "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className), ...props }));
|
|
30
|
+
}
|
|
31
|
+
function DrawerSwipeHandle({ className, ...props }) {
|
|
32
|
+
return (_jsx("div", { "data-slot": "drawer-swipe-handle", "aria-hidden": "true", className: cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
function DrawerContent({ className, children, ...props }) {
|
|
35
|
+
const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
|
|
36
|
+
const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
|
|
37
|
+
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && (_jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : undefined })), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto", children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? "" : undefined, className: cn(
|
|
38
|
+
// Base.
|
|
39
|
+
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
|
|
40
|
+
// Nested.
|
|
41
|
+
"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
|
|
42
|
+
// Bleed.
|
|
43
|
+
"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
|
|
44
|
+
// Sizing.
|
|
45
|
+
"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
|
|
46
|
+
// Stack.
|
|
47
|
+
"[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
|
|
48
|
+
// Transitions.
|
|
49
|
+
"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
|
|
50
|
+
// Axis: y.
|
|
51
|
+
"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
|
|
52
|
+
// Axis: x.
|
|
53
|
+
"data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
|
|
54
|
+
// Direction: down.
|
|
55
|
+
"data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
|
|
56
|
+
// Direction: up.
|
|
57
|
+
"data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
|
|
58
|
+
// Direction: left.
|
|
59
|
+
"data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
|
|
60
|
+
// Direction: right.
|
|
61
|
+
"data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className), ...props, children: [showSwipeHandle && _jsx(DrawerSwipeHandle, {}), _jsx(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"), children: children })] }) })] }));
|
|
62
|
+
}
|
|
63
|
+
function DrawerHeader({ className, ...props }) {
|
|
64
|
+
return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className), ...props }));
|
|
65
|
+
}
|
|
66
|
+
function DrawerFooter({ className, ...props }) {
|
|
67
|
+
return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className), ...props }));
|
|
68
|
+
}
|
|
69
|
+
function DrawerTitle({ className, ...props }) {
|
|
70
|
+
return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-heading text-base font-medium text-foreground", className), ...props }));
|
|
71
|
+
}
|
|
72
|
+
function DrawerDescription({ className, ...props }) {
|
|
73
|
+
return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-balance text-muted-foreground", className), ...props }));
|
|
74
|
+
}
|
|
75
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
3
|
+
declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
|
|
4
|
+
declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
|
|
5
|
+
declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
|
|
6
|
+
declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
|
|
7
|
+
declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
|
|
8
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
|
|
9
|
+
inset?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
|
|
12
|
+
inset?: boolean;
|
|
13
|
+
variant?: "default" | "destructive";
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
|
|
16
|
+
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
|
|
17
|
+
inset?: boolean;
|
|
18
|
+
}): React.JSX.Element;
|
|
19
|
+
declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
|
|
20
|
+
declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
}): React.JSX.Element;
|
|
23
|
+
declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
|
|
24
|
+
declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
|
|
25
|
+
inset?: boolean;
|
|
26
|
+
}): React.JSX.Element;
|
|
27
|
+
declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
|
|
28
|
+
declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
29
|
+
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
4
|
+
import { cn } from "../../lib/utils.js";
|
|
5
|
+
import { ChevronRightIcon, CheckIcon } from "lucide-react";
|
|
6
|
+
function DropdownMenu({ ...props }) {
|
|
7
|
+
return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
|
|
8
|
+
}
|
|
9
|
+
function DropdownMenuPortal({ ...props }) {
|
|
10
|
+
return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
|
|
11
|
+
}
|
|
12
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
13
|
+
return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
14
|
+
}
|
|
15
|
+
function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
|
|
16
|
+
return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
17
|
+
}
|
|
18
|
+
function DropdownMenuGroup({ ...props }) {
|
|
19
|
+
return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
20
|
+
}
|
|
21
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
22
|
+
return (_jsx(MenuPrimitive.Group, { children: _jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }) }));
|
|
23
|
+
}
|
|
24
|
+
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
25
|
+
return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
|
|
26
|
+
}
|
|
27
|
+
function DropdownMenuSub({ ...props }) {
|
|
28
|
+
return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
|
|
29
|
+
}
|
|
30
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
31
|
+
return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
|
|
32
|
+
}
|
|
33
|
+
function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
|
|
34
|
+
return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
|
|
35
|
+
}
|
|
36
|
+
function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
37
|
+
return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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 right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
38
|
+
}
|
|
39
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
40
|
+
return (_jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
|
|
41
|
+
}
|
|
42
|
+
function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
43
|
+
return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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 right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
44
|
+
}
|
|
45
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
46
|
+
return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
47
|
+
}
|
|
48
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
49
|
+
return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
|
|
50
|
+
}
|
|
51
|
+
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
3
|
+
declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
4
|
+
declare const emptyMediaVariants: (props?: ({
|
|
5
|
+
variant?: "default" | "icon" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
|
|
8
|
+
declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
9
|
+
declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
|
|
10
|
+
declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
11
|
+
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
function Empty({ className, ...props }) {
|
|
5
|
+
return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className), ...props }));
|
|
6
|
+
}
|
|
7
|
+
function EmptyHeader({ className, ...props }) {
|
|
8
|
+
return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2", className), ...props }));
|
|
9
|
+
}
|
|
10
|
+
const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "bg-transparent",
|
|
14
|
+
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
variant: "default",
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
function EmptyMedia({ className, variant = "default", ...props }) {
|
|
22
|
+
return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
|
|
23
|
+
}
|
|
24
|
+
function EmptyTitle({ className, ...props }) {
|
|
25
|
+
return (_jsx("div", { "data-slot": "empty-title", className: cn("font-heading text-sm font-medium tracking-tight", className), ...props }));
|
|
26
|
+
}
|
|
27
|
+
function EmptyDescription({ className, ...props }) {
|
|
28
|
+
return (_jsx("div", { "data-slot": "empty-description", className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
function EmptyContent({ className, ...props }) {
|
|
31
|
+
return (_jsx("div", { "data-slot": "empty-content", className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className), ...props }));
|
|
32
|
+
}
|
|
33
|
+
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import { Label } from "../../components/ui/label.js";
|
|
3
|
+
declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
|
|
4
|
+
declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
|
|
5
|
+
variant?: "legend" | "label";
|
|
6
|
+
}): import("react").JSX.Element;
|
|
7
|
+
declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
8
|
+
declare const fieldVariants: (props?: ({
|
|
9
|
+
orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
|
|
10
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
+
declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
|
|
12
|
+
declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
13
|
+
declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
|
|
14
|
+
declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
|
|
15
|
+
declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
|
|
16
|
+
declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
}): import("react").JSX.Element;
|
|
19
|
+
declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
|
|
20
|
+
errors?: Array<{
|
|
21
|
+
message?: string;
|
|
22
|
+
} | undefined>;
|
|
23
|
+
}): import("react").JSX.Element | null;
|
|
24
|
+
export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "../../lib/utils.js";
|
|
6
|
+
import { Label } from "../../components/ui/label.js";
|
|
7
|
+
import { Separator } from "../../components/ui/separator.js";
|
|
8
|
+
function FieldSet({ className, ...props }) {
|
|
9
|
+
return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
12
|
+
return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), ...props }));
|
|
13
|
+
}
|
|
14
|
+
function FieldGroup({ className, ...props }) {
|
|
15
|
+
return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
|
|
16
|
+
}
|
|
17
|
+
const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
|
|
18
|
+
variants: {
|
|
19
|
+
orientation: {
|
|
20
|
+
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
|
21
|
+
horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
22
|
+
responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
orientation: "vertical",
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
function Field({ className, orientation = "vertical", ...props }) {
|
|
30
|
+
return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
|
|
31
|
+
}
|
|
32
|
+
function FieldContent({ className, ...props }) {
|
|
33
|
+
return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className), ...props }));
|
|
34
|
+
}
|
|
35
|
+
function FieldLabel({ className, ...props }) {
|
|
36
|
+
return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
|
|
37
|
+
}
|
|
38
|
+
function FieldTitle({ className, ...props }) {
|
|
39
|
+
return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
|
|
40
|
+
}
|
|
41
|
+
function FieldDescription({ className, ...props }) {
|
|
42
|
+
return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
|
|
43
|
+
}
|
|
44
|
+
function FieldSeparator({ children, className, ...props }) {
|
|
45
|
+
return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
|
|
46
|
+
}
|
|
47
|
+
function FieldError({ className, children, errors, ...props }) {
|
|
48
|
+
const content = useMemo(() => {
|
|
49
|
+
if (children) {
|
|
50
|
+
return children;
|
|
51
|
+
}
|
|
52
|
+
if (!errors?.length) {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
const uniqueErrors = [
|
|
56
|
+
...new Map(errors.map((error) => [error?.message, error])).values(),
|
|
57
|
+
];
|
|
58
|
+
if (uniqueErrors?.length == 1) {
|
|
59
|
+
return uniqueErrors[0]?.message;
|
|
60
|
+
}
|
|
61
|
+
return (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
|
|
62
|
+
}, [children, errors]);
|
|
63
|
+
if (!content) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
|
|
67
|
+
}
|
|
68
|
+
export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
|
|
2
|
+
declare function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props): import("react").JSX.Element;
|
|
3
|
+
declare function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props): import("react").JSX.Element;
|
|
4
|
+
declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
|
|
5
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
|
|
4
|
+
import { cn } from "../../lib/utils.js";
|
|
5
|
+
function HoverCard({ ...props }) {
|
|
6
|
+
return _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
|
|
7
|
+
}
|
|
8
|
+
function HoverCardTrigger({ ...props }) {
|
|
9
|
+
return (_jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props }));
|
|
10
|
+
}
|
|
11
|
+
function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
|
|
12
|
+
return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
13
|
+
}
|
|
14
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { Button } from "../../components/ui/button.js";
|
|
4
|
+
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
5
|
+
declare const inputGroupAddonVariants: (props?: ({
|
|
6
|
+
align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
|
|
9
|
+
declare const inputGroupButtonVariants: (props?: ({
|
|
10
|
+
size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
|
|
13
|
+
type?: "button" | "submit" | "reset";
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
16
|
+
declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
|
|
17
|
+
declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
|
|
18
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "../../lib/utils.js";
|
|
5
|
+
import { Button } from "../../components/ui/button.js";
|
|
6
|
+
import { Input } from "../../components/ui/input.js";
|
|
7
|
+
import { Textarea } from "../../components/ui/textarea.js";
|
|
8
|
+
function InputGroup({ className, ...props }) {
|
|
9
|
+
return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
|
|
12
|
+
variants: {
|
|
13
|
+
align: {
|
|
14
|
+
"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
|
15
|
+
"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
|
16
|
+
"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
|
17
|
+
"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
defaultVariants: {
|
|
21
|
+
align: "inline-start",
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
function InputGroupAddon({ className, align = "inline-start", ...props }) {
|
|
25
|
+
return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
|
|
26
|
+
if (e.target.closest("button")) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
e.currentTarget.parentElement?.querySelector("input")?.focus();
|
|
30
|
+
}, ...props }));
|
|
31
|
+
}
|
|
32
|
+
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
|
|
33
|
+
variants: {
|
|
34
|
+
size: {
|
|
35
|
+
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
36
|
+
sm: "",
|
|
37
|
+
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
|
38
|
+
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
defaultVariants: {
|
|
42
|
+
size: "xs",
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
|
|
46
|
+
return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
|
|
47
|
+
}
|
|
48
|
+
function InputGroupText({ className, ...props }) {
|
|
49
|
+
return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
50
|
+
}
|
|
51
|
+
function InputGroupInput({ className, ...props }) {
|
|
52
|
+
return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
|
|
53
|
+
}
|
|
54
|
+
function InputGroupTextarea({ className, ...props }) {
|
|
55
|
+
return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
|
|
56
|
+
}
|
|
57
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
|