@julseb-lib/react 0.0.27 → 0.0.30

package/dist/lib/components/Avatar/AvatarFunction.tsx

@@ -7,7 +7,7 @@ import { Image } from "../../"
 import { appendStyles } from "../../lib-utils"
 import { LibIcon } from "../LibIcon"
 import type { LibComponentBase } from "../../types"
-import { StyledAvatar } from "./styles"
+import { StyledAvatar, StyledFallback } from "./styles"
 import type { ILibAvatar } from "./types"
 
 export const AvatarFunction = forwardRef<
@@ -28,6 +28,7 @@ export const AvatarFunction = forwardRef<
         | "icon"
         | "iconSize"
         | "iconBaseUrl"
+        | "fontSize"
     > &
         LibComponentBase<HTMLSpanElement> & {
             hasBadge?: boolean
@@ -50,6 +51,7 @@ export const AvatarFunction = forwardRef<
             icon,
             iconSize,
             iconBaseUrl,
+            fontSize = "body",
             ...rest
         },
         ref
@@ -78,6 +80,7 @@ export const AvatarFunction = forwardRef<
                 $borderRadius={borderRadius}
                 $size={size}
                 $contentColor={contentColor}
+                $fontSize={fontSize}
                 {...rest}
             >
                 {img && (
@@ -89,8 +92,28 @@ export const AvatarFunction = forwardRef<
                         width="100%"
                         height="100%"
                         fit="cover"
+                        imgFallback={
+                            typeof img === "object"
+                                ? { text: img.fallback || "", fontSize }
+                                : undefined
+                        }
                         fallback={
-                            typeof img === "object" ? img.fallback : undefined
+                            typeof img === "object" ? (
+                                // @ts-ignore
+                                <StyledFallback
+                                    $backgroundColor={
+                                        img.fallbackBackgroundColor ??
+                                        backgroundColor
+                                    }
+                                    $fontColor={
+                                        img.fallbackFontColor ?? contentColor
+                                    }
+                                    $size={size}
+                                    $fontSize={img.fallbackFontSize ?? fontSize}
+                                >
+                                    {img.fallback}
+                                </StyledFallback>
+                            ) : undefined
                         }
                     />
                 )}

package/dist/lib/components/Avatar/styles.tsx

@@ -2,13 +2,21 @@
 
 import type { FC } from "react"
 import styled, { css } from "styled-components"
-import { setDefaultTheme, Badge, Mixins, FONT_WEIGHTS, SPACERS } from "../../"
+import {
+    setDefaultTheme,
+    Badge,
+    Mixins,
+    FONT_WEIGHTS,
+    SPACERS,
+    stringifyPx,
+} from "../../"
 import type {
     LibAllColors,
     ILibBorder,
     ILibRadius,
     LibSpacers,
     ILibOutline,
+    LibFontSizes,
 } from "../../types"
 
 const Common = ({
@@ -52,6 +60,7 @@ const StyledAvatar = styled.span<{
     $borderRadius?: ILibRadius
     $backgroundColor: LibAllColors
     $contentColor: LibAllColors
+    $fontSize: LibFontSizes
 }>`
     ${Common}
     ${({ $border }) => Mixins.Border($border)};
@@ -61,6 +70,7 @@ const StyledAvatar = styled.span<{
     font-weight: ${FONT_WEIGHTS.BLACK};
     line-height: var(--avatar-size);
     text-transform: uppercase;
+    font-size: ${({ $fontSize }) => Mixins.FontSize($fontSize)};
 `
 
 const StyledBadge = styled(Badge)<{
@@ -82,6 +92,26 @@ const StyledBadge = styled(Badge)<{
     }
 ` as FC<any>
 
-setDefaultTheme([StyledAvatarContainer, StyledAvatar, StyledBadge])
+const StyledFallback = styled.span<{
+    $size: number
+    $backgroundColor: LibAllColors
+    $fontColor: LibAllColors
+    $fontSize: LibFontSizes
+}>`
+    width: ${({ $size }) => stringifyPx($size)};
+    height: ${({ $size }) => stringifyPx($size)};
+    font-weight: ${FONT_WEIGHTS.BLACK};
+    background-color: ${({ $backgroundColor, theme }) =>
+        Mixins.AllColors($backgroundColor, theme)};
+    color: ${({ $fontColor, theme }) => Mixins.AllColors($fontColor, theme)};
+    font-size: ${({ $fontSize }) => Mixins.FontSize($fontSize)};
+`
+
+setDefaultTheme([
+    StyledAvatarContainer,
+    StyledAvatar,
+    StyledBadge,
+    StyledFallback,
+])
 
-export { StyledAvatarContainer, StyledAvatar, StyledBadge }
+export { StyledAvatarContainer, StyledAvatar, StyledBadge, StyledFallback }

package/dist/lib/components/Avatar/types.ts

@@ -9,6 +9,7 @@ import type {
     ILibPadding,
     LibIcon,
     LibAvatarBadgePosition,
+    LibFontSizes,
 } from "../../types"
 
 interface ILibAvatarBase extends LibComponentBase<HTMLSpanElement> {
@@ -18,8 +19,18 @@ interface ILibAvatarBase extends LibComponentBase<HTMLSpanElement> {
 }
 
 interface AvatarWithImage extends ILibAvatarBase {
-    img: string | { src: string; alt: string; fallback?: string | JSX.Element }
+    img:
+        | string
+        | {
+              src: string
+              alt: string
+              fallback?: string
+              fallbackFontSize?: LibFontSizes
+              fallbackFontColor?: LibAllColors
+              fallbackBackgroundColor?: LibAllColors
+          }
     letter?: never
+    fontSize?: never
     icon?: never
     iconSize?: never
     iconBaseUrl?: never
@@ -30,6 +41,7 @@ interface AvatarWithImage extends ILibAvatarBase {
 interface AvatarWithLetter extends ILibAvatarBase {
     img?: never
     letter: string
+    fontSize?: LibFontSizes
     icon?: never
     iconSize?: never
     iconBaseUrl?: never
@@ -40,6 +52,7 @@ interface AvatarWithLetter extends ILibAvatarBase {
 interface AvatarWithIcon extends ILibAvatarBase {
     img?: never
     letter?: never
+    fontSize?: never
     icon: LibIcon
     iconSize?: number
     iconBaseUrl?: string

package/dist/lib/components/Image/ImageFunction.tsx

@@ -19,6 +19,8 @@ export const ImageFunction = forwardRef<HTMLImageElement, ILibImage>(
             height = "auto",
             borderRadius,
             fit,
+            loading = "lazy",
+            imgFallback,
             ...rest
         },
         ref
@@ -33,11 +35,16 @@ export const ImageFunction = forwardRef<HTMLImageElement, ILibImage>(
                     ref={ref}
                     src={src}
                     alt={alt}
+                    loading={loading}
+                    data-fallback={imgFallback?.text}
                     $aspectRatio={aspectRatio}
                     $width={width}
                     $height={height}
                     $borderRadius={borderRadius}
                     $fit={fit}
+                    $fallbackBackground={imgFallback?.background ?? "primary"}
+                    $fallbackTextColor={imgFallback?.textColor ?? "background"}
+                    $fallbackFontSize={imgFallback?.fontSize ?? "body"}
                     {...rest}
                 />
             </Suspense>

package/dist/lib/components/Image/styles.tsx

@@ -3,12 +3,13 @@
 import type { FC } from "react"
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Text, Mixins, SPACERS } from "../../"
+import { setDefaultTheme, Text, Mixins, SPACERS, FONT_WEIGHTS } from "../../"
 import type {
     LibAllColors,
     ILibRadius,
     CssObjectFit,
     LibImageBackgroundOverlay,
+    LibFontSizes,
 } from "../../types"
 
 const StyledImage = styled.img<{
@@ -17,6 +18,9 @@ const StyledImage = styled.img<{
     $borderRadius?: ILibRadius
     $fit?: CssObjectFit
     $aspectRatio?: string
+    $fallbackBackground: LibAllColors
+    $fallbackTextColor: LibAllColors
+    $fallbackFontSize?: LibFontSizes
 }>`
     display: block;
     width: ${({ $width }) => stringifyPx($width)};
@@ -26,6 +30,26 @@ const StyledImage = styled.img<{
     position: relative;
     z-index: 0;
     ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)}
+
+    &[alt]:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        ${Mixins.Flexbox({
+            $alignItems: "center",
+            $justifyContent: "center",
+        })};
+        width: 100%;
+        height: 100%;
+        background-color: ${({ $fallbackBackground, theme }) =>
+            Mixins.AllColors($fallbackBackground, theme)};
+        color: ${({ $fallbackTextColor, theme }) =>
+            Mixins.AllColors($fallbackTextColor, theme)};
+        content: attr(data-fallback);
+        font-weight: ${FONT_WEIGHTS.BOLD};
+        font-size: ${({ $fallbackFontSize }) =>
+            Mixins.FontSize($fallbackFontSize)};
+    }
 `
 
 const ImgContainer = styled.figure<{

package/dist/lib/components/Image/types.ts

@@ -7,6 +7,7 @@ import type {
     CssObjectFit,
     LibAllColors,
     LibImageBackgroundOverlay,
+    LibFontSizes,
 } from "../../types"
 
 interface ILibImageBase
@@ -16,6 +17,12 @@ interface ILibImageBase
     fit?: CssObjectFit
     aspectRatio?: string
     fallback?: JSX.Element | string
+    imgFallback?: {
+        text: string
+        background?: LibAllColors
+        textColor?: LibAllColors
+        fontSize?: LibFontSizes
+    }
     children?: never
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.27",
+    "version": "0.0.30",
     "type": "module",
     "license": "MIT",
     "scripts": {