Card

---
import Card from "../Card.astro";
import Avatar from "@pindoba/astro-avatar";
import Badge from "@pindoba/astro-badge";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import { ArrowRight, Sparkles } from "@lucide/astro";
import { css } from "@pindoba/styled-system/css";
import { flex } from "@pindoba/styled-system/patterns";
---

<div class={css({ width: "100%", maxWidth: "42rem" })}>
  <Card
    border="default"
    shadow="sm"
    radius="lg"
    header={{
      eyebrow: "Changelog · v2.4",
      heading: "Design tokens, refreshed",
      subheading: "June 3, 2026 · 4 min read",
      layout: {
        leading: { span: "below" },
        trailing: { align: "start" },
      },
    }}
  >
    <Stamp
      slot="header-leading"
      size="md"
      shape="square"
      feedback="primary"
      emphasis="primary"
    >
      <Sparkles />
    </Stamp>
    <Badge slot="header-trailing" feedback="success">New</Badge>

    <p class={css({ margin: "0", color: "panel.text" })}>
      Every color, space, and type value now flows from a single source of truth
      — tweak one token and the change ripples through every component, in every
      framework, automatically. This release also ships fluid headings and the
      new numeric text styles.
    </p>

    <div slot="footer-leading" class={flex({ gap: "xs", align: "center" })}>
      <Avatar
        name="Helena Rocha"
        src="https://i.pravatar.cc/96?img=32"
        size="sm"
      />
      <div class={css({ display: "flex", flexDirection: "column" })}>
        <span
          class={css({
            fontSize: "sm",
            fontWeight: "semibold",
            color: "panel.text.bold",
            lineHeight: "tight",
          })}>Helena Rocha</span
        >
        <span
          class={css({
            fontSize: "xs",
            color: "panel.text.muted",
            lineHeight: "tight",
          })}>Design Systems</span
        >
      </div>
    </div>
    <Button slot="footer-trailing" size="sm">
      Read more
      <ArrowRight />
    </Button>
  </Card>
</div>

import { Card } from "../Card";
import Avatar from "@pindoba/react-avatar";
import Badge from "@pindoba/react-badge";
import Button from "@pindoba/react-button";
import Stamp from "@pindoba/react-stamp";
import { css } from "@pindoba/styled-system/css";
import { flex } from "@pindoba/styled-system/patterns";
import { LucideSparkles, LucideArrowRight } from "./_icons";

const releaseStamp = (
  <Stamp size="md" shape="square" feedback="primary" emphasis="primary">
    <LucideSparkles />
  </Stamp>
);

const newBadge = <Badge feedback="success">New</Badge>;

const author = (
  <div className={flex({ gap: "xs", align: "center" })}>
    <Avatar
      name="Helena Rocha"
      src="https://i.pravatar.cc/96?img=32"
      size="sm"
    />
    <div className={css({ display: "flex", flexDirection: "column" })}>
      <span
        className={css({
          fontSize: "sm",
          fontWeight: "semibold",
          color: "panel.text.bold",
          lineHeight: "tight",
        })}
      >
        Helena Rocha
      </span>
      <span
        className={css({
          fontSize: "xs",
          color: "panel.text.muted",
          lineHeight: "tight",
        })}
      >
        Design Systems
      </span>
    </div>
  </div>
);

const readMore = (
  <Button size="sm">
    Read more
    <LucideArrowRight />
  </Button>
);

export default function DefaultDemo() {
  return (
    <div className={css({ width: "100%", maxWidth: "42rem" })}>
      <Card
        border="default"
        shadow="sm"
        radius="lg"
        header={{
          leading: releaseStamp,
          eyebrow: "Changelog · v2.4",
          heading: "Design tokens, refreshed",
          subheading: "June 3, 2026 · 4 min read",
          trailing: newBadge,
          layout: {
            leading: { span: "below" },
            trailing: { align: "start" },
          },
        }}
        footer={{
          leading: author,
          trailing: readMore,
        }}
      >
        <p className={css({ margin: "0", color: "panel.text" })}>
          Every color, space, and type value now flows from a single source of
          truth — tweak one token and the change ripples through every
          component, in every framework, automatically. This release also ships
          fluid headings and the new numeric text styles.
        </p>
      </Card>
    </div>
  );
}

<script lang="ts">
  import Card from "../Card.svelte";
  import Avatar from "@pindoba/svelte-avatar";
  import Badge from "@pindoba/svelte-badge";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import { css } from "@pindoba/styled-system/css";
  import { flex } from "@pindoba/styled-system/patterns";
  import LucideSparkles from "@lucide/svelte/icons/sparkles";
  import LucideArrowRight from "@lucide/svelte/icons/arrow-right";
</script>

{#snippet releaseStamp()}
  <Stamp size="md" shape="square" feedback="primary" emphasis="primary">
    <LucideSparkles />
  </Stamp>
{/snippet}

{#snippet newBadge()}
  <Badge feedback="success">New</Badge>
{/snippet}

{#snippet author()}
  <div class={flex({ gap: "xs", align: "center" })}>
    <Avatar
      name="Helena Rocha"
      src="https://i.pravatar.cc/96?img=32"
      size="sm"
    />
    <div class={css({ display: "flex", flexDirection: "column" })}>
      <span
        class={css({
          fontSize: "sm",
          fontWeight: "semibold",
          color: "panel.text.bold",
          lineHeight: "tight",
        })}>Helena Rocha</span
      >
      <span
        class={css({
          fontSize: "xs",
          color: "panel.text.muted",
          lineHeight: "tight",
        })}>Design Systems</span
      >
    </div>
  </div>
{/snippet}

{#snippet readMore()}
  <Button size="sm">
    Read more
    <LucideArrowRight />
  </Button>
{/snippet}

<div class={css({ width: "100%", maxWidth: "42rem" })}>
  <Card
    border="default"
    shadow="sm"
    radius="lg"
    header={{
      leading: releaseStamp,
      eyebrow: "Changelog · v2.4",
      heading: "Design tokens, refreshed",
      subheading: "June 3, 2026 · 4 min read",
      trailing: newBadge,
      layout: {
        leading: { span: "below" },
        trailing: { align: "start" },
      },
    }}
    footer={{
      leading: author,
      trailing: readMore,
    }}
  >
    <p class={css({ margin: "0", color: "panel.text" })}>
      Every color, space, and type value now flows from a single source of truth
      — tweak one token and the change ripples through every component, in every
      framework, automatically. This release also ships fluid headings and the
      new numeric text styles.
    </p>
  </Card>
</div>

<script setup lang="ts">
import { h } from "vue";
import { Card, type CardHeaderConfig } from "@pindoba/vue-card";
import { Avatar } from "@pindoba/vue-avatar";
import { Badge } from "@pindoba/vue-badge";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { css } from "@pindoba/styled-system/css";
import { flex } from "@pindoba/styled-system/patterns";
import { Sparkles, ArrowRight } from "./_icons";

const releaseStamp = h(
  Stamp,
  { size: "md", shape: "square", feedback: "primary", emphasis: "primary" },
  () => h(Sparkles),
);

const newBadge = h(Badge, { feedback: "success" }, () => "New");

const author = h("div", { class: flex({ gap: "xs", align: "center" }) }, [
  h(Avatar, {
    name: "Helena Rocha",
    src: "https://i.pravatar.cc/96?img=32",
    size: "sm",
  }),
  h("div", { class: css({ display: "flex", flexDirection: "column" }) }, [
    h(
      "span",
      {
        class: css({
          fontSize: "sm",
          fontWeight: "semibold",
          color: "panel.text.bold",
          lineHeight: "tight",
        }),
      },
      "Helena Rocha",
    ),
    h(
      "span",
      {
        class: css({
          fontSize: "xs",
          color: "panel.text.muted",
          lineHeight: "tight",
        }),
      },
      "Design Systems",
    ),
  ]),
]);

const readMore = h(Button, { size: "sm" }, () => ["Read more", h(ArrowRight)]);

const header: CardHeaderConfig = {
  leading: releaseStamp,
  eyebrow: "Changelog · v2.4",
  heading: "Design tokens, refreshed",
  subheading: "June 3, 2026 · 4 min read",
  trailing: newBadge,
  layout: {
    leading: { span: "below" },
    trailing: { align: "start" },
  },
};

const footer = { leading: author, trailing: readMore };
</script>

<template>
  <div :class="css({ width: '100%', maxWidth: '42rem' })">
    <Card
      border="default"
      shadow="sm"
      radius="lg"
      :header="header"
      :footer="footer"
    >
      <p :class="css({ margin: '0', color: 'panel.text' })">
        Every color, space, and type value now flows from a single source of
        truth — tweak one token and the change ripples through every component,
        in every framework, automatically. This release also ships fluid
        headings and the new numeric text styles.
      </p>
    </Card>
  </div>
</template>

---
import Card from "../Card.astro";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import {
  Bell,
  CircleCheck,
  Megaphone,
  OctagonAlert,
  TriangleAlert,
} from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const items = [
  {
    feedback: "neutral",
    icon: Bell,
    heading: "Weekly digest is ready",
    subheading: "12 updates since Monday",
    body: "A neutral card sets the calm default — quiet enough for routine notifications that don't demand attention.",
    cta: "View all",
  },
  {
    feedback: "primary",
    icon: Megaphone,
    heading: "Dark mode has landed",
    subheading: "Now available in Settings",
    body: "Primary leans on the brand color to spotlight announcements, new features, and the action you'd most like someone to take.",
    cta: "Try it now",
  },
  {
    feedback: "success",
    icon: CircleCheck,
    heading: "Payment received",
    subheading: "Invoice #4,128 · R$ 420.00",
    body: "Success confirms something went right — a completed payment, a passing build, a saved change.",
    cta: "View receipt",
  },
  {
    feedback: "warning",
    icon: TriangleAlert,
    heading: "Storage almost full",
    subheading: "8.7 GB of 10 GB used",
    body: "Warning flags something that needs attention soon but isn't broken yet — a soft nudge before it becomes a problem.",
    cta: "Upgrade plan",
  },
  {
    feedback: "danger",
    icon: OctagonAlert,
    heading: "Subscription expired",
    subheading: "Renew to restore access",
    body: "Danger marks the highest-stakes states — failures, expirations, and destructive actions that can't be undone.",
    cta: "Renew now",
  },
] as const;
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  {
    items.map((item) => {
      const LeadingIcon = item.icon;
      return (
        <Card
          feedback={item.feedback}
          border="default"
          header={{
            heading: item.heading,
            subheading: item.subheading,
          }}
        >
          <Stamp
            slot="header-leading"
            size="md"
            shape="square"
            feedback={item.feedback}
            emphasis="secondary"
          >
            <LeadingIcon />
          </Stamp>
          <p class={css({ margin: "0", color: "panel.text" })}>{item.body}</p>
          <Button slot="footer-trailing" size="sm" feedback={item.feedback}>
            {item.cta}
          </Button>
        </Card>
      );
    })
  }
</div>

import { Card } from "../Card";
import Button from "@pindoba/react-button";
import Stamp from "@pindoba/react-stamp";
import type { CardFeedback } from "@pindoba/core-card";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import type { ComponentType } from "react";
import {
  LucideBell,
  LucideMegaphone,
  LucideCircleCheck,
  LucideTriangleAlert,
  LucideOctagonAlert,
} from "./_icons";

const items: readonly {
  feedback: CardFeedback;
  Icon: ComponentType;
  heading: string;
  subheading: string;
  body: string;
  cta: string;
}[] = [
  {
    feedback: "neutral",
    Icon: LucideBell,
    heading: "Weekly digest is ready",
    subheading: "12 updates since Monday",
    body: "A neutral card sets the calm default — quiet enough for routine notifications that don't demand attention.",
    cta: "View all",
  },
  {
    feedback: "primary",
    Icon: LucideMegaphone,
    heading: "Dark mode has landed",
    subheading: "Now available in Settings",
    body: "Primary leans on the brand color to spotlight announcements, new features, and the action you'd most like someone to take.",
    cta: "Try it now",
  },
  {
    feedback: "success",
    Icon: LucideCircleCheck,
    heading: "Payment received",
    subheading: "Invoice #4,128 · R$ 420.00",
    body: "Success confirms something went right — a completed payment, a passing build, a saved change.",
    cta: "View receipt",
  },
  {
    feedback: "warning",
    Icon: LucideTriangleAlert,
    heading: "Storage almost full",
    subheading: "8.7 GB of 10 GB used",
    body: "Warning flags something that needs attention soon but isn't broken yet — a soft nudge before it becomes a problem.",
    cta: "Upgrade plan",
  },
  {
    feedback: "danger",
    Icon: LucideOctagonAlert,
    heading: "Subscription expired",
    subheading: "Renew to restore access",
    body: "Danger marks the highest-stakes states — failures, expirations, and destructive actions that can't be undone.",
    cta: "Renew now",
  },
];

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      {items.map((item) => (
        <Card
          key={item.feedback}
          feedback={item.feedback}
          border="default"
          header={{
            leading: (
              <Stamp
                size="md"
                shape="square"
                feedback={item.feedback}
                emphasis="secondary"
              >
                <item.Icon />
              </Stamp>
            ),
            heading: item.heading,
            subheading: item.subheading,
          }}
          footer={{
            trailing: (
              <Button size="sm" feedback={item.feedback}>
                {item.cta}
              </Button>
            ),
          }}
        >
          <p className={css({ margin: "0", color: "panel.text" })}>
            {item.body}
          </p>
        </Card>
      ))}
    </div>
  );
}

<script lang="ts">
  import Card from "../Card.svelte";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import type { CardFeedback } from "@pindoba/core-card";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";
  import LucideBell from "@lucide/svelte/icons/bell";
  import LucideMegaphone from "@lucide/svelte/icons/megaphone";
  import LucideCircleCheck from "@lucide/svelte/icons/circle-check";
  import LucideTriangleAlert from "@lucide/svelte/icons/triangle-alert";
  import LucideOctagonAlert from "@lucide/svelte/icons/octagon-alert";

  const items = [
    {
      feedback: "neutral",
      icon: LucideBell,
      heading: "Weekly digest is ready",
      subheading: "12 updates since Monday",
      body: "A neutral card sets the calm default — quiet enough for routine notifications that don't demand attention.",
      cta: "View all",
    },
    {
      feedback: "primary",
      icon: LucideMegaphone,
      heading: "Dark mode has landed",
      subheading: "Now available in Settings",
      body: "Primary leans on the brand color to spotlight announcements, new features, and the action you'd most like someone to take.",
      cta: "Try it now",
    },
    {
      feedback: "success",
      icon: LucideCircleCheck,
      heading: "Payment received",
      subheading: "Invoice #4,128 · R$ 420.00",
      body: "Success confirms something went right — a completed payment, a passing build, a saved change.",
      cta: "View receipt",
    },
    {
      feedback: "warning",
      icon: LucideTriangleAlert,
      heading: "Storage almost full",
      subheading: "8.7 GB of 10 GB used",
      body: "Warning flags something that needs attention soon but isn't broken yet — a soft nudge before it becomes a problem.",
      cta: "Upgrade plan",
    },
    {
      feedback: "danger",
      icon: LucideOctagonAlert,
      heading: "Subscription expired",
      subheading: "Renew to restore access",
      body: "Danger marks the highest-stakes states — failures, expirations, and destructive actions that can't be undone.",
      cta: "Renew now",
    },
  ] satisfies readonly {
    feedback: CardFeedback;
    icon: typeof LucideBell;
    heading: string;
    subheading: string;
    body: string;
    cta: string;
  }[];
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  {#each items as item (item.feedback)}
    {#snippet leadingStamp()}
      <Stamp
        size="md"
        shape="square"
        feedback={item.feedback}
        emphasis="secondary"
      >
        <item.icon />
      </Stamp>
    {/snippet}
    {#snippet action()}
      <Button size="sm" feedback={item.feedback}>{item.cta}</Button>
    {/snippet}
    <Card
      feedback={item.feedback}
      border="default"
      header={{
        leading: leadingStamp,
        heading: item.heading,
        subheading: item.subheading,
      }}
      footer={{ trailing: action }}
    >
      <p class={css({ margin: "0", color: "panel.text" })}>
        {item.body}
      </p>
    </Card>
  {/each}
</div>

<script setup lang="ts">
import { h, type Component } from "vue";
import { Card } from "@pindoba/vue-card";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import type { CardFeedback } from "@pindoba/core-card";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import {
  Bell,
  Megaphone,
  CircleCheck,
  TriangleAlert,
  OctagonAlert,
} from "./_icons";

const items: {
  feedback: CardFeedback;
  icon: Component;
  heading: string;
  subheading: string;
  body: string;
  cta: string;
}[] = [
  {
    feedback: "neutral",
    icon: Bell,
    heading: "Weekly digest is ready",
    subheading: "12 updates since Monday",
    body: "A neutral card sets the calm default — quiet enough for routine notifications that don't demand attention.",
    cta: "View all",
  },
  {
    feedback: "primary",
    icon: Megaphone,
    heading: "Dark mode has landed",
    subheading: "Now available in Settings",
    body: "Primary leans on the brand color to spotlight announcements, new features, and the action you'd most like someone to take.",
    cta: "Try it now",
  },
  {
    feedback: "success",
    icon: CircleCheck,
    heading: "Payment received",
    subheading: "Invoice #4,128 · R$ 420.00",
    body: "Success confirms something went right — a completed payment, a passing build, a saved change.",
    cta: "View receipt",
  },
  {
    feedback: "warning",
    icon: TriangleAlert,
    heading: "Storage almost full",
    subheading: "8.7 GB of 10 GB used",
    body: "Warning flags something that needs attention soon but isn't broken yet — a soft nudge before it becomes a problem.",
    cta: "Upgrade plan",
  },
  {
    feedback: "danger",
    icon: OctagonAlert,
    heading: "Subscription expired",
    subheading: "Renew to restore access",
    body: "Danger marks the highest-stakes states — failures, expirations, and destructive actions that can't be undone.",
    cta: "Renew now",
  },
];

function headerFor(item: (typeof items)[number]) {
  return {
    leading: h(
      Stamp,
      {
        size: "md",
        shape: "square",
        feedback: item.feedback,
        emphasis: "secondary",
      },
      () => h(item.icon),
    ),
    heading: item.heading,
    subheading: item.subheading,
  };
}

function footerFor(item: (typeof items)[number]) {
  return {
    trailing: h(
      Button,
      { size: "sm", feedback: item.feedback },
      () => item.cta,
    ),
  };
}
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: '100%' })">
    <Card
      v-for="item in items"
      :key="item.feedback"
      :feedback="item.feedback"
      border="default"
      :header="headerFor(item)"
      :footer="footerFor(item)"
    >
      <p :class="css({ margin: '0', color: 'panel.text' })">{{ item.body }}</p>
    </Card>
  </div>
</template>

---
import Card from "../Card.astro";
import Badge from "@pindoba/astro-badge";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import { Rocket } from "@lucide/astro";
import { stack, flex } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const sizes = [
  { size: "2xs", label: "2X-Small" },
  { size: "xs", label: "X-Small" },
  { size: "sm", label: "Small" },
  { size: "md", label: "Medium · default" },
  { size: "lg", label: "Large" },
] as const;
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  {
    sizes.map((s) => (
      <div>
        <span
          class={css({
            textStyle: "label.sm",
            color: "panel.text.muted",
            display: "block",
            marginBottom: "xs",
          })}
        >
          {s.label}
        </span>
        <Card
          size={s.size}
          border="default"
          shadow="sm"
          header={{
            heading: "Deploy to production",
            subheading: "staging → main · 14 commits",
          }}
        >
          <Stamp
            slot="header-leading"
            size="md"
            shape="square"
            feedback="primary"
            emphasis="primary"
          >
            <Rocket />
          </Stamp>
          <Badge slot="header-trailing" feedback="warning">
            Queued
          </Badge>
          <p class={css({ margin: "0", color: "panel.text" })}>
            Roll out the latest build to every region. Approvals are in and the
            canary has stayed healthy for 20 minutes.
          </p>
          <span
            slot="footer-leading"
            class={css({ fontSize: "xs", color: "panel.text.muted" })}
          >
            Queued 2 min ago
          </span>
          <div
            slot="footer-trailing"
            class={flex({ gap: "sm", align: "center" })}
          >
            <Button emphasis="secondary" size="sm">
              Cancel
            </Button>
            <Button feedback="primary" size="sm">
              Deploy
            </Button>
          </div>
        </Card>
      </div>
    ))
  }
</div>

import { Card } from "../Card";
import Badge from "@pindoba/react-badge";
import Button from "@pindoba/react-button";
import Stamp from "@pindoba/react-stamp";
import type { CardSize } from "@pindoba/core-card";
import { stack, flex } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { LucideRocket } from "./_icons";

const sizes: { size: CardSize; label: string }[] = [
  { size: "2xs", label: "2X-Small" },
  { size: "xs", label: "X-Small" },
  { size: "sm", label: "Small" },
  { size: "md", label: "Medium · default" },
  { size: "lg", label: "Large" },
];

const deployStamp = (
  <Stamp size="md" shape="square" feedback="primary" emphasis="primary">
    <LucideRocket />
  </Stamp>
);

const queuedBadge = <Badge feedback="warning">Queued</Badge>;

const meta = (
  <span className={css({ fontSize: "xs", color: "panel.text.muted" })}>
    Queued 2 min ago
  </span>
);

const actions = (
  <div className={flex({ gap: "sm", align: "center" })}>
    <Button emphasis="secondary" size="sm">
      Cancel
    </Button>
    <Button feedback="primary" size="sm">
      Deploy
    </Button>
  </div>
);

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      {sizes.map((s) => (
        <div key={s.size}>
          <span
            className={css({
              textStyle: "label.sm",
              color: "panel.text.muted",
              display: "block",
              marginBottom: "xs",
            })}
          >
            {s.label}
          </span>
          <Card
            size={s.size}
            border="default"
            shadow="sm"
            header={{
              leading: deployStamp,
              heading: "Deploy to production",
              subheading: "staging → main · 14 commits",
              trailing: queuedBadge,
            }}
            footer={{ leading: meta, trailing: actions }}
          >
            <p className={css({ margin: "0", color: "panel.text" })}>
              Roll out the latest build to every region. Approvals are in and
              the canary has stayed healthy for 20 minutes.
            </p>
          </Card>
        </div>
      ))}
    </div>
  );
}

<script lang="ts">
  import Card from "../Card.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import type { CardSize } from "@pindoba/core-card";
  import { stack, flex } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";
  import LucideRocket from "@lucide/svelte/icons/rocket";

  const sizes: { size: CardSize; label: string }[] = [
    { size: "2xs", label: "2X-Small" },
    { size: "xs", label: "X-Small" },
    { size: "sm", label: "Small" },
    { size: "md", label: "Medium · default" },
    { size: "lg", label: "Large" },
  ];
</script>

{#snippet deployStamp()}
  <Stamp size="md" shape="square" feedback="primary" emphasis="primary">
    <LucideRocket />
  </Stamp>
{/snippet}

{#snippet queuedBadge()}
  <Badge feedback="warning">Queued</Badge>
{/snippet}

{#snippet meta()}
  <span class={css({ fontSize: "xs", color: "panel.text.muted" })}>
    Queued 2 min ago
  </span>
{/snippet}

{#snippet actions()}
  <div class={flex({ gap: "sm", align: "center" })}>
    <Button emphasis="secondary" size="sm">Cancel</Button>
    <Button feedback="primary" size="sm">Deploy</Button>
  </div>
{/snippet}

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  {#each sizes as s (s.size)}
    <div>
      <span
        class={css({
          textStyle: "label.sm",
          color: "panel.text.muted",
          display: "block",
          marginBottom: "xs",
        })}
      >
        {s.label}
      </span>
      <Card
        size={s.size}
        border="default"
        shadow="sm"
        header={{
          leading: deployStamp,
          heading: "Deploy to production",
          subheading: "staging → main · 14 commits",
          trailing: queuedBadge,
        }}
        footer={{ leading: meta, trailing: actions }}
      >
        <p class={css({ margin: "0", color: "panel.text" })}>
          Roll out the latest build to every region. Approvals are in and the
          canary has stayed healthy for 20 minutes.
        </p>
      </Card>
    </div>
  {/each}
</div>

<script setup lang="ts">
import { h } from "vue";
import { Card } from "@pindoba/vue-card";
import { Badge } from "@pindoba/vue-badge";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import type { CardSize } from "@pindoba/core-card";
import { stack, flex } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Rocket } from "./_icons";

const sizes: { size: CardSize; label: string }[] = [
  { size: "2xs", label: "2X-Small" },
  { size: "xs", label: "X-Small" },
  { size: "sm", label: "Small" },
  { size: "md", label: "Medium · default" },
  { size: "lg", label: "Large" },
];

const deployStamp = h(
  Stamp,
  { size: "md", shape: "square", feedback: "primary", emphasis: "primary" },
  () => h(Rocket),
);

const queuedBadge = h(Badge, { feedback: "warning" }, () => "Queued");

const meta = h(
  "span",
  { class: css({ fontSize: "xs", color: "panel.text.muted" }) },
  "Queued 2 min ago",
);

const actions = h("div", { class: flex({ gap: "sm", align: "center" }) }, [
  h(Button, { emphasis: "secondary", size: "sm" }, () => "Cancel"),
  h(Button, { feedback: "primary", size: "sm" }, () => "Deploy"),
]);

const header = {
  leading: deployStamp,
  heading: "Deploy to production",
  subheading: "staging → main · 14 commits",
  trailing: queuedBadge,
};

const footer = { leading: meta, trailing: actions };

const labelClass = css({
  textStyle: "label.sm",
  color: "panel.text.muted",
  display: "block",
  marginBottom: "xs",
});
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', width: '100%' })">
    <div v-for="s in sizes" :key="s.size">
      <span :class="labelClass">{{ s.label }}</span>
      <Card
        :size="s.size"
        border="default"
        shadow="sm"
        :header="header"
        :footer="footer"
      >
        <p :class="css({ margin: '0', color: 'panel.text' })">
          Roll out the latest build to every region. Approvals are in and the
          canary has stayed healthy for 20 minutes.
        </p>
      </Card>
    </div>
  </div>
</template>