@szum-tech/design-system 1.4.0 → 1.5.0

package/dist/index.d.ts

@@ -1,7 +1,35 @@
-import * as React from 'react';
-import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React from 'react';
+import React__default from 'react';
+
+declare const avatarCva: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+
+declare type AvatarCvaProps = VariantProps<typeof avatarCva>;
+declare type AvatarSizeType = NonNullable<AvatarCvaProps["size"]>;
+
+declare type AvatarProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Defines avatar image alt
+     */
+    alt?: string;
+    /**
+     * Defines background color
+     */
+    bg?: `bg-${string}` | `bg-${string}-${number}`;
+    /**
+     * Defines avatar size
+     * @default 'md'
+     */
+    size?: AvatarSizeType;
+    /**
+     * Defines avatar image src
+     */
+    src?: string;
+};
+declare function Avatar({ alt, bg, children, size, src, ...props }: AvatarProps): JSX.Element;
 
 declare const buttonCva: (props?: ({
     color?: "neutral" | "primary" | "success" | "warning" | "error" | null | undefined;
@@ -68,4 +96,4 @@ declare function ThemeProvider({ children, defaultTheme, theme }: ThemeProviderP
 
 declare const useTheme: () => ThemeContextType;
 
-export { _default as Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };
+export { Avatar, AvatarProps, AvatarSizeType, _default as Button, ThemeContext, ThemeContextType, ThemeProvider, ThemeProviderProps, ThemeType, useTheme };

package/dist/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React3 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var React3 = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,7 +29,34 @@ function _interopNamespace(e) {
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var React3__default = /*#__PURE__*/_interopDefaultLegacy(React3);
 
-// src/components/Button/Button.tsx
+// src/components/Avatar/Avatar.styles.ts
+var avatarCva = classVarianceAuthority.cva(
+  "select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",
+  {
+    variants: {
+      size: {
+        sm: "h-6 w-6 text-lg",
+        md: "h-10 w-10 text-xl",
+        lg: "h-14 w-14 text-2xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Avatar({ alt, bg, children, size = "md", src, ...props }) {
+  const avatarStyles = avatarCva({ size, className: bg });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: avatarStyles,
+    ...props,
+    children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", {
+      className: "h-full w-full rounded object-cover object-center",
+      alt,
+      src
+    }) : children
+  });
+}
 var buttonCva = classVarianceAuthority.cva(
   "border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
   {
@@ -167,7 +194,7 @@ var Button_default = React3__namespace.forwardRef(function({
   const Component = as || "button";
   const buttonRootStyles = buttonCva({ size, variant, color });
   return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-    className: buttonRootStyles + " ",
+    className: buttonRootStyles,
     ref,
     ...restProps,
     children
@@ -209,6 +236,7 @@ function ThemeProvider({ children, defaultTheme, theme }) {
 // src/hooks/useTheme/useTheme.tsx
 var useTheme = () => React3__default["default"].useContext(ThemeContext);
 
+exports.Avatar = Avatar;
 exports.Button = Button_default;
 exports.ThemeContext = ThemeContext;
 exports.ThemeProvider = ThemeProvider;

package/dist/index.mjs

@@ -1,9 +1,36 @@
-import * as React3 from 'react';
-import React3__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
+import * as React3 from 'react';
+import React3__default from 'react';
 
-// src/components/Button/Button.tsx
+// src/components/Avatar/Avatar.styles.ts
+var avatarCva = cva(
+  "select-none rounded font-semibold leading-none justify-center flex items-center bg-gray-500 text-white dark:text-black",
+  {
+    variants: {
+      size: {
+        sm: "h-6 w-6 text-lg",
+        md: "h-10 w-10 text-xl",
+        lg: "h-14 w-14 text-2xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Avatar({ alt, bg, children, size = "md", src, ...props }) {
+  const avatarStyles = avatarCva({ size, className: bg });
+  return /* @__PURE__ */ jsx("div", {
+    className: avatarStyles,
+    ...props,
+    children: src ? /* @__PURE__ */ jsx("img", {
+      className: "h-full w-full rounded object-cover object-center",
+      alt,
+      src
+    }) : children
+  });
+}
 var buttonCva = cva(
   "border rounded font-sans font-medium leading-[1.75] tracking-[.02857em]",
   {
@@ -141,7 +168,7 @@ var Button_default = React3.forwardRef(function({
   const Component = as || "button";
   const buttonRootStyles = buttonCva({ size, variant, color });
   return /* @__PURE__ */ jsx(Component, {
-    className: buttonRootStyles + " ",
+    className: buttonRootStyles,
     ref,
     ...restProps,
     children
@@ -183,4 +210,4 @@ function ThemeProvider({ children, defaultTheme, theme }) {
 // src/hooks/useTheme/useTheme.tsx
 var useTheme = () => React3__default.useContext(ThemeContext);
 
-export { Button_default as Button, ThemeContext, ThemeProvider, useTheme };
+export { Avatar, Button_default as Button, ThemeContext, ThemeProvider, useTheme };

package/package.json

@@ -5,6 +5,7 @@
   },
   "description": "Szum-Tech design system with tailwindcss support",
   "dependencies": {
+    "@heroicons/react": "^2.0.15",
     "class-variance-authority": "^0.4.0",
     "tailwindcss": "^3.2.4"
   },
@@ -96,7 +97,7 @@
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "peerDependencies": {
     "@tailwindcss/container-queries": "^0.1.0",
     "react": "^18.2.0",