@imfusion/web-ui 0.11.1-dev.59.g5c2572e2 → 0.11.1-dev.62.gfcd31b6e

package/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ### Added
 
+- `Image` is a new picture box over native `<picture>` and `<img>`, with an AVIF and a WebP source and a fallback `<img>`.
+  `width` and `height` are required and reserve the box before the image loads. It loads lazily and decodes asynchronously;
+  `priority` loads it eagerly with high fetch priority. A soft pulse shows while it loads and a glyph when it fails.
+  `radius`, `fit`, `border`, `borderWidth` and `aspectRatio` shape the box. [Image](src/components/image/image.mdx)
+  ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250)) — Nikolaus Brunner <brunner@imfusion.com>
 - `Dialog.Alert` composes a confirmation from props like `Dialog.Simple`, on Base UI's Alert Dialog: screen readers announce
   it as an `alertdialog`, it is always modal, and a click on the overlay leaves it open. `actions` is required, the header has
   no close button, and `status` takes any variant. It replaces a `Dialog.Simple` or a hand-composed `Dialog.Root` that asks
@@ -100,6 +105,11 @@
   - `imf-web-ui-conventions` exempts React components from the explicit return type on exported functions.
   - The `imf-web-ui-conventions` `npm-project` topic sets `engines.node` to Web UI's own range, and `imf-web-ui-audit`
     reports an app whose range admits a Node outside it.
+  - The `imf-web-ui-conventions` `assets` topic points to `Image` for content images.
+  - `web-ui-dev-new-component` adds a review step before handover: conventions and plan checklist against the code, a token
+    showcase entry, the docs audit, and an `implementation-reviewer` pass.
+  - `web-ui-dev-new-component` and the design-system doc require rendering every published drafts-canvas board and looking
+    at it, by the session that owns the work, using a local copy of the board.
   - The `project-structure` topic keeps a route's only view, such as a form, in the route file and moves views to the `-`
     folder only when the page composes several. `imf-web-ui-audit` reports by views, not line counts.
   - The `imf-web-ui-conventions` `assets` topic encodes photographs as AVIF and WebP at 800 and 1600px and renders them

package/dist/components/image/image.d.ts

@@ -0,0 +1,50 @@
+import { VariantProps } from 'class-variance-authority';
+declare const root: (props?: ({
+    radius?: "none" | "round" | "sm" | "md" | "lg" | null | undefined;
+    fit?: "contain" | "cover" | null | undefined;
+    border?: "none" | "single" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Props = Omit<React.ComponentProps<"img">, "width" | "height" | "alt" | "className" | "style" | "src" | "srcSet" | "sizes" | "loading" | "decoding"> & VariantProps<typeof root> & {
+    /** Address of the fallback `<img>`. */
+    src: string;
+    /** Width candidates of the fallback `<img>`. */
+    srcSet?: string;
+    /** Slot width the browser plans for, shared by both `<source>` elements and the `<img>`. */
+    sizes?: string;
+    /** `lazy` defers the request until the image nears the viewport. */
+    loading?: "lazy" | "eager";
+    /** `async` decodes off the main thread. */
+    decoding?: "async" | "sync" | "auto";
+    /** Describes the image. Pass `""` to mark it decorative. */
+    alt: string;
+    /** Intrinsic width in pixels. Together with `height` it reserves the box before the image loads. */
+    width: number;
+    /** Intrinsic height in pixels. */
+    height: number;
+    /** AVIF candidates for the `<picture>`, offered before WebP. */
+    avifSrcSet?: string;
+    /** WebP candidates for the `<picture>`, offered after AVIF. */
+    webpSrcSet?: string;
+    /** Hairline width in `border-size` steps. Applies with `border="single"`. */
+    borderWidth?: 1 | 2 | 3;
+    /** Width divided by height of the box. Defaults to `width / height`; the picture crops or letterboxes per `fit`. */
+    aspectRatio?: number;
+    /** Loads the image eagerly with high fetch priority. Set it on the page's largest image only. */
+    priority?: boolean;
+    /** Sizing and layout hook on the box around the picture. */
+    className?: string;
+    /** Sizing and layout hook on the box around the picture. */
+    style?: React.CSSProperties;
+};
+/**
+ * Image — a picture box with one `<source>` per format (AVIF, then WebP) and an `<img>` fallback. The browser picks the
+ * format and size. The box reserves `width` by `height` before the image arrives, pulses while it loads, and shows a
+ * glyph when it fails. Also called a photo, thumbnail or media.
+ *
+ * `ref` and every prop not named here reach the `<img>`.
+ */
+export declare function Image({ alt, width, height, avifSrcSet, webpSrcSet, priority, loading, decoding, radius, fit, border, borderWidth, aspectRatio, className, style, ref, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Image {
+    var displayName: string;
+}
+export {};

package/dist/components/image/image.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const imageMeta: ComponentMeta;

package/dist/components/image/index.d.ts

@@ -0,0 +1,2 @@
+export { Image } from './image';
+export { imageMeta } from './image.meta';

package/dist/index.d.ts

@@ -36,6 +36,7 @@ export { Chip, chipMeta } from './components/chip';
 export { Code, codeMeta } from './components/code';
 export { Collapsible, collapsibleMeta } from './components/collapsible';
 export { Icon, iconMeta } from './components/icon';
+export { Image, imageMeta } from './components/image';
 export { Kbd, kbdMeta } from './components/kbd';
 export { Logo, logoMeta } from './components/logo';
 export { Meter, meterMeta } from './components/meter';