@rovula/ui 0.1.27 → 0.1.28

package/dist/esm/types/components/Avatar/Avatar.d.ts

@@ -22,7 +22,7 @@ type AvatarImageProps = {
     type: "image";
 } & BaseAvatarProps;
 type AvatarIconProps = {
-    icon: string;
+    icon: React.ReactNode;
     type: "icon";
 } & BaseAvatarProps;
 export type AvatarProps = AvatarTextProps | AvatarImageProps | AvatarIconProps;

package/dist/esm/types/components/Avatar/Avatar.stories.d.ts

@@ -34,7 +34,7 @@ declare const meta: {
         fallbackClassName?: string | undefined;
         style?: React.CSSProperties | undefined;
     } | {
-        icon: string & React.ReactNode;
+        icon: React.ReactNode;
         type: "icon";
         imageUrl?: string | undefined;
         text?: string | undefined;

package/dist/esm/types/components/Avatar/Avatar.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const avatarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xxs" | "xs" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
+    hasImage?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/index.d.ts

@@ -542,7 +542,7 @@ type AvatarImageProps = {
     type: "image";
 } & BaseAvatarProps;
 type AvatarIconProps = {
-    icon: string;
+    icon: React.ReactNode;
     type: "icon";
 } & BaseAvatarProps;
 type AvatarProps = AvatarTextProps | AvatarImageProps | AvatarIconProps;

package/dist/src/theme/global.css

@@ -7055,6 +7055,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--transparent-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white-transparent-12 {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--transparent-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -7325,6 +7330,16 @@ input[type=number] {
   stroke: color-mix(in srgb, var(--state-primary-default) calc(100% * 1), transparent);
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.object-top {
+  -o-object-position: top;
+     object-position: top;
+}
+
 .\!p-0 {
   padding: 0px !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

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}
   />