@object-ui/components 3.1.5 → 3.3.0

package/src/__tests__/__snapshots__/snapshot-critical.test.tsx.snap

@@ -460,7 +460,7 @@ exports[`Dialog snapshots > renders open dialog structure 1`] = `
   <div
     aria-describedby="radix-_r_2_"
     aria-labelledby="radix-_r_1_"
-    class="fixed inset-0 z-50 grid w-full bg-background p-4 shadow-lg duration-200 h-[100dvh] sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
+    class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
     data-state="open"
     id="radix-_r_0_"
     role="dialog"
@@ -496,12 +496,12 @@ exports[`Dialog snapshots > renders open dialog structure 1`] = `
       </button>
     </div>
     <button
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center"
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="lucide lucide-x h-5 w-5 sm:h-4 sm:w-4"
+        class="lucide lucide-x h-4 w-4"
         fill="none"
         height="24"
         stroke="currentColor"

package/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

package/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

package/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)}
             >

package/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"

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

package/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)}
              >

package/src/index.css

@@ -33,6 +33,14 @@
   --color-popover-foreground: hsl(var(--popover-foreground));
   --color-card: hsl(var(--card));
   --color-card-foreground: hsl(var(--card-foreground));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
 
   /* Chart colors */
   --color-chart-1: hsl(var(--chart-1));
@@ -82,6 +90,16 @@
   --chart-4: 43 74% 66%;
   --chart-5: 27 87% 67%;
 
+  /* Sidebar colors */
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+
   font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
@@ -119,6 +137,16 @@
   --chart-3: 30 80% 55%;
   --chart-4: 280 65% 60%;
   --chart-5: 340 75% 55%;
+
+  /* Sidebar colors for dark mode */
+  --sidebar: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 * {
@@ -129,3 +157,89 @@ body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
 }
+
+/* Sidebar explicit rules for Tailwind 4 compatibility */
+
+/* Icon mode: collapsed state = icon width, expanded state = full width */
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
+  width: var(--sidebar-width-icon);
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
+  width: var(--sidebar-width);
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
+  width: calc(var(--sidebar-width-icon) + 1rem);
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
+  width: var(--sidebar-width);
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
+  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
+  width: var(--sidebar-width);
+}
+
+/* Labels visibility - only hide when BOTH icon mode AND collapsed */
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:opacity-0 {
+  opacity: 0;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
+  opacity: 1;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:-mt-8 {
+  margin-top: -2rem;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
+  margin-top: 0;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:hidden {
+  display: none;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
+  display: block;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
+  overflow: hidden;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
+  overflow: visible;
+}
+
+/* Menu button behavior - collapsed = icon only, expanded = full width */
+.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode {
+  width: 2rem !important;
+  height: 2rem !important;
+  padding: 0.5rem !important;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode {
+  width: 100%;
+  height: auto;
+  padding: 0.5rem;
+}
+
+.group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode-lg {
+  padding: 0 !important;
+}
+
+.group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode-lg {
+  padding: 0.5rem;
+}
+
+/* Offcanvas mode: always collapsed = 0 width */
+.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
+  width: 0;
+}

package/src/renderers/complex/data-table.tsx

@@ -974,7 +974,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                             ) : typeof col.cell === 'function' ? (
                               col.cell(cellValue, row)
                             ) : (
-                              cellValue
+                              cellValue != null && typeof cellValue === 'object' ? String(cellValue) : cellValue
                             )}
                           </TableCell>
                         );
@@ -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,7 +1089,7 @@ 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}
               >
@@ -1097,7 +1097,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
               </Button>
               <Button
                 variant="outline"
-                size="icon-sm"
+                size="icon"
                 onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                 disabled={currentPage === 1}
               >
@@ -1105,7 +1105,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
               </Button>
               <Button
                 variant="outline"
-                size="icon-sm"
+                size="icon"
                 onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                 disabled={currentPage === totalPages}
               >
@@ -1113,7 +1113,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
               </Button>
               <Button
                 variant="outline"
-                size="icon-sm"
+                size="icon"
                 onClick={() => setCurrentPage(totalPages)}
                 disabled={currentPage === totalPages}
               >

package/src/renderers/data-display/table.tsx

@@ -60,7 +60,7 @@ export const SimpleTableRenderer = ({ schema, className }: any) => {
                   const value = accessor ? row[accessor] : '';
                   return (
                     <TableCell key={col.key || col.accessorKey || index}>
-                      {value}
+                      {value != null && typeof value === 'object' ? String(value) : value}
                     </TableCell>
                   );
                 })}

package/src/renderers/form/form.tsx

@@ -28,10 +28,17 @@ import { AlertCircle, Loader2 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import React from 'react';
 import { SchemaRendererContext } from '@object-ui/react';
+import { createSafeTranslation } from '@object-ui/i18n';
+
+const useSafeFormTranslation = createSafeTranslation(
+  { 'common.selectOption': 'Select an option' },
+  'common.selectOption',
+);
 
 // Form renderer component - Airtable-style feature-complete form
 ComponentRegistry.register('form',
   ({ schema, className, onAction, ...props }: { schema: FormSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
+    const { t } = useSafeFormTranslation();
     const {
       defaultValues = {},
       fields = [],
@@ -317,7 +324,7 @@ ComponentRegistry.register('form',
                             ...formField,
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,
-                            placeholder: fieldProps.placeholder,
+                            placeholder: fieldProps.placeholder ?? (resolvedType === 'select' ? t('common.selectOption') : undefined),
                             disabled: disabled || fieldDisabled || readonly || isSubmitting,
                             dataSource: contextDataSource,
                           })}
@@ -514,7 +521,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
       return (
         <Select value={selectValue} onValueChange={selectOnChange} {...selectProps}>
           <SelectTrigger className="min-h-[44px] sm:min-h-0">
-            <SelectValue placeholder={placeholder ?? 'Select an option'} />
+            <SelectValue placeholder={placeholder || 'Select an option'} />
           </SelectTrigger>
           <SelectContent>
             {options.map((opt: SelectOption) => (

package/src/stories-json/chatbot.stories.tsx

@@ -246,3 +246,104 @@ export const StreamingResponse: Story = {
     className: 'w-full max-w-2xl'
   } as any,
 };
+
+// ============================================================================
+// AI SDUI Mode Stories (service-ai integration)
+// ============================================================================
+
+/**
+ * AI Streaming Mode - demonstrates schema config for service-ai backend.
+ * In production, set `api` to your service-ai endpoint.
+ * Without a real backend, this falls back to local auto-response.
+ */
+export const AIStreamingMode: Story = {
+  render: renderStory,
+  args: {
+    type: 'chatbot',
+    messages: [
+      {
+        id: 'welcome',
+        role: 'assistant',
+        content: 'Hello! I\'m your AI assistant powered by service-ai. Ask me anything!',
+      }
+    ],
+    placeholder: 'Ask the AI assistant...',
+    enableMarkdown: true,
+    showTimestamp: false,
+    // AI SDUI fields — in production, set api to your endpoint:
+    // api: '/api/v1/ai/chat',
+    // model: 'gpt-4o',
+    // systemPrompt: 'You are a helpful assistant.',
+    // streamingEnabled: true,
+    // Fallback to auto-response for demo:
+    autoResponse: true,
+    autoResponseText: 'This is a demo response. In production, connect `api` to your service-ai endpoint for real streaming.',
+    autoResponseDelay: 800,
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+/**
+ * AI Chat with system prompt and model config.
+ */
+export const AIWithSystemPrompt: Story = {
+  render: renderStory,
+  args: {
+    type: 'chatbot',
+    messages: [
+      {
+        id: 'system-1',
+        role: 'system',
+        content: 'You are a customer support agent for Acme Inc.',
+      },
+      {
+        id: 'welcome',
+        role: 'assistant',
+        content: 'Welcome to Acme Support! How can I help you today?',
+      }
+    ],
+    placeholder: 'Describe your issue...',
+    enableMarkdown: true,
+    showTimestamp: true,
+    systemPrompt: 'You are a customer support agent for Acme Inc. Be helpful and professional.',
+    model: 'gpt-4o',
+    autoResponse: true,
+    autoResponseText: 'Thank you for contacting Acme Support. I\'m looking into your request.',
+    autoResponseDelay: 1200,
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+/**
+ * AI Chat including tool invocation metadata in messages.
+ */
+export const AIWithToolCalls: Story = {
+  render: renderStory,
+  args: {
+    type: 'chatbot',
+    messages: [
+      {
+        id: '1',
+        role: 'user',
+        content: 'What\'s the weather in San Francisco?',
+      },
+      {
+        id: '2',
+        role: 'assistant',
+        content: 'The weather in San Francisco is currently 68°F with partly cloudy skies.',
+        toolInvocations: [
+          {
+            toolCallId: 'tc-1',
+            toolName: 'getWeather',
+            args: { city: 'San Francisco' },
+            result: { temp: 68, condition: 'Partly cloudy' },
+            state: 'result',
+          }
+        ],
+      }
+    ],
+    placeholder: 'Ask about weather, stocks, or more...',
+    enableMarkdown: true,
+    className: 'w-full max-w-2xl'
+  } as any,
+};

package/src/ui/accordion.tsx

@@ -9,7 +9,7 @@
 "use client"
 
 import * as React from "react"
-import { Accordion as AccordionPrimitive } from "radix-ui"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDown } from "lucide-react"
 
 import { cn } from "../lib/utils"

package/src/ui/alert-dialog.tsx

@@ -9,7 +9,7 @@
 "use client"
 
 import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "../lib/utils"
 import { buttonVariants } from "./button"

package/src/ui/aspect-ratio.tsx

@@ -8,7 +8,7 @@
 
 "use client"
 
-import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
 const AspectRatio = AspectRatioPrimitive.Root
 

package/src/ui/avatar.tsx

@@ -9,7 +9,7 @@
 "use client"
 
 import * as React from "react"
-import { Avatar as AvatarPrimitive } from "radix-ui"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "../lib/utils"
 

package/src/ui/breadcrumb.tsx

@@ -7,7 +7,7 @@
  */
 
 import * as React from "react"
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "../lib/utils"
@@ -53,7 +53,7 @@ const BreadcrumbLink = React.forwardRef<
     asChild?: boolean
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "a"
+  const Comp = asChild ? Slot : "a"
 
   return (
     <Comp

package/src/ui/button.tsx

@@ -7,7 +7,7 @@
  */
 
 import * as React from "react"
-import { Slot as SlotPrimitive } from "radix-ui"
+import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
@@ -32,8 +32,6 @@ const buttonVariants = cva(
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
-        "icon-sm": "h-8 w-8",
-        "icon-lg": "h-12 w-12",
       },
     },
     defaultVariants: {
@@ -51,7 +49,7 @@ export interface ButtonProps
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? SlotPrimitive.Slot : "button"
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}

package/src/ui/chart.tsx

@@ -1,3 +1,13 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+"use client"
+
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 

package/src/ui/checkbox.tsx

@@ -9,7 +9,7 @@
 "use client"
 
 import * as React from "react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
 import { cn } from "../lib/utils"

package/src/ui/collapsible.tsx

@@ -8,7 +8,7 @@
 
 "use client"
 
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 const Collapsible = CollapsiblePrimitive.Root
 

package/src/ui/command.tsx

@@ -9,7 +9,7 @@
 "use client"
 
 import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
+import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
@@ -31,7 +31,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-const CommandDialog = ({ children, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">

package/src/ui/context-menu.tsx

@@ -9,7 +9,7 @@
 "use client"
 
 import * as React from "react"
-import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "../lib/utils"
@@ -54,7 +54,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 origin-[--radix-context-menu-content-transform-origin]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-context-menu-content-transform-origin]",
       className
     )}
     {...props}
@@ -70,7 +70,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 origin-[--radix-context-menu-content-transform-origin]",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props}