@yenio-pld/blocks 0.0.0-stage → 0.0.0

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.
Files changed (103) hide show
  1. package/README.md +100 -2
  2. package/dist/avatar.cjs +88 -0
  3. package/dist/avatar.cjs.map +1 -0
  4. package/dist/avatar.d.cts +18 -0
  5. package/dist/avatar.d.ts +18 -0
  6. package/dist/avatar.js +84 -0
  7. package/dist/avatar.js.map +1 -0
  8. package/dist/consent.cjs +85 -0
  9. package/dist/consent.cjs.map +1 -0
  10. package/dist/consent.d.cts +20 -0
  11. package/dist/consent.d.ts +20 -0
  12. package/dist/consent.js +73 -0
  13. package/dist/consent.js.map +1 -0
  14. package/dist/index.cjs +4053 -0
  15. package/dist/index.cjs.map +1 -0
  16. package/dist/index.d.cts +859 -0
  17. package/dist/index.d.ts +859 -0
  18. package/dist/index.js +3947 -0
  19. package/dist/index.js.map +1 -0
  20. package/dist/theme-init.cjs +12 -0
  21. package/dist/theme-init.cjs.map +1 -0
  22. package/dist/theme-init.d.cts +11 -0
  23. package/dist/theme-init.d.ts +11 -0
  24. package/dist/theme-init.js +8 -0
  25. package/dist/theme-init.js.map +1 -0
  26. package/dist/ui/alert-dialog.d.ts +15 -0
  27. package/dist/ui/alert-dialog.js +137 -0
  28. package/dist/ui/alert-dialog.js.map +1 -0
  29. package/dist/ui/alert.d.ts +11 -0
  30. package/dist/ui/alert.js +57 -0
  31. package/dist/ui/alert.js.map +1 -0
  32. package/dist/ui/avatar.d.ts +13 -0
  33. package/dist/ui/avatar.js +105 -0
  34. package/dist/ui/avatar.js.map +1 -0
  35. package/dist/ui/badge.d.ts +13 -0
  36. package/dist/ui/badge.js +33 -0
  37. package/dist/ui/badge.js.map +1 -0
  38. package/dist/ui/breadcrumb.d.ts +12 -0
  39. package/dist/ui/breadcrumb.js +121 -0
  40. package/dist/ui/breadcrumb.js.map +1 -0
  41. package/dist/ui/bubble.d.ts +19 -0
  42. package/dist/ui/bubble.js +120 -0
  43. package/dist/ui/bubble.js.map +1 -0
  44. package/dist/ui/button.d.ts +12 -0
  45. package/dist/ui/button.js +59 -0
  46. package/dist/ui/button.js.map +1 -0
  47. package/dist/ui/card.d.ts +10 -0
  48. package/dist/ui/card.js +55 -0
  49. package/dist/ui/card.js.map +1 -0
  50. package/dist/ui/collapsible.d.ts +8 -0
  51. package/dist/ui/collapsible.js +17 -0
  52. package/dist/ui/collapsible.js.map +1 -0
  53. package/dist/ui/dialog.d.ts +16 -0
  54. package/dist/ui/dialog.js +125 -0
  55. package/dist/ui/dialog.js.map +1 -0
  56. package/dist/ui/dropdown-menu.d.ts +31 -0
  57. package/dist/ui/dropdown-menu.js +244 -0
  58. package/dist/ui/dropdown-menu.js.map +1 -0
  59. package/dist/ui/input-otp.d.ts +39 -0
  60. package/dist/ui/input-otp.js +53 -0
  61. package/dist/ui/input-otp.js.map +1 -0
  62. package/dist/ui/input.d.ts +5 -0
  63. package/dist/ui/input.js +28 -0
  64. package/dist/ui/input.js.map +1 -0
  65. package/dist/ui/label.d.ts +7 -0
  66. package/dist/ui/label.js +29 -0
  67. package/dist/ui/label.js.map +1 -0
  68. package/dist/ui/message.d.ts +12 -0
  69. package/dist/ui/message.js +93 -0
  70. package/dist/ui/message.js.map +1 -0
  71. package/dist/ui/progress.d.ts +9 -0
  72. package/dist/ui/progress.js +41 -0
  73. package/dist/ui/progress.js.map +1 -0
  74. package/dist/ui/separator.d.ts +6 -0
  75. package/dist/ui/separator.js +31 -0
  76. package/dist/ui/separator.js.map +1 -0
  77. package/dist/ui/sheet.d.ts +16 -0
  78. package/dist/ui/sheet.js +127 -0
  79. package/dist/ui/sheet.js.map +1 -0
  80. package/dist/ui/sidebar.d.ts +69 -0
  81. package/dist/ui/sidebar.js +624 -0
  82. package/dist/ui/sidebar.js.map +1 -0
  83. package/dist/ui/skeleton.d.ts +5 -0
  84. package/dist/ui/skeleton.js +26 -0
  85. package/dist/ui/skeleton.js.map +1 -0
  86. package/dist/ui/sonner.d.ts +6 -0
  87. package/dist/ui/sonner.js +25 -0
  88. package/dist/ui/sonner.js.map +1 -0
  89. package/dist/ui/switch.d.ts +8 -0
  90. package/dist/ui/switch.js +38 -0
  91. package/dist/ui/switch.js.map +1 -0
  92. package/dist/ui/table.d.ts +11 -0
  93. package/dist/ui/table.js +85 -0
  94. package/dist/ui/table.js.map +1 -0
  95. package/dist/ui/tooltip.d.ts +9 -0
  96. package/dist/ui/tooltip.js +67 -0
  97. package/dist/ui/tooltip.js.map +1 -0
  98. package/dist/ui/use-mobile.d.ts +3 -0
  99. package/dist/ui/use-mobile.js +24 -0
  100. package/dist/ui/use-mobile.js.map +1 -0
  101. package/package.json +281 -5
  102. package/scripts/check-theme.mjs +74 -0
  103. package/src/theme.css +191 -0
@@ -0,0 +1,859 @@
1
+ import * as React from 'react';
2
+ import { FormEvent, KeyboardEvent, RefObject, CSSProperties, ReactNode, ComponentProps, ImgHTMLAttributes, SyntheticEvent } from 'react';
3
+ import * as class_variance_authority_types from 'class-variance-authority/types';
4
+ import { VariantProps } from 'class-variance-authority';
5
+ import { ClassValue } from 'clsx';
6
+ export { AvatarColors, avatarFallbackStyle, getAvatarColors, getInitials } from './avatar.js';
7
+ import { CookieConsentValue } from './consent.js';
8
+ export { COOKIE_CONSENT_MAX_AGE, COOKIE_CONSENT_NAME, COOKIE_CONSENT_VALUES, WriteCookieConsentOptions, cookieConsentAllowsReplay, cookieDomainFromHostname, isCookieConsentValue, isEmbeddedWindow, parseCookieConsent, readCookieConsent, serializeCookieConsent, writeCookieConsent } from './consent.js';
9
+ export { THEME_INIT_SCRIPT, THEME_INIT_SCRIPT_ID, THEME_STORAGE_KEY } from './theme-init.js';
10
+
11
+ /**
12
+ * Blocks Context Interfaces
13
+ *
14
+ * These interfaces define the contract that consuming apps must implement
15
+ * to provide context to blocks components. Components will automatically
16
+ * consume these contexts when available, falling back to props otherwise.
17
+ */
18
+ /**
19
+ * Language definition for the language switcher.
20
+ */
21
+ interface BlocksLanguage {
22
+ code: string;
23
+ name: string;
24
+ flag?: string;
25
+ }
26
+ /**
27
+ * Language context value interface.
28
+ * Consuming apps implement this interface to provide language state
29
+ * and actions to blocks components.
30
+ */
31
+ interface LanguageContextValue {
32
+ /** Current language code (e.g., "en", "es") */
33
+ language: string;
34
+ /** Function to change the language */
35
+ setLanguage: (lang: string) => void;
36
+ /** Available languages (optional, components have defaults) */
37
+ languages?: BlocksLanguage[];
38
+ }
39
+ /**
40
+ * React context for language.
41
+ * Blocks components will consume this context when available.
42
+ */
43
+ declare const LanguageContext: React.Context<LanguageContextValue | null>;
44
+ /**
45
+ * Hook to consume the language context.
46
+ * Returns null if no provider is present (components should fall back to props).
47
+ */
48
+ declare function useLanguageContext(): LanguageContextValue | null;
49
+
50
+ declare function LoadingState({ label, className, }: {
51
+ label?: string;
52
+ className?: string;
53
+ }): React.JSX.Element;
54
+ declare function ErrorState({ title, description, action, className, }: {
55
+ title?: string;
56
+ description?: string;
57
+ action?: React.ReactNode;
58
+ className?: string;
59
+ }): React.JSX.Element;
60
+ /** Accept any icon component with a className prop — avoids LucideIcon
61
+ * version skew between blocks peers and consuming apps. */
62
+ type EmptyStateIcon = React.ComponentType<{
63
+ className?: string;
64
+ "aria-hidden"?: boolean | "true" | "false";
65
+ }>;
66
+ type EmptyStateProps = {
67
+ title: string;
68
+ description?: string;
69
+ action?: React.ReactNode;
70
+ icon?: EmptyStateIcon;
71
+ variant?: "default" | "compact";
72
+ className?: string;
73
+ };
74
+ declare function EmptyState({ title, description, action, icon: Icon, variant, className, }: EmptyStateProps): React.JSX.Element;
75
+
76
+ declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
77
+ declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
78
+ declare const emptyMediaVariants: (props?: ({
79
+ variant?: "default" | "icon" | null | undefined;
80
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
81
+ declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React.JSX.Element;
82
+ declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
83
+ declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
84
+ declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
85
+
86
+ type ConfirmDestructiveDialogProps = {
87
+ open: boolean;
88
+ onOpenChange: (open: boolean) => void;
89
+ title: string;
90
+ description: string;
91
+ confirmLabel?: string;
92
+ cancelLabel?: string;
93
+ onConfirm: () => void;
94
+ };
95
+ /**
96
+ * Shared confirm step for destructive actions (delete, mute, etc.).
97
+ * Prefer this over window.confirm so focus stays in the app and copy is clear.
98
+ */
99
+ declare function ConfirmDestructiveDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, }: ConfirmDestructiveDialogProps): React.JSX.Element;
100
+
101
+ type NotificationBellItem = {
102
+ id: string;
103
+ title: string;
104
+ message: string;
105
+ read: boolean;
106
+ createdAt: string;
107
+ href?: string | null;
108
+ };
109
+ type NotificationBellLabels = {
110
+ title: string;
111
+ empty: string;
112
+ viewAll: string;
113
+ };
114
+ declare const DEFAULT_NOTIFICATION_BELL_LABELS: NotificationBellLabels;
115
+ type NotificationBellProps = {
116
+ items: NotificationBellItem[];
117
+ unreadCount: number;
118
+ isLoading?: boolean;
119
+ labels?: Partial<NotificationBellLabels>;
120
+ viewAllHref: string;
121
+ formatTime?: (iso: string) => string;
122
+ onOpenChange?: (open: boolean) => void;
123
+ align?: "start" | "end";
124
+ className?: string;
125
+ };
126
+ declare function NotificationBell({ items, unreadCount, isLoading, labels: labelOverrides, viewAllHref, formatTime, onOpenChange, align, className, }: NotificationBellProps): React.JSX.Element;
127
+
128
+ type EditableSectionMode = "reading" | "editing" | "saving";
129
+ type EditableSectionLabels = {
130
+ /** Visible Edit button label. Default: "Edit" */
131
+ edit?: string;
132
+ /** Visible Save button label. Default: "Save" */
133
+ save?: string;
134
+ /** Visible Save button label while pending. Default: "Saving…" */
135
+ saving?: string;
136
+ /** Visible Cancel button label. Default: "Cancel" */
137
+ cancel?: string;
138
+ /** Polite live-region message after a successful save. Default: "Saved" */
139
+ saved?: string;
140
+ /** ConfirmDestructiveDialog title when discarding dirty edits. */
141
+ discardTitle?: string;
142
+ /** ConfirmDestructiveDialog description when discarding dirty edits. */
143
+ discardDescription?: string;
144
+ /** ConfirmDestructiveDialog confirm label. Default: "Discard" */
145
+ discardConfirm?: string;
146
+ /** ConfirmDestructiveDialog cancel label. Default: "Keep editing" */
147
+ discardCancel?: string;
148
+ };
149
+ declare const DEFAULT_EDITABLE_SECTION_LABELS: {
150
+ readonly edit: "Edit";
151
+ readonly save: "Save";
152
+ readonly saving: "Saving…";
153
+ readonly cancel: "Cancel";
154
+ readonly saved: "Saved";
155
+ readonly discardTitle: "Discard changes?";
156
+ readonly discardDescription: "If you leave now, unsaved changes will be lost.";
157
+ readonly discardConfirm: "Discard";
158
+ readonly discardCancel: "Keep editing";
159
+ };
160
+
161
+ type UseEditableSectionOptions = {
162
+ onSave: () => Promise<void> | void;
163
+ /** Called when edit mode exits without saving (Cancel / Escape / discard confirm). */
164
+ onDiscard?: () => void;
165
+ /** Whether the in-progress edit has unsaved changes. Defaults to false. */
166
+ isDirty?: boolean;
167
+ /** Id of an existing heading that names this section (preferred). */
168
+ labelledBy?: string;
169
+ /** Fallback accessible name when there is no visible heading. */
170
+ title?: string;
171
+ labels?: EditableSectionLabels;
172
+ /**
173
+ * After the first edit entry, keep `min-height` at the tallest measured
174
+ * content height so later toggles do not shift. First toggle may still shift.
175
+ */
176
+ stableHeight?: boolean;
177
+ };
178
+ type UseEditableSectionResult = {
179
+ mode: EditableSectionMode;
180
+ isEditing: boolean;
181
+ isSaving: boolean;
182
+ startEdit: () => void;
183
+ requestCancel: () => void;
184
+ formProps: {
185
+ onSubmit: (event: FormEvent<HTMLFormElement>) => void;
186
+ onKeyDown: (event: KeyboardEvent<HTMLFormElement>) => void;
187
+ noValidate: true;
188
+ };
189
+ contentRef: RefObject<HTMLElement | null>;
190
+ editButtonRef: RefObject<HTMLButtonElement | null>;
191
+ /** Form id for associating external submit buttons via the HTML `form` attribute. */
192
+ contentFormId: string;
193
+ editButtonProps: {
194
+ type: "button";
195
+ id: string;
196
+ onClick: () => void;
197
+ ref: RefObject<HTMLButtonElement | null>;
198
+ "aria-labelledby"?: string;
199
+ "aria-label"?: string;
200
+ };
201
+ saveButtonProps: {
202
+ type: "submit";
203
+ disabled: boolean;
204
+ };
205
+ cancelButtonProps: {
206
+ type: "button";
207
+ onClick: () => void;
208
+ disabled: boolean;
209
+ };
210
+ status: string | null;
211
+ statusProps: {
212
+ role: "status";
213
+ "aria-live": "polite";
214
+ className: string;
215
+ };
216
+ confirmDiscard: {
217
+ open: boolean;
218
+ onOpenChange: (open: boolean) => void;
219
+ title: string;
220
+ description: string;
221
+ confirmLabel: string;
222
+ cancelLabel: string;
223
+ onConfirm: () => void;
224
+ };
225
+ resolvedLabels: Required<EditableSectionLabels>;
226
+ contentStyle: CSSProperties | undefined;
227
+ actionsClassName: string;
228
+ };
229
+ declare function useEditableSection({ onSave, onDiscard, isDirty, labelledBy, title, labels, stableHeight, }: UseEditableSectionOptions): UseEditableSectionResult;
230
+
231
+ type EditableSectionSlots = {
232
+ actions: ReactNode;
233
+ content: ReactNode;
234
+ status: ReactNode;
235
+ mode: UseEditableSectionResult["mode"];
236
+ isSaving: boolean;
237
+ isEditing: boolean;
238
+ };
239
+ type EditableSectionProps = UseEditableSectionOptions & {
240
+ readView: () => ReactNode;
241
+ editView: () => ReactNode;
242
+ className?: string;
243
+ /**
244
+ * Compose chrome yourself (Card, dialog, page header, …). Receives the
245
+ * stable actions node, the read/edit content, and the live status region.
246
+ * When omitted, actions render above content with no surrounding chrome.
247
+ */
248
+ children?: (slots: EditableSectionSlots) => ReactNode;
249
+ };
250
+ /**
251
+ * Chrome-free read-first section: semantic text by default, real `<form>` on
252
+ * Edit, pending Save until `onSave` resolves, and ConfirmDestructiveDialog
253
+ * when Cancel/Escape would discard dirty edits.
254
+ *
255
+ * Does not render a Card — place `actions` wherever your layout needs them.
256
+ */
257
+ declare function EditableSection({ readView, editView, children, className, ...options }: EditableSectionProps): React.JSX.Element;
258
+
259
+ /**
260
+ * Read-mode description list. Column grid and label placement match the
261
+ * typical edit-form field stack (`flex flex-col gap-1.5` + `text-sm` label)
262
+ * so labels and values keep the same x-position across modes.
263
+ */
264
+ type DataListProps = ComponentProps<"dl">;
265
+ declare function DataList({ className, ...props }: DataListProps): React.JSX.Element;
266
+ type DataListItemProps = {
267
+ label: ReactNode;
268
+ children?: ReactNode;
269
+ /** Shown when `children` is nullish or an empty string. Default: "—" */
270
+ empty?: ReactNode;
271
+ className?: string;
272
+ labelClassName?: string;
273
+ valueClassName?: string;
274
+ };
275
+ declare function DataListItem({ label, children, empty, className, labelClassName, valueClassName, }: DataListItemProps): React.JSX.Element;
276
+
277
+ type FieldMessageProps = Omit<ComponentProps<"p">, "children"> & {
278
+ children?: ReactNode;
279
+ /**
280
+ * Id referenced by the field's `aria-describedby`. Required when the
281
+ * message is shown so assistive tech can associate it with the control.
282
+ */
283
+ id?: string;
284
+ };
285
+ /**
286
+ * Reserved slot for field-level validation copy. Always occupies `min-h-5`
287
+ * so async errors do not shift fields under the pointer (CLS outside the
288
+ * 500ms input exclusion window).
289
+ */
290
+ declare function FieldMessage({ id, children, className, ...props }: FieldMessageProps): React.JSX.Element;
291
+
292
+ type SafeImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "onError"> & {
293
+ src?: string | null;
294
+ /** Rendered when `src` is missing/empty or the image fails to load. */
295
+ fallback: ReactNode;
296
+ onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
297
+ };
298
+ /**
299
+ * `<img>` that swaps to `fallback` when the source is missing or fails to load,
300
+ * so the browser never shows its default broken-image glyph.
301
+ */
302
+ declare function SafeImage({ src, fallback, alt, onError, ...imgProps }: SafeImageProps): React.JSX.Element;
303
+
304
+ type ThemeSwitcherLabels = {
305
+ /** Accessible name for the theme trigger */
306
+ theme?: string;
307
+ /** Label for "System" option */
308
+ system?: string;
309
+ /** Label for "Light" option */
310
+ light?: string;
311
+ /** Label for "Dark" option */
312
+ dark?: string;
313
+ };
314
+ type ThemeSwitcherProps = {
315
+ className?: string;
316
+ /** Size of the trigger */
317
+ size?: "sm" | "md" | "lg";
318
+ /** Shape of the trigger */
319
+ shape?: "rounded" | "pill";
320
+ /**
321
+ * Kept for existing callers. Both variants render the stored theme's icon
322
+ * (sun, moon, or monitor) and open the system / light / dark menu.
323
+ */
324
+ variant?: "default" | "mini";
325
+ /** Dropdown alignment */
326
+ align?: "start" | "center" | "end";
327
+ /** Dropdown side */
328
+ side?: "top" | "bottom" | "left" | "right";
329
+ /** @deprecated No longer used; the trigger no longer renders a tooltip. */
330
+ tooltipSide?: "top" | "right" | "bottom" | "left";
331
+ /** @deprecated No longer used; the trigger no longer renders a tooltip. */
332
+ tooltipAlign?: "start" | "center" | "end";
333
+ /** @deprecated No longer used; the trigger no longer renders a tooltip. */
334
+ tooltipSideOffset?: number;
335
+ /** Translation labels - consumers can pass their own t() values */
336
+ labels?: ThemeSwitcherLabels;
337
+ };
338
+ declare function ThemeSwitcher({ className, size, shape, align, side, labels: userLabels, }: ThemeSwitcherProps): React.JSX.Element;
339
+
340
+ type Language = {
341
+ /** Language key/code (e.g., "en", "es") */
342
+ key: string;
343
+ /** Short label kept for callers that still pass segmented copy */
344
+ label: string;
345
+ /** Full native name for the menu (e.g., "English", "Español") */
346
+ nativeName: string;
347
+ };
348
+ type LanguageSwitcherLabels = {
349
+ /** Accessible name for the language trigger */
350
+ language?: string;
351
+ };
352
+ /**
353
+ * Default languages when none are provided via props or context.
354
+ */
355
+ declare const defaultLanguages: Language[];
356
+ type LanguageSwitcherProps = {
357
+ /**
358
+ * Available languages. Optional if using LanguageContext.
359
+ * When context is available, context.languages is used; props override context.
360
+ * Falls back to defaultLanguages if neither provided.
361
+ */
362
+ languages?: Language[];
363
+ /**
364
+ * Current selected language key. Optional if using LanguageContext.
365
+ * When context is available, context.language is used; props override context.
366
+ */
367
+ currentLanguage?: string;
368
+ /**
369
+ * Callback when language changes. Optional if using LanguageContext.
370
+ * When context is available, context.setLanguage is used; props override context.
371
+ */
372
+ onLanguageChange?: (languageKey: string) => void;
373
+ /** Accessible name for the trigger */
374
+ labels?: LanguageSwitcherLabels;
375
+ className?: string;
376
+ /** Size of the trigger */
377
+ size?: "sm" | "md" | "lg";
378
+ /** Shape of the trigger */
379
+ shape?: "rounded" | "squared" | "pill";
380
+ /**
381
+ * Kept for existing callers. Both variants render the languages glyph
382
+ * and open the locale menu.
383
+ */
384
+ variant?: "default" | "mini";
385
+ /** @deprecated The trigger is always the languages glyph. */
386
+ showIcon?: boolean;
387
+ /** Dropdown alignment */
388
+ align?: "start" | "center" | "end";
389
+ /** Dropdown side */
390
+ side?: "top" | "bottom" | "left" | "right";
391
+ /** @deprecated No longer used; the trigger no longer renders a tooltip. */
392
+ tooltipSide?: "top" | "right" | "bottom" | "left";
393
+ /** @deprecated No longer used; the trigger no longer renders a tooltip. */
394
+ tooltipAlign?: "start" | "center" | "end";
395
+ /** @deprecated No longer used; the trigger no longer renders a tooltip. */
396
+ tooltipSideOffset?: number;
397
+ };
398
+ declare function LanguageSwitcher({ languages: propLanguages, currentLanguage: propCurrentLanguage, onLanguageChange: propOnLanguageChange, labels, className, size, shape, align, side, }: LanguageSwitcherProps): React.JSX.Element;
399
+
400
+ type AvatarEditorLabels = {
401
+ uploadAria?: string;
402
+ uploadHint?: string;
403
+ uploadFormats?: string;
404
+ dragging?: string;
405
+ zoomOut?: string;
406
+ zoomIn?: string;
407
+ zoomLevel?: string;
408
+ rotateLeft?: string;
409
+ rotateRight?: string;
410
+ toggleGrid?: string;
411
+ reset?: string;
412
+ replace?: string;
413
+ discard?: string;
414
+ };
415
+ interface AvatarEditorProps {
416
+ /** Current cropped image as data URL (controlled) */
417
+ value?: string | null;
418
+ /** Callback when the cropped image changes */
419
+ onChange?: (dataUrl: string | null) => void;
420
+ /** Size of the editor container in pixels */
421
+ size?: number;
422
+ /** Whether to show grid overlay by default */
423
+ showGrid?: boolean;
424
+ /** Square output image size in pixels (width === height) */
425
+ outputSize?: number;
426
+ /** Output format */
427
+ outputFormat?: "png" | "jpeg" | "webp";
428
+ /** Output quality for jpeg/webp (0-1) */
429
+ outputQuality?: number;
430
+ /** Additional class names */
431
+ className?: string;
432
+ /** Control size variant - 'default' for desktop, 'large' for mobile/touch devices */
433
+ controlSize?: "default" | "large";
434
+ /** Override English chrome strings */
435
+ labels?: AvatarEditorLabels;
436
+ }
437
+ declare function AvatarEditor({ value: _value, onChange, size, showGrid: initialShowGrid, outputSize, outputFormat, outputQuality, className, controlSize, labels, }: AvatarEditorProps): React.JSX.Element;
438
+
439
+ interface AvatarEditorDialogProps {
440
+ /** Current avatar URL or data URL */
441
+ value?: string | null;
442
+ /** Callback when avatar changes (after accepting) */
443
+ onChange?: (dataUrl: string | null) => void;
444
+ /** Async callback for saving/uploading - return true for success, false for failure */
445
+ onSave?: (dataUrl: string) => Promise<boolean> | boolean;
446
+ /** Size of the displayed avatar in pixels */
447
+ displaySize?: number;
448
+ /** Size of the editor in the dialog */
449
+ editorSize?: number;
450
+ /** Output image size */
451
+ outputSize?: number;
452
+ /** Placeholder text when no avatar */
453
+ placeholder?: string;
454
+ /** Edit button label for accessibility */
455
+ editLabel?: string;
456
+ /** Dialog title */
457
+ dialogTitle?: string;
458
+ /** Accept button text */
459
+ acceptText?: string;
460
+ /** Cancel button text */
461
+ cancelText?: string;
462
+ /** Saving button text while upload is in progress */
463
+ savingText?: string;
464
+ /** Saved button text after a successful save */
465
+ savedText?: string;
466
+ /** Success message */
467
+ successMessage?: string;
468
+ /** Error message */
469
+ errorMessage?: string;
470
+ /** Additional class names */
471
+ className?: string;
472
+ /** Override AvatarEditor chrome strings */
473
+ editorLabels?: AvatarEditorLabels;
474
+ }
475
+ declare function AvatarEditorDialog({ value, onChange, onSave, displaySize, editorSize, outputSize, placeholder, editLabel, dialogTitle, acceptText, cancelText, savingText, savedText, successMessage, errorMessage, className, editorLabels, }: AvatarEditorDialogProps): React.JSX.Element;
476
+
477
+ type MultipartUploadPart = {
478
+ partNumber: number;
479
+ etag: string;
480
+ };
481
+ type MultipartUploadAdapter = {
482
+ requestPartUrl: (partNumber: number) => Promise<string>;
483
+ complete: (parts: MultipartUploadPart[]) => Promise<void>;
484
+ abort?: () => Promise<void>;
485
+ };
486
+ type UploadProgress = {
487
+ loaded: number;
488
+ total: number;
489
+ percent: number;
490
+ };
491
+ type UploadControllerStatus = "idle" | "uploading" | "paused" | "completing" | "completed" | "cancelled" | "error";
492
+ type UploadJobStatus = Exclude<UploadControllerStatus, "idle">;
493
+ type UploadJob = {
494
+ id: string;
495
+ name: string;
496
+ status: UploadJobStatus;
497
+ loaded: number;
498
+ total: number;
499
+ percent: number;
500
+ error?: string;
501
+ };
502
+ type FileDropzoneLabels = {
503
+ idle: string;
504
+ hint: string;
505
+ browse: string;
506
+ rejectType: string;
507
+ rejectSize: string;
508
+ };
509
+ type FileUploadTrayLabels = {
510
+ title: string;
511
+ pause: string;
512
+ resume: string;
513
+ cancel: string;
514
+ uploading: string;
515
+ paused: string;
516
+ completing: string;
517
+ completed: string;
518
+ cancelled: string;
519
+ error: string;
520
+ };
521
+ declare const DEFAULT_FILE_DROPZONE_LABELS: FileDropzoneLabels;
522
+ declare const DEFAULT_FILE_UPLOAD_TRAY_LABELS: FileUploadTrayLabels;
523
+ declare const DEFAULT_FILE_UPLOAD_LABELS: {
524
+ dropzone: FileDropzoneLabels;
525
+ tray: FileUploadTrayLabels;
526
+ };
527
+
528
+ type FileDropzoneProps = {
529
+ accept?: string;
530
+ maxSize?: number;
531
+ disabled?: boolean;
532
+ labels?: Partial<FileDropzoneLabels>;
533
+ onFile: (file: File) => void;
534
+ onReject?: (reason: "type" | "size") => void;
535
+ className?: string;
536
+ };
537
+ declare function FileDropzone({ accept, maxSize, disabled, labels: labelOverrides, onFile, onReject, className, }: FileDropzoneProps): React.JSX.Element;
538
+
539
+ type FileUploadTrayProps = {
540
+ jobs: UploadJob[];
541
+ labels?: Partial<FileUploadTrayLabels>;
542
+ onPause: (id: string) => void;
543
+ onResume: (id: string) => void;
544
+ onCancel: (id: string) => void;
545
+ className?: string;
546
+ };
547
+ declare function FileUploadTray({ jobs, labels: labelOverrides, onPause, onResume, onCancel, className, }: FileUploadTrayProps): React.JSX.Element | null;
548
+
549
+ type FileUploadMenuProps = {
550
+ jobs: UploadJob[];
551
+ labels?: Partial<FileUploadTrayLabels>;
552
+ onPause: (id: string) => void;
553
+ onResume: (id: string) => void;
554
+ onCancel: (id: string) => void;
555
+ open?: boolean;
556
+ onOpenChange?: (open: boolean) => void;
557
+ align?: "start" | "end";
558
+ className?: string;
559
+ };
560
+ declare function FileUploadMenu({ jobs, labels: labelOverrides, onPause, onResume, onCancel, open, onOpenChange, align, className, }: FileUploadMenuProps): React.JSX.Element | null;
561
+
562
+ type CreateMultipartUploadControllerOptions = {
563
+ file: Blob;
564
+ partSize: number;
565
+ adapter: MultipartUploadAdapter;
566
+ onProgress?: (progress: UploadProgress) => void;
567
+ xhrFactory?: () => XMLHttpRequest;
568
+ sleep?: (ms: number) => Promise<void>;
569
+ completedParts?: MultipartUploadPart[];
570
+ };
571
+ type MultipartUploadController = {
572
+ start: () => Promise<void>;
573
+ pause: () => void;
574
+ resume: () => Promise<void>;
575
+ cancel: () => Promise<void>;
576
+ getStatus: () => UploadControllerStatus;
577
+ };
578
+ declare function createMultipartUploadController(options: CreateMultipartUploadControllerOptions): MultipartUploadController;
579
+
580
+ type PartRange = {
581
+ partNumber: number;
582
+ start: number;
583
+ end: number;
584
+ };
585
+ declare function partRanges(fileSize: number, partSize: number): PartRange[];
586
+ declare function progressFromBytes(loaded: number, total: number): {
587
+ loaded: number;
588
+ total: number;
589
+ percent: number;
590
+ };
591
+ declare function fileMatchesAccept(file: File, accept?: string): boolean;
592
+
593
+ declare function useMediaQuery(query: string): boolean;
594
+
595
+ declare function cn(...inputs: ClassValue[]): string;
596
+
597
+ type StatHighlightCardProps = {
598
+ label: string;
599
+ value: React.ReactNode;
600
+ hint?: string;
601
+ delta?: string;
602
+ deltaTone?: "up" | "down" | "neutral";
603
+ className?: string;
604
+ };
605
+ declare function StatHighlightCard({ label, value, hint, delta, deltaTone, className, }: StatHighlightCardProps): React.JSX.Element;
606
+
607
+ type MetricChartCardProps = {
608
+ title: string;
609
+ description?: string;
610
+ action?: React.ReactNode;
611
+ children: React.ReactNode;
612
+ className?: string;
613
+ };
614
+ declare function MetricChartCard({ title, description, action, children, className, }: MetricChartCardProps): React.JSX.Element;
615
+
616
+ type SparklineStatProps = {
617
+ label: string;
618
+ value: React.ReactNode;
619
+ points: number[];
620
+ className?: string;
621
+ };
622
+ declare function SparklineStat({ label, value, points, className, }: SparklineStatProps): React.JSX.Element;
623
+
624
+ declare const TIME_RANGE_OPTIONS: readonly ["day", "week", "month", "year"];
625
+ type TimeRange = (typeof TIME_RANGE_OPTIONS)[number];
626
+ type TimeRangePickerLabels = Partial<Record<TimeRange, string>>;
627
+ type TimeRangePickerProps = {
628
+ value: TimeRange;
629
+ onChange: (value: TimeRange) => void;
630
+ labels?: TimeRangePickerLabels;
631
+ className?: string;
632
+ };
633
+ declare function TimeRangePicker({ value, onChange, labels, className, }: TimeRangePickerProps): React.JSX.Element;
634
+
635
+ type DimensionBreakdownRow = {
636
+ id: string;
637
+ label: string;
638
+ value: React.ReactNode;
639
+ share?: string;
640
+ };
641
+ type DimensionBreakdownTableProps = {
642
+ title?: string;
643
+ rows: DimensionBreakdownRow[];
644
+ empty?: React.ReactNode;
645
+ className?: string;
646
+ };
647
+ declare function DimensionBreakdownTable({ title, rows, empty, className, }: DimensionBreakdownTableProps): React.JSX.Element;
648
+
649
+ type CostBreakdownItem = {
650
+ id: string;
651
+ label: string;
652
+ amount: React.ReactNode;
653
+ basis?: string;
654
+ };
655
+ type CostBreakdownCardProps = {
656
+ title: string;
657
+ total?: React.ReactNode;
658
+ items: CostBreakdownItem[];
659
+ className?: string;
660
+ };
661
+ declare function CostBreakdownCard({ title, total, items, className, }: CostBreakdownCardProps): React.JSX.Element;
662
+
663
+ type MetricEmptyStateProps = {
664
+ title: string;
665
+ description?: string;
666
+ action?: React.ReactNode;
667
+ icon?: EmptyStateIcon;
668
+ className?: string;
669
+ };
670
+ declare function MetricEmptyState({ title, description, action, icon, className, }: MetricEmptyStateProps): React.JSX.Element;
671
+
672
+ type MetricSkeletonProps = {
673
+ className?: string;
674
+ bars?: number;
675
+ };
676
+ declare function MetricSkeleton({ className, bars }: MetricSkeletonProps): React.JSX.Element;
677
+
678
+ type CookieConsentBannerLabels = {
679
+ message: string;
680
+ acceptAll: string;
681
+ necessaryOnly: string;
682
+ policy: string;
683
+ };
684
+ declare const DEFAULT_COOKIE_CONSENT_BANNER_LABELS: CookieConsentBannerLabels;
685
+ type CookieConsentBannerProps = {
686
+ domain?: string;
687
+ policyHref?: string;
688
+ labels?: Partial<CookieConsentBannerLabels>;
689
+ onChoice?: (value: CookieConsentValue) => void;
690
+ variant?: "default" | "embed";
691
+ className?: string;
692
+ };
693
+ declare function CookieConsentBanner({ domain, policyHref, labels, onChoice, variant, className, }: CookieConsentBannerProps): React.JSX.Element | null;
694
+
695
+ type LegalAcceptDialogLabels = {
696
+ title: string;
697
+ description: string;
698
+ accept: string;
699
+ terms: string;
700
+ privacy: string;
701
+ };
702
+ declare const DEFAULT_LEGAL_ACCEPT_DIALOG_LABELS: LegalAcceptDialogLabels;
703
+ type LegalAcceptDialogProps = {
704
+ open: boolean;
705
+ termsHref: string;
706
+ privacyHref: string;
707
+ summary?: string;
708
+ accepting?: boolean;
709
+ labels?: Partial<LegalAcceptDialogLabels>;
710
+ onAccept: () => void;
711
+ };
712
+ declare function LegalAcceptDialog({ open, termsHref, privacyHref, summary, accepting, labels, onAccept, }: LegalAcceptDialogProps): React.JSX.Element;
713
+
714
+ type LegalAcceptCheckboxLabels = {
715
+ label: string;
716
+ terms: string;
717
+ privacy: string;
718
+ };
719
+ declare const DEFAULT_LEGAL_ACCEPT_CHECKBOX_LABELS: LegalAcceptCheckboxLabels;
720
+ type LegalAcceptCheckboxProps = {
721
+ id?: string;
722
+ checked: boolean;
723
+ onCheckedChange: (checked: boolean) => void;
724
+ termsHref: string;
725
+ privacyHref: string;
726
+ labels?: Partial<LegalAcceptCheckboxLabels>;
727
+ disabled?: boolean;
728
+ className?: string;
729
+ };
730
+ declare function LegalAcceptCheckbox({ id, checked, onCheckedChange, termsHref, privacyHref, labels, disabled, className, }: LegalAcceptCheckboxProps): React.JSX.Element;
731
+
732
+ type LegalMarkdownProps = {
733
+ markdown: string;
734
+ className?: string;
735
+ };
736
+ declare function LegalMarkdown({ markdown, className }: LegalMarkdownProps): React.JSX.Element;
737
+
738
+ type AuditActor = {
739
+ kind: string;
740
+ id: string;
741
+ organizationRole?: string | null;
742
+ };
743
+ type AuditSubject = {
744
+ type: string;
745
+ id: string;
746
+ };
747
+ type AuditTimelineItem = {
748
+ id: string;
749
+ type: string;
750
+ occurredAt: number;
751
+ actor: AuditActor;
752
+ subject: AuditSubject;
753
+ summary: string;
754
+ };
755
+ type AuditTimelineLabels = {
756
+ emptyTitle: string;
757
+ emptyDescription: string;
758
+ actor: string;
759
+ subject: string;
760
+ };
761
+ declare const DEFAULT_AUDIT_TIMELINE_LABELS: AuditTimelineLabels;
762
+ type AuditTimelineProps = {
763
+ items: AuditTimelineItem[];
764
+ labels?: Partial<AuditTimelineLabels>;
765
+ /** Single primary action shown only when the timeline is empty. */
766
+ emptyAction?: ReactNode;
767
+ className?: string;
768
+ formatOccurredAt?: (occurredAt: number) => string;
769
+ };
770
+ declare function AuditTimeline({ items, labels, emptyAction, className, formatOccurredAt: format, }: AuditTimelineProps): React.JSX.Element;
771
+
772
+ type RiskSeverity = "low" | "medium" | "high";
773
+ type RiskBadgeLabels = {
774
+ low: string;
775
+ medium: string;
776
+ high: string;
777
+ unverifiedRule: string;
778
+ };
779
+ declare const DEFAULT_RISK_BADGE_LABELS: RiskBadgeLabels;
780
+ type RiskBadgeProps = {
781
+ severity: RiskSeverity;
782
+ /** When false, the badge also shows the unverified-rule label. */
783
+ smeVerified?: boolean;
784
+ labels?: Partial<RiskBadgeLabels>;
785
+ className?: string;
786
+ };
787
+ declare function RiskBadge({ severity, smeVerified, labels, className, }: RiskBadgeProps): React.JSX.Element;
788
+
789
+ type EntityGraphNode = {
790
+ id: string;
791
+ label: string;
792
+ kind: string;
793
+ };
794
+ type ControlKind = "ownership" | "other_means" | "senior_manager";
795
+ type EntityGraphEdge = {
796
+ from: string;
797
+ to: string;
798
+ controlKind: ControlKind;
799
+ ownershipBps?: number;
800
+ };
801
+ type EntityGraphLabels = {
802
+ emptyTitle: string;
803
+ emptyDescription: string;
804
+ ownership: string;
805
+ otherMeans: string;
806
+ seniorManager: string;
807
+ };
808
+ declare const DEFAULT_ENTITY_GRAPH_LABELS: EntityGraphLabels;
809
+ type EntityGraphProps = {
810
+ nodes: EntityGraphNode[];
811
+ edges: EntityGraphEdge[];
812
+ labels?: Partial<EntityGraphLabels>;
813
+ emptyAction?: ReactNode;
814
+ className?: string;
815
+ };
816
+ declare function EntityGraph({ nodes, edges, labels, emptyAction, className, }: EntityGraphProps): React.JSX.Element;
817
+
818
+ type MatchReviewSource = {
819
+ url: string;
820
+ title: string;
821
+ };
822
+ type MatchReviewStatus = "pending" | "confirmed" | "dismissed";
823
+ type MatchReviewHit = {
824
+ source: string;
825
+ score?: number;
826
+ matchedFields: string[];
827
+ status: MatchReviewStatus;
828
+ unverified?: boolean;
829
+ sources?: MatchReviewSource[];
830
+ };
831
+ type MatchReviewLabels = {
832
+ emptyTitle: string;
833
+ emptyDescription: string;
834
+ source: string;
835
+ score: string;
836
+ matchedFields: string;
837
+ noMatchedFields: string;
838
+ status: string;
839
+ unverified: string;
840
+ reason: string;
841
+ reasonPlaceholder: string;
842
+ confirm: string;
843
+ dismiss: string;
844
+ };
845
+ declare const DEFAULT_MATCH_REVIEW_LABELS: MatchReviewLabels;
846
+ type MatchReviewProps = {
847
+ hit: MatchReviewHit | null;
848
+ onResolve: (status: "confirmed" | "dismissed", reason: string) => void;
849
+ labels?: Partial<MatchReviewLabels>;
850
+ /** Optional map from source identifiers such as `sat69b` to display copy. */
851
+ sourceLabels?: Record<string, string>;
852
+ emptyAction?: ReactNode;
853
+ className?: string;
854
+ };
855
+ declare function sourceUrlIsHttps(url: string): boolean;
856
+ declare function matchClaimIsUnverified(hit: MatchReviewHit): boolean;
857
+ declare function MatchReview({ hit, onResolve, labels, sourceLabels, emptyAction, className, }: MatchReviewProps): React.JSX.Element;
858
+
859
+ export { type AuditActor, type AuditSubject, AuditTimeline, type AuditTimelineItem, type AuditTimelineLabels, type AuditTimelineProps, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorLabels, type AvatarEditorProps, type BlocksLanguage, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ControlKind, CookieConsentBanner, type CookieConsentBannerLabels, type CookieConsentBannerProps, CookieConsentValue, CostBreakdownCard, type CostBreakdownCardProps, type CostBreakdownItem, type CreateMultipartUploadControllerOptions, DEFAULT_AUDIT_TIMELINE_LABELS, DEFAULT_COOKIE_CONSENT_BANNER_LABELS, DEFAULT_EDITABLE_SECTION_LABELS, DEFAULT_ENTITY_GRAPH_LABELS, DEFAULT_FILE_DROPZONE_LABELS, DEFAULT_FILE_UPLOAD_LABELS, DEFAULT_FILE_UPLOAD_TRAY_LABELS, DEFAULT_LEGAL_ACCEPT_CHECKBOX_LABELS, DEFAULT_LEGAL_ACCEPT_DIALOG_LABELS, DEFAULT_MATCH_REVIEW_LABELS, DEFAULT_NOTIFICATION_BELL_LABELS, DEFAULT_RISK_BADGE_LABELS, DataList, DataListItem, type DataListItemProps, type DataListProps, type DimensionBreakdownRow, DimensionBreakdownTable, type DimensionBreakdownTableProps, EditableSection, type EditableSectionLabels, type EditableSectionMode, type EditableSectionProps, type EditableSectionSlots, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, EntityGraph, type EntityGraphEdge, type EntityGraphLabels, type EntityGraphNode, type EntityGraphProps, ErrorState, FieldMessage, type FieldMessageProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, FileUploadMenu, type FileUploadMenuProps, FileUploadTray, type FileUploadTrayLabels, type FileUploadTrayProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LegalAcceptCheckbox, type LegalAcceptCheckboxLabels, type LegalAcceptCheckboxProps, LegalAcceptDialog, type LegalAcceptDialogLabels, type LegalAcceptDialogProps, LegalMarkdown, type LegalMarkdownProps, LoadingState, MatchReview, type MatchReviewHit, type MatchReviewLabels, type MatchReviewProps, type MatchReviewSource, type MatchReviewStatus, MetricChartCard, type MetricChartCardProps, MetricEmptyState, type MetricEmptyStateProps, MetricSkeleton, type MetricSkeletonProps, type MultipartUploadAdapter, type MultipartUploadController, type MultipartUploadPart, NotificationBell, type NotificationBellItem, type NotificationBellLabels, type NotificationBellProps, type PartRange, RiskBadge, type RiskBadgeLabels, type RiskBadgeProps, type RiskSeverity, SafeImage, type SafeImageProps, SparklineStat, type SparklineStatProps, StatHighlightCard, type StatHighlightCardProps, TIME_RANGE_OPTIONS, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type TimeRange, TimeRangePicker, type TimeRangePickerLabels, type TimeRangePickerProps, type UploadControllerStatus, type UploadJob, type UploadJobStatus, type UploadProgress, type UseEditableSectionOptions, type UseEditableSectionResult, cn, createMultipartUploadController, defaultLanguages, fileMatchesAccept, matchClaimIsUnverified, partRanges, progressFromBytes, sourceUrlIsHttps, useEditableSection, useLanguageContext, useMediaQuery };