@imfusion/web-ui 0.8.1-dev.36.g641eac85 → 0.8.1-dev.47.gcdcf0a9b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.8.1-dev.36.g641eac85",
+  "version": "0.8.1-dev.47.gcdcf0a9b",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -118,8 +118,7 @@
     "@base-ui/react": "1.6.0",
     "@clack/prompts": "1.7.0",
     "class-variance-authority": "0.7.1",
-    "commander": "15.0.0",
-    "iconoir-react": "7.12.1"
+    "commander": "15.0.0"
   },
   "devDependencies": {
     "@imfusion/sdk": "1.0.0",
@@ -140,6 +139,8 @@
     "@vitest/browser-playwright": "5.0.3",
     "concurrently": "9.2.1",
     "culori": "4.0.2",
+    "fast-xml-parser": "5.11.2",
+    "iconoir": "7.12.1",
     "knip": "6.14.2",
     "lightningcss": "1.32.0",
     "mermaid": "12.0.0",

package/src/docgen/doc.gen.json

@@ -89,20 +89,118 @@
   "app-shell": {
     "root": {
       "name": "AppShell.Root",
-      "description": "AppShell — application layout shell.\n\nThe classic dashboard frame: a fixed header, collapsible navbar/aside\nsidebars, an optional footer, and a scrolling main content area. Also called\nan app layout, application frame, dashboard shell, or sidebar layout.\n\nComposed of seven sub-components used with dot-notation: `AppShell.Root` wraps\n`AppShell.Header`, `AppShell.Navbar`, `AppShell.Aside`, `AppShell.Footer`,\n`AppShell.Main`, and (inside a sidebar) `AppShell.Section`.\n\nSizing is CSS-driven — override the `--imf-ui-appshell-*` custom properties\nrather than passing dimension props. Below the responsive breakpoints the\nnavbar (`md`) and aside (`lg`) become sliding overlays toggled via the `open`\nprop; the consumer wires that to a burger button.\n\nCopied and adapted from Mantine's AppShell; no upstream runtime dependency.\nMIT licensed (see Mantine repo).",
-      "props": []
+      "description": "",
+      "props": [
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "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": [
       {
         "name": "AppShell.Aside",
-        "description": "",
+        "description": "Below `lg` the aside opens as a drawer: from the bottom on phones, from the inline end on tablets.",
         "props": [
+          {
+            "name": "onOpenChange",
+            "required": false,
+            "type": "(open: boolean) => void",
+            "defaultValue": null,
+            "description": "Called when the drawer asks to open or close: scrim, swipe, or Escape."
+          },
+          {
+            "name": "onWidthChange",
+            "required": false,
+            "type": "(width: number) => void",
+            "defaultValue": null,
+            "description": "Called with the new width in px when a drag ends, on each arrow-key step, and on reset."
+          },
           {
             "name": "open",
             "required": false,
             "type": "boolean",
             "defaultValue": null,
-            "description": "Whether the mobile overlay is open. Ignored above the `lg` breakpoint, where the aside is always visible."
+            "description": "Whether the drawer is open below the breakpoint. Ignored while the section is docked."
+          },
+          {
+            "name": "resizable",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": "Adds a drag handle on the inline-start edge from the `lg` breakpoint up. Double-click or Home restores the default width."
+          },
+          {
+            "name": "resizeLabel",
+            "required": false,
+            "type": "string",
+            "defaultValue": "Resize panel",
+            "description": "Accessible name of the drag handle."
+          }
+        ]
+      },
+      {
+        "name": "AppShell.Burger",
+        "description": "AppShell.Burger — the header's menu toggle: three sheared bands that cross when `opened`. Takes its color from the\nsurface and hides from `md` up, where the navbar is docked.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ButtonState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "name": "focusableWhenDisabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the button should be focusable when disabled."
+          },
+          {
+            "name": "label",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Accessible name. Defaults to \"Open navigation\" or \"Close navigation\" from `opened`."
+          },
+          {
+            "name": "nativeButton",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
+          },
+          {
+            "name": "opened",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the navigation it controls is open; draws the cross and sets `aria-expanded`."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "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, ButtonState>",
+            "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: ButtonState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
           }
         ]
       },
@@ -123,14 +221,62 @@
       },
       {
         "name": "AppShell.Navbar",
-        "description": "",
+        "description": "`variant=\"branded\"` paints the primary color; children opt into on-color themselves. Below `md` the navbar opens as a\ndrawer from the inline end.",
         "props": [
+          {
+            "name": "onOpenChange",
+            "required": false,
+            "type": "(open: boolean) => void",
+            "defaultValue": null,
+            "description": "Called when the drawer asks to open or close: scrim, swipe, or Escape."
+          },
           {
             "name": "open",
             "required": false,
             "type": "boolean",
             "defaultValue": null,
-            "description": "Whether the mobile overlay is open. Ignored above the `md` breakpoint, where the navbar is always visible."
+            "description": "Whether the drawer is open below the breakpoint. Ignored while the section is docked."
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "\"default\" | \"branded\" | null",
+            "defaultValue": "default",
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "AppShell.NavItem",
+        "description": "AppShell.NavItem — a navbar link: icon, mono label, and an optional description. Takes its color from the navbar;\n`aria-current=\"page\"` marks the current page. Pass a router link through `render`.",
+        "props": [
+          {
+            "name": "description",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "One line under the label saying what is behind the link."
+          },
+          {
+            "name": "icon",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Leading icon, decorative."
+          },
+          {
+            "name": "ref",
+            "required": false,
+            "type": "Ref<HTMLDivElement>",
+            "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."
           }
         ]
       },
@@ -2221,6 +2367,113 @@
     },
     "subComponents": []
   },
+  "icon-button": {
+    "root": {
+      "name": "IconButton",
+      "description": "IconButton — a square Button that shows a single Icon. Composes Button, so every Button variant and native attribute\npasses through.",
+      "props": [
+        {
+          "name": "chamfer",
+          "required": false,
+          "type": "boolean | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ButtonState) => 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": null,
+          "description": ""
+        },
+        {
+          "name": "focusableWhenDisabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the button should be focusable when disabled."
+        },
+        {
+          "name": "glyph",
+          "required": true,
+          "type": "IconComponent",
+          "defaultValue": null,
+          "description": "Icon component imported from `@imfusion/web-ui/icons`."
+        },
+        {
+          "name": "iconProps",
+          "required": false,
+          "type": "Omit<Omit<Omit<SVGProps<SVGSVGElement>, \"ref\"> & RefAttributes<SVGSVGElement>, \"color\"> & VariantProps<(props?: (ConfigVariants<...> & ClassProp)) => string> & { ...; }, \"glyph\">",
+          "defaultValue": null,
+          "description": "Props for the inner Icon, such as `strokeWidth` or a `size` override."
+        },
+        {
+          "name": "label",
+          "required": true,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Accessible name; the button renders no visible text."
+        },
+        {
+          "name": "nativeButton",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
+        },
+        {
+          "name": "radius",
+          "required": false,
+          "type": "\"sm\" | \"md\" | \"lg\" | \"none\" | \"round\" | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLElement>",
+          "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, ButtonState>",
+          "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\" | \"hero\" | null",
+          "defaultValue": "md",
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ButtonState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "| \"primary\"\n| \"secondary\"\n| \"positive\"\n| \"negative\"\n| \"outline\"\n| \"ghost\"\n| null",
+          "defaultValue": null,
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "input": {
     "root": {
       "name": "Input",
@@ -5566,6 +5819,91 @@
     },
     "subComponents": []
   },
+  "skeleton": {
+    "root": {
+      "name": "Skeleton.Root",
+      "description": "Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. Sets\n`aria-busy` and announces `label` once, however many bones it holds.",
+      "props": [
+        {
+          "name": "animation",
+          "required": false,
+          "type": "\"none\" | \"shimmer\"",
+          "defaultValue": "shimmer",
+          "description": "`none` holds every bone inside still."
+        },
+        {
+          "name": "label",
+          "required": true,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Announced once through a visually hidden status. Pass `\"\"` when something else already speaks for the region."
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "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": "Skeleton.Block",
+        "description": "Skeleton.Block — a sized placeholder for a shaped element such as a meter, chip, or avatar.",
+        "props": [
+          {
+            "name": "height",
+            "required": false,
+            "type": "Height<string | number>",
+            "defaultValue": null,
+            "description": "Height of the block."
+          },
+          {
+            "name": "shape",
+            "required": false,
+            "type": "\"circle\" | \"rect\"",
+            "defaultValue": "rect",
+            "description": "`circle` takes its size from `width`, for avatars."
+          },
+          {
+            "name": "width",
+            "required": false,
+            "type": "Width<string | number>",
+            "defaultValue": "100%",
+            "description": "Width of the block, capped at the container width. A circle uses it for both sides."
+          }
+        ]
+      },
+      {
+        "name": "Skeleton.Text",
+        "description": "Skeleton.Text — a text bar exactly one line of the parent's font tall. Place it inside the real Typo element so the\nrow keeps the loaded row's height.",
+        "props": [
+          {
+            "name": "lines",
+            "required": false,
+            "type": "number",
+            "defaultValue": "1",
+            "description": "Number of stacked lines. The last of several is 60% wide."
+          },
+          {
+            "name": "width",
+            "required": false,
+            "type": "Width<string | number>",
+            "defaultValue": "100%",
+            "description": "Width of the bar, capped at the container width."
+          }
+        ]
+      }
+    ]
+  },
   "slider": {
     "root": {
       "name": "Slider.Root",
@@ -6264,6 +6602,26 @@
         "description": "Table.Row — a `<tr>` in header or body.",
         "props": []
       },
+      {
+        "name": "Table.RowLink",
+        "description": "Table.RowLink — an `<a>` that stands in for its whole row, such as a link to the row's detail page. Reads as row text,\nnot as a separate link, and wraps anywhere so long values like emails stay inside a narrow table.",
+        "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": "Table.SortableHeaderCell",
         "description": "Table.SortableHeaderCell — a header cell whose label is a sort toggle,\npre-composing HeaderCell + HeaderButton so `aria-sort` and the direction\nindicator aren't re-derived per consumer. Omit `onToggle` for a plain cell.",