@connectycube/react-ui-kit 0.0.14 → 0.0.16

package/gen/components/alert-dialog.jsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { Button } from './button';
+import { cn } from './utils';
+
+function AlertDialogBase(
+  {
+    title = '',
+    description = '',
+    cancelTitle = 'Cancel',
+    actionTitle = 'Confirm',
+    onCancel = () => {},
+    onConfirm = () => {},
+    rootProps,
+    triggerElement,
+    triggerProps,
+    portalProps,
+    overlayProps,
+    contentProps,
+    headerProps,
+    titleProps,
+    descriptionProps,
+    footerProps,
+    cancelProps,
+    cancelButtonProps,
+    actionProps,
+    actionButtonProps,
+    ...props
+  },
+  ref
+) {
+  return (
+    <div ref={ref} {...props}>
+      <AlertDialogPrimitive.Root {...rootProps}>
+        <AlertDialogPrimitive.Trigger asChild {...triggerProps}>
+          {triggerElement}
+        </AlertDialogPrimitive.Trigger>
+        <AlertDialogPrimitive.Portal {...portalProps}>
+          <AlertDialogPrimitive.Overlay
+            {...overlayProps}
+            className={cn(
+              'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+              overlayProps?.className
+            )}
+          />
+          <AlertDialogPrimitive.Content
+            {...contentProps}
+            className={cn(
+              'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2em)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+              contentProps?.className
+            )}
+          >
+            <div
+              {...headerProps}
+              className={cn('flex flex-col gap-2 text-center sm:text-left', headerProps?.className)}
+            >
+              <AlertDialogPrimitive.Title
+                {...titleProps}
+                className={cn('text-lg font-semibold', titleProps?.className)}
+              >
+                {title}
+              </AlertDialogPrimitive.Title>
+              <AlertDialogPrimitive.Description
+                {...descriptionProps}
+                className={cn('text-muted-foreground text-sm', descriptionProps?.className)}
+              >
+                {description}
+              </AlertDialogPrimitive.Description>
+            </div>
+            <div
+              {...footerProps}
+              className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', footerProps?.className)}
+            >
+              <AlertDialogPrimitive.Cancel {...cancelProps} onClick={onCancel}>
+                <Button {...cancelButtonProps}>{cancelTitle}</Button>
+              </AlertDialogPrimitive.Cancel>
+              <AlertDialogPrimitive.Action {...actionProps} onClick={onConfirm}>
+                <Button {...actionButtonProps}>{actionTitle}</Button>
+              </AlertDialogPrimitive.Action>
+            </div>
+          </AlertDialogPrimitive.Content>
+        </AlertDialogPrimitive.Portal>
+      </AlertDialogPrimitive.Root>
+    </div>
+  );
+}
+
+const AlertDialog = forwardRef(AlertDialogBase);
+
+AlertDialog.displayName = 'AlertDialog';
+
+export { AlertDialog };

package/gen/components/avatar.jsx

@@ -1,5 +1,5 @@
-import { forwardRef, memo } from 'react';
-import { Avatar as AvatarRoot, Fallback as AvatarFallback, Image as AvatarImage } from '@radix-ui/react-avatar';
+import { memo, forwardRef } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { PresenceBadge } from './presence';
 import { cn, getInitialsFromName } from './utils';
 
@@ -10,18 +10,18 @@ function AvatarBase(
   const initials = getInitialsFromName(name);
 
   return (
-    <AvatarRoot ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
-      <AvatarImage
+    <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)}
       />
-      <AvatarFallback
+      <AvatarPrimitive.Fallback
         {...fallbackProps}
-        className={cn('bg-muted flex size-full items-center justify-center', fallbackProps?.className)}
+        className={cn('bg-muted size-full rounded-full flex items-center justify-center', fallbackProps?.className)}
       >
         {initials}
-      </AvatarFallback>
+      </AvatarPrimitive.Fallback>
       {online && (
         <div
           {...onlineProps}
@@ -33,7 +33,7 @@ function AvatarBase(
         {...presenceProps}
         className={cn('absolute -bottom-0.5 -right-1', presenceProps?.className)}
       />
-    </AvatarRoot>
+    </AvatarPrimitive.Root>
   );
 }
 

package/gen/components/button.jsx

@@ -0,0 +1,60 @@
+import { forwardRef } from 'react';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import { cva } 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',
+    },
+  }
+);
+
+function ButtonBase({ asChild = false, variant, size, className, leftElement, rightElement, children, ...props }, ref) {
+  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(ButtonBase);
+
+Button.displayName = 'Button';
+
+export { Button };

package/gen/components/dismiss-layer.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
+import { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import { cn } from './utils';
 
 function DismissLayerBase(
@@ -45,12 +45,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(DismissLayerBase));
+const DismissLayer = forwardRef(DismissLayerBase);
 
 DismissLayer.displayName = 'DismissLayer';
 

package/gen/components/placeholder-text.jsx

@@ -1,4 +1,5 @@
-import { forwardRef, memo } from 'react';
+import * as React from 'react';
+import { forwardRef } from 'react';
 import { cn } from './utils';
 
 function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
@@ -19,7 +20,7 @@ function PlaceholderTextBase({ title, titles = [], rowProps, ...props }, ref) {
   );
 }
 
-const PlaceholderText = memo(forwardRef(PlaceholderTextBase));
+const PlaceholderText = forwardRef(PlaceholderTextBase);
 
 PlaceholderText.displayName = 'PlaceholderText';
 

package/gen/components/presence.jsx

@@ -1,34 +1,71 @@
-import { memo } from 'react';
-import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
 import { capitalize, cn } from './utils';
 
-function PresenceBadgeBase({ status, ...props }) {
+function PresenceBadge({ status, ...props }) {
   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 }) {
+function Presence({ badge = true, status, label, badgeProps, labelProps, ...props }) {
   const presence = capitalize(label || status);
 
   return (
@@ -39,8 +76,6 @@ function PresenceBase({ badge = true, status, label, badgeProps, labelProps, ...
   );
 }
 
-const Presence = memo(PresenceBase);
-
 Presence.displayName = 'Presence';
 
 export { Presence, PresenceBadge };

package/gen/components/status-indicator.jsx

@@ -1,12 +1,5 @@
-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';
 
 function StatusIndicatorBase(
@@ -33,9 +26,9 @@ function StatusIndicatorBase(
 
   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(
@@ -44,9 +37,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',
@@ -54,22 +47,22 @@ 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';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -41,14 +41,16 @@
     "gen"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm run clean:dist && rollup -c",
     "format": "node ./scripts/format.js",
     "transform": "node ./scripts/transform.js",
+    "generate": "npm run clean:gen && npm run transform && eslint --fix . && npm run format",
     "version": "node ./scripts/bump-version.js",
     "version:patch": "npm run version patch",
     "version:minor": "npm run version minor",
     "version:major": "npm run version major",
-    "generate": "npm run transform && eslint --fix . && npm run format",
+    "clean:dist": "rm -rf dist",
+    "clean:gen": "rm -rf gen",
     "lint": "eslint ."
   },
   "keywords": [
@@ -60,8 +62,11 @@
     "jsx"
   ],
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "execa": "^9.6.0",
     "fs-extra": "^11.3.2",
@@ -74,27 +79,27 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-typescript": "^7.27.1",
-    "@eslint/js": "^9.38.0",
-    "@rollup/plugin-commonjs": "^28.0.8",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@eslint/js": "^9.39.1",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.2.0",
-    "@stylistic/eslint-plugin": "^5.5.0",
-    "@types/node": "^24.9.1",
-    "@types/react": "^19.2.2",
-    "eslint": "^9.38.0",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@stylistic/eslint-plugin": "^5.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "fast-glob": "^3.3.3",
-    "globals": "^16.4.0",
+    "globals": "^16.5.0",
     "prettier": "^3.6.2",
-    "rollup": "^4.52.5",
+    "rollup": "^4.53.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2"
+    "typescript-eslint": "^8.48.0"
   },
   "engines": {
     "node": ">=18"

package/src/components/alert-dialog.tsx

@@ -0,0 +1,116 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { Button, type ButtonProps } from './button';
+import { cn } from './utils';
+
+interface AlertDialogProps extends AlertDialogPrimitive.AlertDialogProps {
+  title?: string;
+  description?: string;
+  cancelTitle?: string;
+  actionTitle?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  rootProps?: AlertDialogPrimitive.AlertDialogProps;
+  triggerElement: React.ReactElement;
+  triggerProps?: AlertDialogPrimitive.AlertDialogTriggerProps;
+  portalProps?: AlertDialogPrimitive.AlertDialogPortalProps;
+  overlayProps?: AlertDialogPrimitive.AlertDialogOverlayProps;
+  contentProps?: AlertDialogPrimitive.AlertDialogContentProps;
+  headerProps?: React.ComponentProps<'div'>;
+  titleProps?: AlertDialogPrimitive.AlertDialogTitleProps;
+  descriptionProps?: AlertDialogPrimitive.AlertDialogDescriptionProps;
+  footerProps?: React.ComponentProps<'div'>;
+  cancelProps?: AlertDialogPrimitive.AlertDialogCancelProps;
+  cancelButtonProps?: ButtonProps;
+  actionProps?: AlertDialogPrimitive.AlertDialogActionProps;
+  actionButtonProps?: ButtonProps;
+}
+
+function AlertDialogBase(
+  {
+    title = '',
+    description = '',
+    cancelTitle = 'Cancel',
+    actionTitle = 'Confirm',
+    onCancel = () => {},
+    onConfirm = () => {},
+    rootProps,
+    triggerElement,
+    triggerProps,
+    portalProps,
+    overlayProps,
+    contentProps,
+    headerProps,
+    titleProps,
+    descriptionProps,
+    footerProps,
+    cancelProps,
+    cancelButtonProps,
+    actionProps,
+    actionButtonProps,
+    ...props
+  }: AlertDialogProps,
+  ref?: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div ref={ref} {...props}>
+      <AlertDialogPrimitive.Root {...rootProps}>
+        <AlertDialogPrimitive.Trigger asChild {...triggerProps}>
+          {triggerElement}
+        </AlertDialogPrimitive.Trigger>
+        <AlertDialogPrimitive.Portal {...portalProps}>
+          <AlertDialogPrimitive.Overlay
+            {...overlayProps}
+            className={cn(
+              'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+              overlayProps?.className
+            )}
+          />
+          <AlertDialogPrimitive.Content
+            {...contentProps}
+            className={cn(
+              'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2em)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+              contentProps?.className
+            )}
+          >
+            <div
+              {...headerProps}
+              className={cn('flex flex-col gap-2 text-center sm:text-left', headerProps?.className)}
+            >
+              <AlertDialogPrimitive.Title
+                {...titleProps}
+                className={cn('text-lg font-semibold', titleProps?.className)}
+              >
+                {title}
+              </AlertDialogPrimitive.Title>
+              <AlertDialogPrimitive.Description
+                {...descriptionProps}
+                className={cn('text-muted-foreground text-sm', descriptionProps?.className)}
+              >
+                {description}
+              </AlertDialogPrimitive.Description>
+            </div>
+            <div
+              {...footerProps}
+              className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', footerProps?.className)}
+            >
+              <AlertDialogPrimitive.Cancel {...cancelProps} onClick={onCancel}>
+                <Button {...cancelButtonProps}>{cancelTitle}</Button>
+              </AlertDialogPrimitive.Cancel>
+              <AlertDialogPrimitive.Action {...actionProps} onClick={onConfirm}>
+                <Button {...actionButtonProps}>{actionTitle}</Button>
+              </AlertDialogPrimitive.Action>
+            </div>
+          </AlertDialogPrimitive.Content>
+        </AlertDialogPrimitive.Portal>
+      </AlertDialogPrimitive.Root>
+    </div>
+  );
+}
+
+const AlertDialog = forwardRef<HTMLDivElement, AlertDialogProps>(AlertDialogBase);
+
+AlertDialog.displayName = 'AlertDialog';
+
+export { AlertDialog, type AlertDialogProps };

package/src/components/animated-loader.tsx

@@ -1,5 +1,4 @@
-import type { LucideProps } from 'lucide-react';
-import { LoaderCircle } from 'lucide-react';
+import { LoaderCircle, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
 
 interface AnimatedLoaderProps extends LucideProps {

package/src/components/avatar.tsx

@@ -1,21 +1,18 @@
 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 { Avatar as AvatarRoot, Fallback as AvatarFallback, Image as AvatarImage } from '@radix-ui/react-avatar';
-import { PresenceBadge } from './presence';
+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';
 
-interface AvatarProps extends AvatarRootProps {
+interface AvatarProps extends AvatarPrimitive.AvatarProps {
   src?: string;
   name?: string;
   online?: boolean;
   presence?: PresenceStatus;
   onlineProps?: React.ComponentProps<'div'>;
   presenceProps?: PresenceBadgeProps;
-  imageProps?: AvatarImageProps;
-  fallbackProps?: AvatarFallbackProps;
+  imageProps?: AvatarPrimitive.AvatarImageProps;
+  fallbackProps?: AvatarPrimitive.AvatarFallbackProps;
 }
 
 function AvatarBase(
@@ -36,18 +33,18 @@ function AvatarBase(
   const initials = getInitialsFromName(name);
 
   return (
-    <AvatarRoot ref={ref} {...props} className={cn('relative flex size-8 shrink-0 rounded-full', className)}>
-      <AvatarImage
+    <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)}
       />
-      <AvatarFallback
+      <AvatarPrimitive.Fallback
         {...fallbackProps}
-        className={cn('bg-muted flex size-full items-center justify-center', fallbackProps?.className)}
+        className={cn('bg-muted size-full rounded-full flex items-center justify-center', fallbackProps?.className)}
       >
         {initials}
-      </AvatarFallback>
+      </AvatarPrimitive.Fallback>
       {online && (
         <div
           {...onlineProps}
@@ -59,7 +56,7 @@ function AvatarBase(
         {...presenceProps}
         className={cn('absolute -bottom-0.5 -right-1', presenceProps?.className)}
       />
-    </AvatarRoot>
+    </AvatarPrimitive.Root>
   );
 }