@moontra/moonui 6.10.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",
@@ -6945,10 +6970,10 @@ var tooltipVariants = classVarianceAuthority.cva(
       variant: {
         default: "bg-primary text-primary-foreground",
         secondary: "bg-secondary text-secondary-foreground",
-        success: "bg-green-500 text-white border-green-600",
-        warning: "bg-yellow-500 text-white border-yellow-600",
+        success: "bg-success text-success-foreground border-success",
+        warning: "bg-warning text-warning-foreground border-warning",
         destructive: "bg-destructive text-destructive-foreground",
-        info: "bg-blue-500 text-white border-blue-600"
+        info: "bg-info text-info-foreground border-info"
       },
       size: {
         sm: "px-2 py-1 text-xs",
@@ -8330,9 +8355,9 @@ var toastVariants = classVarianceAuthority.cva(
       variant: {
         default: "border bg-background text-foreground",
         destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
-        success: "border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-900/20 dark:text-green-100",
-        warning: "border-orange-200 bg-orange-50 text-orange-900 dark:border-orange-800 dark:bg-orange-900/20 dark:text-orange-100",
-        info: "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-100"
+        success: "border-success-subtle-foreground/20 bg-success-subtle text-success-subtle-foreground",
+        warning: "border-warning-subtle-foreground/20 bg-warning-subtle text-warning-subtle-foreground",
+        info: "border-info-subtle-foreground/20 bg-info-subtle text-info-subtle-foreground"
       }
     },
     defaultVariants: {
@@ -8368,7 +8393,7 @@ var ToastClose = React12__namespace.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-destructive-foreground/70 group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive-foreground/40 group-[.destructive]:focus:ring-offset-destructive",
       className
     ),
     "toast-close": "",
@@ -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;