@connectycube/react-ui-kit 0.0.17 → 0.0.19

package/gen/components/switch.jsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from './utils';
+
+function Switch(props) {
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      className={cn(
+        'peer data-[state=checked]:bg-ring data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15em] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring disabled:cursor-not-allowed disabled:opacity-50',
+        props?.className
+      )}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/gen/components/utils.js

@@ -9,13 +9,6 @@ export function getRandomString(length = 8) {
   return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
 }
 
-export function getInitialsFromName(name) {
-  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
-  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
-
-  return result.toUpperCase();
-}
-
 export function capitalize(str) {
   return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
 }

package/gen/index.js

@@ -1,3 +1,49 @@
+export {
+  Attachment,
+  AttachmentLink,
+  AttachmentImage,
+  AttachmentAudio,
+  AttachmentVideo,
+  AttachmentFile,
+  AttachmentFailed,
+} from './components/attachment';
+
+export { Avatar } from './components/avatar';
+
+export { Badge } from './components/badge';
+
+export { Button } from './components/button';
+
+export { DialogItem } from './components/dialog-item';
+
 export { DismissLayer } from './components/dismiss-layer';
 
+export { FilePickerInput, FilePickerDropzone } from './components/file-picker';
+
+export { FormattedDate } from './components/formatted-date';
+
+export { Input } from './components/input';
+
+export { Label } from './components/label';
+
+export { LinkPreview } from './components/link-preview';
+
+export { LinkifyText } from './components/linkify-text';
+
+export { PlaceholderText } from './components/placeholder-text';
+
+export { Presence, PresenceBadge } from './components/presence';
+
+export { Search } from './components/search';
+
+export { Spinner } from './components/spinner';
+
+export { StatusIndicator } from './components/status-indicator';
+
+export { StatusSent } from './components/status-sent';
+
 export { StreamView, LocalStreamView, RemoteStreamView, FullscreenStreamView } from './components/stream-view';
+
+export { Switch } from './components/switch';
+
+export * from './components/utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -64,12 +64,16 @@
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "execa": "^9.6.0",
     "fs-extra": "^11.3.2",
+    "linkify-react": "^4.3.2",
     "lucide-react": "^0.555.0",
     "prompts": "^2.4.2",
     "tailwind-merge": "^3.4.0"

package/src/components/attachment.tsx

@@ -0,0 +1,270 @@
+import type React from 'react';
+import { forwardRef, memo, useImperativeHandle, useRef, useState } from 'react';
+import { File, FileXCorner, type LucideProps } from 'lucide-react';
+import { Spinner } from './spinner';
+import { cn, getRandomString } from './utils';
+
+interface AttachmentProps {
+  uid?: string;
+  url?: string;
+  mimeType?: string;
+  uploading?: boolean;
+  onReady?: (skipOnce?: boolean) => void;
+  linkProps?: AttachmentLinkProps;
+  containerProps?: React.ComponentProps<'div'>;
+}
+
+interface AttachmentLinkProps
+  extends React.ComponentProps<'a'>,
+    Omit<AttachmentProps, 'containerProps' & 'mimeType' & 'onReady'> {
+  children?: React.ReactNode;
+}
+
+interface AttachmentImageProps
+  extends React.ComponentProps<'img'>,
+    Omit<AttachmentProps, 'containerProps' & 'mimeType'> {}
+
+interface AttachmentAudioProps
+  extends React.ComponentProps<'audio'>,
+    Omit<AttachmentProps, 'linkProps' & 'mimeType' & 'onReady'> {}
+
+interface AttachmentVideoProps extends React.ComponentProps<'video'>, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  maxSize?: number;
+}
+
+interface AttachmentFileProps extends LucideProps, Omit<AttachmentProps, 'containerProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+interface AttachmentFailedProps extends LucideProps, Omit<AttachmentProps, 'linkProps' & 'mimeType'> {
+  name?: string | undefined;
+  iconElement?: React.ReactNode;
+}
+
+function AttachmentLinkBase(
+  { url, uploading = false, children, ...props }: AttachmentLinkProps,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  return (
+    <a
+      ref={ref}
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      href={url}
+      className={cn(
+        'group relative min-h-12 min-w-12 w-full flex items-center justify-center rounded-md overflow-hidden bg-ring/10 hover:bg-ring/20 transition-color duration-300 ease-out cursor-pointer',
+        props?.className
+      )}
+    >
+      {children}
+      <Spinner loading={uploading} layout="overlay" />
+    </a>
+  );
+}
+
+const AttachmentLink = forwardRef<HTMLAnchorElement, AttachmentLinkProps>(AttachmentLinkBase);
+
+AttachmentLink.displayName = 'AttachmentLink';
+
+function AttachmentAudioBase(
+  { uid, url, uploading = false, containerProps, ...props }: AttachmentAudioProps,
+  ref: React.ForwardedRef<HTMLAudioElement>
+) {
+  const audioId = `attachment_audio_${uid || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      className={cn('relative min-h-12 min-w-12 w-full rounded-md overflow-hidden', containerProps?.className)}
+    >
+      <audio ref={ref} src={url} id={audioId} controls {...props} />
+      <Spinner loading={uploading} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentAudio = forwardRef<HTMLAudioElement, AttachmentAudioProps>(AttachmentAudioBase);
+
+function AttachmentVideoBase(
+  { uid, url, maxSize = 360, uploading = false, onReady = () => {}, containerProps, ...props }: AttachmentVideoProps,
+  ref: React.ForwardedRef<HTMLVideoElement>
+) {
+  const videoId = `attachment_video_${uid || getRandomString()}`;
+  const videoMaxSize = `${maxSize}px`;
+  const playerRef = useRef<HTMLVideoElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({
+    maxHeight: videoMaxSize,
+    maxWidth: videoMaxSize,
+  });
+  const handleCanPlay = (event: React.SyntheticEvent<HTMLVideoElement, Event>) => {
+    const player = playerRef.current;
+
+    if (player) {
+      const { videoWidth, videoHeight } = player;
+      const ratio = videoWidth / videoHeight || 1;
+      const height = ratio < 1 ? videoMaxSize : `${Math.round(maxSize / ratio)}px`;
+      const width = ratio < 1 ? `${Math.round(maxSize * ratio)}px` : videoMaxSize;
+
+      setStyle({ height, width, maxHeight: height, maxWidth: width });
+      props.onCanPlay?.(event);
+      onReady();
+    }
+  };
+
+  useImperativeHandle(ref, () => playerRef.current!, []);
+
+  return (
+    <div
+      {...containerProps}
+      className={cn('relative min-h-20 w-full rounded-md overflow-hidden', containerProps?.className)}
+    >
+      <video
+        id={videoId}
+        ref={playerRef}
+        src={url}
+        controls
+        preload="metadata"
+        style={style}
+        {...props}
+        onCanPlay={handleCanPlay}
+        className={cn('size-full', props?.className)}
+      />
+      <Spinner loading={uploading} layout="overlay" />
+    </div>
+  );
+}
+
+const AttachmentVideo = forwardRef<HTMLVideoElement, AttachmentVideoProps>(AttachmentVideoBase);
+
+AttachmentVideo.displayName = 'AttachmentVideo';
+
+function AttachmentImageBase(
+  { uid, url, uploading = false, onReady = () => {}, linkProps, ...props }: AttachmentImageProps,
+  ref: React.ForwardedRef<HTMLImageElement>
+) {
+  const imageId = `attachment_image_${uid || getRandomString()}`;
+  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    props.onLoad?.(event);
+    onReady();
+  };
+
+  return (
+    <AttachmentLink href={url} uploading={uploading} {...linkProps}>
+      <img
+        ref={ref}
+        src={url}
+        id={imageId}
+        alt="attachment"
+        {...props}
+        className={cn(
+          'rounded-md object-cover min-h-12 min-w-12 max-h-[360px] group-hover:scale-103 transition-transform duration-300 ease-out',
+          props?.className
+        )}
+        onLoad={handleLoad}
+      />
+    </AttachmentLink>
+  );
+}
+
+const AttachmentImage = forwardRef<HTMLImageElement, AttachmentImageProps>(AttachmentImageBase);
+
+AttachmentImage.displayName = 'AttachmentImage';
+
+function AttachmentFile({ url, name, uploading = false, iconElement, linkProps, ...props }: AttachmentFileProps) {
+  const fileId = `attachment_file_${props.id || getRandomString()}`;
+
+  return (
+    <AttachmentLink
+      href={url}
+      uploading={uploading}
+      {...linkProps}
+      className={cn('flex-row gap-2 px-2', linkProps?.className)}
+    >
+      {iconElement || (
+        <File
+          id={fileId}
+          {...props}
+          className={cn(
+            'size-6 shrink-0 text-foreground/85 group-hover:text-foreground duration-300 ease-out',
+            props?.className
+          )}
+        />
+      )}
+      {name && (
+        <span className="font-medium line-clamp-1 break-all text-foreground/85 group-hover:text-foreground duration-300 ease-out">
+          {name}
+        </span>
+      )}
+    </AttachmentLink>
+  );
+}
+
+AttachmentFile.displayName = 'AttachmentFile';
+
+function AttachmentFailed({
+  name = 'Unknown file',
+  uploading = false,
+  iconElement,
+  containerProps,
+  ...props
+}: AttachmentFailedProps) {
+  const failedId = `attachment_failed_${props.id || getRandomString()}`;
+
+  return (
+    <div
+      {...containerProps}
+      className={cn(
+        'relative min-h-12 min-w-12 w-full flex flex-row items-center justify-center gap-2 px-2 bg-red-600/10 rounded-md overflow-hidden',
+        containerProps?.className
+      )}
+    >
+      {iconElement || (
+        <FileXCorner id={failedId} {...props} className={cn('size-6 shrink-0 text-red-600', props?.className)} />
+      )}
+      <span className="font-medium line-clamp-1 break-all text-red-600">{name}</span>
+      <Spinner loading={uploading} layout="overlay" />
+    </div>
+  );
+}
+
+AttachmentFailed.displayName = 'AttachmentFailed';
+
+function AttachmentBase({ mimeType, ...props }: AttachmentProps) {
+  const [type = ''] = mimeType?.split('/') || [];
+
+  if (!props.url) {
+    return <AttachmentFailed {...props} />;
+  }
+
+  switch (type) {
+    case 'image':
+      return <AttachmentImage {...props} />;
+    case 'video':
+      return <AttachmentVideo {...props} />;
+    case 'audio':
+      return <AttachmentAudio {...props} />;
+    default:
+      return <AttachmentFile name={mimeType} {...props} />;
+  }
+}
+
+const Attachment = memo(AttachmentBase);
+
+export {
+  Attachment,
+  AttachmentLink,
+  AttachmentImage,
+  AttachmentAudio,
+  AttachmentVideo,
+  AttachmentFile,
+  AttachmentFailed,
+  type AttachmentLinkProps,
+  type AttachmentImageProps,
+  type AttachmentAudioProps,
+  type AttachmentVideoProps,
+  type AttachmentFileProps,
+  type AttachmentFailedProps,
+  type AttachmentProps,
+};

package/src/components/avatar.tsx

@@ -2,12 +2,12 @@ import type React from 'react';
 import { memo, forwardRef } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { PresenceBadge, type PresenceStatus, type PresenceBadgeProps } from './presence';
-import { cn, getInitialsFromName } from './utils';
+import { cn } from './utils';
 
 interface AvatarProps extends AvatarPrimitive.AvatarProps {
-  src?: string;
-  name?: string;
-  online?: boolean;
+  src?: string | undefined;
+  name?: string | undefined;
+  online?: boolean | undefined;
   presence?: PresenceStatus;
   onlineProps?: React.ComponentProps<'div'>;
   presenceProps?: PresenceBadgeProps;
@@ -15,6 +15,13 @@ interface AvatarProps extends AvatarPrimitive.AvatarProps {
   fallbackProps?: AvatarPrimitive.AvatarFallbackProps;
 }
 
+function getInitialsFromName(name?: string): string {
+  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
+
+  return result.toUpperCase();
+}
+
 function AvatarBase(
   {
     src,
@@ -48,13 +55,16 @@ function AvatarBase(
       {online && (
         <div
           {...onlineProps}
-          className={cn('rounded-full border-2 bg-green-600 border-green-200 size-3.5', onlineProps?.className)}
+          className={cn(
+            'absolute top-0 right-0 rounded-full border-2 bg-green-600 border-green-200 size-3.5',
+            onlineProps?.className
+          )}
         />
       )}
       <PresenceBadge
         status={presence}
         {...presenceProps}
-        className={cn('absolute -bottom-0.5 -right-1', presenceProps?.className)}
+        className={cn('absolute bottom-0 right-0', presenceProps?.className)}
       />
     </AvatarPrimitive.Root>
   );

package/src/components/badge.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
 import { forwardRef } from 'react';
-import * as SlotPrimitive from '@radix-ui/react-slot';
+import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from './utils';
 
-interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+interface BadgeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof badgeVariants> {
   asChild?: boolean;
 }
 
@@ -28,14 +28,14 @@ const badgeVariants = cva(
 
 function BadgeBase(
   { className, variant, asChild = false, ...props }: BadgeProps,
-  ref?: React.ForwardedRef<HTMLSpanElement>
+  ref?: React.ForwardedRef<HTMLElement>
 ) {
-  const Comp = asChild ? SlotPrimitive.Root : 'span';
+  const Comp = asChild ? Slot : 'span';
 
-  return <Comp ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+  return <Comp ref={ref} {...props} className={cn(badgeVariants({ variant }), className)} />;
 }
 
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>(BadgeBase);
+const Badge = forwardRef<HTMLElement, BadgeProps>(BadgeBase);
 
 Badge.displayName = 'Badge';
 

package/src/components/button.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { forwardRef } from 'react';
-import * as SlotPrimitive from '@radix-ui/react-slot';
+import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from './utils';
 
@@ -40,7 +40,7 @@ function ButtonBase(
   { asChild = false, variant, size, className, ...props }: ButtonProps,
   ref?: React.ForwardedRef<HTMLButtonElement>
 ) {
-  const Comp = asChild ? SlotPrimitive.Root : 'button';
+  const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp

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

@@ -0,0 +1,54 @@
+import { memo, forwardRef } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { PresenceBadge } from './presence';
+import { cn } from './utils';
+
+function getInitialsFromName(name) {
+  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
+
+  return result.toUpperCase();
+}
+
+function AvatarBase(
+  { src, name = 'NA', online, presence, className, onlineProps, presenceProps, imageProps, fallbackProps, ...props },
+  ref
+) {
+  const initials = getInitialsFromName(name);
+
+  return (
+    <AvatarPrimitive.Root ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
+      <AvatarPrimitive.Image
+        {...imageProps}
+        src={src}
+        className={cn('aspect-square size-full rounded-full overflow-hidden object-cover', imageProps?.className)}
+      />
+      <AvatarPrimitive.Fallback
+        {...fallbackProps}
+        className={cn('bg-muted size-full rounded-full flex items-center justify-center', fallbackProps?.className)}
+      >
+        {initials}
+      </AvatarPrimitive.Fallback>
+      {online && (
+        <div
+          {...onlineProps}
+          className={cn(
+            'absolute top-0 right-0 rounded-full border-2 bg-green-600 border-green-200 size-3.5',
+            onlineProps?.className
+          )}
+        />
+      )}
+      <PresenceBadge
+        status={presence}
+        {...presenceProps}
+        className={cn('absolute bottom-0 right-0', presenceProps?.className)}
+      />
+    </AvatarPrimitive.Root>
+  );
+}
+
+const Avatar = memo(forwardRef(AvatarBase));
+
+Avatar.displayName = 'Avatar';
+
+export { Avatar };

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

@@ -0,0 +1,77 @@
+import type React from 'react';
+import { memo, forwardRef } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { PresenceBadge, type PresenceStatus, type PresenceBadgeProps } from './presence';
+import { cn } from './utils';
+
+interface AvatarProps extends AvatarPrimitive.AvatarProps {
+  src?: string;
+  name?: string;
+  online?: boolean;
+  presence?: PresenceStatus;
+  onlineProps?: React.ComponentProps<'div'>;
+  presenceProps?: PresenceBadgeProps;
+  imageProps?: AvatarPrimitive.AvatarImageProps;
+  fallbackProps?: AvatarPrimitive.AvatarFallbackProps;
+}
+
+function getInitialsFromName(name?: string): string {
+  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
+
+  return result.toUpperCase();
+}
+
+function AvatarBase(
+  {
+    src,
+    name = 'NA',
+    online,
+    presence,
+    className,
+    onlineProps,
+    presenceProps,
+    imageProps,
+    fallbackProps,
+    ...props
+  }: AvatarProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const initials = getInitialsFromName(name);
+
+  return (
+    <AvatarPrimitive.Root ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
+      <AvatarPrimitive.Image
+        {...imageProps}
+        src={src}
+        className={cn('aspect-square size-full rounded-full overflow-hidden object-cover', imageProps?.className)}
+      />
+      <AvatarPrimitive.Fallback
+        {...fallbackProps}
+        className={cn('bg-muted size-full rounded-full flex items-center justify-center', fallbackProps?.className)}
+      >
+        {initials}
+      </AvatarPrimitive.Fallback>
+      {online && (
+        <div
+          {...onlineProps}
+          className={cn(
+            'absolute top-0 right-0 rounded-full border-2 bg-green-600 border-green-200 size-3.5',
+            onlineProps?.className
+          )}
+        />
+      )}
+      <PresenceBadge
+        status={presence}
+        {...presenceProps}
+        className={cn('absolute bottom-0 right-0', presenceProps?.className)}
+      />
+    </AvatarPrimitive.Root>
+  );
+}
+
+const Avatar = memo(forwardRef<HTMLDivElement, AvatarProps>(AvatarBase));
+
+Avatar.displayName = 'Avatar';
+
+export { Avatar, type AvatarProps };

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

@@ -0,0 +1,45 @@
+import { forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from './utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function BadgeBase({ className, variant, asChild = false, ...props }, ref) {
+  const Comp = asChild ? Slot : 'span';
+
+  return (
+    <Comp
+      ref={ref}
+      {...props}
+      className={cn(
+        badgeVariants({
+          variant,
+        }),
+        className
+      )}
+    />
+  );
+}
+
+const Badge = forwardRef(BadgeBase);
+
+Badge.displayName = 'Badge';
+
+export { Badge };