@mijn-ui/react-avatar - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/index.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _mijn_ui_react_core from '@mijn-ui/react-core';
+import { UnstyledComponentWithSlots } from '@mijn-ui/react-core';
 import * as tailwind_variants from 'tailwind-variants';
-import * as _mijn_ui_react_theme from '@mijn-ui/react-theme';
-import { AvatarVariantProps, UnstyledComponentWithSlots, AvatarSlots, UnstyledProps, AvatarGroupSlots } from '@mijn-ui/react-theme';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
+declare const avatarGroupStyles: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            group?: tailwind_merge.ClassNameValue;
+            groupRemainChildren?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            group?: tailwind_merge.ClassNameValue;
+            groupRemainChildren?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    group: string;
+    groupRemainChildren: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            group?: tailwind_merge.ClassNameValue;
+            groupRemainChildren?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    group: string;
+    groupRemainChildren: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    group: string;
+    groupRemainChildren: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const avatarStyles: tailwind_variants.TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        "2xs": string;
+    };
+}, {
+    base: string;
+    image: string;
+    fallback: string;
+}, undefined, {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        "2xs": string;
+    };
+}, {
+    base: string;
+    image: string;
+    fallback: string;
+}, tailwind_variants.TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        "2xs": string;
+    };
+}, {
+    base: string;
+    image: string;
+    fallback: string;
+}, undefined, unknown, unknown, undefined>>;
+type AvatarVariantProps = VariantProps<typeof avatarStyles>;
+type AvatarGroupVariantProps = VariantProps<typeof avatarGroupStyles>;
+type AvatarGroupSlots = keyof ReturnType<typeof avatarGroupStyles>;
+type AvatarSlots = keyof ReturnType<typeof avatarStyles>;
+
 type AvatarBaseProps = UnstyledComponentWithSlots<AvatarSlots>;
 declare const useAvatarStyles: (unstyledOverride?: boolean) => {
-    classNames: _mijn_ui_react_theme.SlotsToClasses<"base" | "image" | "fallback"> | undefined;
+    classNames: _mijn_ui_react_core.SlotsToClasses<"base" | "image" | "fallback"> | undefined;
     isUnstyled: boolean | undefined;
     base: (slotProps?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | undefined;
-    } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string | undefined;
+        size?: "md" | "xl" | "lg" | "sm" | "xs" | "2xs" | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string | undefined;
     image: (slotProps?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | undefined;
-    } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string | undefined;
+        size?: "md" | "xl" | "lg" | "sm" | "xs" | "2xs" | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string | undefined;
     fallback: (slotProps?: ({
-        size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | undefined;
-    } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string | undefined;
+        size?: "md" | "xl" | "lg" | "sm" | "xs" | "2xs" | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string | undefined;
 };
@@ -29,7 +107,11 @@ type AvatarGroupBaseProps = UnstyledComponentWithSlots<AvatarGroupSlots>;
 declare const Avatar: ({ unstyled, size, className, classNames, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
-type AvatarImageProps = React.ComponentPropsWithRef<typeof AvatarPrimitive.Image> & UnstyledProps;
+type AvatarImageProps = React.ComponentPropsWithRef<typeof AvatarPrimitive.Image> & {
+    unstyled?: boolean;
+};
 declare const AvatarImage: ({ unstyled, className, ...props }: AvatarImageProps) => react_jsx_runtime.JSX.Element;
-type AvatarFallbackProps = React.ComponentPropsWithRef<typeof AvatarPrimitive.Fallback> & UnstyledProps;
+type AvatarFallbackProps = React.ComponentPropsWithRef<typeof AvatarPrimitive.Fallback> & {
+    unstyled?: boolean;
+};
 declare const AvatarFallback: ({ unstyled, className, ...props }: AvatarFallbackProps) => react_jsx_runtime.JSX.Element;
 
-export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarProps, useAvatarStyles };
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSlots, type AvatarGroupVariantProps, AvatarImage, type AvatarProps, type AvatarSlots, type AvatarVariantProps, avatarGroupStyles, avatarStyles, useAvatarStyles };

dist/index.js

@@ -5,12 +5,36 @@ "use client";
 import * as React from "react";
-import { createTVUnstyledSlots } from "@mijn-ui/react-core";
-import { useTVUnstyled } from "@mijn-ui/react-hooks";
 import {
-  avatarGroupStyles,
-  avatarStyles,
-  cn
-} from "@mijn-ui/react-theme";
-import { createContext } from "@mijn-ui/react-utilities";
+  createContext,
+  createTVUnstyledSlots,
+  useTVUnstyled
+} from "@mijn-ui/react-core";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cnBase, tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
+var avatarGroupStyles = tv({
+  slots: {
+    group: "flex items-center justify-center -space-x-2",
+    groupRemainChildren: "text-secondary-foreground ml-1.5! flex items-center justify-center text-xs"
+  }
+});
+var avatarStyles = tv({
+  slots: {
+    base: "relative flex shrink-0 items-center justify-center",
+    image: "aspect-square size-full rounded-full object-cover",
+    fallback: "border-outline-brand-subtle bg-bg-brand-subtle text-on-bg-brand-subtle flex size-full items-center justify-center rounded-full border font-medium leading-none"
+  },
+  variants: {
+    size: {
+      xl: "size-20 text-3xl",
+      lg: "size-16 text-2xl",
+      md: "size-14 text-xl",
+      sm: "size-12 text-base",
+      xs: "size-10 text-sm",
+      "2xs": "size-8 text-xs"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 var [AvatarProvider, useAvatarContext] = createContext({
@@ -44,3 +68,3 @@ name: "AvatarContext",
     {
-      className: group({ className: cn(classNames?.group, className) }),
+      className: group({ className: cnBase(classNames?.group, className) }),
       ...props,
@@ -77,3 +101,3 @@ children: [
     {
-      className: base({ className: cn(classNames?.base, className) }),
+      className: base({ className: cnBase(classNames?.base, className) }),
       ...props
@@ -89,3 +113,3 @@ }
       className: image({
-        className: cn(classNames?.image, className)
+        className: cnBase(classNames?.image, className)
       }),
@@ -106,3 +130,3 @@ ...props
       className: fallback({
-        className: cn(classNames?.fallback, className)
+        className: cnBase(classNames?.fallback, className)
       }),
@@ -118,3 +142,5 @@ ...props
   AvatarImage,
+  avatarGroupStyles,
+  avatarStyles,
   useAvatarStyles
 };

dist/metafile-esm.json

@@ -1,1 +0,1 @@
-{"inputs":{"src/avatar.tsx":{"bytes":5038,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@mijn-ui/react-core","kind":"import-statement","external":true},{"path":"@mijn-ui/react-hooks","kind":"import-statement","external":true},{"path":"@mijn-ui/react-theme","kind":"import-statement","external":true},{"path":"@mijn-ui/react-utilities","kind":"import-statement","external":true},{"path":"@radix-ui/react-avatar","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":25,"imports":[{"path":"src/avatar.tsx","kind":"import-statement","original":"./avatar"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@mijn-ui/react-core","kind":"import-statement","external":true},{"path":"@mijn-ui/react-hooks","kind":"import-statement","external":true},{"path":"@mijn-ui/react-theme","kind":"import-statement","external":true},{"path":"@mijn-ui/react-utilities","kind":"import-statement","external":true},{"path":"@radix-ui/react-avatar","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"exports":["Avatar","AvatarFallback","AvatarGroup","AvatarImage","useAvatarStyles"],"entryPoint":"src/index.ts","inputs":{"src/avatar.tsx":{"bytesInOutput":2824},"src/index.ts":{"bytesInOutput":0}},"bytes":2945}}}
+{"inputs":{"src/avatar.tsx":{"bytes":6095,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@mijn-ui/react-core","kind":"import-statement","external":true},{"path":"@mijn-ui/react-core","kind":"import-statement","external":true},{"path":"@radix-ui/react-avatar","kind":"import-statement","external":true},{"path":"tailwind-variants","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":25,"imports":[{"path":"src/avatar.tsx","kind":"import-statement","original":"./avatar"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@mijn-ui/react-core","kind":"import-statement","external":true},{"path":"@radix-ui/react-avatar","kind":"import-statement","external":true},{"path":"tailwind-variants","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"exports":["Avatar","AvatarFallback","AvatarGroup","AvatarImage","avatarGroupStyles","avatarStyles","useAvatarStyles"],"entryPoint":"src/index.ts","inputs":{"src/avatar.tsx":{"bytesInOutput":3541},"src/index.ts":{"bytesInOutput":0}},"bytes":3699}}}

package.json

 {
   "name": "@mijn-ui/react-avatar",
   "author": "Htet Aung Lin<[e-mail]>",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "homepage": "https://mijn-ui.vercel.app",
@@ -28,4 +28,3 @@ "license": "MIT",
     "@types/react-dom": "^19.0.0",
-    "@mijn-ui/react-core": "0.2.0",
-    "@mijn-ui/react-theme": "0.2.0",
+    "@mijn-ui/react-core": "0.3.0",
     "eslint-config-custom": "0.0.1",
@@ -36,5 +35,3 @@ "tsconfig": "0.0.0",
   "dependencies": {
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@mijn-ui/react-utilities": "0.0.9",
-    "@mijn-ui/react-hooks": "0.0.19"
+    "@radix-ui/react-avatar": "^1.1.2"
   },
@@ -44,4 +41,5 @@ "peerDependencies": {
     "react-dom": "^19.0",
-    "@mijn-ui/react-theme": "^0.2.0",
-    "@mijn-ui/react-core": "^0.2.0"
+    "@mijn-ui/react-core": "^0.3.0",
+    "tailwind-merge": "^3.0.0",
+    "tailwind-variants": "^3.0.0"
   },
@@ -48,0 +46,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

12372

27.6%

Dependency count

6

-14.29%

Dev dependency count

9

-10%

Lines of code

252

73.79%

Dependency changes

• + Added

  @mijn-ui/react-core@0.3.0
  (transitive)

• + Added

  tailwind-merge@3.6.0
  (transitive)

• + Added

  tailwind-variants@3.2.2
  (transitive)

• - Removed

  @mijn-ui/react-hooks@0.0.19

• - Removed

  @mijn-ui/react-utilities@0.0.9

• - Removed

  @mijn-ui/react-core@0.2.0
  (transitive)

• - Removed

  @mijn-ui/react-hooks@0.0.19
  (transitive)

• - Removed

  @mijn-ui/react-theme@0.2.1
  (transitive)

• - Removed

  @mijn-ui/react-utilities@0.0.9
  (transitive)

• - Removed

  deepmerge@4.3.1
  (transitive)

• - Removed

  flat@6.0.1
  (transitive)

• - Removed

  tailwind-merge@2.5.42.6.1
  (transitive)

• - Removed

  tailwind-variants@0.3.1
  (transitive)

• - Removed

  tailwindcss-animate@1.0.7
  (transitive)