Feature/avatar updates fix

.storybook/manager-head.html

@@ -0,0 +1,39 @@
+<style>
+  /* Fix boolean toggle control text visibility in dark mode */
+  /* Storybook boolean controls have dark background in dark mode that hides text */
+
+  /* Target boolean toggle labels - give them a visible light background in dark mode */
+  @media (prefers-color-scheme: dark) {
+    /* The toggle switch background */
+    label[for^="control-"] {
+      background-color: #52525b !important;
+    }
+
+    /* The "False" span (left side) */
+    label[for^="control-"] > span:first-of-type {
+      color: #e4e4e7 !important;
+      background-color: #71717a !important;
+    }
+
+    /* The "True" span (right side) */
+    label[for^="control-"] > span:last-of-type {
+      color: #a1a1aa !important;
+    }
+
+    /* When checked/active state - "True" is active */
+    label[for^="control-"] input:checked ~ span:last-of-type {
+      color: #e4e4e7 !important;
+      background-color: #71717a !important;
+    }
+
+    label[for^="control-"] input:checked ~ span:first-of-type {
+      background-color: transparent !important;
+      color: #a1a1aa !important;
+    }
+
+    /* Make checkbox input transparent */
+    label[for^="control-"] input[type="checkbox"] {
+      background: transparent !important;
+    }
+  }
+</style>

.storybook/manager.ts

@@ -314,6 +314,42 @@ function injectBrandCSS(brandKey: BrandKey, isDark = false) {
       border-color: ${borderColor} !important;
       background-color: ${borderColor} !important;
     }
+
+    /* ============================================
+       BOOLEAN TOGGLE CONTROL FIX
+       The toggle has dark bg that hides text
+       ============================================ */
+    /* Toggle switch background */
+    label[for^="control-"] {
+      background-color: #52525b !important;
+    }
+
+    /* "False" span (left side, selected by default) */
+    label[for^="control-"] > span:first-of-type {
+      color: #e4e4e7 !important;
+      background-color: #71717a !important;
+    }
+
+    /* "True" span (right side, unselected by default) */
+    label[for^="control-"] > span:last-of-type {
+      color: #a1a1aa !important;
+    }
+
+    /* When checked: "True" becomes active */
+    label[for^="control-"] input:checked ~ span:last-of-type {
+      color: #e4e4e7 !important;
+      background-color: #71717a !important;
+    }
+
+    label[for^="control-"] input:checked ~ span:first-of-type {
+      background-color: transparent !important;
+      color: #a1a1aa !important;
+    }
+
+    /* Make checkbox input transparent so it doesn't cover text */
+    label[for^="control-"] input[type="checkbox"] {
+      background: transparent !important;
+    }
     ` : ''}
   `;
 

.storybook/preview.css

@@ -126,6 +126,38 @@ html, body {
   border-color: var(--mieweb-border, #3f3f46) !important;
 }
 
+/* Boolean toggle controls (False/True toggle) */
+/* Structure: label[for^="control-"] > input[role="switch"] + span("False") + span("True") */
+/* The input is position:absolute and covers the spans, so it MUST be transparent */
+[data-theme="dark"] label[for^="control-"] {
+  background-color: var(--mieweb-card, #27272a) !important;
+  border-color: var(--mieweb-border, #3f3f46) !important;
+}
+
+/* Input must be transparent to show text underneath */
+[data-theme="dark"] label[for^="control-"] > input[role="switch"],
+[data-theme="dark"] input[id^="control-"][role="switch"] {
+  background-color: transparent !important;
+}
+
+/* All spans: white text, transparent background by default */
+[data-theme="dark"] label[for^="control-"] > span {
+  color: #fafafa !important;
+  background-color: transparent !important;
+}
+
+/* When UNCHECKED: highlight "False" span (first span = input + span) */
+[data-theme="dark"] label[for^="control-"] > input[role="switch"]:not(:checked) + span {
+  background-color: #000 !important;
+  color: #fff !important;
+}
+
+/* When CHECKED: highlight "True" span (second span = input + span + span) */
+[data-theme="dark"] label[for^="control-"] > input[role="switch"]:checked + span + span {
+  background-color: #000 !important;
+  color: #fff !important;
+}
+
 /* Buttons in controls */
 [data-theme="dark"] .docblock-argstable button {
   background-color: var(--mieweb-card, #27272a) !important;

src/components/Avatar/Avatar.stories.tsx

@@ -8,6 +8,9 @@ const meta: Meta<typeof Avatar> = {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  args: {
+    ring: false,
+  },
   argTypes: {
     size: {
       control: 'select',
@@ -45,9 +48,9 @@ export const Default: Story = {
 
 export const WithImage: Story = {
   args: {
-    src: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
-    alt: 'John Doe',
-    name: 'John Doe',
+    src: 'https://i.imgur.com/8Km9tLL.jpg',
+    alt: 'Sea Otter',
+    name: 'Sea Otter',
   },
 };
 

src/components/Avatar/Avatar.tsx

@@ -44,7 +44,7 @@ export interface AvatarProps
   /** Name to generate initials from (used as fallback when no src) */
   name?: string;
   /** Custom fallback content (overrides name initials) */
-  fallback?: React.ReactNode;
+  fallback?: React.ReactElement | null;
 }
 
 /**
@@ -99,7 +99,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
             className="h-full w-full object-cover"
             onError={() => setImageError(true)}
           />
-        ) : fallback ? (
+        ) : React.isValidElement(fallback) ? (
           fallback
         ) : initials ? (
           initials