@imfusion/web-ui 0.5.1-dev.7.ga571658e → 0.6.0

package/src/docgen/doc.gen.json

@@ -177,7 +177,7 @@
       },
       {
         "name": "Callout.Icon",
-        "description": "Callout.Icon — the leading status glyph. With no children it renders the\nvariant's default lucide icon; pass a custom icon as children to override.\n`aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits\nthe status colour via `currentColor`.",
+        "description": "Callout.Icon — the leading status glyph. With no children it renders the\nvariant's default local icon; pass a custom icon as children to override.\n`aria-hidden` (the variant is conveyed by copy, not the glyph) and inherits\nthe status colour via `currentColor`.",
         "props": []
       },
       {
@@ -448,7 +448,7 @@
   "chip-link": {
     "root": {
       "name": "ChipLink",
-      "description": "ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the\nvariant and appearance axes stay aligned, and auto-appends a directional icon\n(Lucide `ArrowUpRight` for external, `ArrowRight` for internal).",
+      "description": "ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the\nvariant and appearance axes stay aligned, and auto-appends a directional icon\n(local Web UI `ArrowUpRight` for external, `ArrowRight` for internal).",
       "props": [
         {
           "name": "appearance",
@@ -491,14 +491,14 @@
     "subComponents": [
       {
         "name": "Code.Block",
-        "description": "Code.Block — a fenced code block on a flat brand surface, with an optional\nchamfered language notch (top-left) and a copy button (top-right). The\nsurface follows the global corner-radius token when a preset opts in.\nDumb: styling only — syntax coloring arrives pre-rendered through the\n`highlighted` slot (the code-highlight integration supplies it). Children\nmust be a string so the copy button has clean text to copy.",
+        "description": "Code.Block — a fenced code block on a flat brand surface, with an optional\nchamfered language notch (top-left) and a copy button (top-right). The\nsurface follows the global corner-radius token when a preset opts in. The\ncopy button copies the rendered text.",
         "props": [
           {
             "name": "children",
             "required": true,
-            "type": "string",
+            "type": "ReactNode",
             "defaultValue": null,
-            "description": "The code to display, as a raw string — also the value copied by the copy button."
+            "description": "Code content shown in the block. The copy button copies its rendered text."
           },
           {
             "name": "hideCopy",
@@ -507,13 +507,6 @@
             "defaultValue": "false",
             "description": "Hide the copy button."
           },
-          {
-            "name": "highlighted",
-            "required": false,
-            "type": "ReactNode",
-            "defaultValue": null,
-            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
-          },
           {
             "name": "language",
             "required": false,
@@ -525,14 +518,14 @@
       },
       {
         "name": "Code.Inline",
-        "description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. Dumb: styling only — syntax coloring arrives pre-rendered through the\n`highlighted` slot (the code-highlight integration supplies it). `Typo.InlineCode`\nrenders this under the hood so inline-code chrome is defined in one place.\nChildren must be a string so an opted-in copy button has clean text to copy.",
+        "description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. `Typo.InlineCode` renders this under the hood so inline-code chrome is\ndefined in one place. The copy button copies the rendered text.",
         "props": [
           {
             "name": "children",
             "required": true,
-            "type": "string",
+            "type": "ReactNode",
             "defaultValue": null,
-            "description": "The inline code, as a raw string — also the value copied when `copyable`."
+            "description": "Code content shown in the chip. The copy button copies its rendered text."
           },
           {
             "name": "copyable",
@@ -540,13 +533,6 @@
             "type": "boolean",
             "defaultValue": "false",
             "description": "Show a small copy button on the right, behind a hairline separator."
-          },
-          {
-            "name": "highlighted",
-            "required": false,
-            "type": "ReactNode",
-            "defaultValue": null,
-            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
           }
         ]
       },
@@ -1194,6 +1180,363 @@
       }
     ]
   },
+  "field": {
+    "root": {
+      "name": "Field.Root",
+      "description": "Field.Root — groups a label, control, validation state, and supporting copy.",
+      "props": [
+        {
+          "name": "actionsRef",
+          "required": false,
+          "type": "RefObject<FieldRootActions | null>",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: FieldRootState) => string)",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "dirty",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": ""
+        },
+        {
+          "name": "invalid",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "name",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldRootState>",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: FieldRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "touched",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "validate",
+          "required": false,
+          "type": "(\n  value: unknown,\n  formValues: Record<string, any>\n) =>\n  | string\n  | string[]\n  | Promise<string | string[] | null>\n  | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "validationDebounceTime",
+          "required": false,
+          "type": "number",
+          "defaultValue": "0",
+          "description": ""
+        },
+        {
+          "name": "validationMode",
+          "required": false,
+          "type": "FormValidationMode",
+          "defaultValue": "onSubmit",
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Field.Control",
+        "description": "Field.Control — a native input control with Field labeling and validation.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldControlState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "defaultValue",
+            "required": false,
+            "type": "string | number | readonly string[]",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "onValueChange",
+            "required": false,
+            "type": "(\n  value: string,\n  eventDetails: {\n    reason: \"none\";\n    event: Event;\n    cancel: () => void;\n    allowPropagation: () => void;\n    isCanceled: boolean;\n    isPropagationAllowed: boolean;\n    trigger: Element;\n  }\n) => void",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldControlState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldControlState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Description",
+        "description": "Field.Description — supporting information for a field.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "| string\n| ((state: FieldDescriptionState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldDescriptionState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldDescriptionState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Error",
+        "description": "Field.Error — an inline validation message shown when its match condition fails.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldErrorState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "match",
+            "required": false,
+            "type": "boolean | keyof ValidityState",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldErrorState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldErrorState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Item",
+        "description": "Field.Item — groups one checkable option with its label and description.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldItemState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "disabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldItemState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldItemState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Label",
+        "description": "Field.Label — an accessible label automatically associated with the control.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldLabelState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "nativeLabel",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldLabelState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldLabelState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "Field.Validity",
+        "description": "Field.Validity — renderless access to the field validity data for custom messages.\nIts function child owns the rendered element and therefore its identity and styling.",
+        "props": []
+      }
+    ]
+  },
+  "fieldset": {
+    "root": {
+      "name": "Fieldset.Root",
+      "description": "Fieldset.Root — semantic grouping for related form controls and a shared legend.",
+      "props": [
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: FieldsetRootState) => string)",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetRootState>",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: FieldsetRootState) => CSSProperties)",
+          "defaultValue": null,
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "Fieldset.Legend",
+        "description": "Fieldset.Legend — the accessible label for its related controls.",
+        "props": [
+          {
+            "name": "className",
+            "required": false,
+            "type": "string | ((state: FieldsetLegendState) => string)",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "render",
+            "required": false,
+            "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, FieldsetLegendState>",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "style",
+            "required": false,
+            "type": "| CSSProperties\n| ((state: FieldsetLegendState) => CSSProperties)",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      }
+    ]
+  },
+  "icon": {
+    "root": {
+      "name": "Icon",
+      "description": "Icon — renders an icon component with a semantic Web UI foreground color.",
+      "props": [
+        {
+          "name": "glyph",
+          "required": true,
+          "type": "IconComponent",
+          "defaultValue": null,
+          "description": "Icon component imported from `@imfusion/web-ui/icons`."
+        },
+        {
+          "name": "size",
+          "required": false,
+          "type": "string | number",
+          "defaultValue": null,
+          "description": "Sets both SVG dimensions unless `width` or `height` is provided."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "| \"inherit\"\n| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"positive\"\n| \"negative\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
+          "defaultValue": "inherit",
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "input": {
     "root": {
       "name": "Input",
@@ -1206,6 +1549,13 @@
           "defaultValue": null,
           "description": ""
         },
+        {
+          "name": "onClear",
+          "required": false,
+          "type": "() => void",
+          "defaultValue": null,
+          "description": "Called when the search input's clear button is pressed."
+        },
         {
           "name": "onValueChange",
           "required": false,
@@ -4444,9 +4794,9 @@
           {
             "name": "children",
             "required": true,
-            "type": "string",
+            "type": "ReactNode",
             "defaultValue": null,
-            "description": "The inline code, as a raw string — also the value copied when `copyable`."
+            "description": "Code content shown in the chip. The copy button copies its rendered text."
           },
           {
             "name": "copyable",
@@ -4454,13 +4804,6 @@
             "type": "boolean",
             "defaultValue": "false",
             "description": "Show a small copy button on the right, behind a hairline separator."
-          },
-          {
-            "name": "highlighted",
-            "required": false,
-            "type": "ReactNode",
-            "defaultValue": null,
-            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
           }
         ]
       },
@@ -4486,7 +4829,7 @@
       },
       {
         "name": "Typo.Link",
-        "description": "Typo.Link — inline anchor. Auto-appends a directional icon (Lucide `ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links.",
+        "description": "Typo.Link — inline anchor. Auto-appends a local Web UI directional icon (`ArrowUpRight` for external, `ArrowRight` for internal), mirroring ChipLink's affordance for prose links.",
         "props": [
           {
             "name": "kind",
@@ -4588,14 +4931,14 @@
     "subComponents": [
       {
         "name": "CodeHighlight.Block",
-        "description": "Code.Block — the core `Code.Block` with TanStack Highlight tokens filling its `highlighted` slot.",
+        "description": "Code.Block — the core `Code.Block` with TanStack Highlight tokens rendered inside.",
         "props": [
           {
             "name": "children",
             "required": true,
             "type": "string",
             "defaultValue": null,
-            "description": "The code to display, as a raw string — also the value copied by the copy button."
+            "description": "Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting."
           },
           {
             "name": "hideCopy",
@@ -4609,20 +4952,20 @@
             "required": false,
             "type": "SupportedLanguage",
             "defaultValue": null,
-            "description": "Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting."
+            "description": ""
           }
         ]
       },
       {
         "name": "CodeHighlight.Inline",
-        "description": "Code.Inline — the core `Code.Inline` with TanStack Highlight tokens filling its `highlighted` slot.",
+        "description": "Code.Inline — the core `Code.Inline` with TanStack Highlight tokens rendered inside.",
         "props": [
           {
             "name": "children",
             "required": true,
             "type": "string",
             "defaultValue": null,
-            "description": "The inline code, as a raw string — also the value copied when `copyable`."
+            "description": "Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text."
           },
           {
             "name": "copyable",
@@ -4636,7 +4979,7 @@
             "required": false,
             "type": "SupportedLanguage",
             "defaultValue": null,
-            "description": "Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text."
+            "description": ""
           }
         ]
       },