@raydenui/ui 0.9.4 → 0.9.6

package/README.md

@@ -92,6 +92,17 @@ function App() {
 - [create-rayden-app](https://www.npmjs.com/package/create-rayden-app) — CLI scaffolding with 6 templates
 - [@raydenui/ai](https://www.npmjs.com/package/@raydenui/ai) — MCP server for AI-assisted development
 
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/playbookTV"><img src="https://github.com/playbookTV.png" width="100px;" alt=""/><br /><sub><b>Leslie Isah</b></sub></a></td>
+    <td align="center"><a href="https://github.com/ZyhvarZeGreat"><img src="https://github.com/ZyhvarZeGreat.png" width="100px;" alt=""/><br /><sub><b>Bolude Daniel</b></sub></a></td>
+  </tr>
+</table>
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -5765,7 +5765,7 @@ var AccordionTrigger = react.forwardRef(
         onClick: () => toggle(value),
         className: cn(
           "flex items-center gap-3 px-4 py-6 w-full text-left transition-colors",
-          !isOpen && !disabled && "hover:bg-grey-50",
+          !isOpen && !disabled && "hover:bg-grey-50 dark:hover:bg-grey-100",
           disabled && "opacity-50 cursor-not-allowed",
           className
         ),
@@ -6797,7 +6797,13 @@ function DayCell({ day, state, fullDate, onClick }) {
       "aria-pressed": state === "selected" || state === "start-range" || state === "end-range" ? true : void 0,
       children: [
         day,
-        state === "today" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-[5px] left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary-400", "aria-hidden": "true" })
+        state === "today" && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute bottom-[5px] left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary-400",
+            "aria-hidden": "true"
+          }
+        )
       ]
     }
   );
@@ -6853,7 +6859,15 @@ function MonthGrid({
   if (rows.length === 6 && rows[5].every((c) => c.state === "disabled")) {
     rows.pop();
   }
-  const fullDayNames = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+  const fullDayNames = [
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+    "Sunday"
+  ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", role: "grid", "aria-label": "Calendar", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-center", role: "row", children: DAY_LABELS.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -6905,7 +6919,8 @@ function YearGrid({ baseYear, selectedYear, onYearClick }) {
 function NavButton({
   direction,
   onClick,
-  hidden
+  hidden,
+  className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -6917,7 +6932,8 @@ function NavButton({
       tabIndex: hidden ? -1 : void 0,
       className: cn(
         "flex items-center justify-center p-2 rounded-lg bg-grey-75 hover:bg-grey-200 transition-colors cursor-pointer",
-        hidden && "opacity-0 pointer-events-none"
+        hidden && "opacity-0 pointer-events-none",
+        className
       ),
       children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { className: "size-3.5 text-grey-700" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { className: "size-3.5 text-grey-700" })
     }
@@ -7011,7 +7027,7 @@ var DatePicker = react.forwardRef(
         className: cn(
           "bg-white dark:bg-grey-50 border border-grey-75 rounded-2xl p-5 shadow-soft-xs",
           "flex flex-col gap-6",
-          mode !== "range" && "w-[340px]",
+          mode !== "range" && "w-full max-w-[340px]",
           className
         ),
         ...rest,
@@ -7044,15 +7060,16 @@ var DatePicker = react.forwardRef(
               }
             )
           ] }) }),
-          mode === "range" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-8", children: [
+          mode === "range" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row gap-6 md:gap-8", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-10 w-[280px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full md:w-[280px]", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "left", onClick: goToPrevMonth }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-700", children: monthYearLabel }),
                   /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, { className: "size-6 text-grey-500" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "right", hidden: true })
+                /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "right", onClick: goToNextMonth, className: "md:hidden" }),
+                /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "right", hidden: true, className: "hidden md:flex" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 MonthGrid,
@@ -7068,7 +7085,7 @@ var DatePicker = react.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex flex-col gap-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-[280px]", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "left", hidden: true }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -7536,11 +7553,11 @@ var Banner = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
-                className: cn("font-semibold leading-[1.45] whitespace-nowrap", textSize2, textColor),
+                className: cn("font-semibold leading-[1.45] sm:whitespace-nowrap", textSize2, textColor),
                 children: title
               }
             ),
-            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("leading-[1.45] whitespace-nowrap", textSize2, descColor), children: description }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("leading-[1.45] sm:whitespace-nowrap hidden sm:inline", textSize2, descColor), children: description }),
             buttonLabel && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -7588,8 +7605,8 @@ var colorStyles = {
   },
   success: {
     filled: "bg-success-400 text-white",
-    accent: "bg-success-50 text-[#036B26]",
-    outline: "border border-[#036B26] text-[#036B26]"
+    accent: "bg-success-50 text-success-700",
+    outline: "border border-success-700 text-success-700"
   },
   warning: {
     filled: "bg-warning-400 text-black",
@@ -7598,8 +7615,8 @@ var colorStyles = {
   },
   error: {
     filled: "bg-error-400 text-white",
-    accent: "bg-error-50 text-[#9E0A05]",
-    outline: "border border-[#9E0A05] text-[#9E0A05]"
+    accent: "bg-error-50 text-error-700",
+    outline: "border border-error-700 text-error-700"
   },
   neutral: {
     filled: "bg-grey-900 text-grey-50",
@@ -7647,6 +7664,187 @@ function Badge({
     }
   );
 }
+var CardContext = react.createContext(null);
+function useCardContext() {
+  const ctx = react.useContext(CardContext);
+  return ctx ?? { size: "md" };
+}
+var variantStyles = {
+  default: "border border-grey-200 bg-white dark:bg-grey-50",
+  outlined: "border-2 border-grey-300 bg-transparent",
+  elevated: "border border-grey-100 bg-white dark:bg-grey-50 shadow-soft-md",
+  ghost: "border-none bg-transparent"
+};
+var sizeStyles2 = {
+  sm: {
+    header: "px-4 py-3",
+    body: "px-4 py-3",
+    footer: "px-4 py-3"
+  },
+  md: {
+    header: "px-5 py-4",
+    body: "px-5 py-4",
+    footer: "px-5 py-4"
+  },
+  lg: {
+    header: "px-6 py-5",
+    body: "px-6 py-5",
+    footer: "px-6 py-5"
+  }
+};
+var roundedStyles = {
+  sm: "rounded-lg",
+  md: "rounded-[10px]",
+  lg: "rounded-xl",
+  xl: "rounded-2xl",
+  full: "rounded-3xl"
+};
+var shadowStyles = {
+  none: "",
+  sm: "shadow-soft-xxs",
+  md: "shadow-soft-xs",
+  lg: "shadow-soft-sm"
+};
+var footerAlignStyles = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end",
+  between: "justify-between"
+};
+var aspectRatioStyles = {
+  auto: "",
+  video: "aspect-video",
+  square: "aspect-square",
+  portrait: "aspect-[3/4]"
+};
+var Card = react.forwardRef(
+  ({
+    variant = "default",
+    size = "md",
+    rounded = "lg",
+    shadow = "sm",
+    hoverable = false,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(CardContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col overflow-hidden",
+          variantStyles[variant],
+          roundedStyles[rounded],
+          variant !== "elevated" && shadowStyles[shadow],
+          hoverable && "transition-shadow duration-200 hover:shadow-soft-md",
+          className
+        ),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+Card.displayName = "Card";
+var CardHeader = react.forwardRef(
+  ({ title, subtitle, actions, bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-start justify-between gap-4",
+          sizeStyles2[size].header,
+          bordered && "border-b border-grey-200",
+          className
+        ),
+        ...rest,
+        children: [
+          (title || subtitle || children) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold leading-[1.45] text-grey-900", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-[1.45] text-grey-500", children: subtitle }),
+            children
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+        ]
+      }
+    );
+  }
+);
+CardHeader.displayName = "CardHeader";
+var CardBody = react.forwardRef(
+  ({ noPadding = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1", !noPadding && sizeStyles2[size].body, className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+CardBody.displayName = "CardBody";
+var CardFooter = react.forwardRef(
+  ({ align = "right", bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-3",
+          sizeStyles2[size].footer,
+          footerAlignStyles[align],
+          bordered && "border-t border-grey-200",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+CardFooter.displayName = "CardFooter";
+var CardImage = react.forwardRef(
+  ({ position = "top", aspectRatio = "auto", objectFit = "cover", alt, className, ...rest }, ref) => {
+    const objectFitClasses = {
+      cover: "object-cover",
+      contain: "object-contain",
+      fill: "object-fill"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "w-full overflow-hidden",
+          position === "top" && "first:rounded-t-[inherit]",
+          position === "bottom" && "last:rounded-b-[inherit]",
+          position === "full" && "first:rounded-t-[inherit] last:rounded-b-[inherit]"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ref,
+            alt,
+            className: cn(
+              "w-full",
+              aspectRatioStyles[aspectRatio],
+              objectFitClasses[objectFit],
+              className
+            ),
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+CardImage.displayName = "CardImage";
 var stateStyles = {
   information: {
     border: "bg-secondary-500",
@@ -8446,9 +8644,9 @@ function BoxIcon({ className }) {
   );
 }
 var sizeClasses2 = {
-  sm: "w-[400px]",
-  md: "w-[500px]",
-  lg: "w-[640px]"
+  sm: "w-full max-w-[400px] mx-4 sm:mx-0",
+  md: "w-full max-w-[500px] mx-4 sm:mx-0",
+  lg: "w-full max-w-[640px] mx-4 sm:mx-0"
 };
 var Modal = react.forwardRef(
   ({
@@ -8892,7 +9090,30 @@ function Variation6({ label, value, icon, trendBadge, description, cta }) {
     cta && /* @__PURE__ */ jsxRuntime.jsx(CtaFooter, { cta, centered: true })
   ] });
 }
-function MetricsCard({ variation = "2", className, ...props }) {
+function MetricsCard({
+  variation = "2",
+  className,
+  // Destructure component-specific props to prevent them from being spread to DOM
+  label,
+  value,
+  icon,
+  trendBadge,
+  statusBadge,
+  description,
+  secondaryText,
+  cta,
+  ...rest
+}) {
+  const componentProps = {
+    label,
+    value,
+    icon,
+    trendBadge,
+    statusBadge,
+    description,
+    secondaryText,
+    cta
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8900,14 +9121,14 @@ function MetricsCard({ variation = "2", className, ...props }) {
         "flex flex-col overflow-clip rounded-xl border border-grey-200 bg-white dark:bg-grey-50 shadow-soft-xxs",
         className
       ),
-      ...props,
+      ...rest,
       children: [
-        variation === "1" && /* @__PURE__ */ jsxRuntime.jsx(Variation1, { ...props }),
-        variation === "2" && /* @__PURE__ */ jsxRuntime.jsx(Variation2, { ...props }),
-        variation === "3" && /* @__PURE__ */ jsxRuntime.jsx(Variation3, { ...props }),
-        variation === "4" && /* @__PURE__ */ jsxRuntime.jsx(Variation4, { ...props }),
-        variation === "5" && /* @__PURE__ */ jsxRuntime.jsx(Variation5, { ...props }),
-        variation === "6" && /* @__PURE__ */ jsxRuntime.jsx(Variation6, { ...props })
+        variation === "1" && /* @__PURE__ */ jsxRuntime.jsx(Variation1, { ...componentProps }),
+        variation === "2" && /* @__PURE__ */ jsxRuntime.jsx(Variation2, { ...componentProps }),
+        variation === "3" && /* @__PURE__ */ jsxRuntime.jsx(Variation3, { ...componentProps }),
+        variation === "4" && /* @__PURE__ */ jsxRuntime.jsx(Variation4, { ...componentProps }),
+        variation === "5" && /* @__PURE__ */ jsxRuntime.jsx(Variation5, { ...componentProps }),
+        variation === "6" && /* @__PURE__ */ jsxRuntime.jsx(Variation6, { ...componentProps })
       ]
     }
   );
@@ -9071,19 +9292,34 @@ var FileUploadDropZone = react.forwardRef(
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: handleBrowse, children: "Browse Files" })
           ] }),
-          state === "uploading" && uploadingFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-4", "aria-live": "polite", "aria-atomic": "true", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FileTypeIcon, { type: getFileType(uploadingFile.name), "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm font-medium text-grey-700 truncate", children: uploadingFile.name }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-body-xs font-medium text-grey-500 ml-2 shrink-0", "aria-label": `Upload progress: ${Math.round(uploadingFile.progress)} percent`, children: [
-                  Math.round(uploadingFile.progress),
-                  "%"
+          state === "uploading" && uploadingFile && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex w-full flex-col items-center gap-4",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(FileTypeIcon, { type: getFileType(uploadingFile.name), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm font-medium text-grey-700 truncate", children: uploadingFile.name }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: "text-body-xs font-medium text-grey-500 ml-2 shrink-0",
+                        "aria-label": `Upload progress: ${Math.round(uploadingFile.progress)} percent`,
+                        children: [
+                          Math.round(uploadingFile.progress),
+                          "%"
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { value: uploadingFile.progress, size: "sm", showPercentage: false })
                 ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { value: uploadingFile.progress, size: "sm", showPercentage: false })
-            ] })
-          ] }),
+              ]
+            }
+          ),
           state === "success" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", role: "status", children: [
             /* @__PURE__ */ jsxRuntime.jsx(UploadStateIcon, { state: "success", size: 56, "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-body-sm font-semibold text-grey-800", children: "Document Uploaded Successfully" }) }),
@@ -9343,14 +9579,14 @@ var FileUpload = react.forwardRef(
 FileUpload.displayName = "FileUpload";
 var sidebarThemeStyles = {
   light: {
-    container: "bg-white",
+    container: "bg-white dark:bg-grey-50",
     defaultText: "text-grey-700",
     defaultIcon: "text-grey-400",
     selectedBg: "bg-primary-50",
     selectedText: "text-grey-900",
     selectedBorder: "border-l-2 border-primary-400",
     selectedIcon: "text-grey-900",
-    hoverBg: "hover:bg-grey-50",
+    hoverBg: "hover:bg-grey-50 dark:hover:bg-grey-100",
     sectionTitle: "text-grey-400",
     divider: "border-grey-100",
     badgeDefault: "bg-grey-100 text-grey-700",
@@ -14363,7 +14599,13 @@ var ActivityItem = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 w-full", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-start gap-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm leading-5 text-grey-600", children: text }) }),
-                unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white", "aria-hidden": "true" }),
+                unread && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white",
+                    "aria-hidden": "true"
+                  }
+                ),
                 unread && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Unread" })
               ] }),
               (date || time || link || badge) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1 w-full", children: [
@@ -14722,6 +14964,11 @@ exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupItem = ButtonGroupItem;
+exports.Card = Card;
+exports.CardBody = CardBody;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardImage = CardImage;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.Counter = Counter;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { SVGAttributes, HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { SVGAttributes, HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, ImgHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { IconVariant, IconName, IconRecord } from './icons.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ChartData, ChartOptions } from 'chart.js';
@@ -329,6 +329,59 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare function Badge({ color, type, size, leadingIcon, trailingIcon, className, children, ...rest }: BadgeProps): react_jsx_runtime.JSX.Element;
 
+type CardVariant = "default" | "outlined" | "elevated" | "ghost";
+type CardSize = "sm" | "md" | "lg";
+type CardRounded = "sm" | "md" | "lg" | "xl" | "full";
+type CardShadow = "none" | "sm" | "md" | "lg";
+type CardImagePosition = "top" | "bottom" | "full";
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
+    variant?: CardVariant;
+    /** Padding scale for sub-components */
+    size?: CardSize;
+    /** Corner radius */
+    rounded?: CardRounded;
+    /** Shadow intensity */
+    shadow?: CardShadow;
+    /** Enable hover shadow effect */
+    hoverable?: boolean;
+}
+interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Header title */
+    title?: ReactNode;
+    /** Header subtitle */
+    subtitle?: ReactNode;
+    /** Actions slot (right side) */
+    actions?: ReactNode;
+    /** Show bottom border */
+    bordered?: boolean;
+}
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Remove default padding */
+    noPadding?: boolean;
+}
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Footer content alignment */
+    align?: "left" | "center" | "right" | "between";
+    /** Show top border */
+    bordered?: boolean;
+}
+interface CardImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    /** Image position relative to card content */
+    position?: CardImagePosition;
+    /** Aspect ratio */
+    aspectRatio?: "auto" | "video" | "square" | "portrait";
+    /** Object fit behavior */
+    objectFit?: "cover" | "contain" | "fill";
+    /** Alt text (required for accessibility) */
+    alt: string;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardBody: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardImage: react.ForwardRefExoticComponent<CardImageProps & react.RefAttributes<HTMLImageElement>>;
+
 type AlertVariant = "toast" | "banner";
 type AlertState = "information" | "success" | "warning" | "error";
 interface AlertAction {
@@ -525,7 +578,7 @@ interface MetricsCardProps extends HTMLAttributes<HTMLDivElement> {
     /** Call-to-action link */
     cta?: MetricsCardCta;
 }
-declare function MetricsCard({ variation, className, ...props }: MetricsCardProps): react_jsx_runtime.JSX.Element;
+declare function MetricsCard({ variation, className, label, value, icon, trendBadge, statusBadge, description, secondaryText, cta, ...rest }: MetricsCardProps): react_jsx_runtime.JSX.Element;
 
 type FileUploadItemStatus = "pending" | "uploading" | "complete" | "error";
 interface FileUploadFileData {
@@ -1152,4 +1205,4 @@ declare function useRaydenRadio<TFieldValues extends FieldValues = FieldValues,
     value: string;
 }): UseRaydenRadioReturn<TName>;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, ActivityContent, type ActivityContentAction, type ActivityContentAttachment, type ActivityContentProps, type ActivityContentStyle, type ActivityContentVariant, ActivityItem, type ActivityItemLink, type ActivityItemProps, Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarStatus, type AvatarType, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Banner, type BannerEmphasis, type BannerProps, type BannerSize, type BannerStatus, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ChartType, Checkbox, type CheckboxProps, Chip, type ChipProps, Counter, type CounterProps, type CounterShape, type CounterSize, DatePicker, type DatePickerMode, type DatePickerProps, Divider, type DividerProps, type DividerVariant, type DropZoneState, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyStateIllustration, type EmptyStateIllustrationProps, FileUpload, FileUploadDropZone, type FileUploadDropZoneProps, type FileUploadFileData, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, type FileUploadProps, Icon, IconName, type IconProps, type IconSize, IconVariant, type IllustrationName, Input, type InputProps, type InputSize, LinearStepper, type LinearStepperProps, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Modal, type ModalProps, type ModalSize, NumberCounter, type NumberCounterColor, type NumberCounterProps, type NumberCounterSize, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarType, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, type ProgressCircleStyle, Radio, type RadioProps, RangeSlider, type RangeSliderProps, RaydenChart, type RaydenChartProps, type ResolvedTheme, SegmentedStepper, type SegmentedStepperProps, Select, SelectOption, type SelectOptionProps, type SelectProps, SidebarMenu, type SidebarMenuContextValue, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSection, type SidebarMenuSectionProps, SidebarMenuSub, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarMenuTheme, Slider, type SliderProps, type SliderSize, type SortDirection, Spinner, type SpinnerLabelPosition, type SpinnerProps, type SpinnerSize, type SpinnerStyle, type SpinnerType, type StepIndicator, type StepItem, type StepStatus, Stepper, type StepperOrientation, type StepperProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsOrientation, type TabsProps, type TabsSize, type TabsVariant, type Theme, ThemeProvider, type ThemeProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, type UseRaydenCheckboxReturn, type UseRaydenFormControlOptions, type UseRaydenInputOptions, type UseRaydenInputReturn, type UseRaydenRadioReturn, type UseRaydenSelectOptions, type UseRaydenSelectReturn, chartColors, chartFont, cn, createGradientFill, hexToRgba, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, ActivityContent, type ActivityContentAction, type ActivityContentAttachment, type ActivityContentProps, type ActivityContentStyle, type ActivityContentVariant, ActivityItem, type ActivityItemLink, type ActivityItemProps, Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarStatus, type AvatarType, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Banner, type BannerEmphasis, type BannerProps, type BannerSize, type BannerStatus, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImagePosition, type CardImageProps, type CardProps, type CardRounded, type CardShadow, type CardSize, type CardVariant, type ChartType, Checkbox, type CheckboxProps, Chip, type ChipProps, Counter, type CounterProps, type CounterShape, type CounterSize, DatePicker, type DatePickerMode, type DatePickerProps, Divider, type DividerProps, type DividerVariant, type DropZoneState, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyStateIllustration, type EmptyStateIllustrationProps, FileUpload, FileUploadDropZone, type FileUploadDropZoneProps, type FileUploadFileData, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, type FileUploadProps, Icon, IconName, type IconProps, type IconSize, IconVariant, type IllustrationName, Input, type InputProps, type InputSize, LinearStepper, type LinearStepperProps, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Modal, type ModalProps, type ModalSize, NumberCounter, type NumberCounterColor, type NumberCounterProps, type NumberCounterSize, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarType, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, type ProgressCircleStyle, Radio, type RadioProps, RangeSlider, type RangeSliderProps, RaydenChart, type RaydenChartProps, type ResolvedTheme, SegmentedStepper, type SegmentedStepperProps, Select, SelectOption, type SelectOptionProps, type SelectProps, SidebarMenu, type SidebarMenuContextValue, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSection, type SidebarMenuSectionProps, SidebarMenuSub, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarMenuTheme, Slider, type SliderProps, type SliderSize, type SortDirection, Spinner, type SpinnerLabelPosition, type SpinnerProps, type SpinnerSize, type SpinnerStyle, type SpinnerType, type StepIndicator, type StepItem, type StepStatus, Stepper, type StepperOrientation, type StepperProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsOrientation, type TabsProps, type TabsSize, type TabsVariant, type Theme, ThemeProvider, type ThemeProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, type UseRaydenCheckboxReturn, type UseRaydenFormControlOptions, type UseRaydenInputOptions, type UseRaydenInputReturn, type UseRaydenRadioReturn, type UseRaydenSelectOptions, type UseRaydenSelectReturn, chartColors, chartFont, cn, createGradientFill, hexToRgba, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };