@connectycube/react-ui-kit 0.0.14 → 0.0.16

package/src/components/button.tsx

@@ -0,0 +1,60 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  leftElement?: React.ReactElement;
+  rightElement?: React.ReactElement;
+}
+
+function ButtonBase(
+  { asChild = false, variant, size, className, leftElement, rightElement, children, ...props }: ButtonProps,
+  ref?: React.ForwardedRef<HTMLButtonElement>
+) {
+  const Comp = asChild ? SlotPrimitive.Root : 'button';
+
+  return (
+    <Comp ref={ref} {...props} className={cn(buttonVariants({ variant, size, className }))}>
+      {leftElement}
+      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+      {rightElement}
+    </Comp>
+  );
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(ButtonBase);
+
+Button.displayName = 'Button';
+
+export { Button, type ButtonProps };

package/src/components/dismiss-layer.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
+import { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import { cn } from './utils';
 
 interface DismissLayerProps extends React.ComponentProps<'div'> {
@@ -12,7 +12,7 @@ interface DismissLayerProps extends React.ComponentProps<'div'> {
 
 function DismissLayerBase(
   { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, ...props }: DismissLayerProps,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const innerRef = useRef<HTMLDivElement>(null);
 
@@ -54,12 +54,12 @@ function DismissLayerBase(
       {...props}
       onClick={handleClickOrTouch}
       onTouchStart={handleClickOrTouch}
-      className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', props?.className)}
+      className={cn('fixed top-0 left-0 size-full bg-black/20', props?.className)}
     />
   );
 }
 
-const DismissLayer = memo(forwardRef<HTMLDivElement, DismissLayerProps>(DismissLayerBase));
+const DismissLayer = forwardRef<HTMLDivElement, DismissLayerProps>(DismissLayerBase);
 
 DismissLayer.displayName = 'DismissLayer';
 

package/src/components/placeholder-text.tsx

@@ -1,5 +1,5 @@
-import type React from 'react';
-import { forwardRef, memo } from 'react';
+import * as React from 'react';
+import { forwardRef } from 'react';
 import { cn } from './utils';
 
 interface PlaceholderTextProps extends React.ComponentProps<'div'> {
@@ -29,7 +29,7 @@ function PlaceholderTextBase(
   );
 }
 
-const PlaceholderText = memo(forwardRef(PlaceholderTextBase));
+const PlaceholderText = forwardRef(PlaceholderTextBase);
 
 PlaceholderText.displayName = 'PlaceholderText';
 

package/src/components/presence.tsx

@@ -1,7 +1,4 @@
 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 } from './utils';
 
 type PresenceStatus = 'available' | 'busy' | 'away' | 'unknown' | undefined;
@@ -14,37 +11,76 @@ interface PresenceProps extends React.ComponentProps<'div'> {
   labelProps?: React.ComponentProps<'span'>;
 }
 
-interface PresenceBadgeProps extends LucideProps {
+interface PresenceBadgeProps extends React.ComponentProps<'svg'> {
   status?: PresenceStatus;
 }
 
-function PresenceBadgeBase({ status, ...props }: PresenceBadgeProps) {
+function PresenceBadge({ status, ...props }: PresenceBadgeProps) {
   switch (status) {
     case 'available':
       return (
-        <CircleCheck {...props} className={cn('rounded-full text-white bg-green-600 size-4.5', props?.className)} />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-green-600 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+        </svg>
       );
     case 'busy':
-      return <CircleMinus {...props} className={cn('rounded-full text-white bg-red-600 size-4.5', props?.className)} />;
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-red-600 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
+        </svg>
+      );
     case 'away':
-      return <Clock {...props} className={cn('rounded-full text-white bg-yellow-500 size-4.5', props?.className)} />;
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+          {...props}
+          className={cn('rounded-full size-4.5 text-yellow-500 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
+        </svg>
+      );
     case 'unknown':
       return (
-        <CircleQuestionMark
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
           {...props}
-          className={cn('rounded-full text-white bg-gray-500 size-4.5', props?.className)}
-        />
+          className={cn('rounded-full size-4.5 text-gray-500 bg-white', props?.className)}
+        >
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
+        </svg>
       );
     default:
       return null;
   }
 }
 
-const PresenceBadge = memo(PresenceBadgeBase);
-
 PresenceBadge.displayName = 'PresenceBadge';
 
-function PresenceBase({ badge = true, status, label, badgeProps, labelProps, ...props }: PresenceProps) {
+function Presence({ badge = true, status, label, badgeProps, labelProps, ...props }: PresenceProps) {
   const presence = capitalize(label || status);
 
   return (
@@ -55,8 +91,6 @@ function PresenceBase({ badge = true, status, label, badgeProps, labelProps, ...
   );
 }
 
-const Presence = memo(PresenceBase);
-
 Presence.displayName = 'Presence';
 
 export { Presence, PresenceBadge, type PresenceStatus, type PresenceProps, type PresenceBadgeProps };

package/src/components/status-indicator.tsx

@@ -1,21 +1,6 @@
 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 { forwardRef } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from './utils';
 
 type StatusName = string | 'unknown';
@@ -24,12 +9,12 @@ 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;
+  tooltipProviderProps?: TooltipPrimitive.TooltipProviderProps;
+  tooltipProps?: TooltipPrimitive.TooltipProps;
+  tooltipTriggerProps?: TooltipPrimitive.TooltipTriggerProps;
+  tooltipPortalProps?: TooltipPrimitive.TooltipPortalProps;
+  tooltipContentProps?: TooltipPrimitive.TooltipContentProps;
+  tooltipArrowProps?: TooltipPrimitive.TooltipArrowProps;
   tooltip?: string;
   disabled?: boolean;
   className?: string;
@@ -51,15 +36,15 @@ function StatusIndicatorBase(
     className,
     ...props
   }: StatusIndicatorProps,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.ForwardedRef<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}>
+      <TooltipPrimitive.Provider {...tooltipProviderProps}>
+        <TooltipPrimitive.Root {...tooltipProps}>
+          <TooltipPrimitive.Trigger asChild {...tooltipTriggerProps}>
             <div
               {...statusProps}
               className={cn(
@@ -68,9 +53,9 @@ function StatusIndicatorBase(
                 statusProps?.className
               )}
             />
-          </TooltipTrigger>
-          <TooltipPortal {...tooltipPortalProps}>
-            <TooltipContent
+          </TooltipPrimitive.Trigger>
+          <TooltipPrimitive.Portal {...tooltipPortalProps}>
+            <TooltipPrimitive.Content
               {...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',
@@ -78,23 +63,23 @@ function StatusIndicatorBase(
               )}
             >
               <span>{tooltip || status || 'unknown'}</span>
-              <TooltipArrow
+              <TooltipPrimitive.Arrow
                 {...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>
+            </TooltipPrimitive.Content>
+          </TooltipPrimitive.Portal>
+        </TooltipPrimitive.Root>
+      </TooltipPrimitive.Provider>
     </div>
   );
 }
 
-const StatusIndicator = memo(forwardRef(StatusIndicatorBase));
+const StatusIndicator = forwardRef(StatusIndicatorBase);
 
 StatusIndicator.displayName = 'StatusIndicator';
 
-export { StatusIndicator, type StatusIndicatorProps };
+export { StatusIndicator, type StatusName, type StatusIndicatorProps };

package/src/components/stream-view.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
-import type { LucideProps } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
+import { Maximize, Minimize, PictureInPicture2, type LucideProps } from 'lucide-react';
 import { cn, getRandomString } from './utils';
 
 interface StreamViewProps extends React.ComponentProps<'video'> {

package/dist/types/components/connectycube-ui/stream-view.d.ts

@@ -1,26 +0,0 @@
-import type React from 'react';
-export type StreamViewProps = {
-    id?: string;
-    stream?: MediaStream;
-    mirror?: boolean;
-} & React.VideoHTMLAttributes<HTMLVideoElement>;
-export type StreamViewRef = {
-    id: string;
-    element: HTMLVideoElement | null;
-};
-export declare const StreamView: React.ForwardRefExoticComponent<{
-    id?: string;
-    stream?: MediaStream;
-    mirror?: boolean;
-} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
-export declare const LocalStreamView: React.ForwardRefExoticComponent<{
-    id?: string;
-    stream?: MediaStream;
-    mirror?: boolean;
-} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
-export declare const RemoteStreamView: React.ForwardRefExoticComponent<{
-    id?: string;
-    stream?: MediaStream;
-    mirror?: boolean;
-} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
-//# sourceMappingURL=stream-view.d.ts.map

package/dist/types/components/connectycube-ui/stream-view.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stream-view.d.ts","sourceRoot":"","sources":["../../../../src/components/connectycube-ui/stream-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,UAAU;SAVhB,MAAM;aACF,WAAW;aACX,OAAO;qFAuDjB,CAAC;AAEF,eAAO,MAAM,eAAe;SA3DrB,MAAM;aACF,WAAW;aACX,OAAO;qFA8DhB,CAAC;AAEH,eAAO,MAAM,gBAAgB;SAlEtB,MAAM;aACF,WAAW;aACX,OAAO;qFAqEhB,CAAC"}

package/dist/types/components/connectycube-ui/utils.d.ts

@@ -1,4 +0,0 @@
-import { type ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
-export declare function getRandomString(length?: number): string;
-//# sourceMappingURL=utils.d.ts.map

package/dist/types/components/connectycube-ui/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/connectycube-ui/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAI,GAAG,MAAM,CAElD"}

package/dist/types/lib/constants.d.ts

@@ -1,5 +0,0 @@
-export declare enum ActiveMedia {
-    USER = 0,
-    DISPLAY = 1
-}
-//# sourceMappingURL=constants.d.ts.map

package/dist/types/lib/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,IAAI,IAAI;IACR,OAAO,IAAI;CACZ"}

package/dist/types/lib/utils.d.ts

@@ -1,4 +0,0 @@
-import { type ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
-export declare function getRandomString(length?: number): string;
-//# sourceMappingURL=utils.d.ts.map

package/dist/types/lib/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAI,GAAG,MAAM,CAElD"}

package/dist/types/templates/local-stream.d.ts

@@ -1,22 +0,0 @@
-import type React from 'react';
-import { type ClassValue } from 'clsx';
-import { ActiveMedia } from '../lib/constants';
-export type LocalStreamProps = {
-    id?: string;
-    stream?: MediaStream;
-    activeMedia?: ActiveMedia | 'user' | 'display';
-    mirror?: boolean;
-    className?: ClassValue;
-} & React.VideoHTMLAttributes<HTMLVideoElement>;
-export type LocalStreamRef = {
-    id: string;
-    element: HTMLVideoElement | null;
-};
-export declare const LocalStream: React.ForwardRefExoticComponent<{
-    id?: string;
-    stream?: MediaStream;
-    activeMedia?: ActiveMedia | "user" | "display";
-    mirror?: boolean;
-    className?: ClassValue;
-} & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<LocalStreamRef>>;
-//# sourceMappingURL=local-stream.d.ts.map

package/dist/types/templates/local-stream.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"local-stream.d.ts","sourceRoot":"","sources":["../../../src/templates/local-stream.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,WAAW;SAZjB,MAAM;aACF,WAAW;kBACN,WAAW,GAAG,MAAM,GAAG,SAAS;aACrC,OAAO;gBACJ,UAAU;sFAyDvB,CAAC"}

package/dist/types/templates/remote-stream.d.ts

@@ -1,18 +0,0 @@
-import { type ClassValue } from 'clsx';
-export type RemoteStreamProps = {
-    id?: string;
-    stream?: MediaStream;
-    mirror?: boolean;
-    className?: ClassValue;
-} & React.VideoHTMLAttributes<HTMLVideoElement>;
-export type RemoteStreamRef = {
-    id: string;
-    element: HTMLVideoElement | null;
-};
-export declare const RemoteStream: import("react").ForwardRefExoticComponent<{
-    id?: string;
-    stream?: MediaStream;
-    mirror?: boolean;
-    className?: ClassValue;
-} & import("react").VideoHTMLAttributes<HTMLVideoElement> & import("react").RefAttributes<RemoteStreamRef>>;
-//# sourceMappingURL=remote-stream.d.ts.map

package/dist/types/templates/remote-stream.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"remote-stream.d.ts","sourceRoot":"","sources":["../../../src/templates/remote-stream.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAGvC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,YAAY;SAXlB,MAAM;aACF,WAAW;aACX,OAAO;gBACJ,UAAU;2GAuDvB,CAAC"}

package/src/components/connectycube-ui/animated-loader.jsx

@@ -1,10 +0,0 @@
-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;
-}
-
-AnimatedLoader.displayName = 'AnimatedLoader';
-
-export { AnimatedLoader };

package/src/components/connectycube-ui/animated-loader.tsx

@@ -1,15 +0,0 @@
-import type { LucideProps } from 'lucide-react';
-import { LoaderCircle } from 'lucide-react';
-import { cn } from './utils';
-
-interface AnimatedLoaderProps extends LucideProps {
-  loading?: boolean;
-}
-
-function AnimatedLoader({ loading = true, className }: AnimatedLoaderProps) {
-  return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
-}
-
-AnimatedLoader.displayName = 'AnimatedLoader';
-
-export { AnimatedLoader, type AnimatedLoaderProps };

package/src/components/connectycube-ui/avatar.jsx

@@ -1,34 +0,0 @@
-import { forwardRef, memo } from 'react';
-import * as AvatarPrimitive 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 },
-  ref
-) {
-  const initials = getInitialsFromName(name);
-
-  return (
-    <AvatarPrimitive.Root
-      ref={ref}
-      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
-      {...props}
-    >
-      <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')}>
-        {initials}
-      </AvatarPrimitive.Fallback>
-      {online && (
-        <div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
-      )}
-      <PresenceBadge presence={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
-    </AvatarPrimitive.Root>
-  );
-}
-
-const Avatar = memo(forwardRef(AvatarBase));
-
-Avatar.displayName = 'Avatar';
-
-export { Avatar };

package/src/components/connectycube-ui/avatar.tsx

@@ -1,45 +0,0 @@
-import type React from 'react';
-import type { PresenceStatus } from './presence';
-import { forwardRef, memo } from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { PresenceBadge } from './presence';
-import { cn, getInitialsFromName } from './utils';
-
-interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root> {
-  src?: string;
-  name?: string;
-  online?: boolean;
-  presence?: PresenceStatus;
-  onlineClassName?: string;
-  presenceClassName?: string;
-}
-
-function AvatarBase(
-  { src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props }: AvatarProps,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const initials = getInitialsFromName(name);
-
-  return (
-    <AvatarPrimitive.Root
-      ref={ref}
-      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
-      {...props}
-    >
-      <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')}>
-        {initials}
-      </AvatarPrimitive.Fallback>
-      {online && (
-        <div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
-      )}
-      <PresenceBadge presence={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
-    </AvatarPrimitive.Root>
-  );
-}
-
-const Avatar = memo(forwardRef<HTMLDivElement, AvatarProps>(AvatarBase));
-
-Avatar.displayName = 'Avatar';
-
-export { Avatar, type AvatarProps };

package/src/components/connectycube-ui/dismiss-layer.jsx

@@ -1,57 +0,0 @@
-import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
-import { cn } from './utils';
-
-function DismissLayerBase(
-  { active, onDismiss, disableClickOutside = false, disableEscKeyPress = false, disabled, className, ...props },
-  ref
-) {
-  const innerRef = useRef(null);
-
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const handleClickOrTouch = useCallback(
-    (e) => {
-      if (!disableClickOutside && active && e.target === innerRef.current) {
-        onDismiss();
-      }
-    },
-    [disableClickOutside, active, onDismiss]
-  );
-  const handleKeyEvent = useCallback(
-    (ev) => {
-      if (!disableEscKeyPress && active && ev.key === 'Escape') {
-        onDismiss();
-      }
-    },
-    [disableEscKeyPress, active, onDismiss]
-  );
-
-  useEffect(() => {
-    if (!disableEscKeyPress && active) {
-      document.addEventListener('keydown', handleKeyEvent);
-
-      return () => document.removeEventListener('keydown', handleKeyEvent);
-    }
-
-    return;
-  }, [disableEscKeyPress, active, handleKeyEvent]);
-
-  if (disabled || !active) return null;
-
-  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}
-    />
-  );
-}
-
-const DismissLayer = memo(forwardRef(DismissLayerBase));
-
-DismissLayer.displayName = 'DismissLayer';
-
-export { DismissLayer };