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

package/package.json

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

package/src/docgen/doc.gen.json

@@ -1,4 +1,70 @@
 {
+  "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.",
+      "props": [
+        {
+          "name": "context",
+          "required": false,
+          "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`.",
+        "props": []
+      },
+      {
+        "name": "AccountCard.Avatar",
+        "description": "AccountCard.Avatar — a decorative `Avatar` in the card's context. Its children are the initials; without them it shows\na person glyph.",
+        "props": [
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | null",
+            "defaultValue": "md",
+            "description": "The avatar size."
+          },
+          {
+            "name": "src",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "The person's photo. Until it loads, and when it fails, the initials or the person glyph show instead."
+          }
+        ]
+      },
+      {
+        "name": "AccountCard.Description",
+        "description": "AccountCard.Description — a second line such as organization and role. Truncates to one line.",
+        "props": []
+      },
+      {
+        "name": "AccountCard.Title",
+        "description": "AccountCard.Title — the account's name, or its email until a name exists. Truncates to one line.",
+        "props": []
+      }
+    ]
+  },
   "app-shell": {
     "root": {
       "name": "AppShell.Root",
@@ -62,6 +128,140 @@
       }
     ]
   },
+  "avatar": {
+    "root": {
+      "name": "Avatar.Root",
+      "description": "Avatar.Root — a round badge that stands for a person. Also called a profile picture or user badge.\n\nWithout `aria-label` or `aria-labelledby` it is decorative and hidden from assistive tech, for use next to a visible\nname. With a label it is announced as an image with that name.",
+      "props": [
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: AvatarRootState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "context",
+          "required": false,
+          "type": "\"default\" | \"oncolor\" | null",
+          "defaultValue": "default",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLSpanElement>",
+          "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, AvatarRootState>",
+          "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": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | \"lg\" | null",
+          "defaultValue": "md",
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: AvatarRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Avatar.Fallback",
+        "description": "Avatar.Fallback — the initials the consumer passes, one or two letters. Without children it shows a person glyph.\nIt derives nothing from a name or email.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: AvatarFallbackState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "delay",
+            "required": false,
+            "type": "number",
+            "defaultValue": null,
+            "description": "How long to wait before showing the fallback. Specified in milliseconds."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLSpanElement>",
+            "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, AvatarFallbackState>",
+            "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": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: AvatarFallbackState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Avatar.Image",
+        "description": "Avatar.Image — the person's photo, cropped to the circle. It shows once `src` has loaded; until then, and when it\nfails, `Avatar.Fallback` shows instead.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: AvatarImageState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "onLoadingStatusChange",
+            "required": false,
+            "type": "(status: ImageLoadingStatus) => void",
+            "defaultValue": null,
+            "description": "Callback fired when the loading status changes."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLSpanElement>",
+            "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, AvatarImageState>",
+            "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": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: AvatarImageState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      }
+    ]
+  },
   "button": {
     "root": {
       "name": "Button",

package/src/llms/llms.gen.txt

@@ -9,11 +9,22 @@ reading the whole file. `further reading` links (when present) point at
 the upstream library's own docs for usage/anatomy/composition — not for
 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.
+- 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
 - category: Layout, status: stable
 Application layout shell for a header, sidebars, footer, and scrolling main area. Also called an app layout or dashboard shell; sizing is CSS-driven and sidebars can become sliding panels on small screens.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .app-shell (jq: jq '.app-shell' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Avatar
+- category: Display, status: experimental
+Round badge that stands for a person, showing their photo, their initials, or a person glyph. Also called a profile picture or user badge; for a signed-in account row with a name, use AccountCard.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .avatar (jq: jq '.avatar' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/avatar.md
+
 ## Button
 - category: Buttons, status: stable
 Triggers an action such as submit, confirm, cancel, navigate, or delete. Also called a CTA or action button; variants and sizes communicate its importance.