(
data-chart={chartId}
ref={ref}
className={cn(
- "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+ "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
className,
)}
{...props}
@@ -212,9 +212,9 @@ const ChartTooltipContent = React.forwardRef<
!hideIndicator && (
) : (
-
+
));
diff --git a/ui-v2/src/components/ui/combobox/combobox.tsx b/ui-v2/src/components/ui/combobox/combobox.tsx
index 1d090ec6530a..fbf84c95b448 100644
--- a/ui-v2/src/components/ui/combobox/combobox.tsx
+++ b/ui-v2/src/components/ui/combobox/combobox.tsx
@@ -60,7 +60,7 @@ const ComboboxTrigger = ({
)}
>
{children}
-
+
);
diff --git a/ui-v2/src/components/ui/command.tsx b/ui-v2/src/components/ui/command.tsx
index b025bbf37bf2..8bde1e0c82ce 100644
--- a/ui-v2/src/components/ui/command.tsx
+++ b/ui-v2/src/components/ui/command.tsx
@@ -41,11 +41,11 @@ const CommandInput = React.forwardRef<
>(({ className, ...props }, ref) => (
// eslint-disable-next-line react/no-unknown-property
-
+
) {
+ return ;
+}
-const DialogPortal = DialogPrimitive.Portal;
+function DialogTrigger({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
-const DialogClose = DialogPrimitive.Close;
+function DialogPortal({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
-const DialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+function DialogClose({
+ ...props
+}: React.ComponentProps) {
+ return ;
+}
-const DialogContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
- ) {
+ return (
+
- {children}
-
-
- Close
-
-
-
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+ />
+ );
+}
-const DialogHeader = ({
+function DialogContent({
className,
+ children,
...props
-}: React.HTMLAttributes) => (
-
-);
-DialogHeader.displayName = "DialogHeader";
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
-const DialogFooter = ({
+function DialogTitle({
className,
...props
-}: React.HTMLAttributes) => (
-
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+}: React.ComponentProps) {
+ return (
+
+ );
+}
-const DialogDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+function DialogDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
export {
Dialog,
- DialogPortal,
- DialogOverlay,
- DialogTrigger,
DialogClose,
DialogContent,
- DialogHeader,
+ DialogDescription,
DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
DialogTitle,
- DialogDescription,
+ DialogTrigger,
};
diff --git a/ui-v2/src/components/ui/docs-link/docs-link.tsx b/ui-v2/src/components/ui/docs-link/docs-link.tsx
index 565256020444..3d677ebced9e 100644
--- a/ui-v2/src/components/ui/docs-link/docs-link.tsx
+++ b/ui-v2/src/components/ui/docs-link/docs-link.tsx
@@ -17,7 +17,7 @@ export const DocsLink = ({
return (
);
diff --git a/ui-v2/src/components/ui/dropdown-menu.tsx b/ui-v2/src/components/ui/dropdown-menu.tsx
index 1740040f98a0..65cf43462fa6 100644
--- a/ui-v2/src/components/ui/dropdown-menu.tsx
+++ b/ui-v2/src/components/ui/dropdown-menu.tsx
@@ -34,14 +34,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
{children}
-
+
));
DropdownMenuSubTrigger.displayName =
@@ -109,7 +109,7 @@ const DropdownMenuItem = React.forwardRef<
-
+
-
+
{children}
@@ -162,14 +162,14 @@ const DropdownMenuRadioItem = React.forwardRef<
-
+
-
+
{children}
diff --git a/ui-v2/src/components/ui/empty-state.stories.tsx b/ui-v2/src/components/ui/empty-state.stories.tsx
index f655f319cc8f..1d8fc0981b4f 100644
--- a/ui-v2/src/components/ui/empty-state.stories.tsx
+++ b/ui-v2/src/components/ui/empty-state.stories.tsx
@@ -41,7 +41,7 @@ function EmptyStateExample(): JSX.Element {
diff --git a/ui-v2/src/components/ui/empty-state.tsx b/ui-v2/src/components/ui/empty-state.tsx
index 5ea13da037f4..b99a712d42a8 100644
--- a/ui-v2/src/components/ui/empty-state.tsx
+++ b/ui-v2/src/components/ui/empty-state.tsx
@@ -3,7 +3,7 @@ import type { JSX } from "react";
import { Icon, type IconId } from "./icons";
const EmptyStateIcon = ({ id }: { id: IconId }): JSX.Element => {
- return ;
+ return ;
};
const EmptyStateTitle = ({
children,
diff --git a/ui-v2/src/components/ui/flow-run-activity-bar-graph/index.tsx b/ui-v2/src/components/ui/flow-run-activity-bar-graph/index.tsx
index d5d21a979354..0e8ee9f8beb0 100644
--- a/ui-v2/src/components/ui/flow-run-activity-bar-graph/index.tsx
+++ b/ui-v2/src/components/ui/flow-run-activity-bar-graph/index.tsx
@@ -389,7 +389,7 @@ const FlowRunTooltip = ({
{flow.name}
)}
-
+
-
+
{deployment.name}
)}
-
+
{formatDistanceStrict(0, flowRun.total_run_time * 1000, {
addSuffix: false,
@@ -427,7 +427,7 @@ const FlowRunTooltip = ({
{startTime && (
-
+
{format(startTime, "yyyy/MM/dd hh:mm a")}
diff --git a/ui-v2/src/components/ui/hover-card.tsx b/ui-v2/src/components/ui/hover-card.tsx
index a6c7e630c261..43c8d95f090d 100644
--- a/ui-v2/src/components/ui/hover-card.tsx
+++ b/ui-v2/src/components/ui/hover-card.tsx
@@ -24,7 +24,7 @@ const HoverCardContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
- "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
diff --git a/ui-v2/src/components/ui/input.tsx b/ui-v2/src/components/ui/input.tsx
index ae3e030786df..f2fb8231ee2f 100644
--- a/ui-v2/src/components/ui/input.tsx
+++ b/ui-v2/src/components/ui/input.tsx
@@ -15,7 +15,7 @@ const Input = React.forwardRef(
(
({ className, Icon, ...props }, ref) => {
return (
-
+
);
diff --git a/ui-v2/src/components/ui/json-input.tsx b/ui-v2/src/components/ui/json-input.tsx
index b231aaed9f5c..ea680eef5aa7 100644
--- a/ui-v2/src/components/ui/json-input.tsx
+++ b/ui-v2/src/components/ui/json-input.tsx
@@ -75,7 +75,7 @@ export const JsonInput = React.forwardRef(
return (
{
@@ -96,7 +96,7 @@ export const JsonInput = React.forwardRef(
className="absolute top-0 right-0 z-10"
aria-label="copy"
>
-
+
)}
diff --git a/ui-v2/src/components/ui/menubar.tsx b/ui-v2/src/components/ui/menubar.tsx
index 39490dcd1712..10d56bb0bf7c 100644
--- a/ui-v2/src/components/ui/menubar.tsx
+++ b/ui-v2/src/components/ui/menubar.tsx
@@ -24,7 +24,7 @@ const Menubar = React.forwardRef<
{children}
-
+
));
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
@@ -117,7 +117,7 @@ const MenubarItem = React.forwardRef<
-
+
-
+
{children}
@@ -156,14 +156,14 @@ const MenubarRadioItem = React.forwardRef<
-
+
-
+
{children}
diff --git a/ui-v2/src/components/ui/pagination.tsx b/ui-v2/src/components/ui/pagination.tsx
index 630d23df78e9..d049f3c46b38 100644
--- a/ui-v2/src/components/ui/pagination.tsx
+++ b/ui-v2/src/components/ui/pagination.tsx
@@ -85,7 +85,7 @@ const PaginationPrevious = ({
className={cn("gap-1 pl-2.5", className)}
{...props}
>
-
+
Previous
);
@@ -102,7 +102,7 @@ const PaginationPreviousButton = ({
className={cn("gap-1 pl-2.5", className)}
{...props}
>
-
+
);
PaginationPreviousButton.displayName = "PaginationPreviousButton";
@@ -118,7 +118,7 @@ const PaginationNext = ({
{...props}
>
Next
-
+
);
PaginationNext.displayName = "PaginationNext";
@@ -134,7 +134,7 @@ const PaginationNextButton = ({
className={cn("gap-1 pr-2.5", className)}
{...props}
>
-
+
);
PaginationNextButton.displayName = "PaginationNextButton";
@@ -149,10 +149,10 @@ const PaginationEllipsis = ({
}: PaginationEllipsisProps) => (
-
+
More pages
);
@@ -169,7 +169,7 @@ const PaginationFirstButton = ({
className={cn("gap-1 pl-2.5", className)}
{...props}
>
-
+
);
PaginationFirstButton.displayName = "PaginationFirstButton";
@@ -185,7 +185,7 @@ const PaginationLastButton = ({
className={cn("gap-1 pr-2.5", className)}
{...props}
>
-
+
);
diff --git a/ui-v2/src/components/ui/popover.tsx b/ui-v2/src/components/ui/popover.tsx
index 09e87feef883..fcbc79fdec2c 100644
--- a/ui-v2/src/components/ui/popover.tsx
+++ b/ui-v2/src/components/ui/popover.tsx
@@ -38,9 +38,9 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
- "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
fullWidth &&
- "w-[--radix-popover-trigger-width] max-h-[--radix-popover-content-available-height]",
+ "w-[var(--radix-popover-trigger-width)] max-h-[var(--radix-popover-content-available-height)]",
className,
)}
{...props}
diff --git a/ui-v2/src/components/ui/run-card/run-card.tsx b/ui-v2/src/components/ui/run-card/run-card.tsx
index 809bd297d6f8..a7cb31462377 100644
--- a/ui-v2/src/components/ui/run-card/run-card.tsx
+++ b/ui-v2/src/components/ui/run-card/run-card.tsx
@@ -118,7 +118,7 @@ type TimeRanProps = {
const TimeRan = ({ duration }: TimeRanProps) => {
return (
-
+
{humanizeDuration(duration, { maxDecimalPoints: 3, units: ["s"] })}
@@ -131,7 +131,7 @@ type StartTimeProps = {
};
const StartTime = ({ time }: StartTimeProps) => (
-
+
{format(parseISO(time), "yyyy/MM/dd pp")}
diff --git a/ui-v2/src/components/ui/select.tsx b/ui-v2/src/components/ui/select.tsx
index ba1a8d40abaf..04c6df257efd 100644
--- a/ui-v2/src/components/ui/select.tsx
+++ b/ui-v2/src/components/ui/select.tsx
@@ -28,14 +28,14 @@ const SelectTrigger = React.forwardRef<
span]:line-clamp-1",
+ "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
{...props}
>
{children}
-
+
));
@@ -154,14 +154,14 @@ const SelectItem = React.forwardRef<
-
+
-
+
{children}
diff --git a/ui-v2/src/components/ui/sheet.tsx b/ui-v2/src/components/ui/sheet.tsx
index 77b526687619..8ce09fc60954 100644
--- a/ui-v2/src/components/ui/sheet.tsx
+++ b/ui-v2/src/components/ui/sheet.tsx
@@ -70,8 +70,8 @@ const SheetContent = React.forwardRef<
className={cn(sheetVariants({ side }), className)}
{...props}
>
-
-
+
+
Close
{children}
diff --git a/ui-v2/src/components/ui/sidebar/sidebar.tsx b/ui-v2/src/components/ui/sidebar/sidebar.tsx
index 7dc46100d591..c425ac164222 100644
--- a/ui-v2/src/components/ui/sidebar/sidebar.tsx
+++ b/ui-v2/src/components/ui/sidebar/sidebar.tsx
@@ -128,7 +128,7 @@ const SidebarProvider = React.forwardRef<
} as React.CSSProperties
}
className={cn(
- "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+ "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
className,
)}
ref={ref}
@@ -169,7 +169,7 @@ const Sidebar = React.forwardRef<
return (
{children}
@@ -264,7 +264,7 @@ const SidebarTrigger = React.forwardRef<
data-sidebar="trigger"
variant="ghost"
size="icon"
- className={cn("h-7 w-7", className)}
+ className={cn("size-7", className)}
onClick={(event) => {
onClick?.(event);
toggleSidebar();
@@ -296,9 +296,9 @@ const SidebarRail = React.forwardRef
(
title="Toggle Sidebar"
className={cn(
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
- "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+ "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 group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+ "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,
@@ -321,7 +321,7 @@ const SidebarInset = React.forwardRef(
ref={ref}
className={cn(
"relative flex min-h-svh flex-1 flex-col bg-background",
- "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+ "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
className,
)}
{...props}
@@ -463,7 +463,7 @@ const SidebarGroupLabel = React.forwardRef<
ref={ref}
data-sidebar="group-label"
className={cn(
- "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+ "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
className,
)}
@@ -489,9 +489,9 @@ const SidebarGroupAction = React.forwardRef<
ref={ref}
data-sidebar="group-action"
className={cn(
- "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+ "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
- "after:absolute after:-inset-2 after:md:hidden",
+ "after:absolute after:-inset-2 md:after:hidden",
"group-data-[collapsible=icon]:hidden",
className,
)}
@@ -551,7 +551,7 @@ const SidebarMenuItem = React.forwardRef(
SidebarMenuItem.displayName = "SidebarMenuItem";
const sidebarMenuButtonVariants = cva(
- "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] 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 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
@@ -562,7 +562,7 @@ const sidebarMenuButtonVariants = cva(
size: {
default: "h-8 text-sm",
sm: "h-7 text-xs",
- lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
},
},
defaultVariants: {
@@ -648,9 +648,9 @@ const SidebarMenuAction = React.forwardRef<
ref={ref}
data-sidebar="menu-action"
className={cn(
- "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+ "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
- "after:absolute after:-inset-2 after:md:hidden",
+ "after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
@@ -718,7 +718,7 @@ const SidebarMenuSkeleton = React.forwardRef<
/>
)}
span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+ "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
diff --git a/ui-v2/src/components/ui/stepper/stepper.tsx b/ui-v2/src/components/ui/stepper/stepper.tsx
index 27bd18215395..8f47c6e76d6f 100644
--- a/ui-v2/src/components/ui/stepper/stepper.tsx
+++ b/ui-v2/src/components/ui/stepper/stepper.tsx
@@ -82,7 +82,7 @@ const Step = ({
) : (
@@ -107,7 +107,7 @@ type StepIconProps = {
const StepIcon = ({ isActive = false, label }: StepIconProps) => (
diff --git a/ui-v2/src/components/ui/switch.tsx b/ui-v2/src/components/ui/switch.tsx
index 161f807d129c..8a6d04f6e32a 100644
--- a/ui-v2/src/components/ui/switch.tsx
+++ b/ui-v2/src/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
diff --git a/ui-v2/src/components/ui/table.tsx b/ui-v2/src/components/ui/table.tsx
index 58c1178d0b59..45041fb184b7 100644
--- a/ui-v2/src/components/ui/table.tsx
+++ b/ui-v2/src/components/ui/table.tsx
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
tr]:last:border-b-0",
+ "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
className,
)}
{...props}
diff --git a/ui-v2/src/components/ui/tabs.tsx b/ui-v2/src/components/ui/tabs.tsx
index d855715ca022..5cfd2843df91 100644
--- a/ui-v2/src/components/ui/tabs.tsx
+++ b/ui-v2/src/components/ui/tabs.tsx
@@ -35,7 +35,7 @@ const TabsTrigger = React.forwardRef<
(
onChange={handleInputChange}
onKeyDown={handleInputKeyDown}
onBlur={handleInputBlur(onBlur)}
- className="flex-grow border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+ className="grow border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
placeholder={placeholder}
aria-label={placeholder}
{...props}
diff --git a/ui-v2/src/components/ui/textarea.tsx b/ui-v2/src/components/ui/textarea.tsx
index 9af86df8beab..76030728ea8c 100644
--- a/ui-v2/src/components/ui/textarea.tsx
+++ b/ui-v2/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
return (