@connectycube/react-ui-kit 0.0.19 → 0.0.22

package/src/components/connectycube-ui/chat-input.tsx

@@ -0,0 +1,174 @@
+import type React from 'react';
+import { ChangeEvent, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import TextareaAutosize, { type TextareaAutosizeProps, type TextareaHeightChangeMeta } from 'react-textarea-autosize';
+import { SendHorizontal, type LucideProps } from 'lucide-react';
+import { Label, type LabelProps } from './label';
+import { cn } from './utils';
+
+interface ChatInputSendProps extends LabelProps {
+  onSend: () => void;
+  iconElement?: React.ReactNode;
+  iconProps?: LucideProps;
+}
+
+interface ChatInputProps extends TextareaAutosizeProps, React.ComponentProps<'textarea'> {
+  key?: string;
+  children?: React.ReactNode;
+  pending?: boolean;
+  draft?: string;
+  onSend?: (value?: string) => void;
+  onDraft?: (value?: string) => void;
+  onTyping?: (typing?: boolean) => void;
+  onHeightGrow?: (data: { height: number; shift: number }) => void;
+  hideChatInputSend?: boolean;
+  chatInputSendProps?: ChatInputSendProps;
+  containerProps?: React.ComponentProps<'div'>;
+}
+
+function ChatInputSendBase(
+  { onSend = () => {}, iconElement, iconProps, ...props }: ChatInputSendProps,
+  ref: React.ForwardedRef<HTMLLabelElement>
+) {
+  return (
+    <Label
+      ref={ref}
+      {...props}
+      onClick={onSend}
+      className={cn('group rounded-full py-2 pl-2.5 pr-1.5 cursor-pointer bg-ring/90 hover:bg-ring', props?.className)}
+    >
+      {iconElement || (
+        <SendHorizontal
+          {...iconProps}
+          className={cn(
+            'size-7 text-background group-hover:scale-110 transition-all duration-200 ease-out',
+            iconProps?.className
+          )}
+        />
+      )}
+    </Label>
+  );
+}
+
+const ChatInputSend = forwardRef<HTMLLabelElement, ChatInputSendProps>(ChatInputSendBase);
+
+ChatInputSend.displayName = 'ChatInputSend';
+
+function ChatInputBase(
+  {
+    key,
+    pending = false,
+    draft,
+    onSend = () => {},
+    onDraft = () => {},
+    onTyping = () => {},
+    onHeightGrow = () => {},
+    hideChatInputSend = false,
+    chatInputSendProps,
+    containerProps,
+    children,
+    ...props
+  }: ChatInputProps,
+  ref: React.ForwardedRef<HTMLTextAreaElement>
+) {
+  const [value, setValue] = useState<string>();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaHeightRef = useRef<number>(0);
+  const typingRef = useRef<boolean>(false);
+  const typingTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const handleStopTyping = () => {
+    typingRef.current = false;
+    onTyping(false);
+
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = undefined;
+    }
+  };
+  const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const { data } = event.nativeEvent as InputEvent;
+
+    setValue(event.target.value);
+
+    if (!typingRef.current && typeof data === 'string' && data.length > 0) {
+      typingRef.current = true;
+      onTyping(true);
+    }
+
+    clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(handleStopTyping, 5000);
+  };
+  const handleOnSend = async () => {
+    handleStopTyping();
+
+    if (typeof value === 'string' && value.length > 0) {
+      onSend(value.trim());
+      setValue('');
+      textareaRef.current?.focus();
+    }
+  };
+  const handleOnHeightChange = (height: number, meta: TextareaHeightChangeMeta) => {
+    if (!height && !meta) return;
+
+    if (height !== textareaHeightRef.current) {
+      const shift = height > textareaHeightRef.current ? meta.rowHeight : -meta.rowHeight;
+
+      onHeightGrow({ height, shift });
+    }
+
+    textareaHeightRef.current = height;
+  };
+  const handleOnKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && event.shiftKey === false) {
+      event.preventDefault();
+      props.onKeyDown?.(event);
+      handleOnSend();
+    }
+  };
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    handleStopTyping();
+    queueMicrotask(() => setValue(draft));
+    textarea?.focus();
+
+    return () => {
+      onDraft(textarea?.value);
+    };
+  }, [key]);
+
+  useImperativeHandle(ref, () => textareaRef.current!, [textareaRef]);
+
+  return (
+    <div {...containerProps} className={cn('flex items-end gap-2', containerProps?.className)}>
+      <TextareaAutosize
+        key={key}
+        ref={textareaRef}
+        autoFocus
+        minRows={1}
+        maxRows={8}
+        {...props}
+        value={value}
+        onChange={handleOnChange}
+        onKeyDown={handleOnKeyDown}
+        onHeightChange={handleOnHeightChange}
+        className={cn(
+          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-11 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          'resize-none py-2.5',
+          pending && 'pointer-events-none bg-muted-foreground border-ring ring-ring/50 animate-pulse',
+          props?.className
+        )}
+      />
+      {!hideChatInputSend && <ChatInputSend onSend={handleOnSend} {...chatInputSendProps} />}
+      {children}
+    </div>
+  );
+}
+
+const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(ChatInputBase);
+
+ChatInput.displayName = 'ChatInput';
+
+export { ChatInput };

package/src/components/connectycube-ui/chat-message.tsx

@@ -0,0 +1,138 @@
+import type React from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Attachment, type AttachmentProps } from './attachment';
+import { Avatar, type AvatarProps } from './avatar';
+import { FormattedDate, type FormattedDateProps } from './formatted-date';
+import { LinkifyText, type LinkifyTextProps } from './linkify-text';
+import { LinkPreview, type LinkPreviewProps } from './link-preview';
+import { StatusSent, type StatusSentProps } from './status-sent';
+import { cn } from './utils';
+
+interface ChatMessageProps extends React.ComponentProps<'div'> {
+  isLast: boolean;
+  fromMe: boolean;
+  sameSenderAbove: boolean;
+  title?: string;
+  senderName?: string;
+  senderAvatar?: string;
+  attachmentElement?: React.ReactNode;
+  linkifyTextElement?: React.ReactNode;
+  linkPreviewElement?: React.ReactNode;
+  onView?: () => void;
+  avatarProps?: AvatarProps;
+  bubbleProps?: React.ComponentProps<'div'>;
+  titleProps?: React.ComponentProps<'span'>;
+  formattedDateProps?: FormattedDateProps;
+  statusSentProps?: StatusSentProps;
+  attachmentProps?: AttachmentProps;
+  linkifyTextProps?: LinkifyTextProps;
+  linkPreviewProps?: LinkPreviewProps;
+}
+
+function ChatMessageBase(
+  {
+    isLast,
+    fromMe,
+    sameSenderAbove,
+    title,
+    senderName,
+    senderAvatar,
+    attachmentElement,
+    linkifyTextElement,
+    linkPreviewElement,
+    onView = () => {},
+    avatarProps,
+    bubbleProps,
+    titleProps,
+    formattedDateProps,
+    statusSentProps,
+    attachmentProps,
+    linkifyTextProps,
+    linkPreviewProps,
+    children,
+    ...props
+  }: ChatMessageProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const [setRef, inView] = useInView();
+  const messageRef = useRef<HTMLDivElement>(null);
+  const setRefs = useCallback(
+    (node: HTMLDivElement) => {
+      messageRef.current = node;
+      setRef(node);
+    },
+    [setRef]
+  );
+  const hasAvatar = Boolean((avatarProps || senderAvatar) && !sameSenderAbove);
+  const hasAvatarMargin = Boolean((avatarProps || senderAvatar) && sameSenderAbove);
+  const hasThinMarginTop = hasAvatarMargin || Boolean(fromMe && sameSenderAbove);
+
+  useEffect(() => {
+    if (inView) {
+      onView();
+    }
+  }, [inView, onView]);
+
+  useImperativeHandle(ref, () => messageRef.current!, []);
+
+  return (
+    <div
+      ref={setRefs}
+      {...props}
+      className={cn(
+        `flex relative text-left whitespace-pre-wrap`,
+        fromMe ? 'self-end flex-row-reverse ml-12' : `self-start mr-12`,
+        isLast && 'mb-2',
+        hasThinMarginTop ? 'mt-1' : 'mt-2',
+        inView && 'view',
+        props?.className
+      )}
+    >
+      {hasAvatar && (
+        <Avatar
+          name={senderName}
+          src={senderAvatar}
+          imageProps={{ className: 'bg-ring/30' }}
+          fallbackProps={{ className: 'bg-ring/30' }}
+          {...avatarProps}
+          className={cn('mt-1 mr-1', avatarProps?.className)}
+        />
+      )}
+
+      <div
+        className={cn(
+          'relative flex flex-col min-w-42 max-w-120 rounded-xl px-2 pt-2 pb-6',
+          fromMe ? 'bg-blue-200' : 'bg-gray-200',
+          hasAvatarMargin && 'ml-9',
+          bubbleProps?.className
+        )}
+      >
+        {(title || senderName) && (
+          <span
+            {...titleProps}
+            className={cn(
+              'font-semibold',
+              title && 'mb-1 py-1.5 text-xs text-muted-foreground italic border-b',
+              titleProps?.className
+            )}
+          >
+            {title || senderName}
+          </span>
+        )}
+        {children}
+        {attachmentElement || (attachmentProps ? <Attachment {...attachmentProps} /> : null)}
+        {linkifyTextElement || (linkifyTextProps ? <LinkifyText {...linkifyTextProps} /> : null)}
+        {linkPreviewElement || (linkPreviewProps ? <LinkPreview {...linkPreviewProps} /> : null)}
+        <div className="absolute bottom-1 right-2 flex items-center gap-1 italic">
+          <FormattedDate distanceToNow {...formattedDateProps} />
+          <StatusSent {...statusSentProps} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ChatMessage = memo(forwardRef<HTMLDivElement, ChatMessageProps>(ChatMessageBase));
+
+export { ChatMessage, type ChatMessageProps };

package/src/components/connectycube-ui/link-preview.tsx

@@ -0,0 +1,149 @@
+import type React from 'react';
+import { forwardRef, memo, useCallback, useState } from 'react';
+import { Globe, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+const decodeHtmlEntities = (text: string) => {
+  if (text.length === 0) {
+    return text;
+  }
+
+  const element = document.createElement('div');
+
+  element.innerHTML = text;
+
+  return element.textContent.trim();
+};
+
+interface LinkPreviewProps extends React.ComponentProps<'a'> {
+  thin?: boolean;
+  title?: string;
+  description?: string;
+  icon?: React.ComponentProps<'img'>['src'];
+  image?: React.ComponentProps<'img'>['src'];
+  onReady?: () => void;
+  iconFallbackElement?: React.ReactElement;
+  titleContainerProps?: React.ComponentProps<'div'>;
+  iconProps?: React.ComponentProps<'img'>;
+  iconFallbackProps?: LucideProps;
+  titleProps?: React.ComponentProps<'span'>;
+  descriptionProps?: React.ComponentProps<'div'>;
+  imageContainerProps?: React.ComponentProps<'div'>;
+  imageProps?: React.ComponentProps<'img'>;
+}
+
+function LinkPreviewBase(
+  {
+    thin = false,
+    title = '',
+    description = '',
+    icon,
+    iconFallbackElement,
+    image,
+    onReady = () => {},
+    titleContainerProps,
+    iconProps,
+    iconFallbackProps,
+    titleProps,
+    descriptionProps,
+    imageContainerProps,
+    imageProps,
+    ...props
+  }: LinkPreviewProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  const [iconSrc, setIconSrc] = useState<React.ComponentProps<'img'>['src']>(icon);
+  const [imageSrc, setImageSrc] = useState<React.ComponentProps<'img'>['src']>(image);
+  const handleOnLoad = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      imageProps?.onLoad?.(event);
+      onReady();
+    },
+    [onReady, imageProps]
+  );
+  const handleIconOnError = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      iconProps?.onError?.(event);
+      setIconSrc(undefined);
+    },
+    [iconProps]
+  );
+  const handleImageOnError = useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+      imageProps?.onError?.(event);
+      setImageSrc(undefined);
+    },
+    [imageProps]
+  );
+
+  return (
+    <a
+      ref={ref}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      className={cn(
+        'transition-color duration-300 ease-out',
+        'grid items-start gap-2 p-2 mt-1 overflow-hidden rounded border-l-4 border-l-ring bg-white hover:bg-ring/20',
+        thin ? 'grid-cols-3' : 'grid-cols-1',
+        props?.className
+      )}
+    >
+      <div
+        {...titleContainerProps}
+        className={cn('flex items-start gap-2', thin ? 'col-span-3' : 'col-span-1', titleContainerProps?.className)}
+      >
+        {iconSrc ? (
+          <img
+            alt="icon"
+            src={iconSrc}
+            {...iconProps}
+            onError={handleIconOnError}
+            className={cn('size-5', iconProps?.className)}
+          />
+        ) : (
+          iconFallbackElement || <Globe {...iconFallbackProps} className={cn('size-5', iconFallbackProps?.className)} />
+        )}
+        <span
+          {...titleProps}
+          className={cn('text-sm font-bold', thin ? 'line-clamp-1' : 'line-clamp-2', titleProps?.className)}
+        >
+          {decodeHtmlEntities(title)}
+        </span>
+      </div>
+      {description && (
+        <span
+          {...descriptionProps}
+          className={cn(
+            'text-sm line-clamp-5',
+            thin ? (imageSrc ? 'col-span-2' : 'col-span-3') : 'col-span-1',
+            descriptionProps?.className
+          )}
+        >
+          {decodeHtmlEntities(description)}
+        </span>
+      )}
+      {imageSrc && (
+        <div
+          {...imageContainerProps}
+          className={cn('flex items-center justify-center', imageContainerProps?.className)}
+        >
+          <img
+            alt="banner"
+            src={imageSrc}
+            {...imageProps}
+            onLoad={handleOnLoad}
+            onError={handleImageOnError}
+            className={cn('rounded max-w-full object-contain', thin ? 'max-h-25' : 'max-h-60', imageProps?.className)}
+          />
+        </div>
+      )}
+    </a>
+  );
+}
+
+const LinkPreview = memo(forwardRef<HTMLAnchorElement, LinkPreviewProps>(LinkPreviewBase));
+
+LinkPreview.displayName = 'LinkPreview';
+
+export { LinkPreview, type LinkPreviewProps };

package/src/components/dialog-item.tsx

@@ -99,7 +99,7 @@ function DialogItemBase(
       onClick={onSelect}
       className={cn(
         'flex items-start gap-2 px-2 flex-1 cursor-pointer',
-        'transition-colors duration-200 ease-linear',
+        'transition-colors duration-200 ease-out',
         `${selected ? 'border-l-[0.25em] pl-1 border-l-ring bg-ring/20' : 'hover:bg-ring/5'}`,
         props?.className
       )}
@@ -137,7 +137,10 @@ function DialogItemBase(
         <div {...footerProps} className={cn('flex items-start justify-between gap-1', footerProps?.className)}>
           <span
             {...lastMessageProps}
-            className={cn('text-sm text-left text-muted-foreground line-clamp-2', lastMessageProps?.className)}
+            className={cn(
+              'text-sm text-left text-muted-foreground break-all line-clamp-2',
+              lastMessageProps?.className
+            )}
           >
             {typingStatusText ||
               (draft ? (

package/src/components/dialogs-list.tsx

@@ -0,0 +1,84 @@
+import type React from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { VList, type VListHandle, type VListProps } from 'virtua';
+import { PlaceholderText } from './placeholder-text';
+
+interface DialogsListProps extends VListProps {
+  pending?: boolean;
+  pendingListLength?: number;
+  offsetToReach?: number;
+  placeholderVisible?: boolean;
+  placeholderTitles?: string[];
+  onScrollStartReached?: () => void;
+  onScrollEndReached?: () => void;
+}
+
+const PendingItem = () => (
+  <div className="flex flex-row gap-2 mx-2 border-b">
+    <div className="size-13 my-2 rounded-full bg-muted animate-pulse" />
+    <div className="flex-1 text-muted">
+      <div className="flex flex-row items-center justify-between h-6">
+        <div className="w-2/3 h-4 rounded-full bg-muted animate-pulse" />
+        <div className="w-1/6 h-3.5 rounded-full bg-muted animate-pulse" />
+      </div>
+      <div className="flex flex-col items-start justify-around h-10">
+        <div className="w-7/8 h-3.5 rounded-full bg-muted animate-pulse" />
+        <div className="w-5/6 h-3.5 rounded-full bg-muted animate-pulse" />
+      </div>
+    </div>
+  </div>
+);
+
+function DialogsListBase(
+  {
+    children,
+    pending,
+    pendingListLength = 5,
+    offsetToReach = 50,
+    placeholderVisible,
+    placeholderTitles = ['No dialogs yet.', 'Start a conversation!'],
+    onScrollStartReached,
+    onScrollEndReached,
+    ...props
+  }: DialogsListProps,
+  ref: React.ForwardedRef<VListHandle>
+) {
+  const vListRef = useRef<VListHandle>(null);
+  const skeletonList = Array.from({ length: pendingListLength }).map((_, i) => (
+    <PendingItem key={`pending_dialog_item_${i}`} />
+  ));
+  const handleOnScroll = async (offset: number) => {
+    props.onScroll?.(offset);
+
+    if (!vListRef.current) return;
+
+    if (typeof onScrollStartReached === 'function' && offset < offsetToReach) {
+      onScrollStartReached();
+    }
+
+    if (
+      typeof onScrollEndReached === 'function' &&
+      vListRef.current.viewportSize + offset + offsetToReach > vListRef.current.scrollSize
+    ) {
+      onScrollEndReached();
+    }
+  };
+
+  useImperativeHandle(ref, () => vListRef.current || ({} as VListHandle), []);
+
+  if (placeholderVisible) {
+    return <PlaceholderText titles={placeholderTitles} className="text-base text-muted" />;
+  }
+
+  return (
+    <VList ref={vListRef} onScroll={handleOnScroll} className="size-full overflow-y-scroll" {...props}>
+      {pending ? skeletonList : children}
+    </VList>
+  );
+}
+
+const DialogsList = forwardRef<VListHandle, DialogsListProps>(DialogsListBase);
+
+DialogsList.displayName = 'DialogsList';
+
+export { DialogsList, type DialogsListProps };

package/src/components/dismiss-layer.tsx

@@ -16,7 +16,7 @@ function DismissLayerBase(
 ) {
   const innerRef = useRef<HTMLDivElement>(null);
 
-  useImperativeHandle(ref, () => innerRef.current!, []);
+  useImperativeHandle(ref, () => innerRef.current || ({} as HTMLDivElement), []);
 
   const handleClickOrTouch = useCallback(
     (e: React.MouseEvent | React.TouchEvent) => {

package/src/components/file-picker.tsx

@@ -58,7 +58,7 @@ const handleFiles = (
 };
 
 interface FilePickerInputProps extends React.ComponentProps<'input'> {
-  onSelectFile: (files: File[]) => void;
+  onSelectFile?: (files: File[]) => void;
   onInvalidFile?: () => void;
   iconElement?: React.ReactNode;
   labelProps?: LabelProps;
@@ -97,7 +97,7 @@ function FilePickerInputBase(
       {...labelProps}
       htmlFor="file-uploader"
       className={cn(
-        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-in-out cursor-pointer',
+        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-out cursor-pointer',
         labelProps?.className
       )}
     >
@@ -105,7 +105,7 @@ function FilePickerInputBase(
         <Paperclip
           {...iconProps}
           className={cn(
-            'text-foreground group-hover:scale-110 transition-all duration-200 ease-in-out',
+            'text-foreground group-hover:scale-110 transition-all duration-200 ease-out',
             iconProps?.className
           )}
         />

package/src/components/linkify-text.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { Opts } from 'linkifyjs';
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import Linkify from 'linkify-react';
 import { cn } from './utils';
 
@@ -8,16 +8,32 @@ const DEFAULT_LINKIFY_OPTIONS: Opts = {
   target: '_blank',
   rel: 'noopener noreferrer',
 };
+const DEFAULT_SKELETON_LINES_CLASS_NAMES = ['w-full', 'w-3/4', 'w-1/2'];
 
 interface LinkifyTextProps extends React.ComponentProps<'p'> {
-  text: string;
+  text?: string;
+  pending?: boolean;
+  onReady?: () => void;
   linkifyProps?: Opts;
+  skeletonContainerProps?: React.ComponentProps<'div'>;
+  skeletonLineProps?: React.ComponentProps<'span'>;
+  skeletonLinesClassNames?: string[];
 }
 
 function LinkifyTextBase(
-  { text, linkifyProps, ...props }: LinkifyTextProps,
+  {
+    text,
+    pending = false,
+    onReady = () => {},
+    linkifyProps,
+    skeletonContainerProps,
+    skeletonLineProps,
+    skeletonLinesClassNames = DEFAULT_SKELETON_LINES_CLASS_NAMES,
+    ...props
+  }: LinkifyTextProps,
   ref: React.ForwardedRef<HTMLParagraphElement>
 ) {
+  const pendingRef = useRef(pending);
   const options = useMemo(
     () => ({
       ...DEFAULT_LINKIFY_OPTIONS,
@@ -27,6 +43,31 @@ function LinkifyTextBase(
     [linkifyProps]
   );
 
+  useEffect(() => {
+    if (pendingRef.current && !pending) {
+      onReady();
+    }
+
+    pendingRef.current = pending;
+  }, [pending, onReady]);
+
+  if (pending) {
+    return (
+      <div
+        {...skeletonContainerProps}
+        className={cn('flex items-start flex-col size-full', skeletonContainerProps?.className)}
+      >
+        {skeletonLinesClassNames.map((width, index) => (
+          <span
+            {...skeletonLineProps}
+            key={`${width}_${index}`}
+            className={cn('bg-muted-foreground animate-pulse rounded-md my-1 h-4', skeletonLineProps?.className, width)}
+          ></span>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <p ref={ref} {...props} className={cn('wrap-break-word text-base', props?.className)}>
       <Linkify options={options}>{text}</Linkify>

package/src/components/placeholder-text.tsx

@@ -21,7 +21,11 @@ function PlaceholderTextBase(
       className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', props?.className)}
     >
       {rows.map((row, index) => (
-        <div key={`placeholder-text-${index}`} {...rowProps} className={cn('text-center', rowProps?.className)}>
+        <div
+          key={`placeholder-text-${index}`}
+          {...rowProps}
+          className={cn('text-center text-muted-foreground', rowProps?.className)}
+        >
           {row}
         </div>
       ))}