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

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';
 

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';

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';
 

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

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

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';
 

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;
 

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 (

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';
 

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';
 

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

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';
 

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';
 

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';
 

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';
 

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';
 

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';
 

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';
 

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';
 

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';
 

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

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';
 

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';
 

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';