@dinachi/cli 0.5.0 → 0.6.0

package/templates/field/field.tsx

@@ -1,112 +1,96 @@
-// @ts-nocheck
 import * as React from "react";
 import { Field as BaseField } from "@base-ui/react/field";
-import { cn } from "@/lib/utils"
+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}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  <BaseField.Root ref={ref} className={cn("space-y-2", className)} {...props} />
+));
+Field.displayName = "Field";
 
 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}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  <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}
+  />
+));
+FieldLabel.displayName = "FieldLabel";
 
 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}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  <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}
+  />
+));
+FieldControl.displayName = "FieldControl";
 
 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}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  <BaseField.Description
+    ref={ref}
+    className={cn(
+      "text-sm text-muted-foreground",
+      "data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+FieldDescription.displayName = "FieldDescription";
 
 const FieldError = React.forwardRef<
-  HTMLParagraphElement,
+  HTMLDivElement,
   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}
-    />
-  );
-});
+>(({ className, ...props }, ref) => (
+  <BaseField.Error
+    ref={ref}
+    className={cn(
+      "text-sm font-medium text-destructive",
+      "data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+FieldError.displayName = "FieldError";
 
 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";
+  React.ComponentProps<typeof BaseField.Validity> & {
+    className?: string;
+  }
+>(({ className, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm", "data-[disabled]:opacity-50", className)}
+  >
+    <BaseField.Validity {...props}>{children}</BaseField.Validity>
+  </div>
+));
 FieldValidity.displayName = "FieldValidity";
 
 export {

package/templates/fieldset/fieldset.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/form/form.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"
@@ -18,13 +17,10 @@ export interface FormState extends Record<string, unknown> {
 // 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
+   * Object containing field errors where keys are field names and values are error messages.
+   * Errors are automatically cleared when the value changes (Base UI 1.0.0+).
    */
   errors?: Errors
-  /**
-   * Callback function called when errors should be cleared
-   */
-  onClearErrors?: (errors: Errors) => void
   /**
    * Form submission handler
    */
@@ -34,36 +30,48 @@ export interface FormProps extends useRender.ComponentProps<'form', FormState> {
 const Form = React.forwardRef<
   HTMLFormElement,
   FormProps
->(({ className, errors = {}, onClearErrors, render = <form />, children, onSubmit, ...props }, ref) => {
+>(({ className, errors = {}, render, 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>
-    )
+  // If using render prop, handle it with useRender
+  if (render && typeof render === 'function') {
+    // Function render prop
+    const defaultProps = {
+      className: cn("space-y-4", className),
+      onSubmit
+    }
+    const formProps = mergeProps<'form'>(defaultProps, props)
+    
+    const element = useRender({
+      render,
+      props: formProps,
+      state: formState,
+      ref
+    })
+    return element
   }
 
-  // Use the useRender hook to handle render prop pattern
-  const element = useRender({
-    render,
-    props: mergeProps<'form'>(defaultProps, props),
-    state: formState,
-    ref
-  })
+  if (render && React.isValidElement(render) && render.type !== 'form') {
+    // Element render prop - return the element directly (but not if it's the default <form />)
+    return render
+  }
 
-  return element
+  // Default rendering using BaseForm
+  return (
+    <BaseForm
+      ref={ref}
+      className={cn("space-y-4", className)}
+      errors={errors}
+      onSubmit={onSubmit}
+      role="form"
+      {...props}
+    >
+      {children}
+    </BaseForm>
+  )
 })
 
 Form.displayName = "Form"

package/templates/input/index.ts

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

package/templates/input/input.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as React from "react";
 import { Input as BaseInput } from "@base-ui/react/input";
 import { cn } from "@/lib/utils";

package/templates/menu/menu.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/menubar/menubar.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"
@@ -45,9 +44,9 @@ const MenubarTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium 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",
+      "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",
       className
     )}
     {...props}
@@ -88,11 +87,11 @@ const MenubarContent = React.forwardRef<
   <Menu.Popup
     ref={ref}
     className={cn(
-      "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-      "origin-[var(--transform-origin)]",
+      "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "origin-(--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",
+      "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}
@@ -111,8 +110,8 @@ const MenubarItem = React.forwardRef<
     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",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -130,8 +129,8 @@ const MenubarCheckboxItem = React.forwardRef<
     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",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
       className
     )}
     checked={checked}
@@ -162,14 +161,14 @@ const MenubarRadioItem = React.forwardRef<
     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",
+      "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" />
+      <Circle className="h-2 w-2 fill-current data-checked:block data-unchecked:hidden" />
     </span>
     {children}
   </Menu.RadioItem>
@@ -246,9 +245,9 @@ const MenubarSubTrigger = React.forwardRef<
     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",
+      "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
     )}
@@ -269,11 +268,11 @@ const MenubarSubContent = React.forwardRef<
       <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)]",
+          "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+          "origin-(--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",
+          "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}

package/templates/meter/meter.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/navigation-menu/index.ts

@@ -1,13 +1 @@
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuPortal,
-  NavigationMenuPositioner,
-  NavigationMenuPopup,
-  NavigationMenuViewport,
-} from "./navigation-menu" 
+export * from "./navigation-menu" 

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

@@ -1,12 +1,10 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"
 import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu"
+import { useRender } from "@base-ui/react/use-render"
 import { cn } from "@/lib/utils"
 import { ChevronDown } from "lucide-react"
-import { useRender } from "@base-ui/react/use-render"
-
 
 const NavigationMenu = React.forwardRef<
   React.ComponentRef<typeof BaseNavigationMenu.Root>,

package/templates/number-field/number-field.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/popover/popover.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/progress/progress.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/radio/radio.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/scroll-area/scroll-area.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/select/select.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"
@@ -6,8 +5,6 @@ import { Select as SelectPrimitive } from "@base-ui/react/select"
 import { cn } from "@/lib/utils"
 import { Check, ChevronDown } from "lucide-react"
 
-
-
 // Re-export root components for better tree-shaking
 const Select = SelectPrimitive.Root
 const SelectGroup = SelectPrimitive.Group
@@ -23,7 +20,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center cursor-pointer justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}

package/templates/separator/separator.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/slider/index.ts

@@ -6,4 +6,14 @@ export {
   SliderRange,
   SliderThumb,
   SliderDirectionProvider,
+} from './slider'
+
+export type {
+  SliderProps,
+  SliderValueProps,
+  SliderControlProps,
+  SliderTrackProps,
+  SliderRangeProps,
+  SliderThumbProps,
+  SliderDirectionProviderProps,
 } from './slider' 

package/templates/slider/slider.tsx

@@ -1,9 +1,7 @@
-// @ts-nocheck
 import * as React from "react";
 import { Slider as BaseSlider } from "@base-ui/react/slider";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
-import { cn } from "@/lib/utils"
-
+import { cn } from "@/lib/utils";
 
 const Slider = React.forwardRef<
   React.ComponentRef<typeof BaseSlider.Root>,

package/templates/switch/switch.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/tabs/index.ts

@@ -4,4 +4,12 @@ export {
   TabsTrigger,
   TabsContent,
   TabsIndicator,
+} from './tabs'
+
+export type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+  TabsIndicatorProps,
 } from './tabs' 

package/templates/tabs/tabs.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as React from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { cn } from "@/lib/utils";
@@ -22,7 +21,7 @@ const TabsList = React.forwardRef<
   <BaseTabs.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground z-0",
       className
     )}
     {...props}
@@ -40,7 +39,7 @@ const TabsTrigger = React.forwardRef<
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:pointer-events-none disabled:opacity-50",
-      "data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-sm",
+      "data-[selected]:bg-muted data-[selected]:text-foreground data-[selected]:shadow-sm",
       "hover:text-foreground",
       className
     )}
@@ -80,6 +79,12 @@ const TabsIndicator = React.forwardRef<
 ));
 TabsIndicator.displayName = "TabsIndicator";
 
+export type TabsProps = React.ComponentProps<typeof BaseTabs.Root>;
+export type TabsListProps = React.ComponentProps<typeof BaseTabs.List>;
+export type TabsTriggerProps = React.ComponentProps<typeof BaseTabs.Tab>;
+export type TabsContentProps = React.ComponentProps<typeof BaseTabs.Panel>;
+export type TabsIndicatorProps = React.ComponentProps<typeof BaseTabs.Indicator>;
+
 export {
   Tabs,
   TabsList,

package/templates/textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './textarea'
+export type { TextareaProps } from './textarea'

package/templates/textarea/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/templates/toast/toast.tsx

@@ -1,4 +1,5 @@
-// @ts-nocheck
+"use client";
+
 import * as React from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { cn } from "@/lib/utils";
@@ -24,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = "ToastViewport";
 
 // Toast Portal
-const ToastPortal = BaseToast.Portal;
+const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;
 
 // Toast variants for different types
 const toastVariants = cva(

package/templates/toggle/toggle.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/toggle-group/toggle-group.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 "use client"
 
 import * as React from "react"

package/templates/toolbar/toolbar.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as React from "react";
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import { cn } from "@/lib/utils";