img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
{...props}
/>
)
@@ -20,7 +22,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
) {
return (
)
@@ -65,7 +67,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
)
@@ -75,7 +77,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
)
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
index cb0b07b..b9f1297 100644
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -1,29 +1,26 @@
"use client"
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
-function Checkbox({
- className,
- ...props
-}: React.ComponentProps
) {
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
return (
-
+
)
diff --git a/web/src/components/ui/command.tsx b/web/src/components/ui/command.tsx
index 8cb4ca7..a7e8223 100644
--- a/web/src/components/ui/command.tsx
+++ b/web/src/components/ui/command.tsx
@@ -1,8 +1,5 @@
-"use client"
-
import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import {
@@ -12,6 +9,11 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
+import {
+ InputGroup,
+ InputGroupAddon,
+} from "@/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
function Command({
className,
@@ -21,7 +23,7 @@ function Command({
& {
+}: Omit, "children"> & {
title?: string
description?: string
className?: string
showCloseButton?: boolean
+ children: React.ReactNode
}) {
return (
)
@@ -65,19 +69,20 @@ function CommandInput({
...props
}: React.ComponentProps) {
return (
-
-
-
+
+
+
+
+
+
+
)
}
@@ -90,7 +95,7 @@ function CommandList({
) {
return (
)
@@ -117,10 +123,7 @@ function CommandGroup({
return (
)
@@ -141,17 +144,21 @@ function CommandSeparator({
function CommandItem({
className,
+ children,
...props
}: React.ComponentProps) {
return (
+ >
+ {children}
+
+
)
}
@@ -162,10 +169,7 @@ function CommandShortcut({
return (
)
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index a6f1cfb..f49a149 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -1,46 +1,34 @@
-"use client"
-
import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
-function Dialog({
- ...props
-}: React.ComponentProps) {
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
return
}
-function DialogTrigger({
- ...props
-}: React.ComponentProps) {
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
return
}
-function DialogPortal({
- ...props
-}: React.ComponentProps) {
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
return
}
-function DialogClose({
- ...props
-}: React.ComponentProps) {
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
return
}
function DialogOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DialogPrimitive.Backdrop.Props) {
return (
-
)
@@ -51,16 +39,16 @@ function DialogContent({
children,
showCloseButton = true,
...props
-}: React.ComponentProps & {
+}: DialogPrimitive.Popup.Props & {
showCloseButton?: boolean
}) {
return (
-
+
-
+ }
>
-
+
Close
)}
-
+
)
}
@@ -84,33 +79,44 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
return (
+ >
+ {children}
+ {showCloseButton && (
+ }>
+ Close
+
+ )}
+ [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-[>[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 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+const inputGroupAddonVariants = cva(
+ "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+ {
+ variants: {
+ align: {
+ "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+ "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+ "block-start":
+ "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+ "block-end":
+ "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+ },
+ },
+ defaultVariants: {
+ align: "inline-start",
+ },
+ }
+)
+
+function InputGroupAddon({
+ className,
+ align = "inline-start",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps
) {
+ return (
+ {
+ if ((e.target as HTMLElement).closest("button")) {
+ return
+ }
+ e.currentTarget.parentElement?.querySelector("input")?.focus()
+ }}
+ {...props}
+ />
+ )
+}
+
+const inputGroupButtonVariants = cva(
+ "gap-2 text-sm shadow-none flex items-center",
+ {
+ variants: {
+ size: {
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+ sm: "",
+ "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+ },
+ },
+ defaultVariants: {
+ size: "xs",
+ },
+ }
+)
+
+function InputGroupButton({
+ className,
+ type = "button",
+ variant = "ghost",
+ size = "xs",
+ ...props
+}: Omit
, "size" | "type"> &
+ VariantProps & {
+ type?: "button" | "submit" | "reset"
+ }) {
+ return (
+
+ )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+function InputGroupInput({
+ className,
+ ...props
+}: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+function InputGroupTextarea({
+ className,
+ ...props
+}: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupText,
+ InputGroupInput,
+ InputGroupTextarea,
+}
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 8916905..981e825 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -1,16 +1,15 @@
import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
import { cn } from "@/lib/utils"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
- ) {
) {
return (
)
diff --git a/web/src/components/ui/label.tsx b/web/src/components/ui/label.tsx
index fb5fbc3..4bfe963 100644
--- a/web/src/components/ui/label.tsx
+++ b/web/src/components/ui/label.tsx
@@ -1,19 +1,13 @@
-"use client"
-
import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/lib/utils"
-function Label({
- className,
- ...props
-}: React.ComponentProps) {
+function Label({ className, ...props }: React.ComponentProps<"label">) {
return (
- ) {
+function Menubar({ className, ...props }: MenubarPrimitive.Props) {
return (
-
)
}
-function MenubarMenu({
- ...props
-}: React.ComponentProps) {
- return
+function MenubarMenu({ ...props }: React.ComponentProps) {
+ return
}
function MenubarGroup({
...props
-}: React.ComponentProps) {
- return
+}: React.ComponentProps) {
+ return
}
function MenubarPortal({
...props
-}: React.ComponentProps) {
- return
-}
-
-function MenubarRadioGroup({
- ...props
-}: React.ComponentProps) {
- return (
-
- )
+}: React.ComponentProps) {
+ return
}
function MenubarTrigger({
className,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps) {
return (
- ) {
+}: React.ComponentProps) {
return (
-
-
-
+
)
}
@@ -93,19 +86,13 @@ function MenubarItem({
inset,
variant = "default",
...props
-}: React.ComponentProps & {
- inset?: boolean
- variant?: "default" | "destructive"
-}) {
+}: React.ComponentProps) {
return (
-
)
@@ -115,49 +102,65 @@ function MenubarCheckboxItem({
className,
children,
checked,
+ inset,
...props
-}: React.ComponentProps) {
+}: MenuPrimitive.CheckboxItem.Props & {
+ inset?: boolean
+}) {
return (
-
-
-
-
-
+
+
+
+
{children}
-
+
)
}
+function MenubarRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
function MenubarRadioItem({
className,
children,
+ inset,
...props
-}: React.ComponentProps) {
+}: MenuPrimitive.RadioItem.Props & {
+ inset?: boolean
+}) {
return (
-
-
-
-
-
+
+
+
+
{children}
-
+
)
}
@@ -165,17 +168,14 @@ function MenubarLabel({
className,
inset,
...props
-}: React.ComponentProps & {
+}: React.ComponentProps & {
inset?: boolean
}) {
return (
-
)
@@ -184,9 +184,9 @@ function MenubarLabel({
function MenubarSeparator({
className,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps) {
return (
- ) {
+}: React.ComponentProps) {
return (
-
)
@@ -212,45 +209,35 @@ function MenubarShortcut({
function MenubarSub({
...props
-}: React.ComponentProps) {
- return
+}: React.ComponentProps) {
+ return
}
function MenubarSubTrigger({
className,
inset,
- children,
...props
-}: React.ComponentProps & {
+}: React.ComponentProps & {
inset?: boolean
}) {
return (
-
- {children}
-
-
+ />
)
}
function MenubarSubContent({
className,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps) {
return (
-
)
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
index 01e468b..53a798b 100644
--- a/web/src/components/ui/popover.tsx
+++ b/web/src/components/ui/popover.tsx
@@ -1,48 +1,88 @@
-"use client"
-
import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
import { cn } from "@/lib/utils"
-function Popover({
- ...props
-}: React.ComponentProps) {
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
return
}
-function PopoverTrigger({
- ...props
-}: React.ComponentProps) {
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
return
}
function PopoverContent({
className,
align = "center",
+ alignOffset = 0,
+ side = "bottom",
sideOffset = 4,
...props
-}: React.ComponentProps) {
+}: PopoverPrimitive.Popup.Props &
+ Pick<
+ PopoverPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset"
+ >) {
return (
-
+ className="isolate z-50"
+ >
+
+
)
}
-function PopoverAnchor({
- ...props
-}: React.ComponentProps) {
- return
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
}
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+ return (
+
+ )
+}
+
+function PopoverDescription({
+ className,
+ ...props
+}: PopoverPrimitive.Description.Props) {
+ return (
+
+ )
+}
+
+export {
+ Popover,
+ PopoverContent,
+ PopoverDescription,
+ PopoverHeader,
+ PopoverTitle,
+ PopoverTrigger,
+}
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index 88302a8..231daaa 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -1,27 +1,29 @@
-"use client"
-
import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
-function Select({
- ...props
-}: React.ComponentProps) {
- return
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+ return (
+
+ )
}
-function SelectGroup({
- ...props
-}: React.ComponentProps) {
- return
-}
-
-function SelectValue({
- ...props
-}: React.ComponentProps) {
- return
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+ return (
+
+ )
}
function SelectTrigger({
@@ -29,7 +31,7 @@ function SelectTrigger({
size = "default",
children,
...props
-}: React.ComponentProps & {
+}: SelectPrimitive.Trigger.Props & {
size?: "sm" | "default"
}) {
return (
@@ -37,15 +39,17 @@ function SelectTrigger({
data-slot="select-trigger"
data-size={size}
className={cn(
- "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
className
)}
{...props}
>
{children}
-
-
-
+
+ }
+ />
)
}
@@ -53,36 +57,38 @@ function SelectTrigger({
function SelectContent({
className,
children,
- position = "item-aligned",
+ side = "bottom",
+ sideOffset = 4,
align = "center",
+ alignOffset = 0,
+ alignItemWithTrigger = true,
...props
-}: React.ComponentProps) {
+}: SelectPrimitive.Popup.Props &
+ Pick<
+ SelectPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+ >) {
return (
-
-
-
- {children}
-
-
-
+
+ {children}
+
+
+
)
}
@@ -90,11 +96,11 @@ function SelectContent({
function SelectLabel({
className,
...props
-}: React.ComponentProps) {
+}: SelectPrimitive.GroupLabel.Props) {
return (
-
)
@@ -104,25 +110,24 @@ function SelectItem({
className,
children,
...props
-}: React.ComponentProps) {
+}: SelectPrimitive.Item.Props) {
return (
-
+ {children}
+
+ }
>
-
-
-
-
- {children}
+
+
)
}
@@ -130,11 +135,11 @@ function SelectItem({
function SelectSeparator({
className,
...props
-}: React.ComponentProps) {
+}: SelectPrimitive.Separator.Props) {
return (
)
@@ -143,36 +148,32 @@ function SelectSeparator({
function SelectScrollUpButton({
className,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps) {
return (
-
-
-
+
+
)
}
function SelectScrollDownButton({
className,
...props
-}: React.ComponentProps) {
+}: React.ComponentProps) {
return (
-
-
-
+
+
)
}
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..2465221
--- /dev/null
+++ b/web/src/components/ui/sheet.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+ return
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+ return
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+ return
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+ return
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+ return (
+
+ )
+}
+
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ showCloseButton = true,
+ ...props
+}: SheetPrimitive.Popup.Props & {
+ side?: "top" | "right" | "bottom" | "left"
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+ }
+ >
+
+ Close
+
+ )}
+
+
+ )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+ return (
+
+ )
+}
+
+function SheetDescription({
+ className,
+ ...props
+}: SheetPrimitive.Description.Props) {
+ return (
+
+ )
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+}
diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
index 9b20afe..9280ee5 100644
--- a/web/src/components/ui/sonner.tsx
+++ b/web/src/components/ui/sonner.tsx
@@ -1,14 +1,8 @@
"use client"
-import {
- CircleCheckIcon,
- InfoIcon,
- Loader2Icon,
- OctagonXIcon,
- TriangleAlertIcon,
-} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
@@ -18,11 +12,21 @@ const Toaster = ({ ...props }: ToasterProps) => {
theme={theme as ToasterProps["theme"]}
className="toaster group"
icons={{
- success: ,
- info: ,
- warning: ,
- error: ,
- loading: ,
+ success: (
+
+ ),
+ info: (
+
+ ),
+ warning: (
+
+ ),
+ error: (
+
+ ),
+ loading: (
+
+ ),
}}
style={
{
@@ -32,6 +36,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
+ toastOptions={{
+ classNames: {
+ toast: "cn-toast",
+ },
+ }}
{...props}
/>
)
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index 497ba5e..b4be30c 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -1,48 +1,65 @@
-"use client"
-
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
function Tabs({
className,
+ orientation = "horizontal",
...props
-}: React.ComponentProps) {
+}: TabsPrimitive.Root.Props) {
return (
)
}
+const tabsListVariants = cva(
+ "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+ {
+ variants: {
+ variant: {
+ default: "bg-muted",
+ line: "gap-1 bg-transparent",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
function TabsList({
className,
+ variant = "default",
...props
-}: React.ComponentProps) {
+}: TabsPrimitive.List.Props & VariantProps) {
return (
)
}
-function TabsTrigger({
- className,
- ...props
-}: React.ComponentProps) {
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
return (
- ) {
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
return (
-
)
}
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..668fd71
--- /dev/null
+++ b/web/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
index a4e90d4..94a7444 100644
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -1,59 +1,62 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
import { cn } from "@/lib/utils"
function TooltipProvider({
- delayDuration = 0,
+ delay = 0,
...props
-}: React.ComponentProps) {
+}: TooltipPrimitive.Provider.Props) {
return (
)
}
-function Tooltip({
- ...props
-}: React.ComponentProps) {
- return (
-
-
-
- )
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+ return
}
-function TooltipTrigger({
- ...props
-}: React.ComponentProps) {
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
return
}
function TooltipContent({
className,
- sideOffset = 0,
+ side = "top",
+ sideOffset = 4,
+ align = "center",
+ alignOffset = 0,
children,
...props
-}: React.ComponentProps) {
+}: TooltipPrimitive.Popup.Props &
+ Pick<
+ TooltipPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset"
+ >) {
return (
-
- {children}
-
-
+
+ {children}
+
+
+
)
}
diff --git a/web/src/app/globals.css b/web/src/index.css
similarity index 99%
rename from web/src/app/globals.css
rename to web/src/index.css
index 0bc2dea..6f07c32 100644
--- a/web/src/app/globals.css
+++ b/web/src/index.css
@@ -1,5 +1,6 @@
@import "tailwindcss";
@import "tw-animate-css";
+@import "./styles/theme.css";
@custom-variant dark (&:is(.dark *));
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..d8e0544
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,27 @@
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+import './index.css'
+import { basename } from './modules/basename'
+
+// Set up a Router instance
+const router = createRouter({
+ routeTree,
+ basepath: basename,
+ defaultPreload: 'intent',
+ scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router
+ }
+}
+
+const rootElement = document.getElementById('root')!
+
+if (!rootElement.innerHTML) {
+ const root = ReactDOM.createRoot(rootElement)
+ root.render()
+}
\ No newline at end of file
diff --git a/web/src/modules/basename.ts b/web/src/modules/basename.ts
index 78be9a8..df380e1 100644
--- a/web/src/modules/basename.ts
+++ b/web/src/modules/basename.ts
@@ -1,18 +1,11 @@
-const isDev = process.env.NODE_ENV === "development";
-const BASE_NAME = isDev ? '' : '/root/perler-beads';
-
+// @ts-ignore
export const basename = BASE_NAME;
export const wrapBasename = (path: string) => {
const hasEnd = path.endsWith('/')
- let _basename = basename;
if (basename) {
- _basename = `${basename}${path}`;
+ return `${basename}${path}` + (hasEnd ? '' : '/');
} else {
- _basename = path;
+ return path;
}
- if (isDev) {
- return _basename
- }
- return _basename + '.html';
}
\ No newline at end of file
diff --git a/web/src/modules/query.ts b/web/src/modules/query.ts
index c93b7d8..da6d547 100644
--- a/web/src/modules/query.ts
+++ b/web/src/modules/query.ts
@@ -1,21 +1,9 @@
-'use client';
-import { QueryClient } from '@kevisual/query'
-
-export const getUrl = () => {
- if (typeof window === 'undefined') return '/client/router';
- const _url = new URL(location.href)
- const pathname = _url.pathname
- const [user, repo] = pathname.split('/').filter(Boolean)
- if (repo === 'v1') {
- return '/' + pathname;
- }
- return '/client/router'
-}
+import { QueryClient } from '@kevisual/query';
export const query = new QueryClient({
url: '/api/router',
});
export const queryClient = new QueryClient({
- url: getUrl(),
+ url: '/client/router',
});
\ No newline at end of file
diff --git a/web/src/proxy.ts b/web/src/proxy.ts
deleted file mode 100644
index 35ca497..0000000
--- a/web/src/proxy.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-const API_URL = process.env.API_URL || 'http://localhost:51515';
-console.log(`Proxy API_URL: ${API_URL}`);
-/**
- * 通用代理函数
- * @param request 原始请求
- * @param targetHost 目标服务器地址（如 http://localhost:51515）
- * @returns NextResponse 代理响应
- */
-async function proxyRequest(request: NextRequest, targetHost: string): Promise {
- const { pathname } = request.nextUrl;
- const targetUrl = new URL(pathname + request.nextUrl.search, targetHost);
-
- try {
- console.log(`Proxying request to: ${targetUrl.toString()}`);
- const response = await fetch(targetUrl.toString(), {
- method: request.method,
- headers: {
- // 复制原始请求的所有头部
- ...Object.fromEntries(request.headers.entries()),
- // 确保转发 cookie
- cookie: request.headers.get('cookie') || '',
- },
- body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.text() : undefined,
- // 包含 cookie 的请求
- credentials: 'include',
- });
-
- // 创建响应，保留原始响应的所有头部（包括 Set-Cookie）
- const responseHeaders = new Headers(response.headers);
-
- return new NextResponse(response.body, {
- status: response.status,
- statusText: response.statusText,
- headers: responseHeaders,
- });
- } catch (error) {
- console.error('Proxy error:', error);
- return NextResponse.json(
- { error: 'Proxy request failed' },
- { status: 502 }
- );
- }
-}
-
-export async function proxy(request: NextRequest) {
- const { pathname } = request.nextUrl;
- const method = request.method;
- const [username, appKey] = pathname.split('/').filter(Boolean);
- const searchParams = request.nextUrl.searchParams;
- const path = searchParams.get('path') || '';
- // 代理 /api 请求
- if (pathname.startsWith('/api')) {
- return proxyRequest(request, API_URL);
- }
- // 代理 /root/home 或 /root/home/ 请求 (第二个路径段后可以为空或以 / 结尾)
- if (pathname.startsWith('/root') && appKey !== 'v1') {
- return proxyRequest(request, API_URL);
- }
- if (pathname.startsWith('/root') && path && appKey === 'v1') {
- return proxyRequest(request, API_URL);
- }
-
- return NextResponse.next();
-}
-
-export const config = {
- matcher: ['/api/:path*', '/root/:segment/:path*'],
-};
-
-export default proxy;
\ No newline at end of file
diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts
new file mode 100644
index 0000000..d204c26
--- /dev/null
+++ b/web/src/routeTree.gen.ts
@@ -0,0 +1,59 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths: '/'
+ fileRoutesByTo: FileRoutesByTo
+ to: '/'
+ id: '__root__' | '/'
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
new file mode 100644
index 0000000..3ddda2b
--- /dev/null
+++ b/web/src/routes/__root.tsx
@@ -0,0 +1,32 @@
+import { Link, Outlet, createRootRoute, useNavigate } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Toaster } from '@/components/ui/sonner'
+export const Route = createRootRoute({
+ component: RootComponent,
+})
+
+function RootComponent() {
+ return (
+
+
+
+
+ Home
+
+
+
+
+
+
+
+
+