twintrinsic 0.0.1

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,300 @@
+<!--
+@component
+Avatar - A component for displaying user profile images with fallback options.
+Provides consistent styling, accessibility features, and various display options.
+
+Usage:
+```svelte
+<Avatar 
+  src="/path/to/image.jpg" 
+  alt="User Name" 
+/>
+
+<Avatar 
+  name="John Doe" 
+  size="lg" 
+  shape="square" 
+/>
+
+<Avatar 
+  gravatarEmail="user@example.com"
+  name="John Doe"
+  status="online" 
+/>
+
+<Avatar 
+  src="/path/to/image.jpg" 
+  fallback="JD" 
+  status="online" 
+/>
+```
+-->
+<script lang="ts">
+import { onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Image source URL */
+  src,
+
+  /** @type {string} - Alt text for the image */
+  alt,
+
+  /** @type {string} - User name for generating initials */
+  name,
+
+  /** @type {string} - Fallback text when image fails to load or no src provided */
+  fallback,
+
+  /** @type {string} - Gravatar email address */
+  gravatarEmail,
+
+  /** @type {string} - Size of the avatar (xs, sm, md, lg, xl) */
+  size = "md",
+
+  /** @type {string} - Shape of the avatar (circle, square, rounded) */
+  shape = "circle",
+
+  /** @type {"online" | "offline" | "away" | "busy" | undefined} - Status indicator (online, offline, away, busy) */
+  status,
+
+  /** @type {string} - Background color for text avatars (CSS color value) */
+  bgColor,
+
+  /** @type {boolean} - Whether to show a border */
+  bordered = false,
+
+  /** @type {boolean} - Whether to add a shadow effect */
+  shadowed = false,
+
+  /** @type {Function} - Custom function to generate initials */
+  initialsGenerator,
+} = $props()
+
+// Component state
+let imageLoaded = $state(false)
+let imageError = $state(false)
+let avatarElement
+let gravatarUrl = $state("")
+
+// Generate gravatar URL if email is provided
+$effect(() => {
+  if (gravatarEmail) {
+    generateGravatarUrl(gravatarEmail).then(url => {
+      gravatarUrl = url
+    })
+  }
+})
+
+/**
+ * Generates a Gravatar URL from an email address using MD5 hash
+ * @param {string} email - Email address
+ * @returns {Promise<string>} - Gravatar URL
+ */
+async function generateGravatarUrl(email: string): Promise<string> {
+  if (!email) return ""
+  
+  const trimmedEmail = email.trim().toLowerCase()
+  const msgBuffer = new TextEncoder().encode(trimmedEmail)
+  const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer)
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, "0")).join("")
+  
+  return `https://www.gravatar.com/avatar/${hashHex}?d=identicon`
+}
+
+/**
+ * Generates initials from a name
+ * @param {string} name - Full name
+ * @returns {string} - Initials (1-2 characters)
+ */
+function generateInitials(name: string): string {
+  if (!name) return ""
+
+  if (initialsGenerator) {
+    return initialsGenerator(name)
+  }
+
+  // Default implementation: first letter of first and last name
+  const parts = name.trim().split(/\s+/)
+
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase()
+  }
+
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+}
+
+/**
+ * Handles image load event
+ */
+function handleImageLoad() {
+  imageLoaded = true
+  imageError = false
+}
+
+/**
+ * Handles image error event
+ */
+function handleImageError() {
+  imageLoaded = false
+  imageError = true
+}
+
+// Determine what to display as fallback
+const displayFallback = $derived(fallback || (name ? generateInitials(name) : ""))
+
+// Determine the image source (prefer explicit src over gravatar)
+const imageSrc = $derived(src || gravatarUrl)
+
+// Determine if we should show the image
+const showImage = $derived(imageSrc && !imageError)
+
+// Determine if we should show the fallback
+const showFallback = $derived(!showImage && !!displayFallback)
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    xs: "w-6 h-6 text-xs",
+    sm: "w-8 h-8 text-sm",
+    md: "w-10 h-10 text-base",
+    lg: "w-12 h-12 text-lg",
+    xl: "w-16 h-16 text-xl",
+  }[size] || "w-10 h-10 text-base"
+)
+
+// Determine shape classes
+const shapeClasses = $derived(
+  {
+    circle: "rounded-full",
+    square: "rounded-none",
+    rounded: "rounded-md",
+  }[shape] || "rounded-full"
+)
+
+// Determine status classes
+const statusClasses = $derived.by(() => {
+  if (status === "online") return "bg-success-500"
+  if (status === "offline") return "bg-muted"
+  if (status === "away") return "bg-warning-500"
+  if (status === "busy") return "bg-error-500"
+  return "bg-muted"
+})
+
+// Generate a random color based on the name or fallback
+const randomBgColor = $derived(generateRandomColor())
+
+// Function to generate a random color based on the name or fallback
+function generateRandomColor() {
+  if (bgColor) return bgColor
+
+  const seed = name || fallback || id
+  const colors = [
+    "bg-primary-500",
+    "bg-secondary-500",
+    "bg-success-500",
+    "bg-warning-500",
+    "bg-error-500",
+    "bg-info-500",
+  ]
+
+  // Simple hash function to get consistent color
+  let hash = 0
+  for (let i = 0; i < seed.length; i++) {
+    hash = (hash << 5) - hash + seed.charCodeAt(i)
+    hash = hash & hash // Convert to 32bit integer
+  }
+
+  const index = Math.abs(hash) % colors.length
+  return colors[index]
+}
+</script>
+
+<div
+  {id}
+  class="
+    avatar
+    {sizeClasses}
+    {shapeClasses}
+    {bordered ? 'avatar-bordered' : ''}
+    {shadowed ? 'avatar-shadowed' : ''}
+    {className}
+  "
+  aria-label={alt || name || 'Avatar'}
+  bind:this={avatarElement}
+>
+  {#if showImage}
+    <img
+      src={imageSrc}
+      alt={alt || name || 'Avatar'}
+      class="avatar-image"
+      onload={handleImageLoad}
+      onerror={handleImageError}
+    />
+  {:else if showFallback}
+    <div 
+      class="avatar-fallback {randomBgColor}"
+      style={bgColor ? `background-color: ${bgColor}` : ''}
+    >
+      {displayFallback}
+    </div>
+  {:else}
+    <div class="avatar-placeholder">
+      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0-2a3 3 0 100-6 3 3 0 000 6zm9 11a1 1 0 01-1 1H4a1 1 0 01-1-1v-1c0-3.87 3.13-7 7-7h4c3.87 0 7 3.13 7 7v1z"/>
+      </svg>
+    </div>
+  {/if}
+  
+  {#if status}
+    <span 
+      class="avatar-status {statusClasses}" 
+      aria-label={`Status: ${status}`}
+    ></span>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .avatar {
+    @apply relative inline-flex items-center justify-center flex-shrink-0;
+    @apply bg-surface dark:bg-surface text-text dark:text-text;
+    @apply overflow-hidden;
+  }
+  
+  .avatar-bordered {
+    @apply border-2 border-background dark:border-background;
+  }
+  
+  .avatar-shadowed {
+    @apply shadow-md dark:shadow-lg;
+  }
+  
+  .avatar-image {
+    @apply w-full h-full object-cover;
+  }
+  
+  .avatar-fallback {
+    @apply w-full h-full flex items-center justify-center;
+    @apply text-white dark:text-white font-medium;
+  }
+  
+  .avatar-placeholder {
+    @apply w-full h-full flex items-center justify-center;
+    @apply bg-muted/20 dark:bg-muted/20 text-muted dark:text-muted;
+  }
+  
+  .avatar-status {
+    @apply absolute bottom-0 right-0;
+    @apply w-1/4 h-1/4 min-w-1.5 min-h-1.5 max-w-3 max-h-3;
+    @apply rounded-full;
+    @apply border-2 border-background dark:border-background;
+  }
+</style>

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Avatar - A component for displaying user profile images with fallback options.
+ * Provides consistent styling, accessibility features, and various display options.
+ *
+ * Usage:
+ * ```svelte
+ * <Avatar
+ * src="/path/to/image.jpg"
+ * alt="User Name"
+ * />
+ *
+ * <Avatar
+ * name="John Doe"
+ * size="lg"
+ * shape="square"
+ * />
+ *
+ * <Avatar
+ * gravatarEmail="user@example.com"
+ * name="John Doe"
+ * status="online"
+ * />
+ *
+ * <Avatar
+ * src="/path/to/image.jpg"
+ * fallback="JD"
+ * status="online"
+ * />
+ * ```
+ */
+declare const Avatar: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    src: any;
+    alt: any;
+    name: any;
+    fallback: any;
+    gravatarEmail: any;
+    size?: string;
+    shape?: string;
+    status: any;
+    bgColor: any;
+    bordered?: boolean;
+    shadowed?: boolean;
+    initialsGenerator: any;
+}, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Avatar/AvatarGroup.svelte

@@ -0,0 +1,185 @@
+<!--
+@component
+AvatarGroup - A component for displaying multiple avatars in a compact, overlapping layout.
+Provides consistent styling, accessibility features, and overflow handling.
+
+Usage:
+```svelte
+<AvatarGroup>
+  <Avatar src="/user1.jpg" alt="User 1" />
+  <Avatar src="/user2.jpg" alt="User 2" />
+  <Avatar src="/user3.jpg" alt="User 3" />
+</AvatarGroup>
+
+<AvatarGroup max={3} total={10}>
+  <Avatar name="John Doe" />
+  <Avatar name="Jane Smith" />
+  <Avatar name="Bob Johnson" />
+</AvatarGroup>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Size of the avatars (xs, sm, md, lg, xl) */
+  size = "md",
+
+  /** @type {number} - Maximum number of avatars to display */
+  max,
+
+  /** @type {number} - Total number of avatars (for overflow count) */
+  total,
+
+  /** @type {number} - Spacing between avatars (-8 to 8) */
+  spacing = -4,
+
+  /** @type {boolean} - Whether to show a border around avatars */
+  bordered = true,
+
+  /** @type {string} - ARIA label for the group */
+  ariaLabel = "Avatar group",
+
+  children,
+} = $props()
+
+// Provide context for child avatars
+$effect(() => {
+  setContext("avatarGroup", {
+    size,
+    bordered,
+  })
+})
+
+// Determine spacing class based on the spacing prop
+const spacingClass = $derived(`avatar-group-spacing-${spacing}`)
+
+// Determine if we need to show overflow
+const showOverflow = $derived(max !== undefined && total !== undefined && total > max)
+
+// Calculate overflow count
+const overflowCount = $derived(showOverflow ? total - max : 0)
+</script>
+
+<div
+  {id}
+  class="
+    avatar-group
+    {spacingClass}
+    {className}
+  "
+  role="group"
+  aria-label={ariaLabel}
+>
+  <div class="avatar-group-items">
+    {@render children?.()}
+    
+    {#if showOverflow}
+      <div class="avatar-group-overflow">
+        <span class="avatar-group-overflow-text">+{overflowCount}</span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .avatar-group {
+    @apply inline-flex;
+  }
+  
+  .avatar-group-items {
+    @apply flex items-center;
+  }
+  
+  /* Spacing classes */
+  .avatar-group-spacing-8 :global(.avatar) {
+    @apply ml-8;
+  }
+  
+  .avatar-group-spacing-6 :global(.avatar) {
+    @apply ml-6;
+  }
+  
+  .avatar-group-spacing-4 :global(.avatar) {
+    @apply ml-4;
+  }
+  
+  .avatar-group-spacing-2 :global(.avatar) {
+    @apply ml-2;
+  }
+  
+  .avatar-group-spacing-0 :global(.avatar) {
+    @apply ml-0;
+  }
+  
+  .avatar-group-spacing--2 :global(.avatar) {
+    @apply -ml-2;
+  }
+  
+  .avatar-group-spacing--4 :global(.avatar) {
+    @apply -ml-4;
+  }
+  
+  .avatar-group-spacing--6 :global(.avatar) {
+    @apply -ml-6;
+  }
+  
+  .avatar-group-spacing--8 :global(.avatar) {
+    @apply -ml-8;
+  }
+  
+  /* Remove margin from first avatar */
+  .avatar-group-items > :global(:first-child) {
+    @apply ml-0;
+  }
+  
+  /* Overflow counter */
+  .avatar-group-overflow {
+    @apply flex items-center justify-center;
+    @apply bg-surface dark:bg-surface text-text dark:text-text;
+    @apply rounded-full overflow-hidden;
+    @apply border-2 border-background dark:border-background;
+  }
+  
+  .avatar-group-overflow-text {
+    @apply font-medium;
+  }
+  
+  /* Inherit size from context */
+  .avatar-group-overflow {
+    @apply w-10 h-10 text-base;
+  }
+  
+  :global(.avatar-group-items .avatar-xs) ~ .avatar-group-overflow,
+  :global(.avatar-xs) ~ .avatar-group-overflow {
+    @apply w-6 h-6 text-xs;
+  }
+  
+  :global(.avatar-group-items .avatar-sm) ~ .avatar-group-overflow,
+  :global(.avatar-sm) ~ .avatar-group-overflow {
+    @apply w-8 h-8 text-sm;
+  }
+  
+  :global(.avatar-group-items .avatar-md) ~ .avatar-group-overflow,
+  :global(.avatar-md) ~ .avatar-group-overflow {
+    @apply w-10 h-10 text-base;
+  }
+  
+  :global(.avatar-group-items .avatar-lg) ~ .avatar-group-overflow,
+  :global(.avatar-lg) ~ .avatar-group-overflow {
+    @apply w-12 h-12 text-lg;
+  }
+  
+  :global(.avatar-group-items .avatar-xl) ~ .avatar-group-overflow,
+  :global(.avatar-xl) ~ .avatar-group-overflow {
+    @apply w-16 h-16 text-xl;
+  }
+</style>

package/dist/components/Avatar/AvatarGroup.svelte.d.ts

@@ -0,0 +1,46 @@
+export default AvatarGroup;
+type AvatarGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * AvatarGroup - A component for displaying multiple avatars in a compact, overlapping layout.
+ * Provides consistent styling, accessibility features, and overflow handling.
+ *
+ * Usage:
+ * ```svelte
+ * <AvatarGroup>
+ * <Avatar src="/user1.jpg" alt="User 1" />
+ * <Avatar src="/user2.jpg" alt="User 2" />
+ * <Avatar src="/user3.jpg" alt="User 3" />
+ * </AvatarGroup>
+ *
+ * <AvatarGroup max={3} total={10}>
+ * <Avatar name="John Doe" />
+ * <Avatar name="Jane Smith" />
+ * <Avatar name="Bob Johnson" />
+ * </AvatarGroup>
+ * ```
+ */
+declare const AvatarGroup: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    size?: string;
+    max: any;
+    total: any;
+    spacing?: any;
+    bordered?: boolean;
+    ariaLabel?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    size?: string;
+    max: any;
+    total: any;
+    spacing?: any;
+    bordered?: boolean;
+    ariaLabel?: string;
+    children: any;
+};