@imfusion/web-ui 0.11.1-dev.35.g0028b4dd → 0.11.1-dev.39.g98a8338c

package/package.json

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

package/src/docgen/doc.gen.json

@@ -1776,7 +1776,7 @@
   "card": {
     "root": {
       "name": "Card.Root",
-      "description": "Card.Root — a surface container composed of slots: an optional `Card.Image`\n(bleeds edge-to-edge, no padding), then `Card.Header` / `Card.Content` /\n`Card.Footer`. `density` sets one scale that drives both each slot's padding\nand the gap between slots. `variant` picks the look — neutral tonal surfaces\n(`main`/`support`/`minor`) carry a hairline border; coloured intent fills\n(`primary`/`brand`) flip to contrast text and drop the border. `shadow` and\n`radius` layer on top. Also called a panel, tile, or paper.\n\nThe image is always the first entry in the stack, so `orientation` just\nswitches the stack between a column and a row without reordering slots.\n\n`shadow` defaults to `lg`; `shadow=\"none\"` gives the flat surface. It picks the elevation level only: how hard or\nspread the shadow reads is global, set by `--imf-ui-shadow-hardness` and `--imf-ui-shadow-spread`.",
+      "description": "Card.Root — a surface container composed of slots: an optional `Card.Image`\n(bleeds edge-to-edge, no padding), then `Card.Header` / `Card.Content` /\n`Card.Footer`. `density` sets one scale that drives both each slot's padding\nand the gap between slots. `variant` picks the look — neutral tonal surfaces\n(`main`/`support`/`minor`) carry a hairline border; coloured intent fills\n(`primary`/`brand`) set the background only and are borderless. Put `oncolor`\ncontent inside them, e.g. `Typo variant=\"oncolor\"` and `Button context=\"oncolor\"`.\n`shadow` and `radius` layer on top. Also called a panel, tile, or paper.\n\nThe image is always the first entry in the stack, so `orientation` just\nswitches the stack between a column and a row without reordering slots.\n\n`shadow` defaults to `lg`; `shadow=\"none\"` gives the flat surface. It picks the elevation level only: how hard or\nspread the shadow reads is global, set by `--imf-ui-shadow-hardness` and `--imf-ui-shadow-spread`.",
       "props": [
         {
           "name": "density",
@@ -8553,6 +8553,243 @@
       }
     ]
   },
+  "progress": {
+    "root": {
+      "name": "Progress.Root",
+      "description": "Progress.Root — completion of a running task, such as an upload or export.\n\n`value={null}` is indeterminate. Without a visible `Progress.Label`, name the bar with `aria-label`. Base UI hides\n`Progress.Value` from assistive tech, so custom Value text needs a matching `aria-valuetext`.",
+      "props": [
+        {
+          "name": "aria-valuetext",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar."
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ProgressRootState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "format",
+          "required": false,
+          "type": "NumberFormatOptions",
+          "defaultValue": null,
+          "description": "Options to format the value."
+        },
+        {
+          "name": "getAriaValueText",
+          "required": false,
+          "type": "(\n  formattedValue: string | null,\n  value: number | null\n) => string",
+          "defaultValue": null,
+          "description": "Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar."
+        },
+        {
+          "name": "layout",
+          "required": false,
+          "type": "\"stacked\" | \"inline\" | null",
+          "defaultValue": "stacked",
+          "description": ""
+        },
+        {
+          "name": "locale",
+          "required": false,
+          "type": "LocalesArgument",
+          "defaultValue": null,
+          "description": "The locale used by `Intl.NumberFormat` when formatting the value.\nDefaults to the user's runtime locale."
+        },
+        {
+          "name": "max",
+          "required": false,
+          "type": "number",
+          "defaultValue": "100",
+          "description": "The maximum value."
+        },
+        {
+          "name": "min",
+          "required": false,
+          "type": "number",
+          "defaultValue": "0",
+          "description": "The minimum value."
+        },
+        {
+          "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, ProgressRootState>",
+          "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": "\"xs\" | \"sm\" | \"md\" | \"lg\" | null",
+          "defaultValue": "md",
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ProgressRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        },
+        {
+          "name": "value",
+          "required": true,
+          "type": "number | null",
+          "defaultValue": "null",
+          "description": "The current value. The component is indeterminate when value is `null`."
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Progress.Indicator",
+        "description": "Progress.Indicator — filled portion of the track up to the value.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: ProgressIndicatorState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "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, ProgressIndicatorState>",
+            "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: ProgressIndicatorState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Progress.Label",
+        "description": "Progress.Label — accessible label for the progress bar.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ProgressLabelState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "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, ProgressLabelState>",
+            "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: ProgressLabelState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Progress.Track",
+        "description": "Progress.Track — the full range.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ProgressTrackState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "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, ProgressTrackState>",
+            "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: ProgressTrackState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Progress.Value",
+        "description": "Progress.Value — formatted readout of the current value. Renders nothing while indeterminate.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: ProgressValueState) => string)",
+            "defaultValue": null,
+            "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+          },
+          {
+            "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, ProgressValueState>",
+            "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: ProgressValueState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      }
+    ]
+  },
   "prose": {
     "root": {
       "name": "Prose",

package/src/llms/llms.gen.txt

@@ -181,6 +181,12 @@ Floating panel anchored to a trigger for contextual content, quick forms, or act
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .popover (jq: jq '.popover' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/popover.md
 
+## Progress
+- category: Display, status: experimental
+Bar for the completion of a running task, such as an upload or export. Also called a progress bar. Indeterminate when the amount is unknown. Use Meter for a static measure within a range.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .progress (jq: jq '.progress' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/progress.md
+
 ## Prose
 - category: Layout, status: experimental
 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.