@imfusion/web-ui 0.8.1-dev.2.g74f81c31 → 0.8.1-dev.3.g40eaad1c

package/CHANGELOG.md

@@ -6,7 +6,9 @@
 
 - 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.
+  - `AccountCard` links to the signed-in person's account: a large title over a quiet subtitle, then the organization and a
+    mono role under a rule, with an action such as Log out in its top row. Emails wrap at the `@` and at dots, and
+    `AccountCard.Group` lists several cards with the current one marked.
 
 ---
 

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

@@ -4,20 +4,26 @@ 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>;
+type RootProps = React.HTMLAttributes<HTMLDivElement> & 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.
+ * AccountCard.Root — the signed-in person's card: `AccountCard.Link` and, in its top row, `AccountCard.Action`. The
+ * action sits beside the link, not inside it, since 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;
+context, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
+/**
+ * AccountCard.Link — the link to the account, holding `AccountCard.Avatar`, `AccountCard.Title`,
+ * `AccountCard.Subtitle`, `AccountCard.Description`, and `AccountCard.Role`. Pass a router link through `render`. Its
+ * accessible name is its text; the avatar stays decorative.
+ */
+declare function Link({ render, ...props }: useRender.ComponentProps<"a">): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare namespace Link {
+    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;
@@ -32,22 +38,46 @@ declare function Avatar({ src, size, children, ...props }: AvatarProps): import(
 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;
+/**
+ * AccountCard.Title — the account's name, or the email's local part until a name exists. Set large; text wraps before
+ * an `@` and after a dot.
+ */
+declare function Title({ children, ...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. */
+/**
+ * AccountCard.Subtitle — the quiet line under the title: the email's domain, or the whole email once the title is a
+ * name. Text wraps before an `@` and after a dot.
+ */
+declare function Subtitle({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Subtitle {
+    var displayName: string;
+}
+/** AccountCard.Description — the organization, under a rule at the foot of the card. */
 declare function Description(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Description {
     var displayName: string;
 }
+/** AccountCard.Role — a mono uppercase label beside the description, such as the person's role. */
+declare function Role(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Role {
+    var displayName: string;
+}
 /**
- * AccountCard.Action — a trailing slot beside `AccountCard.Root`, such as a ghost icon `Button` that logs out. The
+ * AccountCard.Action — a slot in the card's top row, beside the link, 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 };
+/**
+ * AccountCard.Group — a list of cards, such as accounts to switch between. Inside it a link with `aria-current="page"`
+ * shows as current; a standalone card is always the signed-in account and shows no current state.
+ */
+declare function Group(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Group {
+    var displayName: string;
+}
+export { Root, Link, Avatar, Title, Subtitle, Description, Role, Action, Group };