@imfusion/web-ui 0.8.1-dev.48.g0dad5878 → 0.8.1-dev.50.g91c115bb

package/package.json

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

package/src/docgen/doc.gen.json

@@ -460,7 +460,7 @@
           "required": false,
           "type": "ReactNode",
           "defaultValue": null,
-          "description": "Trailing slot — typically an icon. When present, the label aligns left and the icon pins right."
+          "description": "Trailing slot, typically an icon."
         },
         {
           "name": "focusableWhenDisabled",
@@ -469,6 +469,13 @@
           "defaultValue": "false",
           "description": "Whether the button should be focusable when disabled."
         },
+        {
+          "name": "justify",
+          "required": false,
+          "type": "\"center\" | \"spread\" | null",
+          "defaultValue": "center",
+          "description": ""
+        },
         {
           "name": "nativeButton",
           "required": false,
@@ -509,7 +516,7 @@
           "required": false,
           "type": "ReactNode",
           "defaultValue": null,
-          "description": "Leading slot — typically a label. When present, the label aligns right and the icon pins left."
+          "description": "Leading slot, typically an icon."
         },
         {
           "name": "style",
@@ -1209,7 +1216,7 @@
           "required": false,
           "type": "ReactNode",
           "defaultValue": null,
-          "description": "Trailing slot — typically an icon. When present, the label aligns left and the icon pins right."
+          "description": "Trailing slot, typically an icon."
         },
         {
           "name": "focusableWhenDisabled",
@@ -1218,6 +1225,13 @@
           "defaultValue": "false",
           "description": "Whether the button should be focusable when disabled."
         },
+        {
+          "name": "justify",
+          "required": false,
+          "type": "\"center\" | \"spread\" | null",
+          "defaultValue": null,
+          "description": ""
+        },
         {
           "name": "label",
           "required": false,
@@ -1265,7 +1279,7 @@
           "required": false,
           "type": "ReactNode",
           "defaultValue": null,
-          "description": "Leading slot — typically a label. When present, the label aligns right and the icon pins left."
+          "description": "Leading slot, typically an icon."
         },
         {
           "name": "style",
@@ -2597,6 +2611,229 @@
     },
     "subComponents": []
   },
+  "meter": {
+    "root": {
+      "name": "Meter.Root",
+      "description": "Meter.Root — read-only measurement of a value within a known range.\n\nWithout a visible `Meter.Label`, name the meter with `aria-label`.",
+      "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 meter."
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: MeterRootState) => 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": "(formattedValue: string, value: number) => string",
+          "defaultValue": null,
+          "description": "A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter."
+        },
+        {
+          "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, MeterRootState>",
+          "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: MeterRootState) => 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",
+          "defaultValue": null,
+          "description": "The current value."
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Meter.Indicator",
+        "description": "Meter.Indicator — filled portion of the track up to the value.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: MeterIndicatorState) => 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, MeterIndicatorState>",
+            "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: MeterIndicatorState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Meter.Label",
+        "description": "Meter.Label — accessible label for the meter.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: MeterLabelState) => 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, MeterLabelState>",
+            "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: MeterLabelState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Meter.Track",
+        "description": "Meter.Track — the full range.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: MeterTrackState) => 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, MeterTrackState>",
+            "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: MeterTrackState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      },
+      {
+        "name": "Meter.Value",
+        "description": "Meter.Value — formatted readout of the current value.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: MeterValueState) => 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, MeterValueState>",
+            "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: MeterValueState) => CSSProperties)",
+            "defaultValue": null,
+            "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+          }
+        ]
+      }
+    ]
+  },
   "navigation-menu": {
     "root": {
       "name": "NavigationMenu.Root",

package/src/llms/llms.gen.txt

@@ -129,6 +129,12 @@ Single-line text input for form data entry. Also called a text field; it support
 Renders a logo from a URL or inline React element with consistent sizing. Also called a wordmark or brand mark.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .logo (jq: jq '.logo' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Meter
+- category: Display, status: experimental
+Read-only bar for a measured amount within a known range, such as seats in use or storage used. Also called a gauge or usage bar. Use Slider when the user sets the value.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .meter (jq: jq '.meter' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/meter.md
+
 ## NavigationMenu
 - category: Display, status: experimental
 Navigation menu with horizontal or vertical triggers and anchored flyout panels. Also called a menu bar or mega menu; it supports links, rich cards, and nested navigation.