@moontra/moonui 6.11.0 → 6.12.0

package/dist/index.js

@@ -1135,42 +1135,54 @@ var cardVariants = classVarianceAuthority.cva(
     }
   }
 );
+var CARD_SECTION_PADDING = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-10"
+};
+var CardSizeContext = React12__namespace.createContext("md");
+var resolveCardSize = (size) => size && size !== "default" ? size : "md";
 var Card = React12__namespace.forwardRef(
-  ({ 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 })
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CardSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, className: rootClassName, ...props }) });
+    }
     if (interactive && microInteraction !== "none") {
       const interactionProps = {
         whileHover: microInteraction === "scale" ? hoverAnimations.scale : microInteraction === "glow" ? hoverAnimations.glow : hoverAnimations.lift,
         whileTap: tapAnimations.scale
       };
-      return /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(CardSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsxRuntime.jsx(
         framerMotion.motion.div,
         {
           ref,
-          className: cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className })),
+          className: rootClassName,
           ...interactionProps,
           ...props
         }
-      );
+      ) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className })),
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CardSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: rootClassName, ...props }) });
   }
 );
 Card.displayName = "Card";
-var CardHeader = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("moonui-theme", "flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
+var CardHeader = React12__namespace.forwardRef(({ className, ...props }, ref) => {
+  const padding = CARD_SECTION_PADDING[React12__namespace.useContext(CardSizeContext)];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("moonui-theme", "flex flex-col space-y-1.5", padding, className),
+      ...props
+    }
+  );
+});
 CardHeader.displayName = "CardHeader";
 var CardTitle = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
@@ -1190,16 +1202,29 @@ var CardDescription = React12__namespace.forwardRef(({ className, ...props }, re
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("moonui-theme", "p-6 pt-0", className), ...props }));
+var CardContent = React12__namespace.forwardRef(({ className, ...props }, ref) => {
+  const padding = CARD_SECTION_PADDING[React12__namespace.useContext(CardSizeContext)];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("moonui-theme", padding, "pt-0", className),
+      ...props
+    }
+  );
+});
 CardContent.displayName = "CardContent";
-var CardFooter = React12__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("moonui-theme", "flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
+var CardFooter = React12__namespace.forwardRef(({ className, ...props }, ref) => {
+  const padding = CARD_SECTION_PADDING[React12__namespace.useContext(CardSizeContext)];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("moonui-theme", "flex items-center", padding, "pt-0", className),
+      ...props
+    }
+  );
+});
 CardFooter.displayName = "CardFooter";
 function Calendar({
   mode = "single",
@@ -9326,6 +9351,7 @@ exports.badgeVariants = badgeVariants;
 exports.breadcrumbVariants = breadcrumbVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
+exports.cardVariants = cardVariants;
 exports.carouselContentVariants = carouselContentVariants;
 exports.carouselItemVariants = carouselItemVariants;
 exports.cn = cn;