@connectycube/react-ui-kit 0.0.11 → 0.0.13

package/configs/dependencies.json

@@ -10,6 +10,9 @@
   "presence": {
     "lucide-react": "latest"
   },
+  "status-indicator": {
+    "@radix-ui/react-tooltip": "latest"
+  },
   "stream-view": {
     "lucide-react": "latest"
   },

package/gen/components/animated-loader.jsx

@@ -1,8 +1,10 @@
 import { LoaderCircle } from 'lucide-react';
 import { cn } from './utils';
 
-function AnimatedLoader({ loading = true, className }) {
-  return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
+function AnimatedLoader({ loading = true, ...props }) {
+  return loading ? (
+    <LoaderCircle strokeWidth={3} {...props} className={cn('animate-spin mx-auto text-gray-600', props?.className)} />
+  ) : null;
 }
 
 AnimatedLoader.displayName = 'AnimatedLoader';

package/gen/components/avatar.jsx

@@ -1,29 +1,36 @@
 import { forwardRef, memo } from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { Avatar as AvatarRoot, Fallback as AvatarFallback, Image as AvatarImage } from '@radix-ui/react-avatar';
 import { PresenceBadge } from './presence';
 import { cn, getInitialsFromName } from './utils';
 
 function AvatarBase(
-  { src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props },
+  { src, name = 'NA', online, presence, className, onlineProps, presenceProps, imageProps, fallbackProps, ...props },
   ref
 ) {
   const initials = getInitialsFromName(name);
 
   return (
-    <AvatarPrimitive.Root
+    <AvatarRoot
       ref={ref}
-      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
       {...props}
+      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
     >
-      <AvatarPrimitive.Image src={src} className={cn('aspect-square size-full object-cover')} />
-      <AvatarPrimitive.Fallback className={cn('bg-muted flex size-full items-center justify-center')}>
+      <AvatarImage {...imageProps} src={src} className={cn('aspect-square size-full object-cover')} />
+      <AvatarFallback {...fallbackProps} className={cn('bg-muted flex size-full items-center justify-center')}>
         {initials}
-      </AvatarPrimitive.Fallback>
+      </AvatarFallback>
       {online && (
-        <div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
+        <div
+          {...onlineProps}
+          className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineProps?.className)}
+        />
       )}
-      <PresenceBadge status={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
-    </AvatarPrimitive.Root>
+      <PresenceBadge
+        status={presence}
+        {...presenceProps}
+        className={cn('absolute -bottom-0.5 -right-1', presenceProps?.className)}
+      />
+    </AvatarRoot>
   );
 }
 

package/gen/components/dismiss-layer.jsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef }
 import { cn } from './utils';
 
 function DismissLayerBase(
-  { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, className, ...props },
+  { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, ...props },
   ref
 ) {
   const innerRef = useRef(null);
@@ -41,11 +41,11 @@ function DismissLayerBase(
   return (
     <div
       ref={innerRef}
-      onClick={handleClickOrTouch}
-      onTouchStart={handleClickOrTouch}
-      className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', className)}
       aria-hidden
       {...props}
+      onClick={handleClickOrTouch}
+      onTouchStart={handleClickOrTouch}
+      className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', props?.className)}
     />
   );
 }

package/gen/components/placeholder-text.jsx

@@ -1,13 +1,17 @@
 import { forwardRef, memo } from 'react';
 import { cn } from './utils';
 
-function PlaceholderTextBase({ title, titles = [], className }, ref) {
+function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
   const rows = typeof title === 'string' ? [title, ...titles] : titles;
 
   return (
-    <div ref={ref} className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', className)}>
+    <div
+      ref={ref}
+      {...props}
+      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}`} className="text-center">
+        <div key={`placeholder-text-${index}`} {...rowProps} className={cn('text-center', rowProps?.className)}>
           {row}
         </div>
       ))}

package/gen/components/presence.jsx

@@ -1,18 +1,23 @@
 import { memo } from 'react';
 import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
-import { capitalize, cn, UserPresence } from './utils';
+import { capitalize, cn } from './utils';
 
-function PresenceBadgeBase({ status, className, ...props }) {
+function PresenceBadgeBase({ status, ...props }) {
   switch (status) {
-    case UserPresence.AVAILABLE || 'available':
-      return <CircleCheck className={cn('rounded-full text-white bg-green-600 size-4.5', className)} {...props} />;
-    case UserPresence.BUSY || 'busy':
-      return <CircleMinus className={cn('rounded-full text-white bg-red-600 size-4.5', className)} {...props} />;
-    case UserPresence.AWAY || 'away':
-      return <Clock className={cn('rounded-full text-white bg-yellow-500 size-4.5', className)} {...props} />;
-    case UserPresence.UNKNOWN || 'unknown':
+    case 'available':
       return (
-        <CircleQuestionMark className={cn('rounded-full text-white bg-gray-500 size-4.5', className)} {...props} />
+        <CircleCheck {...props} className={cn('rounded-full text-white bg-green-600 size-4.5', props?.className)} />
+      );
+    case 'busy':
+      return <CircleMinus {...props} className={cn('rounded-full text-white bg-red-600 size-4.5', props?.className)} />;
+    case 'away':
+      return <Clock {...props} className={cn('rounded-full text-white bg-yellow-500 size-4.5', props?.className)} />;
+    case 'unknown':
+      return (
+        <CircleQuestionMark
+          {...props}
+          className={cn('rounded-full text-white bg-gray-500 size-4.5', props?.className)}
+        />
       );
     default:
       return null;
@@ -23,13 +28,13 @@ const PresenceBadge = memo(PresenceBadgeBase);
 
 PresenceBadge.displayName = 'PresenceBadge';
 
-function PresenceBase({ badge = true, status, label, className, ...props }) {
+function PresenceBase({ badge = true, status, label, badgeProps, labelProps, ...props }) {
   const presence = capitalize(label || status);
 
   return (
-    <div className={cn('flex items-center gap-2', className)} {...props}>
-      {badge && <PresenceBadge status={status} />}
-      <span>{presence}</span>
+    <div {...props} className={cn('flex items-center gap-2', props?.className)}>
+      {badge && <PresenceBadge status={status} {...badgeProps} />}
+      <span {...labelProps}>{presence}</span>
     </div>
   );
 }

package/gen/components/status-indicator.jsx

@@ -0,0 +1,76 @@
+import { forwardRef, memo } from 'react';
+import {
+  Provider as TooltipProvider,
+  Root as TooltipRoot,
+  Trigger as TooltipTrigger,
+  Portal as TooltipPortal,
+  Content as TooltipContent,
+  Arrow as TooltipArrow,
+} from '@radix-ui/react-tooltip';
+import { cn } from './utils';
+
+function StatusIndicatorBase(
+  {
+    status = 'unknown',
+    statusColorConfig = {
+      unknown: 'bg-gray-500 border-gray-600',
+    },
+    statusProps,
+    tooltipProviderProps,
+    tooltipProps,
+    tooltipTriggerProps,
+    tooltipPortalProps,
+    tooltipContentProps,
+    tooltipArrowProps,
+    tooltip,
+    disabled,
+    className,
+    ...props
+  },
+  ref
+) {
+  if (disabled) return null;
+
+  return (
+    <div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
+      <TooltipProvider {...tooltipProviderProps}>
+        <TooltipRoot {...tooltipProps}>
+          <TooltipTrigger asChild {...tooltipTriggerProps}>
+            <div
+              {...statusProps}
+              className={cn(
+                'rounded-full size-4 border border-primary-foreground',
+                statusColorConfig[status],
+                statusProps?.className
+              )}
+            />
+          </TooltipTrigger>
+          <TooltipPortal {...tooltipPortalProps}>
+            <TooltipContent
+              {...tooltipContentProps}
+              className={cn(
+                'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+                tooltipContentProps?.className
+              )}
+            >
+              <span>{tooltip || status || 'unknown'}</span>
+              <TooltipArrow
+                {...tooltipArrowProps}
+                className={cn(
+                  'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
+                  tooltipArrowProps?.className
+                )}
+              />
+            </TooltipContent>
+          </TooltipPortal>
+        </TooltipRoot>
+      </TooltipProvider>
+    </div>
+  );
+}
+
+const StatusIndicator = memo(forwardRef(StatusIndicatorBase));
+
+StatusIndicator.displayName = 'StatusIndicator';
+
+export { StatusIndicator };

package/gen/components/stream-view.jsx

@@ -38,8 +38,8 @@ function StreamViewBase({ id, stream, mirror, className, muted, ...props }, ref)
       autoPlay
       playsInline
       muted={isMuted}
-      className={cn(defaultClassName, mirrorClassName, className)}
       {...props}
+      className={cn(defaultClassName, mirrorClassName, className)}
     />
   );
 }
@@ -77,18 +77,12 @@ function FullscreenStreamViewBase(
     navElement,
     hideIconElement,
     showIconElement,
-    containerClassName,
-    fullscreenButtonClassName,
-    fullscreenButtonIconClassName,
-    pipContainerClassName,
-    pipButtonClassName,
-    pipButtonIconClassName,
-    containerProps,
     fullscreenButtonProps,
     fullscreenButtonIconProps,
-    pipContainerProps,
+    pipProps,
     pipButtonProps,
     pipButtonIconProps,
+    ...props
   },
   ref
 ) {
@@ -146,45 +140,45 @@ function FullscreenStreamViewBase(
   return (
     <div
       ref={innerRef}
-      className={cn('relative flex items-center justify-center size-full', containerClassName)}
-      {...containerProps}
+      {...props}
+      className={cn('relative flex items-center justify-center size-full', props?.className)}
     >
       {element}
       <button
         onClick={toggleFullscreen}
+        {...fullscreenButtonProps}
         className={cn(
           'absolute top-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
-          fullscreenButtonClassName
+          fullscreenButtonProps?.className
         )}
-        {...fullscreenButtonProps}
       >
         {isFullscreen
-          ? hideIconElement || <Minimize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />
-          : showIconElement || <Maximize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />}
+          ? hideIconElement || <Minimize {...fullscreenButtonIconProps} />
+          : showIconElement || <Maximize {...fullscreenButtonIconProps} />}
       </button>
       <div className="absolute size-full p-2 flex flex-col justify-end items-center">
         {isFullscreen && pipElement && (
           <div className="relative size-full flex items-end justify-end">
             {isPictureInPicture && (
               <div
+                {...pipProps}
                 className={cn(
                   'max-w-1/4 max-h-1/4 aspect-4/3 overflow-hidden rounded-md shadow-md shadow-white/25',
-                  pipContainerClassName
+                  pipProps?.className
                 )}
-                {...pipContainerProps}
               >
                 {pipElement}
               </div>
             )}
             <button
               onClick={togglePictureInPicture}
+              {...pipButtonProps}
               className={cn(
                 'absolute bottom-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
-                pipButtonClassName
+                pipButtonProps?.className
               )}
-              {...pipButtonProps}
             >
-              <PictureInPicture2 className={pipButtonIconClassName} {...pipButtonIconProps} />
+              <PictureInPicture2 {...pipButtonIconProps} />
             </button>
           </div>
         )}

package/gen/components/utils.js

@@ -19,12 +19,3 @@ export function getInitialsFromName(name) {
 export function capitalize(str) {
   return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
 }
-
-export let UserPresence = /*#__PURE__*/ (function (UserPresence) {
-  UserPresence['AVAILABLE'] = 'available';
-  UserPresence['BUSY'] = 'busy';
-  UserPresence['AWAY'] = 'away';
-  UserPresence['UNKNOWN'] = 'unknown';
-
-  return UserPresence;
-})({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -61,6 +61,7 @@
   ],
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "clsx": "^2.1.1",
     "execa": "^9.6.0",
     "fs-extra": "^11.3.2",

package/src/components/animated-loader.tsx

@@ -6,8 +6,10 @@ interface AnimatedLoaderProps extends LucideProps {
   loading?: boolean;
 }
 
-function AnimatedLoader({ loading = true, className }: AnimatedLoaderProps) {
-  return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
+function AnimatedLoader({ loading = true, ...props }: AnimatedLoaderProps) {
+  return loading ? (
+    <LoaderCircle strokeWidth={3} {...props} className={cn('animate-spin mx-auto text-gray-600', props?.className)} />
+  ) : null;
 }
 
 AnimatedLoader.displayName = 'AnimatedLoader';

package/src/components/avatar.tsx

@@ -1,40 +1,62 @@
 import type React from 'react';
+import type { AvatarProps as AvatarRootProps, AvatarFallbackProps, AvatarImageProps } from '@radix-ui/react-avatar';
 import type { PresenceStatus } from './presence';
+import type { PresenceBadgeProps } from './presence';
 import { forwardRef, memo } from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { Avatar as AvatarRoot, Fallback as AvatarFallback, Image as AvatarImage } from '@radix-ui/react-avatar';
 import { PresenceBadge } from './presence';
 import { cn, getInitialsFromName } from './utils';
 
-interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root> {
+interface AvatarProps extends AvatarRootProps {
   src?: string;
   name?: string;
   online?: boolean;
   presence?: PresenceStatus;
-  onlineClassName?: string;
-  presenceClassName?: string;
+  onlineProps?: React.ComponentProps<'div'>;
+  presenceProps?: PresenceBadgeProps;
+  imageProps?: AvatarImageProps;
+  fallbackProps?: AvatarFallbackProps;
 }
 
 function AvatarBase(
-  { src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props }: AvatarProps,
+  {
+    src,
+    name = 'NA',
+    online,
+    presence,
+    className,
+    onlineProps,
+    presenceProps,
+    imageProps,
+    fallbackProps,
+    ...props
+  }: AvatarProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   const initials = getInitialsFromName(name);
 
   return (
-    <AvatarPrimitive.Root
+    <AvatarRoot
       ref={ref}
-      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
       {...props}
+      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
     >
-      <AvatarPrimitive.Image src={src} className={cn('aspect-square size-full object-cover')} />
-      <AvatarPrimitive.Fallback className={cn('bg-muted flex size-full items-center justify-center')}>
+      <AvatarImage {...imageProps} src={src} className={cn('aspect-square size-full object-cover')} />
+      <AvatarFallback {...fallbackProps} className={cn('bg-muted flex size-full items-center justify-center')}>
         {initials}
-      </AvatarPrimitive.Fallback>
+      </AvatarFallback>
       {online && (
-        <div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
+        <div
+          {...onlineProps}
+          className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineProps?.className)}
+        />
       )}
-      <PresenceBadge status={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
-    </AvatarPrimitive.Root>
+      <PresenceBadge
+        status={presence}
+        {...presenceProps}
+        className={cn('absolute -bottom-0.5 -right-1', presenceProps?.className)}
+      />
+    </AvatarRoot>
   );
 }
 

package/src/components/connectycube-ui/status-indicator.tsx

@@ -0,0 +1,100 @@
+import type React from 'react';
+import type {
+  TooltipProviderProps,
+  TooltipProps,
+  TooltipTriggerProps,
+  TooltipPortalProps,
+  TooltipContentProps,
+  TooltipArrowProps,
+} from '@radix-ui/react-tooltip';
+import { forwardRef, memo } from 'react';
+import {
+  Provider as TooltipProvider,
+  Root as TooltipRoot,
+  Trigger as TooltipTrigger,
+  Portal as TooltipPortal,
+  Content as TooltipContent,
+  Arrow as TooltipArrow,
+} from '@radix-ui/react-tooltip';
+import { cn } from './utils';
+
+type StatusName = string | 'unknown';
+
+interface StatusIndicatorProps extends React.ComponentProps<'div'> {
+  status?: StatusName;
+  statusColorConfig?: Record<StatusName, string>;
+  statusProps?: React.ComponentProps<'div'>;
+  tooltipProviderProps?: TooltipProviderProps;
+  tooltipProps?: TooltipProps;
+  tooltipTriggerProps?: TooltipTriggerProps;
+  tooltipPortalProps?: TooltipPortalProps;
+  tooltipContentProps?: TooltipContentProps;
+  tooltipArrowProps?: TooltipArrowProps;
+  tooltip?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+function StatusIndicatorBase(
+  {
+    status = 'unknown',
+    statusColorConfig = { unknown: 'bg-gray-500 border-gray-600' },
+    statusProps,
+    tooltipProviderProps,
+    tooltipProps,
+    tooltipTriggerProps,
+    tooltipPortalProps,
+    tooltipContentProps,
+    tooltipArrowProps,
+    tooltip,
+    disabled,
+    className,
+    ...props
+  }: StatusIndicatorProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  if (disabled) return null;
+
+  return (
+    <div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
+      <TooltipProvider {...tooltipProviderProps}>
+        <TooltipRoot {...tooltipProps}>
+          <TooltipTrigger asChild {...tooltipTriggerProps}>
+            <div
+              {...statusProps}
+              className={cn(
+                'rounded-full size-4 border border-primary-foreground',
+                statusColorConfig[status],
+                statusProps?.className
+              )}
+            />
+          </TooltipTrigger>
+          <TooltipPortal {...tooltipPortalProps}>
+            <TooltipContent
+              {...tooltipContentProps}
+              className={cn(
+                'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+                tooltipContentProps?.className
+              )}
+            >
+              <span>{tooltip || status || 'unknown'}</span>
+              <TooltipArrow
+                {...tooltipArrowProps}
+                className={cn(
+                  'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
+                  tooltipArrowProps?.className
+                )}
+              />
+            </TooltipContent>
+          </TooltipPortal>
+        </TooltipRoot>
+      </TooltipProvider>
+    </div>
+  );
+}
+
+const StatusIndicator = memo(forwardRef(StatusIndicatorBase));
+
+StatusIndicator.displayName = 'StatusIndicator';
+
+export { StatusIndicator };

package/src/components/dismiss-layer.tsx

@@ -11,15 +11,7 @@ interface DismissLayerProps extends React.ComponentProps<'div'> {
 }
 
 function DismissLayerBase(
-  {
-    active,
-    onDismiss,
-    disableClickOutside = false,
-    disableEscKeyPress = false,
-    disabled,
-    className,
-    ...props
-  }: DismissLayerProps,
+  { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, ...props }: DismissLayerProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   const innerRef = useRef<HTMLDivElement>(null);
@@ -58,11 +50,11 @@ function DismissLayerBase(
   return (
     <div
       ref={innerRef}
-      onClick={handleClickOrTouch}
-      onTouchStart={handleClickOrTouch}
-      className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', className)}
       aria-hidden
       {...props}
+      onClick={handleClickOrTouch}
+      onTouchStart={handleClickOrTouch}
+      className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', props?.className)}
     />
   );
 }

package/src/components/placeholder-text.tsx

@@ -5,15 +5,23 @@ import { cn } from './utils';
 interface PlaceholderTextProps extends React.ComponentProps<'div'> {
   title?: string;
   titles?: string[];
+  rowProps?: React.ComponentProps<'div'>;
 }
 
-function PlaceholderTextBase({ title, titles = [], className }: PlaceholderTextProps, ref: React.Ref<HTMLDivElement>) {
+function PlaceholderTextBase(
+  { title, titles = [], rowProps, ...props }: PlaceholderTextProps,
+  ref: React.Ref<HTMLDivElement>
+) {
   const rows = typeof title === 'string' ? [title, ...titles] : titles;
 
   return (
-    <div ref={ref} className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', className)}>
+    <div
+      ref={ref}
+      {...props}
+      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}`} className="text-center">
+        <div key={`placeholder-text-${index}`} {...rowProps} className={cn('text-center', rowProps?.className)}>
           {row}
         </div>
       ))}

package/src/components/presence.tsx

@@ -2,31 +2,38 @@ import type React from 'react';
 import type { LucideProps } from 'lucide-react';
 import { memo } from 'react';
 import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
-import { capitalize, cn, UserPresence } from './utils';
+import { capitalize, cn } from './utils';
 
-type PresenceStatus = UserPresence | 'available' | 'busy' | 'away' | 'unknown' | undefined;
-
-interface PresenceBadgeProps extends LucideProps {
-  status: PresenceStatus;
-}
+type PresenceStatus = 'available' | 'busy' | 'away' | 'unknown' | undefined;
 
 interface PresenceProps extends React.ComponentProps<'div'> {
   badge?: boolean;
   status: PresenceStatus;
   label: string;
+  badgeProps?: PresenceBadgeProps;
+  labelProps?: React.ComponentProps<'span'>;
 }
 
-function PresenceBadgeBase({ status, className, ...props }: PresenceBadgeProps) {
+interface PresenceBadgeProps extends LucideProps {
+  status?: PresenceStatus;
+}
+
+function PresenceBadgeBase({ status, ...props }: PresenceBadgeProps) {
   switch (status) {
-    case UserPresence.AVAILABLE || 'available':
-      return <CircleCheck className={cn('rounded-full text-white bg-green-600 size-4.5', className)} {...props} />;
-    case UserPresence.BUSY || 'busy':
-      return <CircleMinus className={cn('rounded-full text-white bg-red-600 size-4.5', className)} {...props} />;
-    case UserPresence.AWAY || 'away':
-      return <Clock className={cn('rounded-full text-white bg-yellow-500 size-4.5', className)} {...props} />;
-    case UserPresence.UNKNOWN || 'unknown':
+    case 'available':
+      return (
+        <CircleCheck {...props} className={cn('rounded-full text-white bg-green-600 size-4.5', props?.className)} />
+      );
+    case 'busy':
+      return <CircleMinus {...props} className={cn('rounded-full text-white bg-red-600 size-4.5', props?.className)} />;
+    case 'away':
+      return <Clock {...props} className={cn('rounded-full text-white bg-yellow-500 size-4.5', props?.className)} />;
+    case 'unknown':
       return (
-        <CircleQuestionMark className={cn('rounded-full text-white bg-gray-500 size-4.5', className)} {...props} />
+        <CircleQuestionMark
+          {...props}
+          className={cn('rounded-full text-white bg-gray-500 size-4.5', props?.className)}
+        />
       );
     default:
       return null;
@@ -37,13 +44,13 @@ const PresenceBadge = memo(PresenceBadgeBase);
 
 PresenceBadge.displayName = 'PresenceBadge';
 
-function PresenceBase({ badge = true, status, label, className, ...props }: PresenceProps) {
+function PresenceBase({ badge = true, status, label, badgeProps, labelProps, ...props }: PresenceProps) {
   const presence = capitalize(label || status);
 
   return (
-    <div className={cn('flex items-center gap-2', className)} {...props}>
-      {badge && <PresenceBadge status={status} />}
-      <span>{presence}</span>
+    <div {...props} className={cn('flex items-center gap-2', props?.className)}>
+      {badge && <PresenceBadge status={status} {...badgeProps} />}
+      <span {...labelProps}>{presence}</span>
     </div>
   );
 }

package/src/components/status-indicator.tsx

@@ -0,0 +1,100 @@
+import type React from 'react';
+import type {
+  TooltipProviderProps,
+  TooltipProps,
+  TooltipTriggerProps,
+  TooltipPortalProps,
+  TooltipContentProps,
+  TooltipArrowProps,
+} from '@radix-ui/react-tooltip';
+import { forwardRef, memo } from 'react';
+import {
+  Provider as TooltipProvider,
+  Root as TooltipRoot,
+  Trigger as TooltipTrigger,
+  Portal as TooltipPortal,
+  Content as TooltipContent,
+  Arrow as TooltipArrow,
+} from '@radix-ui/react-tooltip';
+import { cn } from './utils';
+
+type StatusName = string | 'unknown';
+
+interface StatusIndicatorProps extends React.ComponentProps<'div'> {
+  status?: StatusName;
+  statusColorConfig?: Record<StatusName, string>;
+  statusProps?: React.ComponentProps<'div'>;
+  tooltipProviderProps?: TooltipProviderProps;
+  tooltipProps?: TooltipProps;
+  tooltipTriggerProps?: TooltipTriggerProps;
+  tooltipPortalProps?: TooltipPortalProps;
+  tooltipContentProps?: TooltipContentProps;
+  tooltipArrowProps?: TooltipArrowProps;
+  tooltip?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+function StatusIndicatorBase(
+  {
+    status = 'unknown',
+    statusColorConfig = { unknown: 'bg-gray-500 border-gray-600' },
+    statusProps,
+    tooltipProviderProps,
+    tooltipProps,
+    tooltipTriggerProps,
+    tooltipPortalProps,
+    tooltipContentProps,
+    tooltipArrowProps,
+    tooltip,
+    disabled,
+    className,
+    ...props
+  }: StatusIndicatorProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  if (disabled) return null;
+
+  return (
+    <div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
+      <TooltipProvider {...tooltipProviderProps}>
+        <TooltipRoot {...tooltipProps}>
+          <TooltipTrigger asChild {...tooltipTriggerProps}>
+            <div
+              {...statusProps}
+              className={cn(
+                'rounded-full size-4 border border-primary-foreground',
+                statusColorConfig[status],
+                statusProps?.className
+              )}
+            />
+          </TooltipTrigger>
+          <TooltipPortal {...tooltipPortalProps}>
+            <TooltipContent
+              {...tooltipContentProps}
+              className={cn(
+                'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+                tooltipContentProps?.className
+              )}
+            >
+              <span>{tooltip || status || 'unknown'}</span>
+              <TooltipArrow
+                {...tooltipArrowProps}
+                className={cn(
+                  'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
+                  tooltipArrowProps?.className
+                )}
+              />
+            </TooltipContent>
+          </TooltipPortal>
+        </TooltipRoot>
+      </TooltipProvider>
+    </div>
+  );
+}
+
+const StatusIndicator = memo(forwardRef(StatusIndicatorBase));
+
+StatusIndicator.displayName = 'StatusIndicator';
+
+export { StatusIndicator, type StatusIndicatorProps };

package/src/components/stream-view.tsx

@@ -48,8 +48,8 @@ function StreamViewBase(
       autoPlay
       playsInline
       muted={isMuted}
-      className={cn(defaultClassName, mirrorClassName, className)}
       {...props}
+      className={cn(defaultClassName, mirrorClassName, className)}
     />
   );
 }
@@ -86,16 +86,10 @@ interface FullscreenStreamViewProps extends React.ComponentProps<'div'> {
   navElement?: React.ReactElement<HTMLElement>;
   hideIconElement?: React.ReactElement;
   showIconElement?: React.ReactElement;
-  containerClassName?: string;
-  fullscreenButtonClassName?: string;
-  fullscreenButtonIconClassName?: string;
-  pipContainerClassName?: string;
-  pipButtonClassName?: string;
-  pipButtonIconClassName?: string;
   containerProps?: React.ComponentProps<'div'>;
   fullscreenButtonProps?: React.ComponentProps<'button'>;
   fullscreenButtonIconProps?: LucideProps;
-  pipContainerProps?: React.ComponentProps<'div'>;
+  pipProps?: React.ComponentProps<'div'>;
   pipButtonProps?: React.ComponentProps<'button'>;
   pipButtonIconProps?: LucideProps;
 }
@@ -114,18 +108,12 @@ function FullscreenStreamViewBase(
     navElement,
     hideIconElement,
     showIconElement,
-    containerClassName,
-    fullscreenButtonClassName,
-    fullscreenButtonIconClassName,
-    pipContainerClassName,
-    pipButtonClassName,
-    pipButtonIconClassName,
-    containerProps,
     fullscreenButtonProps,
     fullscreenButtonIconProps,
-    pipContainerProps,
+    pipProps,
     pipButtonProps,
     pipButtonIconProps,
+    ...props
   }: FullscreenStreamViewProps,
   ref: React.Ref<FullscreenStreamViewRef>
 ) {
@@ -183,45 +171,45 @@ function FullscreenStreamViewBase(
   return (
     <div
       ref={innerRef}
-      className={cn('relative flex items-center justify-center size-full', containerClassName)}
-      {...containerProps}
+      {...props}
+      className={cn('relative flex items-center justify-center size-full', props?.className)}
     >
       {element}
       <button
         onClick={toggleFullscreen}
+        {...fullscreenButtonProps}
         className={cn(
           'absolute top-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
-          fullscreenButtonClassName
+          fullscreenButtonProps?.className
         )}
-        {...fullscreenButtonProps}
       >
         {isFullscreen
-          ? hideIconElement || <Minimize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />
-          : showIconElement || <Maximize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />}
+          ? hideIconElement || <Minimize {...fullscreenButtonIconProps} />
+          : showIconElement || <Maximize {...fullscreenButtonIconProps} />}
       </button>
       <div className="absolute size-full p-2 flex flex-col justify-end items-center">
         {isFullscreen && pipElement && (
           <div className="relative size-full flex items-end justify-end">
             {isPictureInPicture && (
               <div
+                {...pipProps}
                 className={cn(
                   'max-w-1/4 max-h-1/4 aspect-4/3 overflow-hidden rounded-md shadow-md shadow-white/25',
-                  pipContainerClassName
+                  pipProps?.className
                 )}
-                {...pipContainerProps}
               >
                 {pipElement}
               </div>
             )}
             <button
               onClick={togglePictureInPicture}
+              {...pipButtonProps}
               className={cn(
                 'absolute bottom-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
-                pipButtonClassName
+                pipButtonProps?.className
               )}
-              {...pipButtonProps}
             >
-              <PictureInPicture2 className={pipButtonIconClassName} {...pipButtonIconProps} />
+              <PictureInPicture2 {...pipButtonIconProps} />
             </button>
           </div>
         )}

package/src/components/utils.ts

@@ -19,10 +19,3 @@ export function getInitialsFromName(name?: string): string {
 export function capitalize(str?: string): string {
   return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
 }
-
-export enum UserPresence {
-  AVAILABLE = 'available',
-  BUSY = 'busy',
-  AWAY = 'away',
-  UNKNOWN = 'unknown',
-}