@emporix/component-library 2.2.0 → 2.4.0

package/README.md

@@ -385,13 +385,13 @@ import { BackButton } from '@emporix/component-library'
 
 #### Props
 
-| Prop        | Type       | Default         | Description                             |
-| ----------- | ---------- | --------------- | --------------------------------------- |
-| onClick     | () => void | -               | Click handler                           |
-| className   | string     | -               | Additional CSS class                    |
-| disabled    | boolean    | `false`         | Whether the button is disabled          |
-| ariaLabel   | string     | `'Back'`        | Accessible label for screen readers     |
-| data-testid | string     | `'back-button'` | Test ID for testing                     |
+| Prop        | Type       | Default         | Description                         |
+| ----------- | ---------- | --------------- | ----------------------------------- |
+| onClick     | () => void | -               | Click handler                       |
+| className   | string     | -               | Additional CSS class                |
+| disabled    | boolean    | `false`         | Whether the button is disabled      |
+| ariaLabel   | string     | `'Back'`        | Accessible label for screen readers |
+| data-testid | string     | `'back-button'` | Test ID for testing                 |
 
 ### ConfirmBox
 
@@ -399,8 +399,7 @@ Reusable confirmation dialog shell built on top of CL `Dialog`, `PrimaryButton`,
 
 ```tsx
 import { ConfirmBox } from '@emporix/component-library'
-
-<ConfirmBox
+;<ConfirmBox
   visible={visible}
   onAccept={handleDelete}
   onReject={() => setVisible(false)}
@@ -413,20 +412,20 @@ import { ConfirmBox } from '@emporix/component-library'
 
 #### Props
 
-| Prop        | Type          | Default  | Description                                         |
-| ----------- | ------------- | -------- | --------------------------------------------------- |
-| visible     | boolean       | -        | Whether the confirm dialog is visible               |
-| onAccept    | () => void    | -        | Called when the primary action is triggered         |
-| onReject    | () => void    | -        | Called when the dialog is dismissed                 |
-| loading     | boolean       | `false`  | Disables actions and shows loading on accept        |
-| title       | ReactNode     | -        | Dialog title area                                   |
-| message     | ReactNode     | -        | Main dialog message                                 |
-| acceptLabel | ReactNode     | `Yes`    | Accept button label                                 |
-| rejectLabel | ReactNode     | `Cancel` | Reject button label                                 |
-| children    | ReactNode     | -        | Optional extra body content below the message       |
-| className   | string        | -        | Additional CSS class on the dialog root             |
-| style       | CSSProperties | -        | Inline styles on the dialog root                    |
-| data-testid | string        | -        | Test ID on the dialog root                          |
+| Prop        | Type          | Default  | Description                                   |
+| ----------- | ------------- | -------- | --------------------------------------------- |
+| visible     | boolean       | -        | Whether the confirm dialog is visible         |
+| onAccept    | () => void    | -        | Called when the primary action is triggered   |
+| onReject    | () => void    | -        | Called when the dialog is dismissed           |
+| loading     | boolean       | `false`  | Disables actions and shows loading on accept  |
+| title       | ReactNode     | -        | Dialog title area                             |
+| message     | ReactNode     | -        | Main dialog message                           |
+| acceptLabel | ReactNode     | `Yes`    | Accept button label                           |
+| rejectLabel | ReactNode     | `Cancel` | Reject button label                           |
+| children    | ReactNode     | -        | Optional extra body content below the message |
+| className   | string        | -        | Additional CSS class on the dialog root       |
+| style       | CSSProperties | -        | Inline styles on the dialog root              |
+| data-testid | string        | -        | Test ID on the dialog root                    |
 
 ### DateValue
 
@@ -447,16 +446,16 @@ import { DateValue } from '@emporix/component-library'
 
 #### Props
 
-| Prop        | Type                     | Default | Description                                    |
-| ----------- | ------------------------ | ------- | ---------------------------------------------- |
-| date        | `Date \| string \| undefined` | -       | Date value to format                           |
-| locale      | string                   | `en`    | Locale used for date/time formatting           |
-| showTime    | boolean                  | `false` | Renders a secondary time value next to the date |
-| nullText    | string                   | `--`    | Fallback text when the date is missing/invalid |
-| timeZone    | string                   | -       | Optional `Intl.DateTimeFormat` time zone       |
-| hour12      | boolean                  | locale default | Controls 12-hour vs 24-hour time formatting |
-| className   | string                   | -       | Additional CSS class on the root               |
-| data-testid | string                   | -       | Test ID on the root                            |
+| Prop        | Type                          | Default        | Description                                     |
+| ----------- | ----------------------------- | -------------- | ----------------------------------------------- |
+| date        | `Date \| string \| undefined` | -              | Date value to format                            |
+| locale      | string                        | `en`           | Locale used for date/time formatting            |
+| showTime    | boolean                       | `false`        | Renders a secondary time value next to the date |
+| nullText    | string                        | `--`           | Fallback text when the date is missing/invalid  |
+| timeZone    | string                        | -              | Optional `Intl.DateTimeFormat` time zone        |
+| hour12      | boolean                       | locale default | Controls 12-hour vs 24-hour time formatting     |
+| className   | string                        | -              | Additional CSS class on the root                |
+| data-testid | string                        | -              | Test ID on the root                             |
 
 ### DataTable
 
@@ -914,6 +913,177 @@ import { Message } from '@emporix/component-library'
 | className   | string                                   | -       | Additional CSS class on the root element        |
 | data-testid | string                                   | -       | Test ID for testing                             |
 
+### SectionBox
+
+Bordered content section with an optional title and actions. Pattern A (no PrimeReact dependency). Common layout primitive for grouping form fields or detail content.
+
+```tsx
+import { SectionBox } from '@emporix/component-library'
+;<SectionBox name='orderDetails' actions={<PrimaryButton>Add</PrimaryButton>}>
+  <p>Section content goes here.</p>
+</SectionBox>
+```
+
+`name` is rendered through a title-case transform (e.g. `orderDetails` renders as `Order Details`); pass already-formatted text if you don't want that transform applied. `SectionTitle` (the title/actions row) is also exported standalone for use outside of `SectionBox`.
+
+#### Props
+
+| Prop             | Type          | Default | Description                                      |
+| ---------------- | ------------- | ------- | ------------------------------------------------ |
+| children         | ReactNode     | -       | Content rendered inside the bordered box         |
+| name             | string        | -       | Optional title, rendered via `SectionTitle`      |
+| actions          | ReactNode     | -       | Optional actions rendered alongside the title    |
+| sectionStyles    | CSSProperties | -       | Inline styles applied to the inner bordered box  |
+| sectionClassName | string        | -       | Additional CSS class applied to the inner box    |
+| className        | string        | -       | Additional CSS class applied to the root wrapper |
+| style            | CSSProperties | -       | Inline styles applied to the root wrapper        |
+| data-testid      | string        | -       | Test ID for testing                              |
+
+`SectionTitle` accepts `name`, `actions`, `className`, and `data-testid`.
+
+### Editor
+
+Rich-text editor for HTML content, built on [PrimeReact Editor](https://primereact.org/editor/) (Quill). Pattern B — both `primereact` and `quill` ship bundled, and Quill's snow-theme CSS is already inside `@emporix/component-library/styles`, so consumers add no extra dependency or stylesheet.
+
+```tsx
+import { useState } from 'react'
+import { Editor } from '@emporix/component-library'
+
+const BrandDescription = () => {
+  const [description, setDescription] = useState('')
+
+  return (
+    <Editor
+      label='Description'
+      required
+      value={description}
+      onTextChange={event => setDescription(event.htmlValue ?? '')}
+    />
+  )
+}
+```
+
+Persist `event.htmlValue` — it is `null` when the editor has been emptied. Pass already-translated `label` / `tooltip` strings; the component does no i18n itself.
+
+#### Props
+
+| Prop           | Type                                     | Default | Description                                                       |
+| -------------- | ---------------------------------------- | ------- | ----------------------------------------------------------------- |
+| value          | string                                   | -       | Editor contents as an HTML string                                 |
+| onTextChange   | `(event: EditorTextChangeEvent) => void` | -       | Called on every content change                                    |
+| label          | ReactNode                                | -       | Label rendered above the editor (via `FieldLabel`)                |
+| tooltip        | string                                   | -       | Info icon tooltip next to the label                               |
+| required       | boolean                                  | `false` | Shows a required asterisk on the label                            |
+| error          | ReactNode                                | -       | Error text rendered below the editor                              |
+| readOnly       | boolean                                  | `false` | Disables editing and hides the toolbar                            |
+| placeholder    | string                                   | -       | Placeholder shown while empty                                     |
+| showHeader     | boolean                                  | `true`  | Whether the formatting toolbar renders (forced off when readOnly) |
+| headerTemplate | ReactNode                                | -       | Replaces the default toolbar                                      |
+| contentStyle   | CSSProperties                            | -       | Inline styles for the editable area — use it to set `height`      |
+| className      | string                                   | -       | Additional CSS class on the root wrapper                          |
+| data-testid    | string                                   | -       | Test ID for testing                                               |
+
+`EditorTextChangeEvent` exposes `htmlValue`, `textValue`, `delta`, and `source`.
+
+> **Note:** PrimeReact 8's Editor targets Quill 1.x. Pairing it with Quill 2 silently breaks loading existing content (Quill 2 changed `clipboard.convert` to take an object), so the library pins `quill@^1.3.7`.
+
+### FileUpload
+
+File picker with drag-and-drop, built on [PrimeReact FileUpload](https://primereact.org/fileupload/). Pattern B. For uploads needing custom transport (signed URLs, progress tracking), set `customUpload` and implement `uploadHandler`.
+
+```tsx
+import { FileUpload } from '@emporix/component-library'
+
+const AssetUpload = () => (
+  <FileUpload
+    accept='image/*'
+    multiple
+    customUpload
+    chooseLabel='Choose'
+    uploadLabel='Upload'
+    cancelLabel='Clear'
+    emptyTemplate={<span>Drag and drop images here</span>}
+    uploadHandler={async event => {
+      await uploadAssets(event.files)
+      event.options.clear()
+    }}
+  />
+)
+```
+
+Pass already-translated button labels. A `ref` exposes `upload()`, `clear()`, `formatSize(bytes)`, and `getFiles()` via the `FileUploadRef` type.
+
+#### Props
+
+| Prop             | Type                                       | Default      | Description                                       |
+| ---------------- | ------------------------------------------ | ------------ | ------------------------------------------------- |
+| mode             | `'advanced'` \| `'basic'`                  | `'advanced'` | Drop area with buttons, or a single button        |
+| multiple         | boolean                                    | `false`      | Whether several files can be selected             |
+| accept           | string                                     | -            | Accepted file types, e.g. `image/*`               |
+| disabled         | boolean                                    | `false`      | Whether the control is disabled                   |
+| auto             | boolean                                    | `false`      | Upload immediately on selection                   |
+| maxFileSize      | number                                     | -            | Maximum accepted size per file, in bytes          |
+| url              | string                                     | -            | Remote endpoint for the built-in upload           |
+| name             | string                                     | -            | Request parameter name holding the files          |
+| customUpload     | boolean                                    | `false`      | Route uploads through `uploadHandler`             |
+| uploadHandler    | `(event: FileUploadHandlerEvent) => void`  | -            | Performs the upload when `customUpload` is set    |
+| onSelect         | `(event: FileUploadSelectEvent) => void`   | -            | Called when files are selected                    |
+| onUpload         | `(event: FileUploadUploadEvent) => void`   | -            | Called after a successful built-in upload         |
+| onError          | `(event: FileUploadUploadEvent) => void`   | -            | Called when a built-in upload fails               |
+| onProgress       | `(event: FileUploadProgressEvent) => void` | -            | Called as a built-in upload progresses            |
+| onRemove         | `(event: FileUploadRemoveEvent) => void`   | -            | Called when a pending file is removed             |
+| onClear          | `() => void`                               | -            | Called when the file list is cleared              |
+| onValidationFail | `(file: File) => void`                     | -            | Called when a file fails `accept` / `maxFileSize` |
+| headerTemplate   | ReactNode \| function                      | -            | Replaces the button row                           |
+| itemTemplate     | ReactNode \| function                      | -            | Renders one pending file row                      |
+| emptyTemplate    | ReactNode \| function                      | -            | Rendered while no file is pending                 |
+| chooseLabel      | string                                     | -            | Choose button label                               |
+| uploadLabel      | string                                     | -            | Upload button label                               |
+| cancelLabel      | string                                     | -            | Cancel button label                               |
+| chooseOptions    | FileUploadButtonOptions                    | -            | Choose button appearance                          |
+| uploadOptions    | FileUploadButtonOptions                    | -            | Upload button appearance                          |
+| cancelOptions    | FileUploadButtonOptions                    | -            | Cancel button appearance                          |
+| className        | string                                     | -            | Additional CSS class on the root                  |
+| style            | CSSProperties                              | -            | Inline styles on the root                         |
+| data-testid      | string                                     | -            | Test ID for testing                               |
+
+### ProgressBar
+
+Horizontal progress indicator for determinate work (uploads, imports) and indeterminate waits. Pattern B, built on [PrimeReact ProgressBar](https://primereact.org/progressbar/). For a blocking spinner use [`ProgressSpinner`](#progressspinner) instead.
+
+```tsx
+import { ProgressBar } from '@emporix/component-library'
+
+const UploadProgress = () => (
+  <>
+    <ProgressBar value={uploadedPercentage} />
+
+    {/* Absolute progress instead of a percentage */}
+    <ProgressBar
+      value={uploadedPercentage}
+      displayValueTemplate={() => `${uploadedSize} / ${totalSize}`}
+    />
+
+    {/* Unknown duration */}
+    <ProgressBar mode='indeterminate' />
+  </>
+)
+```
+
+#### Props
+
+| Prop                 | Type                                     | Default         | Description                                    |
+| -------------------- | ---------------------------------------- | --------------- | ---------------------------------------------- |
+| value                | number \| string                         | -               | Completion value, normally 0-100               |
+| mode                 | `'determinate'` \| `'indeterminate'`     | `'determinate'` | Fills to `value`, or loops indefinitely        |
+| showValue            | boolean                                  | `true`          | Whether the value label renders inside the bar |
+| unit                 | string                                   | `'%'`           | Suffix appended to the default value label     |
+| color                | string                                   | -               | Custom bar color                               |
+| displayValueTemplate | `(value: ProgressBarValue) => ReactNode` | -               | Renders a custom value label                   |
+| className            | string                                   | -               | Additional CSS class on the bar root           |
+| style                | CSSProperties                            | -               | Inline styles on the bar root (e.g. `height`)  |
+| data-testid          | string                                   | -               | Test ID for testing                            |
+
 ### ProgressSpinner
 
 Indeterminate loading spinner for overlays and blocking states. Pattern A (no PrimeReact dependency). API inspired by [PrimeReact ProgressSpinner](https://primereact.org/progressspinner/).

package/dist/components/editor/Editor.d.ts

@@ -0,0 +1,85 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Emitted whenever the document changes. `htmlValue` is what you normally
+ * persist; it is `null` when the editor has been emptied.
+ */
+export interface EditorTextChangeEvent {
+    /** Editor contents as an HTML string, or `null` when empty. */
+    htmlValue: string | null;
+    /** Editor contents as plain text. */
+    textValue: string;
+    /** Quill delta describing the change. */
+    delta: unknown;
+    /** Origin of the change, e.g. `user` or `api`. */
+    source: string;
+}
+export interface EditorProps {
+    /**
+     * Editor contents as an HTML string.
+     */
+    value?: string;
+    /**
+     * Called on every content change. Persist `event.htmlValue`.
+     */
+    onTextChange?: (event: EditorTextChangeEvent) => void;
+    /**
+     * Label rendered above the editor.
+     */
+    label?: ReactNode;
+    /**
+     * When set, an info icon with this tooltip is shown next to the label.
+     */
+    tooltip?: string;
+    /**
+     * Whether the field is required (shows an asterisk on the label).
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Error text rendered below the editor.
+     */
+    error?: ReactNode;
+    /**
+     * When true, content cannot be edited and the toolbar is hidden.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Placeholder shown while the editor is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the formatting toolbar is rendered. Forced off when `readOnly`.
+     * @default true
+     */
+    showHeader?: boolean;
+    /**
+     * Replaces the default formatting toolbar.
+     */
+    headerTemplate?: ReactNode;
+    /**
+     * Inline styles for the editable content area — use it to set `height`.
+     * (PrimeReact applies its `style` prop to the content area, not the root.)
+     */
+    contentStyle?: CSSProperties;
+    /**
+     * Additional CSS class name on the root wrapper.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Rich-text editor for HTML content, built on
+ * [PrimeReact Editor](https://primereact.org/editor/) (Quill).
+ *
+ * Pass already-translated `label` / `tooltip` strings — the component is
+ * context-free and does no i18n itself.
+ */
+export declare const Editor: {
+    ({ value, onTextChange, label, tooltip, required, error, readOnly, placeholder, showHeader, headerTemplate, contentStyle, className, "data-testid": testId, }: EditorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Editor.d.ts.map

package/dist/components/editor/Editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMrD;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,KAAK,EAAE,OAAO,CAAA;IACd,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;mKAchB,WAAW;;CA2Bb,CAAA"}

package/dist/components/editor/index.d.ts

@@ -0,0 +1,3 @@
+export { Editor } from './Editor';
+export type { EditorProps, EditorTextChangeEvent } from './Editor';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA"}

package/dist/components/fileupload/FileUpload.d.ts

@@ -0,0 +1,188 @@
+import { CSSProperties, ReactNode, SyntheticEvent } from 'react';
+/** `advanced` shows the drop area with choose/upload/cancel buttons; `basic` is a single button. */
+export type FileUploadMode = 'basic' | 'advanced';
+/** Styling and labelling for one of the built-in buttons. */
+export interface FileUploadButtonOptions {
+    label?: string;
+    icon?: ReactNode;
+    iconOnly?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface FileUploadSelectEvent {
+    /** Files chosen by the user. */
+    files: File[];
+    originalEvent: React.ChangeEvent<HTMLInputElement> | DragEvent;
+}
+export interface FileUploadUploadEvent {
+    files: File[];
+    xhr: XMLHttpRequest;
+}
+export interface FileUploadProgressEvent {
+    originalEvent: SyntheticEvent;
+    /** Completion percentage, 0-100. */
+    progress: number;
+}
+export interface FileUploadRemoveEvent {
+    originalEvent: SyntheticEvent;
+    file: File;
+}
+/** Passed to `uploadHandler` when `customUpload` is set. */
+export interface FileUploadHandlerEvent {
+    files: File[];
+    options: {
+        /** Clears the pending file list. */
+        clear: () => void;
+    };
+}
+/** Options object handed to `itemTemplate`. */
+export interface FileUploadItemTemplateOptions {
+    onRemove: (event: SyntheticEvent) => void;
+    formatSize: string;
+    files: File[];
+    index: number;
+}
+/** Imperative handle exposed via `ref`. */
+export interface FileUploadRef {
+    /** Starts the upload of the pending files. */
+    upload: () => void;
+    /** Clears the pending file list. */
+    clear: () => void;
+    /** Formats a byte count as a human-readable string. */
+    formatSize: (bytes: number) => string;
+    /** Currently pending files. */
+    getFiles: () => File[];
+}
+export interface FileUploadProps {
+    /**
+     * Name of the request parameter holding the files.
+     */
+    name?: string;
+    /**
+     * Remote endpoint. Omit it when using `customUpload` + `uploadHandler`.
+     */
+    url?: string;
+    /**
+     * Whether the drop area with buttons or a single button is rendered.
+     * @default 'advanced'
+     */
+    mode?: FileUploadMode;
+    /**
+     * Whether more than one file can be selected.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Accepted file types, e.g. `image/*`.
+     */
+    accept?: string;
+    /**
+     * Whether the control is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether selected files upload immediately, without pressing Upload.
+     * @default false
+     */
+    auto?: boolean;
+    /**
+     * Maximum accepted size per file, in bytes.
+     */
+    maxFileSize?: number;
+    /**
+     * When true, `uploadHandler` performs the upload instead of the built-in XHR.
+     * @default false
+     */
+    customUpload?: boolean;
+    /**
+     * Performs the upload when `customUpload` is set.
+     */
+    uploadHandler?: (event: FileUploadHandlerEvent) => void;
+    /**
+     * Called after a successful built-in upload.
+     */
+    onUpload?: (event: FileUploadUploadEvent) => void;
+    /**
+     * Called when the user selects files.
+     */
+    onSelect?: (event: FileUploadSelectEvent) => void;
+    /**
+     * Called when a built-in upload fails.
+     */
+    onError?: (event: FileUploadUploadEvent) => void;
+    /**
+     * Called when the file list is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * Called as a built-in upload progresses.
+     */
+    onProgress?: (event: FileUploadProgressEvent) => void;
+    /**
+     * Called when a single pending file is removed.
+     */
+    onRemove?: (event: FileUploadRemoveEvent) => void;
+    /**
+     * Called when a file fails `accept` / `maxFileSize` validation.
+     */
+    onValidationFail?: (file: File) => void;
+    /**
+     * Replaces the header (button row) content.
+     */
+    headerTemplate?: ReactNode | ((options: unknown) => ReactNode);
+    /**
+     * Renders one pending file row.
+     */
+    itemTemplate?: ReactNode | ((file: object, options: FileUploadItemTemplateOptions) => ReactNode);
+    /**
+     * Rendered in the drop area while no file is pending.
+     */
+    emptyTemplate?: ReactNode | (() => ReactNode);
+    /**
+     * Label for the choose button.
+     */
+    chooseLabel?: string;
+    /**
+     * Label for the upload button.
+     */
+    uploadLabel?: string;
+    /**
+     * Label for the cancel button.
+     */
+    cancelLabel?: string;
+    /**
+     * Appearance of the choose button.
+     */
+    chooseOptions?: FileUploadButtonOptions;
+    /**
+     * Appearance of the upload button.
+     */
+    uploadOptions?: FileUploadButtonOptions;
+    /**
+     * Appearance of the cancel button.
+     */
+    cancelOptions?: FileUploadButtonOptions;
+    /**
+     * Additional CSS class name on the root.
+     */
+    className?: string;
+    /**
+     * Inline styles on the root.
+     */
+    style?: CSSProperties;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+/**
+ * File picker with drag-and-drop, built on
+ * [PrimeReact FileUpload](https://primereact.org/fileupload/).
+ *
+ * Pass already-translated button labels — the component is context-free and
+ * does no i18n itself. For uploads that need custom transport (signed URLs,
+ * progress tracking), set `customUpload` and implement `uploadHandler`.
+ */
+export declare const FileUpload: import('react').ForwardRefExoticComponent<FileUploadProps & import('react').RefAttributes<FileUploadRef>>;
+//# sourceMappingURL=FileUpload.d.ts.map

package/dist/components/fileupload/FileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/FileUpload.tsx"],"names":[],"mappings":"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"}

package/dist/components/fileupload/index.d.ts

@@ -0,0 +1,3 @@
+export { FileUpload } from './FileUpload';
+export type { FileUploadProps, FileUploadRef, FileUploadMode, FileUploadButtonOptions, FileUploadSelectEvent, FileUploadUploadEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadHandlerEvent, FileUploadItemTemplateOptions, } from './FileUpload';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/fileupload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EACV,eAAe,EACf,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,6BAA6B,GAC9B,MAAM,cAAc,CAAA"}

package/dist/components/progressbar/ProgressBar.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties, ReactNode } from 'react';
+/** Value rendered by the bar. `undefined`/`null` renders an empty bar. */
+export type ProgressBarValue = number | string | undefined | null;
+/**
+ * `determinate` fills the bar to `value`; `indeterminate` shows a looping
+ * animation for work of unknown length.
+ */
+export type ProgressBarMode = 'determinate' | 'indeterminate';
+export interface ProgressBarProps {
+    /**
+     * Completion value, normally 0-100. Ignored in `indeterminate` mode.
+     */
+    value?: ProgressBarValue;
+    /**
+     * Whether the bar fills to `value` or loops indefinitely.
+     * @default 'determinate'
+     */
+    mode?: ProgressBarMode;
+    /**
+     * Whether the value label is rendered inside the bar.
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Suffix appended to the default value label.
+     * @default '%'
+     */
+    unit?: string;
+    /**
+     * Custom bar color. Defaults to the primary theme color.
+     */
+    color?: string;
+    /**
+     * Renders the value label. Use it to show absolute progress (e.g.
+     * `120 kB / 2 MB`) instead of a percentage.
+     */
+    displayValueTemplate?: (value: ProgressBarValue) => ReactNode;
+    /**
+     * Additional CSS class name on the bar root.
+     */
+    className?: string;
+    /**
+     * Inline styles on the bar root (e.g. `height`, `width`).
+     */
+    style?: CSSProperties;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Horizontal progress indicator for determinate work (uploads, imports) and
+ * indeterminate waits. For a blocking spinner use `ProgressSpinner` instead.
+ */
+export declare const ProgressBar: {
+    ({ value, mode, showValue, unit, color, displayValueTemplate, className, style, "data-testid": testId, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/progressbar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progressbar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrD,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;AAEjE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,eAAe,CAAA;AAE7D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAA;IAC7D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW;8GAUrB,gBAAgB;;CAkBlB,CAAA"}

package/dist/components/progressbar/index.d.ts

@@ -0,0 +1,3 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarMode, ProgressBarValue, } from './ProgressBar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/progressbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progressbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,MAAM,eAAe,CAAA"}