Dependencies Updates, Sidebar fixes, default plan, Radix single package (#297)

* Refactor Radix UI imports and update package dependencies, fix Sidebar "group" references, add default value to plan picker to preselect a plan
2025-07-11 16:57:27 +07:00
parent 1d734e6818
commit 50337298fd
72 changed files with 1902 additions and 1263 deletions
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -10,30 +10,12 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.1.1",
-    "@radix-ui/react-accordion": "1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "1.1.11",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toast": "^1.2.14",
-    "@radix-ui/react-tooltip": "1.2.7",
+    "@radix-ui/react-icons": "^1.3.2",
    "clsx": "^2.1.1",
    "cmdk": "1.1.1",
    "input-otp": "1.4.2",
-    "lucide-react": "^0.523.0",
+    "lucide-react": "^0.525.0",
+    "radix-ui": "1.4.2",
    "react-dropzone": "^14.3.8",
    "react-top-loading-bar": "3.0.2",
    "recharts": "2.15.3",
@@ -43,26 +25,25 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.50.2",
-    "@tanstack/react-query": "5.81.2",
+    "@supabase/supabase-js": "2.50.5",
+    "@tanstack/react-query": "5.82.0",
    "@tanstack/react-table": "^8.21.3",
    "@types/react": "19.1.8",
    "@types/react-dom": "19.1.6",
    "class-variance-authority": "^0.7.1",
    "date-fns": "^4.1.0",
-    "eslint": "^9.29.0",
-    "next": "15.3.4",
+    "eslint": "^9.30.1",
+    "next": "15.3.5",
    "next-themes": "0.4.6",
-    "prettier": "^3.6.1",
-    "react-day-picker": "^9.7.0",
-    "react-hook-form": "^7.58.1",
-    "react-i18next": "^15.5.3",
-    "sonner": "^2.0.5",
-    "tailwindcss": "4.1.10",
+    "prettier": "^3.6.2",
+    "react-day-picker": "^9.8.0",
+    "react-hook-form": "^7.60.0",
+    "react-i18next": "^15.6.0",
+    "sonner": "^2.0.6",
+    "tailwindcss": "4.1.11",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.8.3",
-    "zod": "^3.25.67"
+    "zod": "^3.25.74"
  },
  "prettier": "@kit/prettier-config",
  "imports": {
--- a/packages/ui/src/makerkit/card-button.tsx
+++ b/packages/ui/src/makerkit/card-button.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';

-import { Slot, Slottable } from '@radix-ui/react-slot';
 import { ChevronRight } from 'lucide-react';
+import { Slot } from 'radix-ui';

 import { cn } from '../lib/utils';

@@ -12,7 +12,7 @@ export const CardButton: React.FC<
    children: React.ReactNode;
  } & React.ButtonHTMLAttributes<HTMLButtonElement>
 > = function CardButton({ className, asChild, ...props }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : 'button';

  return (
    <Comp
@@ -22,7 +22,7 @@ export const CardButton: React.FC<
      )}
      {...props}
    >
-      <Slottable>{props.children}</Slottable>
+      <Slot.Slottable>{props.children}</Slot.Slottable>
    </Comp>
  );
 };
@@ -33,7 +33,7 @@ export const CardButtonTitle: React.FC<
    children: React.ReactNode;
  } & React.HTMLAttributes<HTMLDivElement>
 > = function CardButtonTitle({ className, asChild, ...props }) {
-  const Comp = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot.Root : 'div';

  return (
    <Comp
@@ -43,7 +43,7 @@ export const CardButtonTitle: React.FC<
      )}
      {...props}
    >
-      <Slottable>{props.children}</Slottable>
+      <Slot.Slottable>{props.children}</Slot.Slottable>
    </Comp>
  );
 };
@@ -60,11 +60,11 @@ export const CardButtonHeader: React.FC<
  displayArrow = true,
  ...props
 }) {
-  const Comp = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot.Root : 'div';

  return (
    <Comp className={cn(className, 'p-4')} {...props}>
-      <Slottable>
+      <Slot.Slottable>
        {props.children}

        <ChevronRight
@@ -75,7 +75,7 @@ export const CardButtonHeader: React.FC<
            },
          )}
        />
-      </Slottable>
+      </Slot.Slottable>
    </Comp>
  );
 };
@@ -86,11 +86,11 @@ export const CardButtonContent: React.FC<
    children: React.ReactNode;
  } & React.HTMLAttributes<HTMLDivElement>
 > = function CardButtonContent({ className, asChild, ...props }) {
-  const Comp = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot.Root : 'div';

  return (
    <Comp className={cn(className, 'flex flex-1 flex-col px-4')} {...props}>
-      <Slottable>{props.children}</Slottable>
+      <Slot.Slottable>{props.children}</Slot.Slottable>
    </Comp>
  );
 };
@@ -101,7 +101,7 @@ export const CardButtonFooter: React.FC<
    children: React.ReactNode;
  } & React.HTMLAttributes<HTMLDivElement>
 > = function CardButtonFooter({ className, asChild, ...props }) {
-  const Comp = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot.Root : 'div';

  return (
    <Comp
@@ -111,7 +111,7 @@ export const CardButtonFooter: React.FC<
      )}
      {...props}
    >
-      <Slottable>{props.children}</Slottable>
+      <Slot.Slottable>{props.children}</Slot.Slottable>
    </Comp>
  );
 };
--- a/packages/ui/src/makerkit/cookie-banner.tsx
+++ b/packages/ui/src/makerkit/cookie-banner.tsx
@@ -2,7 +2,7 @@

 import { useCallback, useMemo, useState } from 'react';

-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Dialog as DialogPrimitive } from 'radix-ui';

 import { Button } from '../shadcn/button';
 import { Heading } from '../shadcn/heading';
--- a/packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx
+++ b/packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx
@@ -1,4 +1,4 @@
-import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Slot } from 'radix-ui';

 import { cn } from '../../lib/utils';

@@ -7,7 +7,7 @@ export const GradientSecondaryText: React.FC<
    asChild?: boolean;
  }
 > = function GradientSecondaryTextComponent({ className, ...props }) {
-  const Comp = props.asChild ? Slot : 'span';
+  const Comp = props.asChild ? Slot.Root : 'span';

  return (
    <Comp
@@ -17,7 +17,7 @@ export const GradientSecondaryText: React.FC<
      )}
      {...props}
    >
-      <Slottable>{props.children}</Slottable>
+      <Slot.Slottable>{props.children}</Slot.Slottable>
    </Comp>
  );
 };
--- a/packages/ui/src/makerkit/marketing/hero-title.tsx
+++ b/packages/ui/src/makerkit/marketing/hero-title.tsx
@@ -1,4 +1,4 @@
-import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Slot } from 'radix-ui';

 import { cn } from '../../lib/utils';

@@ -7,7 +7,7 @@ export const HeroTitle: React.FC<
    asChild?: boolean;
  }
 > = function HeroTitleComponent({ children, className, ...props }) {
-  const Comp = props.asChild ? Slot : 'h1';
+  const Comp = props.asChild ? Slot.Root : 'h1';

  return (
    <Comp
@@ -17,7 +17,7 @@ export const HeroTitle: React.FC<
      )}
      {...props}
    >
-      <Slottable>{children}</Slottable>
+      <Slot.Slottable>{children}</Slot.Slottable>
    </Comp>
  );
 };
--- a/packages/ui/src/makerkit/marketing/pill.tsx
+++ b/packages/ui/src/makerkit/marketing/pill.tsx
@@ -1,4 +1,4 @@
-import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Slot } from 'radix-ui';

 import { cn } from '../../lib/utils';
 import { GradientSecondaryText } from './gradient-secondary-text';
@@ -9,7 +9,7 @@ export const Pill: React.FC<
    asChild?: boolean;
  }
 > = function PillComponent({ className, asChild, ...props }) {
-  const Comp = asChild ? Slot : 'h3';
+  const Comp = asChild ? Slot.Root : 'h3';

  return (
    <Comp
@@ -28,13 +28,13 @@ export const Pill: React.FC<
          {props.label}
        </span>
      )}
-      <Slottable>
+      <Slot.Slottable>
        <GradientSecondaryText
          className={'flex items-center gap-x-2 font-semibold tracking-tight'}
        >
          {props.children}
        </GradientSecondaryText>
-      </Slottable>
+      </Slot.Slottable>
    </Comp>
  );
 };
@@ -44,7 +44,7 @@ export const PillActionButton: React.FC<
    asChild?: boolean;
  }
 > = ({ asChild, ...props }) => {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : 'button';

  return (
    <Comp
--- a/packages/ui/src/makerkit/multi-step-form.tsx
+++ b/packages/ui/src/makerkit/multi-step-form.tsx
@@ -11,8 +11,8 @@ import React, {
  useState,
 } from 'react';

-import { Slot, Slottable } from '@radix-ui/react-slot';
 import { useMutation } from '@tanstack/react-query';
+import { Slot } from 'radix-ui';
 import { Path, UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';

@@ -136,11 +136,11 @@ export const MultiStepFormStep: React.FC<
    } & HTMLProps<HTMLDivElement>
  >
 > = function MultiStepFormStep({ children, asChild, ...props }) {
-  const Cmp = asChild ? Slot : 'div';
+  const Cmp = asChild ? Slot.Root : 'div';

  return (
    <Cmp {...props}>
-      <Slottable>{children}</Slottable>
+      <Slot.Slottable>{children}</Slot.Slottable>
    </Cmp>
  );
 };
@@ -331,11 +331,11 @@ export const MultiStepFormHeader: React.FC<
    } & HTMLProps<HTMLDivElement>
  >
 > = function MultiStepFormHeader({ children, asChild, ...props }) {
-  const Cmp = asChild ? Slot : 'div';
+  const Cmp = asChild ? Slot.Root : 'div';

  return (
    <Cmp {...props}>
-      <Slottable>{children}</Slottable>
+      <Slot.Slottable>{children}</Slot.Slottable>
    </Cmp>
  );
 };
@@ -347,11 +347,11 @@ export const MultiStepFormFooter: React.FC<
    } & HTMLProps<HTMLDivElement>
  >
 > = function MultiStepFormFooter({ children, asChild, ...props }) {
-  const Cmp = asChild ? Slot : 'div';
+  const Cmp = asChild ? Slot.Root : 'div';

  return (
    <Cmp {...props}>
-      <Slottable>{children}</Slottable>
+      <Slot.Slottable>{children}</Slot.Slottable>
    </Cmp>
  );
 };
--- a/packages/ui/src/shadcn/accordion.tsx
+++ b/packages/ui/src/shadcn/accordion.tsx
@@ -2,8 +2,8 @@

 import * as React from 'react';

-import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { Accordion as AccordionPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/alert-dialog.tsx
+++ b/packages/ui/src/shadcn/alert-dialog.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';
 import { buttonVariants } from './button';
--- a/packages/ui/src/shadcn/avatar.tsx
+++ b/packages/ui/src/shadcn/avatar.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { Avatar as AvatarPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/breadcrumb.tsx
+++ b/packages/ui/src/shadcn/breadcrumb.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';

 import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { Slot } from '@radix-ui/react-slot';
+import { Slot } from 'radix-ui';

 import { cn } from '../lib/utils';

@@ -42,7 +42,7 @@ const BreadcrumbLink: React.FC<
    asChild?: boolean;
  }
 > = ({ asChild, className, ...props }) => {
-  const Comp = asChild ? Slot : 'a';
+  const Comp = asChild ? Slot.Root : 'a';

  return (
    <Comp
--- a/packages/ui/src/shadcn/button.tsx
+++ b/packages/ui/src/shadcn/button.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';

-import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';

 import { cn } from '../lib/utils';

@@ -49,7 +49,7 @@ const Button: React.FC<ButtonProps> = ({
  asChild = false,
  ...props
 }) => {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : 'button';

  return (
    <Comp
--- a/packages/ui/src/shadcn/checkbox.tsx
+++ b/packages/ui/src/shadcn/checkbox.tsx
@@ -2,8 +2,8 @@

 import * as React from 'react';

-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/collapsible.tsx
+++ b/packages/ui/src/shadcn/collapsible.tsx
@@ -1,6 +1,6 @@
 'use client';

-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';

 const Collapsible = CollapsiblePrimitive.Root;

--- a/packages/ui/src/shadcn/command.tsx
+++ b/packages/ui/src/shadcn/command.tsx
@@ -2,7 +2,6 @@

 import * as React from 'react';

-import { type DialogProps } from '@radix-ui/react-dialog';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Command as CommandPrimitive } from 'cmdk';

@@ -22,7 +21,7 @@ const Command: React.FC<
 );
 Command.displayName = CommandPrimitive.displayName;

-type CommandDialogProps = DialogProps;
+type CommandDialogProps = React.ComponentProps<typeof Dialog>;

 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
--- a/packages/ui/src/shadcn/dialog.tsx
+++ b/packages/ui/src/shadcn/dialog.tsx
@@ -2,8 +2,8 @@

 import * as React from 'react';

-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
+import { Dialog as DialogPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/dropdown-menu.tsx
+++ b/packages/ui/src/shadcn/dropdown-menu.tsx
@@ -2,12 +2,12 @@

 import * as React from 'react';

-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import {
  CheckIcon,
  ChevronRightIcon,
  DotFilledIcon,
 } from '@radix-ui/react-icons';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/form.tsx
+++ b/packages/ui/src/shadcn/form.tsx
@@ -2,8 +2,8 @@

 import * as React from 'react';

-import type * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
+import { Label as LabelPrimitive } from 'radix-ui';
+import { Slot } from 'radix-ui';
 import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';

@@ -97,14 +97,14 @@ const FormLabel: React.FC<
 };
 FormLabel.displayName = 'FormLabel';

-const FormControl: React.FC<React.ComponentPropsWithoutRef<typeof Slot>> = ({
-  ...props
-}) => {
+const FormControl: React.FC<
+  React.ComponentPropsWithoutRef<typeof Slot.Root>
+> = ({ ...props }) => {
  const { error, formItemId, formDescriptionId, formMessageId } =
    useFormField();

  return (
-    <Slot
+    <Slot.Root
      id={formItemId}
      aria-describedby={
        !error
--- a/packages/ui/src/shadcn/label.tsx
+++ b/packages/ui/src/shadcn/label.tsx
@@ -2,8 +2,8 @@

 import * as React from 'react';

-import * as LabelPrimitive from '@radix-ui/react-label';
 import { type VariantProps, cva } from 'class-variance-authority';
+import { Label as LabelPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/navigation-menu.tsx
+++ b/packages/ui/src/shadcn/navigation-menu.tsx
@@ -3,8 +3,8 @@
 import * as React from 'react';

 import { ChevronDownIcon } from '@radix-ui/react-icons';
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
+import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/popover.tsx
+++ b/packages/ui/src/shadcn/popover.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/progress.tsx
+++ b/packages/ui/src/shadcn/progress.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { Progress as ProgressPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/radio-group.tsx
+++ b/packages/ui/src/shadcn/radio-group.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';

 import { CheckIcon } from '@radix-ui/react-icons';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/scroll-area.tsx
+++ b/packages/ui/src/shadcn/scroll-area.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/select.tsx
+++ b/packages/ui/src/shadcn/select.tsx
@@ -8,7 +8,7 @@ import {
  ChevronDownIcon,
  ChevronUpIcon,
 } from '@radix-ui/react-icons';
-import * as SelectPrimitive from '@radix-ui/react-select';
+import { Select as SelectPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/separator.tsx
+++ b/packages/ui/src/shadcn/separator.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { Separator as SeparatorPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/sheet.tsx
+++ b/packages/ui/src/shadcn/sheet.tsx
@@ -2,9 +2,9 @@

 import * as React from 'react';

-import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import { type VariantProps, cva } from 'class-variance-authority';
+import { Dialog as SheetPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/sidebar.tsx
+++ b/packages/ui/src/shadcn/sidebar.tsx
@@ -5,9 +5,9 @@ import * as React from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

-import { Slot } from '@radix-ui/react-slot';
 import { VariantProps, cva } from 'class-variance-authority';
 import { ChevronDown, PanelLeft } from 'lucide-react';
+import { Slot } from 'radix-ui';
 import { useTranslation } from 'react-i18next';

 import { useIsMobile } from '../hooks/use-mobile';
@@ -149,26 +149,24 @@ const SidebarProvider: React.FC<

  return (
    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          style={
-            {
-              '--sidebar-width': sidebarWidth,
-              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          data-minimized={!open}
-          className={cn(
-            'group text-sidebar-foreground has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-            className,
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
+      <div
+        style={
+          {
+            '--sidebar-width': sidebarWidth,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        data-minimized={!open}
+        className={cn(
+          'group/sidebar text-sidebar-foreground has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
    </SidebarContext.Provider>
  );
 };
@@ -464,7 +462,7 @@ SidebarGroup.displayName = 'SidebarGroup';
 const SidebarGroupLabel: React.FC<
  React.ComponentProps<'div'> & { asChild?: boolean }
 > = ({ className, asChild = false, ...props }) => {
-  const Comp = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot.Root : 'div';

  return (
    <Comp
@@ -483,7 +481,7 @@ SidebarGroupLabel.displayName = 'SidebarGroupLabel';
 const SidebarGroupAction: React.FC<
  React.ComponentProps<'button'> & { asChild?: boolean }
 > = ({ className, asChild = false, ...props }) => {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : 'button';

  return (
    <Comp
@@ -520,7 +518,7 @@ const SidebarMenu: React.FC<React.ComponentProps<'ul'>> = ({
  <ul
    data-sidebar="menu"
    className={cn(
-      'flex w-full min-w-0 flex-col gap-1 group-data-[minimized=true]:items-center',
+      'flex w-full min-w-0 flex-col gap-1 group-data-[minimized=true]/sidebar:items-center',
      className,
    )}
    {...props}
@@ -580,7 +578,7 @@ const SidebarMenuButton: React.FC<
  className,
  ...props
 }) => {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : 'button';
  const { isMobile, open } = useSidebar();
  const { t } = useTranslation();

@@ -607,15 +605,17 @@ const SidebarMenuButton: React.FC<
  }

  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={isMobile || open}
-        {...tooltip}
-      />
-    </Tooltip>
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={isMobile || open}
+          {...tooltip}
+        />
+      </Tooltip>
+    </TooltipProvider>
  );
 };

@@ -627,7 +627,7 @@ const SidebarMenuAction: React.FC<
    showOnHover?: boolean;
  }
 > = ({ className, asChild = false, showOnHover = false, ...props }) => {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : 'button';

  return (
    <Comp
@@ -735,7 +735,7 @@ const SidebarMenuSubButton: React.FC<
    isActive?: boolean;
  }
 > = ({ asChild = false, size = 'md', isActive, className, ...props }) => {
-  const Comp = asChild ? Slot : 'a';
+  const Comp = asChild ? Slot.Root : 'a';

  return (
    <Comp
--- a/packages/ui/src/shadcn/switch.tsx
+++ b/packages/ui/src/shadcn/switch.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitives } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/tabs.tsx
+++ b/packages/ui/src/shadcn/tabs.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Tabs as TabsPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';

--- a/packages/ui/src/shadcn/tooltip.tsx
+++ b/packages/ui/src/shadcn/tooltip.tsx
@@ -2,7 +2,7 @@

 import * as React from 'react';

-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';

 import { cn } from '../lib/utils';