@raydenui/ui 0.3.0 → 0.4.0

package/dist/index.d.cts

@@ -547,6 +547,81 @@ interface SelectOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>
 }
 declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface ActivityItemLink {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface ActivityItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Avatar element (e.g., <Avatar />) */
+    avatar: ReactNode;
+    /** Primary text content — mixed inline content with bold names, action text, highlights */
+    text: ReactNode;
+    /** Whether this item is unread (shows green dot) */
+    unread?: boolean;
+    /** Date label (e.g., "Thurs 21, 2023") */
+    date?: string;
+    /** Time label (e.g., "10 mins") — right-aligned */
+    time?: string;
+    /** Optional link button in meta row */
+    link?: ActivityItemLink;
+    /** Optional badge text in meta row (e.g., "#Marketing-Design") */
+    badge?: string;
+    /** Connector line position for timeline layouts */
+    connector?: "top" | "middle" | "last";
+    /** Optional content block (e.g., ActivityContent) */
+    children?: ReactNode;
+}
+declare const ActivityItem: react.ForwardRefExoticComponent<ActivityItemProps & react.RefAttributes<HTMLDivElement>>;
+
+type ActivityContentVariant = "file" | "comment" | "cta";
+type ActivityContentStyle = "plain" | "card" | "container";
+interface ActivityContentAttachment {
+    name: string;
+    extension: string;
+}
+interface ActivityContentAction {
+    label: string;
+    onClick?: () => void;
+}
+interface ActivityContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content variant */
+    variant: ActivityContentVariant;
+    /** Visual style wrapper */
+    contentStyle?: ActivityContentStyle;
+    /** Leading icon for file variant */
+    icon?: ReactNode | IconName;
+    /** File name */
+    title?: string;
+    /** File size (e.g., "13MB") */
+    size?: string;
+    /** File type label (e.g., "PDF File") */
+    fileType?: string;
+    /** File date (e.g., "11 Sept 23") */
+    date?: string;
+    /** Avatar element for comment author */
+    avatar?: ReactNode;
+    /** Author name */
+    author?: string;
+    /** Timestamp (e.g., "2 hours ago") */
+    timestamp?: string;
+    /** Comment body text */
+    comment?: string;
+    /** File attachments */
+    attachments?: ActivityContentAttachment[];
+    /** Number of reactions */
+    reactions?: number;
+    /** Number of replies */
+    replies?: number;
+    /** Reply button callback */
+    onReply?: () => void;
+    /** Primary action (e.g., Accept) */
+    primaryAction?: ActivityContentAction;
+    /** Secondary action (e.g., Decline) */
+    secondaryAction?: ActivityContentAction;
+}
+declare const ActivityContent: react.ForwardRefExoticComponent<ActivityContentProps & react.RefAttributes<HTMLDivElement>>;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { 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, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, 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, type IconName, type IconProps, type IconSize, type IconVariant, type IllustrationName, Input, type InputProps, type InputSize, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, 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, type SortDirection, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, cn, illustrationNames };
+export { 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, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, 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, type IconName, type IconProps, type IconSize, type IconVariant, type IllustrationName, Input, type InputProps, type InputSize, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, 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, type SortDirection, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, cn, illustrationNames };

package/dist/index.d.ts

@@ -547,6 +547,81 @@ interface SelectOptionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>
 }
 declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface ActivityItemLink {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface ActivityItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Avatar element (e.g., <Avatar />) */
+    avatar: ReactNode;
+    /** Primary text content — mixed inline content with bold names, action text, highlights */
+    text: ReactNode;
+    /** Whether this item is unread (shows green dot) */
+    unread?: boolean;
+    /** Date label (e.g., "Thurs 21, 2023") */
+    date?: string;
+    /** Time label (e.g., "10 mins") — right-aligned */
+    time?: string;
+    /** Optional link button in meta row */
+    link?: ActivityItemLink;
+    /** Optional badge text in meta row (e.g., "#Marketing-Design") */
+    badge?: string;
+    /** Connector line position for timeline layouts */
+    connector?: "top" | "middle" | "last";
+    /** Optional content block (e.g., ActivityContent) */
+    children?: ReactNode;
+}
+declare const ActivityItem: react.ForwardRefExoticComponent<ActivityItemProps & react.RefAttributes<HTMLDivElement>>;
+
+type ActivityContentVariant = "file" | "comment" | "cta";
+type ActivityContentStyle = "plain" | "card" | "container";
+interface ActivityContentAttachment {
+    name: string;
+    extension: string;
+}
+interface ActivityContentAction {
+    label: string;
+    onClick?: () => void;
+}
+interface ActivityContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content variant */
+    variant: ActivityContentVariant;
+    /** Visual style wrapper */
+    contentStyle?: ActivityContentStyle;
+    /** Leading icon for file variant */
+    icon?: ReactNode | IconName;
+    /** File name */
+    title?: string;
+    /** File size (e.g., "13MB") */
+    size?: string;
+    /** File type label (e.g., "PDF File") */
+    fileType?: string;
+    /** File date (e.g., "11 Sept 23") */
+    date?: string;
+    /** Avatar element for comment author */
+    avatar?: ReactNode;
+    /** Author name */
+    author?: string;
+    /** Timestamp (e.g., "2 hours ago") */
+    timestamp?: string;
+    /** Comment body text */
+    comment?: string;
+    /** File attachments */
+    attachments?: ActivityContentAttachment[];
+    /** Number of reactions */
+    reactions?: number;
+    /** Number of replies */
+    replies?: number;
+    /** Reply button callback */
+    onReply?: () => void;
+    /** Primary action (e.g., Accept) */
+    primaryAction?: ActivityContentAction;
+    /** Secondary action (e.g., Decline) */
+    secondaryAction?: ActivityContentAction;
+}
+declare const ActivityContent: react.ForwardRefExoticComponent<ActivityContentProps & react.RefAttributes<HTMLDivElement>>;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { 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, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, 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, type IconName, type IconProps, type IconSize, type IconVariant, type IllustrationName, Input, type InputProps, type InputSize, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, 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, type SortDirection, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, cn, illustrationNames };
+export { 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, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, 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, type IconName, type IconProps, type IconSize, type IconVariant, type IllustrationName, Input, type InputProps, type InputSize, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, 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, type SortDirection, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, cn, illustrationNames };

package/dist/index.js

@@ -12397,7 +12397,292 @@ var SelectOption = forwardRef(
   }
 );
 SelectOption.displayName = "SelectOption";
+var ActivityItem = forwardRef(
+  ({
+    avatar,
+    text,
+    unread = false,
+    date,
+    time,
+    link,
+    badge,
+    connector,
+    children,
+    className,
+    ...rest
+  }, ref) => {
+    const hasConnectorAbove = connector === "middle" || connector === "last";
+    const hasConnectorBelow = connector === "top" || connector === "middle";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex gap-3 items-start", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-center shrink-0 gap-1 self-stretch",
+                (connector === "last" || !connector) && "justify-start"
+              ),
+              children: [
+                hasConnectorAbove && /* @__PURE__ */ jsx("div", { className: "h-2 w-px bg-grey-100" }),
+                /* @__PURE__ */ jsx("div", { className: "shrink-0 size-8", children: avatar }),
+                hasConnectorBelow && /* @__PURE__ */ jsx("div", { className: "flex-1 w-px bg-grey-100" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-1 flex-col gap-3 items-start min-w-0",
+                !connector && "",
+                connector === "top" && "pb-4",
+                (connector === "middle" || connector === "last") && "py-4"
+              ),
+              children: [
+                /* @__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" })
+                  ] }),
+                  (date || time || link || badge) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1 w-full", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-start min-w-0", children: [
+                      date && /* @__PURE__ */ jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: date }),
+                      link && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: "\u30FB" }),
+                        link.href ? /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: link.href,
+                            onClick: link.onClick,
+                            className: "text-xs font-medium text-primary-400 underline whitespace-nowrap",
+                            children: link.label
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: link.onClick,
+                            className: "text-xs font-medium text-primary-400 underline whitespace-nowrap",
+                            children: link.label
+                          }
+                        )
+                      ] }),
+                      badge && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: "\u30FB" }),
+                        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-primary-400 px-2 text-xs font-medium text-white whitespace-nowrap", children: badge })
+                      ] })
+                    ] }),
+                    time && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-grey-400 whitespace-nowrap", children: time })
+                  ] })
+                ] }),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ActivityItem.displayName = "ActivityItem";
+var styleClasses = {
+  plain: "",
+  card: "bg-white rounded-lg p-2 shadow-[0px_2px_5px_-2px_rgba(16,25,40,0.06),0px_2px_7px_0px_rgba(16,25,40,0.05),0px_0px_0px_1px_rgba(16,25,40,0.05)]",
+  container: "bg-grey-50 border border-grey-100 rounded-lg p-3"
+};
+var ActivityContent = forwardRef(
+  ({
+    variant,
+    contentStyle = "card",
+    // File props
+    icon,
+    title,
+    size,
+    fileType,
+    date,
+    // Comment props
+    avatar,
+    author,
+    timestamp,
+    comment,
+    attachments,
+    reactions,
+    replies,
+    onReply,
+    // CTA props
+    primaryAction,
+    secondaryAction,
+    className,
+    ...rest
+  }, ref) => {
+    if (variant === "file") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex items-center gap-2",
+            styleClasses[contentStyle],
+            className
+          ),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center size-8 rounded-lg bg-primary-50", children: /* @__PURE__ */ jsx("span", { className: "size-4", children: resolveIcon(icon ?? "file", "sm") }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-grey-700 whitespace-nowrap", children: title }),
+                size && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "size-0.5 rounded-full bg-grey-400" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: size })
+                ] })
+              ] }),
+              (fileType || date) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                fileType && /* @__PURE__ */ jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: fileType }),
+                fileType && date && /* @__PURE__ */ jsx("span", { className: "size-0.5 rounded-full bg-grey-400" }),
+                date && /* @__PURE__ */ jsx("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: date })
+              ] })
+            ] })
+          ]
+        }
+      );
+    }
+    if (variant === "comment") {
+      contentStyle === "plain" ? "flex gap-2 items-start" : cn("flex flex-col gap-2", styleClasses[contentStyle]);
+      const commentContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        (avatar || author) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+          avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0 size-5", children: avatar }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            author && /* @__PURE__ */ jsx("span", { className: "text-body-sm font-medium text-grey-700 whitespace-nowrap", children: author }),
+            timestamp && /* @__PURE__ */ jsxs("span", { className: "text-xs text-grey-400 whitespace-nowrap", children: [
+              "\u30FB",
+              timestamp
+            ] })
+          ] })
+        ] }),
+        comment && /* @__PURE__ */ jsx("p", { className: "text-body-sm text-grey-600 leading-5", children: comment }),
+        attachments && attachments.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          attachments.slice(0, 2).map((file) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-white pl-1 pr-2 py-1",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center size-6 rounded bg-primary-50 border border-primary-50", children: /* @__PURE__ */ jsx("span", { className: "size-3", children: /* @__PURE__ */ jsx(Icon, { name: "file", size: "xs" }) }) }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-grey-700 whitespace-nowrap", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-semibold", children: file.name }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-grey-500", children: [
+                    ".",
+                    file.extension
+                  ] })
+                ] })
+              ]
+            },
+            `${file.name}.${file.extension}`
+          )),
+          attachments.length > 2 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-8 rounded-lg border border-grey-100 bg-white px-2 py-1", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-grey-700", children: [
+            "+",
+            attachments.length - 2
+          ] }) })
+        ] }),
+        (reactions != null || replies != null) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          reactions != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-white px-2 py-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-grey-700", children: "\u{1F91D}\u{1F525}" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-grey-700", children: [
+              /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
+                reactions,
+                " "
+              ] }),
+              "Reactions"
+            ] })
+          ] }),
+          replies != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-white px-2 py-1 h-8", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "message", size: "sm", className: "text-grey-400" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-grey-700", children: [
+              /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
+                replies,
+                " "
+              ] }),
+              "Replies"
+            ] })
+          ] })
+        ] }),
+        onReply && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onReply,
+            className: "inline-flex items-center justify-center rounded-lg border border-grey-300 bg-white px-3 py-1 text-xs font-semibold text-grey-700",
+            children: "Reply"
+          }
+        )
+      ] });
+      if (contentStyle === "plain") {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            className: cn("flex gap-2 items-start", className),
+            ...rest,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 w-px self-stretch bg-grey-100" }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 items-start rounded-lg p-3", children: commentContent })
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex flex-col gap-2 items-start",
+            styleClasses[contentStyle],
+            className
+          ),
+          ...rest,
+          children: commentContent
+        }
+      );
+    }
+    if (variant === "cta") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex items-start gap-3", className),
+          ...rest,
+          children: [
+            primaryAction && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: primaryAction.onClick,
+                className: "inline-flex items-center justify-center rounded-lg bg-primary-500 px-4 py-2 text-body-sm font-semibold text-white",
+                children: primaryAction.label
+              }
+            ),
+            secondaryAction && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: secondaryAction.onClick,
+                className: "inline-flex items-center justify-center rounded-lg border border-grey-300 bg-white px-4 py-2 text-body-sm font-semibold text-grey-700",
+                children: secondaryAction.label
+              }
+            )
+          ]
+        }
+      );
+    }
+    return null;
+  }
+);
+ActivityContent.displayName = "ActivityContent";
 
-export { Alert, Avatar, AvatarGroup, Badge, Breadcrumb, Button, ButtonGroup, ButtonGroupItem, Checkbox, Chip, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyStateIllustration, FileUpload, FileUploadDropZone, FileUploadItem, Icon, Input, MetricsCard, Pagination, ProgressBar, ProgressCircle, Radio, Select, SelectOption, SidebarMenu, SidebarMenuItem, SidebarMenuSection, SidebarMenuSub, SidebarMenuSubItem, Tab, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, Toggle, Tooltip, cn, illustrationNames };
+export { ActivityContent, ActivityItem, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, Button, ButtonGroup, ButtonGroupItem, Checkbox, Chip, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyStateIllustration, FileUpload, FileUploadDropZone, FileUploadItem, Icon, Input, MetricsCard, Pagination, ProgressBar, ProgressCircle, Radio, Select, SelectOption, SidebarMenu, SidebarMenuItem, SidebarMenuSection, SidebarMenuSub, SidebarMenuSubItem, Tab, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, Toggle, Tooltip, cn, illustrationNames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map