@dinachi/cli 0.1.0

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

@@ -0,0 +1,278 @@
+// @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 { 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.ComponentProps<typeof BaseContextMenu.Root>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <BaseContextMenu.Root>{children}</BaseContextMenu.Root>,
+    props,
+    ref,
+  });
+  return element;
+});
+ContextMenu.displayName = "ContextMenu";
+
+const ContextMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.Trigger>,
+  React.ComponentProps<typeof BaseContextMenu.Trigger>
+>(({ className, ...props }, ref) => (
+  <BaseContextMenu.Trigger
+    ref={ref}
+    className={cn("select-none", className)}
+    {...props}
+  />
+));
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+
+const ContextMenuPortal = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.Portal>,
+  React.ComponentProps<typeof BaseContextMenu.Portal>
+>(({ ...props }, ref) => {
+  const element = useRender({
+    render: <BaseContextMenu.Portal />,
+    props,
+    ref,
+  });
+  return element;
+});
+ContextMenuPortal.displayName = "ContextMenuPortal";
+
+const ContextMenuPositioner = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.Positioner>,
+  React.ComponentProps<typeof BaseContextMenu.Positioner>
+>(({ className, ...props }, ref) => (
+  <BaseContextMenu.Positioner
+    ref={ref}
+    className={cn("outline-none", className)}
+    {...props}
+  />
+));
+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}
+  />
+));
+ContextMenuContent.displayName = "ContextMenuContent";
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.Item>,
+  React.ComponentProps<typeof BaseContextMenu.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <BaseContextMenu.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}
+  />
+));
+ContextMenuItem.displayName = "ContextMenuItem";
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.CheckboxItem>,
+  React.ComponentProps<typeof BaseContextMenu.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <BaseContextMenu.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}
+  </BaseContextMenu.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+
+const ContextMenuRadioGroup = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.RadioGroup>,
+  React.ComponentProps<typeof BaseContextMenu.RadioGroup>
+>(({ className, ...props }, ref) => (
+  <BaseContextMenu.RadioGroup ref={ref} className={cn(className)} {...props} />
+));
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.RadioItem>,
+  React.ComponentProps<typeof BaseContextMenu.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <BaseContextMenu.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}
+  </BaseContextMenu.RadioItem>
+));
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.GroupLabel>,
+  React.ComponentProps<typeof BaseContextMenu.GroupLabel> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <BaseContextMenu.GroupLabel
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = "ContextMenuLabel";
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof BaseContextMenu.Separator>,
+  React.ComponentProps<typeof BaseContextMenu.Separator>
+>(({ className, ...props }, ref) => (
+  <BaseContextMenu.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+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>
+>(({ children, ...props }, ref) => {
+  const element = useRender({
+    render: <Menu.Root>{children}</Menu.Root>,
+    props,
+    ref,
+  });
+  return element;
+});
+ContextMenuSub.displayName = "ContextMenuSub";
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof Menu.SubmenuTrigger>,
+  React.ComponentProps<typeof Menu.SubmenuTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <Menu.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" />
+  </Menu.SubmenuTrigger>
+));
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<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>
+));
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+  ContextMenuPositioner,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+};

package/templates/context-menu/index.ts

@@ -0,0 +1,17 @@
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+  ContextMenuPositioner,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+} from "./context-menu"; 

package/templates/dialog/dialog.tsx

@@ -0,0 +1,158 @@
+// @ts-nocheck
+import * as React from "react"
+import { Dialog as BaseDialog } from "@base-ui-components/react/dialog"
+import { cn } from "@/lib/utils"
+
+const Dialog = BaseDialog.Root
+
+const DialogTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof BaseDialog.Trigger>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "bg-primary text-primary-foreground hover:bg-primary/90",
+      "h-10 px-4 py-2",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTrigger.displayName = "DialogTrigger"
+
+const DialogPortal = BaseDialog.Portal
+
+const DialogBackdrop = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof BaseDialog.Backdrop>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Backdrop
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "transition-all duration-150",
+      className
+    )}
+    {...props}
+  />
+))
+DialogBackdrop.displayName = "DialogBackdrop"
+
+const DialogPopup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof BaseDialog.Popup>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Popup
+    ref={ref}
+    className={cn(
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg",
+      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+      "transition-all duration-150",
+      className
+    )}
+    {...props}
+  />
+))
+DialogPopup.displayName = "DialogPopup"
+
+const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentProps<typeof BaseDialog.Title>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<typeof BaseDialog.Description>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = "DialogDescription"
+
+const DialogClose = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof BaseDialog.Close>
+>(({ className, ...props }, ref) => (
+  <BaseDialog.Close
+    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-semibold shadow-sm transition-colors",
+      "hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+DialogClose.displayName = "DialogClose"
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof BaseDialog.Popup>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogBackdrop />
+    <DialogPopup ref={ref} className={className} {...props}>
+      {children}
+    </DialogPopup>
+  </DialogPortal>
+))
+DialogContent.displayName = "DialogContent"
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogBackdrop,
+  DialogPopup,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  DialogHeader,
+  DialogFooter,
+  DialogContent,
+} 

package/templates/dialog/index.ts

@@ -0,0 +1 @@
+export * from "./dialog" 

package/templates/field/field.tsx

@@ -0,0 +1,119 @@
+// @ts-nocheck
+import * as React from "react";
+import { Field as BaseField } from "@base-ui-components/react/field";
+import { cn } from "@/lib/utils"
+
+const Field = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof BaseField.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <BaseField.Root
+      ref={ref}
+      className={cn("space-y-2", className)}
+      {...props}
+    />
+  );
+});
+
+const FieldLabel = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentProps<typeof BaseField.Label>
+>(({ className, ...props }, ref) => {
+  return (
+    <BaseField.Label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        "data-[invalid]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+const FieldControl = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof BaseField.Control>
+>(({ className, ...props }, ref) => {
+  return (
+    <BaseField.Control
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[invalid]:border-destructive data-[invalid]:ring-destructive",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+const FieldDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<typeof BaseField.Description>
+>(({ className, ...props }, ref) => {
+  return (
+    <BaseField.Description
+      ref={ref}
+      className={cn(
+        "text-sm text-muted-foreground",
+        "data-[disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+const FieldError = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<typeof BaseField.Error>
+>(({ className, ...props }, ref) => {
+  return (
+    <BaseField.Error
+      ref={ref}
+      className={cn(
+        "text-sm font-medium text-destructive",
+        "data-[disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+const FieldValidity = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof BaseField.Validity> & { className?: string }
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("text-sm", "data-[disabled]:opacity-50", className)}
+    >
+      <BaseField.Validity {...props}>{children}</BaseField.Validity>
+    </div>
+  );
+});
+
+Field.displayName = "Field";
+FieldLabel.displayName = "FieldLabel";
+FieldControl.displayName = "FieldControl";
+FieldDescription.displayName = "FieldDescription";
+FieldError.displayName = "FieldError";
+FieldValidity.displayName = "FieldValidity";
+
+export {
+  Field,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldValidity,
+};

package/templates/field/index.ts

@@ -0,0 +1 @@
+export * from './field';

package/templates/form/form.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+"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 { cn } from "@/lib/utils"
+
+// Type definitions for form errors
+export type Errors = Record<string, string | string[]>
+
+// Form state interface
+export interface FormState extends Record<string, unknown> {
+  errors: Errors
+}
+
+// Form component props interface using useRender types
+export interface FormProps extends useRender.ComponentProps<'form', FormState> {
+  /**
+   * Object containing field errors where keys are field names and values are error messages
+   */
+  errors?: Errors
+  /**
+   * Callback function called when errors should be cleared
+   */
+  onClearErrors?: (errors: Errors) => void
+  /**
+   * Form submission handler
+   */
+  onSubmit?: React.FormEventHandler<HTMLFormElement>
+}
+
+const Form = React.forwardRef<
+  HTMLFormElement,
+  FormProps
+>(({ className, errors = {}, onClearErrors, render = <form />, children, onSubmit, ...props }, ref) => {
+  // Create form state object
+  const formState: FormState = React.useMemo(() => ({
+    errors
+  }), [errors])
+
+  // Default form props
+  const defaultProps: useRender.ElementProps<'form'> = {
+    className: cn("space-y-4", className),
+    onSubmit,
+    children: (
+      <BaseForm
+        errors={errors}
+        onClearErrors={onClearErrors}
+        className="contents" // Use contents to avoid wrapper styling
+      >
+        {children}
+      </BaseForm>
+    )
+  }
+
+  // Use the useRender hook to handle render prop pattern
+  const element = useRender({
+    render,
+    props: mergeProps<'form'>(defaultProps, props),
+    state: formState,
+    ref
+  })
+
+  return element
+})
+
+Form.displayName = "Form"
+
+export { Form } 

package/templates/form/index.ts

@@ -0,0 +1 @@
+export * from "./form" 

package/templates/input/index.ts

@@ -0,0 +1,2 @@
+export { Input, inputVariants } from "./input"
+export type { InputProps } from "./input"

package/templates/input/input.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Input as BaseInput } from '@base-ui-components/react/input';
+
+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"
+
+export { Input }

package/templates/menubar/index.ts

@@ -0,0 +1,18 @@
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarPortal,
+  MenubarPositioner,
+  MenubarContent,
+  MenubarItem,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+} from "./menubar"