@conuti-das/prince-ui 0.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +18 -0
- package/dist/index.css +4328 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +1466 -0
- package/dist/index.js +3439 -0
- package/dist/index.js.map +1 -0
- package/package.json +62 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1466 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { SVGProps, ReactNode, CSSProperties, MouseEvent, HTMLAttributes, ElementType } from 'react';
|
|
3
|
+
import { ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, ListBoxItemProps, SwitchProps as SwitchProps$1, TextFieldProps as TextFieldProps$1, PopoverProps, MenuItemProps, ToggleButtonProps, ToggleButtonGroupProps, TabProps, TabListProps, TabPanelProps, TabsProps as TabsProps$1, CheckboxGroupProps as CheckboxGroupProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, NumberFieldProps as NumberFieldProps$1, SliderProps as SliderProps$1, ComboBoxProps as ComboBoxProps$1, FieldErrorProps as FieldErrorProps$1, FormProps as FormProps$1, GridListProps as GridListProps$1, GridListItemProps as GridListItemProps$1, ListBoxProps as ListBoxProps$1, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, LinkProps as LinkProps$1, DisclosureProps as DisclosureProps$1, DisclosureGroupProps as DisclosureGroupProps$1, TreeProps as TreeProps$1, TreeItemProps as TreeItemProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, DateValue, DateFieldProps as DateFieldProps$1, TimeValue, TimeFieldProps as TimeFieldProps$1, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, ColorFieldProps as ColorFieldProps$1, ColorSwatchProps as ColorSwatchProps$1, ColorSwatchPickerProps as ColorSwatchPickerProps$1, ColorSwatchPickerItemProps as ColorSwatchPickerItemProps$1, ColorAreaProps as ColorAreaProps$1, ColorPickerProps as ColorPickerProps$1, ColorSliderProps as ColorSliderProps$1, ColorWheelProps as ColorWheelProps$1, GroupProps as GroupProps$1, MeterProps as MeterProps$1, ProgressBarProps as ProgressBarProps$1, SeparatorProps as SeparatorProps$1, ToastRegionProps as ToastRegionProps$1, UNSTABLE_ToastQueue, DropZoneProps as DropZoneProps$1, FileTriggerProps as FileTriggerProps$1 } from 'react-aria-components';
|
|
4
|
+
export { DialogTrigger, parseColor } from 'react-aria-components';
|
|
5
|
+
import { RowData, TableOptions, Table as Table$1 } from '@tanstack/react-table';
|
|
6
|
+
|
|
7
|
+
/** Klassen-Helper: filtert Falsy-Werte und joint mit Space. */
|
|
8
|
+
declare function cx(...parts: Array<string | false | null | undefined>): string;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Monochrome Linien-Icons (SVG, `currentColor`) — bewusst KEINE Emoji.
|
|
12
|
+
*
|
|
13
|
+
* Stil: 24×24-Grid, `fill: none`, `stroke: currentColor`, 2px, runde Enden
|
|
14
|
+
* (lucide-kompatible Optik). Die Icons erben die Textfarbe und sind damit
|
|
15
|
+
* theme-fähig (Light/Dark/CU). Kein externer Dependency.
|
|
16
|
+
*
|
|
17
|
+
* Wer mehr Icons braucht, kann jedes monochrome `currentColor`-SVG (z. B.
|
|
18
|
+
* `lucide-react`) direkt in die `icon`/`leading`-Slots der Komponenten geben.
|
|
19
|
+
*/
|
|
20
|
+
type IconName = "heart" | "flame" | "moon" | "chart" | "settings" | "menu" | "pin" | "pin-off" | "user" | "building" | "search" | "plus" | "bolt" | "alert" | "inbox" | "compass" | "mail" | "bell" | "grid" | "more" | "maximize" | "check" | "x" | "chevron-right" | "chevron-down" | "chevron-up" | "phone" | "clock" | "link" | "arrow-down-right" | "arrow-up-right" | "droplet" | "file-text";
|
|
21
|
+
interface IconProps extends Omit<SVGProps<SVGSVGElement>, "name"> {
|
|
22
|
+
/** Name des monochromen Icons. */
|
|
23
|
+
name: IconName;
|
|
24
|
+
/** Kantenlänge in px (Default 20). */
|
|
25
|
+
size?: number | string;
|
|
26
|
+
/** Wenn gesetzt: zugängliches Label (sonst `aria-hidden`, rein dekorativ). */
|
|
27
|
+
title?: string;
|
|
28
|
+
}
|
|
29
|
+
/** Monochromes Linien-Icon (erbt `currentColor`). */
|
|
30
|
+
declare function Icon({ name, size, title, ...rest }: IconProps): react.JSX.Element;
|
|
31
|
+
|
|
32
|
+
interface ButtonProps extends Omit<ButtonProps$1, "className"> {
|
|
33
|
+
/** Prince-Varianten: gefüllt (Akzent), getönt (soft) oder schlicht. */
|
|
34
|
+
variant?: "filled" | "tinted" | "plain";
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
declare function Button({ variant, className, ...props }: ButtonProps): react.JSX.Element;
|
|
38
|
+
interface TextFieldProps extends Omit<TextFieldProps$1, "className"> {
|
|
39
|
+
label?: ReactNode;
|
|
40
|
+
description?: ReactNode;
|
|
41
|
+
errorMessage?: ReactNode;
|
|
42
|
+
placeholder?: string;
|
|
43
|
+
className?: string;
|
|
44
|
+
}
|
|
45
|
+
declare function TextField({ label, description, errorMessage, placeholder, className, ...props }: TextFieldProps): react.JSX.Element;
|
|
46
|
+
interface SearchFieldProps extends Omit<SearchFieldProps$1, "className"> {
|
|
47
|
+
label?: ReactNode;
|
|
48
|
+
placeholder?: string;
|
|
49
|
+
className?: string;
|
|
50
|
+
}
|
|
51
|
+
declare function SearchField({ label, placeholder, className, ...props }: SearchFieldProps): react.JSX.Element;
|
|
52
|
+
interface CheckboxProps extends Omit<CheckboxProps$1, "className"> {
|
|
53
|
+
children?: ReactNode;
|
|
54
|
+
className?: string;
|
|
55
|
+
}
|
|
56
|
+
declare function Checkbox({ children, className, ...props }: CheckboxProps): react.JSX.Element;
|
|
57
|
+
interface SwitchProps extends Omit<SwitchProps$1, "className"> {
|
|
58
|
+
children?: ReactNode;
|
|
59
|
+
className?: string;
|
|
60
|
+
}
|
|
61
|
+
declare function Switch({ children, className, ...props }: SwitchProps): react.JSX.Element;
|
|
62
|
+
interface SelectProps<T extends object> extends Omit<SelectProps$1<T>, "className" | "children"> {
|
|
63
|
+
label?: ReactNode;
|
|
64
|
+
placeholder?: string;
|
|
65
|
+
children: ReactNode | ((item: T) => ReactNode);
|
|
66
|
+
className?: string;
|
|
67
|
+
}
|
|
68
|
+
declare function Select<T extends object>({ label, placeholder, children, className, ...props }: SelectProps<T>): react.JSX.Element;
|
|
69
|
+
interface SelectItemProps extends Omit<ListBoxItemProps, "className"> {
|
|
70
|
+
className?: string;
|
|
71
|
+
}
|
|
72
|
+
declare function SelectItem({ className, ...props }: SelectItemProps): react.JSX.Element;
|
|
73
|
+
|
|
74
|
+
interface ModalProps {
|
|
75
|
+
isOpen?: boolean;
|
|
76
|
+
defaultOpen?: boolean;
|
|
77
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
78
|
+
/** Titel als Überschrift mit slot="title" (für aria-labelledby). */
|
|
79
|
+
title?: ReactNode;
|
|
80
|
+
children?: ReactNode;
|
|
81
|
+
/** Klick auf Scrim schließt (Default true). */
|
|
82
|
+
isDismissable?: boolean;
|
|
83
|
+
/** „Liquid Glass"-Optik (transluzent + Blur) statt opaker Fläche. */
|
|
84
|
+
glass?: boolean;
|
|
85
|
+
className?: string;
|
|
86
|
+
}
|
|
87
|
+
declare function Modal({ title, children, className, isDismissable, glass, ...props }: ModalProps): react.JSX.Element;
|
|
88
|
+
|
|
89
|
+
interface MenuProps {
|
|
90
|
+
/** Trigger-Element (z. B. <Button>). */
|
|
91
|
+
trigger: ReactNode;
|
|
92
|
+
children: ReactNode;
|
|
93
|
+
/** „Liquid Glass"-Optik (transluzent + Blur) statt opaker Fläche. */
|
|
94
|
+
glass?: boolean;
|
|
95
|
+
className?: string;
|
|
96
|
+
}
|
|
97
|
+
declare function Menu({ trigger, children, glass, className }: MenuProps): react.JSX.Element;
|
|
98
|
+
interface MenuItemPropsExt extends Omit<MenuItemProps, "className"> {
|
|
99
|
+
className?: string;
|
|
100
|
+
}
|
|
101
|
+
declare function MenuItem({ className, ...props }: MenuItemPropsExt): react.JSX.Element;
|
|
102
|
+
interface AplPopoverProps extends Omit<PopoverProps, "className"> {
|
|
103
|
+
/** „Liquid Glass"-Optik (transluzent + Blur) statt opaker Fläche. */
|
|
104
|
+
glass?: boolean;
|
|
105
|
+
className?: string;
|
|
106
|
+
}
|
|
107
|
+
declare function Popover({ glass, className, children, ...props }: AplPopoverProps): react.JSX.Element;
|
|
108
|
+
interface TooltipProps {
|
|
109
|
+
/** Element, das den Tooltip auslöst. */
|
|
110
|
+
trigger: ReactNode;
|
|
111
|
+
children: ReactNode;
|
|
112
|
+
delay?: number;
|
|
113
|
+
className?: string;
|
|
114
|
+
}
|
|
115
|
+
declare function Tooltip({ trigger, children, delay, className }: TooltipProps): react.JSX.Element;
|
|
116
|
+
|
|
117
|
+
interface SegmentedControlProps extends Omit<ToggleButtonGroupProps, "className" | "selectionMode"> {
|
|
118
|
+
className?: string;
|
|
119
|
+
}
|
|
120
|
+
declare function SegmentedControl({ className, disallowEmptySelection, ...props }: SegmentedControlProps): react.JSX.Element;
|
|
121
|
+
interface SegmentProps extends Omit<ToggleButtonProps, "className"> {
|
|
122
|
+
className?: string;
|
|
123
|
+
}
|
|
124
|
+
declare function Segment({ className, ...props }: SegmentProps): react.JSX.Element;
|
|
125
|
+
interface TabsProps extends Omit<TabsProps$1, "className"> {
|
|
126
|
+
className?: string;
|
|
127
|
+
}
|
|
128
|
+
declare function Tabs({ className, ...props }: TabsProps): react.JSX.Element;
|
|
129
|
+
declare function TabBar({ className, ...props }: Omit<TabListProps<object>, "className"> & {
|
|
130
|
+
className?: string;
|
|
131
|
+
}): react.JSX.Element;
|
|
132
|
+
declare function Tab({ className, ...props }: Omit<TabProps, "className"> & {
|
|
133
|
+
className?: string;
|
|
134
|
+
}): react.JSX.Element;
|
|
135
|
+
declare function TabPanel({ className, ...props }: Omit<TabPanelProps, "className"> & {
|
|
136
|
+
className?: string;
|
|
137
|
+
children?: ReactNode;
|
|
138
|
+
}): react.JSX.Element;
|
|
139
|
+
|
|
140
|
+
interface CardProps {
|
|
141
|
+
/** Optionaler Titel oben links (alternativ via `header` voll überschreibbar). */
|
|
142
|
+
title?: ReactNode;
|
|
143
|
+
/** Freier Header-Slot rechts (z. B. Aktionen) — neben dem Titel. */
|
|
144
|
+
header?: ReactNode;
|
|
145
|
+
/** Innenabstand-Variante. */
|
|
146
|
+
padding?: "none" | "compact" | "regular" | "spacious";
|
|
147
|
+
/** Glas-Optik: halbtransparenter Hintergrund + Blur (Light & Dark). */
|
|
148
|
+
translucent?: boolean;
|
|
149
|
+
/** Macht die Karte klickbar (react-aria Button) mit Hover-Lift — wie KpiCard. */
|
|
150
|
+
onPress?: () => void;
|
|
151
|
+
/** Inline-Styles (z. B. App-lokale Maße/Status-Border) auf das Card-Element. */
|
|
152
|
+
style?: CSSProperties;
|
|
153
|
+
children?: ReactNode;
|
|
154
|
+
className?: string;
|
|
155
|
+
}
|
|
156
|
+
declare function Card({ title, header, padding, translucent, onPress, style, children, className, }: CardProps): react.JSX.Element;
|
|
157
|
+
type Trend$1 = "up" | "down" | "flat";
|
|
158
|
+
/** Färbung des KPI-Werts (Drill-down-Semantik). */
|
|
159
|
+
type KpiTone = "positive" | "critical" | "negative";
|
|
160
|
+
interface KpiCardProps {
|
|
161
|
+
label: ReactNode;
|
|
162
|
+
value: ReactNode;
|
|
163
|
+
/** Delta-Text, z. B. "+12 %". */
|
|
164
|
+
delta?: ReactNode;
|
|
165
|
+
/** Richtung der Färbung. Wird `delta` ohne `trend` gesetzt, bleibt es neutral. */
|
|
166
|
+
trend?: Trend$1;
|
|
167
|
+
/** Färbt den Wert semantisch (grün/orange/rot). */
|
|
168
|
+
tone?: KpiTone;
|
|
169
|
+
/** Macht die Kachel klickbar (react-aria Button) mit Hover-Lift. */
|
|
170
|
+
onPress?: () => void;
|
|
171
|
+
/** Akzent-„Hero"-Kachel: Vollflächen-Akzent mit dunkler Schrift. */
|
|
172
|
+
accent?: boolean;
|
|
173
|
+
/** Optionales Leading-Icon (z. B. SVG/Emoji). */
|
|
174
|
+
icon?: ReactNode;
|
|
175
|
+
className?: string;
|
|
176
|
+
}
|
|
177
|
+
declare function KpiCard({ label, value, delta, trend, tone, onPress, accent, icon, className, }: KpiCardProps): react.JSX.Element;
|
|
178
|
+
type BadgeTone = "neutral" | "green" | "red" | "orange" | "blue" | "teal" | "gray";
|
|
179
|
+
interface BadgeProps {
|
|
180
|
+
tone?: BadgeTone;
|
|
181
|
+
/** Soft = getönt (Default), solid = vollflächig gefüllt. */
|
|
182
|
+
variant?: "soft" | "solid";
|
|
183
|
+
/** Optionales Leading-Icon (SVG/Emoji/ReactNode), links vom Text. */
|
|
184
|
+
icon?: ReactNode;
|
|
185
|
+
/** Beliebige Markenfarbe (überschreibt `tone`). Z. B. Team-Farbe. */
|
|
186
|
+
color?: string;
|
|
187
|
+
/** Textfarbe bei `color` (Default: Weiß für solid, `color` selbst für soft). */
|
|
188
|
+
textColor?: string;
|
|
189
|
+
/** Escape-Hatch: Inline-Styles (z. B. fixe Größe/Radius/Font für Tabellen-Chips). */
|
|
190
|
+
style?: CSSProperties;
|
|
191
|
+
children?: ReactNode;
|
|
192
|
+
className?: string;
|
|
193
|
+
}
|
|
194
|
+
declare function Badge({ tone, variant, icon, color, textColor, style, children, className, }: BadgeProps): react.JSX.Element;
|
|
195
|
+
interface AmountProps {
|
|
196
|
+
/**
|
|
197
|
+
* Zahl → wird i18n-formatiert. Bereits formatierter String → wird unverändert
|
|
198
|
+
* angezeigt (String-Modus; `currency`/`locale`/`fractionDigits` werden ignoriert).
|
|
199
|
+
*/
|
|
200
|
+
value: number | string;
|
|
201
|
+
/** ISO-Währungscode, z. B. "EUR". Ohne → reine Zahl. (Nur Zahl-Modus.) */
|
|
202
|
+
currency?: string;
|
|
203
|
+
/** BCP-47-Locale für Formatierung (Default "de-DE"). (Nur Zahl-Modus.) */
|
|
204
|
+
locale?: string;
|
|
205
|
+
/** Min/Max Nachkommastellen. (Nur Zahl-Modus.) */
|
|
206
|
+
minimumFractionDigits?: number;
|
|
207
|
+
maximumFractionDigits?: number;
|
|
208
|
+
/** Negativ rot / positiv grün einfärben. */
|
|
209
|
+
colored?: boolean;
|
|
210
|
+
/** Immer Vorzeichen anzeigen (auch +). (Nur Zahl-Modus.) */
|
|
211
|
+
signed?: boolean;
|
|
212
|
+
/**
|
|
213
|
+
* Optische Abschwächung der Nachkommastellen (Tail leiser/kleiner).
|
|
214
|
+
* Erkennt das Dezimaltrennzeichen der Ausgabe und dämpft alles dahinter.
|
|
215
|
+
*/
|
|
216
|
+
dimDecimals?: boolean;
|
|
217
|
+
className?: string;
|
|
218
|
+
}
|
|
219
|
+
declare function Amount({ value, currency, locale, minimumFractionDigits, maximumFractionDigits, colored, signed, dimDecimals, className, }: AmountProps): react.JSX.Element;
|
|
220
|
+
interface ListProps {
|
|
221
|
+
children?: ReactNode;
|
|
222
|
+
/** Header-Beschriftung über der Liste (macOS-Gruppentitel). */
|
|
223
|
+
label?: ReactNode;
|
|
224
|
+
/** Eingerückte Trennlinien (wie iOS-Listen). */
|
|
225
|
+
inset?: boolean;
|
|
226
|
+
className?: string;
|
|
227
|
+
}
|
|
228
|
+
declare function List({ children, label, inset, className }: ListProps): react.JSX.Element;
|
|
229
|
+
interface ListRowProps {
|
|
230
|
+
/** Linkes Element (Icon/Avatar). */
|
|
231
|
+
leading?: ReactNode;
|
|
232
|
+
title?: ReactNode;
|
|
233
|
+
subtitle?: ReactNode;
|
|
234
|
+
/** Rechtes Element (Wert, Badge, Chevron). */
|
|
235
|
+
trailing?: ReactNode;
|
|
236
|
+
/** Macht die Zeile pressbar (react-aria Button). */
|
|
237
|
+
onPress?: () => void;
|
|
238
|
+
/** Aktiver/ausgewählter Zustand. */
|
|
239
|
+
isActive?: boolean;
|
|
240
|
+
isDisabled?: boolean;
|
|
241
|
+
className?: string;
|
|
242
|
+
}
|
|
243
|
+
declare function ListRow({ leading, title, subtitle, trailing, onPress, isActive, isDisabled, className, }: ListRowProps): react.JSX.Element;
|
|
244
|
+
interface SidebarItem {
|
|
245
|
+
id: string;
|
|
246
|
+
label: ReactNode;
|
|
247
|
+
icon?: ReactNode;
|
|
248
|
+
/** Optionales Badge/Counter rechts. */
|
|
249
|
+
trailing?: ReactNode;
|
|
250
|
+
}
|
|
251
|
+
interface SidebarGroup {
|
|
252
|
+
/** Gruppentitel (optional). */
|
|
253
|
+
label?: ReactNode;
|
|
254
|
+
items: SidebarItem[];
|
|
255
|
+
/** Macht die Gruppe auf-/zuklappbar (Chevron, klickbarer Titel). Braucht `label`. */
|
|
256
|
+
collapsible?: boolean;
|
|
257
|
+
/** Startzustand zugeklappt (nur bei `collapsible`). */
|
|
258
|
+
defaultCollapsed?: boolean;
|
|
259
|
+
}
|
|
260
|
+
interface SidebarProps {
|
|
261
|
+
groups: SidebarGroup[];
|
|
262
|
+
/** Aktive Item-ID. */
|
|
263
|
+
selectedKey?: string;
|
|
264
|
+
onSelect?: (id: string) => void;
|
|
265
|
+
/** Kopfbereich (z. B. App-Titel/Logo). */
|
|
266
|
+
header?: ReactNode;
|
|
267
|
+
/** Fußbereich (z. B. Account). */
|
|
268
|
+
footer?: ReactNode;
|
|
269
|
+
/** „Liquid Glass"-Optik (transluzent + Blur). Nur über Content sinnvoll. */
|
|
270
|
+
glass?: boolean;
|
|
271
|
+
className?: string;
|
|
272
|
+
}
|
|
273
|
+
declare function Sidebar({ groups, selectedKey, onSelect, header, footer, glass, className, }: SidebarProps): react.JSX.Element;
|
|
274
|
+
interface ToolbarProps {
|
|
275
|
+
title?: ReactNode;
|
|
276
|
+
/** Untertitel unter dem Titel. */
|
|
277
|
+
subtitle?: ReactNode;
|
|
278
|
+
/** Linker Slot (z. B. Zurück-Button) vor dem Titel. */
|
|
279
|
+
leading?: ReactNode;
|
|
280
|
+
/** Aktionen rechts. */
|
|
281
|
+
actions?: ReactNode;
|
|
282
|
+
/** „Liquid Glass"-Optik (transluzent + Blur). Nur über Content sinnvoll. */
|
|
283
|
+
glass?: boolean;
|
|
284
|
+
className?: string;
|
|
285
|
+
}
|
|
286
|
+
declare function Toolbar({ title, subtitle, leading, actions, glass, className }: ToolbarProps): react.JSX.Element;
|
|
287
|
+
interface EmptyStateProps {
|
|
288
|
+
icon?: ReactNode;
|
|
289
|
+
title: ReactNode;
|
|
290
|
+
description?: ReactNode;
|
|
291
|
+
/** Aktions-Slot (z. B. <Button>). */
|
|
292
|
+
action?: ReactNode;
|
|
293
|
+
className?: string;
|
|
294
|
+
}
|
|
295
|
+
declare function EmptyState({ icon, title, description, action, className }: EmptyStateProps): react.JSX.Element;
|
|
296
|
+
type NoticeTone = "info" | "positive" | "critical" | "negative";
|
|
297
|
+
interface NoticeProps {
|
|
298
|
+
tone?: NoticeTone;
|
|
299
|
+
title?: ReactNode;
|
|
300
|
+
/** Optionales Leading-Icon (überschreibt Default-Glyph). */
|
|
301
|
+
icon?: ReactNode;
|
|
302
|
+
children?: ReactNode;
|
|
303
|
+
className?: string;
|
|
304
|
+
}
|
|
305
|
+
declare function Notice({ tone, title, icon, children, className }: NoticeProps): react.JSX.Element;
|
|
306
|
+
interface DescriptionListProps {
|
|
307
|
+
children?: ReactNode;
|
|
308
|
+
/**
|
|
309
|
+
* Layout der Label/Wert-Paare:
|
|
310
|
+
* - `stacked` (Default): Label über dem Wert.
|
|
311
|
+
* - `inline`: Label links, Wert rechts (zweispaltig).
|
|
312
|
+
*/
|
|
313
|
+
layout?: "stacked" | "inline";
|
|
314
|
+
className?: string;
|
|
315
|
+
}
|
|
316
|
+
/** Schlanke read-only Label/Wert-Liste (semantisches `<dl>`). */
|
|
317
|
+
declare function DescriptionList({ children, layout, className, }: DescriptionListProps): react.JSX.Element;
|
|
318
|
+
interface FieldProps {
|
|
319
|
+
label: ReactNode;
|
|
320
|
+
/** Anzuzeigender Wert (read-only). */
|
|
321
|
+
value?: ReactNode;
|
|
322
|
+
children?: ReactNode;
|
|
323
|
+
className?: string;
|
|
324
|
+
}
|
|
325
|
+
/** Ein read-only Label/Wert-Paar (`<dt>`/`<dd>`) für `DescriptionList`. */
|
|
326
|
+
declare function Field({ label, value, children, className }: FieldProps): react.JSX.Element;
|
|
327
|
+
|
|
328
|
+
/** Eintrag im Titel-Dropdown (analog UI5 `menuItems`). */
|
|
329
|
+
interface AppShellMenuItem {
|
|
330
|
+
id: string;
|
|
331
|
+
label: ReactNode;
|
|
332
|
+
icon?: ReactNode;
|
|
333
|
+
}
|
|
334
|
+
/** Aktions-Item in der Shell-Bar (analog UI5 `ShellBarItem`). */
|
|
335
|
+
interface AppShellItem {
|
|
336
|
+
id: string;
|
|
337
|
+
/** Monochromes Icon (z. B. `<Icon name="bell" />`). */
|
|
338
|
+
icon: ReactNode;
|
|
339
|
+
/** Zugängliches Label (Tooltip/aria-label, Overflow-Text). */
|
|
340
|
+
label: string;
|
|
341
|
+
/** Optionaler Zähler-Badge. */
|
|
342
|
+
count?: ReactNode;
|
|
343
|
+
onClick?: () => void;
|
|
344
|
+
}
|
|
345
|
+
interface AppShellProps {
|
|
346
|
+
/** App-Titel (Primärtitel). */
|
|
347
|
+
title?: ReactNode;
|
|
348
|
+
/** Untertitel — blendet auf schmalen Screens aus. */
|
|
349
|
+
subtitle?: ReactNode;
|
|
350
|
+
/** Marken-/Logo-Slot ganz links. */
|
|
351
|
+
logo?: ReactNode;
|
|
352
|
+
onLogoClick?: () => void;
|
|
353
|
+
/** Macht den Titel zu einem Dropdown (analog UI5 `menuItems`). */
|
|
354
|
+
menuItems?: AppShellMenuItem[];
|
|
355
|
+
onMenuItemClick?: (id: string) => void;
|
|
356
|
+
/** Globale Suche; kollabiert auf Mobile zu einem Icon (aufklappbar). */
|
|
357
|
+
search?: ReactNode;
|
|
358
|
+
/** Freie Aktionen rechts (Buttons o. Ä.). */
|
|
359
|
+
actions?: ReactNode;
|
|
360
|
+
/** Aktions-Items mit Icon/Count; wandern auf schmalen Screens ins „…"-Overflow-Menü. */
|
|
361
|
+
items?: AppShellItem[];
|
|
362
|
+
/** Benachrichtigungs-Glocke mit optionalem Zähler. */
|
|
363
|
+
notifications?: boolean;
|
|
364
|
+
notificationsCount?: ReactNode;
|
|
365
|
+
onNotificationsClick?: () => void;
|
|
366
|
+
/** Produkt-Wechsler (Grid-Icon). */
|
|
367
|
+
productSwitch?: boolean;
|
|
368
|
+
onProductSwitchClick?: () => void;
|
|
369
|
+
/** User-/Account-Slot ganz rechts (Avatar). */
|
|
370
|
+
user?: ReactNode;
|
|
371
|
+
onProfileClick?: () => void;
|
|
372
|
+
/** Slot ganz am Anfang der Bar (vor dem Menü-Toggle). */
|
|
373
|
+
startButton?: ReactNode;
|
|
374
|
+
/** Seitennavigation — typischerweise ein `<Sidebar/>` (ohne eigenes `glass`). */
|
|
375
|
+
sidebar?: ReactNode;
|
|
376
|
+
sidebarCollapsed?: boolean;
|
|
377
|
+
defaultSidebarCollapsed?: boolean;
|
|
378
|
+
onSidebarCollapsedChange?: (collapsed: boolean) => void;
|
|
379
|
+
/** „Liquid Glass"-Optik auf Shell-Bar + Sidebar (Default: true). */
|
|
380
|
+
glass?: boolean;
|
|
381
|
+
toggleLabel?: string;
|
|
382
|
+
children?: ReactNode;
|
|
383
|
+
className?: string;
|
|
384
|
+
}
|
|
385
|
+
/**
|
|
386
|
+
* AppShell — Apple-orientierte App-Hülle mit voller ShellBar-Funktion
|
|
387
|
+
* (vgl. SAP UI5 ShellBar): Logo, Titel + Untertitel + Titel-Dropdown, Suche
|
|
388
|
+
* (auf Mobile kollabierbar), Aktions-Items mit Overflow, Benachrichtigungen,
|
|
389
|
+
* Produkt-Wechsler, Profil — plus Sidebar (Off-canvas auf Mobile) und Content.
|
|
390
|
+
*
|
|
391
|
+
* Reine Optik/Layout/Komposition; Verhalten von Menüs/Overlays kommt aus den
|
|
392
|
+
* React-Aria-Primitiven (`Menu`). Glas (Default) liegt auf Shell-Bar + Sidebar.
|
|
393
|
+
* Responsives Verhalten über CSS-Breakpoints (Phone ≤767, Tablet ≤1024).
|
|
394
|
+
*/
|
|
395
|
+
declare function AppShell({ title, subtitle, logo, onLogoClick, menuItems, onMenuItemClick, search, actions, items, notifications, notificationsCount, onNotificationsClick, productSwitch, onProductSwitchClick, user, onProfileClick, startButton, sidebar, sidebarCollapsed, defaultSidebarCollapsed, onSidebarCollapsedChange, glass, toggleLabel, children, className, }: AppShellProps): react.JSX.Element;
|
|
396
|
+
|
|
397
|
+
type LaunchpadSpan = 1 | 2 | 3 | 4;
|
|
398
|
+
type Trend = "up" | "down" | "flat";
|
|
399
|
+
type Tone = "positive" | "critical" | "negative";
|
|
400
|
+
interface BaseCard {
|
|
401
|
+
id: string;
|
|
402
|
+
span?: LaunchpadSpan;
|
|
403
|
+
}
|
|
404
|
+
interface LpNavCard extends BaseCard {
|
|
405
|
+
kind: "nav";
|
|
406
|
+
title: ReactNode;
|
|
407
|
+
icon?: ReactNode;
|
|
408
|
+
description?: ReactNode;
|
|
409
|
+
badge?: ReactNode;
|
|
410
|
+
onPress?: () => void;
|
|
411
|
+
}
|
|
412
|
+
interface LpKpiCard extends BaseCard {
|
|
413
|
+
kind: "kpi";
|
|
414
|
+
title: ReactNode;
|
|
415
|
+
value: ReactNode;
|
|
416
|
+
delta?: ReactNode;
|
|
417
|
+
trend?: Trend;
|
|
418
|
+
tone?: Tone;
|
|
419
|
+
icon?: ReactNode;
|
|
420
|
+
accent?: boolean;
|
|
421
|
+
onPress?: () => void;
|
|
422
|
+
}
|
|
423
|
+
interface LpTrendCard extends BaseCard {
|
|
424
|
+
kind: "trend";
|
|
425
|
+
title: ReactNode;
|
|
426
|
+
value?: ReactNode;
|
|
427
|
+
delta?: ReactNode;
|
|
428
|
+
trend?: Trend;
|
|
429
|
+
data: number[];
|
|
430
|
+
/** Voll-Visualisierung im Drill-down-Popup (Default: großer AreaChart). */
|
|
431
|
+
detail?: ReactNode;
|
|
432
|
+
}
|
|
433
|
+
interface LpListRowModel {
|
|
434
|
+
id: string;
|
|
435
|
+
title: ReactNode;
|
|
436
|
+
subtitle?: ReactNode;
|
|
437
|
+
leading?: ReactNode;
|
|
438
|
+
trailing?: ReactNode;
|
|
439
|
+
onPress?: () => void;
|
|
440
|
+
}
|
|
441
|
+
interface LpListCard extends BaseCard {
|
|
442
|
+
kind: "list";
|
|
443
|
+
title: ReactNode;
|
|
444
|
+
icon?: ReactNode;
|
|
445
|
+
count?: ReactNode;
|
|
446
|
+
rows: LpListRowModel[];
|
|
447
|
+
/** Max. sichtbare Zeilen (Rest im Popup). Default 4. */
|
|
448
|
+
maxRows?: number;
|
|
449
|
+
onShowAll?: () => void;
|
|
450
|
+
detail?: ReactNode;
|
|
451
|
+
}
|
|
452
|
+
interface LpCustomCard extends BaseCard {
|
|
453
|
+
kind: "custom";
|
|
454
|
+
title?: ReactNode;
|
|
455
|
+
icon?: ReactNode;
|
|
456
|
+
render: () => ReactNode;
|
|
457
|
+
detail?: ReactNode;
|
|
458
|
+
}
|
|
459
|
+
type LaunchpadCard = LpNavCard | LpKpiCard | LpTrendCard | LpListCard | LpCustomCard;
|
|
460
|
+
interface LaunchpadSection {
|
|
461
|
+
id: string;
|
|
462
|
+
title?: ReactNode;
|
|
463
|
+
subtitle?: ReactNode;
|
|
464
|
+
icon?: ReactNode;
|
|
465
|
+
cards: LaunchpadCard[];
|
|
466
|
+
}
|
|
467
|
+
interface LaunchpadProps {
|
|
468
|
+
sections: LaunchpadSection[];
|
|
469
|
+
/** Aktiviert Drag-&-Drop-Reorder (react-aria, Tastatur + Pointer). */
|
|
470
|
+
editable?: boolean;
|
|
471
|
+
onReorder?: (sectionId: string, orderedCardIds: string[]) => void;
|
|
472
|
+
className?: string;
|
|
473
|
+
}
|
|
474
|
+
/**
|
|
475
|
+
* Launchpad — komponiert Sections aus polymorphen Cards (`kind`).
|
|
476
|
+
* `editable` schaltet Drag-Reorder frei; Cards mit `detail`/`trend`
|
|
477
|
+
* öffnen ein Drill-down-Popup mit der Voll-Visualisierung.
|
|
478
|
+
*/
|
|
479
|
+
declare function Launchpad({ sections, editable, onReorder, className }: LaunchpadProps): react.JSX.Element;
|
|
480
|
+
|
|
481
|
+
/** Ein normalisierter (x,y)-Punkt im Koordinatenraum des viewBox. */
|
|
482
|
+
interface Pt {
|
|
483
|
+
x: number;
|
|
484
|
+
y: number;
|
|
485
|
+
}
|
|
486
|
+
/**
|
|
487
|
+
* Catmull-Rom → kubische Bézier-Glättung.
|
|
488
|
+
* Erzeugt ein weiches `d`-Pfad-Fragment (ohne führendes `M`) durch alle Punkte.
|
|
489
|
+
* Bei < 2 Punkten bleibt der Pfad leer; bei genau 2 Punkten eine gerade Linie.
|
|
490
|
+
*/
|
|
491
|
+
declare function smoothPath(points: Pt[], tension?: number): string;
|
|
492
|
+
interface SparklineProps {
|
|
493
|
+
data: number[];
|
|
494
|
+
/** viewBox-Breite (interne Einheiten); skaliert responsiv. */
|
|
495
|
+
width?: number;
|
|
496
|
+
/** viewBox-Höhe (interne Einheiten). */
|
|
497
|
+
height?: number;
|
|
498
|
+
/** Linienfarbe; Default --prn-chart-1. */
|
|
499
|
+
color?: string;
|
|
500
|
+
className?: string;
|
|
501
|
+
}
|
|
502
|
+
/** Kompakte, geglättete Trendlinie ohne Achsen — für KPI-Kacheln. */
|
|
503
|
+
declare function Sparkline({ data, width, height, color, className }: SparklineProps): react.JSX.Element;
|
|
504
|
+
interface AreaChartProps {
|
|
505
|
+
/** Entweder reine Werte (gleichmäßig verteilt) oder explizite (x,y)-Punkte. */
|
|
506
|
+
data: number[] | Pt[];
|
|
507
|
+
width?: number;
|
|
508
|
+
height?: number;
|
|
509
|
+
color?: string;
|
|
510
|
+
/** Achsen + horizontale Gridlinien anzeigen. */
|
|
511
|
+
showAxes?: boolean;
|
|
512
|
+
className?: string;
|
|
513
|
+
}
|
|
514
|
+
/** Flächenchart mit Gradient-Füllung unter geglätteter Linie, optionale Achsen/Grid. */
|
|
515
|
+
declare function AreaChart({ data, width, height, color, showAxes, className }: AreaChartProps): react.JSX.Element;
|
|
516
|
+
interface BarDatum {
|
|
517
|
+
label: string;
|
|
518
|
+
value: number;
|
|
519
|
+
}
|
|
520
|
+
interface BarChartProps {
|
|
521
|
+
data: BarDatum[];
|
|
522
|
+
width?: number;
|
|
523
|
+
height?: number;
|
|
524
|
+
color?: string;
|
|
525
|
+
/** x-Achsenbeschriftung anzeigen. */
|
|
526
|
+
showLabels?: boolean;
|
|
527
|
+
className?: string;
|
|
528
|
+
}
|
|
529
|
+
/** Vertikale Balken mit gerundeten Köpfen, optionale x-Labels. */
|
|
530
|
+
declare function BarChart({ data, width, height, color, showLabels, className }: BarChartProps): react.JSX.Element;
|
|
531
|
+
interface DonutSegment {
|
|
532
|
+
label: string;
|
|
533
|
+
value: number;
|
|
534
|
+
color?: string;
|
|
535
|
+
}
|
|
536
|
+
interface DonutChartProps {
|
|
537
|
+
segments: DonutSegment[];
|
|
538
|
+
/** Text in der Ringmitte (z. B. Summe). */
|
|
539
|
+
centerLabel?: ReactNode;
|
|
540
|
+
/** Kantenlänge des SVG (interne Einheiten). */
|
|
541
|
+
size?: number;
|
|
542
|
+
/** Ringdicke relativ zum Radius (0..1). */
|
|
543
|
+
thickness?: number;
|
|
544
|
+
/** Legende mit Label + Wert anzeigen. */
|
|
545
|
+
showLegend?: boolean;
|
|
546
|
+
className?: string;
|
|
547
|
+
}
|
|
548
|
+
/** Ring-Diagramm aus SVG-Arcs mit zentralem Label und Legende. */
|
|
549
|
+
declare function DonutChart({ segments, centerLabel, size, thickness, showLegend, className, }: DonutChartProps): react.JSX.Element;
|
|
550
|
+
interface ChartEmptyProps {
|
|
551
|
+
/** Hinweistext im Leerzustand. */
|
|
552
|
+
message?: string;
|
|
553
|
+
/** Kompakte Variante (z. B. für Sparkline-Slot). */
|
|
554
|
+
compact?: boolean;
|
|
555
|
+
className?: string;
|
|
556
|
+
}
|
|
557
|
+
/** Leerzustand, wenn keine Datenpunkte vorliegen. */
|
|
558
|
+
declare function ChartEmpty({ message, compact, className }: ChartEmptyProps): react.JSX.Element;
|
|
559
|
+
|
|
560
|
+
interface ColMeta {
|
|
561
|
+
align?: "start" | "end";
|
|
562
|
+
vAlign?: "top" | "middle" | "bottom";
|
|
563
|
+
width?: string;
|
|
564
|
+
minWidth?: number;
|
|
565
|
+
maxWidth?: number;
|
|
566
|
+
isSelect?: boolean;
|
|
567
|
+
isTree?: boolean;
|
|
568
|
+
headerTooltip?: string;
|
|
569
|
+
headerLabel?: string;
|
|
570
|
+
cellLabel?: string;
|
|
571
|
+
responsivePopIn?: boolean;
|
|
572
|
+
responsiveMinWidth?: number;
|
|
573
|
+
popinDisplay?: "block" | "inline";
|
|
574
|
+
autoResizable?: boolean;
|
|
575
|
+
/** Custom-Filter-Render-Slot (per-Spalte). */
|
|
576
|
+
renderFilter?: (info: {
|
|
577
|
+
value: string;
|
|
578
|
+
setValue: (v: string | undefined) => void;
|
|
579
|
+
}) => ReactNode;
|
|
580
|
+
/** Custom-Header-Popover-Inhalt (per-Spalte). */
|
|
581
|
+
renderHeaderPopover?: () => ReactNode;
|
|
582
|
+
}
|
|
583
|
+
declare module "@tanstack/react-table" {
|
|
584
|
+
interface ColumnMeta<TData extends RowData, TValue> extends ColMeta {
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
type AggregateType = "sum" | "count" | "avg" | "min" | "max" | "minMax" | "median" | "unique" | "uniqueCount";
|
|
588
|
+
type SortType = "alphanumeric" | "basic" | "datetime";
|
|
589
|
+
type ColumnFilterType = "text" | "exactText" | "exactTextCase" | "equals";
|
|
590
|
+
interface AnalyticalColumn<T> {
|
|
591
|
+
/** Stabile ID. Default: `accessorKey` falls gesetzt. */
|
|
592
|
+
id?: string;
|
|
593
|
+
/** Spaltenüberschrift. */
|
|
594
|
+
header: ReactNode;
|
|
595
|
+
/** Feldname für den Standard-Wert (typsicher gegen T). Unterstützt nested paths "info.hobby". */
|
|
596
|
+
accessorKey?: (keyof T & string) | string;
|
|
597
|
+
/** Eigener Wert-Resolver (überschreibt accessorKey für die Anzeige). */
|
|
598
|
+
accessor?: (row: T) => unknown;
|
|
599
|
+
/** Eigenes Zell-Rendering. */
|
|
600
|
+
cellRender?: (row: T) => ReactNode;
|
|
601
|
+
/** Feste/Initial-Breite, z. B. `120px`, `1fr`, `minmax(120px, 1fr)`. Default `1fr`. */
|
|
602
|
+
width?: string;
|
|
603
|
+
/** Mindestbreite in px (für Resizing/minmax). */
|
|
604
|
+
minWidth?: number;
|
|
605
|
+
/** Maximalbreite in px. */
|
|
606
|
+
maxWidth?: number;
|
|
607
|
+
/** Ausrichtung. `end` aktiviert tabular-nums (für Zahlen). */
|
|
608
|
+
align?: "start" | "end";
|
|
609
|
+
/** Vertikale Ausrichtung der Zelle. */
|
|
610
|
+
vAlign?: "top" | "middle" | "bottom";
|
|
611
|
+
/** Sortierung erlauben (Default true). */
|
|
612
|
+
sortable?: boolean;
|
|
613
|
+
/** Sortierung pro Spalte deaktivieren (SAP-Alias zu sortable:false). */
|
|
614
|
+
disableSortBy?: boolean;
|
|
615
|
+
/** Sortier-Typ. */
|
|
616
|
+
sortType?: SortType;
|
|
617
|
+
/** Bei erstem Klick absteigend statt aufsteigend sortieren (B2). */
|
|
618
|
+
sortDescFirst?: boolean;
|
|
619
|
+
/** Sortier-Richtung invertieren (asc↔desc), z. B. für Rang/Score (B2). */
|
|
620
|
+
sortInverted?: boolean;
|
|
621
|
+
/** Filterung pro Spalte erlauben (Default: globales `filterable`). */
|
|
622
|
+
filterable?: boolean;
|
|
623
|
+
/** Filterung pro Spalte deaktivieren. */
|
|
624
|
+
disableFilters?: boolean;
|
|
625
|
+
/** Spalte aus dem globalen Filter ausnehmen (B3). */
|
|
626
|
+
disableGlobalFilter?: boolean;
|
|
627
|
+
/** Filter-Vergleichsfunktion. Default "text". */
|
|
628
|
+
filter?: ColumnFilterType;
|
|
629
|
+
/** Eigener Filter-Render-Slot im Header-Popover (überschreibt das TextField). */
|
|
630
|
+
Filter?: (info: {
|
|
631
|
+
value: string;
|
|
632
|
+
setValue: (v: string | undefined) => void;
|
|
633
|
+
}) => ReactNode;
|
|
634
|
+
/** Freier Custom-Popover-Inhalt am Spaltenkopf (B1.5). */
|
|
635
|
+
Popover?: () => ReactNode;
|
|
636
|
+
/** Spalte darf gruppiert werden. */
|
|
637
|
+
groupable?: boolean;
|
|
638
|
+
/** Resizing pro Spalte deaktivieren. */
|
|
639
|
+
disableResizing?: boolean;
|
|
640
|
+
/** Doppelklick auf den Resizer passt die Breite an den Inhalt an (B6). */
|
|
641
|
+
autoResizable?: boolean;
|
|
642
|
+
/** Drag&Drop-Reorder pro Spalte deaktivieren. */
|
|
643
|
+
disableDragAndDrop?: boolean;
|
|
644
|
+
/** Aggregation je Gruppe für diese Spalte. */
|
|
645
|
+
aggregate?: AggregateType | ((values: unknown[], rows: T[]) => unknown);
|
|
646
|
+
/** Vorberechnung des Aggregat-Werts vor der Aggregation (B4). */
|
|
647
|
+
aggregateValue?: (row: T) => unknown;
|
|
648
|
+
/** Eigenes Rendering des Aggregat-Werts. */
|
|
649
|
+
aggregatedCellRender?: (info: {
|
|
650
|
+
value: unknown;
|
|
651
|
+
rows: T[];
|
|
652
|
+
}) => ReactNode;
|
|
653
|
+
/** Darf ausgeblendet werden (Default true). */
|
|
654
|
+
canHide?: boolean;
|
|
655
|
+
/** Darf gepinnt werden (Default false). */
|
|
656
|
+
canPin?: boolean;
|
|
657
|
+
/** Initiale Pin-Seite. */
|
|
658
|
+
defaultPinned?: "left" | "right";
|
|
659
|
+
/** Tooltip am Spaltenkopf. */
|
|
660
|
+
headerTooltip?: string;
|
|
661
|
+
/** Barrierefreies Label für die Spalte (überschreibt header für a11y). */
|
|
662
|
+
headerLabel?: string;
|
|
663
|
+
/** Barrierefreies Label pro Zelle. */
|
|
664
|
+
cellLabel?: string;
|
|
665
|
+
/** Klappt diese Spalte in die erste Zelle, wenn die Tabelle schmal wird. */
|
|
666
|
+
responsivePopIn?: boolean;
|
|
667
|
+
/** Tabellenbreite (px), unter der diese Spalte zur Pop-In wird. */
|
|
668
|
+
responsiveMinWidth?: number;
|
|
669
|
+
/** Anzeigeform im Pop-In. */
|
|
670
|
+
popinDisplay?: "block" | "inline";
|
|
671
|
+
}
|
|
672
|
+
type SelectionMode = "none" | "single" | "multiple";
|
|
673
|
+
type SelectionBehavior = "row" | "rowOnly" | "rowSelector";
|
|
674
|
+
type VisibleRowCountMode = "fixed" | "auto" | "autoWithEmptyRows";
|
|
675
|
+
type ValueState = "none" | "information" | "positive" | "critical" | "negative";
|
|
676
|
+
type NoDataReason = "empty" | "filtered";
|
|
677
|
+
type SubComponentsBehavior = "expandable" | "visible";
|
|
678
|
+
type ScaleWidthMode = "default" | "smart" | "grow";
|
|
679
|
+
interface AnalyticalTableProps<T> {
|
|
680
|
+
/** Datenzeilen. */
|
|
681
|
+
data: T[];
|
|
682
|
+
/** Spalten-Beschreibung. */
|
|
683
|
+
columns: AnalyticalColumn<T>[];
|
|
684
|
+
/** Eindeutige Zeilen-ID (für Selektion/Keys). Default: Array-Index. */
|
|
685
|
+
getRowId?: (row: T, index: number) => string;
|
|
686
|
+
/** Selektionsmodus. */
|
|
687
|
+
selectionMode?: SelectionMode;
|
|
688
|
+
/** Selektionsverhalten: row = ganze Zeile selektiert + onRowClick; rowSelector = nur über Checkbox. */
|
|
689
|
+
selectionBehavior?: SelectionBehavior;
|
|
690
|
+
/** Alias auf selectionMode="multiple" (rückwärtskompatibel). */
|
|
691
|
+
selectable?: boolean;
|
|
692
|
+
/** Kontrollierte Auswahl (Set ausgewählter Row-IDs). */
|
|
693
|
+
selectedKeys?: Set<string>;
|
|
694
|
+
/** Callback bei Auswahländerung. */
|
|
695
|
+
onSelectionChange?: (keys: Set<string>) => void;
|
|
696
|
+
/** SAP-Style Selektions-Event. */
|
|
697
|
+
onRowSelect?: (info: {
|
|
698
|
+
row: T;
|
|
699
|
+
selected: boolean;
|
|
700
|
+
selectedKeys: Set<string>;
|
|
701
|
+
}) => void;
|
|
702
|
+
/** Aktion bei Zeilen-Aktivierung (Klick/Enter/Space) — rückwärtskompatibel. */
|
|
703
|
+
onRowAction?: (row: T) => void;
|
|
704
|
+
/** Klick-Event auf eine Zeile (mit Event-Objekt). */
|
|
705
|
+
onRowClick?: (info: {
|
|
706
|
+
row: T;
|
|
707
|
+
event: MouseEvent;
|
|
708
|
+
}) => void;
|
|
709
|
+
/** Rechtsklick-Kontextmenü auf eine Zeile. */
|
|
710
|
+
onRowContextMenu?: (info: {
|
|
711
|
+
row: T;
|
|
712
|
+
event: MouseEvent;
|
|
713
|
+
}) => void;
|
|
714
|
+
/** Globales Sortier-Flag (Default true für Spalten ohne explizites sortable). */
|
|
715
|
+
sortable?: boolean;
|
|
716
|
+
/** Kontrollierte Sortierung. */
|
|
717
|
+
sorting?: {
|
|
718
|
+
id: string;
|
|
719
|
+
desc: boolean;
|
|
720
|
+
}[];
|
|
721
|
+
/** Anfangs-Sortierung (unkontrolliert). */
|
|
722
|
+
defaultSorting?: {
|
|
723
|
+
id: string;
|
|
724
|
+
desc: boolean;
|
|
725
|
+
}[];
|
|
726
|
+
/** Callback bei Sortier-Änderung (controlled-Pattern). */
|
|
727
|
+
onSortingChange?: (sorting: {
|
|
728
|
+
id: string;
|
|
729
|
+
desc: boolean;
|
|
730
|
+
}[]) => void;
|
|
731
|
+
/** SAP-Style Sort-Event. */
|
|
732
|
+
onSort?: (sorting: {
|
|
733
|
+
id: string;
|
|
734
|
+
desc: boolean;
|
|
735
|
+
}[]) => void;
|
|
736
|
+
/** Multi-Sort via Shift-Klick. */
|
|
737
|
+
enableMultiSort?: boolean;
|
|
738
|
+
/** Spaltenfilter global aktivieren (Header-Popover). */
|
|
739
|
+
filterable?: boolean;
|
|
740
|
+
/** Globaler Filter über alle Zeilen. */
|
|
741
|
+
globalFilterValue?: string;
|
|
742
|
+
/** Callback bei Filter-Änderung (Spaltenfilter). */
|
|
743
|
+
onFilter?: (filters: {
|
|
744
|
+
id: string;
|
|
745
|
+
value: string;
|
|
746
|
+
}[]) => void;
|
|
747
|
+
/** Ladezustand. */
|
|
748
|
+
loading?: boolean;
|
|
749
|
+
/** Alias auf loading (rückwärtskompatibel). */
|
|
750
|
+
isLoading?: boolean;
|
|
751
|
+
/** Verzögerung in ms, bevor der Ladeindikator erscheint. */
|
|
752
|
+
loadingDelay?: number;
|
|
753
|
+
/** BusyIndicator statt Skeleton anzeigen. */
|
|
754
|
+
alwaysShowBusyIndicator?: boolean;
|
|
755
|
+
/** Halbtransparentes Overlay über vorhandenen Daten. */
|
|
756
|
+
showOverlay?: boolean;
|
|
757
|
+
/** Anzahl Skeleton-Zeilen (Default 8). */
|
|
758
|
+
skeletonRows?: number;
|
|
759
|
+
/** Leerzustands-Titel (rückwärtskompatibel). */
|
|
760
|
+
emptyTitle?: ReactNode;
|
|
761
|
+
emptyDescription?: ReactNode;
|
|
762
|
+
/** Text im Leerzustand (SAP `noDataText`). */
|
|
763
|
+
noDataText?: ReactNode;
|
|
764
|
+
/** Eigene Leerzustands-Komponente. */
|
|
765
|
+
NoDataComponent?: (info: {
|
|
766
|
+
reason: NoDataReason;
|
|
767
|
+
}) => ReactNode;
|
|
768
|
+
/** Geschätzte Zeilenhöhe für die Virtualisierung (Default 44). */
|
|
769
|
+
rowHeight?: number;
|
|
770
|
+
/** Höhe der Kopfzeile (px). */
|
|
771
|
+
headerRowHeight?: number;
|
|
772
|
+
/** Anzahl sichtbarer Zeilen → bestimmt die Tabellenhöhe. */
|
|
773
|
+
visibleRows?: number;
|
|
774
|
+
/** Mindestzeilenzahl (Leerzeilen-Auffüllung). */
|
|
775
|
+
minRows?: number;
|
|
776
|
+
/** Höhenmodus. */
|
|
777
|
+
visibleRowCountMode?: VisibleRowCountMode;
|
|
778
|
+
/** Overscan der Virtualisierung (Default 10). */
|
|
779
|
+
overscanCount?: number;
|
|
780
|
+
/** Scroll-Event des Viewports. */
|
|
781
|
+
onTableScroll?: (info: {
|
|
782
|
+
scrollTop: number;
|
|
783
|
+
scrollLeft: number;
|
|
784
|
+
}) => void;
|
|
785
|
+
/** Max. Höhe des Scroll-Viewports (Fallback, wenn keine visibleRows). Default `480px`. */
|
|
786
|
+
maxHeight?: number | string;
|
|
787
|
+
/** Aktiviert hierarchische Zeilen. */
|
|
788
|
+
isTreeTable?: boolean;
|
|
789
|
+
/** Feld, das Kindzeilen enthält (Default "subRows"). */
|
|
790
|
+
subRowsKey?: string;
|
|
791
|
+
/** Callback bei Expand/Collapse einer Zeile. */
|
|
792
|
+
onRowExpandChange?: (info: {
|
|
793
|
+
row: T;
|
|
794
|
+
expanded: boolean;
|
|
795
|
+
}) => void;
|
|
796
|
+
/** Aktiviert Nachladen beim Scrollen. */
|
|
797
|
+
infiniteScroll?: boolean;
|
|
798
|
+
/** Abstand (px) vom Ende, ab dem onLoadMore feuert (Default 20). */
|
|
799
|
+
infiniteScrollThreshold?: number;
|
|
800
|
+
/** Callback zum Nachladen. */
|
|
801
|
+
onLoadMore?: () => void;
|
|
802
|
+
/** Zebra-Streifen. */
|
|
803
|
+
alternateRowColor?: boolean;
|
|
804
|
+
/** Farbband links je Zeile (ValueState). */
|
|
805
|
+
withRowHighlight?: boolean;
|
|
806
|
+
/** Feld, das die ValueState pro Zeile liefert. */
|
|
807
|
+
highlightField?: (row: T) => ValueState;
|
|
808
|
+
/** Navigations-Pfeil-Spalte aktivieren. */
|
|
809
|
+
withNavigationHighlight?: boolean;
|
|
810
|
+
/** Markiert die navigierte Zeile (true = Pfeil hervorgehoben). */
|
|
811
|
+
markNavigatedRow?: (row: T) => boolean;
|
|
812
|
+
/** Aktuelle Tabellenbreite (px) für Pop-In-Berechnung (Test-/SSR-Hilfe). */
|
|
813
|
+
tableWidth?: number;
|
|
814
|
+
/** Sichtbarer Tabellen-Titel (auch accessible name). */
|
|
815
|
+
header?: ReactNode;
|
|
816
|
+
/** Bereich über der Tabelle (Toolbar/FilterBar). */
|
|
817
|
+
extension?: ReactNode;
|
|
818
|
+
/** „Liquid Glass"-Optik auf der Tabellen-Toolbar (NICHT auf den dichten Zeilen). */
|
|
819
|
+
glass?: boolean;
|
|
820
|
+
/** Barrierefreies Label der Tabelle. */
|
|
821
|
+
accessibleName?: string;
|
|
822
|
+
/** ID eines Elements als aria-labelledby. */
|
|
823
|
+
accessibleNameRef?: string;
|
|
824
|
+
className?: string;
|
|
825
|
+
/** Barrierefreies Label (rückwärtskompatibel). */
|
|
826
|
+
"aria-label"?: string;
|
|
827
|
+
/** Column-Resizing global aktivieren. */
|
|
828
|
+
enableColumnResizing?: boolean;
|
|
829
|
+
/** Manuell gesetzte Spaltenbreiten bei Container-Resize behalten (B6). */
|
|
830
|
+
retainColumnWidth?: boolean;
|
|
831
|
+
/** Breiten-Skalierungsmodus (B6). */
|
|
832
|
+
scaleWidthMode?: ScaleWidthMode;
|
|
833
|
+
/** Callback bei Auto-Resize (Doppelklick auf Resizer einer `autoResizable`-Spalte). */
|
|
834
|
+
onAutoResize?: (info: {
|
|
835
|
+
columnId: string;
|
|
836
|
+
width: number;
|
|
837
|
+
}) => void;
|
|
838
|
+
/** Drag&Drop-Reorder aktivieren. */
|
|
839
|
+
enableColumnReorder?: boolean;
|
|
840
|
+
/** Callback bei Reorder per Drag&Drop. */
|
|
841
|
+
onColumnsReorder?: (order: string[]) => void;
|
|
842
|
+
/** Aktiviert Gruppierung + Group-Bar. */
|
|
843
|
+
enableGrouping?: boolean;
|
|
844
|
+
/** Kontrollierte Gruppierung (geordnete Spalten-IDs). */
|
|
845
|
+
grouping?: string[];
|
|
846
|
+
/** Unkontrollierte Anfangs-Gruppierung. */
|
|
847
|
+
defaultGrouping?: string[];
|
|
848
|
+
/** Callback bei Änderung der Gruppierung. */
|
|
849
|
+
onGroupingChange?: (grouping: string[]) => void;
|
|
850
|
+
/** SAP-Style Group-Event. */
|
|
851
|
+
onGroup?: (grouping: string[]) => void;
|
|
852
|
+
/** Aktiviert Spalten-Personalisierung (⚙-Menü: Sichtbarkeit/Reihenfolge/Pinning). */
|
|
853
|
+
enablePersonalization?: boolean;
|
|
854
|
+
/** Kontrollierte Spaltensichtbarkeit. */
|
|
855
|
+
columnVisibility?: Record<string, boolean>;
|
|
856
|
+
/** Unkontrollierte Anfangs-Sichtbarkeit. */
|
|
857
|
+
defaultColumnVisibility?: Record<string, boolean>;
|
|
858
|
+
/** Callback bei Sichtbarkeitsänderung. */
|
|
859
|
+
onColumnVisibilityChange?: (v: Record<string, boolean>) => void;
|
|
860
|
+
/** Kontrollierte Spaltenreihenfolge. */
|
|
861
|
+
columnOrder?: string[];
|
|
862
|
+
/** Unkontrollierte Anfangs-Reihenfolge. */
|
|
863
|
+
defaultColumnOrder?: string[];
|
|
864
|
+
/** Callback bei Reihenfolgeänderung. */
|
|
865
|
+
onColumnOrderChange?: (o: string[]) => void;
|
|
866
|
+
/** Kontrolliertes Spalten-Pinning. */
|
|
867
|
+
columnPinning?: {
|
|
868
|
+
left?: string[];
|
|
869
|
+
right?: string[];
|
|
870
|
+
};
|
|
871
|
+
/** Unkontrolliertes Anfangs-Pinning. */
|
|
872
|
+
defaultColumnPinning?: {
|
|
873
|
+
left?: string[];
|
|
874
|
+
right?: string[];
|
|
875
|
+
};
|
|
876
|
+
/** Callback bei Pinning-Änderung. */
|
|
877
|
+
onColumnPinningChange?: (p: {
|
|
878
|
+
left?: string[];
|
|
879
|
+
right?: string[];
|
|
880
|
+
}) => void;
|
|
881
|
+
/** Rendert eine Unterkomponente unter einer Zeile. */
|
|
882
|
+
renderRowSubComponent?: (info: {
|
|
883
|
+
row: T;
|
|
884
|
+
}) => ReactNode;
|
|
885
|
+
/** Verhalten der Unterkomponente: ausklappbar (Chevron) oder immer sichtbar. */
|
|
886
|
+
subComponentsBehavior?: SubComponentsBehavior;
|
|
887
|
+
/** Wird in useReactTable hineingemerged (Escape-Hatch). */
|
|
888
|
+
reactTableOptions?: Partial<TableOptions<T>>;
|
|
889
|
+
/** Liefert die TanStack-Tabellen-Instanz nach oben. */
|
|
890
|
+
onTableReady?: (table: Table$1<T>) => void;
|
|
891
|
+
}
|
|
892
|
+
declare function AnalyticalTable<T>(props: AnalyticalTableProps<T>): react.JSX.Element;
|
|
893
|
+
|
|
894
|
+
interface FilterFieldProps {
|
|
895
|
+
/** Sichtbares Label über dem Control. */
|
|
896
|
+
label?: ReactNode;
|
|
897
|
+
/** Das Eingabe-Control (Select, TextField, …). */
|
|
898
|
+
children: ReactNode;
|
|
899
|
+
className?: string;
|
|
900
|
+
}
|
|
901
|
+
declare function FilterField({ label, children, className }: FilterFieldProps): react.JSX.Element;
|
|
902
|
+
interface ActiveFilter {
|
|
903
|
+
/** Stabile ID des Filters (z. B. Feldname). */
|
|
904
|
+
id: string;
|
|
905
|
+
/** Label, z. B. "Sparte". */
|
|
906
|
+
label?: ReactNode;
|
|
907
|
+
/** Aktiver Wert, z. B. "Strom". */
|
|
908
|
+
value: ReactNode;
|
|
909
|
+
}
|
|
910
|
+
interface FilterBarProps {
|
|
911
|
+
/** Direkt sichtbare Filter-Felder (`FilterField`). */
|
|
912
|
+
children: ReactNode;
|
|
913
|
+
/** In den "Mehr Filter"-Überlauf ausgelagerte Felder. */
|
|
914
|
+
moreFields?: ReactNode;
|
|
915
|
+
/** Beschriftung des Überlauf-Buttons. */
|
|
916
|
+
moreLabel?: ReactNode;
|
|
917
|
+
/** Aktuell aktive Filter → werden als Chips gezeigt. */
|
|
918
|
+
activeFilters?: ActiveFilter[];
|
|
919
|
+
/** Einzelnen Filter entfernen (X am Chip). */
|
|
920
|
+
onRemoveFilter?: (id: string) => void;
|
|
921
|
+
/** Alle Filter zurücksetzen ("Zurücksetzen"-Aktion, nur bei aktiven Filtern). */
|
|
922
|
+
onClearAll?: () => void;
|
|
923
|
+
/** Zusätzliche Aktionen rechts (z. B. "Anwenden", Suche). */
|
|
924
|
+
actions?: ReactNode;
|
|
925
|
+
className?: string;
|
|
926
|
+
"aria-label"?: string;
|
|
927
|
+
}
|
|
928
|
+
declare function FilterBar({ children, moreFields, moreLabel, activeFilters, onRemoveFilter, onClearAll, actions, className, "aria-label": ariaLabel, }: FilterBarProps): react.JSX.Element;
|
|
929
|
+
|
|
930
|
+
type StatusTone = "positive" | "critical" | "negative" | "info" | "neutral";
|
|
931
|
+
interface StatusBadge {
|
|
932
|
+
label: ReactNode;
|
|
933
|
+
tone?: StatusTone;
|
|
934
|
+
}
|
|
935
|
+
interface ObjectPageKpi {
|
|
936
|
+
label: ReactNode;
|
|
937
|
+
value: ReactNode;
|
|
938
|
+
/** Färbt den Wert (z. B. positive/negative Kennzahl). */
|
|
939
|
+
tone?: "positive" | "critical" | "negative";
|
|
940
|
+
}
|
|
941
|
+
interface ObjectField {
|
|
942
|
+
label: ReactNode;
|
|
943
|
+
value: ReactNode;
|
|
944
|
+
/** Zahl-Wert → tabular-nums + rechtsbündige Ziffern. */
|
|
945
|
+
numeric?: boolean;
|
|
946
|
+
}
|
|
947
|
+
interface ObjectSection {
|
|
948
|
+
title?: ReactNode;
|
|
949
|
+
fields: ObjectField[];
|
|
950
|
+
}
|
|
951
|
+
type ObjectPageMode = "default" | "iconTabBar";
|
|
952
|
+
/** Heading-Level → aria-level / Tag. */
|
|
953
|
+
type TitleTextLevel = "H1" | "H2" | "H3" | "H4" | "H5" | "H6";
|
|
954
|
+
interface ObjectPageSectionProps {
|
|
955
|
+
/** Eindeutige ID — Anker-Ziel & Selektions-Schlüssel. (Pflicht) */
|
|
956
|
+
id: string;
|
|
957
|
+
/** Sichtbarer Titel der Sektion. (Pflicht) */
|
|
958
|
+
titleText: string;
|
|
959
|
+
children?: ReactNode;
|
|
960
|
+
/** Titel ausblenden (Anchor-Bar nutzt weiterhin titleText). */
|
|
961
|
+
hideTitleText?: boolean;
|
|
962
|
+
/** Titel in Großbuchstaben darstellen. */
|
|
963
|
+
titleTextUppercase?: boolean;
|
|
964
|
+
/** Langen Titel umbrechen statt kürzen. */
|
|
965
|
+
wrapTitleText?: boolean;
|
|
966
|
+
/** Überschriften-Level (H1..H6) → aria-level + Tag. Default H3. */
|
|
967
|
+
titleTextLevel?: TitleTextLevel;
|
|
968
|
+
/** Custom-Header-Inhalt rechts neben dem Titel. */
|
|
969
|
+
header?: ReactNode;
|
|
970
|
+
className?: string;
|
|
971
|
+
}
|
|
972
|
+
/**
|
|
973
|
+
* Top-Level-Informationscontainer. Wird ausschließlich als child der
|
|
974
|
+
* ObjectPage gerendert; standalone ist es ein neutraler Container.
|
|
975
|
+
*/
|
|
976
|
+
declare function ObjectPageSection(props: ObjectPageSectionProps): react.JSX.Element;
|
|
977
|
+
interface ObjectPageSubSectionProps {
|
|
978
|
+
/** Eindeutige ID. (Pflicht) */
|
|
979
|
+
id: string;
|
|
980
|
+
/** Sichtbarer Titel. (Pflicht) */
|
|
981
|
+
titleText: string;
|
|
982
|
+
children?: ReactNode;
|
|
983
|
+
/** Aktionen rechts im SubSection-Kopf. */
|
|
984
|
+
actions?: ReactNode;
|
|
985
|
+
/** Titel ausblenden. */
|
|
986
|
+
hideTitleText?: boolean;
|
|
987
|
+
className?: string;
|
|
988
|
+
}
|
|
989
|
+
/** Zweite Ebene innerhalb einer Section. */
|
|
990
|
+
declare function ObjectPageSubSection(props: ObjectPageSubSectionProps): react.JSX.Element;
|
|
991
|
+
interface ObjectPageAccessibilityAttributes {
|
|
992
|
+
objectPageTopHeader?: {
|
|
993
|
+
role?: string;
|
|
994
|
+
"aria-label"?: string;
|
|
995
|
+
};
|
|
996
|
+
objectPageAnchorBar?: {
|
|
997
|
+
role?: string;
|
|
998
|
+
"aria-label"?: string;
|
|
999
|
+
};
|
|
1000
|
+
objectPageFooterActions?: {
|
|
1001
|
+
role?: string;
|
|
1002
|
+
"aria-label"?: string;
|
|
1003
|
+
};
|
|
1004
|
+
}
|
|
1005
|
+
interface ObjectPageHandle {
|
|
1006
|
+
/** Snappt/entsnappt den Header. Ohne Argument: Toggle. */
|
|
1007
|
+
toggleHeaderArea: (snapped?: boolean) => void;
|
|
1008
|
+
}
|
|
1009
|
+
interface SelectedSectionChangeDetail {
|
|
1010
|
+
selectedSectionIndex: number;
|
|
1011
|
+
selectedSectionId: string;
|
|
1012
|
+
}
|
|
1013
|
+
interface BeforeNavigateDetail {
|
|
1014
|
+
sectionId: string;
|
|
1015
|
+
sectionIndex: number;
|
|
1016
|
+
/** Bricht die Navigation ab. */
|
|
1017
|
+
preventDefault: () => void;
|
|
1018
|
+
}
|
|
1019
|
+
interface ObjectPageProps {
|
|
1020
|
+
title: ReactNode;
|
|
1021
|
+
subtitle?: ReactNode;
|
|
1022
|
+
/** Status-Badge rechts im Kopf. */
|
|
1023
|
+
status?: StatusBadge;
|
|
1024
|
+
/** KPI-Reihe im Title-Bereich. */
|
|
1025
|
+
kpis?: ObjectPageKpi[];
|
|
1026
|
+
/** Aktionen rechts im Kopf (actionsBar). */
|
|
1027
|
+
actions?: ReactNode;
|
|
1028
|
+
/** Breadcrumb-Slot über dem Titel. */
|
|
1029
|
+
breadcrumbs?: ReactNode;
|
|
1030
|
+
/** Frei komponierbarer Kopf-/Unterkopf (überschreibt title/subtitle, wenn gesetzt). */
|
|
1031
|
+
header?: ReactNode;
|
|
1032
|
+
subHeader?: ReactNode;
|
|
1033
|
+
/** Alternative Darstellung im kollabierten (snapped) Zustand. */
|
|
1034
|
+
snappedHeader?: ReactNode;
|
|
1035
|
+
snappedSubHeader?: ReactNode;
|
|
1036
|
+
/** Inhalt nur im expandierten bzw. nur im snapped Zustand. */
|
|
1037
|
+
expandedContent?: ReactNode;
|
|
1038
|
+
snappedContent?: ReactNode;
|
|
1039
|
+
/** Aktionsleiste (Alias zu actions; actions hat Vorrang). */
|
|
1040
|
+
actionsBar?: ReactNode;
|
|
1041
|
+
/** Navigations-Aktionen, responsiv positioniert. */
|
|
1042
|
+
navigationBar?: ReactNode;
|
|
1043
|
+
/** „Liquid Glass"-Optik auf der Title-/Top-Header-Leiste (transluzent + Blur). */
|
|
1044
|
+
glass?: boolean;
|
|
1045
|
+
/** Expandierbarer Header-Content unter dem Title. */
|
|
1046
|
+
headerArea?: ReactNode;
|
|
1047
|
+
/** Header fixiert (nicht kollabierbar beim Scrollen). */
|
|
1048
|
+
headerPinned?: boolean;
|
|
1049
|
+
/** Pin-Button ausblenden. */
|
|
1050
|
+
hidePinButton?: boolean;
|
|
1051
|
+
/** Klick auf Title togglet den Header nicht. */
|
|
1052
|
+
preserveHeaderStateOnClick?: boolean;
|
|
1053
|
+
onToggleHeaderArea?: (visible: boolean) => void;
|
|
1054
|
+
onPinButtonToggle?: (pinned: boolean) => void;
|
|
1055
|
+
/** Bild/Avatar im Kopf — URL-String oder beliebiger Node. */
|
|
1056
|
+
image?: string | ReactNode;
|
|
1057
|
+
/** Bild rund darstellen. */
|
|
1058
|
+
imageShapeCircle?: boolean;
|
|
1059
|
+
/** Schwebende Footer-Aktionsleiste. */
|
|
1060
|
+
footerArea?: ReactNode;
|
|
1061
|
+
/** Ersetzt den gesamten Inhalt (z. B. „nicht ladbar"). */
|
|
1062
|
+
placeholder?: ReactNode;
|
|
1063
|
+
/** `default` = alle Sektionen scrollbar, `iconTabBar` = nur aktive sichtbar. */
|
|
1064
|
+
mode?: ObjectPageMode;
|
|
1065
|
+
/** Controlled aktive Sektion. */
|
|
1066
|
+
selectedSectionId?: string;
|
|
1067
|
+
/** Controlled aktive SubSection (nur Markierung). */
|
|
1068
|
+
selectedSubSectionId?: string;
|
|
1069
|
+
onSelectedSectionChange?: (detail: SelectedSectionChangeDetail) => void;
|
|
1070
|
+
/** Cancelable vor jeder Navigation. */
|
|
1071
|
+
onBeforeNavigate?: (detail: BeforeNavigateDetail) => void;
|
|
1072
|
+
accessibilityAttributes?: ObjectPageAccessibilityAttributes;
|
|
1073
|
+
/** Detail-Sektionen (Legacy-Adapter → ObjectPageSection). */
|
|
1074
|
+
sections?: ObjectSection[];
|
|
1075
|
+
/** Kompositions-children (ObjectPageSection-Elemente) bzw. freier Inhalt. */
|
|
1076
|
+
children?: ReactNode;
|
|
1077
|
+
className?: string;
|
|
1078
|
+
style?: CSSProperties;
|
|
1079
|
+
}
|
|
1080
|
+
declare const ObjectPage: react.ForwardRefExoticComponent<ObjectPageProps & react.RefAttributes<ObjectPageHandle>>;
|
|
1081
|
+
|
|
1082
|
+
interface UseFilterStateOptions<V extends Record<string, unknown>> {
|
|
1083
|
+
/** localStorage-Schlüssel-Suffix (eindeutig pro Tabelle/View). */
|
|
1084
|
+
persistKey: string;
|
|
1085
|
+
/** Startwerte; definieren zugleich die Filter-Keys. */
|
|
1086
|
+
defaultValues: V;
|
|
1087
|
+
/** Labels für die abgeleiteten activeFilters-Chips. */
|
|
1088
|
+
labels?: Partial<Record<keyof V, ReactNode>>;
|
|
1089
|
+
/** Ob ein Wert als „aktiv" zählt. Default: != default und nicht leer. */
|
|
1090
|
+
isActive?: (key: keyof V, value: unknown, defaultValue: unknown) => boolean;
|
|
1091
|
+
}
|
|
1092
|
+
interface UseFilterStateResult<V> {
|
|
1093
|
+
values: V;
|
|
1094
|
+
setValue: <K extends keyof V>(key: K, value: V[K]) => void;
|
|
1095
|
+
setValues: (patch: Partial<V>) => void;
|
|
1096
|
+
reset: () => void;
|
|
1097
|
+
activeFilters: ActiveFilter[];
|
|
1098
|
+
}
|
|
1099
|
+
declare function useFilterState<V extends Record<string, unknown>>(options: UseFilterStateOptions<V>): UseFilterStateResult<V>;
|
|
1100
|
+
|
|
1101
|
+
interface RadioGroupProps extends Omit<RadioGroupProps$1, "className"> {
|
|
1102
|
+
label?: ReactNode;
|
|
1103
|
+
description?: ReactNode;
|
|
1104
|
+
errorMessage?: ReactNode;
|
|
1105
|
+
children: ReactNode;
|
|
1106
|
+
className?: string;
|
|
1107
|
+
}
|
|
1108
|
+
declare function RadioGroup({ label, description, errorMessage, children, className, ...props }: RadioGroupProps): react.JSX.Element;
|
|
1109
|
+
interface RadioProps extends Omit<RadioProps$1, "className"> {
|
|
1110
|
+
children?: ReactNode;
|
|
1111
|
+
className?: string;
|
|
1112
|
+
}
|
|
1113
|
+
declare function Radio({ children, className, ...props }: RadioProps): react.JSX.Element;
|
|
1114
|
+
interface CheckboxGroupProps extends Omit<CheckboxGroupProps$1, "className"> {
|
|
1115
|
+
label?: ReactNode;
|
|
1116
|
+
description?: ReactNode;
|
|
1117
|
+
errorMessage?: ReactNode;
|
|
1118
|
+
children: ReactNode;
|
|
1119
|
+
className?: string;
|
|
1120
|
+
}
|
|
1121
|
+
declare function CheckboxGroup({ label, description, errorMessage, children, className, ...props }: CheckboxGroupProps): react.JSX.Element;
|
|
1122
|
+
|
|
1123
|
+
interface NumberFieldProps extends Omit<NumberFieldProps$1, "className"> {
|
|
1124
|
+
label?: ReactNode;
|
|
1125
|
+
description?: ReactNode;
|
|
1126
|
+
errorMessage?: ReactNode;
|
|
1127
|
+
placeholder?: string;
|
|
1128
|
+
className?: string;
|
|
1129
|
+
}
|
|
1130
|
+
declare function NumberField({ label, description, errorMessage, placeholder, className, ...props }: NumberFieldProps): react.JSX.Element;
|
|
1131
|
+
interface SliderProps extends Omit<SliderProps$1, "className"> {
|
|
1132
|
+
label?: ReactNode;
|
|
1133
|
+
showValue?: boolean;
|
|
1134
|
+
className?: string;
|
|
1135
|
+
}
|
|
1136
|
+
declare function Slider({ label, showValue, className, ...props }: SliderProps): react.JSX.Element;
|
|
1137
|
+
|
|
1138
|
+
interface ComboBoxProps<T extends object> extends Omit<ComboBoxProps$1<T>, "className" | "children"> {
|
|
1139
|
+
label?: ReactNode;
|
|
1140
|
+
placeholder?: string;
|
|
1141
|
+
description?: ReactNode;
|
|
1142
|
+
errorMessage?: ReactNode;
|
|
1143
|
+
children: ReactNode | ((item: T) => ReactNode);
|
|
1144
|
+
className?: string;
|
|
1145
|
+
}
|
|
1146
|
+
declare function ComboBox<T extends object>({ label, placeholder, description, errorMessage, children, className, ...props }: ComboBoxProps<T>): react.JSX.Element;
|
|
1147
|
+
interface ComboBoxItemProps extends Omit<ListBoxItemProps, "className"> {
|
|
1148
|
+
className?: string;
|
|
1149
|
+
}
|
|
1150
|
+
declare function ComboBoxItem({ className, ...props }: ComboBoxItemProps): react.JSX.Element;
|
|
1151
|
+
|
|
1152
|
+
interface FormProps extends Omit<FormProps$1, "className"> {
|
|
1153
|
+
className?: string;
|
|
1154
|
+
}
|
|
1155
|
+
declare function Form({ className, ...props }: FormProps): react.JSX.Element;
|
|
1156
|
+
interface FieldErrorProps extends Omit<FieldErrorProps$1, "className"> {
|
|
1157
|
+
className?: string;
|
|
1158
|
+
}
|
|
1159
|
+
declare function FieldError({ className, ...props }: FieldErrorProps): react.JSX.Element;
|
|
1160
|
+
|
|
1161
|
+
interface ListBoxProps<T extends object> extends Omit<ListBoxProps$1<T>, "className"> {
|
|
1162
|
+
className?: string;
|
|
1163
|
+
}
|
|
1164
|
+
declare function ListBox<T extends object>({ className, ...props }: ListBoxProps<T>): react.JSX.Element;
|
|
1165
|
+
interface ListBoxOptionProps extends Omit<ListBoxItemProps, "className"> {
|
|
1166
|
+
className?: string;
|
|
1167
|
+
}
|
|
1168
|
+
declare function ListBoxOption({ className, ...props }: ListBoxOptionProps): react.JSX.Element;
|
|
1169
|
+
interface GridListProps<T extends object> extends Omit<GridListProps$1<T>, "className"> {
|
|
1170
|
+
className?: string;
|
|
1171
|
+
}
|
|
1172
|
+
declare function GridList<T extends object>({ className, ...props }: GridListProps<T>): react.JSX.Element;
|
|
1173
|
+
interface GridListItemProps extends Omit<GridListItemProps$1, "className"> {
|
|
1174
|
+
className?: string;
|
|
1175
|
+
children?: ReactNode;
|
|
1176
|
+
}
|
|
1177
|
+
declare function GridListItem({ className, children, ...props }: GridListItemProps): react.JSX.Element;
|
|
1178
|
+
interface TagGroupProps<T extends object> extends Omit<TagGroupProps$1, "className" | "children"> {
|
|
1179
|
+
/** Optionales Label über der Chip-Reihe. */
|
|
1180
|
+
label?: ReactNode;
|
|
1181
|
+
/** Tags als statische Children oder via items/renderTag. */
|
|
1182
|
+
children: ReactNode;
|
|
1183
|
+
/** Inhalt, wenn keine Tags vorhanden sind. */
|
|
1184
|
+
renderEmptyState?: TagListProps<T>["renderEmptyState"];
|
|
1185
|
+
/** Dynamische Item-Quelle für die TagList. */
|
|
1186
|
+
items?: TagListProps<T>["items"];
|
|
1187
|
+
className?: string;
|
|
1188
|
+
}
|
|
1189
|
+
declare function TagGroup<T extends object>({ label, children, renderEmptyState, items, className, ...props }: TagGroupProps<T>): react.JSX.Element;
|
|
1190
|
+
interface TagProps extends Omit<TagProps$1, "className"> {
|
|
1191
|
+
children?: ReactNode;
|
|
1192
|
+
className?: string;
|
|
1193
|
+
}
|
|
1194
|
+
declare function Tag({ children, className, textValue, ...props }: TagProps): react.JSX.Element;
|
|
1195
|
+
|
|
1196
|
+
interface BreadcrumbsProps<T extends object> extends Omit<BreadcrumbsProps$1<T>, "className"> {
|
|
1197
|
+
className?: string;
|
|
1198
|
+
}
|
|
1199
|
+
declare function Breadcrumbs<T extends object>({ className, ...props }: BreadcrumbsProps<T>): react.JSX.Element;
|
|
1200
|
+
interface BreadcrumbProps extends Omit<BreadcrumbProps$1, "className"> {
|
|
1201
|
+
className?: string;
|
|
1202
|
+
}
|
|
1203
|
+
declare function Breadcrumb({ className, ...props }: BreadcrumbProps): react.JSX.Element;
|
|
1204
|
+
interface LinkProps extends Omit<LinkProps$1, "className"> {
|
|
1205
|
+
children?: ReactNode;
|
|
1206
|
+
className?: string;
|
|
1207
|
+
}
|
|
1208
|
+
declare function Link({ className, ...props }: LinkProps): react.JSX.Element;
|
|
1209
|
+
|
|
1210
|
+
interface DisclosureProps extends Omit<DisclosureProps$1, "className" | "children"> {
|
|
1211
|
+
/** Beschriftung des Triggers (Kopfzeile). */
|
|
1212
|
+
title: ReactNode;
|
|
1213
|
+
/** Inhalt des aufklappbaren Panels. */
|
|
1214
|
+
children: ReactNode;
|
|
1215
|
+
className?: string;
|
|
1216
|
+
}
|
|
1217
|
+
declare function Disclosure({ title, children, className, ...props }: DisclosureProps): react.JSX.Element;
|
|
1218
|
+
interface DisclosureGroupProps extends Omit<DisclosureGroupProps$1, "className"> {
|
|
1219
|
+
className?: string;
|
|
1220
|
+
}
|
|
1221
|
+
declare function DisclosureGroup({ className, ...props }: DisclosureGroupProps): react.JSX.Element;
|
|
1222
|
+
|
|
1223
|
+
interface TreeProps<T extends object> extends Omit<TreeProps$1<T>, "className"> {
|
|
1224
|
+
className?: string;
|
|
1225
|
+
}
|
|
1226
|
+
declare function Tree<T extends object>({ className, ...props }: TreeProps<T>): react.JSX.Element;
|
|
1227
|
+
interface TreeItemProps extends Omit<TreeItemProps$1, "className" | "children" | "textValue"> {
|
|
1228
|
+
/** Beschriftung der Zeile; dient zugleich als textValue für Typeahead. */
|
|
1229
|
+
title: ReactNode;
|
|
1230
|
+
/** Optionaler textValue, falls title kein reiner String ist. */
|
|
1231
|
+
textValue?: string;
|
|
1232
|
+
/** Verschachtelte TreeItems. */
|
|
1233
|
+
children?: ReactNode;
|
|
1234
|
+
className?: string;
|
|
1235
|
+
}
|
|
1236
|
+
declare function TreeItem({ title, textValue, children, className, ...props }: TreeItemProps): react.JSX.Element;
|
|
1237
|
+
|
|
1238
|
+
interface TableProps extends Omit<TableProps$1, "className"> {
|
|
1239
|
+
/** Header bleibt beim Scrollen oben kleben (Container muss eine feste Höhe haben). */
|
|
1240
|
+
stickyHeader?: boolean;
|
|
1241
|
+
className?: string;
|
|
1242
|
+
}
|
|
1243
|
+
declare function Table({ stickyHeader, className, ...props }: TableProps): react.JSX.Element;
|
|
1244
|
+
interface TableHeaderProps<T extends object> extends Omit<TableHeaderProps$1<T>, "className"> {
|
|
1245
|
+
className?: string;
|
|
1246
|
+
}
|
|
1247
|
+
declare function TableHeader<T extends object>({ className, children, ...props }: TableHeaderProps<T>): react.JSX.Element;
|
|
1248
|
+
interface TableBodyProps<T extends object> extends Omit<TableBodyProps$1<T>, "className"> {
|
|
1249
|
+
className?: string;
|
|
1250
|
+
}
|
|
1251
|
+
declare function TableBody<T extends object>({ className, ...props }: TableBodyProps<T>): react.JSX.Element;
|
|
1252
|
+
interface ColumnProps extends Omit<ColumnProps$1, "className" | "children"> {
|
|
1253
|
+
children?: ReactNode;
|
|
1254
|
+
className?: string;
|
|
1255
|
+
}
|
|
1256
|
+
declare function Column({ children, className, ...props }: ColumnProps): react.JSX.Element;
|
|
1257
|
+
interface RowProps<T extends object> extends Omit<RowProps$1<T>, "className"> {
|
|
1258
|
+
className?: string;
|
|
1259
|
+
}
|
|
1260
|
+
declare function Row<T extends object>({ className, children, columns, ...props }: RowProps<T>): react.JSX.Element;
|
|
1261
|
+
interface CellProps extends Omit<CellProps$1, "className"> {
|
|
1262
|
+
className?: string;
|
|
1263
|
+
}
|
|
1264
|
+
declare function Cell({ className, ...props }: CellProps): react.JSX.Element;
|
|
1265
|
+
|
|
1266
|
+
interface DateFieldProps<T extends DateValue> extends Omit<DateFieldProps$1<T>, "className"> {
|
|
1267
|
+
label?: ReactNode;
|
|
1268
|
+
description?: ReactNode;
|
|
1269
|
+
errorMessage?: ReactNode;
|
|
1270
|
+
className?: string;
|
|
1271
|
+
}
|
|
1272
|
+
declare function DateField<T extends DateValue>({ label, description, errorMessage, className, ...props }: DateFieldProps<T>): react.JSX.Element;
|
|
1273
|
+
interface TimeFieldProps<T extends TimeValue> extends Omit<TimeFieldProps$1<T>, "className"> {
|
|
1274
|
+
label?: ReactNode;
|
|
1275
|
+
description?: ReactNode;
|
|
1276
|
+
errorMessage?: ReactNode;
|
|
1277
|
+
className?: string;
|
|
1278
|
+
}
|
|
1279
|
+
declare function TimeField<T extends TimeValue>({ label, description, errorMessage, className, ...props }: TimeFieldProps<T>): react.JSX.Element;
|
|
1280
|
+
|
|
1281
|
+
interface CalendarProps<T extends DateValue> extends Omit<CalendarProps$1<T>, "className"> {
|
|
1282
|
+
/** Optionale Fehlermeldung unterhalb des Gitters. */
|
|
1283
|
+
errorMessage?: ReactNode;
|
|
1284
|
+
className?: string;
|
|
1285
|
+
}
|
|
1286
|
+
declare function Calendar<T extends DateValue>({ errorMessage, className, ...props }: CalendarProps<T>): react.JSX.Element;
|
|
1287
|
+
interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarProps$1<T>, "className"> {
|
|
1288
|
+
/** Optionale Fehlermeldung unterhalb des Gitters. */
|
|
1289
|
+
errorMessage?: ReactNode;
|
|
1290
|
+
className?: string;
|
|
1291
|
+
}
|
|
1292
|
+
declare function RangeCalendar<T extends DateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>): react.JSX.Element;
|
|
1293
|
+
|
|
1294
|
+
interface DatePickerProps<T extends DateValue> extends Omit<DatePickerProps$1<T>, "className"> {
|
|
1295
|
+
label?: ReactNode;
|
|
1296
|
+
description?: ReactNode;
|
|
1297
|
+
errorMessage?: ReactNode;
|
|
1298
|
+
className?: string;
|
|
1299
|
+
}
|
|
1300
|
+
declare function DatePicker<T extends DateValue>({ label, description, errorMessage, className, ...props }: DatePickerProps<T>): react.JSX.Element;
|
|
1301
|
+
interface DateRangePickerProps<T extends DateValue> extends Omit<DateRangePickerProps$1<T>, "className"> {
|
|
1302
|
+
label?: ReactNode;
|
|
1303
|
+
description?: ReactNode;
|
|
1304
|
+
errorMessage?: ReactNode;
|
|
1305
|
+
className?: string;
|
|
1306
|
+
}
|
|
1307
|
+
declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, className, ...props }: DateRangePickerProps<T>): react.JSX.Element;
|
|
1308
|
+
|
|
1309
|
+
interface ColorFieldProps extends Omit<ColorFieldProps$1, "className"> {
|
|
1310
|
+
label?: ReactNode;
|
|
1311
|
+
description?: ReactNode;
|
|
1312
|
+
errorMessage?: ReactNode;
|
|
1313
|
+
placeholder?: string;
|
|
1314
|
+
className?: string;
|
|
1315
|
+
}
|
|
1316
|
+
declare function ColorField({ label, description, errorMessage, placeholder, className, ...props }: ColorFieldProps): react.JSX.Element;
|
|
1317
|
+
interface ColorSwatchProps extends Omit<ColorSwatchProps$1, "className"> {
|
|
1318
|
+
className?: string;
|
|
1319
|
+
}
|
|
1320
|
+
declare function ColorSwatch({ className, ...props }: ColorSwatchProps): react.JSX.Element;
|
|
1321
|
+
interface ColorSwatchPickerProps extends Omit<ColorSwatchPickerProps$1, "className"> {
|
|
1322
|
+
className?: string;
|
|
1323
|
+
}
|
|
1324
|
+
declare function ColorSwatchPicker({ className, children, ...props }: ColorSwatchPickerProps): react.JSX.Element;
|
|
1325
|
+
interface ColorSwatchPickerItemProps extends Omit<ColorSwatchPickerItemProps$1, "className"> {
|
|
1326
|
+
className?: string;
|
|
1327
|
+
}
|
|
1328
|
+
declare function ColorSwatchPickerItem({ className, ...props }: ColorSwatchPickerItemProps): react.JSX.Element;
|
|
1329
|
+
|
|
1330
|
+
interface ColorAreaProps extends Omit<ColorAreaProps$1, "className" | "children"> {
|
|
1331
|
+
className?: string;
|
|
1332
|
+
}
|
|
1333
|
+
declare function ColorArea({ className, ...props }: ColorAreaProps): react.JSX.Element;
|
|
1334
|
+
interface ColorSliderProps extends Omit<ColorSliderProps$1, "className"> {
|
|
1335
|
+
/** Beschriftung über dem Slider. */
|
|
1336
|
+
label?: ReactNode;
|
|
1337
|
+
/** Aktuellen Kanalwert rechts neben dem Label anzeigen. */
|
|
1338
|
+
showValue?: boolean;
|
|
1339
|
+
className?: string;
|
|
1340
|
+
}
|
|
1341
|
+
declare function ColorSlider({ label, showValue, className, ...props }: ColorSliderProps): react.JSX.Element;
|
|
1342
|
+
interface ColorWheelProps extends Omit<ColorWheelProps$1, "className" | "children" | "outerRadius" | "innerRadius"> {
|
|
1343
|
+
/** Außenradius des Rings (Default 100). */
|
|
1344
|
+
outerRadius?: number;
|
|
1345
|
+
/** Innenradius des Rings (Default 74). */
|
|
1346
|
+
innerRadius?: number;
|
|
1347
|
+
className?: string;
|
|
1348
|
+
}
|
|
1349
|
+
declare function ColorWheel({ className, outerRadius, innerRadius, ...props }: ColorWheelProps): react.JSX.Element;
|
|
1350
|
+
interface ColorPickerProps extends Omit<ColorPickerProps$1, "children"> {
|
|
1351
|
+
/** Beschriftung neben dem Farb-Swatch im Trigger. */
|
|
1352
|
+
label?: ReactNode;
|
|
1353
|
+
/** Eigene Inhalte des Popovers. Standard: ColorArea + Hue-Slider + ColorField. */
|
|
1354
|
+
children?: ReactNode;
|
|
1355
|
+
className?: string;
|
|
1356
|
+
}
|
|
1357
|
+
declare function ColorPicker({ label, children, className, ...props }: ColorPickerProps): react.JSX.Element;
|
|
1358
|
+
|
|
1359
|
+
interface ProgressBarProps extends Omit<ProgressBarProps$1, "className" | "children"> {
|
|
1360
|
+
/** Sichtbares Label oberhalb des Balkens. */
|
|
1361
|
+
label?: ReactNode;
|
|
1362
|
+
/** Formatierten Wert (z. B. „60 %") neben dem Label anzeigen. */
|
|
1363
|
+
showValue?: boolean;
|
|
1364
|
+
className?: string;
|
|
1365
|
+
}
|
|
1366
|
+
declare function ProgressBar({ label, showValue, className, ...props }: ProgressBarProps): react.JSX.Element;
|
|
1367
|
+
interface MeterProps extends Omit<MeterProps$1, "className" | "children"> {
|
|
1368
|
+
/** Sichtbares Label oberhalb des Meters. */
|
|
1369
|
+
label?: ReactNode;
|
|
1370
|
+
/** Formatierten Wert neben dem Label anzeigen. */
|
|
1371
|
+
showValue?: boolean;
|
|
1372
|
+
/** Farbbänder nach Auslastung (grün/orange/rot) statt Akzentfarbe. */
|
|
1373
|
+
bands?: boolean;
|
|
1374
|
+
className?: string;
|
|
1375
|
+
}
|
|
1376
|
+
declare function Meter({ label, showValue, bands, className, ...props }: MeterProps): react.JSX.Element;
|
|
1377
|
+
interface SeparatorProps extends Omit<SeparatorProps$1, "className"> {
|
|
1378
|
+
className?: string;
|
|
1379
|
+
}
|
|
1380
|
+
declare function Separator({ className, ...props }: SeparatorProps): react.JSX.Element;
|
|
1381
|
+
interface GroupProps extends Omit<GroupProps$1, "className"> {
|
|
1382
|
+
className?: string;
|
|
1383
|
+
}
|
|
1384
|
+
declare function Group({ className, ...props }: GroupProps): react.JSX.Element;
|
|
1385
|
+
|
|
1386
|
+
type ToastVariant = "default" | "success" | "warning" | "error";
|
|
1387
|
+
/** Struktur, die ein Prince-Toast anzeigt. */
|
|
1388
|
+
interface AplToast {
|
|
1389
|
+
title: ReactNode;
|
|
1390
|
+
description?: ReactNode;
|
|
1391
|
+
variant?: ToastVariant;
|
|
1392
|
+
}
|
|
1393
|
+
/**
|
|
1394
|
+
* Globale Toast-Queue. Konsumenten rufen `toastQueue.add({ title, ... })`,
|
|
1395
|
+
* um einen Toast in der `<ToastRegion>` einzureihen.
|
|
1396
|
+
*/
|
|
1397
|
+
declare const toastQueue: UNSTABLE_ToastQueue<AplToast>;
|
|
1398
|
+
interface ToastRegionProps extends Omit<ToastRegionProps$1<AplToast>, "className" | "children" | "queue"> {
|
|
1399
|
+
/** Eigene Queue (Standard: die exportierte `toastQueue`). */
|
|
1400
|
+
queue?: UNSTABLE_ToastQueue<AplToast>;
|
|
1401
|
+
className?: string;
|
|
1402
|
+
}
|
|
1403
|
+
/**
|
|
1404
|
+
* Fixierte Region am unteren Rand, die eingereihte Toasts als erhöhte Karten
|
|
1405
|
+
* mit Slide-in-Animation und Schließen-Button rendert.
|
|
1406
|
+
*/
|
|
1407
|
+
declare function ToastRegion({ queue, className, ...props }: ToastRegionProps): react.JSX.Element;
|
|
1408
|
+
|
|
1409
|
+
interface DropZoneProps extends Omit<DropZoneProps$1, "className"> {
|
|
1410
|
+
/** Inhalt der Dropzone, z. B. ein Prompt-Text und ein FileTrigger. */
|
|
1411
|
+
children?: ReactNode;
|
|
1412
|
+
className?: string;
|
|
1413
|
+
}
|
|
1414
|
+
declare function DropZone({ children, className, ...props }: DropZoneProps): react.JSX.Element;
|
|
1415
|
+
interface FileTriggerProps extends FileTriggerOwnProps {
|
|
1416
|
+
/** Button-Beschriftung; Standard „Datei wählen". */
|
|
1417
|
+
children?: ReactNode;
|
|
1418
|
+
className?: string;
|
|
1419
|
+
}
|
|
1420
|
+
type FileTriggerOwnProps = Omit<FileTriggerProps$1, "children">;
|
|
1421
|
+
declare function FileTrigger({ children, className, ...props }: FileTriggerProps): react.JSX.Element;
|
|
1422
|
+
|
|
1423
|
+
/** Einsatzort der Glasfläche — bestimmt Kanten, Radius und Schatten. */
|
|
1424
|
+
type GlassVariant = "bar" | "sidebar" | "overlay" | "card" | "floating";
|
|
1425
|
+
interface GlassSurfaceProps extends HTMLAttributes<HTMLElement> {
|
|
1426
|
+
/** Wo die Fläche sitzt (Default: `"card"`). */
|
|
1427
|
+
variant?: GlassVariant;
|
|
1428
|
+
/** Optionaler Branding-Tint (rgba/hex), wird unter das Glas gelegt. */
|
|
1429
|
+
tintColor?: string;
|
|
1430
|
+
/** Gerendertes Element (Default: `"div"`). */
|
|
1431
|
+
as?: ElementType;
|
|
1432
|
+
children?: ReactNode;
|
|
1433
|
+
}
|
|
1434
|
+
/**
|
|
1435
|
+
* GlassSurface — dünne „Liquid Glass"-Optik-Schicht (reines CSS, kein Verhalten).
|
|
1436
|
+
*
|
|
1437
|
+
* Sparsam und nur auf der „Navigationsebene" über dem Content einsetzen
|
|
1438
|
+
* (Top-Bar, Sidebar, Overlays, schwebende Controls, Übersichtskarten).
|
|
1439
|
+
* NICHT für datendichte Tabellen/Listen, Eingabefelder oder Fließtext —
|
|
1440
|
+
* dort haben Lesbarkeit/Performance Vorrang. Glas nie stapeln.
|
|
1441
|
+
*
|
|
1442
|
+
* Der Effekt nutzt `backdrop-filter`; ohne Support oder bei
|
|
1443
|
+
* `prefers-reduced-transparency` fällt die Fläche automatisch auf opak zurück.
|
|
1444
|
+
*/
|
|
1445
|
+
declare function GlassSurface({ variant, tintColor, as, className, style, children, ...rest }: GlassSurfaceProps): react.JSX.Element;
|
|
1446
|
+
|
|
1447
|
+
/**
|
|
1448
|
+
* prince-ui — Prince-Look React-Komponenten auf React Aria.
|
|
1449
|
+
*
|
|
1450
|
+
* Wave 1: L1-Primitives. CSS wird über die Bereichsmodule gebündelt
|
|
1451
|
+
* (dist/index.css → Import via "@conuti-das/prince-ui/styles.css").
|
|
1452
|
+
*/
|
|
1453
|
+
declare const PRINCE_UI_VERSION = "0.8.0";
|
|
1454
|
+
/** Die drei Prince-Modes. `null` = System folgen (prefers-color-scheme, Fallback Dark). */
|
|
1455
|
+
type PrinceTheme = "light" | "dark" | "cu";
|
|
1456
|
+
/**
|
|
1457
|
+
* Setzt das Theme am <html>-Element.
|
|
1458
|
+
* - `"light"` / `"dark"` → Prince Light / Prince Dark (Apple-Optik: SF-Fonts, Apple-System-Farben, Grün)
|
|
1459
|
+
* - `"cu"` → CONUTI Community-Styling (CI-Grün)
|
|
1460
|
+
* - `null` → System folgen (Prince Light bei OS-Light, sonst Prince Dark)
|
|
1461
|
+
*/
|
|
1462
|
+
declare function setTheme(theme: PrinceTheme | null): void;
|
|
1463
|
+
/** Liest das aktuell erzwungene Theme oder `null`, wenn dem System gefolgt wird. */
|
|
1464
|
+
declare function getTheme(): PrinceTheme | null;
|
|
1465
|
+
|
|
1466
|
+
export { type ActiveFilter, type AggregateType, Amount, type AmountProps, type AnalyticalColumn, AnalyticalTable, type AnalyticalTableProps, type AplPopoverProps, type AplToast, AppShell, type AppShellItem, type AppShellMenuItem, type AppShellProps, AreaChart, type AreaChartProps, Badge, type BadgeProps, type BadgeTone, BarChart, type BarChartProps, type BarDatum, type BeforeNavigateDetail, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Cell, type CellProps, ChartEmpty, type ChartEmptyProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, Column, type ColumnFilterType, type ColumnProps, ComboBox, ComboBoxItem, type ComboBoxItemProps, type ComboBoxProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DescriptionList, type DescriptionListProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DonutChart, type DonutChartProps, type DonutSegment, DropZone, type DropZoneProps, EmptyState, type EmptyStateProps, Field, FieldError, type FieldErrorProps, type FieldProps, FileTrigger, type FileTriggerProps, FilterBar, type FilterBarProps, FilterField, type FilterFieldProps, Form, type FormProps, GlassSurface, type GlassSurfaceProps, type GlassVariant, GridList, GridListItem, type GridListItemProps, type GridListProps, Group, type GroupProps, Icon, type IconName, type IconProps, KpiCard, type KpiCardProps, type KpiTone, Launchpad, type LaunchpadCard, type LaunchpadProps, type LaunchpadSection, type LaunchpadSpan, Link, type LinkProps, List, ListBox, ListBoxOption, type ListBoxOptionProps, type ListBoxProps, type ListProps, ListRow, type ListRowProps, type LpCustomCard, type LpKpiCard, type LpListCard, type LpListRowModel, type LpNavCard, type LpTrendCard, Menu, MenuItem, type MenuItemPropsExt, type MenuProps, Meter, type MeterProps, Modal, type ModalProps, type NoDataReason, Notice, type NoticeProps, type NoticeTone, NumberField, type NumberFieldProps, type ObjectField, ObjectPage, type ObjectPageAccessibilityAttributes, type ObjectPageHandle, type ObjectPageKpi, type ObjectPageMode, type ObjectPageProps, ObjectPageSection, type ObjectPageSectionProps, ObjectPageSubSection, type ObjectPageSubSectionProps, type ObjectSection, PRINCE_UI_VERSION, Popover, type PrinceTheme, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, Row, type RowProps, type ScaleWidthMode, SearchField, type SearchFieldProps, Segment, type SegmentProps, SegmentedControl, type SegmentedControlProps, Select, SelectItem, type SelectItemProps, type SelectProps, type SelectedSectionChangeDetail, type SelectionBehavior, type SelectionMode, Separator, type SeparatorProps, Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps, Slider, type SliderProps, type SortType, Sparkline, type SparklineProps, type StatusBadge, type StatusTone, type SubComponentsBehavior, Switch, type SwitchProps, Tab, TabBar, TabPanel, Table, TableBody, type TableBodyProps, TableHeader, type TableHeaderProps, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, TextField, type TextFieldProps, TimeField, type TimeFieldProps, type TitleTextLevel, ToastRegion, type ToastRegionProps, type ToastVariant, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, TreeItem, type TreeItemProps, type TreeProps, type Trend$1 as Trend, type UseFilterStateOptions, type UseFilterStateResult, type ValueState, type VisibleRowCountMode, cx, getTheme, setTheme, smoothPath, toastQueue, useFilterState };
|