create-swift-rust 0.8.2 → 0.9.1

package/templates/ui/accordion.tsx

@@ -0,0 +1,215 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Accordion
+ *
+ * variant — default (divided), outline (separated items), secondary, ghost
+ * size    — sm, default, lg
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ *
+ * variant/size/design are set once on <Accordion> and flow to items via context.
+ */
+
+export type AccordionVariant = "default" | "outline" | "secondary" | "ghost";
+export type AccordionSize = "default" | "sm" | "lg";
+export type AccordionDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+// Item chrome. The default variant is a classic divided list; the others render
+// separated, surfaced items so designs (glass, brutal, …) have a card to paint.
+const ITEM_VARIANTS: Record<AccordionVariant, string> = {
+  default: "border-b border-border last:border-b-0",
+  outline: "mb-2 rounded-lg border border-border px-4 last:mb-0",
+  secondary: "mb-2 rounded-lg bg-secondary px-4 text-secondary-foreground last:mb-0",
+  ghost: "rounded-lg px-2 hover:bg-secondary/50",
+};
+
+const TRIGGER_SIZES: Record<AccordionSize, string> = {
+  sm: "py-3 text-xs",
+  default: "py-4 text-sm",
+  lg: "py-5 text-base",
+};
+
+const CONTENT_SIZES: Record<AccordionSize, string> = {
+  sm: "pb-3 text-xs",
+  default: "pb-4 text-sm",
+  lg: "pb-5 text-base",
+};
+
+// Designs only decorate non-default variants' item surfaces (the divided list
+// has no surface to paint).
+const ITEM_DESIGNS: Record<AccordionDesign, string> = {
+  flat: "",
+  soft: "rounded-xl border-transparent bg-muted",
+  // Depth via a darker bottom lip + a top sheen — no drop shadow.
+  "3d": "border-transparent border-b-4 border-b-black/15 bg-linear-to-b from-white/20 to-transparent dark:border-b-black/40",
+  // Liquid glass panels.
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/30 via-white/10 to-white/5 " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:via-white/5 dark:to-transparent",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[5px_5px_10px_rgba(0,0,0,0.12),-5px_-5px_10px_rgba(255,255,255,0.8)] " +
+    "dark:shadow-[5px_5px_10px_rgba(0,0,0,0.6),-5px_-5px_10px_rgba(255,255,255,0.05)]",
+  brutal:
+    "rounded-none border-2 border-foreground shadow-[4px_4px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-background),var(--color-background))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box]",
+};
+
+interface AccordionContextValue {
+  openItems: Set<string>;
+  toggle: (value: string) => void;
+  type: "single" | "multiple";
+  variant: AccordionVariant;
+  size: AccordionSize;
+  design: AccordionDesign;
+}
+
+export const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+
+function useAccordion(): AccordionContextValue {
+  const ctx = React.useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion components must be used inside <Accordion>");
+  return ctx;
+}
+
+export interface AccordionProps {
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+  design?: AccordionDesign;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function Accordion({
+  type = "single",
+  defaultValue,
+  variant = "default",
+  size = "default",
+  design = "flat",
+  className,
+  children,
+}: AccordionProps) {
+  const [openItems, setOpenItems] = React.useState<Set<string>>(
+    () => new Set(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []),
+  );
+  const toggle = (value: string) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) next.delete(value);
+      else if (type === "single") {
+        next.clear();
+        next.add(value);
+      } else next.add(value);
+      return next;
+    });
+  };
+  return (
+    <AccordionContext.Provider value={{ openItems, toggle, type, variant, size, design }}>
+      <div className={className}>{children}</div>
+    </AccordionContext.Provider>
+  );
+}
+
+export function AccordionItem({
+  value,
+  disabled,
+  className,
+  children,
+}: {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const { openItems, variant, design } = useAccordion();
+  return (
+    <div
+      data-value={value}
+      data-disabled={disabled ? "" : undefined}
+      data-state={openItems.has(value) ? "open" : "closed"}
+      className={cn(
+        ITEM_VARIANTS[variant],
+        variant !== "default" && ITEM_DESIGNS[design],
+        variant !== "default" && design !== "flat" && "mb-3 last:mb-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AccordionTrigger({
+  value,
+  disabled,
+  className,
+  children,
+}: {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const ctx = useAccordion();
+  const open = ctx.openItems.has(value);
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      aria-expanded={open}
+      data-state={open ? "open" : "closed"}
+      onClick={() => ctx.toggle(value)}
+      className={cn(
+        "flex w-full items-center justify-between gap-4 text-left font-medium transition-all",
+        "rounded-md hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+        TRIGGER_SIZES[ctx.size],
+        className,
+      )}
+    >
+      {children}
+      <svg
+        viewBox="0 0 24 24"
+        className={cn(
+          "size-4 shrink-0 text-muted-foreground transition-transform duration-200",
+          open && "rotate-180",
+        )}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        aria-hidden="true"
+      >
+        <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </button>
+  );
+}
+
+export function AccordionContent({
+  value,
+  className,
+  children,
+}: {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const ctx = useAccordion();
+  if (!ctx.openItems.has(value)) return null;
+  return (
+    <div
+      data-state="open"
+      className={cn("text-muted-foreground", CONTENT_SIZES[ctx.size], className)}
+    >
+      {children}
+    </div>
+  );
+}

package/templates/ui/alert.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Alert
+ *
+ * variant — default, destructive, success, warning, info, outline, secondary
+ * size    — sm, default, lg
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ *
+ * (`tone` is accepted as a deprecated alias of `variant`.)
+ */
+
+export type AlertVariant =
+  | "default"
+  | "destructive"
+  | "success"
+  | "warning"
+  | "info"
+  | "outline"
+  | "secondary";
+export type AlertSize = "default" | "sm" | "lg";
+export type AlertDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<AlertVariant, string> = {
+  default: "border-border bg-card text-card-foreground",
+  destructive:
+    "border-destructive/30 bg-destructive/10 text-destructive [&_[data-alert-description]]:text-destructive/90",
+  success:
+    "border-emerald-600/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 " +
+    "[&_[data-alert-description]]:text-emerald-700/90 dark:[&_[data-alert-description]]:text-emerald-400/90",
+  warning:
+    "border-amber-600/30 bg-amber-500/10 text-amber-700 dark:text-amber-400 " +
+    "[&_[data-alert-description]]:text-amber-700/90 dark:[&_[data-alert-description]]:text-amber-400/90",
+  info:
+    "border-sky-600/30 bg-sky-500/10 text-sky-700 dark:text-sky-400 " +
+    "[&_[data-alert-description]]:text-sky-700/90 dark:[&_[data-alert-description]]:text-sky-400/90",
+  outline: "border-2 border-border bg-transparent text-foreground",
+  secondary: "border-transparent bg-secondary text-secondary-foreground",
+};
+
+const SIZES: Record<AlertSize, string> = {
+  sm: "p-3 text-xs [&_[data-alert-title]]:text-sm",
+  default: "p-4 text-sm",
+  lg: "p-6 text-base",
+};
+
+const DESIGNS: Record<AlertDesign, string> = {
+  flat: "",
+  soft: "rounded-2xl border-transparent",
+  // Depth via a darker bottom lip + a top sheen — no drop shadow.
+  "3d": "border-b-4 border-b-black/15 bg-linear-to-b from-white/20 to-transparent dark:border-b-black/40",
+  // Liquid glass panel.
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/30 via-white/10 to-white/5 " +
+    "shadow-[inset_0_1px_1px_rgba(255,255,255,0.55),0_6px_24px_rgba(31,38,135,0.16)] " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:via-white/5 dark:to-transparent " +
+    "dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_6px_24px_rgba(0,0,0,0.4)]",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[6px_6px_12px_rgba(0,0,0,0.12),-6px_-6px_12px_rgba(255,255,255,0.8)] " +
+    "dark:shadow-[6px_6px_12px_rgba(0,0,0,0.6),-6px_-6px_12px_rgba(255,255,255,0.05)]",
+  brutal: "rounded-none border-2 border-foreground shadow-[4px_4px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-card),var(--color-card))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box]",
+};
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  /** @deprecated use `variant` */
+  tone?: AlertVariant;
+  size?: AlertSize;
+  design?: AlertDesign;
+}
+
+export function Alert({
+  className,
+  variant,
+  tone,
+  size = "default",
+  design = "flat",
+  ...props
+}: AlertProps) {
+  const v = variant ?? tone ?? "default";
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "relative grid w-full grid-cols-[0_1fr] gap-y-0.5 rounded-lg border",
+        "has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5",
+        // Reserve room on the trailing edge when an AlertAction is present.
+        "has-[[data-alert-action]]:pr-16",
+        VARIANTS[v],
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h5
+      data-alert-title
+      className={cn("col-start-2 mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+export function AlertDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <div
+      data-alert-description
+      className={cn("col-start-2 text-muted-foreground [&_p]:leading-relaxed", className)}
+      {...props}
+    />
+  );
+}
+
+/** A trailing action (button, link, …) pinned to the top-right of the alert. */
+export function AlertAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div data-alert-action className={cn("absolute right-3 top-3", className)} {...props} />
+  );
+}

package/templates/ui/avatar.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Avatar
+ *
+ * size   — xs, sm, default, md, lg
+ * design — flat, soft, 3d, glass, neo, brutal, gradient
+ *
+ * The gradient design renders a gradient ring; brutal squares the corners.
+ */
+
+export type AvatarSize = "default" | "xs" | "sm" | "md" | "lg";
+export type AvatarDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const SIZES: Record<AvatarSize, string> = {
+  xs: "size-6 text-[10px]",
+  sm: "size-8 text-xs",
+  default: "size-10 text-sm",
+  md: "size-10 text-sm",
+  lg: "size-12 text-base",
+};
+
+const DESIGNS: Record<AvatarDesign, string> = {
+  flat: "",
+  soft: "ring-4 ring-secondary",
+  // Depth via a darker bottom lip + a sheen over the fallback face.
+  "3d": "border-b-[3px] border-b-black/30 bg-linear-to-b from-white/30 to-black/10 dark:border-b-black/50",
+  // Liquid glass ring with vibrancy.
+  glass: "ring-2 ring-white/50 backdrop-blur-xl backdrop-saturate-200 shadow-[0_2px_10px_rgba(31,38,135,0.2)] dark:ring-white/25",
+  neo:
+    "shadow-[4px_4px_8px_rgba(0,0,0,0.15),-4px_-4px_8px_rgba(255,255,255,0.8)] " +
+    "dark:shadow-[4px_4px_8px_rgba(0,0,0,0.6),-4px_-4px_8px_rgba(255,255,255,0.06)]",
+  brutal:
+    "rounded-none border-2 border-foreground shadow-[3px_3px_0_0_var(--color-foreground)] " +
+    "[&_[data-avatar-img]]:rounded-none [&_[data-avatar-fallback]]:rounded-none",
+  gradient: "p-0.5 bg-linear-to-br from-violet-500 via-fuchsia-500 to-orange-400",
+};
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: AvatarSize;
+  design?: AvatarDesign;
+}
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size = "default", design = "flat", ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex shrink-0 overflow-hidden rounded-full",
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
+  ({ className, alt = "", ...props }, ref) => (
+    <img
+      ref={ref}
+      data-avatar-img
+      alt={alt}
+      className={cn("aspect-square size-full rounded-full object-cover", className)}
+      {...props}
+    />
+  ),
+);
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-avatar-fallback
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-secondary font-medium text-secondary-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };

package/templates/ui/button.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Button
+ *
+ * Three independent dimensions (Tailwind v4):
+ *   variant — what the button means (default, outline, secondary, ghost, destructive, link)
+ *   size    — how big it is (default, xs, sm, md, lg, icon, icon-xs, icon-sm, icon-md, icon-lg)
+ *   design  — how it looks (flat, soft, 3d, glass, neo, brutal, gradient)
+ *
+ * `design` is the "style" dimension — the prop is named `design` because React
+ * reserves `style` for inline styles.
+ */
+
+export type ButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+export type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-md"
+  | "icon-lg";
+export type ButtonDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+  outline: "border border-input bg-background text-foreground hover:bg-secondary",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  ghost: "text-foreground hover:bg-secondary",
+  link: "text-primary underline-offset-4 hover:underline",
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  default: "h-9 px-4 text-sm",
+  xs: "h-7 gap-1 rounded-md px-2.5 text-xs",
+  sm: "h-8 gap-1.5 px-3 text-xs",
+  md: "h-9 px-4 text-sm",
+  lg: "h-10 px-6 text-sm",
+  icon: "size-9",
+  "icon-xs": "size-7 rounded-md",
+  "icon-sm": "size-8",
+  "icon-md": "size-9",
+  "icon-lg": "size-10",
+};
+
+const DESIGNS: Record<ButtonDesign, string> = {
+  flat: "",
+  soft: "rounded-xl border-transparent shadow-none",
+  // Real depth, not a drop shadow: a glossy top→bottom sheen layered over the
+  // variant color gives the face a curve, and a darker bottom "lip" (a thick
+  // bottom border, not a shadow) makes it sit proud of the page. Pressing
+  // sinks it — the lip shrinks and the whole face shifts down.
+  "3d":
+    "border-b-4 border-b-black/30 bg-linear-to-b from-white/25 to-black/10 " +
+    "hover:brightness-110 active:translate-y-[3px] active:border-b-[1px] active:brightness-100 " +
+    "dark:border-b-black/50",
+  // Liquid glass: heavy blur + saturation for vibrancy, a translucent refractive
+  // sheen (the diagonal white gradient), a bright rim, and a specular top
+  // highlight with a soft ambient lift.
+  glass:
+    "border border-white/40 bg-white/15 text-foreground backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/35 via-white/10 to-white/5 hover:bg-white/25 " +
+    "shadow-[inset_0_1px_1px_rgba(255,255,255,0.6),0_4px_16px_rgba(31,38,135,0.18)] " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/20 dark:via-white/5 dark:to-transparent " +
+    "dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_4px_16px_rgba(0,0,0,0.4)]",
+  neo:
+    "border-transparent bg-background text-foreground " +
+    "shadow-[5px_5px_10px_rgba(0,0,0,0.15),-5px_-5px_10px_rgba(255,255,255,0.8)] " +
+    "hover:shadow-[3px_3px_6px_rgba(0,0,0,0.15),-3px_-3px_6px_rgba(255,255,255,0.8)] " +
+    "active:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.15),inset_-3px_-3px_6px_rgba(255,255,255,0.7)] " +
+    "dark:shadow-[5px_5px_10px_rgba(0,0,0,0.6),-5px_-5px_10px_rgba(255,255,255,0.06)] " +
+    "dark:hover:shadow-[3px_3px_6px_rgba(0,0,0,0.6),-3px_-3px_6px_rgba(255,255,255,0.06)] " +
+    "dark:active:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.6),inset_-3px_-3px_6px_rgba(255,255,255,0.05)]",
+  brutal:
+    "rounded-none border-2 border-foreground font-semibold " +
+    "shadow-[4px_4px_0_0_var(--color-foreground)] " +
+    "active:translate-x-[2px] active:translate-y-[2px] active:shadow-[1px_1px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-transparent bg-linear-to-br from-violet-500 via-fuchsia-500 to-orange-400 " +
+    "text-white shadow-md hover:brightness-110 active:brightness-95",
+};
+
+// Designs that paint their own surface keep the variant's text/intent where
+// possible; link buttons have no surface, so designs are skipped for them.
+export interface ButtonStyleProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  design?: ButtonDesign;
+}
+
+export function buttonVariants({
+  variant = "default",
+  size = "default",
+  design = "flat",
+  className,
+}: ButtonStyleProps & { className?: string } = {}): string {
+  return cn(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-all",
+    "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    VARIANTS[variant],
+    SIZES[size],
+    variant === "link" ? "" : DESIGNS[design],
+    className,
+  );
+}
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ButtonStyleProps {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", design = "flat", asChild, ...props }, ref) => {
+    const classes = buttonVariants({ variant, size, design, className });
+    if (asChild && React.isValidElement(props.children)) {
+      const child = props.children as React.ReactElement<{ className?: string }>;
+      return React.cloneElement(child, {
+        className: cn(classes, child.props.className),
+      });
+    }
+    return <button ref={ref} className={classes} {...props} />;
+  },
+);
+Button.displayName = "Button";

package/templates/ui/card.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Card
+ *
+ * variant — default, outline, secondary, ghost
+ * size    — sm, default, lg (padding scale; subcomponents read it via --card-p)
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ */
+
+export type CardVariant = "default" | "outline" | "secondary" | "ghost";
+export type CardSize = "default" | "sm" | "lg";
+export type CardDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<CardVariant, string> = {
+  default: "border border-border bg-card text-card-foreground",
+  outline: "border-2 border-border bg-transparent text-foreground",
+  secondary: "border border-transparent bg-secondary text-secondary-foreground",
+  ghost: "border border-transparent bg-transparent text-foreground",
+};
+
+const SIZES: Record<CardSize, string> = {
+  sm: "[--card-p:1rem]",
+  default: "[--card-p:1.5rem]",
+  lg: "[--card-p:2rem]",
+};
+
+const DESIGNS: Record<CardDesign, string> = {
+  flat: "shadow-sm",
+  soft: "rounded-2xl border-transparent bg-muted shadow-none",
+  // Depth via a darker bottom lip (border, not shadow) + a top sheen, so the
+  // card sits proud of the page like a physical tile.
+  "3d": "border-b-[6px] border-b-black/20 bg-linear-to-b from-white/30 to-transparent dark:border-b-black/50",
+  // Liquid glass: heavy blur + saturation, a translucent refractive sheen, a
+  // bright rim, and a specular top highlight over a soft ambient lift.
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/35 via-white/10 to-white/5 " +
+    "shadow-[inset_0_1px_1px_rgba(255,255,255,0.6),0_8px_32px_rgba(31,38,135,0.18)] " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:via-white/5 dark:to-transparent " +
+    "dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_8px_32px_rgba(0,0,0,0.45)]",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[8px_8px_16px_rgba(0,0,0,0.15),-8px_-8px_16px_rgba(255,255,255,0.8)] " +
+    "dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(255,255,255,0.05)]",
+  brutal: "rounded-none border-2 border-foreground shadow-[6px_6px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-card),var(--color-card))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box] shadow-md",
+};
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+  size?: CardSize;
+  design?: CardDesign;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = "default", size = "default", design = "flat", ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex flex-col rounded-xl",
+        VARIANTS[variant],
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-1.5 p-(--card-p)", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("ml-auto self-start", className)} {...props} />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-(--card-p) pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-(--card-p) pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };