@imfusion/web-ui 0.8.0 → 0.8.1-dev.1.g11d9ffbe

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [Unreleased]
+
+### Added
+
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - `Avatar` shows a person's photo, their initials, or a person glyph, in three sizes and an on-color context.
+  - `AccountCard` links to the signed-in person's account with an avatar, a title, a description, and a trailing action.
+
+---
+
 ## `0.8.0` &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2026.10.01
 
 ### Highlights

package/dist/components/account-card/account-card.d.ts

@@ -0,0 +1,53 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import * as AvatarParts from '../avatar/avatar';
+declare const root: (props?: ({
+    context?: "default" | "oncolor" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type RootProps = useRender.ComponentProps<"a"> & VariantProps<typeof root>;
+/**
+ * AccountCard.Root — the link to the signed-in person's account, holding `AccountCard.Avatar`, `AccountCard.Title`, and
+ * `AccountCard.Description`. Pass a router link through `render`. `aria-current="page"` marks it current with a tint and
+ * an inset rule. Its accessible name is the title and description; the avatar stays decorative.
+ *
+ * Place `AccountCard.Action` beside the root, not inside it: a link cannot contain a button.
+ */
+declare function Root({ 
+/** Explicit saturated-surface context; this is never inferred from an ancestor. */
+context, render, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** The person's photo. Until it loads, and when it fails, the initials or the person glyph show instead. */
+    src?: string;
+    /** The avatar size. */
+    size?: React.ComponentProps<typeof AvatarParts.Root>["size"];
+};
+/**
+ * AccountCard.Avatar — a decorative `Avatar` in the card's context. Its children are the initials; without them it shows
+ * a person glyph.
+ */
+declare function Avatar({ src, size, children, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+/** AccountCard.Title — the account's name, or its email until a name exists. Truncates to one line. */
+declare function Title(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Title {
+    var displayName: string;
+}
+/** AccountCard.Description — a second line such as organization and role. Truncates to one line. */
+declare function Description(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Description {
+    var displayName: string;
+}
+/**
+ * AccountCard.Action — a trailing slot beside `AccountCard.Root`, such as a ghost icon `Button` that logs out. The
+ * button carries its own `aria-label` and its own `context`.
+ */
+declare function Action(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Action {
+    var displayName: string;
+}
+export { Root, Avatar, Title, Description, Action };

package/dist/components/account-card/account-card.meta.d.ts

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

package/dist/components/account-card/index.d.ts

@@ -0,0 +1,2 @@
+export * as AccountCard from './account-card';
+export { accountCardMeta } from './account-card.meta';

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,40 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import { VariantProps } from 'class-variance-authority';
+declare const root: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    context?: "default" | "oncolor" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface RootProps extends React.ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof root> {
+}
+/**
+ * Avatar.Root — a round badge that stands for a person. Also called a profile picture or user badge.
+ *
+ * Without `aria-label` or `aria-labelledby` it is decorative and hidden from assistive tech, for use next to a visible
+ * name. With a label it is announced as an image with that name.
+ *
+ * @doc https://base-ui.com/react/components/avatar
+ * @llm https://base-ui.com/react/components/avatar.md
+ */
+declare function Root({ size, 
+/** Explicit saturated-surface context; this is never inferred from an ancestor. */
+context, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+/**
+ * Avatar.Fallback — the initials the consumer passes, one or two letters. Without children it shows a person glyph.
+ * It derives nothing from a name or email.
+ */
+declare function Fallback({ children, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare namespace Fallback {
+    var displayName: string;
+}
+/**
+ * Avatar.Image — the person's photo, cropped to the circle. It shows once `src` has loaded; until then, and when it
+ * fails, `Avatar.Fallback` shows instead.
+ */
+declare function Image({ alt, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare namespace Image {
+    var displayName: string;
+}
+export { Root, Image, Fallback };

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

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

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

@@ -0,0 +1,2 @@
+export * as Avatar from './avatar';
+export { avatarMeta } from './avatar.meta';

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export { Prose, proseMeta } from './components/prose';
 export { Row, rowMeta } from './components/row';
 export { Separator, separatorMeta } from './components/separator';
 export { Stack, stackMeta } from './components/stack';
+export { AccountCard, accountCardMeta } from './components/account-card';
+export { Avatar, avatarMeta } from './components/avatar';
 export { Callout, calloutMeta } from './components/callout';
 export { Chip, chipMeta } from './components/chip';
 export { Code, codeMeta } from './components/code';