@rovula/ui 0.1.27 → 0.1.29

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "build": "tsc",
     "prepare": "npm run build && npm run build-css && npm run build:css",
     "build:css": "copyfiles src/styles/style.css dist",
@@ -55,9 +56,14 @@
     "@storybook/react": "^8.1.3",
     "@storybook/react-webpack5": "^8.1.3",
     "@storybook/test": "^8.1.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.12.12",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
+    "jsdom": "^26.0.0",
     "chromatic": "^11.7.1",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
@@ -71,10 +77,16 @@
     "tailwindcss": "^3.4.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.4.5",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.9",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^5.2.2",

package/src/components/Avatar/Avatar.styles.ts

@@ -18,11 +18,14 @@ export const avatarVariants = cva(
         full: "rounded-full",
         none: "rounded-none",
       },
+      hasImage: {
+        true: "bg-white",
+      },
     },
 
     defaultVariants: {
       size: "md",
       rounded: "normal",
     },
-  }
+  },
 );

package/src/components/Avatar/Avatar.tsx

@@ -31,7 +31,7 @@ type AvatarImageProps = {
 } & BaseAvatarProps;
 
 type AvatarIconProps = {
-  icon: string;
+  icon: React.ReactNode;
   type: "icon";
 } & BaseAvatarProps;
 
@@ -61,7 +61,8 @@ const Avatar: React.FC<AvatarProps> = ({
   children,
   style,
 }) => {
-  const avatarClassname = avatarVariants({ size, rounded });
+  const hasImage = !!imageUrl;
+  const avatarClassname = avatarVariants({ size, rounded, hasImage });
 
   return (
     <AvatarBase className={cn(avatarClassname, className)} style={style}>

package/src/components/Avatar/AvatarBase.tsx

@@ -13,7 +13,7 @@ const AvatarBase = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
     )}
     {...props}
   />
@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn("object-cover object-top h-full w-full", className)}
     {...props}
   />
 ));
@@ -40,7 +40,7 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-inherit text-inherit",
-      className
+      className,
     )}
     {...props}
   />