@stackshift-ui/avatar 6.0.2 → 6.0.4-beta.0

package/dist/avatar.js

@@ -1 +1 @@
-"use strict";var L=Object.create;var l=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},h=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of A(t))!T.call(e,s)&&s!==a&&l(e,s,{get:()=>t[s],enumerable:!(r=j(t,s))||r.enumerable});return e};var I=(e,t,a)=>(a=e!=null?L(M(e)):{},h(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),P=e=>h(l({},"__esModule",{value:!0}),e);var $={};F($,{Avatar:()=>N});module.exports=P($);var m=require("@stackshift-ui/flex"),c=require("@stackshift-ui/image"),n=require("@stackshift-ui/system"),y=I(require("classnames")),b=require("react"),o=require("react/jsx-runtime"),p="Avatar",N=({src:e,alt:t="image",size:a="sm",text:r,children:s,className:v,as:w,...x})=>{var g;let{[p]:S=n.DefaultComponent}=(0,n.useStackShiftUIComponents)(),[d,f]=(0,b.useState)(!1),i=typeof a=="number"?`${a}px`:`${{sm:40,md:80,lg:120,xl:160}[a]}px`,u=r?(g=r==null?void 0:r.split(" "))==null?void 0:g.reduce((z,C)=>z+C[0],""):"AB";return(0,o.jsxs)(S,{as:w,className:(0,y.default)("relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary-foreground",v),style:{maxWidth:i},...x,"data-testid":p,children:[(!d||!e)&&(0,o.jsx)(m.Flex,{align:"center",justify:"center",className:"w-full h-full bg-primary-foreground",children:(0,o.jsx)("p",{style:{fontSize:`calc(${i}/2)`},className:"text-white",children:u})}),e&&(0,o.jsx)(c.Image,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:t,width:100,height:100,onLoad:()=>f(!0)}),(!d||!e)&&(0,o.jsx)(m.Flex,{align:"center",justify:"center",className:"w-full h-full bg-primary-foreground",children:(0,o.jsx)("p",{style:{fontSize:`calc(${i}/2)`},className:"text-white",children:u})}),e&&(0,o.jsx)(c.Image,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:t,width:100,height:100,onLoad:()=>f(!0)})]})};N.displayName=p;0&&(module.exports={Avatar});
+"use strict";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},c=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of M(t))!I.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(s=L(t,r))||s.enumerable});return e};var E=(e,t,a)=>(a=e!=null?A(T(e)):{},c(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),F=e=>c(l({},"__esModule",{value:!0}),e);var H={};P(H,{Avatar:()=>y});module.exports=F(H);var d=require("@stackshift-ui/flex"),f=require("@stackshift-ui/image"),m=require("@stackshift-ui/system"),g=E(require("classnames")),u=require("react"),o=require("react/jsx-runtime"),i="Avatar",y=({src:e,alt:t="image",size:a="sm",text:s,children:r,className:h,as:b,...N})=>{var p;let{[i]:v=m.DefaultComponent}=(0,m.useStackShiftUIComponents)(),[x,C]=(0,u.useState)(!1),n=typeof a=="number"?`${a}px`:`${{sm:40,md:80,lg:120,xl:160}[a]}px`,S=s?(p=s==null?void 0:s.split(" "))==null?void 0:p.reduce((z,w)=>z+w[0],""):"AB";return(0,o.jsxs)(v,{as:b,className:(0,g.default)("relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary",h),style:{maxWidth:n},...N,"data-testid":i,children:[(!x||!e)&&(0,o.jsx)(d.Flex,{align:"center",justify:"center",className:"w-full h-full bg-primary",children:(0,o.jsx)("p",{style:{fontSize:`calc(${n}/2)`},className:"text-white",children:S})}),e&&(0,o.jsx)(f.Image,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:t,width:100,height:100,onLoad:()=>C(!0)})]})};y.displayName=i;0&&(module.exports={Avatar});

package/dist/avatar.mjs

@@ -1 +1 @@
-import{a}from"./chunk-ZGTLWTPQ.mjs";export{a as Avatar};
+import{a}from"./chunk-ZPYNVPAC.mjs";export{a as Avatar};

package/dist/chunk-ZPYNVPAC.mjs

@@ -0,0 +1 @@
+import{Flex as h}from"@stackshift-ui/flex";import{Image as b}from"@stackshift-ui/image";import{DefaultComponent as N,useStackShiftUIComponents as v}from"@stackshift-ui/system";import x from"classnames";import{useState as C}from"react";import{jsx as s,jsxs as z}from"react/jsx-runtime";var r="Avatar",S=({src:t,alt:m="image",size:a="sm",text:e,children:w,className:i,as:n,...p})=>{var l;let{[r]:c=N}=v(),[d,f]=C(!1),o=typeof a=="number"?`${a}px`:`${{sm:40,md:80,lg:120,xl:160}[a]}px`,g=e?(l=e==null?void 0:e.split(" "))==null?void 0:l.reduce((u,y)=>u+y[0],""):"AB";return z(c,{as:n,className:x("relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary",i),style:{maxWidth:o},...p,"data-testid":r,children:[(!d||!t)&&s(h,{align:"center",justify:"center",className:"w-full h-full bg-primary",children:s("p",{style:{fontSize:`calc(${o}/2)`},className:"text-white",children:g})}),t&&s(b,{className:"object-cover object-center w-[100%] h-[100%]",src:t,alt:m,width:100,height:100,onLoad:()=>f(!0)})]})};S.displayName=r;export{S as a};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var L=Object.create;var l=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},h=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of A(t))!T.call(e,s)&&s!==a&&l(e,s,{get:()=>t[s],enumerable:!(r=j(t,s))||r.enumerable});return e};var I=(e,t,a)=>(a=e!=null?L(M(e)):{},h(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),P=e=>h(l({},"__esModule",{value:!0}),e);var $={};F($,{Avatar:()=>N});module.exports=P($);var m=require("@stackshift-ui/flex"),c=require("@stackshift-ui/image"),n=require("@stackshift-ui/system"),y=I(require("classnames")),b=require("react"),o=require("react/jsx-runtime"),p="Avatar",N=({src:e,alt:t="image",size:a="sm",text:r,children:s,className:x,as:v,...w})=>{var g;let{[p]:S=n.DefaultComponent}=(0,n.useStackShiftUIComponents)(),[d,f]=(0,b.useState)(!1),i=typeof a=="number"?`${a}px`:`${{sm:40,md:80,lg:120,xl:160}[a]}px`,u=r?(g=r==null?void 0:r.split(" "))==null?void 0:g.reduce((z,C)=>z+C[0],""):"AB";return(0,o.jsxs)(S,{as:v,className:(0,y.default)("relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary-foreground",x),style:{maxWidth:i},...w,"data-testid":p,children:[(!d||!e)&&(0,o.jsx)(m.Flex,{align:"center",justify:"center",className:"w-full h-full bg-primary-foreground",children:(0,o.jsx)("p",{style:{fontSize:`calc(${i}/2)`},className:"text-white",children:u})}),e&&(0,o.jsx)(c.Image,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:t,width:100,height:100,onLoad:()=>f(!0)}),(!d||!e)&&(0,o.jsx)(m.Flex,{align:"center",justify:"center",className:"w-full h-full bg-primary-foreground",children:(0,o.jsx)("p",{style:{fontSize:`calc(${i}/2)`},className:"text-white",children:u})}),e&&(0,o.jsx)(c.Image,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:t,width:100,height:100,onLoad:()=>f(!0)})]})};N.displayName=p;0&&(module.exports={Avatar});
+"use strict";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},c=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of M(t))!I.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(s=L(t,r))||s.enumerable});return e};var E=(e,t,a)=>(a=e!=null?A(T(e)):{},c(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),F=e=>c(l({},"__esModule",{value:!0}),e);var H={};P(H,{Avatar:()=>y});module.exports=F(H);var d=require("@stackshift-ui/flex"),f=require("@stackshift-ui/image"),m=require("@stackshift-ui/system"),u=E(require("classnames")),g=require("react"),o=require("react/jsx-runtime"),i="Avatar",y=({src:e,alt:t="image",size:a="sm",text:s,children:r,className:h,as:b,...N})=>{var p;let{[i]:v=m.DefaultComponent}=(0,m.useStackShiftUIComponents)(),[x,C]=(0,g.useState)(!1),n=typeof a=="number"?`${a}px`:`${{sm:40,md:80,lg:120,xl:160}[a]}px`,S=s?(p=s==null?void 0:s.split(" "))==null?void 0:p.reduce((z,w)=>z+w[0],""):"AB";return(0,o.jsxs)(v,{as:b,className:(0,u.default)("relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary",h),style:{maxWidth:n},...N,"data-testid":i,children:[(!x||!e)&&(0,o.jsx)(d.Flex,{align:"center",justify:"center",className:"w-full h-full bg-primary",children:(0,o.jsx)("p",{style:{fontSize:`calc(${n}/2)`},className:"text-white",children:S})}),e&&(0,o.jsx)(f.Image,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:t,width:100,height:100,onLoad:()=>C(!0)})]})};y.displayName=i;0&&(module.exports={Avatar});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-ZGTLWTPQ.mjs";export{e as Avatar};
+"use strict";import{a as e}from"./chunk-ZPYNVPAC.mjs";export{e as Avatar};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/avatar",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.4-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,15 +29,15 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.2",
-    "@stackshift-ui/typescript-config": "6.0.2"
+    "@stackshift-ui/typescript-config": "6.0.2",
+    "@stackshift-ui/eslint-config": "6.0.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/flex": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2"
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3",
+    "@stackshift-ui/image": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/avatar.test.tsx

@@ -0,0 +1,24 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Avatar } from "./avatar";
+
+describe.concurrent("avatar", () => {
+  afterEach(cleanup);
+
+  test("Common: Avatar - test if renders without errors", ({ expect }) => {
+    const clx = "avatar-class";
+
+    render(
+      <Avatar
+        className={clx}
+        src="https://via.placeholder.com/150"
+        alt="Sample Avatar"
+        text="StackShift"
+      />,
+    );
+    const elements = screen.getAllByTestId("div");
+    elements.forEach(element => {
+      expect(element.classList).toBeDefined();
+    });
+  });
+});

package/src/avatar.tsx

@@ -0,0 +1,77 @@
+import { Flex } from "@stackshift-ui/flex";
+import { Image } from "@stackshift-ui/image";
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import cn from "classnames";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import { useState } from "react";
+
+type ImageSize = "sm" | "md" | "lg" | "xl";
+
+export interface AvatarProps extends Omit<HTMLProps<HTMLElement>, "as" | "size"> {
+  src: string;
+  alt: string;
+  size?: ImageSize | number;
+  text?: string;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "Avatar";
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt = "image",
+  size = "sm",
+  text,
+  children,
+  className,
+  as,
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const [loaded, setLoaded] = useState(false);
+  const sizeMap = {
+    sm: 40,
+    md: 80,
+    lg: 120,
+    xl: 160,
+  };
+  const avatarSize = typeof size === "number" ? `${size}px` : `${sizeMap[size]}px`;
+  const initials = text ? text?.split(" ")?.reduce((acc, curr) => acc + curr[0], "") : "AB";
+  const baseClass = `relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary`;
+
+  return (
+    <Component
+      as={as}
+      className={cn(baseClass, className)}
+      style={{ maxWidth: avatarSize }}
+      {...props}
+      data-testid={displayName}>
+      {(!loaded || !src) && (
+        <Flex align="center" justify="center" className="w-full h-full bg-primary">
+          <p
+            style={{
+              fontSize: `calc(${avatarSize}/2)`,
+            }}
+            className="text-white">
+            {initials}
+          </p>
+        </Flex>
+      )}
+      {src && (
+        <Image
+          className="object-cover object-center w-[100%] h-[100%]"
+          src={src}
+          alt={alt}
+          width={100}
+          height={100}
+          onLoad={() => setLoaded(true)}
+        />
+      )}
+    </Component>
+  );
+};
+
+Avatar.displayName = displayName;

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./avatar";

package/dist/chunk-ZGTLWTPQ.mjs

@@ -1 +0,0 @@
-import{Flex as p}from"@stackshift-ui/flex";import{Image as d}from"@stackshift-ui/image";import{DefaultComponent as N,useStackShiftUIComponents as v}from"@stackshift-ui/system";import w from"classnames";import{useState as x}from"react";import{jsx as t,jsxs as z}from"react/jsx-runtime";var s="Avatar",S=({src:e,alt:l="image",size:o="sm",text:a,children:C,className:f,as:u,...g})=>{var c;let{[s]:h=N}=v(),[n,i]=x(!1),r=typeof o=="number"?`${o}px`:`${{sm:40,md:80,lg:120,xl:160}[o]}px`,m=a?(c=a==null?void 0:a.split(" "))==null?void 0:c.reduce((y,b)=>y+b[0],""):"AB";return z(h,{as:u,className:w("relative flex rounded-full aspect-square overflow-hidden border-2 border-solid border-primary-foreground",f),style:{maxWidth:r},...g,"data-testid":s,children:[(!n||!e)&&t(p,{align:"center",justify:"center",className:"w-full h-full bg-primary-foreground",children:t("p",{style:{fontSize:`calc(${r}/2)`},className:"text-white",children:m})}),e&&t(d,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:l,width:100,height:100,onLoad:()=>i(!0)}),(!n||!e)&&t(p,{align:"center",justify:"center",className:"w-full h-full bg-primary-foreground",children:t("p",{style:{fontSize:`calc(${r}/2)`},className:"text-white",children:m})}),e&&t(d,{className:"object-cover object-center w-[100%] h-[100%]",src:e,alt:l,width:100,height:100,onLoad:()=>i(!0)})]})};S.displayName=s;export{S as a};