import { DropZone, FileTrigger } from "@hashti/react";
// Or via compound subcomponents:
// DropZone.Root, DropZone.Feedback, DropZone.FileTrigger

<DropZone onDropFiles={(files) => handleUpload(files)}>
  <DropZone.Feedback>
    <Icon name="upload" />
    <p>Drag files here, or</p>
    <FileTrigger onSelect={(e) => handleFiles(e)}>
      <Button variant="secondary">Browse Files</Button>
    </FileTrigger>
  </DropZone.Feedback>
</DropZone>

import { useState } from "react";
import { DropZone, FileTrigger, Button, Icon } from "@hashti/react";

export function FileUploadExample() {
  const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);

  return (
    <div className="max-w-md space-y-4">
      <DropZone
        variant="dashed"
        onDropFiles={(files) => {
          setUploadedFiles(files.map((f) => `${f.name} (${Math.round(f.size / 1024)} KB)`));
        }}
      >
        <div className="flex flex-col items-center justify-center p-8 text-center space-y-3">
          <div className="p-3 bg-[var(--surface-raised)] rounded-full text-[var(--accent-turquoise)]">
            <Icon name="upload" size={24} />
          </div>
          <div>
            <p className="font-medium text-sm">Drag and drop documents here</p>
            <p className="text-xs text-[var(--text-muted)]">PDF, PNG, JPG up to 25MB</p>
          </div>
          <FileTrigger
            allowsMultiple
            acceptedFileTypes={["image/png", "image/jpeg", "application/pdf"]}
            onSelect={(e) => {
              if (e) {
                const files = Array.from(e);
                setUploadedFiles(files.map((f) => `${f.name} (${Math.round(f.size / 1024)} KB)`));
              }
            }}
          >
            <Button variant="secondary" size="sm">
              Browse Files
            </Button>
          </FileTrigger>
        </div>
      </DropZone>

      {uploadedFiles.length > 0 && (
        <ul className="text-sm space-y-1 bg-[var(--surface-raised)] p-3 rounded-md">
          {uploadedFiles.map((file, i) => (
            <li key={i} className="text-xs font-mono text-[var(--text)]">
              ✓ {file}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

import { DropZone, Button } from "@hashti/react";

export function CardDropZoneExample() {
  return (
    <DropZone variant="card" className="max-w-md p-6 text-center">
      <p className="text-sm font-medium">Add Attachments</p>
      <p className="text-xs text-[var(--text-muted)] mb-3">Drop files anywhere inside this card</p>
      <Button variant="ghost" size="sm">
        Select Local File
      </Button>
    </DropZone>
  );
}

<FileTrigger acceptedFileTypes={["image/*", ".csv", ".json"]}>
  <Button variant="secondary">Import Data</Button>
</FileTrigger>