@dinachi/cli 0.3.2 → 0.5.0

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 { cn } from "@/lib/utils"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+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 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,26 +57,62 @@ const ContextMenuPositioner = React.forwardRef<
 ContextMenuPositioner.displayName = "ContextMenuPositioner";
 
 const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.Popup>,
-  React.ComponentProps<typeof BaseContextMenu.Popup>
->(({ className, ...props }, ref) => (
-  <BaseContextMenu.Popup
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
-      "origin-[var(--transform-origin)]",
-      "outline-none focus:outline-none focus-visible: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}
-  />
-));
+  React.ComponentRef<typeof BaseContextMenu.Popup>,
+  React.ComponentProps<typeof BaseContextMenu.Popup> & {
+    container?: HTMLElement | React.RefObject<HTMLElement | null> | null;
+  }
+>(({ className, container, ...props }, ref) => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    // If container is provided, use it
+    if (container) {
+      if (container instanceof HTMLElement) {
+        setPortalContainer(container);
+      } else if (container.current) {
+        setPortalContainer(container.current);
+      }
+      return;
+    }
+
+    // Otherwise create/use the high-level portal root
+    let portalRoot = document.getElementById(
+      "context-menu-portal-root"
+    ) as HTMLElement;
+    if (!portalRoot) {
+      portalRoot = document.createElement("div");
+      portalRoot.id = "context-menu-portal-root";
+      portalRoot.style.cssText =
+        "position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; isolation: isolate;";
+      document.body.appendChild(portalRoot);
+    }
+    setPortalContainer(portalRoot);
+  }, [container]);
+
+  return (
+    <ContextMenuPortal container={portalContainer}>
+      <ContextMenuPositioner>
+        <BaseContextMenu.Popup
+          ref={ref}
+          className={cn(
+            "z-[9999] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg pointer-events-auto",
+            "origin-[var(--transform-origin)]",
+            "outline-none focus:outline-none focus-visible: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}
+        />
+      </ContextMenuPositioner>
+    </ContextMenuPortal>
+  );
+});
 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 +133,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 +157,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 +165,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
@@ -151,8 +187,16 @@ const ContextMenuRadioItem = React.forwardRef<
 ));
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
 
+const ContextMenuGroup = React.forwardRef<
+  React.ComponentRef<typeof BaseContextMenu.Group>,
+  React.ComponentProps<typeof BaseContextMenu.Group>
+>(({ className, ...props }, ref) => (
+  <BaseContextMenu.Group ref={ref} className={cn(className)} {...props} />
+));
+ContextMenuGroup.displayName = "ContextMenuGroup";
+
 const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof BaseContextMenu.GroupLabel>,
+  React.ComponentRef<typeof BaseContextMenu.GroupLabel>,
   React.ComponentProps<typeof BaseContextMenu.GroupLabel> & {
     inset?: boolean;
   }
@@ -170,7 +214,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,11 +243,11 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // Submenu components using Menu from @base-ui-components
 const ContextMenuSub = React.forwardRef<
-  React.ElementRef<typeof Menu.Root>,
-  React.ComponentProps<typeof Menu.Root>
+  HTMLDivElement,
+  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,
   });
@@ -212,7 +256,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,26 +281,46 @@ 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>
-    <Menu.Positioner className="outline-none" alignOffset={-4} sideOffset={8}>
-      <Menu.Popup
-        ref={ref}
-        className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
-          "origin-[var(--transform-origin)]",
-          "outline-none focus:outline-none focus-visible: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}
-      />
-    </Menu.Positioner>
-  </Menu.Portal>
-));
+>(({ className, ...props }, ref) => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    // Use the same high-level portal root for submenus
+    let portalRoot = document.getElementById(
+      "context-menu-portal-root"
+    ) as HTMLElement;
+    if (!portalRoot) {
+      portalRoot = document.createElement("div");
+      portalRoot.id = "context-menu-portal-root";
+      portalRoot.style.cssText =
+        "position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; isolation: isolate;";
+      document.body.appendChild(portalRoot);
+    }
+    setPortalContainer(portalRoot);
+  }, []);
+
+  return (
+    <Menu.Portal container={portalContainer}>
+      <Menu.Positioner className="outline-none" alignOffset={-4} sideOffset={8}>
+        <Menu.Popup
+          ref={ref}
+          className={cn(
+            "z-[9999] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg pointer-events-auto",
+            "origin-[var(--transform-origin)]",
+            "outline-none focus:outline-none focus-visible: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}
+        />
+      </Menu.Positioner>
+    </Menu.Portal>
+  );
+});
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 
 export {
@@ -269,10 +333,11 @@ export {
   ContextMenuCheckboxItem,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
+  ContextMenuGroup,
   ContextMenuLabel,
   ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuSub,
   ContextMenuSubTrigger,
   ContextMenuSubContent,
-};
+};

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/drawer/drawer.tsx

@@ -0,0 +1,109 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { DrawerPreview as DrawerPrimitive } from "@base-ui/react/drawer"
+import { cn } from "@/lib/utils"
+
+const Drawer = DrawerPrimitive.Root
+const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerPortal = DrawerPrimitive.Portal
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerBackdrop = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Backdrop>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Backdrop>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Backdrop
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "transition-opacity duration-200",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerBackdrop.displayName = "DrawerBackdrop"
+
+type DrawerSide = "top" | "right" | "bottom" | "left"
+
+const DrawerContent = React.forwardRef<
+  React.ComponentRef<typeof DrawerPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Popup> & {
+    side?: DrawerSide
+  }
+>(({ className, side = "right", children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerBackdrop />
+    <DrawerPrimitive.Popup
+      ref={ref}
+      className={cn(
+        "fixed z-50 flex flex-col gap-4 border bg-background p-6 shadow-lg transition duration-200",
+        side === "top" &&
+          "inset-x-0 top-0 border-b data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full",
+        side === "bottom" &&
+          "inset-x-0 bottom-0 border-t data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full",
+        side === "left" &&
+          "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",
+        side === "right" &&
+          "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
+        className
+      )}
+      {...props}
+    >
+      <DrawerPrimitive.Content className="size-full overflow-y-auto">
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Popup>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)} {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 sm:flex-row sm:justify-end", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerHeader,
+  DrawerFooter,
+}

package/templates/drawer/index.ts

@@ -0,0 +1,12 @@
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerHeader,
+  DrawerFooter,
+} from "./drawer"

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/fieldset/fieldset.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset"
+import { cn } from "@/lib/utils"
+
+const Fieldset = React.forwardRef<
+  React.ComponentRef<typeof FieldsetPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof FieldsetPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <FieldsetPrimitive.Root
+    ref={ref}
+    className={cn("space-y-3 rounded-lg border p-4", className)}
+    {...props}
+  />
+))
+Fieldset.displayName = "Fieldset"
+
+const FieldsetLegend = React.forwardRef<
+  React.ComponentRef<typeof FieldsetPrimitive.Legend>,
+  React.ComponentPropsWithoutRef<typeof FieldsetPrimitive.Legend>
+>(({ className, ...props }, ref) => (
+  <FieldsetPrimitive.Legend
+    ref={ref}
+    className={cn("px-1 text-sm font-medium", className)}
+    {...props}
+  />
+))
+FieldsetLegend.displayName = "FieldsetLegend"
+
+export { Fieldset, FieldsetLegend }

package/templates/fieldset/index.ts

@@ -0,0 +1 @@
+export { Fieldset, FieldsetLegend } from "./fieldset"

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

@@ -0,0 +1,17 @@
+export {
+  Menu,
+  MenuTrigger,
+  MenuPortal,
+  MenuPositioner,
+  MenuContent,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+} from "./menu"