elseware-ui 2.31.8 → 2.31.9

package/dist/index.d.mts

@@ -1405,33 +1405,12 @@ interface ToggleReactionResult {
     disliked: boolean;
 }
 interface CommentDataSource {
-    /**
-     * Load comments for a resource
-     */
     getComments(): Promise<CommentEntity[]>;
-    /**
-     * Create root comment or reply
-     */
     createComment(input: CreateCommentInput): Promise<CommentEntity>;
-    /**
-     * Update existing comment
-     */
     updateComment(input: UpdateCommentInput): Promise<CommentEntity>;
-    /**
-     * Delete comment
-     */
     deleteComment(commentId: string): Promise<void>;
-    /**
-     * Toggle like
-     */
     toggleLike(commentId: string): Promise<ToggleReactionResult>;
-    /**
-     * Toggle dislike
-     */
     toggleDislike(commentId: string): Promise<ToggleReactionResult>;
-    /**
-     * Optional report functionality
-     */
     reportComment?(commentId: string, reason: string, description?: string): Promise<void>;
 }
 
@@ -1460,11 +1439,19 @@ interface CommentMenuProps {
 }
 interface CommentComposerProps {
     avatar?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    disabled?: boolean;
+    loading?: boolean;
     onSubmit: (content: string) => Promise<void> | void;
 }
 interface ReplyComposerProps {
     avatar?: string;
     username?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    disabled?: boolean;
+    loading?: boolean;
     onSubmit: (content: string) => Promise<void> | void;
 }
 interface CommentRepliesToggleProps {
@@ -1472,6 +1459,46 @@ interface CommentRepliesToggleProps {
     repliesCount: number;
     onToggle: () => void;
 }
+interface CommentItemProps {
+    comment: CommentEntity;
+    depth?: number;
+    config: Required<CommentThreadConfig>;
+    components?: CommentComponents;
+    onLike?: (comment: CommentEntity) => void;
+    onDislike?: (comment: CommentEntity) => void;
+    onReply?: (comment: CommentEntity, content: string) => Promise<void> | void;
+    onEdit?: (comment: CommentEntity) => void;
+    onDelete?: (comment: CommentEntity) => void;
+    onReport?: (comment: CommentEntity) => void;
+}
+interface CommentListProps {
+    comments: CommentEntity[];
+    depth?: number;
+    config: Required<CommentThreadConfig>;
+    components?: CommentComponents;
+    onLike?: (comment: CommentEntity) => void;
+    onDislike?: (comment: CommentEntity) => void;
+    onReply?: (comment: CommentEntity, content: string) => Promise<void> | void;
+    onEdit?: (comment: CommentEntity) => void;
+    onDelete?: (comment: CommentEntity) => void;
+    onReport?: (comment: CommentEntity) => void;
+}
+interface CommentThreadProps {
+    postId: string;
+    currentUser: CommentAuthor;
+    dataSource: CommentDataSource;
+    loading?: boolean;
+    components?: CommentComponents;
+    config?: CommentThreadConfig;
+    onEdit?: (comment: CommentEntity) => void;
+    onDelete?: (comment: CommentEntity) => void;
+    onReport?: (comment: CommentEntity) => void;
+}
+interface CommentThreadConfig {
+    maxDepth?: number;
+    indentation?: number;
+    dateFormat?: "relative" | "absolute";
+}
 interface CommentComponents {
     /**
      * Root comment composer
@@ -1503,17 +1530,7 @@ interface CommentComponents {
     RepliesToggle?: ComponentType<CommentRepliesToggleProps>;
 }
 
-interface CommentThreadProps {
-    postId: string;
-    currentUser: CommentAuthor;
-    dataSource: CommentDataSource;
-    loading?: boolean;
-    components?: CommentComponents;
-    onEdit?: (comment: CommentEntity) => void;
-    onDelete?: (comment: CommentEntity) => void;
-    onReport?: (comment: CommentEntity) => void;
-}
-declare function CommentThread({ currentUser, dataSource, loading, components, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
+declare function CommentThread({ currentUser, dataSource, loading, components, config, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
 
 declare function formatCommentDate(date: string): string;
 
@@ -1777,4 +1794,4 @@ interface ResolveAppearanceStylesProps {
 }
 declare function resolveAppearanceStyles({ appearance, variant, solid, lite, ghost, }: ResolveAppearanceStylesProps): string;
 
-export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentActionsProps, type CommentAuthor, type CommentComponents, type CommentComposerProps, type CommentContentProps, type CommentDataSource, type CommentEntity, type CommentHeaderProps, type CommentMenuProps, type CommentPermissions, type CommentRepliesToggleProps, CommentThread, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, type ReplyComposerProps, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, formatCommentDate, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };
+export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentActionsProps, type CommentAuthor, type CommentComponents, type CommentComposerProps, type CommentContentProps, type CommentDataSource, type CommentEntity, type CommentHeaderProps, type CommentItemProps, type CommentListProps, type CommentMenuProps, type CommentPermissions, type CommentRepliesToggleProps, CommentThread, type CommentThreadConfig, type CommentThreadProps, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, type ReplyComposerProps, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, formatCommentDate, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };

package/dist/index.d.ts

@@ -1405,33 +1405,12 @@ interface ToggleReactionResult {
     disliked: boolean;
 }
 interface CommentDataSource {
-    /**
-     * Load comments for a resource
-     */
     getComments(): Promise<CommentEntity[]>;
-    /**
-     * Create root comment or reply
-     */
     createComment(input: CreateCommentInput): Promise<CommentEntity>;
-    /**
-     * Update existing comment
-     */
     updateComment(input: UpdateCommentInput): Promise<CommentEntity>;
-    /**
-     * Delete comment
-     */
     deleteComment(commentId: string): Promise<void>;
-    /**
-     * Toggle like
-     */
     toggleLike(commentId: string): Promise<ToggleReactionResult>;
-    /**
-     * Toggle dislike
-     */
     toggleDislike(commentId: string): Promise<ToggleReactionResult>;
-    /**
-     * Optional report functionality
-     */
     reportComment?(commentId: string, reason: string, description?: string): Promise<void>;
 }
 
@@ -1460,11 +1439,19 @@ interface CommentMenuProps {
 }
 interface CommentComposerProps {
     avatar?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    disabled?: boolean;
+    loading?: boolean;
     onSubmit: (content: string) => Promise<void> | void;
 }
 interface ReplyComposerProps {
     avatar?: string;
     username?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    disabled?: boolean;
+    loading?: boolean;
     onSubmit: (content: string) => Promise<void> | void;
 }
 interface CommentRepliesToggleProps {
@@ -1472,6 +1459,46 @@ interface CommentRepliesToggleProps {
     repliesCount: number;
     onToggle: () => void;
 }
+interface CommentItemProps {
+    comment: CommentEntity;
+    depth?: number;
+    config: Required<CommentThreadConfig>;
+    components?: CommentComponents;
+    onLike?: (comment: CommentEntity) => void;
+    onDislike?: (comment: CommentEntity) => void;
+    onReply?: (comment: CommentEntity, content: string) => Promise<void> | void;
+    onEdit?: (comment: CommentEntity) => void;
+    onDelete?: (comment: CommentEntity) => void;
+    onReport?: (comment: CommentEntity) => void;
+}
+interface CommentListProps {
+    comments: CommentEntity[];
+    depth?: number;
+    config: Required<CommentThreadConfig>;
+    components?: CommentComponents;
+    onLike?: (comment: CommentEntity) => void;
+    onDislike?: (comment: CommentEntity) => void;
+    onReply?: (comment: CommentEntity, content: string) => Promise<void> | void;
+    onEdit?: (comment: CommentEntity) => void;
+    onDelete?: (comment: CommentEntity) => void;
+    onReport?: (comment: CommentEntity) => void;
+}
+interface CommentThreadProps {
+    postId: string;
+    currentUser: CommentAuthor;
+    dataSource: CommentDataSource;
+    loading?: boolean;
+    components?: CommentComponents;
+    config?: CommentThreadConfig;
+    onEdit?: (comment: CommentEntity) => void;
+    onDelete?: (comment: CommentEntity) => void;
+    onReport?: (comment: CommentEntity) => void;
+}
+interface CommentThreadConfig {
+    maxDepth?: number;
+    indentation?: number;
+    dateFormat?: "relative" | "absolute";
+}
 interface CommentComponents {
     /**
      * Root comment composer
@@ -1503,17 +1530,7 @@ interface CommentComponents {
     RepliesToggle?: ComponentType<CommentRepliesToggleProps>;
 }
 
-interface CommentThreadProps {
-    postId: string;
-    currentUser: CommentAuthor;
-    dataSource: CommentDataSource;
-    loading?: boolean;
-    components?: CommentComponents;
-    onEdit?: (comment: CommentEntity) => void;
-    onDelete?: (comment: CommentEntity) => void;
-    onReport?: (comment: CommentEntity) => void;
-}
-declare function CommentThread({ currentUser, dataSource, loading, components, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
+declare function CommentThread({ currentUser, dataSource, loading, components, config, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
 
 declare function formatCommentDate(date: string): string;
 
@@ -1777,4 +1794,4 @@ interface ResolveAppearanceStylesProps {
 }
 declare function resolveAppearanceStyles({ appearance, variant, solid, lite, ghost, }: ResolveAppearanceStylesProps): string;
 
-export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentActionsProps, type CommentAuthor, type CommentComponents, type CommentComposerProps, type CommentContentProps, type CommentDataSource, type CommentEntity, type CommentHeaderProps, type CommentMenuProps, type CommentPermissions, type CommentRepliesToggleProps, CommentThread, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, type ReplyComposerProps, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, formatCommentDate, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };
+export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentActionsProps, type CommentAuthor, type CommentComponents, type CommentComposerProps, type CommentContentProps, type CommentDataSource, type CommentEntity, type CommentHeaderProps, type CommentItemProps, type CommentListProps, type CommentMenuProps, type CommentPermissions, type CommentRepliesToggleProps, CommentThread, type CommentThreadConfig, type CommentThreadProps, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, type ReplyComposerProps, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, formatCommentDate, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };

package/dist/index.js

@@ -17511,7 +17511,7 @@ function CommentComposer({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatar, size: "md" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
@@ -17520,7 +17520,7 @@ function CommentComposer({
           placeholder,
           onFocus: () => setFocused(true),
           onChange: (e) => setValue(e.target.value),
-          className: "\n            w-full\n            min-h-[56px]\n            resize-none\n            bg-transparent\n            border-b\n            border-gray-300\n            dark:border-neutral-700\n            outline-none\n            pb-2\n            text-sm\n          "
+          className: "min-h-[56px] w-full resize-none border-b border-gray-300 bg-transparent pb-2 text-sm outline-none dark:border-neutral-700"
         }
       ),
       (focused || value.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
@@ -17560,56 +17560,44 @@ function CommentActions({
   const liked = comment.liked ?? false;
   const disliked = comment.disliked ?? false;
   const canReply = comment.permissions?.canReply ?? true;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "\n        flex\n        items-center\n        gap-5\n        text-sm\n        text-gray-500\n        dark:text-gray-400\n      ",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: onLike,
-            className: `
-          inline-flex
-          items-center
-          gap-1
-          transition-colors
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-5 text-sm text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onLike,
+        className: `
+          inline-flex items-center gap-1 transition-colors
           ${liked ? "text-blue-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
         `,
-            children: [
-              liked ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiSolidLike, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiLike, { size: 18 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: likes })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: onDislike,
-            className: `
-          inline-flex
-          items-center
-          gap-1
-          transition-colors
+        children: [
+          liked ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiSolidLike, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiLike, { size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: likes })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onDislike,
+        className: `
+          inline-flex items-center gap-1 transition-colors
           ${disliked ? "text-red-500" : "hover:text-gray-900 dark:hover:text-gray-100"}
         `,
-            children: [
-              disliked ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiSolidDislike, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiDislike, { size: 18 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: dislikes })
-            ]
-          }
-        ),
-        canReply && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: onReply,
-            className: "\n            font-medium\n            transition-colors\n            hover:text-gray-900\n            dark:hover:text-gray-100\n          ",
-            children: "Reply"
-          }
-        )
-      ]
-    }
-  );
+        children: [
+          disliked ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiSolidDislike, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiDislike, { size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: dislikes })
+        ]
+      }
+    ),
+    canReply && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onReply,
+        className: "font-medium transition-colors hover:text-gray-900 dark:hover:text-gray-100",
+        children: "Reply"
+      }
+    )
+  ] });
 }
 var CommentActions_default = CommentActions;
 function CommentContent({ comment }) {
@@ -17702,63 +17690,57 @@ function CommentMenu({
       {
         type: "button",
         onClick: () => setOpen(!open),
-        className: "\n          text-gray-500\n          hover:text-gray-900\n          dark:hover:text-gray-100\n          transition-colors\n        ",
+        className: "text-gray-500 transition-colors hover:text-gray-900 dark:hover:text-gray-100",
         children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "\n            absolute\n            right-0\n            top-full\n            mt-2\n            min-w-[180px]\n            overflow-hidden\n            rounded-xl\n            border\n            border-gray-200\n            dark:border-neutral-800\n            bg-white\n            dark:bg-neutral-900\n            shadow-xl\n            z-50\n          ",
-        children: [
-          canEdit && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setOpen(false);
-                onEdit?.();
-              },
-              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(bi.BiEdit, {}),
-                "Edit"
-              ]
-            }
-          ),
-          canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setOpen(false);
-                onDelete?.();
-              },
-              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                text-red-500\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(bi.BiTrash, {}),
-                "Delete"
-              ]
-            }
-          ),
-          canReport && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setOpen(false);
-                onReport?.();
-              },
-              className: "\n                w-full\n                flex\n                items-center\n                gap-2\n                px-4\n                py-3\n                text-sm\n                hover:bg-gray-100\n                dark:hover:bg-neutral-800\n              ",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(bi.BiFlag, {}),
-                "Report"
-              ]
-            }
-          )
-        ]
-      }
-    )
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-900", children: [
+      canEdit && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            onEdit?.();
+          },
+          className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(bi.BiEdit, {}),
+            "Edit"
+          ]
+        }
+      ),
+      canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            onDelete?.();
+          },
+          className: "flex w-full items-center gap-2 px-4 py-3 text-sm text-red-500 hover:bg-gray-100 dark:hover:bg-neutral-800",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(bi.BiTrash, {}),
+            "Delete"
+          ]
+        }
+      ),
+      canReport && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            onReport?.();
+          },
+          className: "flex w-full items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(bi.BiFlag, {}),
+            "Report"
+          ]
+        }
+      )
+    ] })
   ] });
 }
 var CommentMenu_default = CommentMenu;
@@ -17776,7 +17758,7 @@ function CommentRepliesToggle({
     {
       type: "button",
       onClick: onToggle,
-      className: "\n        inline-flex\n        items-center\n        gap-1\n        w-fit\n        text-sm\n        font-medium\n        text-blue-500\n        hover:text-blue-400\n        transition-colors\n      ",
+      className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-blue-500 transition-colors hover:text-blue-400",
       children: [
         collapsed ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronUp, { size: 18 }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
@@ -17788,7 +17770,10 @@ var CommentRepliesToggle_default = CommentRepliesToggle;
 function ReplyComposer({
   avatar,
   username,
+  placeholder,
+  submitLabel = "Reply",
   loading,
+  disabled,
   onSubmit
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -17796,20 +17781,18 @@ function ReplyComposer({
     {
       avatar,
       loading,
-      submitLabel: "Reply",
-      placeholder: `Reply to @${username}`,
+      disabled,
+      submitLabel,
+      placeholder: placeholder ?? `Reply to @${username}`,
       onSubmit
     }
   ) });
 }
 var ReplyComposer_default = ReplyComposer;
-
-// src/compositions/comment-thread/constants/comment.constants.ts
-var MAX_COMMENT_DEPTH = 5;
-var COMMENT_INDENTATION = 24;
 function CommentItem({
   comment,
   depth = 0,
+  config,
   components,
   onLike,
   onDislike,
@@ -17820,7 +17803,7 @@ function CommentItem({
 }) {
   const [collapsed, setCollapsed] = React4.useState(false);
   const [isReplying, setIsReplying] = React4.useState(false);
-  const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  const resolvedDepth = Math.min(depth, config.maxDepth);
   const {
     Header: HeaderComponent = CommentHeader_default,
     Content: ContentComponent = CommentContent_default,
@@ -17839,7 +17822,7 @@ function CommentItem({
     {
       className: "flex flex-col gap-4",
       style: {
-        paddingLeft: resolvedDepth * COMMENT_INDENTATION
+        paddingLeft: resolvedDepth * config.indentation
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
@@ -17875,6 +17858,8 @@ function CommentItem({
             {
               avatar: comment.author?.avatar,
               username: comment.author?.username,
+              placeholder: `Reply to @${comment.author?.username}`,
+              submitLabel: "Reply",
               onSubmit: handleReply
             }
           ),
@@ -17899,6 +17884,7 @@ function CommentItem({
               {
                 comments: comment.replies,
                 depth: depth + 1,
+                config,
                 components,
                 onLike,
                 onDislike,
@@ -17918,6 +17904,7 @@ var CommentItem_default = CommentItem;
 function CommentList({
   comments,
   depth = 0,
+  config,
   components,
   onLike,
   onDislike,
@@ -17934,6 +17921,7 @@ function CommentList({
     {
       comment,
       depth,
+      config,
       components,
       onLike,
       onDislike,
@@ -17999,18 +17987,30 @@ function insertReply(comments, parentId, reply) {
     };
   });
 }
+
+// src/compositions/comment-thread/constants/comment.constants.ts
+var DEFAULT_COMMENT_THREAD_CONFIG = {
+  maxDepth: 5,
+  indentation: 24,
+  dateFormat: "relative"
+};
 function CommentThread({
   currentUser,
   dataSource,
   loading = false,
   components,
+  config,
   onEdit,
   onDelete,
   onReport
 }) {
   const [comments, setComments] = React4.useState([]);
   const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
-  const ComposerComponent = components?.ReplyComposer ?? CommentComposer_default;
+  const ComposerComponent = components?.Composer ?? CommentComposer_default;
+  const resolvedConfig = {
+    ...DEFAULT_COMMENT_THREAD_CONFIG,
+    ...config
+  };
   React4.useEffect(() => {
     async function loadComments() {
       try {
@@ -18088,6 +18088,8 @@ function CommentThread({
       ComposerComponent,
       {
         avatar: currentUser.avatar,
+        placeholder: "Add a comment...",
+        submitLabel: "Comment",
         onSubmit: handleCreateComment
       }
     ),
@@ -18096,6 +18098,7 @@ function CommentThread({
       {
         comments,
         components,
+        config: resolvedConfig,
         onLike: handleLike,
         onDislike: handleDislike,
         onReply: handleReply,