@nadicodeai/ui 0.4.1 → 0.5.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/AGENTS.md +1 -1
- package/README.md +2 -2
- package/dist/components/accordion.d.ts +4 -15
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js +5 -31
- package/dist/components/agent-message.js +1 -1
- package/dist/components/agent-tool-approval.d.ts.map +1 -1
- package/dist/components/agent-tool-approval.js +9 -6
- package/dist/components/ai-elements/artifact.js +1 -1
- package/dist/components/ai-elements/attachments.d.ts +1 -1
- package/dist/components/ai-elements/attachments.d.ts.map +1 -1
- package/dist/components/ai-elements/attachments.js +2 -2
- package/dist/components/ai-elements/audio-player.d.ts.map +1 -1
- package/dist/components/ai-elements/audio-player.js +8 -8
- package/dist/components/ai-elements/chain-of-thought.js +1 -1
- package/dist/components/ai-elements/checkpoint.d.ts +1 -1
- package/dist/components/ai-elements/checkpoint.d.ts.map +1 -1
- package/dist/components/ai-elements/checkpoint.js +1 -1
- package/dist/components/ai-elements/commit.d.ts.map +1 -1
- package/dist/components/ai-elements/commit.js +1 -1
- package/dist/components/ai-elements/context.d.ts +4 -4
- package/dist/components/ai-elements/context.d.ts.map +1 -1
- package/dist/components/ai-elements/context.js +4 -3
- package/dist/components/ai-elements/file-tree.d.ts.map +1 -1
- package/dist/components/ai-elements/file-tree.js +1 -1
- package/dist/components/ai-elements/inline-citation.d.ts.map +1 -1
- package/dist/components/ai-elements/inline-citation.js +2 -2
- package/dist/components/ai-elements/message.js +1 -1
- package/dist/components/ai-elements/mic-selector.d.ts.map +1 -1
- package/dist/components/ai-elements/mic-selector.js +1 -1
- package/dist/components/ai-elements/model-selector.d.ts +1 -1
- package/dist/components/ai-elements/model-selector.d.ts.map +1 -1
- package/dist/components/ai-elements/model-selector.js +1 -1
- package/dist/components/ai-elements/open-in-chat.d.ts.map +1 -1
- package/dist/components/ai-elements/open-in-chat.js +8 -5
- package/dist/components/ai-elements/plan.d.ts.map +1 -1
- package/dist/components/ai-elements/plan.js +3 -3
- package/dist/components/ai-elements/prompt-input.d.ts +2 -2
- package/dist/components/ai-elements/prompt-input.d.ts.map +1 -1
- package/dist/components/ai-elements/prompt-input.js +12 -12
- package/dist/components/ai-elements/queue.d.ts.map +1 -1
- package/dist/components/ai-elements/queue.js +2 -2
- package/dist/components/ai-elements/reasoning.js +1 -1
- package/dist/components/ai-elements/sandbox.js +3 -3
- package/dist/components/ai-elements/schema-display.js +4 -4
- package/dist/components/ai-elements/sources.js +1 -1
- package/dist/components/ai-elements/stack-trace.d.ts.map +1 -1
- package/dist/components/ai-elements/stack-trace.js +2 -2
- package/dist/components/ai-elements/task.d.ts.map +1 -1
- package/dist/components/ai-elements/task.js +3 -3
- package/dist/components/ai-elements/test-results.js +1 -1
- package/dist/components/ai-elements/tool.js +2 -2
- package/dist/components/ai-elements/voice-selector.d.ts +1 -1
- package/dist/components/ai-elements/voice-selector.d.ts.map +1 -1
- package/dist/components/ai-elements/voice-selector.js +1 -1
- package/dist/components/ai-elements/web-preview.d.ts.map +1 -1
- package/dist/components/ai-elements/web-preview.js +2 -2
- package/dist/components/alert-dialog.d.ts +1 -2
- package/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +2 -3
- package/dist/components/alert.d.ts +2 -1
- package/dist/components/alert.d.ts.map +1 -1
- package/dist/components/alert.js +8 -5
- package/dist/components/aspect-ratio.d.ts.map +1 -1
- package/dist/components/aspect-ratio.js +0 -1
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +0 -1
- package/dist/components/badge.d.ts +2 -4
- package/dist/components/badge.d.ts.map +1 -1
- package/dist/components/badge.js +21 -13
- package/dist/components/breadcrumb.d.ts +3 -4
- package/dist/components/breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb.js +20 -12
- package/dist/components/button-group.d.ts +2 -3
- package/dist/components/button-group.d.ts.map +1 -1
- package/dist/components/button-group.js +17 -9
- package/dist/components/button.d.ts +1 -5
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +2 -8
- package/dist/components/calendar.d.ts +5 -3
- package/dist/components/calendar.d.ts.map +1 -1
- package/dist/components/calendar.js +17 -17
- package/dist/components/card.d.ts +3 -1
- package/dist/components/card.d.ts.map +1 -1
- package/dist/components/card.js +6 -6
- package/dist/components/carousel.d.ts +10 -1
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/carousel.js +10 -10
- package/dist/components/chart.d.ts.map +1 -1
- package/dist/components/chart.js +2 -3
- package/dist/components/collapsible.d.ts +3 -7
- package/dist/components/collapsible.d.ts.map +1 -1
- package/dist/components/collapsible.js +5 -16
- package/dist/components/combobox.d.ts +1 -1
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +10 -11
- package/dist/components/command.d.ts.map +1 -1
- package/dist/components/command.js +1 -1
- package/dist/components/context-menu.d.ts +4 -9
- package/dist/components/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu.js +6 -16
- package/dist/components/dialog.d.ts +2 -3
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +2 -4
- package/dist/components/direction.d.ts +1 -8
- package/dist/components/direction.d.ts.map +1 -1
- package/dist/components/direction.js +1 -7
- package/dist/components/drawer.d.ts +4 -13
- package/dist/components/drawer.d.ts.map +1 -1
- package/dist/components/drawer.js +5 -22
- package/dist/components/dropdown-menu.d.ts +4 -9
- package/dist/components/dropdown-menu.d.ts.map +1 -1
- package/dist/components/dropdown-menu.js +6 -17
- package/dist/components/empty.d.ts.map +1 -1
- package/dist/components/empty.js +5 -5
- package/dist/components/field.d.ts.map +1 -1
- package/dist/components/field.js +11 -19
- package/dist/components/form.d.ts +2 -2
- package/dist/components/form.d.ts.map +1 -1
- package/dist/components/form.js +17 -5
- package/dist/components/hover-card.d.ts +3 -8
- package/dist/components/hover-card.d.ts.map +1 -1
- package/dist/components/hover-card.js +4 -9
- package/dist/components/input-group.d.ts +3 -1
- package/dist/components/input-group.d.ts.map +1 -1
- package/dist/components/input-group.js +10 -16
- package/dist/components/input-otp.d.ts.map +1 -1
- package/dist/components/input-otp.js +5 -5
- package/dist/components/input.d.ts.map +1 -1
- package/dist/components/input.js +2 -1
- package/dist/components/item.d.ts +3 -4
- package/dist/components/item.d.ts.map +1 -1
- package/dist/components/item.js +29 -18
- package/dist/components/kbd.d.ts.map +1 -1
- package/dist/components/kbd.js +1 -1
- package/dist/components/menubar.d.ts.map +1 -1
- package/dist/components/menubar.js +4 -1
- package/dist/components/native-select.d.ts +3 -2
- package/dist/components/native-select.d.ts.map +1 -1
- package/dist/components/native-select.js +2 -2
- package/dist/components/navigation-menu.d.ts +2 -9
- package/dist/components/navigation-menu.d.ts.map +1 -1
- package/dist/components/navigation-menu.js +4 -8
- package/dist/components/pagination.d.ts +8 -4
- package/dist/components/pagination.d.ts.map +1 -1
- package/dist/components/pagination.js +10 -13
- package/dist/components/popover.d.ts +3 -7
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +5 -30
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +0 -1
- package/dist/components/resizable.d.ts.map +1 -1
- package/dist/components/resizable.js +2 -2
- package/dist/components/scroll-area.d.ts.map +1 -1
- package/dist/components/scroll-area.js +0 -1
- package/dist/components/separator.d.ts.map +1 -1
- package/dist/components/separator.js +0 -1
- package/dist/components/sheet.d.ts +2 -3
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +2 -3
- package/dist/components/sidebar.d.ts +9 -15
- package/dist/components/sidebar.d.ts.map +1 -1
- package/dist/components/sidebar.js +85 -41
- package/dist/components/skeleton.js +1 -1
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js +3 -8
- package/dist/components/sonner.d.ts +1 -1
- package/dist/components/sonner.d.ts.map +1 -1
- package/dist/components/sonner.js +15 -9
- package/dist/components/spinner.d.ts.map +1 -1
- package/dist/components/spinner.js +2 -2
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +0 -1
- package/dist/components/table.js +2 -2
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +0 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/theme-mode-switcher.js +4 -3
- package/dist/components/toggle-group.d.ts +3 -9
- package/dist/components/toggle-group.d.ts.map +1 -1
- package/dist/components/toggle-group.js +5 -22
- package/dist/components/toggle.d.ts +1 -2
- package/dist/components/toggle.d.ts.map +1 -1
- package/dist/components/toggle.js +2 -3
- package/dist/components/tooltip.d.ts +2 -5
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +4 -6
- package/dist/hooks/use-mobile.d.ts.map +1 -1
- package/dist/hooks/use-mobile.js +0 -1
- package/docs/migration/base-ui-migration.md +33 -9
- package/package.json +3 -2
- package/dist/lib/base-render.d.ts +0 -14
- package/dist/lib/base-render.d.ts.map +0 -1
- package/dist/lib/base-render.js +0 -16
- package/dist/lib/slot.d.ts +0 -8
- package/dist/lib/slot.d.ts.map +0 -1
- package/dist/lib/slot.js +0 -17
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
5
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
4
6
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { PanelLeftIcon } from "lucide-react";
|
|
6
|
-
import { Slot } from "../lib/slot.js";
|
|
7
7
|
import { useIsMobile } from "../hooks/use-mobile.js";
|
|
8
8
|
import { cn } from "../lib/utils.js";
|
|
9
9
|
import { Button } from "./button.js";
|
|
@@ -12,6 +12,7 @@ import { Separator } from "./separator.js";
|
|
|
12
12
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "./sheet.js";
|
|
13
13
|
import { Skeleton } from "./skeleton.js";
|
|
14
14
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip.js";
|
|
15
|
+
import { PanelLeftIcon } from "lucide-react";
|
|
15
16
|
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
16
17
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
17
18
|
const SIDEBAR_WIDTH = "16rem";
|
|
@@ -72,45 +73,43 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
|
|
|
72
73
|
setOpenMobile,
|
|
73
74
|
toggleSidebar,
|
|
74
75
|
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
|
|
75
|
-
return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, {
|
|
76
|
+
return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delay: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
|
|
76
77
|
"--sidebar-width": SIDEBAR_WIDTH,
|
|
77
78
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
78
79
|
...style,
|
|
79
80
|
}, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
|
|
80
81
|
}
|
|
81
|
-
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
|
|
82
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) {
|
|
82
83
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
83
84
|
if (collapsible === "none") {
|
|
84
85
|
return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
|
|
85
86
|
}
|
|
86
87
|
if (isMobile) {
|
|
87
|
-
return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
|
|
88
|
+
return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
|
|
88
89
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
|
89
90
|
}, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
|
|
90
91
|
}
|
|
91
92
|
return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
|
|
92
93
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
|
93
|
-
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
94
|
-
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
95
|
-
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
94
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", "data-side": side, className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
|
|
96
95
|
// Adjust the padding for floating and inset variants.
|
|
97
96
|
variant === "floating" || variant === "inset"
|
|
98
97
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
|
99
|
-
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex
|
|
98
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border", children: children }) })] }));
|
|
100
99
|
}
|
|
101
100
|
function SidebarTrigger({ className, onClick, ...props }) {
|
|
102
101
|
const { toggleSidebar } = useSidebar();
|
|
103
|
-
return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon", className: cn(
|
|
102
|
+
return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), onClick: (event) => {
|
|
104
103
|
onClick?.(event);
|
|
105
104
|
toggleSidebar();
|
|
106
105
|
}, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
|
|
107
106
|
}
|
|
108
107
|
function SidebarRail({ className, ...props }) {
|
|
109
108
|
const { toggleSidebar } = useSidebar();
|
|
110
|
-
return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("absolute inset-y-0 z-20 hidden w-4
|
|
109
|
+
return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className), ...props }));
|
|
111
110
|
}
|
|
112
111
|
function SidebarInset({ className, ...props }) {
|
|
113
|
-
return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full flex-1 flex-col bg-background
|
|
112
|
+
return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
|
|
114
113
|
}
|
|
115
114
|
function SidebarInput({ className, ...props }) {
|
|
116
115
|
return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));
|
|
@@ -125,31 +124,47 @@ function SidebarSeparator({ className, ...props }) {
|
|
|
125
124
|
return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("mx-2 w-auto bg-sidebar-border", className), ...props }));
|
|
126
125
|
}
|
|
127
126
|
function SidebarContent({ className, ...props }) {
|
|
128
|
-
return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("flex min-h-0 flex-1 flex-col gap-
|
|
127
|
+
return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
|
|
129
128
|
}
|
|
130
129
|
function SidebarGroup({ className, ...props }) {
|
|
131
130
|
return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
|
|
132
131
|
}
|
|
133
|
-
function SidebarGroupLabel({ className,
|
|
134
|
-
|
|
135
|
-
|
|
132
|
+
function SidebarGroupLabel({ className, render, ...props }) {
|
|
133
|
+
return useRender({
|
|
134
|
+
defaultTagName: "div",
|
|
135
|
+
props: mergeProps({
|
|
136
|
+
className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className),
|
|
137
|
+
}, props),
|
|
138
|
+
render,
|
|
139
|
+
state: {
|
|
140
|
+
slot: "sidebar-group-label",
|
|
141
|
+
sidebar: "group-label",
|
|
142
|
+
},
|
|
143
|
+
});
|
|
136
144
|
}
|
|
137
|
-
function SidebarGroupAction({ className,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
145
|
+
function SidebarGroupAction({ className, render, ...props }) {
|
|
146
|
+
return useRender({
|
|
147
|
+
defaultTagName: "button",
|
|
148
|
+
props: mergeProps({
|
|
149
|
+
className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
|
|
150
|
+
}, props),
|
|
151
|
+
render,
|
|
152
|
+
state: {
|
|
153
|
+
slot: "sidebar-group-action",
|
|
154
|
+
sidebar: "group-action",
|
|
155
|
+
},
|
|
156
|
+
});
|
|
142
157
|
}
|
|
143
158
|
function SidebarGroupContent({ className, ...props }) {
|
|
144
159
|
return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));
|
|
145
160
|
}
|
|
146
161
|
function SidebarMenu({ className, ...props }) {
|
|
147
|
-
return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-
|
|
162
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-0", className), ...props }));
|
|
148
163
|
}
|
|
149
164
|
function SidebarMenuItem({ className, ...props }) {
|
|
150
165
|
return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
|
|
151
166
|
}
|
|
152
|
-
const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-
|
|
167
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
|
|
153
168
|
variants: {
|
|
154
169
|
variant: {
|
|
155
170
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
@@ -166,47 +181,76 @@ const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center
|
|
|
166
181
|
size: "default",
|
|
167
182
|
},
|
|
168
183
|
});
|
|
169
|
-
function SidebarMenuButton({
|
|
170
|
-
const Comp = asChild ? Slot.Root : "button";
|
|
184
|
+
function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
|
|
171
185
|
const { isMobile, state } = useSidebar();
|
|
172
|
-
const
|
|
186
|
+
const comp = useRender({
|
|
187
|
+
defaultTagName: "button",
|
|
188
|
+
props: mergeProps({
|
|
189
|
+
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
190
|
+
}, props),
|
|
191
|
+
render: !tooltip ? render : _jsx(TooltipTrigger, { render: render }),
|
|
192
|
+
state: {
|
|
193
|
+
slot: "sidebar-menu-button",
|
|
194
|
+
sidebar: "menu-button",
|
|
195
|
+
size,
|
|
196
|
+
active: isActive,
|
|
197
|
+
},
|
|
198
|
+
});
|
|
173
199
|
if (!tooltip) {
|
|
174
|
-
return
|
|
200
|
+
return comp;
|
|
175
201
|
}
|
|
176
202
|
if (typeof tooltip === "string") {
|
|
177
203
|
tooltip = {
|
|
178
204
|
children: tooltip,
|
|
179
205
|
};
|
|
180
206
|
}
|
|
181
|
-
return (_jsxs(Tooltip, { children: [
|
|
207
|
+
return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })] }));
|
|
182
208
|
}
|
|
183
|
-
function SidebarMenuAction({ className,
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
209
|
+
function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
|
|
210
|
+
return useRender({
|
|
211
|
+
defaultTagName: "button",
|
|
212
|
+
props: mergeProps({
|
|
213
|
+
className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover &&
|
|
214
|
+
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
|
|
215
|
+
}, props),
|
|
216
|
+
render,
|
|
217
|
+
state: {
|
|
218
|
+
slot: "sidebar-menu-action",
|
|
219
|
+
sidebar: "menu-action",
|
|
220
|
+
},
|
|
221
|
+
});
|
|
189
222
|
}
|
|
190
223
|
function SidebarMenuBadge({ className, ...props }) {
|
|
191
|
-
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none
|
|
224
|
+
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className), ...props }));
|
|
192
225
|
}
|
|
193
226
|
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
194
227
|
// Random width between 50 to 90%.
|
|
195
|
-
const width = React.
|
|
228
|
+
const [width] = React.useState(() => {
|
|
196
229
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
197
|
-
}
|
|
230
|
+
});
|
|
198
231
|
return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), ...props, children: [showIcon && (_jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
|
|
199
232
|
"--skeleton-width": width,
|
|
200
233
|
} })] }));
|
|
201
234
|
}
|
|
202
235
|
function SidebarMenuSub({ className, ...props }) {
|
|
203
|
-
return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5
|
|
236
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
204
237
|
}
|
|
205
238
|
function SidebarMenuSubItem({ className, ...props }) {
|
|
206
239
|
return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
|
|
207
240
|
}
|
|
208
|
-
function SidebarMenuSubButton({
|
|
209
|
-
|
|
210
|
-
|
|
241
|
+
function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
|
|
242
|
+
return useRender({
|
|
243
|
+
defaultTagName: "a",
|
|
244
|
+
props: mergeProps({
|
|
245
|
+
className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
|
|
246
|
+
}, props),
|
|
247
|
+
render,
|
|
248
|
+
state: {
|
|
249
|
+
slot: "sidebar-menu-sub-button",
|
|
250
|
+
sidebar: "menu-sub-button",
|
|
251
|
+
size,
|
|
252
|
+
active: isActive,
|
|
253
|
+
},
|
|
254
|
+
});
|
|
211
255
|
}
|
|
212
256
|
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
3
|
function Skeleton({ className, ...props }) {
|
|
4
|
-
return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-
|
|
4
|
+
return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-muted", className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
export { Skeleton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAIjE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,+BAsC5B;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
|
@@ -1,17 +1,12 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
2
|
import { Slider as SliderPrimitive } from "@base-ui/react/slider";
|
|
4
3
|
import { cn } from "../lib/utils.js";
|
|
5
4
|
function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
|
|
6
5
|
const _values = Array.isArray(value)
|
|
7
6
|
? value
|
|
8
|
-
:
|
|
9
|
-
?
|
|
10
|
-
:
|
|
11
|
-
? defaultValue
|
|
12
|
-
: typeof defaultValue === "number"
|
|
13
|
-
? [defaultValue]
|
|
14
|
-
: [min];
|
|
7
|
+
: Array.isArray(defaultValue)
|
|
8
|
+
? defaultValue
|
|
9
|
+
: [min, max];
|
|
15
10
|
return (_jsx(SliderPrimitive.Root, { className: cn("data-horizontal:w-full data-vertical:h-full", className), "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", ...props, children: _jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-ring bg-background ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }, index)))] }) }));
|
|
16
11
|
}
|
|
17
12
|
export { Slider };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type ToasterProps } from "sonner";
|
|
2
|
-
declare const Toaster: ({
|
|
2
|
+
declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
|
|
3
3
|
export { Toaster };
|
|
4
4
|
//# sourceMappingURL=sonner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AAG7D,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,gCAwC1C,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useTheme } from "next-themes";
|
|
4
4
|
import { Toaster as Sonner } from "sonner";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react";
|
|
6
|
+
const Toaster = ({ ...props }) => {
|
|
7
|
+
const { theme = "system" } = useTheme();
|
|
8
|
+
return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
|
|
9
|
+
success: (_jsx(CircleCheckIcon, { className: "size-4" })),
|
|
10
|
+
info: (_jsx(InfoIcon, { className: "size-4" })),
|
|
11
|
+
warning: (_jsx(TriangleAlertIcon, { className: "size-4" })),
|
|
12
|
+
error: (_jsx(OctagonXIcon, { className: "size-4" })),
|
|
13
|
+
loading: (_jsx(Loader2Icon, { className: "size-4 animate-spin" })),
|
|
12
14
|
}, style: {
|
|
13
15
|
"--normal-bg": "var(--popover)",
|
|
14
16
|
"--normal-text": "var(--popover-foreground)",
|
|
15
17
|
"--normal-border": "var(--border)",
|
|
16
18
|
"--border-radius": "var(--radius)",
|
|
17
|
-
},
|
|
19
|
+
}, toastOptions: {
|
|
20
|
+
classNames: {
|
|
21
|
+
toast: "cn-toast",
|
|
22
|
+
},
|
|
23
|
+
}, ...props }));
|
|
18
24
|
};
|
|
19
25
|
export { Toaster };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/components/spinner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/components/spinner.tsx"],"names":[],"mappings":"AAGA,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAIpE;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Loader2Icon } from "lucide-react";
|
|
3
2
|
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { Loader2Icon } from "lucide-react";
|
|
4
4
|
function Spinner({ className, ...props }) {
|
|
5
|
-
return (_jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props }));
|
|
5
|
+
return (_jsx(Loader2Icon, { "data-slot": "spinner", role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props }));
|
|
6
6
|
}
|
|
7
7
|
export { Spinner };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAIjE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,+BAiBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
package/dist/components/table.js
CHANGED
|
@@ -17,10 +17,10 @@ function TableRow({ className, ...props }) {
|
|
|
17
17
|
return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
|
|
18
18
|
}
|
|
19
19
|
function TableHead({ className, ...props }) {
|
|
20
|
-
return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0
|
|
20
|
+
return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
|
|
21
21
|
}
|
|
22
22
|
function TableCell({ className, ...props }) {
|
|
23
|
-
return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0
|
|
23
|
+
return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));
|
|
24
24
|
}
|
|
25
25
|
function TableCaption({ className, ...props }) {
|
|
26
26
|
return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,+BAa1B;AAED,QAAA,MAAM,gBAAgB;;8EAarB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,+BASlE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,KAAK,+BAcpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,+BAQtE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
3
|
function Textarea({ className, ...props }) {
|
|
4
|
-
return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-
|
|
4
|
+
return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm", className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
export { Textarea };
|
|
@@ -12,10 +12,11 @@ const themeModeIcons = {
|
|
|
12
12
|
};
|
|
13
13
|
function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, value, ...props }) {
|
|
14
14
|
return (_jsx(ToggleGroup, { "aria-label": ariaLabel, className: cn("max-w-full", className), disabled: disabled, onValueChange: (nextValue) => {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
const nextMode = nextValue[0];
|
|
16
|
+
if (isThemeMode(nextMode)) {
|
|
17
|
+
onValueChange(nextMode);
|
|
17
18
|
}
|
|
18
|
-
},
|
|
19
|
+
}, value: [value], variant: "outline", ...props, children: themeModes.map((mode) => {
|
|
19
20
|
const Icon = themeModeIcons[mode];
|
|
20
21
|
const label = labels[mode];
|
|
21
22
|
return (_jsxs(ToggleGroupItem, { "aria-label": label, className: cn("min-w-0 gap-1.5 px-2.5", compact ? "h-8 text-xs" : "h-9", itemClassName), disabled: disabled, value: mode, children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4", "data-icon": true }), _jsx("span", { className: "min-w-0 truncate", children: label })] }, mode));
|
|
@@ -3,16 +3,10 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
|
3
3
|
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
|
|
4
4
|
import { type VariantProps } from "class-variance-authority";
|
|
5
5
|
import { toggleVariants } from "./toggle";
|
|
6
|
-
|
|
7
|
-
type ToggleGroupCompatibilityProps = Omit<ToggleGroupPrimitive.Props<string>, "defaultValue" | "multiple" | "onValueChange" | "value"> & VariantProps<typeof toggleVariants> & {
|
|
8
|
-
defaultValue?: ToggleGroupCompatibilityValue;
|
|
9
|
-
multiple?: boolean;
|
|
10
|
-
onValueChange?: (value: string | string[]) => void;
|
|
6
|
+
declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
|
|
11
7
|
spacing?: number;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
declare function ToggleGroup({ className, defaultValue, multiple, onValueChange, variant, size, spacing, style, type, value, orientation, children, ...props }: ToggleGroupCompatibilityProps): React.JSX.Element;
|
|
8
|
+
orientation?: "horizontal" | "vertical";
|
|
9
|
+
}): React.JSX.Element;
|
|
16
10
|
declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
|
|
17
11
|
export { ToggleGroup, ToggleGroupItem };
|
|
18
12
|
//# sourceMappingURL=toggle-group.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AACjF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAcpD,
|
|
1
|
+
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AACjF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAcpD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,GAC3B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CACxC,qBA4BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsB7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -11,28 +11,11 @@ const ToggleGroupContext = React.createContext({
|
|
|
11
11
|
spacing: 2,
|
|
12
12
|
orientation: "horizontal",
|
|
13
13
|
});
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
return value;
|
|
20
|
-
}
|
|
21
|
-
return value === "" ? [] : [value];
|
|
22
|
-
}
|
|
23
|
-
function ToggleGroup({ className, defaultValue, multiple, onValueChange, variant, size, spacing = 2, style, type, value, orientation = "horizontal", children, ...props }) {
|
|
24
|
-
const isMultiple = multiple ?? type === "multiple";
|
|
25
|
-
const baseDefaultValue = React.useMemo(() => toBaseValue(defaultValue), [defaultValue]);
|
|
26
|
-
const baseValue = React.useMemo(() => toBaseValue(value), [value]);
|
|
27
|
-
const handleValueChange = React.useCallback((nextValue) => {
|
|
28
|
-
onValueChange?.(isMultiple ? nextValue : (nextValue[0] ?? ""));
|
|
29
|
-
}, [isMultiple, onValueChange]);
|
|
30
|
-
const groupStyle = React.useMemo(() => ({
|
|
31
|
-
...style,
|
|
32
|
-
"--gap": spacing,
|
|
33
|
-
}), [spacing, style]);
|
|
34
|
-
const contextValue = React.useMemo(() => ({ variant, size, spacing, orientation }), [orientation, size, spacing, variant]);
|
|
35
|
-
return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, defaultValue: baseDefaultValue, multiple: isMultiple, onValueChange: handleValueChange, orientation: orientation, style: groupStyle, value: baseValue, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: contextValue, children: children }) }));
|
|
14
|
+
function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", style, children, ...props }) {
|
|
15
|
+
return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, orientation: orientation, style: {
|
|
16
|
+
...style,
|
|
17
|
+
"--gap": spacing,
|
|
18
|
+
}, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));
|
|
36
19
|
}
|
|
37
20
|
function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
|
|
38
21
|
const context = React.useContext(ToggleGroupContext);
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
|
-
import { type WithAsChild } from "../lib/base-render";
|
|
4
3
|
declare const toggleVariants: (props?: ({
|
|
5
4
|
variant?: "default" | "outline" | null | undefined;
|
|
6
5
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
7
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
-
declare function Toggle({ className, variant, size,
|
|
7
|
+
declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
|
|
9
8
|
export { Toggle, toggleVariants };
|
|
10
9
|
//# sourceMappingURL=toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { withAsChildRender } from "../lib/base-render.js";
|
|
6
5
|
import { cn } from "../lib/utils.js";
|
|
7
6
|
const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
8
7
|
variants: {
|
|
@@ -21,7 +20,7 @@ const toggleVariants = cva("group/toggle inline-flex items-center justify-center
|
|
|
21
20
|
size: "default",
|
|
22
21
|
},
|
|
23
22
|
});
|
|
24
|
-
function Toggle({ className, variant = "default", size = "default",
|
|
25
|
-
return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...
|
|
23
|
+
function Toggle({ className, variant = "default", size = "default", ...props }) {
|
|
24
|
+
return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
|
|
26
25
|
}
|
|
27
26
|
export { Toggle, toggleVariants };
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
2
|
-
|
|
3
|
-
declare function TooltipProvider({ delay, delayDuration, ...props }: TooltipPrimitive.Provider.Props & {
|
|
4
|
-
delayDuration?: TooltipPrimitive.Provider.Props["delay"];
|
|
5
|
-
}): import("react").JSX.Element;
|
|
2
|
+
declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
|
|
6
3
|
declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
|
|
7
|
-
declare function TooltipTrigger({ ...props }:
|
|
4
|
+
declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
|
|
8
5
|
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
|
|
9
6
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
10
7
|
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAIpE,iBAAS,eAAe,CAAC,EACvB,KAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAQjC;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAChD,+BAwBF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
2
|
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
4
|
-
import { withAsChildRender } from "../lib/base-render.js";
|
|
5
3
|
import { cn } from "../lib/utils.js";
|
|
6
|
-
function TooltipProvider({ delay = 0,
|
|
7
|
-
return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay:
|
|
4
|
+
function TooltipProvider({ delay = 0, ...props }) {
|
|
5
|
+
return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
|
|
8
6
|
}
|
|
9
7
|
function Tooltip({ ...props }) {
|
|
10
8
|
return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
|
|
11
9
|
}
|
|
12
10
|
function TooltipTrigger({ ...props }) {
|
|
13
|
-
return
|
|
11
|
+
return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
14
12
|
}
|
|
15
13
|
function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
|
|
16
|
-
return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-
|
|
14
|
+
return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-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, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
|
|
17
15
|
}
|
|
18
16
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAc1B"}
|