@cosmicdrift/kumiko-renderer-web 0.64.0 → 0.66.0

package/src/primitives/timestamp-input.tsx

@@ -10,6 +10,7 @@
 // inputValueToTimestamp kapseln die UTC↔Wall-Clock-Umrechnung (Bug-Bash-2,
 // 2026-06-08) und sind separat getestet.
 
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
 import { cn } from "../lib/cn";
 import { DateField } from "./date-field";
@@ -89,6 +90,7 @@ export function TimestampInput({
   min,
   max,
 }: TimestampInputProps): ReactNode {
+  const t = useTranslation();
   const local = timestampToInputValue(value);
   const isoDate = local !== "" ? local.slice(0, 10) : "";
   // Uhrzeit ohne gesetztes Datum würde im Wire-Wert verschwinden — lokal
@@ -125,7 +127,7 @@ export function TimestampInput({
       />
       <input
         type="time"
-        aria-label="Uhrzeit"
+        aria-label={t("kumiko.field.time")}
         disabled={disabled}
         aria-invalid={hasError === true ? true : undefined}
         value={effectiveTime}

package/src/primitives/toast.tsx

@@ -7,6 +7,7 @@
 // Auto-dismiss nach 5s, manuell schließbar via X-Button. Der ARIA-
 // Live-Region-Setup kommt komplett aus Radix.
 
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import * as Primitive from "@radix-ui/react-toast";
 import { X } from "lucide-react";
 import {
@@ -29,7 +30,8 @@ export type ToastOptions = {
   readonly variant?: ToastVariant;
   // Self-service deep-link (z.B. KumikoError.docsUrl). Wenn gesetzt
   // rendert der Toast einen "Mehr erfahren →" Link der in neuem Tab
-  // öffnet. Label override via `docsLinkLabel` (Default: deutsch).
+  // öffnet. Label override via `docsLinkLabel` (Default: i18n
+  // kumiko.toast.learn-more).
   readonly docsUrl?: string;
   readonly docsLinkLabel?: string;
 };
@@ -116,6 +118,8 @@ function ToastItem({
   readonly entry: ToastEntry;
   readonly onClose: () => void;
 }): ReactNode {
+  const t = useTranslation();
+  const learnMore = entry.docsLinkLabel ?? t("kumiko.toast.learn-more");
   const variantClass =
     entry.variant === "destructive"
       ? "destructive group border-destructive bg-destructive text-destructive-foreground"
@@ -135,7 +139,7 @@ function ToastItem({
           </Primitive.Description>
         )}
         {entry.docsUrl !== undefined && (
-          <Primitive.Action altText={entry.docsLinkLabel ?? "Mehr erfahren"} asChild>
+          <Primitive.Action altText={learnMore} asChild>
             <a
               href={entry.docsUrl}
               target="_blank"
@@ -145,7 +149,7 @@ function ToastItem({
                 "focus:outline-none focus:ring-1 focus:ring-current rounded",
               )}
             >
-              {entry.docsLinkLabel ?? "Mehr erfahren"} →
+              {learnMore} →
             </a>
           </Primitive.Action>
         )}
@@ -157,7 +161,7 @@ function ToastItem({
           "group-hover:opacity-100",
           "group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50",
         )}
-        aria-label="Close"
+        aria-label={t("kumiko.dialog.close")}
       >
         <X className="h-4 w-4" />
       </Primitive.Close>

package/src/styles.css

@@ -38,36 +38,48 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* Dark-Mode (Default) — Linear-Style: blau-graues Background statt
-     pures Schwarz. background <-> card haben minimal-Distinction
-     (1-2% lightness shift) damit Cards subtle "schweben" ohne harte
-     Borders. Primary ist das Linear-Brand-Purple (~#5e6ad2). */
-  --color-background: hsl(220 13% 9%);
-  --color-foreground: hsl(220 14% 96%);
-  --color-card: hsl(220 13% 11%);
-  --color-card-foreground: hsl(220 14% 96%);
-  --color-popover: hsl(220 13% 11%);
-  --color-popover-foreground: hsl(220 14% 96%);
-  --color-primary: hsl(232 60% 64%);
-  --color-primary-foreground: hsl(0 0% 100%);
-  --color-secondary: hsl(220 13% 16%);
-  --color-secondary-foreground: hsl(220 14% 96%);
-  --color-muted: hsl(220 13% 14%);
-  --color-muted-foreground: hsl(220 8% 56%);
-  --color-accent: hsl(220 13% 16%);
-  --color-accent-foreground: hsl(220 14% 96%);
-  --color-destructive: hsl(0 75% 58%);
-  --color-destructive-foreground: hsl(0 0% 100%);
-  --color-border: hsl(220 13% 18%);
-  --color-input: hsl(220 13% 16%);
-  --color-ring: hsl(232 60% 64%);
+  /* Dark-Mode (Default) — shadcn-Preset „Rhea"/Neutral (hue 0, reines Grau —
+     kein zinc-Blaustich). background == card; Cards trennen über Border +
+     Shadow. Primary near-white, Apps überschreiben mit ihrer Brand. */
+  --color-background: hsl(0 0% 3.9%);
+  --color-foreground: hsl(0 0% 98%);
+  --color-card: hsl(0 0% 3.9%);
+  --color-card-foreground: hsl(0 0% 98%);
+  --color-popover: hsl(0 0% 3.9%);
+  --color-popover-foreground: hsl(0 0% 98%);
+  --color-primary: hsl(0 0% 98%);
+  --color-primary-foreground: hsl(0 0% 9%);
+  --color-secondary: hsl(0 0% 14.9%);
+  --color-secondary-foreground: hsl(0 0% 98%);
+  --color-muted: hsl(0 0% 14.9%);
+  --color-muted-foreground: hsl(0 0% 63.9%);
+  --color-accent: hsl(0 0% 14.9%);
+  --color-accent-foreground: hsl(0 0% 98%);
+  --color-destructive: hsl(0 62.8% 30.6%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(0 0% 14.9%);
+  --color-input: hsl(0 0% 14.9%);
+  --color-ring: hsl(0 0% 83.1%);
 
-  /* Radius-Skala: Linear hat größere Radii — Cards/Modals 10-12px,
-     Buttons/Inputs 6-8px, Pills voll. */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
+  /* Sidebar-Familie Dark (Neutral). Eigene Werte (KEIN Alias auf background) —
+     Rail braucht Kontrast zum Content. Hierarchie: background 3.9% < rail 10% <
+     aktiv 20%. */
+  --color-sidebar: hsl(0 0% 10%);
+  --color-sidebar-foreground: hsl(0 0% 95.9%);
+  --color-sidebar-primary: hsl(0 0% 98%);
+  --color-sidebar-primary-foreground: hsl(0 0% 9%);
+  --color-sidebar-accent: hsl(0 0% 20%);
+  --color-sidebar-accent-foreground: hsl(0 0% 98%);
+  --color-sidebar-border: hsl(0 0% 14.9%);
+  --color-sidebar-ring: hsl(0 0% 83.1%);
+
+  /* Radius — shadcn-Default 0.625rem (runder als new-yorks 0.5rem). Skala
+     wird per calc vom Basiswert abgeleitet (shadcn-Konvention). */
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
 /* Light-Mode-Overrides — aktiv wenn `<html>` KEINE `.dark` Klasse
@@ -75,29 +87,40 @@
    auf light, greifen diese Werte. */
 @layer base {
   :root:not(.dark) {
-    /* Light-Mode — Linear-Style: warmes weiß-grau Background, Cards
-       leicht heller. Primary bleibt Brand-Purple (gleicher hue wie
-       dark, höhere saturation für Kontrast auf weiß). Borders sehr
-       dezent (rgba-style alpha statt full grey-200). */
+    /* Light-Mode — Neutral (hue 0, reines Grau). Weißes Background, Cards ==
+       weiß, trennen über Border + Shadow. Primary near-black; Apps überschreiben
+       mit Brand. Werte = shadcn-Preset (aus dem Live-Preview verifiziert). */
     --color-background: hsl(0 0% 100%);
-    --color-foreground: hsl(220 14% 14%);
+    --color-foreground: hsl(0 0% 3.9%);
     --color-card: hsl(0 0% 100%);
-    --color-card-foreground: hsl(220 14% 14%);
+    --color-card-foreground: hsl(0 0% 3.9%);
     --color-popover: hsl(0 0% 100%);
-    --color-popover-foreground: hsl(220 14% 14%);
-    --color-primary: hsl(232 60% 58%);
-    --color-primary-foreground: hsl(0 0% 100%);
-    --color-secondary: hsl(220 14% 96%);
-    --color-secondary-foreground: hsl(220 14% 14%);
-    --color-muted: hsl(220 14% 97%);
-    --color-muted-foreground: hsl(220 8% 46%);
-    --color-accent: hsl(220 14% 96%);
-    --color-accent-foreground: hsl(220 14% 14%);
-    --color-destructive: hsl(0 72% 51%);
-    --color-destructive-foreground: hsl(0 0% 100%);
-    --color-border: hsl(220 14% 92%);
-    --color-input: hsl(220 14% 92%);
-    --color-ring: hsl(232 60% 58%);
+    --color-popover-foreground: hsl(0 0% 3.9%);
+    --color-primary: hsl(0 0% 9%);
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-secondary: hsl(0 0% 96.1%);
+    --color-secondary-foreground: hsl(0 0% 9%);
+    --color-muted: hsl(0 0% 96.1%);
+    --color-muted-foreground: hsl(0 0% 45.1%);
+    --color-accent: hsl(0 0% 96.1%);
+    --color-accent-foreground: hsl(0 0% 9%);
+    --color-destructive: hsl(0 84.2% 60.2%);
+    --color-destructive-foreground: hsl(0 0% 98%);
+    --color-border: hsl(0 0% 89.8%);
+    --color-input: hsl(0 0% 89.8%);
+    --color-ring: hsl(0 0% 63%);
+
+    /* Sidebar-Familie Light (Neutral) = shadcn-Werte: Rail 98%, aktiv 96.1%,
+       Border 89.8%. Inset-Panel (100%) schwebt via Shadow + Rounded auf dem
+       Rail; der Kontrast ist bewusst subtil (wie im Original). */
+    --color-sidebar: hsl(0 0% 98%);
+    --color-sidebar-foreground: hsl(0 0% 26.1%);
+    --color-sidebar-primary: hsl(0 0% 9%);
+    --color-sidebar-primary-foreground: hsl(0 0% 98%);
+    --color-sidebar-accent: hsl(0 0% 96.1%);
+    --color-sidebar-accent-foreground: hsl(0 0% 9%);
+    --color-sidebar-border: hsl(0 0% 89.8%);
+    --color-sidebar-ring: hsl(0 0% 63%);
   }
 
   * {
@@ -107,8 +130,11 @@
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
+    /* shadcn-Preset-Font: Inter (Heading + Body). Apps laden Inter selbst
+       (z.B. Google Fonts / self-hosted); ohne geladene Inter greift der
+       System-Fallback. */
     font-family:
-      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     font-size: 14px;
     line-height: 1.5;
     margin: 0;

package/src/ui/avatar.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

package/src/ui/badge.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/ui/breadcrumb.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+import * as React from "react"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/ui/button.tsx

@@ -0,0 +1,65 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/ui/card.tsx

@@ -0,0 +1,93 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+import * as React from "react"
+
+import { cn } from "../lib/cn"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.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}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}