) {
type={type}
data-slot='input'
className={cn(
- 'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 focus-visible:ring-inset disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-inset md:text-sm',
+ 'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none 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 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
className
)}
{...props}
diff --git a/web/default/src/components/ui/item.tsx b/web/default/src/components/ui/item.tsx
index f3c194eea9..3e9649c654 100644
--- a/web/default/src/components/ui/item.tsx
+++ b/web/default/src/components/ui/item.tsx
@@ -161,7 +161,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4',
+ 'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
className
)}
{...props}
diff --git a/web/default/src/components/ui/kbd.tsx b/web/default/src/components/ui/kbd.tsx
index b4283b21e3..217d352fd9 100644
--- a/web/default/src/components/ui/kbd.tsx
+++ b/web/default/src/components/ui/kbd.tsx
@@ -23,7 +23,7 @@ function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
)
@@ -233,7 +233,7 @@ function MenubarShortcut({
) {
return (
@@ -57,15 +48,12 @@ function PopoverContent({
alignOffset={alignOffset}
side={side}
sideOffset={sideOffset}
- collisionPadding={collisionPadding}
- collisionBoundary={collisionBoundary}
- collisionAvoidance={collisionAvoidance}
className='isolate z-50'
>
)
@@ -83,7 +83,7 @@ function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
return (
div]:rotate-90',
+ 'relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
className
)}
{...props}
diff --git a/web/default/src/components/ui/select.tsx b/web/default/src/components/ui/select.tsx
index b3dc987cc5..762832e093 100644
--- a/web/default/src/components/ui/select.tsx
+++ b/web/default/src/components/ui/select.tsx
@@ -28,7 +28,6 @@ import {
import { HugeiconsIcon } from '@hugeicons/react'
import * as React from 'react'
-import { useMediaQuery } from '@/hooks'
import { cn } from '@/lib/utils'
const Select = SelectPrimitive.Root
@@ -66,7 +65,7 @@ function SelectTrigger({
data-slot='select-trigger'
data-size={size}
className={cn(
- "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-md *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -99,38 +98,32 @@ function SelectContent({
SelectPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
>) {
- const isMobile = useMediaQuery('(max-width: 640px)')
-
- const content = (
-
-
+
-
- {children}
-
-
-
+
+
+ {children}
+
+
+
+
)
-
- if (isMobile) {
- return content
- }
-
- return {content}
}
function SelectLabel({
@@ -140,7 +133,7 @@ function SelectLabel({
return (
)
@@ -155,15 +148,12 @@ function SelectItem({
-
+
{children}
)
@@ -202,7 +192,7 @@ function SelectScrollUpButton({
@@ -77,15 +72,7 @@ function SheetContent({
data-slot='sheet-content'
data-side={side}
className={cn(
- 'bg-background text-foreground fixed z-50 flex flex-col gap-4 overflow-hidden bg-clip-padding text-sm shadow-none transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',
- side === 'right' &&
- 'inset-y-0 right-0 h-full w-3/4 border-l data-ending-style:translate-x-[2.5rem] data-starting-style:translate-x-[2.5rem] sm:max-w-sm',
- side === 'left' &&
- 'inset-y-0 left-0 h-full w-3/4 border-r data-ending-style:translate-x-[-2.5rem] data-starting-style:translate-x-[-2.5rem] sm:max-w-sm',
- side === 'top' &&
- 'inset-x-0 top-0 h-auto border-b data-ending-style:translate-y-[-2.5rem] data-starting-style:translate-y-[-2.5rem]',
- side === 'bottom' &&
- 'inset-x-0 bottom-0 h-auto border-t data-ending-style:translate-y-[2.5rem] data-starting-style:translate-y-[2.5rem]',
+ 'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
className
)}
{...props}
@@ -135,7 +122,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
return (
)
@@ -148,7 +135,7 @@ function SheetDescription({
return (
)
diff --git a/web/default/src/components/ui/sidebar.tsx b/web/default/src/components/ui/sidebar.tsx
index 30175e8750..89aff733cd 100644
--- a/web/default/src/components/ui/sidebar.tsx
+++ b/web/default/src/components/ui/sidebar.tsx
@@ -39,7 +39,6 @@ import { Skeleton } from '@/components/ui/skeleton'
import {
Tooltip,
TooltipContent,
- TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { useIsMobile } from '@/hooks/use-mobile'
@@ -47,9 +46,9 @@ import { cn } from '@/lib/utils'
const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = '13rem'
-const SIDEBAR_WIDTH_MOBILE = '17rem'
-const SIDEBAR_WIDTH_ICON = '2.75rem'
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
type SidebarContextProps = {
@@ -158,7 +157,7 @@ function SidebarProvider({
} as React.CSSProperties
}
className={cn(
- 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+ 'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
className
)}
{...props}
@@ -189,7 +188,7 @@ function Sidebar({
) {
onClick={toggleSidebar}
title='Toggle Sidebar'
className={cn(
- 'hover:after:bg-sidebar-border 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] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+ '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',
- 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+ '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
@@ -327,7 +326,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
)
@@ -379,7 +378,7 @@ function SidebarSeparator({
)
@@ -420,7 +419,7 @@ function SidebarGroupLabel({
props: mergeProps<'div'>(
{
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]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+ '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
),
},
@@ -558,17 +557,15 @@ function SidebarMenuButton({
}
return (
-
-
- {comp}
-
-
-
+
+ {comp}
+
+
)
}
@@ -611,7 +608,7 @@ function SidebarMenuBadge({
data-slot='sidebar-menu-badge'
data-sidebar='menu-badge'
className={cn(
- 'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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',
+ '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}
@@ -663,7 +660,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
data-slot='sidebar-menu-sub'
data-sidebar='menu-sub'
className={cn(
- 'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
+ '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}
diff --git a/web/default/src/components/ui/skeleton.tsx b/web/default/src/components/ui/skeleton.tsx
index 6333d5586b..cb38adba1a 100644
--- a/web/default/src/components/ui/skeleton.tsx
+++ b/web/default/src/components/ui/skeleton.tsx
@@ -22,7 +22,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
return (
)
diff --git a/web/default/src/components/ui/sonner.tsx b/web/default/src/components/ui/sonner.tsx
index d11aae6b13..c05fd96fd6 100644
--- a/web/default/src/components/ui/sonner.tsx
+++ b/web/default/src/components/ui/sonner.tsx
@@ -26,16 +26,15 @@ import {
Loading03Icon,
} from '@hugeicons/core-free-icons'
import { HugeiconsIcon } from '@hugeicons/react'
+import { useTheme } from 'next-themes'
import { Toaster as Sonner, type ToasterProps } from 'sonner'
-import { useTheme } from '@/context/theme-provider'
-
-const Toaster = (props: ToasterProps) => {
- const { resolvedTheme } = useTheme()
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = 'system' } = useTheme()
return (
{
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
- '--success-bg':
- 'color-mix(in oklch, var(--success) 16%, var(--popover))',
- '--success-border':
- 'color-mix(in oklch, var(--success) 35%, var(--border))',
- '--success-text': 'var(--success)',
- '--info-bg': 'color-mix(in oklch, var(--info) 16%, var(--popover))',
- '--info-border':
- 'color-mix(in oklch, var(--info) 35%, var(--border))',
- '--info-text': 'var(--info)',
- '--warning-bg':
- 'color-mix(in oklch, var(--warning) 18%, var(--popover))',
- '--warning-border':
- 'color-mix(in oklch, var(--warning) 38%, var(--border))',
- '--warning-text': 'var(--warning)',
- '--error-bg':
- 'color-mix(in oklch, var(--destructive) 16%, var(--popover))',
- '--error-border':
- 'color-mix(in oklch, var(--destructive) 35%, var(--border))',
- '--error-text': 'var(--destructive)',
'--border-radius': 'var(--radius)',
} as React.CSSProperties
}
+ toastOptions={{
+ classNames: {
+ toast: 'cn-toast',
+ },
+ }}
{...props}
/>
)
diff --git a/web/default/src/components/ui/spinner.tsx b/web/default/src/components/ui/spinner.tsx
index 6b228fbfb0..2ac97c0827 100644
--- a/web/default/src/components/ui/spinner.tsx
+++ b/web/default/src/components/ui/spinner.tsx
@@ -21,10 +21,7 @@ import { HugeiconsIcon } from '@hugeicons/react'
import { cn } from '@/lib/utils'
-type SpinnerProps = Omit<
- React.ComponentProps,
- 'icon' | 'strokeWidth'
-> & {
+type SpinnerProps = Omit, 'strokeWidth'> & {
strokeWidth?: number
}
@@ -32,11 +29,12 @@ function Spinner({ className, strokeWidth = 2, ...props }: SpinnerProps) {
return (
)
}
diff --git a/web/default/src/components/ui/switch.tsx b/web/default/src/components/ui/switch.tsx
index 50e1e40ff6..c4f2532a96 100644
--- a/web/default/src/components/ui/switch.tsx
+++ b/web/default/src/components/ui/switch.tsx
@@ -32,7 +32,7 @@ function Switch({
data-slot='switch'
data-size={size}
className={cn(
- 'peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]',
+ 'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',
className
)}
{...props}
diff --git a/web/default/src/components/ui/table.tsx b/web/default/src/components/ui/table.tsx
index 2163c119c8..b2a1092ca8 100644
--- a/web/default/src/components/ui/table.tsx
+++ b/web/default/src/components/ui/table.tsx
@@ -22,18 +22,26 @@ import * as React from 'react'
import { cn } from '@/lib/utils'
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
+type TableProps = React.ComponentProps<'table'> & {
+ containerClassName?: string
+ containerProps?: Omit, 'children' | 'className'>
+}
+
+function Table({
+ className,
+ containerClassName,
+ containerProps,
+ ...props
+}: TableProps) {
return (
@@ -65,7 +73,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
tr]:last:border-b-0',
+ 'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
className
)}
{...props}
@@ -78,7 +86,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
) {
|
)
diff --git a/web/default/src/components/ui/tabs.tsx b/web/default/src/components/ui/tabs.tsx
index 149dff8d94..9db55532dd 100644
--- a/web/default/src/components/ui/tabs.tsx
+++ b/web/default/src/components/ui/tabs.tsx
@@ -74,10 +74,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
) {