8f075f1792
Skeleton, Breadcrumbs, Link, Button, Image, Meter, NumberField Floating components: Tooltip (hover/focus), Popover (click, with focus trap and dismiss), HoverCard (hover with safe area). Simple components: Alert (role=alert), Badge (role=status), Skeleton (loading placeholder with data attributes). Navigation: Breadcrumbs (nav>ol>li with separators), Link (accessible anchor with disabled), Button (with disabled click suppression). Data/Form: Image (Img+Fallback with loading status), Meter (like Progress for known ranges), NumberField (spinbutton with inc/dec). 302 tests across 46 files, typecheck clean, build produces 176 files.
34 lines
960 B
TypeScript
34 lines
960 B
TypeScript
// packages/core/src/components/image/image-root.tsx
|
|
import type { JSX } from "solid-js";
|
|
import { createSignal, splitProps } from "solid-js";
|
|
import {
|
|
ImageContextProvider,
|
|
type ImageContextValue,
|
|
type ImageLoadingStatus,
|
|
} from "./image-context";
|
|
|
|
export interface ImageRootProps extends JSX.HTMLAttributes<HTMLSpanElement> {
|
|
/** Child elements (Image.Img, Image.Fallback, etc.). */
|
|
children: JSX.Element;
|
|
}
|
|
|
|
/**
|
|
* Root container for Image. Provides loading status context to all Image parts.
|
|
*/
|
|
export function ImageRoot(props: ImageRootProps): JSX.Element {
|
|
const [local, rest] = splitProps(props, ["children"]);
|
|
const [loadingStatus, setLoadingStatus] = createSignal<ImageLoadingStatus>("loading");
|
|
|
|
const ctx: ImageContextValue = {
|
|
loadingStatus,
|
|
setLoadingStatus,
|
|
src: () => undefined,
|
|
};
|
|
|
|
return (
|
|
<ImageContextProvider value={ctx}>
|
|
<span {...rest}>{local.children}</span>
|
|
</ImageContextProvider>
|
|
);
|
|
}
|