@imfusion/web-ui 0.11.1-dev.42.ge966e634 → 0.11.1-dev.45.gf7b49f57

package/src/docgen/doc.gen.json

@@ -5863,6 +5863,540 @@
       }
     ]
   },
+  "file-drop-zone": {
+    "root": {
+      "name": "FileDropZone.Root",
+      "description": "FileDropZone.Root — a group that collects files and folders by drop or by its Triggers and reports them through\n`onFilesAdded`. The Triggers are the keyboard and screen reader path; dropping is an enhancement.",
+      "props": [
+        {
+          "name": "accept",
+          "required": false,
+          "type": "string[]",
+          "defaultValue": null,
+          "description": "Accepted file types: extensions (`\".nii.gz\"`), MIME types (`\"image/png\"`) or wildcards (`\"image/*\"`). Any file when empty."
+        },
+        {
+          "name": "directory",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether folders can be dropped or picked. They are scanned recursively. Needs `multiple`."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Blocks dropping and picking; the Triggers follow."
+        },
+        {
+          "name": "formatStatus",
+          "required": false,
+          "type": "(accepted: number, rejected: number) => string",
+          "defaultValue": null,
+          "description": "Words for the screen reader status after each drop or pick. Return `\"\"` to stay silent."
+        },
+        {
+          "name": "invalid",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Marks the zone as holding a problem. The message belongs in `Field.Error` or a `Callout`."
+        },
+        {
+          "name": "multiple",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether more than one file can be added at once. With `false`, only the first accepted file is kept."
+        },
+        {
+          "name": "onDragStateChange",
+          "required": false,
+          "type": "(state: DragState) => void",
+          "defaultValue": null,
+          "description": "Called when a drag over the zone starts, changes or ends. `\"rejecting\"` is reported only for a dragged type the\nbrowser exposes and `accept` cannot produce; names and counts are unknown until the drop."
+        },
+        {
+          "name": "onFilesAdded",
+          "required": false,
+          "type": "(\n  accepted: FileDropZoneItem[],\n  rejected: FileDropZoneItem[]\n) => void",
+          "defaultValue": null,
+          "description": "Called once per drop or pick with the files that match `accept` and those that do not."
+        },
+        {
+          "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": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | \"lg\" | null",
+          "defaultValue": "md",
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": [
+      {
+        "name": "FileDropZone.Actions",
+        "description": "FileDropZone.Actions — the row of Triggers.",
+        "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}"
+          }
+        ]
+      },
+      {
+        "name": "FileDropZone.Description",
+        "description": "FileDropZone.Description — describes the group, such as the accepted file types.",
+        "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}"
+          }
+        ]
+      },
+      {
+        "name": "FileDropZone.File",
+        "description": "FileDropZone.File — the file a single-file zone holds, in place of `Title` and `Description`. It names the group,\ndescribes it with the size, and sets `data-filled` on the Root while mounted. Long names truncate in the middle so the\nextension stays readable; the full name is the `title`.",
+        "props": [
+          {
+            "name": "file",
+            "required": true,
+            "type": "File",
+            "defaultValue": null,
+            "description": "The single file the zone holds. Its name shows middle-truncated, with the last 12 characters kept, and its size in mono."
+          },
+          {
+            "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": "FileDropZone.Glyph",
+        "description": "FileDropZone.Glyph — the large icon of the `lg` zone: the upload icon, or a page while a `FileDropZone.File` is mounted. It renders nothing in `sm` and `md`.",
+        "props": [
+          {
+            "name": "glyph",
+            "required": false,
+            "type": "IconComponent",
+            "defaultValue": null,
+            "description": "Icon component imported from `@imfusion/web-ui/icons`. Defaults to `UploadSquare`, or `Page` while a File is mounted."
+          },
+          {
+            "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": "size",
+            "required": false,
+            "type": "string | number",
+            "defaultValue": "48",
+            "description": "Sets both SVG dimensions unless `width` or `height` is provided."
+          },
+          {
+            "name": "variant",
+            "required": false,
+            "type": "| \"main\"\n| \"inherit\"\n| \"primary\"\n| \"positive\"\n| \"negative\"\n| \"oncolor\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"warning\"\n| \"info\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
+            "defaultValue": null,
+            "description": ""
+          }
+        ]
+      },
+      {
+        "name": "FileDropZone.Remove",
+        "description": "FileDropZone.Remove — an icon button that empties a filled zone. It carries no behavior of its own: `onClick` clears the consumer's state.",
+        "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": "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": false,
+            "type": "string",
+            "defaultValue": "Remove file",
+            "description": "Accessible name of the button. Defaults to \"Remove file\"."
+          },
+          {
+            "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<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": "shortcut",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Key hint shown in the top corner at the end of the line, such as `\"S\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"hero\" | null",
+            "defaultValue": null,
+            "description": "Defaults to `\"md\"` in an `lg` zone and `\"sm\"` otherwise."
+          },
+          {
+            "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": "Defaults to `\"ghost\"` in an `sm` zone and `\"outline\"` otherwise."
+          }
+        ]
+      },
+      {
+        "name": "FileDropZone.Title",
+        "description": "FileDropZone.Title — names the group.",
+        "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}"
+          }
+        ]
+      },
+      {
+        "name": "FileDropZone.Trigger",
+        "description": "FileDropZone.Trigger — a Button that opens the picker.",
+        "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": "endIcon",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Trailing slot, typically an icon."
+          },
+          {
+            "name": "focusableWhenDisabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Whether the button should be focusable when disabled."
+          },
+          {
+            "name": "justify",
+            "required": false,
+            "type": "\"center\" | \"spread\" | null",
+            "defaultValue": null,
+            "description": ""
+          },
+          {
+            "name": "mode",
+            "required": false,
+            "type": "\"files\" | \"folder\"",
+            "defaultValue": "files",
+            "description": "`\"files\"` opens the file picker, `\"folder\"` the folder picker. A folder Trigger needs `directory` on the Root."
+          },
+          {
+            "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<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": "shortcut",
+            "required": false,
+            "type": "string",
+            "defaultValue": null,
+            "description": "Key hint shown in the top corner at the end of the line, such as `\"S\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
+          },
+          {
+            "name": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | \"hero\" | null",
+            "defaultValue": null,
+            "description": "Defaults to `\"md\"` in an `lg` zone and `\"sm\"` otherwise."
+          },
+          {
+            "name": "startIcon",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Leading slot, typically an icon."
+          },
+          {
+            "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": "Defaults to `\"ghost\"` in an `sm` zone and `\"outline\"` otherwise."
+          }
+        ]
+      },
+      {
+        "name": "FileDropZone.Upload",
+        "description": "FileDropZone.Upload — the upload sequence in one piece: a zone, the list of collected files to check and remove, a\n`Progress` per row and overall once the upload runs, and the upload button. It is controlled and uploads nothing: the app\nkeeps `items`, performs the upload, and reports each item's `status` and `progress`. Other props go to the zone.",
+        "props": [
+          {
+            "name": "accept",
+            "required": false,
+            "type": "string[]",
+            "defaultValue": null,
+            "description": "Accepted file types: extensions (`\".nii.gz\"`), MIME types (`\"image/png\"`) or wildcards (`\"image/*\"`). Any file when empty."
+          },
+          {
+            "name": "description",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Text under the zone title. Defaults to the accepted types, such as \"PNG, JPEG or WebP\", and a note that folders are scanned."
+          },
+          {
+            "name": "disabled",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Blocks dropping and picking; the Triggers follow."
+          },
+          {
+            "name": "folders",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": "Whether the zone takes whole folders, with a \"Choose folder\" button. Needs `multiple`."
+          },
+          {
+            "name": "formatStatus",
+            "required": false,
+            "type": "(accepted: number, rejected: number) => string",
+            "defaultValue": null,
+            "description": "Words for the screen reader status after each drop or pick. Return `\"\"` to stay silent."
+          },
+          {
+            "name": "heading",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": "Upload files",
+            "description": "Heading of the card around the zone and the list."
+          },
+          {
+            "name": "invalid",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": null,
+            "description": "Marks the zone as holding a problem. The message belongs in `Field.Error` or a `Callout`."
+          },
+          {
+            "name": "items",
+            "required": true,
+            "type": "FileDropZoneUploadItem[]",
+            "defaultValue": null,
+            "description": "The files to list, in order. The app owns this list and each item's `status` and `progress`."
+          },
+          {
+            "name": "labels",
+            "required": false,
+            "type": "Partial<UploadLabels>",
+            "defaultValue": null,
+            "description": "Replaces any of the English texts: the button texts, the drag copy, the row states, the skipped note, the finished text."
+          },
+          {
+            "name": "multiple",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "true",
+            "description": "Whether more than one file can be added at once. With `false`, only the first accepted file is kept."
+          },
+          {
+            "name": "onDragStateChange",
+            "required": false,
+            "type": "(state: DragState) => void",
+            "defaultValue": null,
+            "description": "Called when a drag over the zone starts, changes or ends. `\"rejecting\"` is reported only for a dragged type the\nbrowser exposes and `accept` cannot produce; names and counts are unknown until the drop."
+          },
+          {
+            "name": "onFilesAdded",
+            "required": false,
+            "type": "(\n  accepted: FileDropZoneItem[],\n  rejected: FileDropZoneItem[]\n) => void",
+            "defaultValue": null,
+            "description": "Called once per drop or pick with the files that match `accept` and those that do not."
+          },
+          {
+            "name": "onRemove",
+            "required": true,
+            "type": "(id: string) => void",
+            "defaultValue": null,
+            "description": "Called with the `id` of the row whose Remove button was pressed."
+          },
+          {
+            "name": "onReset",
+            "required": false,
+            "type": "() => void",
+            "defaultValue": null,
+            "description": "Called by \"Start over\" once every item is done or failed. The button shows only when this is set."
+          },
+          {
+            "name": "onRetry",
+            "required": false,
+            "type": "(id: string) => void",
+            "defaultValue": null,
+            "description": "Called with the `id` of a failed row whose Retry button was pressed. The app sends the file again and moves the row\nback to `\"uploading\"`. Failed rows show Retry only when this is set."
+          },
+          {
+            "name": "onUpload",
+            "required": true,
+            "type": "() => void",
+            "defaultValue": null,
+            "description": "Called when the upload button is pressed. The app starts the upload and moves the queued items to `\"uploading\"`."
+          },
+          {
+            "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": "size",
+            "required": false,
+            "type": "\"sm\" | \"md\" | \"lg\" | null",
+            "defaultValue": "lg",
+            "description": ""
+          },
+          {
+            "name": "title",
+            "required": false,
+            "type": "ReactNode",
+            "defaultValue": null,
+            "description": "Title of the zone. Defaults to \"Drop files or a folder\", or \"Drop a file\" without `multiple`."
+          }
+        ]
+      }
+    ]
+  },
   "icon": {
     "root": {
       "name": "Icon",

package/src/llms/llms.gen.txt

@@ -119,6 +119,11 @@ Semantic group for related form controls with a shared legend. Also called a for
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .fieldset (jq: jq '.fieldset' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/fieldset.md
 
+## FileDropZone
+- category: Inputs, status: experimental
+Drop zone with picker buttons for files or whole folders, reporting accepted and rejected files. Also called a file upload area or dropzone. For a single native file control inside a form, use Input.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .file-drop-zone (jq: jq '.file-drop-zone' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## FrameSelection
 - category: Inputs, status: experimental
 Frame or slice picker bound to the focused frame of ImFusion image sets, with a focus and count readout. For a position picker not tied to the SDK, use Slider with variant="position".