Component patterns

// components/registry/n2-primitives/example.tsx
"use client"

// 1. Variants with CVA
const exampleVariants = cva(
  "inline-flex items-center justify-center rounded-lg font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline: "border border-border bg-input/30 hover:bg-input/50",
        ghost: "hover:bg-muted hover:text-foreground",
      },
      size: {
        default: "h-14 px-5 text-sm",
        sm: "h-12 px-4 text-xs",
      },
    },
    defaultVariants: { variant: "default", size: "default" },
  }
)

// 2. Props extend the CVA variants and the HTML element
interface ExampleProps
  extends React.ComponentProps<"div">,
    VariantProps<typeof exampleVariants> {
  asChild?: boolean
}

// 3. Named export, never default
// 4. Export the variants too, for composition elsewhere
export { exampleVariants }

<Button variant="default" size="sm" />
<Button variant="outline" size="lg" />
<Button variant="ghost" />              {/* size falls back to the default */}

{/* Use the variants function for a non-button element */}
<a className={cn(buttonVariants({ variant: "link" }))}>Click here</a>

cn("px-4 py-2", "px-2")
// "py-2 px-2" — px-4 removed

cn("text-red-500", isActive && "text-blue-500")
// "text-blue-500" when isActive

cn(buttonVariants({ variant: "outline" }), className)
// CVA output merged with a caller's className

<Button>Click me</Button>                            {/* <button> */}

<Button asChild>
  <a href="/dashboard">Go to dashboard</a>           {/* <a>, styled as a button */}
</Button>

<button data-slot="button" data-variant="outline" data-size="sm">

[data-slot="button"] { … }
[data-slot="button"][data-variant="destructive"] { … }

.form-field [data-slot="label"] { font-weight: 600; }

{/* Tailwind's has-data-* modifier */}
<div className="has-data-[slot=button]:p-4">
  <Button>Inside a container</Button>
</div>