@dinachi/cli 0.3.2 → 0.5.0

package/templates/menu/menu.tsx

@@ -0,0 +1,282 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { useRender } from "@base-ui/react/use-render"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Menu = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Root>,
+  React.ComponentProps<typeof MenuPrimitive.Root>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <MenuPrimitive.Root>{children}</MenuPrimitive.Root>,
+    props,
+    ref,
+  })
+
+  return element
+})
+Menu.displayName = "Menu"
+
+const MenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof MenuPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+MenuTrigger.displayName = "MenuTrigger"
+
+const MenuPortal = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Portal>,
+  React.ComponentProps<typeof MenuPrimitive.Portal>
+>(({ ...props }, ref) => {
+  const element = useRender({
+    render: <MenuPrimitive.Portal />,
+    props,
+    ref,
+  })
+
+  return element
+})
+MenuPortal.displayName = "MenuPortal"
+
+const MenuPositioner = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Positioner>,
+  React.ComponentProps<typeof MenuPrimitive.Positioner>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Positioner
+    ref={ref}
+    className={cn("outline-none", className)}
+    sideOffset={6}
+    {...props}
+  />
+))
+MenuPositioner.displayName = "MenuPositioner"
+
+const MenuContent = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Popup>,
+  React.ComponentProps<typeof MenuPrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <MenuPortal>
+    <MenuPositioner>
+      <MenuPrimitive.Popup
+        ref={ref}
+        className={cn(
+          "z-50 min-w-[10rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "origin-[var(--transform-origin)] outline-none",
+          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </MenuPositioner>
+  </MenuPortal>
+))
+MenuContent.displayName = "MenuContent"
+
+const MenuItem = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Item>,
+  React.ComponentProps<typeof MenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenuItem.displayName = "MenuItem"
+
+const MenuCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.CheckboxItem>,
+  React.ComponentProps<typeof MenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      {checked && <Check className="h-4 w-4" />}
+    </span>
+    {children}
+  </MenuPrimitive.CheckboxItem>
+))
+MenuCheckboxItem.displayName = "MenuCheckboxItem"
+
+const MenuRadioGroup = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.RadioGroup>,
+  React.ComponentProps<typeof MenuPrimitive.RadioGroup>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.RadioGroup ref={ref} className={cn(className)} {...props} />
+))
+MenuRadioGroup.displayName = "MenuRadioGroup"
+
+const MenuRadioItem = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.RadioItem>,
+  React.ComponentProps<typeof MenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <Circle className="h-2 w-2 fill-current data-[checked]:block data-[unchecked]:hidden" />
+    </span>
+    {children}
+  </MenuPrimitive.RadioItem>
+))
+MenuRadioItem.displayName = "MenuRadioItem"
+
+const MenuLabel = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.GroupLabel>,
+  React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenuPrimitive.GroupLabel
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+))
+MenuLabel.displayName = "MenuLabel"
+
+const MenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Separator>,
+  React.ComponentProps<typeof MenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+MenuSeparator.displayName = "MenuSeparator"
+
+const MenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+    {...props}
+  />
+)
+MenuShortcut.displayName = "MenuShortcut"
+
+const MenuSub = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Root>,
+  React.ComponentProps<typeof MenuPrimitive.Root>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <MenuPrimitive.Root>{children}</MenuPrimitive.Root>,
+    props,
+    ref,
+  })
+
+  return element
+})
+MenuSub.displayName = "MenuSub"
+
+const MenuSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.SubmenuTrigger>,
+  React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenuPrimitive.SubmenuTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenuPrimitive.SubmenuTrigger>
+))
+MenuSubTrigger.displayName = "MenuSubTrigger"
+
+const MenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof MenuPrimitive.Popup>,
+  React.ComponentProps<typeof MenuPrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <MenuPrimitive.Portal>
+    <MenuPrimitive.Positioner className="outline-none" alignOffset={-4} sideOffset={8}>
+      <MenuPrimitive.Popup
+        ref={ref}
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+          "origin-[var(--transform-origin)] outline-none",
+          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </MenuPrimitive.Positioner>
+  </MenuPrimitive.Portal>
+))
+MenuSubContent.displayName = "MenuSubContent"
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuPortal,
+  MenuPositioner,
+  MenuContent,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+}

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 { useRender } from "@base-ui/react/use-render"
 import { cn } from "@/lib/utils"
 import { Check, ChevronRight, Circle } from "lucide-react"
-import { useRender } from "@base-ui-components/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>,
+  HTMLButtonElement,
   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,11 +223,11 @@ const MenubarShortcut = ({
 MenubarShortcut.displayName = "MenubarShortcut"
 
 const MenubarSub = React.forwardRef<
-  React.ElementRef<typeof Menu.Root>,
-  React.ComponentProps<typeof Menu.Root>
+  React.ComponentRef<typeof Menu.SubmenuRoot>,
+  React.ComponentProps<typeof Menu.SubmenuRoot>
 >(({ children, ...props }, ref) => {
   const element = useRender({
-    render: <Menu.Root>{children}</Menu.Root>,
+    render: <Menu.SubmenuRoot>{children}</Menu.SubmenuRoot>,
     props,
     ref,
   });
@@ -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>
@@ -300,4 +300,4 @@ export {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
-} 
+} 

package/templates/meter/index.ts

@@ -0,0 +1 @@
+export { Meter, MeterTrack, MeterIndicator, MeterLabel, MeterValue } from "./meter"

package/templates/meter/meter.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Meter as MeterPrimitive } from "@base-ui/react/meter"
+import { cn } from "@/lib/utils"
+
+const Meter = React.forwardRef<
+  React.ComponentRef<typeof MeterPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MeterPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MeterPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />
+))
+Meter.displayName = "Meter"
+
+const MeterTrack = React.forwardRef<
+  React.ComponentRef<typeof MeterPrimitive.Track>,
+  React.ComponentPropsWithoutRef<typeof MeterPrimitive.Track>
+>(({ className, ...props }, ref) => (
+  <MeterPrimitive.Track
+    ref={ref}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  />
+))
+MeterTrack.displayName = "MeterTrack"
+
+const MeterIndicator = React.forwardRef<
+  React.ComponentRef<typeof MeterPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof MeterPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <MeterPrimitive.Indicator
+    ref={ref}
+    className={cn("h-full rounded-full bg-primary transition-[width] duration-200", className)}
+    {...props}
+  />
+))
+MeterIndicator.displayName = "MeterIndicator"
+
+const MeterLabel = React.forwardRef<
+  React.ComponentRef<typeof MeterPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MeterPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <MeterPrimitive.Label
+    ref={ref}
+    className={cn("text-sm font-medium leading-none", className)}
+    {...props}
+  />
+))
+MeterLabel.displayName = "MeterLabel"
+
+const MeterValue = React.forwardRef<
+  React.ComponentRef<typeof MeterPrimitive.Value>,
+  React.ComponentPropsWithoutRef<typeof MeterPrimitive.Value>
+>(({ className, ...props }, ref) => (
+  <MeterPrimitive.Value
+    ref={ref}
+    className={cn("text-xs text-muted-foreground", className)}
+    {...props}
+  />
+))
+MeterValue.displayName = "MeterValue"
+
+export { Meter, MeterTrack, MeterIndicator, MeterLabel, MeterValue }

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/number-field/index.ts

@@ -0,0 +1,9 @@
+export {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldInput,
+  NumberFieldIncrement,
+  NumberFieldDecrement,
+  NumberFieldScrubArea,
+  NumberFieldScrubAreaCursor,
+} from "./number-field"