80f7af401a
Image + fallback pattern with idle/loading/loaded/error status tracking via context. 4 tests passing.
22 lines
977 B
TypeScript
22 lines
977 B
TypeScript
import { z } from "zod/v4";
|
|
import type { JSX } from "solid-js";
|
|
import type { ComponentMeta } from "../../meta";
|
|
|
|
export const AvatarRootPropsSchema = z.object({});
|
|
export interface AvatarRootProps extends JSX.HTMLAttributes<HTMLSpanElement> { children: JSX.Element; }
|
|
|
|
export const AvatarImagePropsSchema = z.object({
|
|
src: z.string().describe("Image URL"),
|
|
alt: z.string().describe("Alt text for accessibility"),
|
|
});
|
|
export interface AvatarImageProps extends z.infer<typeof AvatarImagePropsSchema>, Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, keyof z.infer<typeof AvatarImagePropsSchema>> {}
|
|
|
|
export interface AvatarFallbackProps extends JSX.HTMLAttributes<HTMLSpanElement> { children?: JSX.Element; }
|
|
|
|
export const AvatarMeta: ComponentMeta = {
|
|
name: "Avatar",
|
|
description: "User profile image with fallback to initials or icon when image fails to load",
|
|
parts: ["Root", "Image", "Fallback"] as const,
|
|
requiredParts: ["Root", "Fallback"] as const,
|
|
} as const;
|