@julseb-lib/react 0.0.26 → 0.0.28

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

@@ -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,6 +92,11 @@ 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
                         }

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

@@ -9,6 +9,7 @@ import type {
     ILibRadius,
     LibSpacers,
     ILibOutline,
+    LibFontSizes,
 } from "../../types"
 
 const Common = ({
@@ -52,6 +53,7 @@ const StyledAvatar = styled.span<{
     $borderRadius?: ILibRadius
     $backgroundColor: LibAllColors
     $contentColor: LibAllColors
+    $fontSize: LibFontSizes
 }>`
     ${Common}
     ${({ $border }) => Mixins.Border($border)};
@@ -61,6 +63,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)<{

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,15 @@ interface ILibAvatarBase extends LibComponentBase<HTMLSpanElement> {
 }
 
 interface AvatarWithImage extends ILibAvatarBase {
-    img: string | { src: string; alt: string; fallback?: string }
+    img:
+        | string
+        | {
+              src: string
+              alt: string
+              fallback?: string
+          }
     letter?: never
+    fontSize?: never
     icon?: never
     iconSize?: never
     iconBaseUrl?: never
@@ -30,6 +38,7 @@ interface AvatarWithImage extends ILibAvatarBase {
 interface AvatarWithLetter extends ILibAvatarBase {
     img?: never
     letter: string
+    fontSize?: LibFontSizes
     icon?: never
     iconSize?: never
     iconBaseUrl?: never
@@ -40,6 +49,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.26",
+    "version": "0.0.28",
     "type": "module",
     "license": "MIT",
     "scripts": {