@connectycube/react-ui-kit 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/configs/dependencies.json +1 -3
  2. package/dist/index.cjs +27 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +27 -1
  5. package/dist/index.js.map +1 -1
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/types/components/animated-loader.d.ts +10 -0
  8. package/dist/types/components/animated-loader.d.ts.map +1 -0
  9. package/dist/types/components/avatar.d.ts +15 -0
  10. package/dist/types/components/avatar.d.ts.map +1 -0
  11. package/dist/types/components/dismiss-layer.d.ts +10 -0
  12. package/dist/types/components/dismiss-layer.d.ts.map +1 -0
  13. package/dist/types/components/placeholder-text.d.ts +8 -0
  14. package/dist/types/components/placeholder-text.d.ts.map +1 -0
  15. package/dist/types/components/presence.d.ts +17 -0
  16. package/dist/types/components/presence.d.ts.map +1 -0
  17. package/dist/types/components/status-indicator.d.ts +19 -0
  18. package/dist/types/components/status-indicator.d.ts.map +1 -0
  19. package/dist/types/components/stream-view.d.ts +28 -24
  20. package/dist/types/components/stream-view.d.ts.map +1 -1
  21. package/dist/types/components/utils.d.ts +2 -0
  22. package/dist/types/components/utils.d.ts.map +1 -1
  23. package/dist/types/index.d.ts +4 -2
  24. package/dist/types/index.d.ts.map +1 -1
  25. package/gen/components/avatar.jsx +13 -10
  26. package/gen/components/dismiss-layer.jsx +1 -1
  27. package/gen/components/presence.jsx +47 -7
  28. package/gen/components/status-indicator.jsx +12 -19
  29. package/package.json +18 -16
  30. package/src/components/animated-loader.tsx +1 -2
  31. package/src/components/avatar.tsx +17 -18
  32. package/src/components/dismiss-layer.tsx +1 -2
  33. package/src/components/placeholder-text.tsx +0 -1
  34. package/src/components/presence.tsx +48 -10
  35. package/src/components/status-indicator.tsx +19 -35
  36. package/src/components/stream-view.tsx +1 -3
  37. package/dist/types/components/connectycube-ui/stream-view.d.ts +0 -26
  38. package/dist/types/components/connectycube-ui/stream-view.d.ts.map +0 -1
  39. package/dist/types/components/connectycube-ui/utils.d.ts +0 -4
  40. package/dist/types/components/connectycube-ui/utils.d.ts.map +0 -1
  41. package/dist/types/lib/constants.d.ts +0 -5
  42. package/dist/types/lib/constants.d.ts.map +0 -1
  43. package/dist/types/lib/utils.d.ts +0 -4
  44. package/dist/types/lib/utils.d.ts.map +0 -1
  45. package/dist/types/templates/local-stream.d.ts +0 -22
  46. package/dist/types/templates/local-stream.d.ts.map +0 -1
  47. package/dist/types/templates/remote-stream.d.ts +0 -18
  48. package/dist/types/templates/remote-stream.d.ts.map +0 -1
  49. package/src/components/connectycube-ui/animated-loader.jsx +0 -10
  50. package/src/components/connectycube-ui/animated-loader.tsx +0 -15
  51. package/src/components/connectycube-ui/avatar.jsx +0 -34
  52. package/src/components/connectycube-ui/avatar.tsx +0 -45
  53. package/src/components/connectycube-ui/dismiss-layer.jsx +0 -57
  54. package/src/components/connectycube-ui/dismiss-layer.tsx +0 -74
  55. package/src/components/connectycube-ui/placeholder-text.jsx +0 -22
  56. package/src/components/connectycube-ui/placeholder-text.tsx +0 -28
  57. package/src/components/connectycube-ui/presence.jsx +0 -41
  58. package/src/components/connectycube-ui/presence.tsx +0 -55
  59. package/src/components/connectycube-ui/status-indicator.tsx +0 -100
  60. package/src/components/connectycube-ui/stream-view.jsx +0 -201
  61. package/src/components/connectycube-ui/stream-view.tsx +0 -246
  62. package/src/components/connectycube-ui/utils.js +0 -30
  63. package/src/components/connectycube-ui/utils.ts +0 -28
@@ -1,12 +1,5 @@
1
1
  import { forwardRef, memo } from 'react';
2
- import {
3
- Provider as TooltipProvider,
4
- Root as TooltipRoot,
5
- Trigger as TooltipTrigger,
6
- Portal as TooltipPortal,
7
- Content as TooltipContent,
8
- Arrow as TooltipArrow,
9
- } from '@radix-ui/react-tooltip';
2
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
10
3
  import { cn } from './utils';
11
4
 
12
5
  function StatusIndicatorBase(
@@ -33,9 +26,9 @@ function StatusIndicatorBase(
33
26
 
34
27
  return (
35
28
  <div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
36
- <TooltipProvider {...tooltipProviderProps}>
37
- <TooltipRoot {...tooltipProps}>
38
- <TooltipTrigger asChild {...tooltipTriggerProps}>
29
+ <TooltipPrimitive.Provider {...tooltipProviderProps}>
30
+ <TooltipPrimitive.Root {...tooltipProps}>
31
+ <TooltipPrimitive.Trigger asChild {...tooltipTriggerProps}>
39
32
  <div
40
33
  {...statusProps}
41
34
  className={cn(
@@ -44,9 +37,9 @@ function StatusIndicatorBase(
44
37
  statusProps?.className
45
38
  )}
46
39
  />
47
- </TooltipTrigger>
48
- <TooltipPortal {...tooltipPortalProps}>
49
- <TooltipContent
40
+ </TooltipPrimitive.Trigger>
41
+ <TooltipPrimitive.Portal {...tooltipPortalProps}>
42
+ <TooltipPrimitive.Content
50
43
  {...tooltipContentProps}
51
44
  className={cn(
52
45
  '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',
@@ -54,17 +47,17 @@ function StatusIndicatorBase(
54
47
  )}
55
48
  >
56
49
  <span>{tooltip || status || 'unknown'}</span>
57
- <TooltipArrow
50
+ <TooltipPrimitive.Arrow
58
51
  {...tooltipArrowProps}
59
52
  className={cn(
60
53
  'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
61
54
  tooltipArrowProps?.className
62
55
  )}
63
56
  />
64
- </TooltipContent>
65
- </TooltipPortal>
66
- </TooltipRoot>
67
- </TooltipProvider>
57
+ </TooltipPrimitive.Content>
58
+ </TooltipPrimitive.Portal>
59
+ </TooltipPrimitive.Root>
60
+ </TooltipPrimitive.Provider>
68
61
  </div>
69
62
  );
70
63
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@connectycube/react-ui-kit",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "description": "Simple React UI Kit generator with TSX/JSX",
5
5
  "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
6
6
  "bugs": {
@@ -41,14 +41,16 @@
41
41
  "gen"
42
42
  ],
43
43
  "scripts": {
44
- "build": "rollup -c",
44
+ "build": "npm run clean:dist && rollup -c",
45
45
  "format": "node ./scripts/format.js",
46
46
  "transform": "node ./scripts/transform.js",
47
+ "generate": "npm run clean:gen && npm run transform && eslint --fix . && npm run format",
47
48
  "version": "node ./scripts/bump-version.js",
48
49
  "version:patch": "npm run version patch",
49
50
  "version:minor": "npm run version minor",
50
51
  "version:major": "npm run version major",
51
- "generate": "npm run transform && eslint --fix . && npm run format",
52
+ "clean:dist": "rm -rf dist",
53
+ "clean:gen": "rm -rf gen",
52
54
  "lint": "eslint ."
53
55
  },
54
56
  "keywords": [
@@ -74,27 +76,27 @@
74
76
  "react-dom": ">=18"
75
77
  },
76
78
  "devDependencies": {
77
- "@babel/core": "^7.28.4",
78
- "@babel/preset-typescript": "^7.27.1",
79
- "@eslint/js": "^9.38.0",
80
- "@rollup/plugin-commonjs": "^28.0.8",
79
+ "@babel/core": "^7.28.5",
80
+ "@babel/preset-typescript": "^7.28.5",
81
+ "@eslint/js": "^9.39.1",
82
+ "@rollup/plugin-commonjs": "^29.0.0",
81
83
  "@rollup/plugin-node-resolve": "^16.0.3",
82
84
  "@rollup/plugin-terser": "^0.4.4",
83
- "@rollup/plugin-typescript": "^12.2.0",
84
- "@stylistic/eslint-plugin": "^5.5.0",
85
- "@types/node": "^24.9.1",
86
- "@types/react": "^19.2.2",
87
- "eslint": "^9.38.0",
88
- "eslint-plugin-react-hooks": "^7.0.0",
85
+ "@rollup/plugin-typescript": "^12.3.0",
86
+ "@stylistic/eslint-plugin": "^5.6.1",
87
+ "@types/node": "^24.10.1",
88
+ "@types/react": "^19.2.7",
89
+ "eslint": "^9.39.1",
90
+ "eslint-plugin-react-hooks": "^7.0.1",
89
91
  "eslint-plugin-react-refresh": "^0.4.24",
90
92
  "fast-glob": "^3.3.3",
91
- "globals": "^16.4.0",
93
+ "globals": "^16.5.0",
92
94
  "prettier": "^3.6.2",
93
- "rollup": "^4.52.5",
95
+ "rollup": "^4.53.3",
94
96
  "rollup-plugin-peer-deps-external": "^2.2.4",
95
97
  "tslib": "^2.8.1",
96
98
  "typescript": "^5.9.3",
97
- "typescript-eslint": "^8.46.2"
99
+ "typescript-eslint": "^8.48.0"
98
100
  },
99
101
  "engines": {
100
102
  "node": ">=18"
@@ -1,5 +1,4 @@
1
- import type { LucideProps } from 'lucide-react';
2
- import { LoaderCircle } from 'lucide-react';
1
+ import { LoaderCircle, type LucideProps } from 'lucide-react';
3
2
  import { cn } from './utils';
4
3
 
5
4
  interface AnimatedLoaderProps extends LucideProps {
@@ -1,21 +1,17 @@
1
- import type React from 'react';
2
- import type { AvatarProps as AvatarRootProps, AvatarFallbackProps, AvatarImageProps } from '@radix-ui/react-avatar';
3
- import type { PresenceStatus } from './presence';
4
- import type { PresenceBadgeProps } from './presence';
5
1
  import { forwardRef, memo } from 'react';
6
- import { Avatar as AvatarRoot, Fallback as AvatarFallback, Image as AvatarImage } from '@radix-ui/react-avatar';
7
- import { PresenceBadge } from './presence';
2
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
3
+ import { PresenceBadge, type PresenceStatus, type PresenceBadgeProps } from './presence';
8
4
  import { cn, getInitialsFromName } from './utils';
9
5
 
10
- interface AvatarProps extends AvatarRootProps {
6
+ interface AvatarProps extends AvatarPrimitive.AvatarProps {
11
7
  src?: string;
12
8
  name?: string;
13
9
  online?: boolean;
14
10
  presence?: PresenceStatus;
15
11
  onlineProps?: React.ComponentProps<'div'>;
16
12
  presenceProps?: PresenceBadgeProps;
17
- imageProps?: AvatarImageProps;
18
- fallbackProps?: AvatarFallbackProps;
13
+ imageProps?: AvatarPrimitive.AvatarImageProps;
14
+ fallbackProps?: AvatarPrimitive.AvatarFallbackProps;
19
15
  }
20
16
 
21
17
  function AvatarBase(
@@ -36,15 +32,18 @@ function AvatarBase(
36
32
  const initials = getInitialsFromName(name);
37
33
 
38
34
  return (
39
- <AvatarRoot
40
- ref={ref}
41
- {...props}
42
- className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
43
- >
44
- <AvatarImage {...imageProps} src={src} className={cn('aspect-square size-full object-cover')} />
45
- <AvatarFallback {...fallbackProps} className={cn('bg-muted flex size-full items-center justify-center')}>
35
+ <AvatarPrimitive.Root ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
36
+ <AvatarPrimitive.Image
37
+ {...imageProps}
38
+ src={src}
39
+ className={cn('aspect-square size-full rounded-full overflow-hidden object-cover', imageProps?.className)}
40
+ />
41
+ <AvatarPrimitive.Fallback
42
+ {...fallbackProps}
43
+ className={cn('bg-muted flex size-full items-center justify-center', fallbackProps?.className)}
44
+ >
46
45
  {initials}
47
- </AvatarFallback>
46
+ </AvatarPrimitive.Fallback>
48
47
  {online && (
49
48
  <div
50
49
  {...onlineProps}
@@ -56,7 +55,7 @@ function AvatarBase(
56
55
  {...presenceProps}
57
56
  className={cn('absolute -bottom-0.5 -right-1', presenceProps?.className)}
58
57
  />
59
- </AvatarRoot>
58
+ </AvatarPrimitive.Root>
60
59
  );
61
60
  }
62
61
 
@@ -1,4 +1,3 @@
1
- import type React from 'react';
2
1
  import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
3
2
  import { cn } from './utils';
4
3
 
@@ -54,7 +53,7 @@ function DismissLayerBase(
54
53
  {...props}
55
54
  onClick={handleClickOrTouch}
56
55
  onTouchStart={handleClickOrTouch}
57
- className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', props?.className)}
56
+ className={cn('fixed top-0 left-0 size-full bg-black/20', props?.className)}
58
57
  />
59
58
  );
60
59
  }
@@ -1,4 +1,3 @@
1
- import type React from 'react';
2
1
  import { forwardRef, memo } from 'react';
3
2
  import { cn } from './utils';
4
3
 
@@ -1,7 +1,4 @@
1
- import type React from 'react';
2
- import type { LucideProps } from 'lucide-react';
3
1
  import { memo } from 'react';
4
- import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
5
2
  import { capitalize, cn } from './utils';
6
3
 
7
4
  type PresenceStatus = 'available' | 'busy' | 'away' | 'unknown' | undefined;
@@ -14,7 +11,7 @@ interface PresenceProps extends React.ComponentProps<'div'> {
14
11
  labelProps?: React.ComponentProps<'span'>;
15
12
  }
16
13
 
17
- interface PresenceBadgeProps extends LucideProps {
14
+ interface PresenceBadgeProps extends React.ComponentProps<'svg'> {
18
15
  status?: PresenceStatus;
19
16
  }
20
17
 
@@ -22,18 +19,59 @@ function PresenceBadgeBase({ status, ...props }: PresenceBadgeProps) {
22
19
  switch (status) {
23
20
  case 'available':
24
21
  return (
25
- <CircleCheck {...props} className={cn('rounded-full text-white bg-green-600 size-4.5', props?.className)} />
22
+ <svg
23
+ xmlns="http://www.w3.org/2000/svg"
24
+ width="16"
25
+ height="16"
26
+ fill="currentColor"
27
+ viewBox="0 0 16 16"
28
+ {...props}
29
+ className={cn('rounded-full size-4.5 text-green-600 bg-white', props?.className)}
30
+ >
31
+ <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" />
32
+ </svg>
26
33
  );
27
34
  case 'busy':
28
- return <CircleMinus {...props} className={cn('rounded-full text-white bg-red-600 size-4.5', props?.className)} />;
35
+ return (
36
+ <svg
37
+ xmlns="http://www.w3.org/2000/svg"
38
+ width="16"
39
+ height="16"
40
+ fill="currentColor"
41
+ viewBox="0 0 16 16"
42
+ {...props}
43
+ className={cn('rounded-full size-4.5 text-red-600 bg-white', props?.className)}
44
+ >
45
+ <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" />
46
+ </svg>
47
+ );
29
48
  case 'away':
30
- return <Clock {...props} className={cn('rounded-full text-white bg-yellow-500 size-4.5', props?.className)} />;
49
+ return (
50
+ <svg
51
+ xmlns="http://www.w3.org/2000/svg"
52
+ width="16"
53
+ height="16"
54
+ fill="currentColor"
55
+ viewBox="0 0 16 16"
56
+ {...props}
57
+ className={cn('rounded-full size-4.5 text-yellow-500 bg-white', props?.className)}
58
+ >
59
+ <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" />
60
+ </svg>
61
+ );
31
62
  case 'unknown':
32
63
  return (
33
- <CircleQuestionMark
64
+ <svg
65
+ xmlns="http://www.w3.org/2000/svg"
66
+ width="16"
67
+ height="16"
68
+ fill="currentColor"
69
+ viewBox="0 0 16 16"
34
70
  {...props}
35
- className={cn('rounded-full text-white bg-gray-500 size-4.5', props?.className)}
36
- />
71
+ className={cn('rounded-full size-4.5 text-gray-500 bg-white', props?.className)}
72
+ >
73
+ <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" />
74
+ </svg>
37
75
  );
38
76
  default:
39
77
  return null;
@@ -1,21 +1,5 @@
1
- import type React from 'react';
2
- import type {
3
- TooltipProviderProps,
4
- TooltipProps,
5
- TooltipTriggerProps,
6
- TooltipPortalProps,
7
- TooltipContentProps,
8
- TooltipArrowProps,
9
- } from '@radix-ui/react-tooltip';
10
1
  import { forwardRef, memo } from 'react';
11
- import {
12
- Provider as TooltipProvider,
13
- Root as TooltipRoot,
14
- Trigger as TooltipTrigger,
15
- Portal as TooltipPortal,
16
- Content as TooltipContent,
17
- Arrow as TooltipArrow,
18
- } from '@radix-ui/react-tooltip';
2
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
19
3
  import { cn } from './utils';
20
4
 
21
5
  type StatusName = string | 'unknown';
@@ -24,12 +8,12 @@ interface StatusIndicatorProps extends React.ComponentProps<'div'> {
24
8
  status?: StatusName;
25
9
  statusColorConfig?: Record<StatusName, string>;
26
10
  statusProps?: React.ComponentProps<'div'>;
27
- tooltipProviderProps?: TooltipProviderProps;
28
- tooltipProps?: TooltipProps;
29
- tooltipTriggerProps?: TooltipTriggerProps;
30
- tooltipPortalProps?: TooltipPortalProps;
31
- tooltipContentProps?: TooltipContentProps;
32
- tooltipArrowProps?: TooltipArrowProps;
11
+ tooltipProviderProps?: TooltipPrimitive.TooltipProviderProps;
12
+ tooltipProps?: TooltipPrimitive.TooltipProps;
13
+ tooltipTriggerProps?: TooltipPrimitive.TooltipTriggerProps;
14
+ tooltipPortalProps?: TooltipPrimitive.TooltipPortalProps;
15
+ tooltipContentProps?: TooltipPrimitive.TooltipContentProps;
16
+ tooltipArrowProps?: TooltipPrimitive.TooltipArrowProps;
33
17
  tooltip?: string;
34
18
  disabled?: boolean;
35
19
  className?: string;
@@ -57,9 +41,9 @@ function StatusIndicatorBase(
57
41
 
58
42
  return (
59
43
  <div ref={ref} {...props} className={cn('absolute top-0 left-0', className)}>
60
- <TooltipProvider {...tooltipProviderProps}>
61
- <TooltipRoot {...tooltipProps}>
62
- <TooltipTrigger asChild {...tooltipTriggerProps}>
44
+ <TooltipPrimitive.Provider {...tooltipProviderProps}>
45
+ <TooltipPrimitive.Root {...tooltipProps}>
46
+ <TooltipPrimitive.Trigger asChild {...tooltipTriggerProps}>
63
47
  <div
64
48
  {...statusProps}
65
49
  className={cn(
@@ -68,9 +52,9 @@ function StatusIndicatorBase(
68
52
  statusProps?.className
69
53
  )}
70
54
  />
71
- </TooltipTrigger>
72
- <TooltipPortal {...tooltipPortalProps}>
73
- <TooltipContent
55
+ </TooltipPrimitive.Trigger>
56
+ <TooltipPrimitive.Portal {...tooltipPortalProps}>
57
+ <TooltipPrimitive.Content
74
58
  {...tooltipContentProps}
75
59
  className={cn(
76
60
  '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,17 +62,17 @@ function StatusIndicatorBase(
78
62
  )}
79
63
  >
80
64
  <span>{tooltip || status || 'unknown'}</span>
81
- <TooltipArrow
65
+ <TooltipPrimitive.Arrow
82
66
  {...tooltipArrowProps}
83
67
  className={cn(
84
68
  'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
85
69
  tooltipArrowProps?.className
86
70
  )}
87
71
  />
88
- </TooltipContent>
89
- </TooltipPortal>
90
- </TooltipRoot>
91
- </TooltipProvider>
72
+ </TooltipPrimitive.Content>
73
+ </TooltipPrimitive.Portal>
74
+ </TooltipPrimitive.Root>
75
+ </TooltipPrimitive.Provider>
92
76
  </div>
93
77
  );
94
78
  }
@@ -97,4 +81,4 @@ const StatusIndicator = memo(forwardRef(StatusIndicatorBase));
97
81
 
98
82
  StatusIndicator.displayName = 'StatusIndicator';
99
83
 
100
- export { StatusIndicator, type StatusIndicatorProps };
84
+ export { StatusIndicator, type StatusName, type StatusIndicatorProps };
@@ -1,7 +1,5 @@
1
- import type React from 'react';
2
- import type { LucideProps } from 'lucide-react';
3
1
  import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
4
- import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
2
+ import { Maximize, Minimize, PictureInPicture2, type LucideProps } from 'lucide-react';
5
3
  import { cn, getRandomString } from './utils';
6
4
 
7
5
  interface StreamViewProps extends React.ComponentProps<'video'> {
@@ -1,26 +0,0 @@
1
- import type React from 'react';
2
- export type StreamViewProps = {
3
- id?: string;
4
- stream?: MediaStream;
5
- mirror?: boolean;
6
- } & React.VideoHTMLAttributes<HTMLVideoElement>;
7
- export type StreamViewRef = {
8
- id: string;
9
- element: HTMLVideoElement | null;
10
- };
11
- export declare const StreamView: React.ForwardRefExoticComponent<{
12
- id?: string;
13
- stream?: MediaStream;
14
- mirror?: boolean;
15
- } & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
16
- export declare const LocalStreamView: React.ForwardRefExoticComponent<{
17
- id?: string;
18
- stream?: MediaStream;
19
- mirror?: boolean;
20
- } & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
21
- export declare const RemoteStreamView: React.ForwardRefExoticComponent<{
22
- id?: string;
23
- stream?: MediaStream;
24
- mirror?: boolean;
25
- } & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<StreamViewRef>>;
26
- //# sourceMappingURL=stream-view.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,4 +0,0 @@
1
- import { type ClassValue } from 'clsx';
2
- export declare function cn(...inputs: ClassValue[]): string;
3
- export declare function getRandomString(length?: number): string;
4
- //# sourceMappingURL=utils.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,5 +0,0 @@
1
- export declare enum ActiveMedia {
2
- USER = 0,
3
- DISPLAY = 1
4
- }
5
- //# sourceMappingURL=constants.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,IAAI,IAAI;IACR,OAAO,IAAI;CACZ"}
@@ -1,4 +0,0 @@
1
- import { type ClassValue } from 'clsx';
2
- export declare function cn(...inputs: ClassValue[]): string;
3
- export declare function getRandomString(length?: number): string;
4
- //# sourceMappingURL=utils.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,22 +0,0 @@
1
- import type React from 'react';
2
- import { type ClassValue } from 'clsx';
3
- import { ActiveMedia } from '../lib/constants';
4
- export type LocalStreamProps = {
5
- id?: string;
6
- stream?: MediaStream;
7
- activeMedia?: ActiveMedia | 'user' | 'display';
8
- mirror?: boolean;
9
- className?: ClassValue;
10
- } & React.VideoHTMLAttributes<HTMLVideoElement>;
11
- export type LocalStreamRef = {
12
- id: string;
13
- element: HTMLVideoElement | null;
14
- };
15
- export declare const LocalStream: React.ForwardRefExoticComponent<{
16
- id?: string;
17
- stream?: MediaStream;
18
- activeMedia?: ActiveMedia | "user" | "display";
19
- mirror?: boolean;
20
- className?: ClassValue;
21
- } & React.VideoHTMLAttributes<HTMLVideoElement> & React.RefAttributes<LocalStreamRef>>;
22
- //# sourceMappingURL=local-stream.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,18 +0,0 @@
1
- import { type ClassValue } from 'clsx';
2
- export type RemoteStreamProps = {
3
- id?: string;
4
- stream?: MediaStream;
5
- mirror?: boolean;
6
- className?: ClassValue;
7
- } & React.VideoHTMLAttributes<HTMLVideoElement>;
8
- export type RemoteStreamRef = {
9
- id: string;
10
- element: HTMLVideoElement | null;
11
- };
12
- export declare const RemoteStream: import("react").ForwardRefExoticComponent<{
13
- id?: string;
14
- stream?: MediaStream;
15
- mirror?: boolean;
16
- className?: ClassValue;
17
- } & import("react").VideoHTMLAttributes<HTMLVideoElement> & import("react").RefAttributes<RemoteStreamRef>>;
18
- //# sourceMappingURL=remote-stream.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,10 +0,0 @@
1
- import { LoaderCircle } from 'lucide-react';
2
- import { cn } from './utils';
3
-
4
- function AnimatedLoader({ loading = true, className }) {
5
- return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
6
- }
7
-
8
- AnimatedLoader.displayName = 'AnimatedLoader';
9
-
10
- export { AnimatedLoader };
@@ -1,15 +0,0 @@
1
- import type { LucideProps } from 'lucide-react';
2
- import { LoaderCircle } from 'lucide-react';
3
- import { cn } from './utils';
4
-
5
- interface AnimatedLoaderProps extends LucideProps {
6
- loading?: boolean;
7
- }
8
-
9
- function AnimatedLoader({ loading = true, className }: AnimatedLoaderProps) {
10
- return loading ? <LoaderCircle className={cn('animate-spin mx-auto', className)} /> : null;
11
- }
12
-
13
- AnimatedLoader.displayName = 'AnimatedLoader';
14
-
15
- export { AnimatedLoader, type AnimatedLoaderProps };
@@ -1,34 +0,0 @@
1
- import { forwardRef, memo } from 'react';
2
- import * as AvatarPrimitive from '@radix-ui/react-avatar';
3
- import { PresenceBadge } from './presence';
4
- import { cn, getInitialsFromName } from './utils';
5
-
6
- function AvatarBase(
7
- { src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props },
8
- ref
9
- ) {
10
- const initials = getInitialsFromName(name);
11
-
12
- return (
13
- <AvatarPrimitive.Root
14
- ref={ref}
15
- className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
16
- {...props}
17
- >
18
- <AvatarPrimitive.Image src={src} className={cn('aspect-square size-full object-cover')} />
19
- <AvatarPrimitive.Fallback className={cn('bg-muted flex size-full items-center justify-center')}>
20
- {initials}
21
- </AvatarPrimitive.Fallback>
22
- {online && (
23
- <div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
24
- )}
25
- <PresenceBadge presence={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
26
- </AvatarPrimitive.Root>
27
- );
28
- }
29
-
30
- const Avatar = memo(forwardRef(AvatarBase));
31
-
32
- Avatar.displayName = 'Avatar';
33
-
34
- export { Avatar };
@@ -1,45 +0,0 @@
1
- import type React from 'react';
2
- import type { PresenceStatus } from './presence';
3
- import { forwardRef, memo } from 'react';
4
- import * as AvatarPrimitive from '@radix-ui/react-avatar';
5
- import { PresenceBadge } from './presence';
6
- import { cn, getInitialsFromName } from './utils';
7
-
8
- interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root> {
9
- src?: string;
10
- name?: string;
11
- online?: boolean;
12
- presence?: PresenceStatus;
13
- onlineClassName?: string;
14
- presenceClassName?: string;
15
- }
16
-
17
- function AvatarBase(
18
- { src, name = 'NA', online, presence, className, onlineClassName, presenceClassName, ...props }: AvatarProps,
19
- ref: React.Ref<HTMLDivElement>
20
- ) {
21
- const initials = getInitialsFromName(name);
22
-
23
- return (
24
- <AvatarPrimitive.Root
25
- ref={ref}
26
- className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
27
- {...props}
28
- >
29
- <AvatarPrimitive.Image src={src} className={cn('aspect-square size-full object-cover')} />
30
- <AvatarPrimitive.Fallback className={cn('bg-muted flex size-full items-center justify-center')}>
31
- {initials}
32
- </AvatarPrimitive.Fallback>
33
- {online && (
34
- <div className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineClassName)} />
35
- )}
36
- <PresenceBadge presence={presence} className={cn('absolute -bottom-0.5 -right-1', presenceClassName)} />
37
- </AvatarPrimitive.Root>
38
- );
39
- }
40
-
41
- const Avatar = memo(forwardRef<HTMLDivElement, AvatarProps>(AvatarBase));
42
-
43
- Avatar.displayName = 'Avatar';
44
-
45
- export { Avatar, type AvatarProps };