@swift-rust/ui 0.2.0 → 0.6.0

package/registry/components/avatar.tsx

@@ -1,12 +1,57 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-const Avatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+/**
+ * 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 h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+      className={cn(
+        "relative flex shrink-0 overflow-hidden rounded-full",
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
       {...props}
     />
   ),
@@ -14,8 +59,14 @@ const Avatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElem
 Avatar.displayName = "Avatar";
 
 const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
-  ({ className, ...props }, ref) => (
-    <img ref={ref} className={cn("aspect-square h-full w-full object-cover", className)} {...props} />
+  ({ 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";
@@ -24,8 +75,9 @@ const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-avatar-fallback
       className={cn(
-        "flex h-full w-full items-center justify-center rounded-full bg-[var(--ui-surface-2)] text-sm font-medium",
+        "flex size-full items-center justify-center rounded-full bg-secondary font-medium text-secondary-foreground",
         className,
       )}
       {...props}

package/registry/components/badge.tsx

@@ -1,27 +1,42 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-type Variant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
-const VARIANTS: Record<Variant, string> = {
-  default: "border-transparent bg-[var(--ui-fg)] text-[var(--ui-bg)]",
-  secondary: "border-transparent bg-[var(--ui-surface-2)] text-[var(--ui-fg)]",
-  destructive: "border-transparent bg-[var(--ui-danger)] text-white",
-  outline: "border-[var(--ui-border-strong)] text-[var(--ui-fg)]",
-  success: "border-transparent bg-[#dcfce7] text-[#166534]",
-  warning: "border-transparent bg-[#fef3c7] text-[#92400e]",
+export type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "warning";
+export type BadgeSize = "default" | "sm" | "lg";
+
+const VARIANTS: Record<BadgeVariant, string> = {
+  default: "border-transparent bg-primary text-primary-foreground",
+  secondary: "border-transparent bg-secondary text-secondary-foreground",
+  destructive: "border-transparent bg-destructive text-destructive-foreground",
+  outline: "border-border text-foreground",
+  success: "border-transparent bg-emerald-500/15 text-emerald-700 dark:text-emerald-400",
+  warning: "border-transparent bg-amber-500/15 text-amber-700 dark:text-amber-400",
+};
+
+const SIZES: Record<BadgeSize, string> = {
+  default: "px-2.5 py-0.5 text-xs",
+  sm: "px-2 py-0 text-[0.65rem]",
+  lg: "px-3 py-1 text-sm",
 };
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: Variant;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
 }
 
-export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+export function Badge({ className, variant = "default", size = "default", ...props }: BadgeProps) {
   return (
-    <div
+    <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium",
+        "inline-flex items-center gap-1 rounded-full border font-medium [&_svg]:size-3",
         VARIANTS[variant],
+        SIZES[size],
         className,
       )}
       {...props}

package/registry/components/breadcrumb.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
@@ -13,11 +12,11 @@ export function Breadcrumb({
   children: React.ReactNode;
   className?: string;
 }) {
-  const sep = separator ?? <span className="text-[var(--ui-fg-subtle)]">/</span>;
+  const sep = separator ?? <span className="text-muted-foreground">/</span>;
   return (
     <BreadcrumbContext.Provider value={{ separator: sep }}>
       <nav aria-label="Breadcrumb" className={className}>
-        <ol className="flex flex-wrap items-center gap-1.5 text-sm text-[var(--ui-fg-muted)]">
+        <ol className="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground">
           {children}
         </ol>
       </nav>
@@ -26,30 +25,25 @@ export function Breadcrumb({
 }
 
 export function BreadcrumbItem({ children, className }: { children: React.ReactNode; className?: string }) {
-  const ctx = React.useContext(BreadcrumbContext)!;
-  return (
-    <li className={cn("inline-flex items-center gap-1.5", className)}>
-      {children}
-    </li>
-  );
+  return <li className={cn("inline-flex items-center gap-1.5", className)}>{children}</li>;
 }
 
 export function BreadcrumbLink({ href, children }: { href: string; children: React.ReactNode }) {
   return (
-    <a href={href} className="hover:text-[var(--ui-fg)]">
+    <a href={href} className="transition-colors hover:text-foreground">
       {children}
     </a>
   );
 }
 
 export function BreadcrumbSeparator() {
-  const ctx = React.useContext(BreadcrumbContext)!;
-  return <li aria-hidden>{ctx.separator}</li>;
+  const ctx = React.useContext(BreadcrumbContext);
+  return <li aria-hidden>{ctx?.separator ?? "/"}</li>;
 }
 
 export function BreadcrumbPage({ children }: { children: React.ReactNode }) {
   return (
-    <li aria-current="page" className="font-medium text-[var(--ui-fg)]">
+    <li aria-current="page" className="font-medium text-foreground">
       {children}
     </li>
   );

package/registry/components/button-group.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// Joins a row of <Button>s into a single segmented control: shared borders,
+// rounded only on the outer ends.
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+}
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, orientation = "horizontal", ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      data-orientation={orientation}
+      className={cn(
+        "inline-flex isolate",
+        orientation === "horizontal"
+          ? "flex-row [&>*]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:first-child]:rounded-l-lg [&>*:last-child]:rounded-r-lg"
+          : "flex-col [&>*]:rounded-none [&>*:not(:first-child)]:-mt-px [&>*:first-child]:rounded-t-lg [&>*:last-child]:rounded-b-lg",
+        "[&>*:hover]:z-10 [&>*:focus-visible]:z-10",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ButtonGroup.displayName = "ButtonGroup";

package/registry/components/button.tsx

@@ -1,48 +1,133 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-type ButtonSize = "default" | "sm" | "lg" | "icon";
+/**
+ * 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-[var(--ui-fg)] text-[var(--ui-bg)] hover:opacity-90",
-  destructive: "bg-[var(--ui-danger)] text-white hover:opacity-90",
-  outline: "border border-[var(--ui-border-strong)] bg-transparent hover:bg-[var(--ui-surface-2)]",
-  secondary: "bg-[var(--ui-surface-2)] text-[var(--ui-fg)] hover:opacity-90",
-  ghost: "hover:bg-[var(--ui-surface-2)]",
-  link: "text-[var(--ui-accent)] underline-offset-4 hover:underline",
+  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",
-  sm: "h-8 px-3 text-xs",
+  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: "h-9 w-9",
+  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",
 };
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+// 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", ...props }, ref) => (
-    <button
-      ref={ref}
-      className={cn(
-        "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)] focus-visible:ring-offset-2",
-        "disabled:pointer-events-none disabled:opacity-50",
-        VARIANTS[variant],
-        SIZES[size],
-        className,
-      )}
-      {...props}
-    />
-  ),
+  ({ 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";
-
-export { VARIANTS as buttonVariants };

package/registry/components/calendar.tsx

@@ -0,0 +1,92 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const MONTHS = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
+
+function sameDay(a: Date, b: Date) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+export function Calendar({
+  value: controlled,
+  defaultValue,
+  onChange,
+  className,
+}: {
+  value?: Date | null;
+  defaultValue?: Date;
+  onChange?: (d: Date) => void;
+  className?: string;
+}) {
+  const [selected, setSelected] = React.useState<Date | null>(defaultValue ?? null);
+  const value = controlled !== undefined ? controlled : selected;
+  const [view, setView] = React.useState<Date>(() => {
+    const base = controlled ?? defaultValue ?? new Date();
+    return new Date(base.getFullYear(), base.getMonth(), 1);
+  });
+
+  const year = view.getFullYear();
+  const month = view.getMonth();
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const today = new Date();
+
+  const cells: (number | null)[] = [
+    ...Array.from({ length: firstDay }, () => null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
+  ];
+
+  const pick = (day: number) => {
+    const d = new Date(year, month, day);
+    if (controlled === undefined) setSelected(d);
+    onChange?.(d);
+  };
+
+  const shift = (n: number) => setView(new Date(year, month + n, 1));
+
+  return (
+    <div className={cn("w-fit rounded-xl border border-border bg-card p-3 text-card-foreground", className)}>
+      <div className="mb-2 flex items-center justify-between px-1">
+        <button type="button" onClick={() => shift(-1)} aria-label="Previous month" className="inline-flex size-7 items-center justify-center rounded-md hover:bg-muted">
+          <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><path d="m15 18-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
+        </button>
+        <span className="text-sm font-medium">{MONTHS[month]} {year}</span>
+        <button type="button" onClick={() => shift(1)} aria-label="Next month" className="inline-flex size-7 items-center justify-center rounded-md hover:bg-muted">
+          <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><path d="m9 18 6-6-6-6" strokeLinecap="round" strokeLinejoin="round" /></svg>
+        </button>
+      </div>
+      <div className="grid grid-cols-7 gap-1">
+        {WEEKDAYS.map((d) => (
+          <div key={d} className="flex h-8 items-center justify-center text-xs font-medium text-muted-foreground">{d}</div>
+        ))}
+        {cells.map((day, i) =>
+          day === null ? (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={`e${i}`} />
+          ) : (
+            <button
+              key={day}
+              type="button"
+              onClick={() => pick(day)}
+              className={cn(
+                "flex size-8 items-center justify-center rounded-md text-sm transition-colors hover:bg-muted",
+                value && sameDay(value, new Date(year, month, day))
+                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                  : sameDay(today, new Date(year, month, day))
+                    ? "ring-1 ring-inset ring-border"
+                    : "",
+              )}
+            >
+              {day}
+            </button>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/registry/components/callout.tsx

@@ -1,20 +1,20 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-type Tone = "default" | "success" | "warning" | "destructive";
-const TONE: Record<Tone, string> = {
-  default: "border-[var(--ui-border)] bg-[var(--ui-surface)]",
-  success: "border-[#86efac] bg-[#f0fdf4]",
-  warning: "border-[#fde68a] bg-[#fffbeb]",
-  destructive: "border-[#fecaca] bg-[#fef2f2]",
+export type CalloutTone = "default" | "info" | "success" | "warning" | "destructive";
+
+const TONE: Record<CalloutTone, string> = {
+  default: "border-border bg-card text-card-foreground",
+  info: "border-sky-600/30 bg-sky-500/10 text-sky-700 dark:text-sky-400",
+  success: "border-emerald-600/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
+  warning: "border-amber-600/30 bg-amber-500/10 text-amber-700 dark:text-amber-400",
+  destructive: "border-destructive/30 bg-destructive/10 text-destructive",
 };
 
-export function Callout({ className, tone = "default", ...props }: React.HTMLAttributes<HTMLDivElement> & { tone?: Tone }) {
-  return (
-    <div
-      className={cn("my-4 rounded-lg border p-4 text-sm", TONE[tone], className)}
-      {...props}
-    />
-  );
+export function Callout({
+  className,
+  tone = "default",
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { tone?: CalloutTone }) {
+  return <div className={cn("my-4 rounded-lg border p-4 text-sm", TONE[tone], className)} {...props} />;
 }

package/registry/components/card.tsx

@@ -1,12 +1,73 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+/**
+ * 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("rounded-xl border border-[var(--ui-border)] bg-[var(--ui-surface)] text-[var(--ui-fg)] shadow-sm", className)}
+      className={cn(
+        "flex flex-col rounded-xl",
+        VARIANTS[variant],
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
       {...props}
     />
   ),
@@ -15,35 +76,49 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <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} />
+    <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>>(
+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) => (
-    <p ref={ref} className={cn("text-sm text-[var(--ui-fg-muted)]", className)} {...props} />
+    <div ref={ref} className={cn("ml-auto self-start", className)} {...props} />
   ),
 );
-CardDescription.displayName = "CardDescription";
+CardAction.displayName = "CardAction";
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+  ({ 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-6 pt-0", className)} {...props} />
+    <div ref={ref} className={cn("flex items-center p-(--card-p) pt-0", className)} {...props} />
   ),
 );
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };