@dinachi/cli 0.3.2 → 0.4.0

package/dist/index.js

@@ -45,7 +45,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "class-variance-authority"
       ],
       componentDependencies: ["core"],
@@ -59,7 +59,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       utilityDependencies: ["cn"]
     },
@@ -71,7 +71,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       utilityDependencies: ["cn"]
     },
@@ -83,7 +83,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       utilityDependencies: ["cn"]
     },
@@ -95,7 +95,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "lucide-react"
       ],
       utilityDependencies: ["cn"]
@@ -108,7 +108,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "lucide-react",
         "tailwindcss-animate"
       ],
@@ -122,7 +122,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       utilityDependencies: ["cn"]
     },
@@ -134,7 +134,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       utilityDependencies: ["cn"]
     },
@@ -146,7 +146,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "class-variance-authority"
       ],
       utilityDependencies: ["cn"]
@@ -159,7 +159,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "lucide-react"
       ],
       utilityDependencies: ["cn"]
@@ -172,7 +172,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       componentDependencies: ["checkbox"],
       utilityDependencies: ["cn"]
@@ -185,7 +185,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "tailwindcss-animate"
       ],
       utilityDependencies: ["cn"]
@@ -198,7 +198,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       utilityDependencies: ["cn"]
     },
@@ -210,7 +210,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "class-variance-authority"
       ],
       utilityDependencies: ["cn"]
@@ -223,7 +223,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "lucide-react"
       ],
       utilityDependencies: ["cn"]
@@ -236,7 +236,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "lucide-react"
       ],
       utilityDependencies: ["cn"]
@@ -249,7 +249,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "lucide-react"
       ],
       utilityDependencies: ["cn"]
@@ -262,7 +262,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "lucide-react"
       ],
       utilityDependencies: ["cn"]
@@ -275,7 +275,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       utilityDependencies: ["cn"]
     },
@@ -287,7 +287,7 @@ function getComponentRegistry() {
         { name: "index.ts" }
       ],
       dependencies: [
-        "@base-ui-components/react",
+        "@base-ui/react",
         "class-variance-authority"
       ],
       utilityDependencies: ["cn"]
@@ -304,7 +304,7 @@ function getComponentRegistry() {
         }
       ],
       "dependencies": [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       "utilityDependencies": [
         "cn"
@@ -322,7 +322,7 @@ function getComponentRegistry() {
         }
       ],
       "dependencies": [
-        "@base-ui-components/react"
+        "@base-ui/react"
       ],
       "utilityDependencies": [
         "cn"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [
@@ -27,14 +27,14 @@
     "templates"
   ],
   "dependencies": {
-    "commander": "^11.1.0",
+    "commander": "^14.0.2",
     "chalk": "^5.3.0",
-    "ora": "^7.0.1",
+    "ora": "^9.0.0",
     "prompts": "^2.4.2",
     "fs-extra": "^11.2.0",
     "node-fetch": "^3.3.2",
-    "execa": "^8.0.1",
-    "ts-morph": "^20.0.0"
+    "execa": "^9.6.1",
+    "ts-morph": "^27.0.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

package/templates/accordion/accordion.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react";
-import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import { cn } from "@/lib/utils"
 import { ChevronDown } from "lucide-react";
 

package/templates/alert-dialog/alert-dialog.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react"
-import { AlertDialog as BaseAlertDialog } from "@base-ui-components/react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react"
 import { cn } from "@/lib/utils"
 
 const AlertDialog = BaseAlertDialog.Root

package/templates/avatar/avatar.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react";
-import { Avatar as BaseAvatar } from "@base-ui-components/react";
+import { Avatar as BaseAvatar } from "@base-ui/react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils"
 
@@ -22,7 +22,7 @@ const avatarVariants = cva(
 );
 
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof BaseAvatar.Root>,
+  React.ComponentRef<typeof BaseAvatar.Root>,
   React.ComponentPropsWithoutRef<typeof BaseAvatar.Root> &
     VariantProps<typeof avatarVariants>
 >(({ className, size, ...props }, ref) => (
@@ -35,7 +35,7 @@ const Avatar = React.forwardRef<
 Avatar.displayName = "Avatar";
 
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof BaseAvatar.Image>,
+  React.ComponentRef<typeof BaseAvatar.Image>,
   React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>
 >(({ className, ...props }, ref) => (
   <BaseAvatar.Image
@@ -47,7 +47,7 @@ const AvatarImage = React.forwardRef<
 AvatarImage.displayName = "AvatarImage";
 
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof BaseAvatar.Fallback>,
+  React.ComponentRef<typeof BaseAvatar.Fallback>,
   React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>
 >(({ className, ...props }, ref) => (
   <BaseAvatar.Fallback

package/templates/checkbox/checkbox.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import * as React from "react";
-import { Checkbox as BaseCheckbox } from "@base-ui-components/react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react";
 import { cn } from "@/lib/utils"
 import { Check } from "lucide-react";
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof BaseCheckbox.Root>,
+  React.ComponentRef<typeof BaseCheckbox.Root>,
   React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>
 >(({ className, ...props }, ref) => (
   <BaseCheckbox.Root

package/templates/checkbox-group/checkbox-group.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import * as React from "react";
-import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui-components/react/checkbox-group";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
 import { cn } from "@/lib/utils"
 
 
 const CheckboxGroup = React.forwardRef<
-  React.ElementRef<typeof BaseCheckboxGroup>,
+  React.ComponentRef<typeof BaseCheckboxGroup>,
   React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>
 >(({ className, ...props }, ref) => (
   <BaseCheckboxGroup

package/templates/collapsible/collapsible.tsx

@@ -2,11 +2,11 @@
 
 "use client"
 import * as React from "react"
-import { Collapsible as BaseCollapsible } from "@base-ui-components/react/collapsible"
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
 import { cn } from "@/lib/utils"
 
 const Collapsible = React.forwardRef<
-  React.ElementRef<typeof BaseCollapsible.Root>,
+  React.ComponentRef<typeof BaseCollapsible.Root>,
   React.ComponentPropsWithoutRef<typeof BaseCollapsible.Root>
 >(({ className, ...props }, ref) => (
   <BaseCollapsible.Root ref={ref} className={cn("w-full", className)} {...props} />
@@ -14,7 +14,7 @@ const Collapsible = React.forwardRef<
 Collapsible.displayName = "Collapsible"
 
 const CollapsibleTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseCollapsible.Trigger>,
+  React.ComponentRef<typeof BaseCollapsible.Trigger>,
   React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>
 >(({ className, ...props }, ref) => (
   <BaseCollapsible.Trigger
@@ -33,7 +33,7 @@ const CollapsibleTrigger = React.forwardRef<
 CollapsibleTrigger.displayName = "CollapsibleTrigger"
 
 const CollapsiblePanel = React.forwardRef<
-  React.ElementRef<typeof BaseCollapsible.Panel>,
+  React.ComponentRef<typeof BaseCollapsible.Panel>,
   React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>
 >(({ className, ...props }, ref) => (
   <BaseCollapsible.Panel

package/templates/context-menu/context-menu.tsx

@@ -1,13 +1,13 @@
 // @ts-nocheck
 import * as React from "react";
-import { ContextMenu as BaseContextMenu } from "@base-ui-components/react/context-menu";
-import { Menu } from "@base-ui-components/react/menu";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { Menu } from "@base-ui/react/menu";
 import { cn } from "@/lib/utils"
 import { Check, ChevronRight, Circle } from "lucide-react";
-import { useRender } from "@base-ui-components/react/use-render";
+import { useRender } from "@base-ui/react/use-render";
 
 const ContextMenu = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Root>,
+  React.ComponentRef<typeof BaseContextMenu.Root>,
   React.ComponentProps<typeof BaseContextMenu.Root>
 >(({ children, ...props }, ref) => {
   const element = useRender({
@@ -20,7 +20,7 @@ const ContextMenu = React.forwardRef<
 ContextMenu.displayName = "ContextMenu";
 
 const ContextMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Trigger>,
+  React.ComponentRef<typeof BaseContextMenu.Trigger>,
   React.ComponentProps<typeof BaseContextMenu.Trigger>
 >(({ className, ...props }, ref) => (
   <BaseContextMenu.Trigger
@@ -32,7 +32,7 @@ const ContextMenuTrigger = React.forwardRef<
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 
 const ContextMenuPortal = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Portal>,
+  React.ComponentRef<typeof BaseContextMenu.Portal>,
   React.ComponentProps<typeof BaseContextMenu.Portal>
 >(({ ...props }, ref) => {
   const element = useRender({
@@ -45,7 +45,7 @@ const ContextMenuPortal = React.forwardRef<
 ContextMenuPortal.displayName = "ContextMenuPortal";
 
 const ContextMenuPositioner = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Positioner>,
+  React.ComponentRef<typeof BaseContextMenu.Positioner>,
   React.ComponentProps<typeof BaseContextMenu.Positioner>
 >(({ className, ...props }, ref) => (
   <BaseContextMenu.Positioner
@@ -57,7 +57,7 @@ const ContextMenuPositioner = React.forwardRef<
 ContextMenuPositioner.displayName = "ContextMenuPositioner";
 
 const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Popup>,
+  React.ComponentRef<typeof BaseContextMenu.Popup>,
   React.ComponentProps<typeof BaseContextMenu.Popup>
 >(({ className, ...props }, ref) => (
   <BaseContextMenu.Popup
@@ -76,7 +76,7 @@ const ContextMenuContent = React.forwardRef<
 ContextMenuContent.displayName = "ContextMenuContent";
 
 const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Item>,
+  React.ComponentRef<typeof BaseContextMenu.Item>,
   React.ComponentProps<typeof BaseContextMenu.Item> & {
     inset?: boolean;
   }
@@ -97,7 +97,7 @@ const ContextMenuItem = React.forwardRef<
 ContextMenuItem.displayName = "ContextMenuItem";
 
 const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.CheckboxItem>,
+  React.ComponentRef<typeof BaseContextMenu.CheckboxItem>,
   React.ComponentProps<typeof BaseContextMenu.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
   <BaseContextMenu.CheckboxItem
@@ -121,7 +121,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
 ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
 
 const ContextMenuRadioGroup = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.RadioGroup>,
+  React.ComponentRef<typeof BaseContextMenu.RadioGroup>,
   React.ComponentProps<typeof BaseContextMenu.RadioGroup>
 >(({ className, ...props }, ref) => (
   <BaseContextMenu.RadioGroup ref={ref} className={cn(className)} {...props} />
@@ -129,7 +129,7 @@ const ContextMenuRadioGroup = React.forwardRef<
 ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
 
 const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.RadioItem>,
+  React.ComponentRef<typeof BaseContextMenu.RadioItem>,
   React.ComponentProps<typeof BaseContextMenu.RadioItem>
 >(({ className, children, ...props }, ref) => (
   <BaseContextMenu.RadioItem
@@ -152,7 +152,7 @@ const ContextMenuRadioItem = React.forwardRef<
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
 
 const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.GroupLabel>,
+  React.ComponentRef<typeof BaseContextMenu.GroupLabel>,
   React.ComponentProps<typeof BaseContextMenu.GroupLabel> & {
     inset?: boolean;
   }
@@ -170,7 +170,7 @@ const ContextMenuLabel = React.forwardRef<
 ContextMenuLabel.displayName = "ContextMenuLabel";
 
 const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Separator>,
+  React.ComponentRef<typeof BaseContextMenu.Separator>,
   React.ComponentProps<typeof BaseContextMenu.Separator>
 >(({ className, ...props }, ref) => (
   <BaseContextMenu.Separator
@@ -199,7 +199,7 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // Submenu components using Menu from @base-ui-components
 const ContextMenuSub = React.forwardRef<
-  React.ElementRef<typeof Menu.Root>,
+  React.ComponentRef<typeof Menu.Root>,
   React.ComponentProps<typeof Menu.Root>
 >(({ children, ...props }, ref) => {
   const element = useRender({
@@ -212,7 +212,7 @@ const ContextMenuSub = React.forwardRef<
 ContextMenuSub.displayName = "ContextMenuSub";
 
 const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof Menu.SubmenuTrigger>,
+  React.ComponentRef<typeof Menu.SubmenuTrigger>,
   React.ComponentProps<typeof Menu.SubmenuTrigger> & {
     inset?: boolean;
   }
@@ -237,7 +237,7 @@ const ContextMenuSubTrigger = React.forwardRef<
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 
 const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof Menu.Popup>,
+  React.ComponentRef<typeof Menu.Popup>,
   React.ComponentProps<typeof Menu.Popup>
 >(({ className, ...props }, ref) => (
   <Menu.Portal>

package/templates/dialog/dialog.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 "use client"
 import * as React from "react"
-import { Dialog as BaseDialog } from "@base-ui-components/react/dialog"
+import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import { cn } from "@/lib/utils"
 
 const Dialog = BaseDialog.Root

package/templates/field/field.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react";
-import { Field as BaseField } from "@base-ui-components/react/field";
+import { Field as BaseField } from "@base-ui/react/field";
 import { cn } from "@/lib/utils"
 
 const Field = React.forwardRef<

package/templates/form/form.tsx

@@ -2,9 +2,9 @@
 "use client"
 
 import * as React from "react"
-import { Form as BaseForm } from "@base-ui-components/react/form"
-import { useRender } from "@base-ui-components/react/use-render"
-import { mergeProps } from "@base-ui-components/react/merge-props"
+import { Form as BaseForm } from "@base-ui/react/form"
+import { useRender } from "@base-ui/react/use-render"
+import { mergeProps } from "@base-ui/react/merge-props"
 import { cn } from "@/lib/utils"
 
 // Type definitions for form errors

package/templates/input/input.tsx

@@ -1,17 +1,25 @@
-import * as React from 'react';
-import { Input as BaseInput } from '@base-ui-components/react/input';
+// @ts-nocheck
+import * as React from "react";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { cn } from "@/lib/utils";
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<typeof BaseInput>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <BaseInput
-        className="h-10 w-full max-w-64 rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof BaseInput>
+>(({ className, ...props }, ref) => {
+  return (
+    <BaseInput
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

package/templates/menubar/menubar.tsx

@@ -1,15 +1,15 @@
 // @ts-nocheck
 "use client"
 import * as React from "react"
-import { Menubar as BaseMenubar } from "@base-ui-components/react/menubar"
-import { Menu } from "@base-ui-components/react/menu"
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar"
+import { Menu } from "@base-ui/react/menu"
 import { cn } from "@/lib/utils"
 import { Check, ChevronRight, Circle } from "lucide-react"
-import { useRender } from "@base-ui-components/react/use-render"
+import { useRender } from "@base-ui/react/use-render"
 
 
 const Menubar = React.forwardRef<
-  React.ElementRef<typeof BaseMenubar>,
+  React.ComponentRef<typeof BaseMenubar>,
   React.ComponentProps<typeof BaseMenubar>
 >(({ className, ...props }, ref) => (
   <BaseMenubar
@@ -24,7 +24,7 @@ const Menubar = React.forwardRef<
 Menubar.displayName = "Menubar"
 
 const MenubarMenu = React.forwardRef<
-  React.ElementRef<typeof Menu.Root>,
+  React.ComponentRef<typeof Menu.Root>,
   React.ComponentProps<typeof Menu.Root>
 >(({ children, ...props }, ref) => {
   const element = useRender({
@@ -37,7 +37,7 @@ const MenubarMenu = React.forwardRef<
 MenubarMenu.displayName = "MenubarMenu"
 
 const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof Menu.Trigger>,
+  React.ComponentRef<typeof Menu.Trigger>,
   React.ComponentProps<typeof Menu.Trigger>
 >(({ className, ...props }, ref) => (
   <Menu.Trigger
@@ -56,7 +56,7 @@ const MenubarTrigger = React.forwardRef<
 MenubarTrigger.displayName = "MenubarTrigger"
 
 const MenubarPortal = React.forwardRef<
-  React.ElementRef<typeof Menu.Portal>,
+  React.ComponentRef<typeof Menu.Portal>,
   React.ComponentProps<typeof Menu.Portal>
 >(({ ...props }, ref) => {
   const element = useRender({
@@ -69,7 +69,7 @@ const MenubarPortal = React.forwardRef<
 MenubarPortal.displayName = "MenubarPortal"
 
 const MenubarPositioner = React.forwardRef<
-  React.ElementRef<typeof Menu.Positioner>,
+  React.ComponentRef<typeof Menu.Positioner>,
   React.ComponentProps<typeof Menu.Positioner>
 >(({ className, ...props }, ref) => (
   <Menu.Positioner
@@ -82,7 +82,7 @@ const MenubarPositioner = React.forwardRef<
 MenubarPositioner.displayName = "MenubarPositioner"
 
 const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof Menu.Popup>,
+  React.ComponentRef<typeof Menu.Popup>,
   React.ComponentProps<typeof Menu.Popup>
 >(({ className, ...props }, ref) => (
   <Menu.Popup
@@ -101,7 +101,7 @@ const MenubarContent = React.forwardRef<
 MenubarContent.displayName = "MenubarContent"
 
 const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof Menu.Item>,
+  React.ComponentRef<typeof Menu.Item>,
   React.ComponentProps<typeof Menu.Item> & {
     inset?: boolean
   }
@@ -122,7 +122,7 @@ const MenubarItem = React.forwardRef<
 MenubarItem.displayName = "MenubarItem"
 
 const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof Menu.CheckboxItem>,
+  React.ComponentRef<typeof Menu.CheckboxItem>,
   React.ComponentProps<typeof Menu.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
   <Menu.CheckboxItem
@@ -146,7 +146,7 @@ const MenubarCheckboxItem = React.forwardRef<
 MenubarCheckboxItem.displayName = "MenubarCheckboxItem"
 
 const MenubarRadioGroup = React.forwardRef<
-  React.ElementRef<typeof Menu.RadioGroup>,
+  React.ComponentRef<typeof Menu.RadioGroup>,
   React.ComponentProps<typeof Menu.RadioGroup>
 >(({ className, ...props }, ref) => (
   <Menu.RadioGroup ref={ref} className={cn(className)} {...props} />
@@ -154,7 +154,7 @@ const MenubarRadioGroup = React.forwardRef<
 MenubarRadioGroup.displayName = "MenubarRadioGroup"
 
 const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof Menu.RadioItem>,
+  React.ComponentRef<typeof Menu.RadioItem>,
   React.ComponentProps<typeof Menu.RadioItem>
 >(({ className, children, ...props }, ref) => (
   <Menu.RadioItem
@@ -177,7 +177,7 @@ const MenubarRadioItem = React.forwardRef<
 MenubarRadioItem.displayName = "MenubarRadioItem"
 
 const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof Menu.GroupLabel>,
+  React.ComponentRef<typeof Menu.GroupLabel>,
   React.ComponentProps<typeof Menu.GroupLabel> & {
     inset?: boolean
   }
@@ -195,7 +195,7 @@ const MenubarLabel = React.forwardRef<
 MenubarLabel.displayName = "MenubarLabel"
 
 const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof Menu.Separator>,
+  React.ComponentRef<typeof Menu.Separator>,
   React.ComponentProps<typeof Menu.Separator>
 >(({ className, ...props }, ref) => (
   <Menu.Separator
@@ -223,7 +223,7 @@ const MenubarShortcut = ({
 MenubarShortcut.displayName = "MenubarShortcut"
 
 const MenubarSub = React.forwardRef<
-  React.ElementRef<typeof Menu.Root>,
+  React.ComponentRef<typeof Menu.Root>,
   React.ComponentProps<typeof Menu.Root>
 >(({ children, ...props }, ref) => {
   const element = useRender({
@@ -236,7 +236,7 @@ const MenubarSub = React.forwardRef<
 MenubarSub.displayName = "MenubarSub"
 
 const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof Menu.SubmenuTrigger>,
+  React.ComponentRef<typeof Menu.SubmenuTrigger>,
   React.ComponentProps<typeof Menu.SubmenuTrigger> & {
     inset?: boolean
   }
@@ -261,7 +261,7 @@ const MenubarSubTrigger = React.forwardRef<
 MenubarSubTrigger.displayName = "MenubarSubTrigger"
 
 const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof Menu.Popup>,
+  React.ComponentRef<typeof Menu.Popup>,
   React.ComponentProps<typeof Menu.Popup>
 >(({ className, ...props }, ref) => (
   <Menu.Portal>

package/templates/navigation-menu/navigation-menu.tsx

@@ -2,14 +2,14 @@
 "use client"
 
 import * as React from "react"
-import { NavigationMenu as BaseNavigationMenu } from "@base-ui-components/react/navigation-menu"
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu"
 import { cn } from "@/lib/utils"
 import { ChevronDown } from "lucide-react"
-import { useRender } from "@base-ui-components/react/use-render"
+import { useRender } from "@base-ui/react/use-render"
 
 
 const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Root>,
+  React.ComponentRef<typeof BaseNavigationMenu.Root>,
   React.ComponentProps<typeof BaseNavigationMenu.Root>
 >(({ className, children, ...props }, ref) => (
   <BaseNavigationMenu.Root
@@ -26,7 +26,7 @@ const NavigationMenu = React.forwardRef<
 NavigationMenu.displayName = "NavigationMenu"
 
 const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.List>,
+  React.ComponentRef<typeof BaseNavigationMenu.List>,
   React.ComponentProps<typeof BaseNavigationMenu.List>
 >(({ className, ...props }, ref) => (
   <BaseNavigationMenu.List
@@ -41,7 +41,7 @@ const NavigationMenuList = React.forwardRef<
 NavigationMenuList.displayName = "NavigationMenuList"
 
 const NavigationMenuItem = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Item>,
+  React.ComponentRef<typeof BaseNavigationMenu.Item>,
   React.ComponentProps<typeof BaseNavigationMenu.Item>
 >(({ className, ...props }, ref) => (
   <BaseNavigationMenu.Item
@@ -53,7 +53,7 @@ const NavigationMenuItem = React.forwardRef<
 NavigationMenuItem.displayName = "NavigationMenuItem"
 
 const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Trigger>,
+  React.ComponentRef<typeof BaseNavigationMenu.Trigger>,
   React.ComponentProps<typeof BaseNavigationMenu.Trigger>
 >(({ className, children, ...props }, ref) => (
   <BaseNavigationMenu.Trigger
@@ -79,7 +79,7 @@ const NavigationMenuTrigger = React.forwardRef<
 NavigationMenuTrigger.displayName = "NavigationMenuTrigger"
 
 const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Content>,
+  React.ComponentRef<typeof BaseNavigationMenu.Content>,
   React.ComponentProps<typeof BaseNavigationMenu.Content>
 >(({ className, ...props }, ref) => (
   <BaseNavigationMenu.Content
@@ -96,7 +96,7 @@ const NavigationMenuContent = React.forwardRef<
 NavigationMenuContent.displayName = "NavigationMenuContent"
 
 const NavigationMenuLink = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Link>,
+  React.ComponentRef<typeof BaseNavigationMenu.Link>,
   React.ComponentProps<typeof BaseNavigationMenu.Link>
 >(({ className, ...props }, ref) => (
   <BaseNavigationMenu.Link
@@ -113,7 +113,7 @@ const NavigationMenuLink = React.forwardRef<
 NavigationMenuLink.displayName = "NavigationMenuLink"
 
 const NavigationMenuPortal = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Portal>,
+  React.ComponentRef<typeof BaseNavigationMenu.Portal>,
   React.ComponentProps<typeof BaseNavigationMenu.Portal>
 >(({ ...props }, ref) => {
   const element = useRender({
@@ -126,7 +126,7 @@ const NavigationMenuPortal = React.forwardRef<
 NavigationMenuPortal.displayName = "NavigationMenuPortal"
 
 const NavigationMenuPositioner = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Positioner>,
+  React.ComponentRef<typeof BaseNavigationMenu.Positioner>,
   React.ComponentProps<typeof BaseNavigationMenu.Positioner>
 >(({ className, ...props }, ref) => (
   <BaseNavigationMenu.Positioner
@@ -138,7 +138,7 @@ const NavigationMenuPositioner = React.forwardRef<
 NavigationMenuPositioner.displayName = "NavigationMenuPositioner"
 
 const NavigationMenuPopup = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Popup>,
+  React.ComponentRef<typeof BaseNavigationMenu.Popup>,
   React.ComponentProps<typeof BaseNavigationMenu.Popup>
 >(({ className, ...props }, ref) => (
   <BaseNavigationMenu.Popup
@@ -154,7 +154,7 @@ const NavigationMenuPopup = React.forwardRef<
 NavigationMenuPopup.displayName = "NavigationMenuPopup"
 
 const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof BaseNavigationMenu.Viewport>,
+  React.ComponentRef<typeof BaseNavigationMenu.Viewport>,
   React.ComponentProps<typeof BaseNavigationMenu.Viewport>
 >(({ className, ...props }, ref) => (
   <BaseNavigationMenu.Viewport
@@ -174,7 +174,7 @@ const NavigationMenuViewport = React.forwardRef<
 NavigationMenuViewport.displayName = "NavigationMenuViewport"
 
 const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<"div">,
+  React.ComponentRef<"div">,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div

package/templates/preview-card/preview-card.tsx

@@ -3,13 +3,13 @@
 "use client"
 
 import * as React from "react"
-import { PreviewCard as BasePreviewCard } from "@base-ui-components/react/preview-card"
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
 import { cn } from "@/lib/utils"
 
 const PreviewCard = BasePreviewCard.Root
 
 const PreviewCardTrigger = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Trigger>,
+  React.ComponentRef<typeof BasePreviewCard.Trigger>,
   React.ComponentProps<typeof BasePreviewCard.Trigger>
 >(({ className, ...props }, ref) => (
   <BasePreviewCard.Trigger
@@ -29,7 +29,7 @@ PreviewCardTrigger.displayName = "PreviewCardTrigger"
 const PreviewCardPortal = BasePreviewCard.Portal
 
 const PreviewCardBackdrop = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Backdrop>,
+  React.ComponentRef<typeof BasePreviewCard.Backdrop>,
   React.ComponentProps<typeof BasePreviewCard.Backdrop>
 >(({ className, ...props }, ref) => (
   <BasePreviewCard.Backdrop
@@ -45,7 +45,7 @@ const PreviewCardBackdrop = React.forwardRef<
 PreviewCardBackdrop.displayName = "PreviewCardBackdrop"
 
 const PreviewCardPositioner = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Positioner>,
+  React.ComponentRef<typeof BasePreviewCard.Positioner>,
   React.ComponentProps<typeof BasePreviewCard.Positioner>
 >(({ className, sideOffset = 8, ...props }, ref) => (
   <BasePreviewCard.Positioner
@@ -58,7 +58,7 @@ const PreviewCardPositioner = React.forwardRef<
 PreviewCardPositioner.displayName = "PreviewCardPositioner"
 
 const PreviewCardPopup = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Popup>,
+  React.ComponentRef<typeof BasePreviewCard.Popup>,
   React.ComponentProps<typeof BasePreviewCard.Popup>
 >(({ className, ...props }, ref) => (
   <BasePreviewCard.Popup
@@ -78,7 +78,7 @@ const PreviewCardPopup = React.forwardRef<
 PreviewCardPopup.displayName = "PreviewCardPopup"
 
 const PreviewCardArrow = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Arrow>,
+  React.ComponentRef<typeof BasePreviewCard.Arrow>,
   React.ComponentProps<typeof BasePreviewCard.Arrow> & {
     children?: React.ReactNode
   }
@@ -99,7 +99,7 @@ const PreviewCardArrow = React.forwardRef<
 PreviewCardArrow.displayName = "PreviewCardArrow"
 
 const PreviewCardContent = React.forwardRef<
-  React.ElementRef<typeof BasePreviewCard.Popup>,
+  React.ComponentRef<typeof BasePreviewCard.Popup>,
   React.ComponentProps<typeof BasePreviewCard.Popup>
 >(({ className, children, ...props }, ref) => (
   <PreviewCardPortal>

package/templates/select/select.tsx

@@ -2,7 +2,7 @@
 "use client"
 
 import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui-components/react/select"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
 import { cn } from "@/lib/utils"
 import { Check, ChevronDown } from "lucide-react"
 
@@ -15,7 +15,7 @@ const SelectValue = SelectPrimitive.Value
 
 // Optimized SelectTrigger with better type safety and performance
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
     readonly children?: React.ReactNode
   }
@@ -38,7 +38,7 @@ SelectTrigger.displayName = "SelectTrigger"
 
 // Optimized SelectContent with better positioning and performance
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Popup>,
+  React.ComponentRef<typeof SelectPrimitive.Popup>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {
     readonly position?: "item-aligned" | "popper"
     readonly sideOffset?: number
@@ -74,7 +74,7 @@ SelectContent.displayName = "SelectContent"
 
 // Add scroll arrows for better UX with large lists
 const SelectScrollUpArrow = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpArrow>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollUpArrow>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpArrow>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpArrow
@@ -91,7 +91,7 @@ const SelectScrollUpArrow = React.forwardRef<
 SelectScrollUpArrow.displayName = "SelectScrollUpArrow"
 
 const SelectScrollDownArrow = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownArrow>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollDownArrow>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownArrow>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownArrow
@@ -109,7 +109,7 @@ SelectScrollDownArrow.displayName = "SelectScrollDownArrow"
 
 // Optimized SelectLabel with better accessibility
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.GroupLabel>,
+  React.ComponentRef<typeof SelectPrimitive.GroupLabel>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.GroupLabel
@@ -122,7 +122,7 @@ SelectLabel.displayName = "SelectLabel"
 
 // Optimized SelectItem with conditional indicator and better type safety
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
     readonly inset?: boolean
     readonly showIndicator?: boolean
@@ -186,7 +186,7 @@ SelectItem.displayName = "SelectItem"
 
 // Optimized SelectSeparator
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator

package/templates/slider/slider.tsx

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import * as React from "react";
-import { Slider as BaseSlider } from "@base-ui-components/react/slider";
-import { DirectionProvider } from "@base-ui-components/react/direction-provider";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
 import { cn } from "@/lib/utils"
 
 
 const Slider = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Root>,
+  React.ComponentRef<typeof BaseSlider.Root>,
   React.ComponentProps<typeof BaseSlider.Root>
 >(({ className, ...props }, ref) => {
   const internalRef = React.useRef<HTMLDivElement>(null);
@@ -15,7 +15,7 @@ const Slider = React.forwardRef<
   
   return (
     <BaseSlider.Root
-      ref={internalRef}
+      ref={internalRef as React.RefObject<HTMLDivElement>}
       className={cn("relative flex w-full touch-none select-none items-center", className)}
       {...props}
     />
@@ -24,7 +24,7 @@ const Slider = React.forwardRef<
 Slider.displayName = "Slider";
 
 const SliderValue = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Value>,
+  React.ComponentRef<typeof BaseSlider.Value>,
   React.ComponentProps<typeof BaseSlider.Value>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Value
@@ -36,7 +36,7 @@ const SliderValue = React.forwardRef<
 SliderValue.displayName = "SliderValue";
 
 const SliderControl = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Control>,
+  React.ComponentRef<typeof BaseSlider.Control>,
   React.ComponentProps<typeof BaseSlider.Control>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Control
@@ -48,7 +48,7 @@ const SliderControl = React.forwardRef<
 SliderControl.displayName = "SliderControl";
 
 const SliderTrack = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Track>,
+  React.ComponentRef<typeof BaseSlider.Track>,
   React.ComponentProps<typeof BaseSlider.Track>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Track
@@ -63,7 +63,7 @@ const SliderTrack = React.forwardRef<
 SliderTrack.displayName = "SliderTrack";
 
 const SliderRange = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Indicator>,
+  React.ComponentRef<typeof BaseSlider.Indicator>,
   React.ComponentProps<typeof BaseSlider.Indicator>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Indicator
@@ -75,7 +75,7 @@ const SliderRange = React.forwardRef<
 SliderRange.displayName = "SliderRange";
 
 const SliderThumb = React.forwardRef<
-  React.ElementRef<typeof BaseSlider.Thumb>,
+  React.ComponentRef<typeof BaseSlider.Thumb>,
   React.ComponentProps<typeof BaseSlider.Thumb>
 >(({ className, ...props }, ref) => (
   <BaseSlider.Thumb
@@ -118,4 +118,4 @@ export {
   SliderRange,
   SliderThumb,
   SliderDirectionProvider,
-}; 
+};

package/templates/tabs/tabs.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import * as React from "react";
-import { Tabs as BaseTabs } from "@base-ui-components/react/tabs";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { cn } from "@/lib/utils";
 
 const Tabs = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Root>,
+  React.ComponentRef<typeof BaseTabs.Root>,
   React.ComponentProps<typeof BaseTabs.Root>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Root
@@ -16,7 +16,7 @@ const Tabs = React.forwardRef<
 Tabs.displayName = "Tabs";
 
 const TabsList = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.List>,
+  React.ComponentRef<typeof BaseTabs.List>,
   React.ComponentProps<typeof BaseTabs.List>
 >(({ className, ...props }, ref) => (
   <BaseTabs.List
@@ -31,7 +31,7 @@ const TabsList = React.forwardRef<
 TabsList.displayName = "TabsList";
 
 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Tab>,
+  React.ComponentRef<typeof BaseTabs.Tab>,
   React.ComponentProps<typeof BaseTabs.Tab>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Tab
@@ -50,7 +50,7 @@ const TabsTrigger = React.forwardRef<
 TabsTrigger.displayName = "TabsTrigger";
 
 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Panel>,
+  React.ComponentRef<typeof BaseTabs.Panel>,
   React.ComponentProps<typeof BaseTabs.Panel>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Panel
@@ -66,7 +66,7 @@ const TabsContent = React.forwardRef<
 TabsContent.displayName = "TabsContent";
 
 const TabsIndicator = React.forwardRef<
-  React.ElementRef<typeof BaseTabs.Indicator>,
+  React.ComponentRef<typeof BaseTabs.Indicator>,
   React.ComponentProps<typeof BaseTabs.Indicator>
 >(({ className, ...props }, ref) => (
   <BaseTabs.Indicator

package/templates/toast/toast.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import * as React from "react";
-import { Toast as BaseToast } from "@base-ui-components/react/toast";
+import { Toast as BaseToast } from "@base-ui/react/toast";
 import { cn } from "@/lib/utils";
 import { type VariantProps, cva } from "class-variance-authority";
 

package/templates/toggle/toggle.tsx

@@ -2,7 +2,7 @@
 "use client"
 
 import * as React from "react"
-import { Toggle as TogglePrimitive } from "@base-ui-components/react/toggle"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { type VariantProps, cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
@@ -68,7 +68,7 @@ export interface ToggleProps
     VariantProps<typeof toggleVariants> {}
 
 const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive>,
+  React.ComponentRef<typeof TogglePrimitive>,
   ToggleProps
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive

package/templates/toolbar/toolbar.tsx

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import * as React from "react";
-import { Toolbar as BaseToolbar } from "@base-ui-components/react/toolbar";
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import { cn } from "@/lib/utils";
 
 const ToolbarRoot = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Root>,
+  React.ComponentRef<typeof BaseToolbar.Root>,
   React.ComponentProps<typeof BaseToolbar.Root>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Root
@@ -19,7 +19,7 @@ const ToolbarRoot = React.forwardRef<
 ToolbarRoot.displayName = "ToolbarRoot";
 
 const ToolbarButton = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Button>,
+  React.ComponentRef<typeof BaseToolbar.Button>,
   React.ComponentProps<typeof BaseToolbar.Button>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Button
@@ -38,7 +38,7 @@ const ToolbarButton = React.forwardRef<
 ToolbarButton.displayName = "ToolbarButton";
 
 const ToolbarLink = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Link>,
+  React.ComponentRef<typeof BaseToolbar.Link>,
   React.ComponentProps<typeof BaseToolbar.Link>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Link
@@ -56,7 +56,7 @@ const ToolbarLink = React.forwardRef<
 ToolbarLink.displayName = "ToolbarLink";
 
 const ToolbarSeparator = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Separator>,
+  React.ComponentRef<typeof BaseToolbar.Separator>,
   React.ComponentProps<typeof BaseToolbar.Separator>
 >(({ className, orientation = "vertical", ...props }, ref) => (
   <BaseToolbar.Separator
@@ -73,7 +73,7 @@ const ToolbarSeparator = React.forwardRef<
 ToolbarSeparator.displayName = "ToolbarSeparator";
 
 const ToolbarGroup = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Group>,
+  React.ComponentRef<typeof BaseToolbar.Group>,
   React.ComponentProps<typeof BaseToolbar.Group>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Group
@@ -85,7 +85,7 @@ const ToolbarGroup = React.forwardRef<
 ToolbarGroup.displayName = "ToolbarGroup";
 
 const ToolbarInput = React.forwardRef<
-  React.ElementRef<typeof BaseToolbar.Input>,
+  React.ComponentRef<typeof BaseToolbar.Input>,
   React.ComponentProps<typeof BaseToolbar.Input>
 >(({ className, ...props }, ref) => (
   <BaseToolbar.Input

package/templates/tooltip/tooltip.tsx

@@ -2,14 +2,14 @@
 "use client";
 
 import * as React from "react";
-import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cn } from "@/lib/utils";
 
 // Provider Component
-const TooltipProvider = BaseTooltip.Provider;
+const TooltipProvider: typeof BaseTooltip.Provider = BaseTooltip.Provider;
 
 // Root Component
-const Tooltip = BaseTooltip.Root;
+const Tooltip: typeof BaseTooltip.Root = BaseTooltip.Root;
 
 // Trigger Component with Base UI's native render prop support
 interface TooltipTriggerProps
@@ -18,8 +18,10 @@ interface TooltipTriggerProps
   size?: "default" | "sm" | "lg" | "icon";
 }
 
-const TooltipTrigger = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Trigger>,
+const TooltipTrigger: React.ForwardRefExoticComponent<
+  TooltipTriggerProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Trigger>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Trigger>,
   TooltipTriggerProps
 >(
   (
@@ -64,11 +66,14 @@ const TooltipTrigger = React.forwardRef<
 TooltipTrigger.displayName = "TooltipTrigger";
 
 // Portal Component
-const TooltipPortal = BaseTooltip.Portal;
+const TooltipPortal: typeof BaseTooltip.Portal = BaseTooltip.Portal;
 
 // Positioner Component
-const TooltipPositioner = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Positioner>,
+const TooltipPositioner: React.ForwardRefExoticComponent<
+  React.ComponentProps<typeof BaseTooltip.Positioner> &
+    React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Positioner>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Positioner>,
   React.ComponentProps<typeof BaseTooltip.Positioner>
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <BaseTooltip.Positioner
@@ -86,8 +91,10 @@ interface TooltipPopupProps
   variant?: "default" | "inverse";
 }
 
-const TooltipPopup = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Popup>,
+const TooltipPopup: React.ForwardRefExoticComponent<
+  TooltipPopupProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Popup>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Popup>,
   TooltipPopupProps
 >(({ className, variant = "default", ...props }, ref) => {
   const variantStyles = {
@@ -113,12 +120,16 @@ const TooltipPopup = React.forwardRef<
 TooltipPopup.displayName = "TooltipPopup";
 
 // Arrow Component with custom SVG
-const TooltipArrow = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Arrow>,
-  React.ComponentProps<typeof BaseTooltip.Arrow> & {
-    children?: React.ReactNode;
-    variant?: "default" | "inverse";
-  }
+type TooltipArrowProps = React.ComponentProps<typeof BaseTooltip.Arrow> & {
+  children?: React.ReactNode;
+  variant?: "default" | "inverse";
+};
+
+const TooltipArrow: React.ForwardRefExoticComponent<
+  TooltipArrowProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Arrow>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Arrow>,
+  TooltipArrowProps
 >(({ className, children, variant = "default", ...props }, ref) => (
   <BaseTooltip.Arrow
     ref={ref}
@@ -143,8 +154,10 @@ interface TooltipContentProps extends TooltipPopupProps {
   showArrow?: boolean;
 }
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof BaseTooltip.Popup>,
+const TooltipContent: React.ForwardRefExoticComponent<
+  TooltipContentProps & React.RefAttributes<React.ComponentRef<typeof BaseTooltip.Popup>>
+> = React.forwardRef<
+  React.ComponentRef<typeof BaseTooltip.Popup>,
   TooltipContentProps
 >(
   (
@@ -178,11 +191,13 @@ const TooltipContent = React.forwardRef<
 TooltipContent.displayName = "TooltipContent";
 
 // Optimized Arrow SVG Component
-const TooltipArrowSvg = React.memo(
-  ({
-    variant = "default",
-    ...props
-  }: React.ComponentProps<"svg"> & { variant?: "default" | "inverse" }) => {
+type TooltipArrowSvgProps = React.ComponentProps<"svg"> & {
+  variant?: "default" | "inverse";
+};
+
+const TooltipArrowSvg: React.MemoExoticComponent<
+  React.FC<TooltipArrowSvgProps>
+> = React.memo(({ variant = "default", ...props }: TooltipArrowSvgProps) => {
     const fillClasses = variant === "inverse" ? "fill-primary" : "fill-popover";
 
     const borderClasses =