@connectycube/react-ui-kit 0.0.19 → 0.0.22

package/src/components/quick-actions.tsx

@@ -0,0 +1,74 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { cn } from './utils';
+
+interface QuickActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+  actions?: string[];
+  onAction?: (action: string) => void;
+  containerProps?: React.ComponentProps<'div'>;
+  titleProps?: React.ComponentProps<'h2'>;
+  descriptionProps?: React.ComponentProps<'span'>;
+  actionProps?: React.ComponentProps<'div'>;
+}
+
+function QuickActionsBase(
+  {
+    title,
+    description,
+    actions = [],
+    onAction = () => {},
+    containerProps,
+    titleProps,
+    descriptionProps,
+    actionProps,
+    ...props
+  }: QuickActionsProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  if (!actions.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      {...containerProps}
+      className={cn('flex flex-col h-full overflow-y-auto py-2', containerProps?.className)}
+    >
+      <div className="grow" />
+      <div {...props} className={cn('grid gap-2 m-4', props?.className)}>
+        {title && (
+          <h2 {...titleProps} className={cn('font-medium text-foreground text-lg', titleProps?.className)}>
+            {title}
+          </h2>
+        )}
+        {description && (
+          <span {...descriptionProps} className={cn('text-sm text-muted-foreground mb-4', descriptionProps?.className)}>
+            {description}
+          </span>
+        )}
+        {actions.map((action, index) => (
+          <div
+            key={index}
+            {...actionProps}
+            className={cn(
+              'w-full border p-2 rounded-md wrap-break-word cursor-pointer overflow-hidden text-ellipsis bg-ring/5 hover:bg-ring/20 transition-colors duration-200 ease-out',
+              actionProps?.className
+            )}
+            onClick={() => onAction(action)}
+          >
+            {action}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const QuickActions = forwardRef<HTMLDivElement, QuickActionsProps>(QuickActionsBase);
+
+QuickActions.displayName = 'QuickActions';
+
+export { QuickActions, type QuickActionsProps };

package/src/components/search.tsx

@@ -69,7 +69,7 @@ function SearchBase(
           onClick={handleOnCancel}
           {...cancelIconProps}
           className={cn(
-            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-in-out',
+            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-out',
             value.length > 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-75 pointer-events-none',
             cancelIconProps?.className
           )}

package/src/components/status-call.tsx

@@ -0,0 +1,23 @@
+import { Phone, PhoneIncoming, PhoneMissed, PhoneOutgoing, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+interface StatusCallProps extends LucideProps {
+  fromMe?: boolean;
+  status?: 'reject' | 'notAnswer' | 'hungUp' | 'cancel' | undefined;
+}
+
+const StatusCall: React.FC<StatusCallProps> = ({ fromMe, status, ...props }) => {
+  const CallIcon =
+    status === 'hungUp' ? Phone : fromMe ? PhoneOutgoing : status === 'reject' ? PhoneIncoming : PhoneMissed;
+
+  return (
+    <CallIcon
+      {...props}
+      className={cn('size-4', status === 'hungUp' ? 'text-green-500' : 'text-red-500', props?.className)}
+    />
+  );
+};
+
+StatusCall.displayName = 'StatusCall';
+
+export { StatusCall, type StatusCallProps };

package/src/components/stream-view.tsx

@@ -18,7 +18,7 @@ function StreamViewBase(
   const defaultClassName = 'size-full object-contain';
   const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
 
-  useImperativeHandle(ref, () => innerRef.current!);
+  useImperativeHandle(ref, () => innerRef.current || ({} as HTMLVideoElement), []);
 
   useEffect(() => {
     if (innerRef.current && stream) {
@@ -146,13 +146,13 @@ function FullscreenStreamViewBase(
 
   useImperativeHandle(
     ref,
-    () =>
-      Object.assign(innerRef.current!, {
-        isFullscreen,
-        isPictureInPicture,
-        toggleFullscreen,
-        togglePictureInPicture,
-      }),
+    () => ({
+      ...(innerRef.current || ({} as HTMLDivElement)),
+      isFullscreen,
+      isPictureInPicture,
+      toggleFullscreen,
+      togglePictureInPicture,
+    }),
     [isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture]
   );
 

package/src/components/switch.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { cn } from './utils';

package/src/index.ts

@@ -1,3 +1,5 @@
+export { AlertDialog, type AlertDialogProps } from './components/alert-dialog';
+
 export {
   Attachment,
   AttachmentLink,
@@ -21,8 +23,23 @@ export { Badge, type BadgeProps } from './components/badge';
 
 export { Button, type ButtonProps } from './components/button';
 
+export {
+  ChatBubbleMessage,
+  ChatBubbleInfo,
+  type ChatBubbleMessageProps,
+  type ChatBubbleInfoProps,
+} from './components/chat-bubble';
+
+export { ChatInput, type ChatInputProps } from './components/chat-input';
+
+export { ChatList, type ChatListProps, type ChatListHandle } from './components/chat-list';
+
+export { Checkbox, type CheckboxProps } from './components/checkbox';
+
 export { DialogItem, type DialogItemProps } from './components/dialog-item';
 
+export { DialogsList, type DialogsListProps } from './components/dialogs-list';
+
 export { DismissLayer, type DismissLayerProps } from './components/dismiss-layer';
 
 export {
@@ -52,10 +69,14 @@ export {
   type PresenceBadgeProps,
 } from './components/presence';
 
+export { QuickActions, type QuickActionsProps } from './components/quick-actions';
+
 export { Search, type SearchProps } from './components/search';
 
 export { Spinner, type SpinnerProps } from './components/spinner';
 
+export { StatusCall, type StatusCallProps } from './components/status-call';
+
 export { StatusIndicator, type StatusName, type StatusIndicatorProps } from './components/status-indicator';
 
 export { StatusSent, type StatusSentProps } from './components/status-sent';