@rovula/ui 0.1.27 → 0.1.28

package/dist/cjs/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/cjs/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/cjs/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/components/Avatar/Avatar.js

@@ -13,7 +13,8 @@ export const formatAvatarName = (text) => {
     return `${first}${last}`;
 };
 const Avatar = ({ text, imageUrl, icon, fallback, size, rounded, className, imageClassName, fallbackClassName, type = "text", children, style, }) => {
-    const avatarClassname = avatarVariants({ size, rounded });
+    const hasImage = !!imageUrl;
+    const avatarClassname = avatarVariants({ size, rounded, hasImage });
     return (_jsx(AvatarBase, { className: cn(avatarClassname, className), style: style, children: children || (_jsxs(_Fragment, { children: [type === "image" && (_jsxs(_Fragment, { children: [_jsx(AvatarImage, { src: imageUrl, className: cn(imageClassName) }), _jsx(AvatarFallback, { className: cn(fallbackClassName), children: typeof fallback === "string"
                                 ? formatAvatarName(fallback)
                                 : fallback })] })), type === "text" && formatAvatarName(text !== null && text !== void 0 ? text : ""), type === "icon" && icon] })) }));

package/dist/components/Avatar/Avatar.styles.js

@@ -15,6 +15,9 @@ export const avatarVariants = cva([
             full: "rounded-full",
             none: "rounded-none",
         },
+        hasImage: {
+            true: "bg-white",
+        },
     },
     defaultVariants: {
         size: "md",

package/dist/components/Avatar/AvatarBase.js

@@ -21,7 +21,7 @@ const AvatarBase = React.forwardRef((_a, ref) => {
 AvatarBase.displayName = AvatarPrimitive.Root.displayName;
 const AvatarImage = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(AvatarPrimitive.Image, Object.assign({ ref: ref, className: cn("aspect-square h-full w-full", className) }, props)));
+    return (_jsx(AvatarPrimitive.Image, Object.assign({ ref: ref, className: cn("object-cover object-top h-full w-full", className) }, props)));
 });
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef((_a, ref) => {

package/dist/esm/bundle.css

@@ -3173,6 +3173,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   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);
@@ -3378,6 +3382,14 @@ input[type=number] {
 .stroke-primary-default{
   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;
 }