1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T131f,import type { ComponentProps } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { cva, type VariantProps } from "@/registry/tier-2-primitives/lib/cva"; /** * Card. * * 24px radius, raised surface, subtle border, E1 at rest. That combination is * the storefront's card and it is the default for a reason — one radius per * stack, and 24 is the one. * * ELEVATION IS A STATEMENT, NOT A STYLE * E1 rests. E2 is for a card that is being hovered or that floats over * content. E3 belongs to modals and drawers. Put E3 on a resting card and * everything on the page floats, which means nothing does. */ const cardVariants = cva("rounded-xl bg-surface-raised", { variants: { variant: { /** The default. Border plus the resting shadow. */ default: "border border-border-subtle shadow-e1", /** No shadow. For a card in a dense grid where E1 × 20 reads as noise. */ flat: "border border-border-subtle", /** A well. Recessed rather than raised — filters, summaries, code. */ sunken: "border border-transparent bg-surface-sunken", /** A dark moment: an order confirmation, a closing CTA. */ inverse: "border border-border-inverse bg-surface-inverse text-text-inverse", /** Brand tint. Rare — one per page, and never next to another. */ accent: "border border-transparent bg-surface-accent-subtle", }, /** Adds the hover lift. Only for a card that is itself a link or a button. */ interactive: { true: "transition-[box-shadow,transform,border-color] motion-base hover:-translate-y-0.5 hover:border-border-strong hover:shadow-e2", false: "", }, padding: { none: "p-0", sm: "p-4", /** Card padding on mobile. */ md: "p-5", /** Card padding — the default. */ lg: "p-6", /** Card padding on desktop, for a feature panel. */ xl: "p-10", }, }, defaultVariants: { variant: "default", interactive: false, padding: "lg" }, }); export type CardProps = ComponentProps<"div"> & VariantProps; export function Card({ className, variant, interactive, padding, ...props }: CardProps) { return (

); } /** * The card's header row. Use `CardTitle` inside it rather than a bare `

`, * so the type scale is applied and not guessed. */ export function CardHeader({ className, ...props }: ComponentProps<"div">) { return (

); } export function CardTitle({ className, ...props }: ComponentProps<"h3">) { return (

); } export function CardDescription({ className, ...props }: ComponentProps<"p">) { return (

); } export function CardContent({ className, ...props }: ComponentProps<"div">) { return

; } /** * The action row. Separated by a hairline rather than by space, because a * footer that scrolls with the content needs a boundary a person can see. */ export function CardFooter({ className, ...props }: ComponentProps<"div">) { return (

); } /** * The uppercase label that opens a card or a section. * * 11px, weight 700, +10% tracking, in the accent, preceded by a 22px rule. * That rule is part of the device — the eyebrow without it reads as a stray * caption. */ export function CardLabel({ className, children, ...props }: ComponentProps<"div">) { return (

{children}

); } export { cardVariants }; /** * The action that belongs to a card's header — a menu button, a link. * * Sits top-right of the header row, so it needs a header that is a grid rather * than a stack. It is a sibling of the title, not a child, so the accessible * name of the button stays its own. */ export function CardAction({ className, ...props }: ComponentProps<"div">) { return (

); } 24:T8cb2,

import type { ComponentProps } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { cva, type VariantProps } from "@/registry/tier-2-primitives/lib/cva";

/**
 * Card.
 *
 * 24px radius, raised surface, subtle border, E1 at rest. That combination is
 * the storefront's card and it is the default for a reason — one radius per
 * stack, and 24 is the one.
 *
 * ELEVATION IS A STATEMENT, NOT A STYLE
 *   E1 rests. E2 is for a card that is being hovered or that floats over
 *   content. E3 belongs to modals and drawers. Put E3 on a resting card and
 *   everything on the page floats, which means nothing does.
 */
const cardVariants = cva("rounded-xl bg-surface-raised", {
  variants: {
    variant: {
      /** The default. Border plus the resting shadow. */
      default: "border border-border-subtle shadow-e1",
      /** No shadow. For a card in a dense grid where E1 × 20 reads as noise. */
      flat: "border border-border-subtle",
      /** A well. Recessed rather than raised — filters, summaries, code. */
      sunken: "border border-transparent bg-surface-sunken",
      /** A dark moment: an order confirmation, a closing CTA. */
      inverse: "border border-border-inverse bg-surface-inverse text-text-inverse",
      /** Brand tint. Rare — one per page, and never next to another. */
      accent: "border border-transparent bg-surface-accent-subtle",
    },
    /** Adds the hover lift. Only for a card that is itself a link or a button. */
    interactive: {
      true: "transition-[box-shadow,transform,border-color] motion-base hover:-translate-y-0.5 hover:border-border-strong hover:shadow-e2",
      false: "",
    },
    padding: {
      none: "p-0",
      sm: "p-4",
      /** Card padding on mobile. */
      md: "p-5",
      /** Card padding — the default. */
      lg: "p-6",
      /** Card padding on desktop, for a feature panel. */
      xl: "p-10",
    },
  },
  defaultVariants: { variant: "default", interactive: false, padding: "lg" },
});

export type CardProps = ComponentProps<"div"> & VariantProps<typeof cardVariants>;

export function Card({ className, variant, interactive, padding, ...props }: CardProps) {
  return (
    <div
      data-slot="card"
      className={cn(cardVariants({ variant, interactive, padding }), className)}
      {...props}
    />
  );
}

/**
 * The card's header row. Use `CardTitle` inside it rather than a bare `<h3>`,
 * so the type scale is applied and not guessed.
 */
export function CardHeader({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn("flex items-start justify-between gap-4", className)}
      {...props}
    />
  );
}

export function CardTitle({ className, ...props }: ComponentProps<"h3">) {
  return (
    <h3
      data-slot="card-title"
      className={cn("font-ui text-h3 text-text-primary", className)}
      {...props}
    />
  );
}

export function CardDescription({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="card-description"
      className={cn("font-ui text-body leading-[1.6] text-text-secondary", className)}
      {...props}
    />
  );
}

export function CardContent({ className, ...props }: ComponentProps<"div">) {
  return <div data-slot="card-content" className={cn("font-ui", className)} {...props} />;
}

/**
 * The action row. Separated by a hairline rather than by space, because a
 * footer that scrolls with the content needs a boundary a person can see.
 */
export function CardFooter({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center justify-end gap-2.5", className)}
      {...props}
    />
  );
}

/**
 * The uppercase label that opens a card or a section.
 *
 * 11px, weight 700, +10% tracking, in the accent, preceded by a 22px rule.
 * That rule is part of the device — the eyebrow without it reads as a stray
 * caption.
 */
export function CardLabel({ className, children, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="card-label"
      className={cn("eyebrow mb-4 flex items-center gap-3 text-text-accent", className)}
      {...props}
    >
      <span aria-hidden className="h-px w-[22px] bg-current" />
      {children}
    </div>
  );
}

export { cardVariants };

/**
 * The action that belongs to a card's header — a menu button, a link.
 *
 * Sits top-right of the header row, so it needs a header that is a grid rather
 * than a stack. It is a sibling of the title, not a child, so the accessible
 * name of the button stays its own.
 */
export function CardAction({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
      {...props}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Card"}],["$","$L1f",null,{"children":"Five surfaces, four padding steps, and the header/footer parts."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"card"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/card","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/cva","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]

Card

Handwoven throw