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

package/dist/utils/break-hints.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** Inserts `<wbr>` before each `@` and after each `.` of string children, so an email wraps at its seams. */
+export declare function withBreakHints(children: ReactNode): ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.8.1-dev.2.g74f81c31",
+  "version": "0.8.1-dev.3.g40eaad1c",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -2,7 +2,7 @@
   "account-card": {
     "root": {
       "name": "AccountCard.Root",
-      "description": "AccountCard.Root — the link to the signed-in person's account, holding `AccountCard.Avatar`, `AccountCard.Title`, and\n`AccountCard.Description`. Pass a router link through `render`. `aria-current=\"page\"` marks it current with a tint and\nan inset rule. Its accessible name is the title and description; the avatar stays decorative.\n\nPlace `AccountCard.Action` beside the root, not inside it: a link cannot contain a button.",
+      "description": "AccountCard.Root — the signed-in person's card: `AccountCard.Link` and, in its top row, `AccountCard.Action`. The\naction sits beside the link, not inside it, since a link cannot contain a button.",
       "props": [
         {
           "name": "context",
@@ -10,27 +10,13 @@
           "type": "\"default\" | \"oncolor\" | null",
           "defaultValue": "default",
           "description": ""
-        },
-        {
-          "name": "ref",
-          "required": false,
-          "type": "Ref<HTMLAnchorElement>",
-          "defaultValue": null,
-          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
-        },
-        {
-          "name": "render",
-          "required": false,
-          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, {}>",
-          "defaultValue": null,
-          "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
         }
       ]
     },
     "subComponents": [
       {
         "name": "AccountCard.Action",
-        "description": "AccountCard.Action — a trailing slot beside `AccountCard.Root`, such as a ghost icon `Button` that logs out. The\nbutton carries its own `aria-label` and its own `context`.",
+        "description": "AccountCard.Action — a slot in the card's top row, beside the link, such as a ghost icon `Button` that logs out. The\nbutton carries its own `aria-label` and its own `context`.",
         "props": []
       },
       {
@@ -55,12 +41,47 @@
       },
       {
         "name": "AccountCard.Description",
-        "description": "AccountCard.Description — a second line such as organization and role. Truncates to one line.",
+        "description": "AccountCard.Description — the organization, under a rule at the foot of the card.",
+        "props": []
+      },
+      {
+        "name": "AccountCard.Group",
+        "description": "AccountCard.Group — a list of cards, such as accounts to switch between. Inside it a link with `aria-current=\"page\"`\nshows as current; a standalone card is always the signed-in account and shows no current state.",
+        "props": []
+      },
+      {
+        "name": "AccountCard.Link",
+        "description": "AccountCard.Link — the link to the account, holding `AccountCard.Avatar`, `AccountCard.Title`,\n`AccountCard.Subtitle`, `AccountCard.Description`, and `AccountCard.Role`. Pass a router link through `render`. Its\naccessible name is its text; the avatar stays decorative.",
+        "props": [
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLAnchorElement>",
+            "defaultValue": null,
+            "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, {}>",
+            "defaultValue": null,
+            "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          }
+        ]
+      },
+      {
+        "name": "AccountCard.Role",
+        "description": "AccountCard.Role — a mono uppercase label beside the description, such as the person's role.",
+        "props": []
+      },
+      {
+        "name": "AccountCard.Subtitle",
+        "description": "AccountCard.Subtitle — the quiet line under the title: the email's domain, or the whole email once the title is a\nname. Text wraps before an `@` and after a dot.",
         "props": []
       },
       {
         "name": "AccountCard.Title",
-        "description": "AccountCard.Title — the account's name, or its email until a name exists. Truncates to one line.",
+        "description": "AccountCard.Title — the account's name, or the email's local part until a name exists. Set large; text wraps before\nan `@` and after a dot.",
         "props": []
       }
     ]

package/src/llms/llms.gen.txt

@@ -11,7 +11,7 @@ props, which always live in the docgen file above.
 
 ## AccountCard
 - category: Display, status: experimental
-Link to the signed-in person's account, with avatar, name or email, and a second line such as organization and role. Also called an ID card or user row; for a bare person badge, use Avatar.
+Card linking to the signed-in person's account: avatar, a large name or email, a quiet line under it, and organization and role at its foot, with a trailing action such as Log out. Also called an ID card or user row; for a bare person badge, use Avatar.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .account-card (jq: jq '.account-card' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
 ## AppShell