packages/ui/src/components/card.tsx

Metadata

• Purpose: Shared UI package for reusable design primitives/components.
• Domain: shared-packages
• Language: tsx
• Bytes: 791
• Lines: 26
• Content hash (short): 2b698d20
• Source (start): packages/ui/src/components/card.tsx:1
• Source (end): packages/ui/src/components/card.tsx:26

Indexed Symbols

• Card (line 23, function) - Implements card for module behavior.

Markdown Headings (if applicable)

No markdown headings detected.

Source Preview

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { clsx } from "clsx";

const cardVariants = cva(
  "rounded-2xl border p-5 text-[var(--ink-base)] shadow-[var(--shadow-soft)]",
  {
    variants: {
      tone: {
        default: "border-[var(--stroke-subtle)] bg-[var(--paper)]",
        elevated: "border-[var(--stroke-strong)] bg-white",
        critical: "border-[var(--accent-red)]/40 bg-[var(--accent-red-soft)]/20"
      }
    },
    defaultVariants: {
      tone: "default"
    }
  }
);

type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;

export function Card({ className, tone, ...props }: CardProps) {
  return <div className={clsx(cardVariants({ tone }), className)} {...props} />;
}