@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/ui/popover.tsx

@@ -1,49 +1,33 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 /**
  * Popover root based on Radix primitives.
  */
-function PopoverRoot({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {
+function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="popover" {...props} />;
-}
-
-const Popover = createClientOnlyComponent(PopoverRoot, PopoverFallback);
-
 /**
  * Element that opens the popover.
  */
-function PopoverTriggerRoot({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {
+function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
-function PopoverTriggerFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="popover-trigger" {...props}>
-      {children}
-    </button>
-  );
+/**
+ * Element that opens the popover.
+ */
+function PopoverClose({ ...props }: ComponentProps<typeof PopoverPrimitive.Close>) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
 }
 
-const PopoverTrigger = createClientOnlyComponent(PopoverTriggerRoot, PopoverTriggerFallback);
-
 /**
  * Floating content panel for the popover.
  */
-function PopoverContentRoot({
+function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
@@ -84,31 +68,8 @@ function PopoverContentRoot({
   );
 }
 
-function PopoverContentFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="popover-content"
-      className={cn(
-        "bg-bg-primary",
-        "rounded-uk-lg",
-        "p-xl",
-        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        "z-20",
-        "border-none",
-        "outline-hidden",
-        "liquid-dark:liquid-dark-bg",
-        "liquid-light:liquid-light-bg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const PopoverContent = createClientOnlyComponent(PopoverContentRoot, PopoverContentFallback);
-
 function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>) {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverClose, PopoverContent, PopoverAnchor };

package/src/ui/progress.tsx

@@ -1,20 +1,13 @@
-import { type ComponentProps } from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type ComponentProps } from "react";
 
-import { cn } from "../hooks"
+import { cn } from "../hooks";
 
-function Progress({
-  className,
-  value,
-  ...props
-}: ComponentProps<typeof ProgressPrimitive.Root>) {
+function Progress({ className, value, ...props }: ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
-        "bg-bg-secondary relative h-2 w-full overflow-hidden rounded-uk-xl",
-        className
-      )}
+      className={cn("bg-bg-secondary rounded-uk-xl relative h-2 w-full overflow-hidden", className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
@@ -23,7 +16,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  )
+  );
 }
 
-export { Progress }
+export { Progress };

package/src/ui/select.tsx

@@ -100,7 +100,9 @@ export const selectTriggerVariants = cva(
 
 interface SelectTriggerProps
   extends Omit<ComponentProps<typeof SelectPrimitive.Trigger>, "ref">,
-    VariantProps<typeof selectTriggerVariants> {}
+    VariantProps<typeof selectTriggerVariants> {
+  icon?: ReactNode;
+}
 
 /**
  * Trigger button for the select.
@@ -113,6 +115,7 @@ export function SelectTrigger({
   state,
   font,
   align,
+  icon,
   ...props
 }: SelectTriggerProps) {
   return (
@@ -133,7 +136,7 @@ export function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="opacity-50" />
+        {icon || <ChevronDownIcon className="opacity-50" />}
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );

package/src/ui/separator.tsx

@@ -11,7 +11,7 @@ function Separator({
 }: ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
-      data-slot="separator-root"
+      data-slot="separator"
       decorative={decorative}
       orientation={orientation}
       className={cn(

package/src/ui/sheet.tsx

@@ -2,75 +2,29 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
 import { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 /**
  * Sheet root using dialog primitives.
  */
-function SheetRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
+function Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
-function SheetFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="sheet" {...props} />;
-}
-
-const Sheet = createClientOnlyComponent(SheetRoot, SheetFallback);
-
 /**
  * Trigger element that opens the sheet.
  */
-function SheetTriggerRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-function SheetTriggerFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="sheet-trigger" {...props}>
-      {children}
-    </button>
-  );
-}
-
-const SheetTrigger = createClientOnlyComponent(SheetTriggerRoot, SheetTriggerFallback);
-
 /**
  * Close control for the sheet.
  */
-function SheetCloseRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
-  return (
-    <SheetPrimitive.Close
-      data-slot="sheet-close"
-      className={cn("focus:ring-0 focus:outline-none")}
-      {...props}
-    />
-  );
+function SheetClose({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-function SheetCloseFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="sheet-close" className={cn("focus:ring-0 focus:outline-none")} {...props}>
-      {children}
-    </button>
-  );
-}
-
-const SheetClose = createClientOnlyComponent(SheetCloseRoot, SheetCloseFallback);
-
 /**
  * Portal for sheet overlay and content.
  */
@@ -97,7 +51,7 @@ function SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimit
 /**
  * Sliding panel content for the sheet.
  */
-function SheetContentRoot({
+function SheetContent({
   className,
   children,
   side = "right",
@@ -111,21 +65,21 @@ function SheetContentRoot({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-[340px]",
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
           className,
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-bg-primary focus:ring-bg-mask data-[state=open]:bg-bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
@@ -134,38 +88,6 @@ function SheetContentRoot({
   );
 }
 
-function SheetContentFallback({
-  className,
-  children,
-  side = "right",
-  ...props
-}: ComponentProps<"div"> & {
-  side?: "top" | "right" | "bottom" | "left";
-}) {
-  return (
-    <div
-      data-slot="sheet-content"
-      className={cn(
-        "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        side === "right" && "inset-y-0 right-0 h-full w-[340px]",
-        side === "left" && "inset-y-0 left-0 h-full w-[340px]",
-        side === "top" && "inset-x-0 top-0 h-auto",
-        side === "bottom" && "inset-x-0 bottom-0 h-auto",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <button className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
-        <XIcon className="size-4" />
-        <span className="sr-only">Close</span>
-      </button>
-    </div>
-  );
-}
-
-const SheetContent = createClientOnlyComponent(SheetContentRoot, SheetContentFallback);
-
 /**
  * Header section inside the sheet.
  */
@@ -195,7 +117,7 @@ function SheetFooter({ className, ...props }: ComponentProps<"div">) {
 /**
  * Title text for the sheet.
  */
-function SheetTitleRoot({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
@@ -205,22 +127,10 @@ function SheetTitleRoot({ className, ...props }: ComponentProps<typeof SheetPrim
   );
 }
 
-function SheetTitleFallback({ className, ...props }: ComponentProps<"h2">) {
-  return (
-    <h2
-      data-slot="sheet-title"
-      className={cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className)}
-      {...props}
-    />
-  );
-}
-
-const SheetTitle = createClientOnlyComponent(SheetTitleRoot, SheetTitleFallback);
-
 /**
  * Secondary description text for the sheet.
  */
-function SheetDescriptionRoot({
+function SheetDescription({
   className,
   ...props
 }: ComponentProps<typeof SheetPrimitive.Description>) {
@@ -233,18 +143,6 @@ function SheetDescriptionRoot({
   );
 }
 
-function SheetDescriptionFallback({ className, ...props }: ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="sheet-description"
-      className={cn("text-text-secondary text-uk-md leading-uk-md", className)}
-      {...props}
-    />
-  );
-}
-
-const SheetDescription = createClientOnlyComponent(SheetDescriptionRoot, SheetDescriptionFallback);
-
 export {
   Sheet,
   SheetTrigger,

package/src/ui/sidebar.tsx

@@ -2,15 +2,15 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 import {
+  ComponentProps,
   createContext,
+  CSSProperties,
+  MouseEvent,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
-  CSSProperties,
-  ComponentProps,
-  MouseEvent,
 } from "react";
 
 import { cn } from "../hooks";
@@ -152,7 +152,10 @@ function Sidebar({
     return (
       <div
         data-slot="sidebar"
-        className={cn("flex h-full w-(--sidebar-width) flex-col", className)}
+        className={cn(
+          "bg-bg-primary text-text-primary flex h-full w-(--sidebar-width) flex-col",
+          className,
+        )}
         {...props}
       >
         {children}
@@ -187,7 +190,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden md:block"
+      className="group peer text-text-primary hidden md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -232,7 +235,7 @@ function Sidebar({
 }
 
 function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof Button>) {
-  const { toggleSidebar, state } = useSidebar();
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -240,12 +243,7 @@ function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof
       data-slot="sidebar-trigger"
       variant="ghost"
       icon={true}
-      className={cn(
-        "absolute top-[0px] size-7 transition-[left] duration-200 ease-linear",
-        state === "collapsed" && "left-[2px]",
-        state === "expanded" && "left-[var(--sidebar-width)]",
-        className,
-      )}
+      className={cn("size-7 transition-[left] duration-200 ease-linear", className)}
       onClick={(event: MouseEvent<HTMLButtonElement>) => {
         onClick?.(event);
         toggleSidebar();
@@ -288,7 +286,7 @@ function SidebarInset({ className, ...props }: ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col",
+        "bg-bg-primary relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:rounded-uk-xl md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
@@ -338,7 +336,7 @@ function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separat
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-line-primary", className)}
+      className={cn("bg-line-primary mr-0", className)}
       {...props}
     />
   );
@@ -350,7 +348,7 @@ function SidebarContent({ className, ...props }: ComponentProps<"div">) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "px-md lgflex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "px-md flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className,
       )}
       {...props}
@@ -454,17 +452,18 @@ function SidebarMenuItem({ className, ...props }: ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounde-uk-md text-left text-uk-lg leading-uk-lg outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary focus-visible:ring-2 active:text-text-highlight 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 font-medium group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounded-uk-md p-2 text-left text-uk-lg leading-uk-lg outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-bg-secondary active:text-text-highlight 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]:font-medium data-[active=true]:bg-bg-secondary data-[active=true]:text-text-highlight group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='size-'])]:shrink-0",
   {
     variants: {
       variant: {
-        default: "",
-        outline: "",
+        default: "hover:bg-bg-secondary hover:text-secondary",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-bg-tertiary hover:text-text-tertiary hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-[36px] text-uk-lg leading-uk-lg",
         sm: "h-[30px] text-uk-sm leading-uk-sm",
-        lg: "h-[32px] text-uk-lg leading-uk-lg group-data-[collapsible=icon]:p-0!",
+        lg: "h-[32px] text-uk-lg leading-uk-lg px-lg py-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {

package/src/ui/switch.tsx

@@ -3,16 +3,19 @@ import { type ComponentProps } from "react";
 
 import { cn } from "../hooks";
 
+interface Props extends ComponentProps<typeof SwitchPrimitive.Root> {
+  thumbClassName?: string;
+}
+
 /**
  * Toggle switch control.
  * todo: need to add sizing - Ge
  */
-function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+function Switch({ className, thumbClassName, ...props }: Props) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        className,
         "group",
         "w-[32px]",
         "h-[16px]",
@@ -21,6 +24,7 @@ function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.R
         "aria-checked:bg-brand-primary",
         "disabled:bg-bg-secondary",
         "disabled:cursor-not-allowed",
+        className,
       )}
       {...props}
     >
@@ -36,6 +40,7 @@ function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.R
           "duration-200",
           "translate-x-[2px]",
           "data-[state=checked]:translate-x-[18px]",
+          thumbClassName,
         )}
       />
     </SwitchPrimitive.Root>

package/src/ui/tabs.tsx

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { type ComponentProps, createContext, useContext } from "react";
 
 import { TabsCursorProvider, useTabsCursor } from "../highlight-cursor/tabs-cursor-context";
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 interface TabsContextType {
   size?: "sm" | "base" | "lg";
@@ -29,7 +29,7 @@ interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root> {
  * @param props -
  * @param className -
  * @param size - Control size ("sm" | "base" | "lg"), defaults to "base" */
-function TabsRoot({ className, size = "base", ...props }: TabsProps) {
+function Tabs({ className, size = "base", ...props }: TabsProps) {
   return (
     <TabsContext.Provider value={{ size }}>
       <TabsPrimitive.Root
@@ -41,16 +41,6 @@ function TabsRoot({ className, size = "base", ...props }: TabsProps) {
   );
 }
 
-function TabsFallback({ className, size = "base", ...props }: TabsProps & ComponentProps<"div">) {
-  return (
-    <TabsContext.Provider value={{ size }}>
-      <div data-slot="tabs" className={cn("flex w-full flex-col", className)} {...props} />
-    </TabsContext.Provider>
-  );
-}
-
-const Tabs = createClientOnlyComponent(TabsRoot, TabsFallback);
-
 const tabsListVariants = cva(["inline-flex", "items-center", "justify-center"], {
   variants: {
     size: {
@@ -69,38 +59,41 @@ type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
 /**
  * Container for tab triggers. Emits cursor interactions for visual effects.
  */
-function TabsListRoot({ className, ...props }: TabsListProps) {
-  const { setCursorTarget } = useTabsCursor();
+function TabsList({ className, onMouseLeave, ...props }: TabsListProps) {
   const { size } = useTabsContext();
   return (
     <TabsCursorProvider>
-      <TabsPrimitive.List
-        onMouseLeave={() => setCursorTarget(null)}
-        data-slot="tabs-list"
-        className={cn(tabsListVariants({ size }), "justify-start", className)}
-        {...props}
-      />
+      <TabsListInner className={className} size={size} onMouseLeave={onMouseLeave} {...props} />
     </TabsCursorProvider>
   );
 }
 
-function TabsListFallback({ className, ...props }: TabsListProps & ComponentProps<"div">) {
-  const { size } = useTabsContext();
+function TabsListInner({
+  className,
+  size,
+  onMouseLeave,
+  ...props
+}: TabsListProps & { size?: "sm" | "base" | "lg" }) {
+  const { setCursorTarget } = useTabsCursor();
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    setCursorTarget(null);
+    onMouseLeave?.(e);
+  };
+
   return (
-    <TabsCursorProvider>
-      <div
-        data-slot="tabs-list"
-        className={cn(tabsListVariants({ size }), "justify-start", className)}
-        {...props}
-      />
-    </TabsCursorProvider>
+    <TabsPrimitive.List
+      onMouseLeave={handleMouseLeave}
+      data-slot="tabs-list"
+      className={cn(tabsListVariants({ size }), "justify-start", className)}
+      {...props}
+    />
   );
 }
 
-const TabsList = createClientOnlyComponent(TabsListRoot, TabsListFallback);
-
 const tabsTriggerVariants = cva(
   [
+    "cursor-pointer",
     "inline-flex",
     "items-center",
     "justify-center",
@@ -114,8 +107,9 @@ const tabsTriggerVariants = cva(
     "shrink-0",
     "[&_svg]:shrink-0",
     "outline-none",
-    "text-text-primary",
+    "text-text-secondary",
     "data-[state=active]:bg-bg-secondary",
+    "data-[state=active]:text-text-primary",
     "data-[state=active]:font-medium",
   ],
   {
@@ -137,7 +131,7 @@ type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
 /**
  * Single tab trigger button.
  */
-function TabsTriggerRoot({ className, ...props }: TabsTriggerProps) {
+function TabsTrigger({ className, ...props }: TabsTriggerProps) {
   const { setCursorTarget } = useTabsCursor();
   const { size } = useTabsContext();
   return (
@@ -150,27 +144,12 @@ function TabsTriggerRoot({ className, ...props }: TabsTriggerProps) {
   );
 }
 
-function TabsTriggerFallback({ className, ...props }: TabsTriggerProps & ComponentProps<"button">) {
-  const { setCursorTarget } = useTabsCursor();
-  const { size } = useTabsContext();
-  return (
-    <button
-      onMouseEnter={(e) => setCursorTarget(e.currentTarget)}
-      data-slot="tabs-trigger"
-      className={cn(tabsTriggerVariants({ size }), className)}
-      {...props}
-    />
-  );
-}
-
-const TabsTrigger = createClientOnlyComponent(TabsTriggerRoot, TabsTriggerFallback);
-
 type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
 
 /**
  * Content area for a tab panel.
  */
-function TabsContentRoot({ className, ...props }: TabsContentProps) {
+function TabsContent({ className, ...props }: TabsContentProps) {
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
@@ -180,13 +159,5 @@ function TabsContentRoot({ className, ...props }: TabsContentProps) {
   );
 }
 
-function TabsContentFallback({ className, ...props }: TabsContentProps & ComponentProps<"div">) {
-  return (
-    <div data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
-  );
-}
-
-const TabsContent = createClientOnlyComponent(TabsContentRoot, TabsContentFallback);
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsListInner };
 export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };