@object-ui/components 0.3.0 → 0.3.1

package/src/ui/sidebar.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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"
@@ -253,15 +261,15 @@ function Sidebar({
   )
 }
 
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
+const SidebarTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar()
 
   return (
     <Button
+      ref={ref}
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       variant="ghost"
@@ -277,13 +285,18 @@ function SidebarTrigger({
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )
-}
+})
+SidebarTrigger.displayName = "SidebarTrigger"
 
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar()
 
   return (
     <button
+      ref={ref}
       data-sidebar="rail"
       data-slot="sidebar-rail"
       aria-label="Toggle Sidebar"
@@ -302,7 +315,8 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       {...props}
     />
   )
-}
+})
+SidebarRail.displayName = "SidebarRail"
 
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
@@ -495,7 +509,14 @@ const sidebarMenuButtonVariants = cva(
   }
 )
 
-function SidebarMenuButton({
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(({
   asChild = false,
   isActive = false,
   variant = "default",
@@ -503,16 +524,13 @@ function SidebarMenuButton({
   tooltip,
   className,
   ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
+}, ref) => {
   const Comp = asChild ? Slot : "button"
   const { isMobile, state } = useSidebar()
 
   const button = (
     <Comp
+      ref={ref}
       data-slot="sidebar-menu-button"
       data-sidebar="menu-button"
       data-size={size}
@@ -543,7 +561,8 @@ function SidebarMenuButton({
       />
     </Tooltip>
   )
-}
+})
+SidebarMenuButton.displayName = "SidebarMenuButton"
 
 function SidebarMenuAction({
   className,

package/src/ui/skeleton.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ */
+
 import { cn } from "../lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {

package/src/ui/slider.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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"

package/src/ui/sonner.tsx

@@ -1,10 +1,11 @@
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
+/**
+ * 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.
+ */
+
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
@@ -18,23 +19,14 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-slate-950/90 group-[.toaster]:backdrop-blur-xl group-[.toaster]:text-cyan-100 group-[.toaster]:border-slate-800 group-[.toaster]:shadow-[0_0_30px_-10px_rgba(0,0,0,0.5)] transition-all duration-30 data-[type=success]:border-emerald-500/50 data-[type=success]:shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)] data-[type=error]:border-red-500/50 data-[type=error]:shadow-[0_0_20px_-5px_rgba(239,68,68,0.2)] data-[type=info]:border-cyan-500/50 data-[type=info]:shadow-[0_0_20px_-5px_rgba(6,182,212,0.2)] data-[type=warning]:border-amber-500/50 data-[type=warning]:shadow-[0_0_20px_-5px_rgba(245,158,11,0.2)]",
-          description: "group-[.toast]:text-slate-400 group-[.toast]:font-mono group-[.toast]:text-xs",
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
           actionButton:
-            "group-[.toast]:bg-cyan-600 group-[.toast]:text-white group-[.toast]:font-bold group-[.toast]:rounded-sm group-[.toast]:shadow-[0_0_10px_cyan]",
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
           cancelButton:
-            "group-[.toast]:bg-slate-800 group-[.toast]:text-slate-400 group-[.toast]:rounded-sm",
-          title: "group-[.toast]:font-mono group-[.toast]:uppercase group-[.toast]:tracking-widest group-[.toast]:font-bold group-[.toast]:text-cyan-300 group-[.toast]:text-xs group-[.toast]:data-[type=error]:text-red-400 group-[.toast]:data-[type=success]:text-emerald-400",
-          icon: "group-[.toast]:data-[type=success]:text-emerald-400 group-[.toast]:data-[type=error]:text-red-400 group-[.toast]:data-[type=info]:text-cyan-400 group-[.toast]:data-[type=warning]:text-amber-400",
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
         },
       }}
-      icons={{
-        success: <CircleCheckIcon className="size-5 drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]" />,
-        info: <InfoIcon className="size-5 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]" />,
-        warning: <TriangleAlertIcon className="size-5 drop-shadow-[0_0_8px_rgba(245,158,11,0.5)]" />,
-        error: <OctagonXIcon className="size-5 drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]" />,
-        loading: <Loader2Icon className="size-5 animate-spin text-cyan-500" />,
-      }}
       {...props}
     />
   )

package/src/ui/spinner.tsx

@@ -1,36 +1,24 @@
+/**
+ * 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.
+ */
+
 import * as React from "react"
 import { cn } from "../lib/utils"
+import { Loader2 } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       role="status"
       aria-label="Loading"
-      className={cn("relative flex items-center justify-center shrink-0", className)}
+      className={cn("flex items-center justify-center", className)}
       {...props}
     >
-      <div className="relative aspect-square h-full w-full min-w-[1em] min-h-[1em]">
-          {/* Outer Atmosphere / Fire (Fast Spin) */}
-          <div className="absolute inset-0 rounded-full border-[15%] border-transparent border-t-orange-500 border-r-red-600 animate-[spin_0.8s_linear_infinite] shadow-[0_0_15px_-4px_rgba(234,88,12,0.8)]" 
-               style={{ borderWidth: "2px" }} 
-          />
-          
-          {/* Turbulence Layer (Reverse Spin) */}
-          <div className="absolute inset-[10%] rounded-full border-[15%] border-transparent border-b-yellow-400/80 border-l-orange-500/80 animate-[spin_1.5s_ease-in-out_infinite_reverse]" 
-               style={{ borderWidth: "2px" }}
-          />
-
-          {/* Core Planet (Internal) */}
-          <div className="absolute inset-[25%] rounded-full overflow-hidden bg-slate-950 shadow-[inset_0_0_4px_rgba(0,0,0,0.8)]">
-               {/* Molten Core Texture (Rotating) */}
-               <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] animate-[spin_3s_linear_infinite]">
-                  <div className="w-full h-full bg-[conic-gradient(from_180deg,#1e293b_0deg,#0e7490_80deg,#7c3aed_160deg,#be123c_240deg,#ea580c_300deg,#1e293b_360deg)] opacity-90 blur-[1px]" />
-               </div>
-               
-              {/* Surface Reflection & Shadow (Spherical look) */}
-               <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.4)_0%,transparent_50%,rgba(0,0,0,0.9)_100%)] z-10" />
-          </div>
-      </div>
+      <Loader2 className="animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4" />
     </div>
   )
 }

package/src/ui/switch.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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"

package/src/ui/table.tsx

@@ -1,112 +1,117 @@
+/**
+ * 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.
+ */
+
 import * as React from "react"
 
 import { cn } from "../lib/utils"
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto rounded-md border border-slate-800/60 bg-slate-950/40 backdrop-blur-sm shadow-[0_0_20px_-10px_rgba(6,182,212,0.1)]"
-    >
-      {/* Decorative lines */}
-      <div className="absolute top-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent opacity-50" />
-      <div className="absolute bottom-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent opacity-50" />
-      
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm border-collapse", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b [&_tr]:border-slate-800", className)}
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
       {...props}
     />
-  )
-}
+  </div>
+))
+Table.displayName = "Table"
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-slate-900/80 border-t border-slate-800 font-medium [&>tr]:last:border-b-0 text-cyan-200",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "border-b border-slate-800/60 transition-colors duration-200",
-        "hover:bg-cyan-950/20 hover:shadow-[inset_0_0_10px_-5px_cyan]",
-        "data-[state=selected]:bg-cyan-950/40 data-[state=selected]:border-cyan-500/30",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "h-10 px-4 text-left align-middle font-mono text-xs font-bold uppercase tracking-widest text-cyan-500/80 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-4 align-middle whitespace-nowrap text-slate-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
-}
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
 
 export {
   Table,

package/src/ui/tabs.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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"

package/src/ui/textarea.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ */
+
 import * as React from "react"
 
 import { cn } from "../lib/utils"

package/src/ui/toggle-group.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ */
+
 import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { type VariantProps } from "class-variance-authority"
@@ -6,40 +14,32 @@ import { cn } from "../lib/utils"
 import { toggleVariants } from "./toggle"
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
+  VariantProps<typeof toggleVariants>
 >({
   size: "default",
   variant: "default",
-  spacing: 0,
 })
 
 function ToggleGroup({
   className,
   variant,
   size,
-  spacing = 0,
   children,
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }) {
+  VariantProps<typeof toggleVariants>) {
   return (
     <ToggleGroupPrimitive.Root
       data-slot="toggle-group"
       data-variant={variant}
       data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md bg-slate-950/20 p-1 border border-slate-800/50 shadow-inner",
+        "flex justify-center flex-row gap-1 items-center",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+      <ToggleGroupContext.Provider value={{ variant, size }}>
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
@@ -61,20 +61,11 @@ function ToggleGroupItem({
       data-slot="toggle-group-item"
       data-variant={context.variant || variant}
       data-size={context.size || size}
-      data-spacing={context.spacing}
       className={cn(
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        // Force rounded-sm logic for group items when spacing is 0
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-sm data-[spacing=0]:last:rounded-r-sm",
-        // Handle borders for connected items
-        "data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-         // Add separating line for non-outline items if needed, or rely on gaps. 
-         // For Outline variant in Future Tech, we might want to keep them distinct or joined.
-         // Current logic keeps them joined.
         className
       )}
       {...props}

package/src/ui/toggle.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ */
+
 import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -5,23 +13,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium transition-all duration-300 hover:text-cyan-400 focus-visible:ring-1 focus-visible:ring-cyan-400/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: [
-          "bg-transparent hover:bg-cyan-950/20",
-          "data-[state=on]:bg-cyan-950/40 data-[state=on]:text-cyan-300 data-[state=on]:border data-[state=on]:border-cyan-500/30 data-[state=on]:shadow-[0_0_12px_-3px_rgba(6,182,212,0.4)]",
-        ],
-        outline: [
-          "border border-cyan-900/60 bg-transparent shadow-xs hover:bg-cyan-950/30 hover:text-cyan-300 hover:border-cyan-500/50",
-          "data-[state=on]:bg-cyan-600 data-[state=on]:text-white data-[state=on]:border-cyan-400 data-[state=on]:shadow-[0_0_15px_rgba(6,182,212,0.6)]",
-        ],
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 px-3 min-w-9",
-        sm: "h-8 px-2 min-w-8 text-xs",
-        lg: "h-10 px-3 min-w-10",
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
       },
     },
     defaultVariants: {

package/src/ui/tooltip.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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"

package/tsconfig.json

@@ -14,5 +14,6 @@
     "composite": true,
     "skipLibCheck": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/__tests__", "**/*.test.ts", "**/*.test.tsx"]
 }

package/vite.config.ts

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ */
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
@@ -23,11 +31,13 @@ export default defineConfig({
       fileName: 'index',
     },
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: ['react', 'react-dom', '@object-ui/core', '@object-ui/react', '@object-ui/types'],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
         },
       },
     },

package/dist/src/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/new-components.test.d.ts

@@ -1 +0,0 @@
-export {};