@imfusion/web-ui 0.9.1-dev.6.gbdb251ae → 0.9.1-dev.9.gdfff1530

package/package.json

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

package/src/docgen/doc.gen.json

@@ -5268,6 +5268,50 @@
     },
     "subComponents": []
   },
+  "rich-link": {
+    "root": {
+      "name": "RichLink",
+      "description": "RichLink — a link as a whole row: an optional leading icon on a tinted tile, the label with an optional description\nline, and a trailing icon for where it leads. Draws no divider; stacked links get their spacing from the layout. Wrap it\nwith TanStack Router's `createLink` to use it as a router link.",
+      "props": [
+        {
+          "name": "description",
+          "required": false,
+          "type": "ReactNode",
+          "defaultValue": null,
+          "description": "Second line under the label. When set, the label turns bold."
+        },
+        {
+          "name": "endGlyph",
+          "required": false,
+          "type": "IconComponent",
+          "defaultValue": null,
+          "description": "Trailing icon from `@imfusion/web-ui/icons`, replacing the arrow `kind` picks, such as `Download` for a file."
+        },
+        {
+          "name": "glyph",
+          "required": false,
+          "type": "IconComponent",
+          "defaultValue": null,
+          "description": "Leading icon from `@imfusion/web-ui/icons`, shown on a tile in the primary color."
+        },
+        {
+          "name": "kind",
+          "required": false,
+          "type": "\"external\" | \"internal\"",
+          "defaultValue": "external",
+          "description": "Link target scope. `\"external\"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `\"internal\"` stays in the current tab with a horizontal `ArrowRight` icon."
+        },
+        {
+          "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}"
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "row": {
     "root": {
       "name": "Row",

package/src/llms/llms.gen.txt

@@ -163,6 +163,11 @@ Floating panel anchored to a trigger for contextual content, quick forms, or act
 Flow container that spaces long-form text and the blocks inside it. Also called an article or rich-text container. Use Stack or Row for UI layout.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .prose (jq: jq '.prose' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## RichLink
+- category: Buttons, status: experimental
+Link as a whole row: optional leading icon, label, optional description line, and a trailing arrow for where it leads. Also called a link row or resource link. Use ChipLink for a compact link inside other content.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .rich-link (jq: jq '.rich-link' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## Row
 - category: Layout, status: stable
 Horizontal layout primitive for spacing, aligning, and wrapping children. Also called a horizontal stack or flex row.

package/src/llms/skills/imf-web-ui-ux/SKILL.md

@@ -46,6 +46,8 @@ reason.
 ## Choose between similar controls
 
 - `Button` performs an action, `ChipLink` goes somewhere, and `Chip` labels something.
+- Use `ChipLink` for a link inside text or a row of chips, and `RichLink` for a link that fills its own row, such as a list
+  of resources.
 - Use plain `Table` parts for static small data. Pair them with a headless table library for sorting, pagination, or column
   logic. TanStack Table is the recommended choice.
 - Use `Callout` for persistent in-place status. Put transient confirmation near the action until a toast pattern exists.