CardStack

"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardStack,
  CardTitle,
} from "@dethink/components";

const releases = [
  {
    version: "v1.4.0",
    date: "June 2026",
    summary:
      "Date suite: Calendar, DatePicker, DateRangePicker, DateTimePicker.",
  },
  {
    version: "v1.3.0",
    date: "May 2026",
    summary: "DataTable with sorting, filtering, and row selection.",
  },
  {
    version: "v1.2.0",
    date: "April 2026",
    summary: "Overlay primitives: Popover, Tooltip, and DropdownMenu.",
  },
];

export function CardStackBasic() {
  return (
    <CardStack aria-label="Latest releases">
      {releases.map((release) => (
        <Card key={release.version}>
          <CardHeader>
            <CardTitle>{release.version}</CardTitle>
            <CardDescription>{release.date}</CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {release.summary}
          </CardContent>
        </Card>
      ))}
    </CardStack>
  );
}

"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardStack,
  CardTitle,
} from "@dethink/components";

const plans = [
  { name: "Starter", price: "$0", blurb: "Two projects, community support." },
  { name: "Team", price: "$29", blurb: "Unlimited projects, shared themes." },
  { name: "Scale", price: "$99", blurb: "SSO, audit log, priority support." },
];

export function CardStackOpen() {
  return (
    <CardStack
      aria-label="Pricing plans"
      mode="open"
      angle={10}
      defaultActiveIndex={1}
    >
      {plans.map((plan) => (
        <Card key={plan.name}>
          <CardHeader>
            <CardTitle>{plan.name}</CardTitle>
            <CardDescription>{plan.price} per month</CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground text-sm">
            {plan.blurb}
          </CardContent>
        </Card>
      ))}
    </CardStack>
  );
}

"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardStack,
  CardTitle,
} from "@dethink/components";

const steps = [
  { title: "1. Install", body: "npx shadcn@latest add @dethink/card-stack" },
  { title: "2. Compose", body: "Pass Card children straight into CardStack." },
  { title: "3. Ship", body: "Theme everything through the CSS variables." },
];

export function CardStackBoundaries() {
  return (
    <CardStack
      aria-label="Getting started steps"
      loop={false}
      stackOffset={14}
      previousLabel="Previous step"
      nextLabel="Next step"
    >
      {steps.map((step) => (
        <Card key={step.title}>
          <CardHeader>
            <CardTitle>{step.title}</CardTitle>
            <CardDescription>Setup walkthrough</CardDescription>
          </CardHeader>
          <CardContent className="text-muted-foreground font-mono text-sm">
            {step.body}
          </CardContent>
        </Card>
      ))}
    </CardStack>
  );
}

"use client";

import { useState } from "react";
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardStack,
  CardTitle,
} from "@dethink/components";

const quotes = [
  {
    author: "Dana, platform lead",
    quote: "We rethemed the whole library in an afternoon.",
  },
  {
    author: "Miguel, frontend dev",
    quote: "Open code means no more fighting a black box.",
  },
  {
    author: "Priya, design systems",
    quote: "The tokens map one-to-one onto our brand.",
  },
];

export function CardStackControlled() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div className="space-y-4">
      <CardStack
        aria-label="Customer quotes"
        mode="open"
        activeIndex={activeIndex}
        onActiveIndexChange={setActiveIndex}
      >
        {quotes.map((entry) => (
          <Card key={entry.author}>
            <CardHeader>
              <CardTitle>“{entry.quote}”</CardTitle>
              <CardDescription>{entry.author}</CardDescription>
            </CardHeader>
            <CardContent className="text-muted-foreground text-sm">
              Quote {quotes.indexOf(entry) + 1} of {quotes.length}
            </CardContent>
          </Card>
        ))}
      </CardStack>
      <div className="flex justify-center gap-2">
        {quotes.map((entry, index) => (
          <Button
            key={entry.author}
            size="sm"
            variant={index === activeIndex ? "solid" : "outline"}
            onClick={() => setActiveIndex(index)}
          >
            {index + 1}
          </Button>
        ))}
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardStack,
  CardTitle,
} from "@dethink/components";

const updates = [
  {
    title: "Draft",
    detail: "Start here",
    body: "Sketch the release notes and gather the changelog entries.",
  },
  {
    title: "Review",
    detail: "In progress",
    body: "Loop in design and engineering leads for a final pass.",
  },
  {
    title: "Publish",
    detail: "Last step",
    body: "Ship the announcement and notify the changelog subscribers.",
  },
];

export function CardStackHiddenControls() {
  const [activeIndex, setActiveIndex] = useState(0);
  const isLast = activeIndex === updates.length - 1;

  return (
    <div className="space-y-4">
      <CardStack
        aria-label="Release checklist"
        activeIndex={activeIndex}
        loop={false}
        onActiveIndexChange={setActiveIndex}
        showPreviousControl={false}
      >
        {updates.map((update) => (
          <Card key={update.title}>
            <CardHeader>
              <CardTitle>{update.title}</CardTitle>
              <CardDescription>{update.detail}</CardDescription>
            </CardHeader>
            <CardContent className="text-muted-foreground text-sm">
              {update.body}
            </CardContent>
          </Card>
        ))}
      </CardStack>
      <div className="flex justify-center gap-2">
        <Button
          size="sm"
          variant="outline"
          disabled={activeIndex === 0}
          onClick={() => setActiveIndex((index) => index - 1)}
        >
          Back
        </Button>
        <Button
          size="sm"
          disabled={isLast}
          onClick={() => setActiveIndex((index) => index + 1)}
        >
          {isLast ? "Done" : "Continue"}
        </Button>
      </div>
    </div>
  );
}