@moontra/moonui 6.11.0 → 6.12.0

package/src/components/ui/card.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { motion, type HTMLMotionProps } from "framer-motion";
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/utils";
 import { microInteractionVariants, hoverAnimations, tapAnimations } from "@/lib/micro-interactions";
 
@@ -11,16 +12,14 @@ import { microInteractionVariants, hoverAnimations, tapAnimations } from "@/lib/
 // hiç uygulanmıyordu; kart kökün `dark:bg-gray-900` değerinde kalıyordu.
 // Semantik `bg-card` token'ına bağlandı.
 //
-// NOT — `size` ve `asChild` (aynı issue'da raporlandı) BİLİNÇLİ olarak
-// değiştirilmedi, ayrı gerekçelerle:
-//   • `size`: CVA'da dört değerin dördü de boş string ve `compoundVariants` YOK
-//     (separator'ın aksine gizli bir çalışma yolu yok). Doğal hedefi de yok —
-//     padding kökte değil CardHeader/Content/Footer'ın kendi `p-6`'sında. Anlamlı
-//     kılmak alt-component'lerin padding'ini yeniden tasarlamak demek: görsel
-//     değişim + API kararı, bu PR'ın kapsamı dışı.
-//   • `asChild`: yalnız tipte var, gövdede hiç okunmuyor. Gerçekten uygulamak
-//     Radix `Slot` bağımlılığı + child-tek-eleman sözleşmesi demek.
-// İkisi de #310'da açık kalıyor; bu PR ölü SINIF kısmını kapatıyor.
+// #310 (ikinci tur): `size` ve `asChild` ARTIK GERÇEK.
+//   • `size`: CVA'daki dört değer de boş stringdi ve `compoundVariants` yoktu — prop
+//     kabul ediliyor, hiçbir görsel fark üretmiyordu. Kökte uygulanacak doğal bir hedefi
+//     de yok, çünkü padding `CardHeader/Content/Footer`'ın kendi `p-6`'sında. Bu yüzden
+//     kök `size`'ı CONTEXT ile alt bölümlere dağıtıyor (aşağıda).
+//     KRİTİK: `md` bugünkü `p-6`'yı KORUR → varsayılan kullanımda görsel değişim YOK.
+//   • `asChild`: yalnız tipteydi, gövdede hiç okunmuyordu → `...props` ile native div'e
+//     sızıyor (`<div aschild="true">`, React uyarısı). Radix `Slot`a bağlandı.
 
 const cardVariants = cva(
   "rounded-lg border bg-card text-card-foreground shadow-sm dark:shadow-gray-900/20 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-all duration-200",
@@ -62,6 +61,29 @@ const cardVariants = cva(
   }
 );
 
+/**
+ * #310: Kart bölümlerinin padding ölçeği. `md` = bugünkü `p-6` — bu, mevcut tüketicide
+ * görsel değişim OLMAMASI için zorunlu (varsayılan `size` zaten `md`).
+ */
+type CardSize = "sm" | "md" | "lg" | "xl";
+
+const CARD_SECTION_PADDING: Record<CardSize, string> = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-10",
+};
+
+/**
+ * Kök `Card`ın çözülmüş `size`ını alt bölümlere taşıyan tek kaynak. Alt component'ler
+ * `Card` dışında da tek başına kullanılabildiği için context varsayılanı `md`dir.
+ */
+const CardSizeContext = React.createContext<CardSize>("md");
+
+/** `default` deprecated alias'tır (#319); kanonik `md`ye eşlenir. */
+const resolveCardSize = (size: CardProps["size"]): CardSize =>
+  size && size !== "default" ? size : "md";
+
 export interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof cardVariants> {
@@ -70,7 +92,25 @@ export interface CardProps
 }
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant, size, radius, interactive, microInteraction = "lift", ...props }, ref) => {
+  ({ className, variant, size, radius, interactive, asChild = false, microInteraction = "lift", ...props }, ref) => {
+    const resolvedSize = resolveCardSize(size);
+    const rootClassName = cn(
+      "moonui-theme",
+      cardVariants({ variant, size, radius, interactive, className })
+    );
+
+    // #310: `asChild` Radix `Slot`a bağlandı. Slot ile motion sarmalayıcı BİRLİKTE
+    // kullanılamaz (Slot tek çocuğa prop birleştirir, motion kendi elemanını ister) —
+    // bu yüzden asChild verildiğinde micro-interaction atlanır ve bu davranış
+    // belgelenir. Görsel etkileşimi tüketici kendi elemanında kurar.
+    if (asChild) {
+      return (
+        <CardSizeContext.Provider value={resolvedSize}>
+          <Slot ref={ref} className={rootClassName} {...props} />
+        </CardSizeContext.Provider>
+      );
+    }
+
     // Interactive özelliği varsa motion.div, yoksa normal div kullan
     if (interactive && microInteraction !== "none") {
       const interactionProps = {
@@ -81,22 +121,22 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
       };
       
       return (
-        <motion.div
-          ref={ref}
-          className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
-          {...interactionProps}
-          {...(props as any)}
-        />
+        <CardSizeContext.Provider value={resolvedSize}>
+          <motion.div
+            ref={ref}
+            className={rootClassName}
+            {...interactionProps}
+            {...(props as any)}
+          />
+        </CardSizeContext.Provider>
       );
     }
-    
+
     // Non-interactive version
     return (
-      <div
-        ref={ref}
-        className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
-        {...props}
-      />
+      <CardSizeContext.Provider value={resolvedSize}>
+        <div ref={ref} className={rootClassName} {...props} />
+      </CardSizeContext.Provider>
     );
   }
 );
@@ -105,13 +145,17 @@ Card.displayName = "Card";
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("moonui-theme", "flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  // #310: padding artık kök `Card`ın `size`ından geliyor (eskiden sabit `p-6`).
+  const padding = CARD_SECTION_PADDING[React.useContext(CardSizeContext)];
+  return (
+    <div
+      ref={ref}
+      className={cn("moonui-theme", "flex flex-col space-y-1.5", padding, className)}
+      {...props}
+    />
+  );
+});
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
@@ -141,21 +185,32 @@ CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("moonui-theme", "p-6 pt-0", className)} {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const padding = CARD_SECTION_PADDING[React.useContext(CardSizeContext)];
+  return (
+    <div
+      ref={ref}
+      className={cn("moonui-theme", padding, "pt-0", className)}
+      {...props}
+    />
+  );
+});
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("moonui-theme", "flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const padding = CARD_SECTION_PADDING[React.useContext(CardSizeContext)];
+  return (
+    <div
+      ref={ref}
+      className={cn("moonui-theme", "flex items-center", padding, "pt-0", className)}
+      {...props}
+    />
+  );
+});
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants };
+export type { CardSize };