@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/lib/components/Avatar/avatar.tokens.ts

@@ -0,0 +1,450 @@
+import type { CSSObject } from 'styled-components'
+import { type ThemeType } from '../../tokens'
+import { AvatarSize, AvatarShape } from './types'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type AvatarState = 'default' | 'online'
+export type AvatarVariant = 'withImage' | 'withoutImage'
+
+/**
+ * Avatar Tokens following the design system pattern
+ *
+ * Pattern: component.[target].CSSProp.[size].[variant].[subType].[state].value
+ *
+ * Structure:
+ * - gap: Spacing between avatar and slots
+ * - avatar: Main avatar container properties
+ * - text: Fallback text styling
+ * - indicator: Online status indicator
+ * - slot: Leading and trailing slot styling
+ */
+export type AvatarTokensType = {
+    gap: CSSObject['gap']
+
+    container: {
+        // Pattern: container.size.[size] (size-dependent)
+        size: {
+            [key in AvatarSize]: {
+                width: CSSObject['width']
+                height: CSSObject['height']
+            }
+        }
+
+        // Pattern: container.backgroundColor.[variant].[state]
+        backgroundColor: {
+            [key in AvatarVariant]: {
+                [key in AvatarState]: CSSObject['backgroundColor']
+            }
+        }
+
+        // Pattern: container.border.[variant].[state]
+        border: {
+            [key in AvatarVariant]: {
+                [key in AvatarState]: CSSObject['border']
+            }
+        }
+
+        // Pattern: container.borderRadius.[shape]
+        borderRadius: {
+            [key in AvatarShape]: CSSObject['borderRadius']
+        }
+    }
+
+    text: {
+        // Pattern: text.color.[state]
+        color: {
+            [key in AvatarState]: CSSObject['color']
+        }
+        // Pattern: text.fontSize.[size]
+        fontSize: { [key in AvatarSize]: CSSObject['fontSize'] }
+        // Pattern: text.fontWeight.[size]
+        fontWeight: { [key in AvatarSize]: CSSObject['fontWeight'] }
+    }
+
+    indicator: {
+        // Pattern: indicator.backgroundColor.[state]
+        backgroundColor: {
+            [key in AvatarState]: CSSObject['backgroundColor']
+        }
+        // Pattern: indicator.border.[state]
+        border: {
+            [key in AvatarSize]: {
+                [key in AvatarState]: {
+                    color: CSSObject['borderColor']
+                    width: CSSObject['borderWidth']
+                }
+            }
+        }
+        // Pattern: indicator.size.[size]
+        size: {
+            [key in AvatarSize]: {
+                width: CSSObject['width']
+                height: CSSObject['height']
+            }
+        }
+        // Pattern: indicator.borderRadius
+        borderRadius: CSSObject['borderRadius']
+        // Pattern: indicator.boxShadow
+        boxShadow: CSSObject['boxShadow']
+    }
+
+    slot: {
+        // Pattern: slot.spacing
+        spacing: CSSObject['margin']
+        // Pattern: slot.color.[state]
+        color: {
+            [key in AvatarState]: CSSObject['color']
+        }
+    }
+}
+
+export type ResponsiveAvatarTokens = {
+    [key in keyof BreakpointType]: AvatarTokensType
+}
+
+export const getAvatarTokens = (
+    foundationToken: ThemeType
+): ResponsiveAvatarTokens => {
+    return {
+        sm: {
+            gap: foundationToken.unit[8],
+
+            container: {
+                size: {
+                    [AvatarSize.SM]: {
+                        width: foundationToken.unit[24], // 24px
+                        height: foundationToken.unit[24], // 24px
+                    },
+                    [AvatarSize.REGULAR]: {
+                        width: foundationToken.unit[28], // 28px
+                        height: foundationToken.unit[28], // 28px
+                    },
+                    [AvatarSize.MD]: {
+                        width: foundationToken.unit[32], // 32px
+                        height: foundationToken.unit[32], // 32px
+                    },
+                    [AvatarSize.LG]: {
+                        width: foundationToken.unit[56], // 56px
+                        height: foundationToken.unit[56], // 56px
+                    },
+                    [AvatarSize.XL]: {
+                        width: foundationToken.unit[64], // 64px
+                        height: foundationToken.unit[64], // 64px
+                    },
+                },
+
+                backgroundColor: {
+                    withImage: {
+                        default: 'transparent',
+                        online: 'transparent',
+                    },
+                    withoutImage: {
+                        default: foundationToken.colors.gray[100],
+                        online: foundationToken.colors.gray[100],
+                    },
+                },
+
+                border: {
+                    withImage: {
+                        default: `1px solid ${foundationToken.colors.gray[0]}`,
+                        online: `1px solid ${foundationToken.colors.gray[0]}`,
+                    },
+                    withoutImage: {
+                        default: `1px solid ${foundationToken.colors.gray[200]}`,
+                        online: `1px solid ${foundationToken.colors.gray[200]}`,
+                    },
+                },
+
+                borderRadius: {
+                    [AvatarShape.CIRCULAR]: foundationToken.border.radius.full,
+                    [AvatarShape.ROUNDED]: foundationToken.border.radius[8],
+                },
+            },
+
+            text: {
+                color: {
+                    default: foundationToken.colors.gray[900],
+                    online: foundationToken.colors.gray[900],
+                },
+                fontSize: {
+                    [AvatarSize.SM]: foundationToken.font.size.body.xs.fontSize, // body sm
+                    [AvatarSize.REGULAR]:
+                        foundationToken.font.size.body.xs.fontSize, // body md
+                    [AvatarSize.MD]: foundationToken.font.size.body.sm.fontSize, // body lg
+                    [AvatarSize.LG]:
+                        foundationToken.font.size.heading.md.fontSize, // heading xl
+                    [AvatarSize.XL]:
+                        foundationToken.font.size.heading.lg.fontSize, // heading xl
+                },
+                fontWeight: {
+                    [AvatarSize.SM]: foundationToken.font.weight[500],
+                    [AvatarSize.REGULAR]: foundationToken.font.weight[500],
+                    [AvatarSize.MD]: foundationToken.font.weight[500],
+                    [AvatarSize.LG]: foundationToken.font.weight[600],
+                    [AvatarSize.XL]: foundationToken.font.weight[600],
+                },
+            },
+
+            indicator: {
+                backgroundColor: {
+                    default: foundationToken.colors.gray[300],
+                    online: foundationToken.colors.green[400],
+                },
+                border: {
+                    [AvatarSize.SM]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[0.5],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[0.5],
+                        },
+                    },
+                    [AvatarSize.REGULAR]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                    },
+                    [AvatarSize.MD]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                    },
+                    [AvatarSize.LG]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                    },
+                    [AvatarSize.XL]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                    },
+                },
+                size: {
+                    [AvatarSize.SM]: {
+                        width: foundationToken.unit[8],
+                        height: foundationToken.unit[8],
+                    },
+                    [AvatarSize.REGULAR]: {
+                        width: foundationToken.unit[10],
+                        height: foundationToken.unit[10],
+                    },
+                    [AvatarSize.MD]: {
+                        width: foundationToken.unit[12],
+                        height: foundationToken.unit[12],
+                    },
+                    [AvatarSize.LG]: {
+                        width: foundationToken.unit[18],
+                        height: foundationToken.unit[18],
+                    },
+                    [AvatarSize.XL]: {
+                        width: foundationToken.unit[20],
+                        height: foundationToken.unit[20],
+                    },
+                },
+                borderRadius: foundationToken.border.radius.full,
+                boxShadow: '0 0 0 1px rgba(255, 255, 255, 0.8)',
+            },
+
+            slot: {
+                spacing: foundationToken.unit[8],
+                color: {
+                    default: foundationToken.colors.gray[700],
+                    online: foundationToken.colors.gray[700],
+                },
+            },
+        },
+        lg: {
+            gap: foundationToken.unit[6],
+
+            container: {
+                size: {
+                    [AvatarSize.SM]: {
+                        width: foundationToken.unit[24], // 24px
+                        height: foundationToken.unit[24], // 24px
+                    },
+                    [AvatarSize.REGULAR]: {
+                        width: foundationToken.unit[32], // 32px
+                        height: foundationToken.unit[32], // 32px
+                    },
+                    [AvatarSize.MD]: {
+                        width: foundationToken.unit[40], // 40px
+                        height: foundationToken.unit[40], // 40px
+                    },
+                    [AvatarSize.LG]: {
+                        width: foundationToken.unit[80], // 80px
+                        height: foundationToken.unit[80], // 80px
+                    },
+                    [AvatarSize.XL]: {
+                        width: foundationToken.unit[144], // 144px
+                        height: foundationToken.unit[144], // 144px
+                    },
+                },
+
+                backgroundColor: {
+                    withImage: {
+                        default: 'transparent',
+                        online: 'transparent',
+                    },
+                    withoutImage: {
+                        default: foundationToken.colors.gray[100],
+                        online: foundationToken.colors.gray[100],
+                    },
+                },
+
+                border: {
+                    withImage: {
+                        default: `1px solid ${foundationToken.colors.gray[0]}`,
+                        online: `1px solid ${foundationToken.colors.gray[0]}`,
+                    },
+                    withoutImage: {
+                        default: `1px solid ${foundationToken.colors.gray[200]}`,
+                        online: `1px solid ${foundationToken.colors.gray[200]}`,
+                    },
+                },
+
+                borderRadius: {
+                    [AvatarShape.CIRCULAR]: foundationToken.border.radius.full,
+                    [AvatarShape.ROUNDED]: foundationToken.border.radius[6],
+                },
+            },
+
+            text: {
+                color: {
+                    default: foundationToken.colors.gray[900],
+                    online: foundationToken.colors.gray[900],
+                },
+                fontSize: {
+                    [AvatarSize.SM]: foundationToken.font.size.body.xs.fontSize, // body sm
+                    [AvatarSize.REGULAR]:
+                        foundationToken.font.size.body.xs.fontSize, // body md
+                    [AvatarSize.MD]: foundationToken.font.size.body.sm.fontSize, // body lg
+                    [AvatarSize.LG]:
+                        foundationToken.font.size.heading.md.fontSize, // heading xl
+                    [AvatarSize.XL]:
+                        foundationToken.font.size.heading.lg.fontSize, // heading xl
+                },
+                fontWeight: {
+                    [AvatarSize.SM]: foundationToken.font.weight[500],
+                    [AvatarSize.REGULAR]: foundationToken.font.weight[500],
+                    [AvatarSize.MD]: foundationToken.font.weight[500],
+                    [AvatarSize.LG]: foundationToken.font.weight[600],
+                    [AvatarSize.XL]: foundationToken.font.weight[600],
+                },
+            },
+
+            indicator: {
+                backgroundColor: {
+                    default: foundationToken.colors.gray[300],
+                    online: foundationToken.colors.green[400],
+                },
+                border: {
+                    [AvatarSize.SM]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[0.5],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[0.5],
+                        },
+                    },
+                    [AvatarSize.REGULAR]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                    },
+                    [AvatarSize.MD]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[1],
+                        },
+                    },
+                    [AvatarSize.LG]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                    },
+                    [AvatarSize.XL]: {
+                        default: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                        online: {
+                            color: foundationToken.colors.gray[0],
+                            width: foundationToken.unit[2],
+                        },
+                    },
+                },
+                size: {
+                    [AvatarSize.SM]: {
+                        width: foundationToken.unit[8],
+                        height: foundationToken.unit[8],
+                    },
+                    [AvatarSize.REGULAR]: {
+                        width: foundationToken.unit[12],
+                        height: foundationToken.unit[12],
+                    },
+                    [AvatarSize.MD]: {
+                        width: foundationToken.unit[14],
+                        height: foundationToken.unit[14],
+                    },
+                    [AvatarSize.LG]: {
+                        width: foundationToken.unit[20],
+                        height: foundationToken.unit[20],
+                    },
+                    [AvatarSize.XL]: {
+                        width: foundationToken.unit[28],
+                        height: foundationToken.unit[28],
+                    },
+                },
+                borderRadius: foundationToken.border.radius.full,
+                boxShadow: '0 0 0 1px rgba(255, 255, 255, 0.8)',
+            },
+
+            slot: {
+                spacing: foundationToken.unit[6],
+                color: {
+                    default: foundationToken.colors.gray[700],
+                    online: foundationToken.colors.gray[700],
+                },
+            },
+        },
+    }
+}

package/lib/components/Avatar/avatarUtils.ts

@@ -0,0 +1,102 @@
+export const getInitialsFromText = (text: string): string => {
+    if (!text) return ''
+
+    return text
+        .split(' ')
+        .map((word) => word[0])
+        .slice(0, 2)
+        .join('')
+        .toUpperCase()
+}
+
+export const isValidImageUrl = (url: string): Promise<boolean> => {
+    if (!url) return Promise.resolve(false)
+
+    return new Promise((resolve) => {
+        const img = new Image()
+        img.onload = () => resolve(true)
+        img.onerror = () => resolve(false)
+        img.src = url
+    })
+}
+
+export const hexToRgb = (hex: string) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result && result[1] && result[2] && result[3]
+        ? {
+              r: parseInt(result[1], 16),
+              g: parseInt(result[2], 16),
+              b: parseInt(result[3], 16),
+          }
+        : null
+}
+
+// Color palette for avatars (expanded for better variety)
+const AVATAR_COLORS = [
+    '#FF6B6B', // Red
+    '#4ECDC4', // Teal
+    '#45B7D1', // Sky Blue
+    '#FFA07A', // Light Salmon
+    '#98D8C8', // Mint
+    '#F7DC6F', // Yellow
+    '#BB8FCE', // Purple
+    '#85C1E2', // Light Blue
+    '#F8B739', // Orange
+    '#52B788', // Green
+    '#E85D75', // Pink
+    '#6C5CE7', // Indigo
+    '#00B894', // Emerald
+    '#FDCB6E', // Amber
+    '#E17055', // Terra Cotta
+    '#74B9FF', // Blue
+    '#A29BFE', // Lavender
+    '#FD79A8', // Rose
+    '#00CEC9', // Cyan
+    '#FF7675', // Coral
+    '#55EFC4', // Aqua
+    '#FDA7DF', // Light Pink
+    '#6C5B7B', // Plum
+    '#81C784', // Soft Green
+    '#FFB74D', // Peach
+    '#9575CD', // Violet
+    '#E74C3C', // Crimson
+    '#3498DB', // Ocean Blue
+    '#2ECC71', // Emerald Green
+    '#F39C12', // Carrot Orange
+]
+
+/**
+ * Simple hash function to convert a string into a number
+ * @param str - The string to hash
+ * @returns A hash number
+ */
+const hashString = (str: string): number => {
+    let hash = 0
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i)
+        hash = (hash << 5) - hash + char
+        hash = hash & hash // Convert to 32-bit integer
+    }
+    return Math.abs(hash)
+}
+
+/**
+ * Get a consistent color for an avatar based on the full name/text
+ * Uses hash of the entire text to ensure unique colors for different names
+ * @param text - The text to generate color from (e.g., name or alt text)
+ * @returns A hex color code that provides sufficient contrast with white text (#FFFFFF)
+ */
+export const getColorFromText = (text: string): string => {
+    if (!text || !text.trim()) {
+        return '#94A3B8'
+    }
+
+    // Normalize the text (trim and lowercase for consistency)
+    const normalizedText = text.trim().toLowerCase()
+
+    // Hash the full text and map to a color index
+    const hash = hashString(normalizedText)
+    const colorIndex = hash % AVATAR_COLORS.length
+
+    return AVATAR_COLORS[colorIndex]
+}

package/lib/components/Avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar'
+export * from './avatar.tokens'
+export * from './types'

package/lib/components/Avatar/types.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes } from 'react'
+import { SkeletonVariant } from '../Skeleton'
+
+export enum AvatarSize {
+    SM = 'sm',
+    REGULAR = 'regular',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+}
+
+export enum AvatarShape {
+    CIRCULAR = 'circular',
+    ROUNDED = 'rounded',
+}
+
+export enum AvatarOnlinePosition {
+    TOP = 'top',
+    BOTTOM = 'bottom',
+}
+
+export type AvatarProps = {
+    src?: string
+    alt?: string
+    fallback?: React.ReactNode
+    size?: AvatarSize
+    shape?: AvatarShape
+    online?: boolean
+    onlinePosition?: AvatarOnlinePosition
+    leadingSlot?: React.ReactNode
+    trailingSlot?: React.ReactNode
+    skeleton?: {
+        show: boolean
+        variant?: SkeletonVariant
+    }
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+
+export type StyledAvatarContainerProps = {
+    $size: AvatarSize
+    $shape: AvatarShape
+    $hasImage: boolean
+}
+
+export type StyledAvatarIndicatorProps = {
+    $size: AvatarSize
+}