import { GridList } from "@hashti/react";
// Or named subcomponents:
// GridList.Root, GridList.Item, GridList.DragHandle, GridList.Checkbox, GridList.EmptyState

<GridList selectionMode="multiple" aria-label="Inbox messages">
  <GridList.Item textValue="System notification">
    <GridList.DragHandle />
    <GridList.Checkbox />
    <span>Build #402 deployed to production</span>
  </GridList.Item>
</GridList>

import { useState } from "react";
import { GridList, Badge } from "@hashti/react";
import type { Selection } from "react-aria-components";

const tasks = [
  { id: "1", title: "Migrate documentation to Fumadocs", status: "completed" },
  { id: "2", title: "Audit WCAG 2.2 AAA contrast across 8 themes", status: "in-progress" },
  { id: "3", title: "Add Persian Vazirmatn typography specimen", status: "completed" },
  { id: "4", title: "Release RAC 1.22.1 elevated components", status: "pending" },
];

export function SelectableTasksList() {
  const [selected, setSelected] = useState<Selection>(new Set(["1", "3"]));

  return (
    <div className="max-w-lg space-y-3">
      <GridList
        aria-label="Design system tasks"
        items={tasks}
        selectionMode="multiple"
        selectedKeys={selected}
        onSelectionChange={setSelected}
        variant="bordered"
      >
        {(task) => (
          <GridList.Item key={task.id} textValue={task.title}>
            <div className="flex items-center justify-between w-full py-1">
              <div className="flex items-center gap-3">
                <GridList.Checkbox />
                <span className="text-sm font-medium">{task.title}</span>
              </div>
              <Badge
                kind={
                  task.status === "completed"
                    ? "success"
                    : task.status === "in-progress"
                      ? "info"
                      : "neutral"
                }
              >
                {task.status}
              </Badge>
            </div>
          </GridList.Item>
        )}
      </GridList>

      <p className="text-xs text-[var(--text-muted)]">
        Selected tasks count: {selected === "all" ? tasks.length : selected.size}
      </p>
    </div>
  );
}

import { GridList } from "@hashti/react";

export function CardGridListExample() {
  return (
    <GridList variant="card" aria-label="Server clusters" selectionMode="single">
      <GridList.Item textValue="Cluster US-East">
        <div>
          <p className="font-semibold text-sm">us-east-prod-01</p>
          <p className="text-xs text-[var(--text-muted)]">32 nodes · 99.98% uptime</p>
        </div>
      </GridList.Item>
      <GridList.Item textValue="Cluster EU-West">
        <div>
          <p className="font-semibold text-sm">eu-west-prod-02</p>
          <p className="text-xs text-[var(--text-muted)]">16 nodes · 100% uptime</p>
        </div>
      </GridList.Item>
    </GridList>
  );
}

import { GridList } from "@hashti/react";

export function ReorderableQueueList() {
  return (
    <GridList aria-label="Playback queue" variant="bordered">
      <GridList.Item textValue="Track 1">
        <div className="flex items-center gap-2">
          <GridList.DragHandle />
          <span>01. Introduction to Safavid Geometry</span>
        </div>
      </GridList.Item>
      <GridList.Item textValue="Track 2">
        <div className="flex items-center gap-2">
          <GridList.DragHandle />
          <span>02. The Sacred Threshold of Hashti</span>
        </div>
      </GridList.Item>
    </GridList>
  );
}

<GridList
  aria-label="Search results"
  items={[]}
  emptyContent={
    <div className="text-center py-8">
      <p className="font-medium text-sm">No items found</p>
      <p className="text-xs text-[var(--text-muted)]">Try adjusting your active filters</p>
    </div>
  }
>
  {(item) => <GridList.Item>{item.name}</GridList.Item>}
</GridList>