@dinachi/cli 0.5.1 → 0.6.1

package/templates/badge/badge.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { useRender } from '@base-ui/react/use-render'
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success: 
+          "border-transparent bg-green-500 text-white hover:bg-green-600",
+        warning:
+          "border-transparent bg-yellow-500 text-yellow-900 hover:bg-yellow-600",
+        info:
+          "border-transparent bg-blue-500 text-white hover:bg-blue-600",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        default: "px-2.5 py-0.5 text-xs",
+        lg: "px-3 py-1 text-sm",
+      },
+      rounded: {
+        default: "rounded-full",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        none: "rounded-none",
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      rounded: "default",
+    },
+  }
+)
+
+type BadgeElement = React.ComponentRef<"div">
+
+export interface BadgeProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
+    VariantProps<typeof badgeVariants> {
+  /**
+   * The content of the badge
+   */
+  children?: React.ReactNode
+  /**
+   * Custom render prop for composition
+   */
+  render?: React.ReactElement
+  /**
+   * Whether the badge should be interactive (clickable)
+   */
+  interactive?: boolean
+  /**
+   * Icon to display before the content
+   */
+  icon?: React.ReactNode
+  /**
+   * Whether to show a close button
+   */
+  dismissible?: boolean
+  /**
+   * Callback when close button is clicked
+   */
+  onDismiss?: () => void
+}
+
+const Badge = React.forwardRef<BadgeElement, BadgeProps>(
+  ({ 
+    className, 
+    variant, 
+    size, 
+    rounded,
+    children,
+    render = <div />,
+    interactive = false,
+    icon,
+    dismissible = false,
+    onDismiss,
+    onClick,
+    ...props 
+  }, ref) => {
+    // Handle keyboard interaction for dismissible badges
+    const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
+      if (dismissible && onDismiss && (event.key === 'Delete' || event.key === 'Backspace')) {
+        event.preventDefault()
+        onDismiss()
+      }
+    }, [dismissible, onDismiss])
+
+    // Handle click for interactive badges
+    const handleClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+      if (interactive && onClick) {
+        onClick(event)
+      }
+    }, [interactive, onClick])
+
+    // Compute classes once
+    const badgeClasses = React.useMemo(() => 
+      cn(
+        badgeVariants({ variant, size, rounded }),
+        {
+          'cursor-pointer hover:opacity-80': interactive,
+          'focus:ring-2 focus:ring-offset-2': interactive || dismissible,
+        },
+        className
+      ), 
+      [variant, size, rounded, interactive, dismissible, className]
+    )
+
+    const content = (
+      <>
+        {icon && <span className="mr-1 shrink-0">{icon}</span>}
+        {children}
+        {dismissible && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            className="ml-1 shrink-0 rounded-full p-0.5 hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-black/20"
+            aria-label="Remove badge"
+          >
+            <svg
+              className="h-3 w-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </>
+    )
+
+    return useRender({
+      render: React.cloneElement(render, {
+        ref,
+        className: badgeClasses,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: interactive || dismissible ? 0 : undefined,
+        role: interactive ? 'button' : dismissible ? 'button' : undefined,
+        'aria-label': interactive ? 'Interactive badge' : dismissible ? 'Dismissible badge' : undefined,
+        ...props,
+      }),
+      props: {
+        children: content,
+      },
+    })
+  }
+)
+
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }

package/templates/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge, badgeVariants } from './badge'
+export type { BadgeProps } from './badge'

package/templates/button/button.tsx

@@ -1,5 +1,5 @@
-// @ts-nocheck
 import * as React from "react"
+import { Button as BaseButton } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
@@ -33,15 +33,15 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends Omit<React.ComponentPropsWithoutRef<typeof BaseButton>, 'className'>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  className?: string
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+const Button = React.forwardRef<HTMLElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
     return (
-      <button
+      <BaseButton
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}

package/templates/button/index.ts

@@ -1,2 +1,2 @@
-export { Button, buttonVariants } from "./button"
-export type { ButtonProps } from "./button"
+export { Button, buttonVariants } from './button'
+export type { ButtonProps } from './button'

package/templates/card/card.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/templates/card/index.ts

@@ -0,0 +1 @@
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card'

package/templates/checkbox/checkbox.tsx

@@ -1,7 +1,6 @@
-// @ts-nocheck
 import * as React from "react";
-import { Checkbox as BaseCheckbox } from "@base-ui/react";
-import { cn } from "@/lib/utils"
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { cn } from "@/lib/utils";
 import { Check } from "lucide-react";
 
 const Checkbox = React.forwardRef<

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

@@ -1,8 +1,6 @@
-// @ts-nocheck
 import * as React from "react";
 import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
-import { cn } from "@/lib/utils"
-
+import { cn } from "@/lib/utils";
 
 const CheckboxGroup = React.forwardRef<
   React.ComponentRef<typeof BaseCheckboxGroup>,

package/templates/collapsible/collapsible.tsx

@@ -1,6 +1,5 @@
-// @ts-nocheck
-
 "use client"
+
 import * as React from "react"
 import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
 import { cn } from "@/lib/utils"

package/templates/combobox/combobox.tsx

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

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as React from "react";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { Menu } from "@base-ui/react/menu";

package/templates/dialog/dialog.tsx

@@ -1,5 +1,5 @@
-// @ts-nocheck
 "use client"
+
 import * as React from "react"
 import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import { cn } from "@/lib/utils"

package/templates/drawer/drawer.tsx

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

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"