@webority/ui-react 0.24.0 → 0.25.0

package/dist/types/components/AppBarChart.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A bar chart of categories, each measured against its own maximum ("18 of 25"), such as the
+ * parts of a total score. Every bar fills toward its own `max`, so bars with different maxima
+ * compare as how complete each one is; the printed value carries the magnitude. Values are
+ * labelled directly on every bar, so there is no legend and no tooltip to discover. Each bar is
+ * a keyboard-focusable `role="meter"` inside a list, named by its label and value ("GST and tax, 11 of 15").
+ *
+ * @param {object} props
+ * @param {{ label: string, value: number, max: number }[]} props.data One entry per bar, in order.
+ *   Labels must be unique. `value` is clamped into 0 to `max`.
+ * @param {(value: number) => string} [props.formatValue] Formats each value and maximum.
+ *   Defaults to `String(value)`.
+ * @param {'horizontal'|'vertical'} [props.orientation='horizontal'] Horizontal stacks a row per
+ *   bar (label and value above each bar) and reads best on a phone; vertical stands the bars
+ *   side by side with the labels beneath.
+ * @param {string} [props.title] A visible caption above the chart; also names it for assistive tech.
+ * @param {string} [props.ariaLabel] Names the chart when there is no visible `title`.
+ * @param {string} [props.className]
+ */
+export default function AppBarChart({ data, formatValue, orientation, title, ariaLabel, className, ...rest }: {
+    data: {
+        label: string;
+        value: number;
+        max: number;
+    }[];
+    formatValue?: (value: number) => string;
+    orientation?: 'horizontal' | 'vertical';
+    title?: string;
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppCalendar.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Shows events on a month, week, day or list view, in India Standard Time, with weeks starting on
+ * Monday. The calendar is the shared `<wui-calendar>` element, the same one the Razor
+ * `<app-calendar>` uses, with its calendar engine loaded the first time a calendar mounts: a page
+ * without a calendar never downloads it.
+ *
+ * Give it events as data (`events`), or an address (`eventsUrl`) it calls whenever the visible
+ * period changes, with `start` and `end` query parameters: IST `YYYY-MM-DD` days, `end` being the
+ * first day not shown. The address answers with a JSON list of events. An event is
+ * `{ id, title, start, end, allDay, tone, url }`: `start` and `end` are a `YYYY-MM-DD` day or an ISO
+ * date-time (an offset or Z is shifted to IST, no offset is already IST); `end` is the first moment
+ * after the event, so an all-day event on the 4th ends on the 5th; `tone` colours it from the theme
+ * (neutral, primary, success, warning, danger, info); `url` makes it a link.
+ *
+ * Every day can be reached by keyboard: one tab stop among the days, the arrow keys move between
+ * them, Home and End go to Monday and Sunday, Page Up and Page Down to the previous and next month,
+ * Enter opens the day. A calendar given no `view` opens as a list when it is narrower than a
+ * phone.
+ *
+ * ```jsx
+ * <AppCalendar
+ *     label="Team leave"
+ *     eventsUrl="/api/leave"
+ *     onEventClick={(event) => openLeave(event.id)}
+ *     onDateClick={({ date }) => startRequest(date)}
+ * />
+ * ```
+ *
+ * @param {object} props
+ * @param {string} [props.label='Calendar'] The name a screen reader hears for the calendar.
+ * @param {{ id?: string|number, title: string, start: string, end?: string, allDay?: boolean, tone?: 'neutral'|'primary'|'success'|'warning'|'danger'|'info', url?: string }[]} [props.events] The events, instead of `eventsUrl`. Extra keys are kept and come back in `onEventClick`.
+ * @param {string} [props.eventsUrl] Called with `start` and `end` (IST days) whenever the visible period changes; answers a JSON list of events.
+ * @param {'month'|'week'|'day'|'list'} [props.view] The view to show. Without it a calendar opens on the month, or on the list when it is narrower than a phone.
+ * @param {string} [props.date] The IST day (`YYYY-MM-DD`) to show; today when omitted. Changing it moves the calendar.
+ * @param {string} [props.emptyText] What a list with no events says.
+ * @param {string} [props.errorText] What is said when `eventsUrl` could not be loaded, and when the calendar's code could not.
+ * @param {(event: object) => (void|false)} [props.onEventClick] An event was clicked, or Enter was pressed on it. Gets the event as it was given. Return `false` to stop an event's own link.
+ * @param {(detail: { date: string, time: string|null, allDay: boolean }) => void} [props.onDateClick] A day was clicked, or Enter was pressed on it; `time` is set for a click on a time slot.
+ * @param {(detail: { view: string, date: string, start: string, end: string, title: string }) => void} [props.onRangeChange] The view or the visible period changed.
+ * @param {string} [props.className] Extra classes on the element.
+ * @param {import('react').CSSProperties} [props.style] Inline style on the element.
+ * @param {import('react').Ref<HTMLElement>} [ref] The `<wui-calendar>` element, which has `refetch()`.
+ */
+declare const AppCalendar: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppCalendar;

package/dist/types/components/AppChart.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Draws a line, area, column, horizontal bar, donut, heatmap, calendar heatmap, funnel, gauge,
+ * waterfall, treemap, sankey, scatter, bubble or small-multiples chart from rows of data. The chart is the
+ * shared `<wui-chart>` element, the same one the Razor `<app-chart>` uses, with its drawing engine
+ * loaded the first time a chart mounts: a page without a chart never downloads it.
+ *
+ * You describe the chart; you never touch the engine. Every chart comes with a legend that shows
+ * and hides series, tooltips, arrow-key movement between points (each value read aloud), a real
+ * data table behind the picture, a screen-reader summary, light and dark colours from the theme,
+ * resize, and PNG and CSV export through the element (see AppChartCard for the buttons).
+ *
+ * Money is rupees, or paise when `format.unit` says so. Dates show in IST. A `percent` value is a
+ * ratio: 0.125 shows as 12.5%.
+ *
+ * ```jsx
+ * <AppChart
+ *     type="column"
+ *     title="Revenue by month"
+ *     data={[{ month: "Aug", revenue: 4120000 }, { month: "Sep", revenue: 4630000 }]}
+ *     x={{ key: "month" }}
+ *     series={[{ key: "revenue", label: "Revenue", format: { style: "currency" } }]}
+ *     onSelect={(detail) => console.log(detail.x, detail.value)}
+ * />
+ * ```
+ *
+ * @param {object} props
+ * @param {'line'|'area'|'column'|'bar'|'donut'|'heatmap'|'calendar'|'funnel'|'gauge'|'waterfall'|'treemap'|'sankey'|'scatter'|'bubble'|'multiples'} props.type `column` is vertical bars, `bar` horizontal. `multiples` draws each series as its own small chart under one shared x axis.
+ * @param {string} props.title Required. Names the chart for assistive tech and names exported files. An empty string counts as not given.
+ * @param {string} [props.description] One sentence a screen reader hears before the automatic summary.
+ * @param {Record<string, string|number|null>[]} props.data One row per x position, slice, cell, stage, flow or point: what a row is depends on the type.
+ * @param {{ key: string, kind?: 'category'|'time'|'value', format?: object, label?: string }} props.x The column holding the x value. `time` takes epoch ms, an ISO instant or a "YYYY-MM-DD" day; `value` (scatter and bubble) is a number. A calendar is always `time`, a scatter and a bubble always `value`.
+ * @param {{ key: string, label: string, format?: object }[]} props.series The value columns, in the order they take colours: at most 8. Every type but line, area, column, bar and multiples takes one.
+ * @param {{ key: string, label?: string }} [props.group] The second dimension: a heatmap's rows, a treemap's parents, a scatter or bubble's colour groups (at most 3). Required for a heatmap and a treemap.
+ * @param {{ key: string, label?: string }} [props.to] Where each sankey flow ends; `x` is where it starts. Required for a sankey.
+ * @param {{ key: string, label?: string, format?: object }} [props.size] A bubble's area. Required for a bubble.
+ * @param {boolean} [props.trend] A scatter or bubble's straight trend line through the visible points.
+ * @param {boolean} [props.zoom] A zoom slider under a line or area. On by default above 5,000 rows.
+ * @param {{ upTo: number, label: string }[]} [props.bands] A gauge's named stretches of its scale, each up to a value.
+ * @param {'none'|'stacked'|'percent'} [props.stack='none'] For area, column and bar.
+ * @param {{ label?: string, format?: object, min?: number, max?: number }} [props.y] The one value axis. There is no second axis: show another measure as its own chart.
+ * @param {{ value: number, label: string }} [props.target] A dashed reference line.
+ * @param {number} [props.height=320] In px, the axis labels included. A value that is not above 0 draws at the default.
+ * @param {'ready'|'loading'|'empty'|'error'} [props.state='ready'] `loading` after a first draw keeps that picture on screen, dimmed.
+ * @param {string} [props.emptyText] Replaces the default empty message.
+ * @param {string} [props.errorText] Replaces the default error message. Say what the person can do.
+ * @param {'auto'|'svg'|'canvas'} [props.renderer='auto'] `auto` draws SVG, and canvas above 5,000 points.
+ * @param {'chart'|'table'} [props.view='chart'] `table` shows the data table in the chart's place.
+ * @param {(detail: { series: string, label: string, x: unknown, value: number|null, row: object, index: number }) => void} [props.onSelect] A mark was clicked, or Enter was pressed on the focused point.
+ * @param {(detail: { visible: Record<string, boolean> }) => void} [props.onLegendChange] A legend button was pressed.
+ * @param {(detail: { renderer: string }) => void} [props.onReady] The first picture has finished drawing.
+ * @param {string} [props.className] Extra classes on the element.
+ * @param {import('react').CSSProperties} [props.style] Inline style on the element.
+ * @param {import('react').Ref<HTMLElement>} [ref] The `<wui-chart>` element, which has `toCsv()`, `toPng()`, `exportCsv()` and `exportPng()`.
+ */
+declare const AppChart: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppChart;

package/dist/types/components/AppChartCard.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A card around a chart: a title, a subtitle that says what the numbers are, and the view
+ * controls, which are all the card adds. A legend button, a Chart / Table switch, and a menu to
+ * download the chart as a PNG or the data as a CSV. Put an `AppChart` inside as `children`.
+ *
+ * The card has no date-range picker: a dashboard sets the range once, in its filter row, for
+ * every card on it.
+ *
+ * The Chart / Table switch follows the chart's own `view`: a chart that opens in `table` starts the switch
+ * on Table, and a chart that is replaced (a skeleton giving way to the chart, say) keeps the view the
+ * person chose unless the new chart sets its own.
+ *
+ * When the chart is in its error state the card shows a Try again button, if you pass `onRetry`.
+ * The chart only says what went wrong; fetching again is yours, so `onRetry` is where you do it.
+ *
+ * ```jsx
+ * <AppChartCard title="Revenue by month" subtitle="In rupees, 12 months to 30-Sep-2026" onRetry={reload}>
+ *     <AppChart type="column" title="Revenue by month" data={rows} x={{ key: "month" }} series={series} />
+ * </AppChartCard>
+ * ```
+ *
+ * @param {object} props
+ * @param {string} props.title The card's heading. Also names the menu button for assistive tech.
+ * @param {string} [props.subtitle] A muted line under the title: the unit or the period.
+ * @param {boolean} [props.toolbar=true] Show the view controls.
+ * @param {() => void} [props.onRetry] Adds a Try again button that shows while the chart is in its error state.
+ * @param {import('react').ReactNode} [props.footer] A row under the chart: a source, an updated-at time, a link.
+ * @param {import('react').ReactNode} props.children The chart.
+ * @param {string} [props.className] Extra classes on the card.
+ */
+export default function AppChartCard({ title, subtitle, toolbar, onRetry, footer, children, className, ...rest }: {
+    title: string;
+    subtitle?: string;
+    toolbar?: boolean;
+    onRetry?: () => void;
+    footer?: import('react').ReactNode;
+    children: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppContextMenu.d.ts

@@ -0,0 +1,57 @@
+import "@webority/ui-elements";
+/**
+ * A right-click menu over a region of the page. The menu opens on right-click, on a long press
+ * of a finger, and on Shift+F10 or the ContextMenu key; it sits at the pointer (under the focused
+ * element for the keyboard), stays inside the viewport, and closes on Escape, an outside press,
+ * a scroll or a resize. The behaviour is the shared `<wui-context-menu>` element, the same one
+ * the Razor `<app-context-menu>` uses; the items are the `AppDropdown` item model.
+ *
+ * Two ways to name the region. Wrap it: `children` is the region, and any right-click inside
+ * it opens the menu. Or point at it: `target` is a CSS selector, and the menu serves every
+ * element that matches, including ones added later (put the menu beside a table, not inside
+ * it, and use `target="tbody tr"`). The browser's own menu stays on inside inputs, textareas
+ * and contenteditable content, with `disabled`, and on Shift+right-click.
+ *
+ * NOTE: the exported component must stay the FIRST destructured function in this file —
+ * the parity check reads the first signature it finds as the component's public props.
+ *
+ * @param {object} props
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, disabled?: boolean, divider?: true }[]} [props.items]
+ *   The AppDropdown item model. `icon` is a glyph name or a node, `image` a picture URL. A
+ *   `disabled` item is listed but skipped by the arrow keys and cannot be chosen. An item with
+ *   `divider: true` renders a separator and needs only a unique `key`.
+ * @param {string} [props.target] CSS selector of the elements the menu serves. Without it, the
+ *   menu serves `children`.
+ * @param {import('react').ReactNode} [props.children] The region to attach to, when `target` is not used.
+ * @param {string} [props.ariaLabel='Context menu'] Accessible name of the menu.
+ * @param {boolean} [props.disabled=false] Turns the menu off; the browser's own menu shows instead.
+ * @param {(detail: { region: Element, origin: Element, x: number, y: number }) => void} [props.onOpen]
+ *   Called as the menu opens. `region` is the matched target, `origin` the element the user acted on inside it.
+ * @param {string} [props.menuClassName] Extra classes on the menu panel.
+ * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
+ */
+export default function AppContextMenu({ items, target, children, ariaLabel, disabled, onOpen, menuClassName, linkComponent, ...rest }: {
+    items?: {
+        key: string;
+        label?: string;
+        icon?: string | import('react').ReactNode;
+        image?: string;
+        to?: string;
+        onClick?: () => void;
+        danger?: boolean;
+        disabled?: boolean;
+        divider?: true;
+    }[];
+    target?: string;
+    children?: import('react').ReactNode;
+    ariaLabel?: string;
+    disabled?: boolean;
+    onOpen?: (detail: {
+        region: Element;
+        origin: Element;
+        x: number;
+        y: number;
+    }) => void;
+    menuClassName?: string;
+    linkComponent?: import('react').ElementType;
+}): import("react").JSX.Element;

package/dist/types/components/AppDashboardCell.d.ts

@@ -0,0 +1,14 @@
+/**
+ * One cell of an `AppDashboardGrid`: it spans 3, 4, 6 or 12 of the twelve columns, and takes the full
+ * width under 576px. A card or tile inside fills the cell's height.
+ *
+ * @param {object} props
+ * @param {3|4|6|12} [props.span=12] How many of the twelve columns the cell spans.
+ * @param {import('react').ReactNode} props.children The card or tile.
+ * @param {string} [props.className] Extra classes on the cell.
+ */
+export default function AppDashboardCell({ span, children, className, ...rest }: {
+    span?: 3 | 4 | 6 | 12;
+    children: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppDashboardGrid.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The layout of a dashboard: twelve columns of `AppDashboardCell`s that each span 3, 4, 6 or 12 of
+ * them, and one column under 576px. There is no drag and drop and no saved layout: the page says
+ * where each card goes. Put KPI tiles at span 3, charts at 6 or 12, and a wide table at 12.
+ *
+ * The date range of a dashboard belongs in one filter row above the grid, not inside each card.
+ *
+ * ```jsx
+ * <AppDashboardGrid>
+ *     <AppDashboardCell span={3}><AppKpiTile label="Revenue" value="₹38 L" /></AppDashboardCell>
+ *     <AppDashboardCell span={6}><AppChartCard title="Revenue by month">…</AppChartCard></AppDashboardCell>
+ * </AppDashboardGrid>
+ * ```
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children `AppDashboardCell`s.
+ * @param {string} [props.className] Extra classes on the grid.
+ */
+export default function AppDashboardGrid({ children, className, ...rest }: {
+    children: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppInput.d.ts

@@ -50,6 +50,25 @@
  *   `@webority/ui-elements`, so both surfaces validate identically.
  * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.requirementsPlacement="auto"] Which side the
  *   requirements popover opens; `auto` flips to stay in view.
+ * @param {string} [props.mask] Format the value while it is typed. A named mask
+ *   (`phone-in`, `pan`, `gstin`, `aadhaar`, `ifsc`, `pin-code`, `date` as DD-MM-YYYY, `amount` with
+ *   Indian grouping) or a pattern, where `9` is a digit, `A` a letter, `*` a digit or letter and any
+ *   other character a literal (`"(999) 999-9999"`). Paste is cleaned and re-formatted, Backspace and
+ *   Delete step over literals, and the caret stays put; a keyboard that composes text (an Android IME) is
+ *   left alone until it commits, and a value set from code (react-hook-form `setValue` / `reset`) is
+ *   laid out too. The behaviour is the one `<app-input mask>` runs, from `@webority/ui-elements`. Use
+ *   it on a `text`, `tel`, `search`, `url` or `password` field; any other `type` warns, and an unknown
+ *   mask name warns. A controlled `value` (raw or formatted) is laid out under the mask. `onChange`
+ *   and `onBlur` get an event whose `target.value` is the POSTED value (the raw characters, or ISO
+ *   `yyyy-MM-dd` for `date`), so a controlled field and a zod rule see what the server will see;
+ *   `onInput` sees the field as displayed. react-hook-form's `register` reads the element itself, so
+ *   pair it with `setValueAs: (v) => postedMasked(mask, v)`. A named mask also marks the field invalid
+ *   with a curated message while it is incomplete or wrong, shown as the field's error once the field
+ *   has been left or a submit was tried (an `error` you pass wins).
+ * @param {boolean} [props.postFormatted=false] With a `mask`, a native form submit posts the
+ *   formatted value instead of the raw one (the typed characters without the literals).
+ * @param {(raw: string, formatted: string) => void} [props.onMaskChange] Called with the raw and the
+ *   formatted value whenever the raw value changes.
  * @param {import('react').Ref<HTMLInputElement>} [ref]
  */
 declare const AppInput: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/dist/types/components/AppLineChart.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A line chart: one numeric series over categorical x labels (months, quarters, attempts).
+ * Hand-drawn SVG, no chart library. The x axis is laid out in percentages and the y axis in
+ * pixels, so the chart fills any width without a resize observer and without scaling its text.
+ * Each point is a focusable button that shows its value on hover and focus; a visually hidden
+ * table carries every value, the band and reference labels included, for screen readers.
+ *
+ * @param {object} props
+ * @param {{ label: string, value: number | null }[]} props.data The series, in x order. Labels must
+ *   be unique. A `null` value leaves a gap in the line.
+ * @param {string} [props.name] The series name, read before each point's value ("Score, Mar: 72").
+ * @param {number} [props.yMin] Fixes the bottom of the y axis. Omitted: taken from the data,
+ *   rounded down to a whole tick.
+ * @param {number} [props.yMax] Fixes the top of the y axis. Omitted: taken from the data,
+ *   rounded up to a whole tick.
+ * @param {{ from: number, to: number, label?: string, tone?: 'neutral'|'info'|'success'|'warning'|'danger' }[]} [props.bands]
+ *   Shaded y ranges behind the line, such as rating bands, each labelled at its top right.
+ * @param {{ value: number, label?: string }[]} [props.referenceLines] Dashed horizontal lines,
+ *   such as a target or a threshold, each labelled at its right end.
+ * @param {(value: number) => string} [props.formatValue] Formats every value the chart prints:
+ *   ticks, tooltips, the data table. Defaults to `String(value)`.
+ * @param {number} [props.height=240] Height of the plot area in px, x labels excluded.
+ * @param {string} [props.title] A visible caption above the chart; also names it for assistive tech.
+ * @param {string} [props.ariaLabel] Names the chart when there is no visible `title`.
+ * @param {string} [props.className]
+ */
+export default function AppLineChart({ data, name, yMin, yMax, bands, referenceLines, formatValue, height, title, ariaLabel, className, ...rest }: {
+    data: {
+        label: string;
+        value: number | null;
+    }[];
+    name?: string;
+    yMin?: number;
+    yMax?: number;
+    bands?: {
+        from: number;
+        to: number;
+        label?: string;
+        tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    }[];
+    referenceLines?: {
+        value: number;
+        label?: string;
+    }[];
+    formatValue?: (value: number) => string;
+    height?: number;
+    title?: string;
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppLogoPicker.d.ts

@@ -3,11 +3,12 @@ fallback, // node shown when there's no image (e.g. initials)
 name, onPick, // (file) => void — receives a validated File
 onRemove, // () => void — clears the current logo
 loading, // show a spinner + block interaction while the pick is uploading
-disabled, accept, maxSizeMb, overlayIcon, overlayLabel, ariaLabel, label, hint, error, layout, title, subtitle, required, variant, size, shape, className, ...rest }: {
+disabled, accept, maxSizeMb, crop, overlayIcon, overlayLabel, ariaLabel, label, hint, error, layout, title, subtitle, required, variant, size, shape, className, ...rest }: {
     [x: string]: any;
     accept?: string;
     ariaLabel?: string;
     className?: string;
+    crop: any;
     disabled?: boolean;
     error: any;
     fallback: any;

package/dist/types/components/AppRichText.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A formatted-text field: a toolbar (bold, italic, inline code, link, headings, lists, quote, code
+ * block, undo, redo) over an editable surface, with the usual keyboard shortcuts. The field is the
+ * shared `<wui-rich-text>` element, the same one the Razor `<app-rich-text>` uses, with its editing
+ * engine loaded the first time an editor mounts: a page without one never downloads it.
+ *
+ * The value is a string in `format`, HTML by default or Markdown. It is always written out from a
+ * fixed set of allowed content (paragraphs, bold, italic, inline code, links, two heading levels,
+ * lists, quotes, code blocks), so pasted or seeded markup outside that set never reaches the value:
+ * a pasted script, style, class or table has nowhere to land. A link may point at http, https,
+ * mailto or tel only. An empty editor is the empty string. Still sanitise on the server: the
+ * browser is not a trust boundary.
+ *
+ * ```jsx
+ * <AppRichText label="Notes" value={notes} onChange={setNotes} hint="Shown on the invoice." />
+ * ```
+ *
+ * `onChange` fires on every edit with the new string. `format` is read when the editor mounts; the
+ * wrapper remounts the editor when it changes, so the value you hold must be in the new format.
+ *
+ * @param {object} props
+ * @param {string} [props.value] The content, in `format`.
+ * @param {(value: string) => void} [props.onChange] Called with the new string on every edit.
+ * @param {'html'|'markdown'} [props.format='html'] What `value` is.
+ * @param {string} [props.placeholder] Shown while the editor is empty.
+ * @param {string} [props.name] Posted under this name with a form.
+ * @param {import('react').ReactNode} [props.label]
+ * @param {string} [props.error]
+ * @param {string} [props.hint]
+ * @param {boolean} [props.required=false] Marks the field required; an empty editor is invalid.
+ * @param {boolean} [props.disabled=false] Locks the editor and keeps it out of the form post.
+ * @param {boolean} [props.readOnly=false] Locks the editor; the value still posts.
+ * @param {string} [props.id]
+ * @param {string} [props.ariaLabel] Accessible name for the editor; defaults to a string `label`.
+ * @param {string} [props.className] Class on the `<wui-rich-text>` element.
+ * @param {string} [props.fieldClassName] Class on the wrapper field div.
+ * @param {import('react').ReactNode} [props.help] Help content shown in an info tip beside the label.
+ * @param {string} [props.helpLabel="More information"] Accessible name for that info tip.
+ * @param {import('react').Ref<HTMLElement>} [ref] The `<wui-rich-text>` element.
+ */
+declare const AppRichText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppRichText;

package/dist/types/components/AppSortableList.d.ts

@@ -0,0 +1,32 @@
+import "@webority/ui-elements";
+/**
+ * A list whose items the person reorders: drag with a mouse or a finger (the list scrolls when
+ * the pointer nears its edge), or with the keyboard (focus an item's handle, Space to lift,
+ * arrow keys to move, Space to drop, Escape to cancel). Every move is announced to screen readers.
+ * Thin wrapper over the shared `<wui-sortable>` element; the list is controlled, so `items`
+ * is the truth and `onReorder` reports the new order.
+ *
+ * Lists that share a `group` accept each other's items by pointer drag. Each list then reports
+ * its own new order, so the parent moves the item from one `items` array to the other.
+ *
+ * @param {object} props
+ * @param {{ id: string, label: string, content?: import('react').ReactNode, disabled?: boolean }[]} props.items
+ *   `id` is what `onReorder` reports. `label` names the item to assistive tech (handle label and
+ *   announcements) and is the visible text unless `content` is given. A `disabled` item cannot
+ *   be picked up; other items can still move past it.
+ * @param {(ids: string[], detail: object) => void} [props.onReorder] Called with this list's new
+ *   id order after a drop. `detail` is the element's event detail: `{ id, fromIndex, toIndex, from, to }`.
+ * @param {string} props.ariaLabel Names the list for assistive tech; also used in announcements
+ *   when an item moves between lists.
+ * @param {boolean} [props.handle=false] Drag only from the handle. Without it an item can also be
+ *   dragged from its body (links, buttons and inputs inside it keep working).
+ * @param {string} [props.group] Name shared by lists that accept each other's items.
+ * @param {string} [props.name] Form field name; posts the order as one hidden input per item.
+ * @param {boolean} [props.disabled] No item can be picked up.
+ * @param {'vertical'|'horizontal'} [props.orientation='vertical'] Direction the items run;
+ *   horizontal also covers a wrapping row.
+ * @param {string} [props.className]
+ * @param {import('react').Ref<HTMLElement>} [ref]
+ */
+declare const AppSortableList: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppSortableList;

package/dist/types/components/AppSparkline.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A small inline trend line: no axes, no tooltip, no chart engine. Drawn as plain SVG, so a
+ * table cell or a tile can hold one without loading anything. It is a picture of a trend, so it
+ * carries a text alternative that says where the line starts and ends. Pass your own `aria-label` to replace it,
+ * or `aria-hidden="true"` when the figure sits beside the trend in text.
+ *
+ * ```jsx
+ * <AppSparkline data={[12, 15, 14, 19]} label="Signups" />
+ * ```
+ *
+ * @param {object} props
+ * @param {number[]} props.data The values, in order. A value that is not a finite number (null, NaN, a string) is left out, and a series with none left draws nothing.
+ * @param {string} [props.label] What the trend measures; it starts the text alternative ("Signups trend from 12 to 19 across 4 points.").
+ * @param {number} [props.width=48] Width in px.
+ * @param {number} [props.height=16] Height in px.
+ * @param {string} [props.className] Extra classes on the svg.
+ */
+export default function AppSparkline({ data, label, width, height, className, ...rest }: {
+    data: number[];
+    label?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppTreeView.d.ts

@@ -0,0 +1,44 @@
+import "@webority/ui-elements";
+/**
+ * Thin React wrapper over the shared `<wui-tree>` element: a hierarchy in the WAI-ARIA tree
+ * pattern (arrow keys, Home/End, typeahead, Enter), with icons and badges, lazy children and an
+ * optional single or checkbox selection. The Razor `<app-tree-view>` renders the same element.
+ *
+ * `nodes` is `{ id, label, icon?, badge?, badgeTone?, children?, hasChildren?, expanded?,
+ * checked?, disabled? }[]`. `icon` is a library icon name and `badgeTone` an AppBadge tone. Ids are
+ * strings, unique across the whole tree. `children: []` is a leaf; `hasChildren: true` with no
+ * `children` is a node whose children are fetched the first time it opens, through `loadChildren`
+ * (or `loadUrl`). Labels are plain text. The tree keeps what the user opened and what it
+ * fetched when `nodes` is replaced with the same ids.
+ *
+ * Selection: `single` marks one row selected; `multiple` shows a tri-state checkbox per node (a
+ * parent is checked, unchecked or mixed from its children, and checking it checks every loaded
+ * child). `checked` is controlled by the ids it lists, parents included.
+ *
+ * @param {object} props
+ * @param {{ id: string, label: string, icon?: string, badge?: string,
+ *   badgeTone?: 'neutral'|'primary'|'success'|'warning'|'danger'|'info', children?: object[],
+ *   hasChildren?: boolean, expanded?: boolean, checked?: boolean, disabled?: boolean }[]} props.nodes
+ * @param {'none'|'single'|'multiple'} [props.selection='none']
+ * @param {string|null} [props.selected] Selected id (single mode, controlled: the tree shows this id
+ *   whatever the user clicks until you change it; `null` selects nothing, and dropping the prop clears it).
+ * @param {(id: string, node: object) => void} [props.onSelect] A row was activated: clicked, or
+ *   Enter / Space on it. `node` is the object you passed in.
+ * @param {string[]} [props.checked] Checked ids (multiple mode, controlled).
+ * @param {(ids: string[], detail: { id: string, checked: boolean }) => void} [props.onCheck] A
+ *   check was toggled; `ids` is every checked id.
+ * @param {(node: object) => Promise<object[]>} [props.loadChildren] Fetches a lazy node's children.
+ * @param {string} [props.loadUrl] Children endpoint used when `loadChildren` is not set: a GET with
+ *   `parentId=<id>` added, answering a JSON array of nodes.
+ * @param {(id: string, message: string) => void} [props.onLoadError] Children could not be loaded.
+ * @param {string} [props.name] Form field name: `multiple` posts one value per checked id, `single`
+ *   the selected id.
+ * @param {string} [props.loadingText='Loading'] Announced while children load.
+ * @param {string} [props.errorText='Could not load. Try again.'] Announced when they fail.
+ * @param {string} [props.ariaLabel] Accessible name of the tree.
+ * @param {string} [props.id]
+ * @param {string} [props.className]
+ * @param {import('react').Ref<HTMLElement>} [ref]
+ */
+declare const AppTreeView: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppTreeView;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+export { postedMasked } from "@webority/ui-elements";
 export { default as AppAccordion } from "./components/AppAccordion.jsx";
 export { default as AppActionIcon } from "./components/AppActionIcon.jsx";
 export { default as AppAlert } from "./components/AppAlert.jsx";
@@ -7,9 +8,13 @@ export { default as AppAvatar } from "./components/AppAvatar.jsx";
 export { default as AppAvatarGroup } from "./components/AppAvatarGroup.jsx";
 export { default as AppBadge } from "./components/AppBadge.jsx";
 export { default as AppBanner } from "./components/AppBanner.jsx";
+export { default as AppBarChart } from "./components/AppBarChart.jsx";
 export { default as AppBreadcrumbs } from "./components/AppBreadcrumbs.jsx";
 export { default as AppButton } from "./components/AppButton.jsx";
+export { default as AppCalendar } from "./components/AppCalendar.jsx";
 export { default as AppCard } from "./components/AppCard.jsx";
+export { default as AppChart } from "./components/AppChart.jsx";
+export { default as AppChartCard } from "./components/AppChartCard.jsx";
 export { default as AppCheckbox } from "./components/AppCheckbox.jsx";
 export { default as AppChip } from "./components/AppChip.jsx";
 export { default as AppChoiceCard } from "./components/AppChoiceCard.jsx";
@@ -20,8 +25,11 @@ export { default as AppCommandPalette } from "./components/AppCommandPalette.jsx
 export { default as AppCompareTable } from "./components/AppCompareTable.jsx";
 export { default as AppConfirmDialog } from "./components/AppConfirmDialog.jsx";
 export { default as AppConsentBanner } from "./components/AppConsentBanner.jsx";
+export { default as AppContextMenu } from "./components/AppContextMenu.jsx";
 export { default as AppCopyButton } from "./components/AppCopyButton.jsx";
 export { default as AppCountrySelect } from "./components/AppCountrySelect.jsx";
+export { default as AppDashboardCell } from "./components/AppDashboardCell.jsx";
+export { default as AppDashboardGrid } from "./components/AppDashboardGrid.jsx";
 export { default as AppDataTable } from "./components/AppDataTable.jsx";
 export { default as AppDatePicker } from "./components/AppDatePicker.jsx";
 export { default as AppDateRangePicker } from "./components/AppDateRangePicker.jsx";
@@ -42,6 +50,7 @@ export { default as AppInfoList } from "./components/AppInfoList.jsx";
 export { default as AppInfoTip } from "./components/AppInfoTip.jsx";
 export { default as AppInput } from "./components/AppInput.jsx";
 export { default as AppKpiTile } from "./components/AppKpiTile.jsx";
+export { default as AppLineChart } from "./components/AppLineChart.jsx";
 export { default as AppLink } from "./components/AppLink.jsx";
 export { default as AppLogoPicker } from "./components/AppLogoPicker.jsx";
 export { default as AppMeter } from "./components/AppMeter.jsx";
@@ -62,6 +71,7 @@ export { default as AppRepeater } from "./components/AppRepeater.jsx";
 export { default as AppRequiredMark } from "./components/AppRequiredMark.jsx";
 export { default as AppResourceCard } from "./components/AppResourceCard.jsx";
 export { default as AppResult } from "./components/AppResult.jsx";
+export { default as AppRichText } from "./components/AppRichText.jsx";
 export { default as AppScrollbar } from "./components/AppScrollbar.jsx";
 export { default as AppSearch } from "./components/AppSearch.jsx";
 export { default as AppSegmented } from "./components/AppSegmented.jsx";
@@ -71,6 +81,8 @@ export { default as AppShell } from "./components/AppShell.jsx";
 export { default as AppSidebarMenu } from "./components/AppSidebarMenu.jsx";
 export { AppSkeletonRows, default as AppSkeleton } from "./components/AppSkeleton.jsx";
 export { default as AppSlider } from "./components/AppSlider.jsx";
+export { default as AppSortableList } from "./components/AppSortableList.jsx";
+export { default as AppSparkline } from "./components/AppSparkline.jsx";
 export { default as AppSpinner } from "./components/AppSpinner.jsx";
 export { default as AppSplash } from "./components/AppSplash.jsx";
 export { default as AppStatusBadge } from "./components/AppStatusBadge.jsx";
@@ -88,6 +100,7 @@ export { default as AppTimePicker } from "./components/AppTimePicker.jsx";
 export { default as AppToast } from "./components/AppToast.jsx";
 export { default as AppToolbar } from "./components/AppToolbar.jsx";
 export { default as AppTooltip } from "./components/AppTooltip.jsx";
+export { default as AppTreeView } from "./components/AppTreeView.jsx";
 export { default as AppWizard } from "./components/AppWizard.jsx";
 export { default as AppWorkspaceSwitcher } from "./components/AppWorkspaceSwitcher.jsx";
 export { MODAL_ICONS } from "./components/ModalIcons.jsx";