@raydenui/ui 0.9.4 → 0.9.5

package/dist/index.js

@@ -6795,7 +6795,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__ */ 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__ */ jsx(
+          "span",
+          {
+            className: "absolute bottom-[5px] left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary-400",
+            "aria-hidden": "true"
+          }
+        )
       ]
     }
   );
@@ -6851,7 +6857,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__ */ jsxs("div", { className: "flex flex-col", role: "grid", "aria-label": "Calendar", children: [
     /* @__PURE__ */ jsx("div", { className: "flex h-10 items-center", role: "row", children: DAY_LABELS.map((label, i) => /* @__PURE__ */ jsx(
       "div",
@@ -7645,6 +7659,194 @@ function Badge({
     }
   );
 }
+var CardContext = createContext(null);
+function useCardContext() {
+  const ctx = 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 = forwardRef(
+  ({
+    variant = "default",
+    size = "md",
+    rounded = "lg",
+    shadow = "sm",
+    hoverable = false,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx(CardContext.Provider, { value: { size }, children: /* @__PURE__ */ 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 = forwardRef(
+  ({ title, subtitle, actions, bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold leading-[1.45] text-grey-900", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm leading-[1.45] text-grey-500", children: subtitle }),
+            children
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+        ]
+      }
+    );
+  }
+);
+CardHeader.displayName = "CardHeader";
+var CardBody = forwardRef(
+  ({ noPadding = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1", !noPadding && sizeStyles2[size].body, className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+CardBody.displayName = "CardBody";
+var CardFooter = forwardRef(
+  ({ align = "right", bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return /* @__PURE__ */ 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 = forwardRef(
+  ({
+    position = "top",
+    aspectRatio = "auto",
+    objectFit = "cover",
+    alt,
+    className,
+    ...rest
+  }, ref) => {
+    const objectFitClasses = {
+      cover: "object-cover",
+      contain: "object-contain",
+      fill: "object-fill"
+    };
+    return /* @__PURE__ */ 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__ */ jsx(
+          "img",
+          {
+            ref,
+            alt,
+            className: cn(
+              "w-full",
+              aspectRatioStyles[aspectRatio],
+              objectFitClasses[objectFit],
+              className
+            ),
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+CardImage.displayName = "CardImage";
 var stateStyles = {
   information: {
     border: "bg-secondary-500",
@@ -8890,7 +9092,30 @@ function Variation6({ label, value, icon, trendBadge, description, cta }) {
     cta && /* @__PURE__ */ 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__ */ jsxs(
     "div",
     {
@@ -8898,14 +9123,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__ */ jsx(Variation1, { ...props }),
-        variation === "2" && /* @__PURE__ */ jsx(Variation2, { ...props }),
-        variation === "3" && /* @__PURE__ */ jsx(Variation3, { ...props }),
-        variation === "4" && /* @__PURE__ */ jsx(Variation4, { ...props }),
-        variation === "5" && /* @__PURE__ */ jsx(Variation5, { ...props }),
-        variation === "6" && /* @__PURE__ */ jsx(Variation6, { ...props })
+        variation === "1" && /* @__PURE__ */ jsx(Variation1, { ...componentProps }),
+        variation === "2" && /* @__PURE__ */ jsx(Variation2, { ...componentProps }),
+        variation === "3" && /* @__PURE__ */ jsx(Variation3, { ...componentProps }),
+        variation === "4" && /* @__PURE__ */ jsx(Variation4, { ...componentProps }),
+        variation === "5" && /* @__PURE__ */ jsx(Variation5, { ...componentProps }),
+        variation === "6" && /* @__PURE__ */ jsx(Variation6, { ...componentProps })
       ]
     }
   );
@@ -9069,19 +9294,34 @@ var FileUploadDropZone = forwardRef(
             ] }),
             /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: handleBrowse, children: "Browse Files" })
           ] }),
-          state === "uploading" && uploadingFile && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-4", "aria-live": "polite", "aria-atomic": "true", children: [
-            /* @__PURE__ */ jsx(FileTypeIcon, { type: getFileType(uploadingFile.name), "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-body-sm font-medium text-grey-700 truncate", children: uploadingFile.name }),
-                /* @__PURE__ */ 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__ */ jsxs(
+            "div",
+            {
+              className: "flex w-full flex-col items-center gap-4",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: [
+                /* @__PURE__ */ jsx(FileTypeIcon, { type: getFileType(uploadingFile.name), "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-body-sm font-medium text-grey-700 truncate", children: uploadingFile.name }),
+                    /* @__PURE__ */ 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__ */ jsx(ProgressBar, { value: uploadingFile.progress, size: "sm", showPercentage: false })
                 ] })
-              ] }),
-              /* @__PURE__ */ jsx(ProgressBar, { value: uploadingFile.progress, size: "sm", showPercentage: false })
-            ] })
-          ] }),
+              ]
+            }
+          ),
           state === "success" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", role: "status", children: [
             /* @__PURE__ */ jsx(UploadStateIcon, { state: "success", size: 56, "aria-hidden": "true" }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-1", children: /* @__PURE__ */ jsx("p", { className: "text-body-sm font-semibold text-grey-800", children: "Document Uploaded Successfully" }) }),
@@ -14361,7 +14601,13 @@ var ActivityItem = forwardRef(
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
                 /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-start gap-1 min-w-0", children: /* @__PURE__ */ jsx("span", { className: "text-body-sm leading-5 text-grey-600", children: text }) }),
-                unread && /* @__PURE__ */ jsx("span", { className: "shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white", "aria-hidden": "true" }),
+                unread && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white",
+                    "aria-hidden": "true"
+                  }
+                ),
                 unread && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Unread" })
               ] }),
               (date || time || link || badge) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1 w-full", children: [
@@ -14705,4 +14951,4 @@ function useRaydenRadio({
   };
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityContent, ActivityItem, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, ButtonGroup, ButtonGroupItem, Checkbox, Chip, Counter, DatePicker, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyStateIllustration, FileUpload, FileUploadDropZone, FileUploadItem, Icon, Input, LinearStepper, MetricsCard, Modal, NumberCounter, Pagination, ProgressBar, ProgressCircle, Radio, RangeSlider, RaydenChart, SegmentedStepper, Select, SelectOption, SidebarMenu, SidebarMenuItem, SidebarMenuSection, SidebarMenuSub, SidebarMenuSubItem, Slider, Spinner, Stepper, Tab, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, ThemeProvider, Toggle, Tooltip2 as Tooltip, chartColors, chartFont, cn, createGradientFill, hexToRgba, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityContent, ActivityItem, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, ButtonGroup, ButtonGroupItem, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, Chip, Counter, DatePicker, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyStateIllustration, FileUpload, FileUploadDropZone, FileUploadItem, Icon, Input, LinearStepper, MetricsCard, Modal, NumberCounter, Pagination, ProgressBar, ProgressCircle, Radio, RangeSlider, RaydenChart, SegmentedStepper, Select, SelectOption, SidebarMenu, SidebarMenuItem, SidebarMenuSection, SidebarMenuSub, SidebarMenuSubItem, Slider, Spinner, Stepper, Tab, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, ThemeProvider, Toggle, Tooltip2 as Tooltip, chartColors, chartFont, cn, createGradientFill, hexToRgba, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };