feat: upgrade all shadcn components to latest version

- Updated 47 shadcn UI components from registry
- Replaced incorrect radix-ui package with individual @radix-ui/* packages
- Fixed import paths from @/registry/* to relative paths
- Added use-mobile hook for sidebar component
- Fixed icon-sm button size references to use icon variant
- Fixed Slot component imports in custom components
- Updated dependencies in package.json and pnpm-lock.yaml
- Build successful

Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/05fb973c-72d7-4b10-a572-8e218fe226eb

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Claude

packages/components/package.json

@@ -39,6 +39,33 @@
     "@object-ui/i18n": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.7",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.3",
+    "@radix-ui/react-navigation-menu": "^1.2.4",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -47,7 +74,6 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^1.7.0",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
     "react-day-picker": "^9.14.0",
     "react-hook-form": "^7.72.1",
     "react-resizable-panels": "^4.9.0",

packages/components/src/custom/button-group.tsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot as SlotPrimitive } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
@@ -52,7 +52,7 @@ function ButtonGroupText({
 }: React.ComponentProps<"div"> & {
   asChild?: boolean
 }) {
-  const Comp = asChild ? SlotPrimitive.Slot : "div"
+  const Comp = asChild ? SlotPrimitive : "div"
 
   return (
     <Comp

packages/components/src/custom/field.tsx

@@ -7,7 +7,7 @@
  */
 
 import * as React from "react"
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot as SlotPrimitive } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
@@ -43,7 +43,7 @@ const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           </Label>
         )}
 
-        <SlotPrimitive.Slot 
+        <SlotPrimitive 
           id={fieldId}
           aria-describedby={
             [description && descriptionId, error && errorId]
@@ -53,7 +53,7 @@ const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           aria-invalid={!!error}
         >
           {children}
-        </SlotPrimitive.Slot>
+        </SlotPrimitive>
 
         {description && !error && (
           <p

packages/components/src/custom/filter-builder.tsx

@@ -388,7 +388,7 @@ function FilterBuilder({
 
             <Button
               variant="ghost"
-              size="icon-sm"
+              size="icon"
               className="h-9 w-9 shrink-0"
               onClick={() => removeCondition(condition.id)}
             >

packages/components/src/custom/item.tsx

@@ -7,7 +7,7 @@
  */
 
 import * as React from "react"
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot as SlotPrimitive } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
@@ -67,7 +67,7 @@ function Item({
   ...props
 }: React.ComponentProps<"div"> &
   VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? SlotPrimitive.Slot : "div"
+  const Comp = asChild ? SlotPrimitive : "div"
   return (
     <Comp
       data-slot="item"

packages/components/src/custom/mobile-dialog-content.tsx

@@ -18,7 +18,7 @@
  */
 
 import * as React from 'react';
-import { Dialog as DialogPrimitive } from "radix-ui";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { DialogOverlay, DialogPortal } from '../ui/dialog';

packages/components/src/custom/sort-builder.tsx

@@ -105,7 +105,7 @@ export function SortBuilder({
              </div>
              <Button
                variant="ghost"
-               size="icon-sm"
+               size="icon"
                className="h-9 w-9 shrink-0"
                onClick={() => removeItem(item.id)}
              >

packages/components/src/renderers/complex/data-table.tsx

@@ -986,7 +986,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                               <>
                                 <Button
                                   variant="ghost"
-                                  size="icon-sm"
+                                  size="icon"
                                   onClick={() => cancelRowChanges(rowIndex)}
                                   disabled={isSaving}
                                   title="Cancel changes"
@@ -995,7 +995,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                                 </Button>
                                 <Button
                                   variant="ghost"
-                                  size="icon-sm"
+                                  size="icon"
                                   onClick={() => saveRow(rowIndex)}
                                   disabled={isSaving}
                                   title="Save row"
@@ -1007,14 +1007,14 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                               <>
                                 <Button
                                   variant="ghost"
-                                  size="icon-sm"
+                                  size="icon"
                                   onClick={() => schema.onRowEdit?.(row)}
                                 >
                                   <Edit className="h-4 w-4" />
                                 </Button>
                                 <Button
                                   variant="ghost"
-                                  size="icon-sm"
+                                  size="icon"
                                   onClick={() => schema.onRowDelete?.(row)}
                                 >
                                   <Trash2 className="h-4 w-4 text-destructive" />
@@ -1089,31 +1089,31 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
             <div className="flex items-center gap-1">
               <Button
                 variant="outline"
-                size="icon-sm"
+                size="icon"
                 onClick={() => setCurrentPage(1)}
                 disabled={currentPage === 1}
               >
                 <ChevronsLeft className="h-4 w-4" />
               </Button>
               <Button
                 variant="outline"
-                size="icon-sm"
+                size="icon"
                 onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                 disabled={currentPage === 1}
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
               <Button
                 variant="outline"
-                size="icon-sm"
+                size="icon"
                 onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                 disabled={currentPage === totalPages}
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
               <Button
                 variant="outline"
-                size="icon-sm"
+                size="icon"
                 onClick={() => setCurrentPage(totalPages)}
                 disabled={currentPage === totalPages}
               >