@larose-ui/react 0.1.1 → 0.1.2

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 (4) hide show
  1. package/dist/index.css +7655 -1294
  2. package/dist/index.d.ts +2253 -12
  3. package/dist/index.js +11836 -1262
  4. package/package.json +7 -6
package/dist/index.d.ts CHANGED
@@ -1,18 +1,36 @@
1
1
  import * as react from 'react';
2
- import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
3
- import { Variant, Size, UIState, ThemeMode, Density } from '@larose-ui/core';
2
+ import { ButtonHTMLAttributes, ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, ElementType, ImgHTMLAttributes, IframeHTMLAttributes, ReactElement, MouseEvent } from 'react';
3
+ import { Variant, Size, ButtonRole, UIState, MotionSemanticPreset, ReducedMotionPolicy, ThemeMode, Density, SpringPresetName, TypographyRole } from '@larose-ui/core';
4
4
  export { ApiError, AsyncState, Density, Environment, LAROSE_VERSION, Permission, Size, ThemeMode, UIState, Variant } from '@larose-ui/core';
5
5
  import { ColorTokens } from '@larose-ui/tokens';
6
- export { ColorTokens, TokenSet, applyTokensToElement, getTokens, tokensToCSSVariables } from '@larose-ui/tokens';
6
+ export { ColorTokens, DRAG_START_THRESHOLD_PX, MAX_HOME_SCREEN_QUICK_ACTIONS, MAX_ORNAMENTS, TokenSet, applyTokensToElement, getTokens, tokensToCSSVariables } from '@larose-ui/tokens';
7
+
8
+ type ButtonShape = 'capsule' | 'circle' | 'roundedRect';
9
+ type ButtonPlatformSize = 'mini' | 'sm' | 'md' | 'lg' | 'xl';
7
10
 
8
11
  interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
9
12
  variant?: Variant;
10
13
  size?: Size;
14
+ /** Apple HIG semantic role — affects appearance in alerts and sheets. */
15
+ buttonRole?: ButtonRole;
16
+ /** Capsule (default), circle (icon-only), or roundedRect (vertical stacks). */
17
+ shape?: ButtonShape;
11
18
  state?: UIState;
12
19
  loading?: boolean;
20
+ /** Alternative label shown while loading (Apple HIG activity indicator pattern). */
21
+ loadingLabel?: string;
13
22
  error?: string | null;
14
23
  leftIcon?: ReactNode;
15
24
  rightIcon?: ReactNode;
25
+ /** macOS: append trailing ellipsis when the button opens another view. */
26
+ opensAnotherView?: boolean;
27
+ /** macOS flexible-height push button for multi-line content. */
28
+ flexible?: boolean;
29
+ iconOnly?: boolean;
30
+ /** watchOS-style full-width primary actions. */
31
+ fullWidth?: boolean;
32
+ /** macOS / visionOS hover tooltip. */
33
+ tooltip?: string;
16
34
  }
17
35
  declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
18
36
 
@@ -26,17 +44,163 @@ interface AsyncButtonProps extends Omit<ButtonProps, 'onClick' | 'loading' | 'er
26
44
  }
27
45
  declare function AsyncButton({ action, onSuccess, onError, children, variant, size, disabled, ...props }: AsyncButtonProps): react.JSX.Element;
28
46
 
47
+ type PresencePhase = 'mounting' | 'entering' | 'entered' | 'exiting' | 'exited';
48
+ type MotionVariant = 'fade' | 'fade-scale' | 'fade-slide-up' | 'fade-slide-down' | 'fade-slide-left' | 'fade-slide-right' | 'modal' | 'backdrop' | 'toast' | 'popover' | 'drawer-left' | 'drawer-right';
49
+ interface MotionConfig {
50
+ /** Global motion preset. `none` disables animations. */
51
+ preset?: MotionSemanticPreset;
52
+ /** How to respect system reduced-motion. */
53
+ reducedMotion?: ReducedMotionPolicy;
54
+ }
55
+
56
+ interface MotionContextValue {
57
+ preset: MotionSemanticPreset;
58
+ reducedMotion: ReducedMotionPolicy;
59
+ prefersReducedMotion: boolean;
60
+ motionEnabled: boolean;
61
+ }
62
+ declare function useMotion(): MotionContextValue;
63
+ interface MotionProviderProps extends MotionConfig {
64
+ children: ReactNode;
65
+ }
66
+ declare function MotionProvider({ children, preset, reducedMotion, }: MotionProviderProps): react.JSX.Element;
67
+ /** Returns whether a specific animation should run. */
68
+ declare function useMotionEnabled(): boolean;
69
+ declare function useSkipMotion(): boolean;
70
+
29
71
  interface LaRoseConfig {
30
72
  theme?: ThemeMode;
31
73
  density?: Density;
32
74
  tenantId?: string;
33
75
  brandColors?: Partial<ColorTokens>;
76
+ motion?: MotionConfig;
34
77
  }
35
78
  declare function useLaRose(): LaRoseConfig;
36
79
  interface LaRoseProviderProps extends LaRoseConfig {
37
80
  children: ReactNode;
38
81
  }
39
- declare function LaRoseProvider({ children, theme, density, tenantId, brandColors, }: LaRoseProviderProps): react.JSX.Element;
82
+ declare function LaRoseProvider({ children, theme, density, tenantId, brandColors, motion, }: LaRoseProviderProps): react.JSX.Element;
83
+
84
+ interface PresenceProps {
85
+ present: boolean;
86
+ children: ReactNode;
87
+ variant?: MotionVariant;
88
+ /** Placement hint for spatial variants (toast, popover). */
89
+ placement?: string;
90
+ className?: string;
91
+ style?: CSSProperties;
92
+ onExitComplete?: () => void;
93
+ /** When true, skip exit animation and unmount immediately. */
94
+ immediate?: boolean;
95
+ }
96
+ /**
97
+ * Keeps children mounted during exit animations and applies motion CSS classes.
98
+ * Pass a single React element child to merge props onto it.
99
+ */
100
+ declare function Presence({ present, children, variant, placement, className, style, onExitComplete, immediate, }: PresenceProps): react.JSX.Element | null;
101
+
102
+ interface UsePresenceOptions {
103
+ present: boolean;
104
+ onExitComplete?: () => void;
105
+ }
106
+ interface UsePresenceResult {
107
+ phase: PresencePhase;
108
+ shouldRender: boolean;
109
+ onAnimationEnd: (event: React.AnimationEvent) => void;
110
+ }
111
+ /**
112
+ * Manages mount/unmount lifecycle with enter and exit animation phases.
113
+ * Uses a mounting frame so CSS keyframe animations can run from their `from` state.
114
+ */
115
+ declare function usePresence({ present, onExitComplete, }: UsePresenceOptions): UsePresenceResult;
116
+
117
+ interface UseSpringAnimationOptions {
118
+ target: number;
119
+ preset?: SpringPresetName;
120
+ enabled?: boolean;
121
+ onSettle?: () => void;
122
+ }
123
+ /**
124
+ * RAF-driven spring animation for interruptible gesture release (drawers, sheets).
125
+ * Continues from current position and velocity when target changes.
126
+ */
127
+ declare function useSpringAnimation({ target, preset, enabled, onSettle, }: UseSpringAnimationOptions): {
128
+ value: number;
129
+ setValue: (value: number, velocity?: number) => void;
130
+ style: CSSProperties;
131
+ };
132
+ interface CollapseProps {
133
+ open: boolean;
134
+ children: ReactNode;
135
+ className?: string;
136
+ duration?: string;
137
+ }
138
+ /**
139
+ * Height-based expand/collapse with measured content height.
140
+ * Uses transform-friendly opacity + grid technique where possible.
141
+ */
142
+ declare function Collapse({ open, children, className, duration }: CollapseProps): react.JSX.Element;
143
+
144
+ interface HelpButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
145
+ /** Brief phrase explaining what help covers (macOS / visionOS tooltip). */
146
+ helpTopic?: string;
147
+ }
148
+ /**
149
+ * Circular help button — one per window, lower corner of dialogs/settings.
150
+ * @see https://developer.apple.com/design/human-interface-guidelines/buttons
151
+ */
152
+ declare const HelpButton: react.ForwardRefExoticComponent<HelpButtonProps & react.RefAttributes<HTMLButtonElement>>;
153
+
154
+ interface SquareButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
155
+ /** Symbol or icon — square buttons use icons, not text labels. */
156
+ icon: ReactNode;
157
+ tooltip?: string;
158
+ /** Toggle or pop-up behavior is handled by the parent; appearance only. */
159
+ pressed?: boolean;
160
+ }
161
+ /**
162
+ * Small square button for in-view actions (add/remove rows, etc.).
163
+ * @see https://developer.apple.com/design/human-interface-guidelines/buttons
164
+ */
165
+ declare const SquareButton: react.ForwardRefExoticComponent<SquareButtonProps & react.RefAttributes<HTMLButtonElement>>;
166
+
167
+ interface ButtonGroupProps {
168
+ children: ReactNode;
169
+ /** Horizontal row (default) or vertical stack for visionOS guidance. */
170
+ orientation?: 'horizontal' | 'vertical';
171
+ /** Full-width buttons for watchOS-style primary actions. */
172
+ fullWidth?: boolean;
173
+ className?: string;
174
+ 'aria-label'?: string;
175
+ }
176
+ /**
177
+ * Same-size button set — use style, not size, to distinguish the preferred option.
178
+ */
179
+ declare function ButtonGroup({ children, orientation, fullWidth, className, 'aria-label': ariaLabel, }: ButtonGroupProps): react.JSX.Element;
180
+
181
+ declare function formatButtonLabel(label: string, opensAnotherView?: boolean): string;
182
+ declare function resolveButtonShape(options: {
183
+ shape?: ButtonShape;
184
+ iconOnly?: boolean;
185
+ hasText: boolean;
186
+ hasIcon: boolean;
187
+ }): ButtonShape;
188
+
189
+ type FieldFormat = 'number' | 'currency' | 'percent';
190
+ type FieldValidator = (value: string) => string | null;
191
+ interface FormatFieldOptions {
192
+ locale?: string;
193
+ currency?: string;
194
+ minimumFractionDigits?: number;
195
+ maximumFractionDigits?: number;
196
+ }
197
+ declare function createRequiredValidator(message?: string): FieldValidator;
198
+ declare function createEmailValidator(message?: string): FieldValidator;
199
+ declare function combineValidators(...validators: FieldValidator[]): FieldValidator;
200
+ declare function parseNumericInput(value: string): number | null;
201
+ declare function formatFieldValue(value: string, format: FieldFormat, options?: FormatFieldOptions): string;
202
+ declare function isFormComplete(values: Record<string, string>, requiredKeys: string[]): boolean;
203
+ declare function fieldIdFromLabel(label: string): string;
40
204
 
41
205
  interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
42
206
  label?: string;
@@ -45,9 +209,38 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
45
209
  loading?: boolean;
46
210
  error?: string | null;
47
211
  inputSize?: Size;
212
+ /** Shows a required indicator and sets the native required attribute. */
213
+ required?: boolean;
214
+ /** Validates on blur or change and surfaces inline feedback immediately. */
215
+ validate?: FieldValidator;
216
+ validateOn?: 'blur' | 'change';
217
+ /** Formats numeric values on blur (currency, percent, number). */
218
+ format?: FieldFormat;
219
+ formatOptions?: FormatFieldOptions;
220
+ /** macOS-style expansion tooltip when truncated text overflows the field. */
221
+ expansionTooltip?: boolean;
222
+ /** Accept plain-text drops into the field. */
223
+ acceptDrop?: boolean;
48
224
  }
49
225
  declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
50
226
 
227
+ type SecureFieldProps = Omit<InputProps, 'type' | 'defaultValue'>;
228
+ /**
229
+ * Password entry that follows Apple HIG: never prepopulate sensitive fields.
230
+ * @see https://developer.apple.com/design/human-interface-guidelines/entering-data
231
+ */
232
+ declare const SecureField: react.ForwardRefExoticComponent<SecureFieldProps & react.RefAttributes<HTMLInputElement>>;
233
+
234
+ interface FormContinueProps extends ButtonProps {
235
+ /** When false, Continue stays disabled until required data is entered. */
236
+ complete: boolean;
237
+ }
238
+ /**
239
+ * Continue/Next control that stays disabled until required fields are filled.
240
+ * @see https://developer.apple.com/design/human-interface-guidelines/entering-data
241
+ */
242
+ declare function FormContinue({ complete, disabled, children, ...props }: FormContinueProps): react.JSX.Element;
243
+
51
244
  interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
52
245
  label?: string;
53
246
  hint?: string;
@@ -55,6 +248,7 @@ interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
55
248
  loading?: boolean;
56
249
  error?: string | null;
57
250
  inputSize?: Size;
251
+ required?: boolean;
58
252
  }
59
253
  declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
60
254
 
@@ -71,6 +265,7 @@ interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
71
265
  loading?: boolean;
72
266
  error?: string | null;
73
267
  inputSize?: Size;
268
+ required?: boolean;
74
269
  }
75
270
  declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
76
271
 
@@ -126,6 +321,66 @@ interface AlertProps {
126
321
  }
127
322
  declare function Alert({ variant, title, children, onDismiss, }: AlertProps): react.JSX.Element;
128
323
 
324
+ /** Visual and interaction preset for modal alerts. */
325
+ type AlertDialogPresentation = 'compact' | 'tablet' | 'desktop' | 'spatial' | 'tv' | 'wearable';
326
+ type AlertDialogActionRole = 'default' | 'cancel' | 'destructive';
327
+ interface AlertDialogAction {
328
+ id: string;
329
+ label: string;
330
+ role?: AlertDialogActionRole;
331
+ /** Deliberate destructive actions omit emphasized destructive styling. */
332
+ deliberate?: boolean;
333
+ onSelect?: () => void;
334
+ }
335
+ interface AlertDialogTextField {
336
+ label?: string;
337
+ placeholder?: string;
338
+ secure?: boolean;
339
+ value?: string;
340
+ defaultValue?: string;
341
+ onChange?: (value: string) => void;
342
+ }
343
+ interface AlertDialogSuppression {
344
+ label: string;
345
+ checked?: boolean;
346
+ defaultChecked?: boolean;
347
+ onChange?: (checked: boolean) => void;
348
+ }
349
+ interface AlertDialogProps {
350
+ open: boolean;
351
+ onOpenChange: (open: boolean) => void;
352
+ title: string;
353
+ message?: string;
354
+ actions: AlertDialogAction[];
355
+ presentation?: AlertDialogPresentation;
356
+ icon?: ReactNode;
357
+ /** Use sparingly for unexpected data loss. */
358
+ showCautionIcon?: boolean;
359
+ textField?: AlertDialogTextField;
360
+ suppression?: AlertDialogSuppression;
361
+ helpUrl?: string;
362
+ accessory?: ReactNode;
363
+ /** When unset, no button receives default keyboard focus styling. */
364
+ defaultActionId?: string;
365
+ className?: string;
366
+ }
367
+ interface AlertDialogButtonLayout {
368
+ ordered: AlertDialogAction[];
369
+ layout: 'row' | 'stack';
370
+ }
371
+
372
+ declare const MAX_ALERT_BUTTONS = 3;
373
+ declare function warnIfAlertTitleTooLong(title: string): void;
374
+ declare function validateAlertActions(actions: AlertDialogAction[]): void;
375
+ declare function orderAlertActions(actions: AlertDialogAction[], presentation: 'compact' | 'tablet' | 'desktop' | 'spatial' | 'tv' | 'wearable'): AlertDialogButtonLayout;
376
+ declare function resolveCancelAction(actions: AlertDialogAction[]): AlertDialogAction | undefined;
377
+ declare function shouldStyleDestructive(action: AlertDialogAction): boolean;
378
+
379
+ /**
380
+ * Modal alert — critical, actionable interruption with up to three buttons.
381
+ */
382
+ declare function AlertDialog({ open, onOpenChange, title, message, actions, presentation, icon, showCautionIcon, textField, suppression, helpUrl, accessory, defaultActionId, className, }: AlertDialogProps): react.ReactPortal | null;
383
+
129
384
  interface ModalProps {
130
385
  open: boolean;
131
386
  onClose: () => void;
@@ -150,6 +405,311 @@ interface DialogProps {
150
405
  }
151
406
  declare function Dialog({ open, onClose, title, description, children, confirmLabel, cancelLabel, onConfirm, loading, variant, }: DialogProps): react.JSX.Element;
152
407
 
408
+ type ChartMark = 'bar' | 'line' | 'point';
409
+ type PointShape = 'circle' | 'diamond' | 'square';
410
+ interface ChartDataPoint {
411
+ x: string | number;
412
+ y: number;
413
+ accessibilityLabel?: string;
414
+ }
415
+ interface ChartSeries {
416
+ id: string;
417
+ label: string;
418
+ data: ChartDataPoint[];
419
+ color?: string;
420
+ pointShape?: PointShape;
421
+ }
422
+ interface ChartAxisConfig {
423
+ label?: string;
424
+ /** Fixed lower bound. Omit with `max` for dynamic range. */
425
+ min?: number;
426
+ /** Fixed upper bound. Omit with `min` for dynamic range. */
427
+ max?: number;
428
+ /** Hide axis line and ticks. */
429
+ hidden?: boolean;
430
+ /** Number of tick marks (approximate). */
431
+ tickCount?: number;
432
+ formatValue?: (value: number) => string;
433
+ formatCategory?: (value: string | number) => string;
434
+ }
435
+ interface ChartLegendItem {
436
+ id: string;
437
+ label: string;
438
+ color: string;
439
+ shape?: PointShape;
440
+ }
441
+
442
+ interface ChartProps {
443
+ /** Chart mark type — bar, line, or point. */
444
+ mark?: ChartMark;
445
+ /** Single-series shorthand. */
446
+ data?: ChartDataPoint[];
447
+ /** One or more data series. */
448
+ series?: ChartSeries[];
449
+ title?: string;
450
+ subtitle?: string;
451
+ annotation?: string;
452
+ /** High-level summary for assistive technologies (Apple Audio Graphs pattern). */
453
+ accessibilitySummary?: string;
454
+ xAxis?: ChartAxisConfig;
455
+ yAxis?: ChartAxisConfig;
456
+ /** Combine line marks with point marks. Default true for line charts. */
457
+ showPoints?: boolean;
458
+ /** Stack bar marks when multiple series are present. */
459
+ stacked?: boolean;
460
+ /** Gap between stacked bar segments (Apple HIG visual separation). */
461
+ stackGap?: number;
462
+ /** Plot height in CSS pixels. */
463
+ height?: number;
464
+ /** Enable plot-area scrubbing with crosshair. */
465
+ interactive?: boolean;
466
+ /** Y axis on trailing edge (right in LTR) for layout alignment. */
467
+ yAxisTrailing?: boolean;
468
+ showLegend?: boolean;
469
+ className?: string;
470
+ onPointFocus?: (point: ChartDataPoint, seriesId: string, index: number) => void;
471
+ }
472
+ declare function Chart({ mark, data, series: seriesProp, title, subtitle, annotation, accessibilitySummary, xAxis, yAxis, showPoints, stacked, stackGap, height, interactive, yAxisTrailing, showLegend, className, onPointFocus, }: ChartProps): react.JSX.Element;
473
+
474
+ interface ShareButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
475
+ label?: string;
476
+ }
477
+ /** Toolbar share control — Apple HIG placement next to document actions. */
478
+ declare const ShareButton: react.ForwardRefExoticComponent<ShareButtonProps & react.RefAttributes<HTMLButtonElement>>;
479
+
480
+ type SharePermission = 'view' | 'edit';
481
+ type ShareAudience = 'invited' | 'everyone';
482
+ type ActivityKind = 'app' | 'share' | 'action';
483
+ type SystemActivityId = 'copy' | 'print' | 'add-to-files' | 'markup' | 'airplay' | 'save-to-photos' | 'assign-to-contact';
484
+ type ActivityPresentation = 'sheet' | 'popover';
485
+ interface Collaborator {
486
+ id: string;
487
+ name: string;
488
+ avatarUrl?: string;
489
+ initials?: string;
490
+ }
491
+ interface ShareDestination {
492
+ id: string;
493
+ label: string;
494
+ icon?: ReactNode;
495
+ onSelect?: () => void;
496
+ }
497
+ interface SharePermissionOption {
498
+ id: string;
499
+ audience: ShareAudience;
500
+ permission: SharePermission;
501
+ label: string;
502
+ description?: string;
503
+ }
504
+ interface CollaborationAction {
505
+ id: string;
506
+ label: string;
507
+ description?: string;
508
+ onSelect?: () => void;
509
+ }
510
+ interface ShareSettings {
511
+ audience: ShareAudience;
512
+ permission: SharePermission;
513
+ allowInvites?: boolean;
514
+ }
515
+ interface ActivityItem {
516
+ id: string;
517
+ title: string;
518
+ /** Share destinations show a subtitle (e.g. app or service name) below the icon. */
519
+ subtitle?: string;
520
+ icon?: ReactNode;
521
+ kind: ActivityKind;
522
+ /** Marks built-in system activities that can be excluded per context. */
523
+ system?: boolean;
524
+ disabled?: boolean;
525
+ hidden?: boolean;
526
+ onSelect?: () => void;
527
+ }
528
+
529
+ interface ShareSheetProps {
530
+ open: boolean;
531
+ onClose: () => void;
532
+ title?: string;
533
+ settings: ShareSettings;
534
+ onSettingsChange?: (settings: ShareSettings) => void;
535
+ destinations?: ShareDestination[];
536
+ permissionOptions?: SharePermissionOption[];
537
+ footer?: ReactNode;
538
+ }
539
+ declare function ShareSheet({ open, onClose, title, settings, onSettingsChange, destinations, permissionOptions, footer, }: ShareSheetProps): react.ReactPortal | null;
540
+
541
+ interface CollaborationButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
542
+ collaborators: Collaborator[];
543
+ label?: string;
544
+ maxVisible?: number;
545
+ }
546
+ /** Displays active collaborators — Apple HIG Collaboration button pattern. */
547
+ declare const CollaborationButton: react.ForwardRefExoticComponent<CollaborationButtonProps & react.RefAttributes<HTMLButtonElement>>;
548
+
549
+ interface CollaborationPopoverProps {
550
+ trigger: ReactNode;
551
+ collaborators: Collaborator[];
552
+ actions?: CollaborationAction[];
553
+ manageLabel?: string;
554
+ onManage?: () => void;
555
+ onMessage?: () => void;
556
+ onVideo?: () => void;
557
+ open?: boolean;
558
+ defaultOpen?: boolean;
559
+ onOpenChange?: (open: boolean) => void;
560
+ }
561
+ /**
562
+ * Three-section collaboration popover per Apple HIG:
563
+ * collaborators + communication, custom actions, manage shared file.
564
+ */
565
+ declare function CollaborationPopover({ trigger, collaborators, actions, manageLabel, onManage, onMessage, onVideo, open, defaultOpen, onOpenChange, }: CollaborationPopoverProps): react.JSX.Element;
566
+
567
+ interface ShareToolbarProps {
568
+ /** Document or item title shown in the share sheet. */
569
+ shareTitle?: string;
570
+ /** When true, shows the Collaboration button beside Share. */
571
+ collaborating?: boolean;
572
+ collaborators?: Collaborator[];
573
+ shareSettings?: ShareSettings;
574
+ onShareSettingsChange?: (settings: ShareSettings) => void;
575
+ destinations?: ShareDestination[];
576
+ permissionOptions?: SharePermissionOption[];
577
+ collaborationActions?: CollaborationAction[];
578
+ onManageSharedFile?: () => void;
579
+ manageLabel?: string;
580
+ onMessage?: () => void;
581
+ onVideo?: () => void;
582
+ trailing?: ReactNode;
583
+ }
584
+ declare function ShareToolbar({ shareTitle, collaborating, collaborators, shareSettings, onShareSettingsChange, destinations, permissionOptions, collaborationActions, onManageSharedFile, manageLabel, onMessage, onVideo, trailing, }: ShareToolbarProps): react.JSX.Element;
585
+
586
+ interface ActivityViewProps {
587
+ open: boolean;
588
+ onClose: () => void;
589
+ activities: ActivityItem[];
590
+ excludedActivityIds?: string[];
591
+ presentation?: ActivityPresentation;
592
+ title?: string;
593
+ onActivitySelect?: (activity: ActivityItem) => void;
594
+ footer?: ReactNode;
595
+ /** Used for popover positioning when presentation is popover. */
596
+ anchorRef?: React.RefObject<HTMLElement | null>;
597
+ }
598
+ /**
599
+ * Activity view (share sheet) with sharing destinations and contextual actions.
600
+ * @see https://developer.apple.com/design/human-interface-guidelines/activity-views
601
+ */
602
+ declare function ActivityView({ open, onClose, activities, excludedActivityIds, presentation, title, onActivitySelect, footer, anchorRef, }: ActivityViewProps): react.ReactPortal | null;
603
+
604
+ interface ActivityShareButtonProps {
605
+ activities: ActivityItem[];
606
+ excludedActivityIds?: string[];
607
+ label?: string;
608
+ title?: string;
609
+ onActivitySelect?: (activity: ActivityItem) => void;
610
+ /** Uses popover on wide viewports and sheet on compact widths when auto. */
611
+ presentation?: 'sheet' | 'popover' | 'auto';
612
+ }
613
+ /**
614
+ * Share button that opens an activity view — the standard HIG entry point.
615
+ */
616
+ declare function ActivityShareButton({ activities, excludedActivityIds, label, title, onActivitySelect, presentation, }: ActivityShareButtonProps): react.JSX.Element;
617
+
618
+ /** Default share and action activities for demos and baselines. */
619
+ declare function createDefaultActivities(handlers?: Partial<Record<string, () => void>>): ActivityItem[];
620
+ /** Photos-style app-specific activities shown before system actions. */
621
+ declare function createPhotoActivities(handlers?: Partial<Record<string, () => void>>): ActivityItem[];
622
+
623
+ /** Succinct permission summary per Apple HIG collaboration guidance. */
624
+ declare function formatSharePermissionSummary(audience: ShareAudience, permission: SharePermission): string;
625
+
626
+ /** Built-in system activities available across apps. */
627
+ declare const SYSTEM_ACTIVITY_IDS: SystemActivityId[];
628
+ declare function formatActivityTitle(title: string): string;
629
+ declare function filterActivities(activities: ActivityItem[], excludedIds?: string[]): ActivityItem[];
630
+ /** App-specific activities appear before share destinations and system actions. */
631
+ declare function sortActivities(activities: ActivityItem[]): ActivityItem[];
632
+ declare function prepareActivities(activities: ActivityItem[], excludedIds?: string[]): ActivityItem[];
633
+
634
+ type DropOperation = 'move' | 'copy';
635
+ interface DragItem<T = unknown> {
636
+ id: string;
637
+ type?: string;
638
+ data: T;
639
+ sourceId: string;
640
+ preview?: ReactNode;
641
+ label?: string;
642
+ }
643
+ interface DragSession<T = unknown> {
644
+ items: DragItem<T>[];
645
+ sourceId: string;
646
+ pointerId: number;
647
+ startX: number;
648
+ startY: number;
649
+ x: number;
650
+ y: number;
651
+ }
652
+ interface DropTargetState {
653
+ zoneId: string;
654
+ valid: boolean;
655
+ }
656
+ interface DropResult<T = unknown> {
657
+ items: DragItem<T>[];
658
+ sourceId: string;
659
+ destinationId: string;
660
+ operation: DropOperation;
661
+ }
662
+
663
+ interface DragDropProviderProps {
664
+ children: ReactNode;
665
+ }
666
+ declare function DragDropProvider({ children }: DragDropProviderProps): react.JSX.Element;
667
+
668
+ interface DraggableProps<T = unknown> {
669
+ id: string;
670
+ sourceId: string;
671
+ data: T;
672
+ type?: string;
673
+ label?: string;
674
+ preview?: ReactNode;
675
+ disabled?: boolean;
676
+ children: ReactNode;
677
+ className?: string;
678
+ }
679
+ declare function Draggable<T>({ id, sourceId, data, type, label, preview, disabled, children, className, }: DraggableProps<T>): react.JSX.Element;
680
+
681
+ interface DropZoneProps<T = unknown> {
682
+ id: string;
683
+ accepts?: string | string[];
684
+ disabled?: boolean;
685
+ canDrop?: (items: DragItem<T>[]) => boolean;
686
+ onDrop: (result: DropResult<T>) => void | Promise<void>;
687
+ children: ReactNode;
688
+ className?: string;
689
+ showInvalidIndicator?: boolean;
690
+ transferring?: boolean;
691
+ transferringLabel?: string;
692
+ }
693
+ declare function DropZone<T>({ id, accepts, disabled, canDrop, onDrop, children, className, showInvalidIndicator, transferring, transferringLabel, }: DropZoneProps<T>): react.JSX.Element;
694
+
695
+ interface DragDropListItem {
696
+ id: string;
697
+ label: string;
698
+ type?: string;
699
+ }
700
+ interface DragDropListProps {
701
+ zoneId?: string;
702
+ items: DragDropListItem[];
703
+ onReorder: (items: DragDropListItem[]) => void;
704
+ renderItem?: (item: DragDropListItem) => ReactNode;
705
+ }
706
+ /** Reorderable list with Apple HIG drag feedback (same-container move). */
707
+ declare function DragDropList(props: DragDropListProps): react.JSX.Element;
708
+
709
+ /** Same container → move; different container → copy (Option forces copy). */
710
+ declare function resolveDropOperation(sourceId: string, destinationId: string, optionKey?: boolean): DropOperation;
711
+ declare function acceptsDragType(accepts: string | string[] | undefined, itemType: string | undefined): boolean;
712
+
153
713
  interface CardProps {
154
714
  title?: string;
155
715
  description?: string;
@@ -159,6 +719,349 @@ interface CardProps {
159
719
  }
160
720
  declare function Card({ title, description, children, footer, padding, }: CardProps): react.JSX.Element;
161
721
 
722
+ type BoxVariant = 'secondary' | 'tertiary';
723
+ type BoxTitlePosition = 'inside' | 'above';
724
+ interface CollectionItem {
725
+ id: string;
726
+ label?: string;
727
+ imageUrl?: string;
728
+ content?: ReactNode;
729
+ }
730
+ type CollectionLayout = 'row' | 'grid';
731
+ interface ColumnViewNode {
732
+ id: string;
733
+ label: string;
734
+ children?: ColumnViewNode[];
735
+ detail?: ReactNode;
736
+ meta?: Record<string, string>;
737
+ }
738
+
739
+ interface BoxProps {
740
+ title?: string;
741
+ /** macOS settings panes append a colon to the title. */
742
+ settingsStyle?: boolean;
743
+ titlePosition?: BoxTitlePosition;
744
+ variant?: BoxVariant;
745
+ padding?: 'sm' | 'md' | 'lg';
746
+ children: ReactNode;
747
+ className?: string;
748
+ 'aria-label'?: string;
749
+ }
750
+ /**
751
+ * Groups related content with secondary/tertiary background — keep compact vs its container.
752
+ * @see https://developer.apple.com/design/human-interface-guidelines/boxes
753
+ */
754
+ declare function Box({ title, settingsStyle, titlePosition, variant, padding, children, className, 'aria-label': ariaLabel, }: BoxProps): react.JSX.Element;
755
+
756
+ interface CollectionProps {
757
+ items: CollectionItem[];
758
+ layout?: CollectionLayout;
759
+ columns?: number;
760
+ selectedId?: string;
761
+ onSelect?: (item: CollectionItem) => void;
762
+ ariaLabel?: string;
763
+ }
764
+ /**
765
+ * Visual row or grid of image-based items with comfortable padding.
766
+ * @see https://developer.apple.com/design/human-interface-guidelines/collections
767
+ */
768
+ declare function Collection({ items, layout, columns, selectedId, onSelect, ariaLabel, }: CollectionProps): react.JSX.Element;
769
+
770
+ declare function formatBoxTitle(title: string, settingsStyle?: boolean): string;
771
+
772
+ interface ColumnViewProps {
773
+ data: ColumnViewNode[];
774
+ initialPath?: string[];
775
+ onPathChange?: (path: string[]) => void;
776
+ ariaLabel?: string;
777
+ }
778
+ /**
779
+ * Hierarchical browser with resizable columns and optional detail pane.
780
+ * @see https://developer.apple.com/design/human-interface-guidelines/column-views
781
+ */
782
+ declare function ColumnView({ data, initialPath, onPathChange, ariaLabel, }: ColumnViewProps): react.JSX.Element;
783
+
784
+ type LockupAxis = 'horizontal' | 'vertical' | 'grid';
785
+ type CaptionButtonContent = 'image' | 'text';
786
+
787
+ interface LockupProps {
788
+ header?: ReactNode;
789
+ footer?: ReactNode;
790
+ children: ReactNode;
791
+ axis?: LockupAxis;
792
+ focused?: boolean;
793
+ onFocus?: () => void;
794
+ onBlur?: () => void;
795
+ onClick?: () => void;
796
+ className?: string;
797
+ 'aria-label'?: string;
798
+ }
799
+ /**
800
+ * Header + content + footer unit that expands together on focus.
801
+ * @see https://developer.apple.com/design/human-interface-guidelines/lockups
802
+ */
803
+ declare function Lockup({ header, footer, children, axis, focused, onFocus, onBlur, onClick, className, 'aria-label': ariaLabel, }: LockupProps): react.JSX.Element;
804
+
805
+ interface LockupCardProps extends Omit<LockupProps, 'children'> {
806
+ rating: number;
807
+ review: string;
808
+ title?: string;
809
+ }
810
+ /** Card lockup for ratings and reviews. */
811
+ declare function LockupCard({ rating, review, title, header, ...props }: LockupCardProps): react.JSX.Element;
812
+ interface CaptionButtonProps extends Omit<LockupProps, 'children'> {
813
+ title: string;
814
+ subtitle?: string;
815
+ imageUrl?: string;
816
+ label?: string;
817
+ }
818
+ /** Caption button with optional image or text surface. */
819
+ declare function CaptionButton({ title, subtitle, imageUrl, label, footer, ...props }: CaptionButtonProps): react.JSX.Element;
820
+ interface MonogramProps extends Omit<LockupProps, 'children'> {
821
+ name: string;
822
+ imageUrl?: string;
823
+ role?: string;
824
+ }
825
+ /** Circular cast/crew monogram with image or initials fallback. */
826
+ declare function Monogram({ name, imageUrl, role, footer, ...props }: MonogramProps): react.JSX.Element;
827
+ interface PosterProps extends Omit<LockupProps, 'children'> {
828
+ imageUrl: string;
829
+ title?: string;
830
+ subtitle?: string;
831
+ }
832
+ /** Poster lockup — title/subtitle appear on focus. */
833
+ declare function Poster({ imageUrl, title, subtitle, ...props }: PosterProps): react.JSX.Element;
834
+ interface LockupRowProps {
835
+ children: ReactNode;
836
+ itemWidth?: string;
837
+ axis?: LockupAxis;
838
+ }
839
+ /** Row of equally sized lockups with adequate spacing. */
840
+ declare function LockupRow({ children, itemWidth, axis }: LockupRowProps): react.JSX.Element;
841
+
842
+ declare function getInitials(name: string): string;
843
+ declare function formatRating(value: number, max?: number): string;
844
+
845
+ interface TypographyProps {
846
+ role?: TypographyRole;
847
+ as?: ElementType;
848
+ children: ReactNode;
849
+ className?: string;
850
+ muted?: boolean;
851
+ }
852
+ declare function Typography({ role, as, children, className, muted, }: TypographyProps): react.JSX.Element;
853
+
854
+ type LabelImportance = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
855
+
856
+ interface LabelProps {
857
+ /** System label color indicating relative importance. */
858
+ importance?: LabelImportance;
859
+ /** Allow selecting/copying useful static text. */
860
+ selectable?: boolean;
861
+ children: ReactNode;
862
+ as?: ElementType;
863
+ className?: string;
864
+ mono?: boolean;
865
+ }
866
+ /**
867
+ * Static, non-editable text with system label colors.
868
+ * @see https://developer.apple.com/design/human-interface-guidelines/labels
869
+ */
870
+ declare function Label({ importance, selectable, children, as: Component, className, mono, }: LabelProps): react.JSX.Element;
871
+
872
+ interface DisclosureTriangleProps {
873
+ /** Describes what is disclosed, e.g. "Advanced options". */
874
+ label: string;
875
+ expanded?: boolean;
876
+ defaultExpanded?: boolean;
877
+ onExpandedChange?: (expanded: boolean) => void;
878
+ children?: ReactNode;
879
+ disabled?: boolean;
880
+ }
881
+ /**
882
+ * Leading-edge disclosure triangle — right when collapsed, down when expanded.
883
+ * @see https://developer.apple.com/design/human-interface-guidelines/disclosure-controls
884
+ */
885
+ declare function DisclosureTriangle({ label, expanded, defaultExpanded, onExpandedChange, children, disabled, }: DisclosureTriangleProps): react.JSX.Element;
886
+
887
+ interface DisclosureButtonProps {
888
+ /** Visible label for the adjacent control region. */
889
+ label?: string;
890
+ expanded?: boolean;
891
+ defaultExpanded?: boolean;
892
+ onExpandedChange?: (expanded: boolean) => void;
893
+ /** Control placed beside the disclosure button, e.g. Save As field. */
894
+ children: ReactNode;
895
+ /** Content revealed when expanded. Use only one disclosure button per view. */
896
+ detail?: ReactNode;
897
+ disabled?: boolean;
898
+ 'aria-label'?: string;
899
+ }
900
+ /**
901
+ * Push disclosure button — down when collapsed, up when expanded (macOS Save sheet pattern).
902
+ * @see https://developer.apple.com/design/human-interface-guidelines/disclosure-controls
903
+ */
904
+ declare function DisclosureButton({ label, expanded, defaultExpanded, onExpandedChange, children, detail, disabled, 'aria-label': ariaLabel, }: DisclosureButtonProps): react.JSX.Element;
905
+
906
+ interface DisclosureGroupProps {
907
+ label: string;
908
+ expanded?: boolean;
909
+ defaultExpanded?: boolean;
910
+ onExpandedChange?: (expanded: boolean) => void;
911
+ children: ReactNode;
912
+ disabled?: boolean;
913
+ }
914
+ /**
915
+ * SwiftUI DisclosureGroup-style wrapper for progressive reveal.
916
+ * @see https://developer.apple.com/design/human-interface-guidelines/disclosure-controls
917
+ */
918
+ declare function DisclosureGroup(props: DisclosureGroupProps): react.JSX.Element;
919
+ interface DisclosureListItem {
920
+ id: string;
921
+ label: string;
922
+ children?: DisclosureListItem[];
923
+ content?: ReactNode;
924
+ }
925
+ interface DisclosureListProps {
926
+ items: DisclosureListItem[];
927
+ defaultExpandedIds?: string[];
928
+ }
929
+ /** Finder-style hierarchical list with disclosure triangles. */
930
+ declare function DisclosureList({ items, defaultExpandedIds }: DisclosureListProps): react.JSX.Element;
931
+
932
+ type ImageFit = 'fill' | 'contain' | 'cover' | 'scale-down' | 'none';
933
+ type ImageBackground = 'transparent' | 'opaque';
934
+ interface ImageFrameSequence {
935
+ /** URLs for each frame — use consistent dimensions for best performance. */
936
+ frames: string[];
937
+ /** Interval between frames in milliseconds. */
938
+ intervalMs?: number;
939
+ }
940
+
941
+ interface ImageViewProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
942
+ src?: string;
943
+ alt: string;
944
+ fit?: ImageFit;
945
+ objectPosition?: string;
946
+ background?: ImageBackground;
947
+ /** Animated image sequence — frames should share dimensions when possible. */
948
+ sequence?: ImageFrameSequence;
949
+ frameClassName?: string;
950
+ frameStyle?: CSSProperties;
951
+ }
952
+ /**
953
+ * Non-interactive image display with Apple HIG fit modes.
954
+ * @see https://developer.apple.com/design/human-interface-guidelines/image-views
955
+ */
956
+ declare function ImageView({ src, alt, fit, objectPosition, background, sequence, className, frameClassName, frameStyle, style, ...props }: ImageViewProps): react.JSX.Element | null;
957
+
958
+ interface ImageOverlayProps extends Omit<ImageViewProps, 'children'> {
959
+ overlay: ReactNode;
960
+ }
961
+ /**
962
+ * Image with legible text overlay — scrim improves contrast per Apple HIG.
963
+ * @see https://developer.apple.com/design/human-interface-guidelines/image-views
964
+ */
965
+ declare function ImageOverlay({ overlay, alt, ...imageProps }: ImageOverlayProps): react.JSX.Element;
966
+
967
+ interface ImageWellProps {
968
+ label?: string;
969
+ src?: string;
970
+ onImageChange?: (file: File | null, previewUrl: string | null) => void;
971
+ accept?: string;
972
+ placeholder?: string;
973
+ disabled?: boolean;
974
+ }
975
+ /**
976
+ * Editable image well — supports paste, drag-and-drop, and Delete to clear (macOS HIG).
977
+ * @see https://developer.apple.com/design/human-interface-guidelines/image-views
978
+ */
979
+ declare function ImageWell({ label, src, onImageChange, accept, placeholder, disabled, }: ImageWellProps): react.JSX.Element;
980
+
981
+ interface ImageButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
982
+ src: string;
983
+ alt: string;
984
+ imageProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'>;
985
+ }
986
+ /**
987
+ * Clickable image — use instead of adding button behavior to a plain image view.
988
+ * @see https://developer.apple.com/design/human-interface-guidelines/image-views
989
+ */
990
+ declare function ImageButton({ src, alt, imageProps, className, ...props }: ImageButtonProps): react.JSX.Element;
991
+
992
+ interface TextViewProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'> {
993
+ /** When true, shows a keyboard-capable editor. */
994
+ editable?: boolean;
995
+ /** Allows selecting/copying useful text in read-only mode. */
996
+ selectable?: boolean;
997
+ maxHeight?: string;
998
+ typographyRole?: TypographyRole;
999
+ children?: ReactNode;
1000
+ }
1001
+ /**
1002
+ * Multiline styled text for long, editable, or specially formatted content.
1003
+ * @see https://developer.apple.com/design/human-interface-guidelines/text-views
1004
+ */
1005
+ declare const TextView: react.ForwardRefExoticComponent<TextViewProps & react.RefAttributes<HTMLTextAreaElement>>;
1006
+
1007
+ interface WebViewProps extends Omit<IframeHTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc'> {
1008
+ /** Remote URL to load — use for brief in-app website access, not a full browser replacement. */
1009
+ src?: string;
1010
+ /** Embedded HTML content, e.g. rich email bodies. */
1011
+ html?: string;
1012
+ title: string;
1013
+ height?: string | number;
1014
+ /** When true, omits outer frame styling (used inside {@link WebViewShell}). */
1015
+ embedded?: boolean;
1016
+ /** Restrict iframe capabilities; enabled by default for untrusted content. */
1017
+ sandboxed?: boolean;
1018
+ allowScripts?: boolean;
1019
+ allowForms?: boolean;
1020
+ }
1021
+ /**
1022
+ * Displays rich web content inside your app — not a standalone browser.
1023
+ * @see https://developer.apple.com/design/human-interface-guidelines/web-views
1024
+ */
1025
+ declare function WebView({ src, html, title, height, embedded, sandboxed, allowScripts, allowForms, className, style, ...props }: WebViewProps): react.JSX.Element | null;
1026
+
1027
+ interface WebViewNavigationProps {
1028
+ canGoBack?: boolean;
1029
+ canGoForward?: boolean;
1030
+ onBack?: () => void;
1031
+ onForward?: () => void;
1032
+ title?: string;
1033
+ backLabel?: string;
1034
+ forwardLabel?: string;
1035
+ }
1036
+ declare function WebViewNavigation({ canGoBack, canGoForward, onBack, onForward, title, backLabel, forwardLabel, }: WebViewNavigationProps): react.JSX.Element;
1037
+
1038
+ interface WebViewShellProps extends WebViewProps {
1039
+ navigation?: WebViewNavigationProps;
1040
+ footer?: ReactNode;
1041
+ }
1042
+ /**
1043
+ * Web view with optional back/forward navigation for multi-page in-app browsing.
1044
+ * @see https://developer.apple.com/design/human-interface-guidelines/web-views
1045
+ */
1046
+ declare function WebViewShell({ navigation, footer, className, ...webViewProps }: WebViewShellProps): react.JSX.Element;
1047
+
1048
+ declare function useWebViewHistory(initialUrl: string): {
1049
+ currentUrl: string;
1050
+ canGoBack: boolean;
1051
+ canGoForward: boolean;
1052
+ navigate: (url: string) => void;
1053
+ back: () => void;
1054
+ forward: () => void;
1055
+ };
1056
+
1057
+ interface WebViewHistoryState {
1058
+ stack: string[];
1059
+ index: number;
1060
+ canGoBack: boolean;
1061
+ canGoForward: boolean;
1062
+ current: string;
1063
+ }
1064
+
162
1065
  type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
163
1066
  interface BadgeProps {
164
1067
  variant?: BadgeVariant;
@@ -199,16 +1102,20 @@ interface ToastInput {
199
1102
  variant?: ToastVariant;
200
1103
  duration?: number;
201
1104
  }
202
- interface ToastItem extends ToastInput {
1105
+ type ToastPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
1106
+ interface ToastRecord extends ToastInput {
203
1107
  id: string;
1108
+ exiting?: boolean;
204
1109
  }
1110
+ /** @internal persisted toast shape */
1111
+ type ToastItem = ToastRecord;
205
1112
  interface ToastContextValue {
206
1113
  toast: (input: ToastInput) => string;
207
1114
  dismiss: (id: string) => void;
208
1115
  }
209
1116
  interface ToastProviderProps {
210
1117
  children: ReactNode;
211
- placement?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
1118
+ placement?: ToastPlacement;
212
1119
  }
213
1120
  declare function ToastProvider({ children, placement, }: ToastProviderProps): react.JSX.Element;
214
1121
  declare function useToast(): ToastContextValue;
@@ -238,8 +1145,89 @@ interface TabsPanelProps {
238
1145
  }
239
1146
  declare function TabsPanel({ value, children }: TabsPanelProps): react.JSX.Element | null;
240
1147
 
241
- type DrawerSide = 'left' | 'right';
242
- interface DrawerProps {
1148
+ type SplitOrientation = 'horizontal' | 'vertical';
1149
+ type SplitCompactMode = 'side-by-side' | 'stack';
1150
+
1151
+ interface SplitViewContextValue {
1152
+ showPane: (id: string) => void;
1153
+ hidePane: (id: string) => void;
1154
+ hiddenPanes: Array<{
1155
+ id: string;
1156
+ label: string;
1157
+ }>;
1158
+ }
1159
+ declare function useSplitView(): SplitViewContextValue;
1160
+ interface SplitViewPaneProps {
1161
+ id: string;
1162
+ label?: string;
1163
+ children: ReactNode;
1164
+ minSize?: number;
1165
+ maxSize?: number;
1166
+ defaultSize?: number;
1167
+ collapsible?: boolean;
1168
+ visible?: boolean;
1169
+ defaultVisible?: boolean;
1170
+ onVisibleChange?: (visible: boolean) => void;
1171
+ className?: string;
1172
+ 'aria-label'?: string;
1173
+ }
1174
+ declare function SplitViewPane(_props: SplitViewPaneProps): null;
1175
+ declare namespace SplitViewPane {
1176
+ var displayName: string;
1177
+ }
1178
+ interface SplitViewProps {
1179
+ children: ReactNode;
1180
+ orientation?: SplitOrientation;
1181
+ compactMode?: SplitCompactMode;
1182
+ storageKey?: string;
1183
+ toolbar?: ReactNode;
1184
+ onSizesChange?: (sizes: number[]) => void;
1185
+ className?: string;
1186
+ 'aria-label'?: string;
1187
+ }
1188
+ declare function SplitView({ children, orientation, compactMode, storageKey, toolbar, onSizesChange, className, 'aria-label': ariaLabel, }: SplitViewProps): react.JSX.Element;
1189
+
1190
+ interface SplitViewToolbarProps {
1191
+ /** Optional actions rendered before pane restore buttons. */
1192
+ actions?: ReactNode;
1193
+ }
1194
+ /** Toolbar with buttons to reveal hidden split view panes. */
1195
+ declare function SplitViewToolbar({ actions }: SplitViewToolbarProps): react.JSX.Element | null;
1196
+
1197
+ type TabViewVariant = 'bordered' | 'borderless' | 'bezeled';
1198
+ declare const MAX_TAB_VIEW_TABS = 6;
1199
+
1200
+ interface TabViewProps {
1201
+ value?: string;
1202
+ defaultValue?: string;
1203
+ onValueChange?: (value: string) => void;
1204
+ variant?: TabViewVariant;
1205
+ showTabs?: boolean;
1206
+ inset?: boolean;
1207
+ children: ReactNode;
1208
+ className?: string;
1209
+ 'aria-label'?: string;
1210
+ }
1211
+ declare function TabView({ value, defaultValue, onValueChange, variant, showTabs, inset, children, className, 'aria-label': ariaLabel, }: TabViewProps): react.JSX.Element;
1212
+ interface TabViewListProps {
1213
+ children: ReactNode;
1214
+ 'aria-label'?: string;
1215
+ }
1216
+ declare function TabViewList({ children, 'aria-label': listLabel }: TabViewListProps): react.JSX.Element;
1217
+ interface TabViewTabProps {
1218
+ value: string;
1219
+ label: string;
1220
+ disabled?: boolean;
1221
+ }
1222
+ declare function TabViewTab({ value, label, disabled }: TabViewTabProps): react.JSX.Element;
1223
+ interface TabViewPanelProps {
1224
+ value: string;
1225
+ children: ReactNode;
1226
+ }
1227
+ declare function TabViewPanel({ value, children }: TabViewPanelProps): react.JSX.Element | null;
1228
+
1229
+ type DrawerSide = 'left' | 'right';
1230
+ interface DrawerProps {
243
1231
  open: boolean;
244
1232
  onClose: () => void;
245
1233
  children: ReactNode;
@@ -258,9 +1246,716 @@ interface PopoverProps {
258
1246
  defaultOpen?: boolean;
259
1247
  onOpenChange?: (open: boolean) => void;
260
1248
  side?: PopoverSide;
1249
+ /** Extra class names for the floating panel element. */
1250
+ panelClassName?: string;
1251
+ 'aria-label'?: string;
1252
+ }
1253
+ declare function Popover({ trigger, content, open, defaultOpen, onOpenChange, side, panelClassName, 'aria-label': ariaLabel, }: PopoverProps): react.JSX.Element;
1254
+
1255
+ interface ContextMenuItemConfig {
1256
+ type?: 'item';
1257
+ id: string;
1258
+ label: string;
1259
+ icon?: ReactNode;
1260
+ destructive?: boolean;
1261
+ /** Hide unavailable items instead of dimming them (HIG default). */
1262
+ hidden?: boolean;
1263
+ /** Clipboard commands may appear disabled when unavailable (macOS). */
1264
+ disabled?: boolean;
1265
+ onSelect?: () => void;
1266
+ }
1267
+ interface ContextMenuSubmenuConfig {
1268
+ type: 'submenu';
1269
+ id: string;
1270
+ label: string;
1271
+ items: ContextMenuItemConfig[];
1272
+ }
1273
+ type ContextMenuSeparatorConfig = {
1274
+ type: 'separator';
1275
+ id?: string;
1276
+ };
1277
+ type ContextMenuEntry = ContextMenuItemConfig | ContextMenuSubmenuConfig | ContextMenuSeparatorConfig;
1278
+ interface ContextMenuPosition {
1279
+ x: number;
1280
+ y: number;
1281
+ placement: 'above' | 'below';
1282
+ }
1283
+
1284
+ declare const MAX_CONTEXT_MENU_GROUPS = 3;
1285
+ declare function formatContextMenuTitle(count: number, noun: string): string;
1286
+ declare function prepareContextMenuEntries(entries: ContextMenuEntry[]): ContextMenuEntry[];
1287
+
1288
+ interface ContextMenuProps {
1289
+ children: ReactElement;
1290
+ entries: ContextMenuEntry[];
1291
+ title?: string;
1292
+ preview?: ReactNode;
1293
+ open?: boolean;
1294
+ onOpenChange?: (open: boolean) => void;
1295
+ onEntrySelect?: (entry: ContextMenuItemConfig) => void;
1296
+ /** Enable long-press / touch-and-hold in addition to secondary click. */
1297
+ longPress?: boolean;
1298
+ dimBackground?: boolean;
1299
+ }
1300
+ /**
1301
+ * Context menu for contextual commands on views and content.
1302
+ * @see https://developer.apple.com/design/human-interface-guidelines/context-menus
1303
+ */
1304
+ declare function ContextMenu({ children, entries, title, preview, open, onOpenChange, onEntrySelect, longPress, dimBackground, }: ContextMenuProps): react.JSX.Element;
1305
+
1306
+ type QuickActionIconPlacement = 'leading' | 'trailing';
1307
+ interface QuickActionItem {
1308
+ id: string;
1309
+ /** Succinct action title (HIG: avoid app name or extraneous info). */
1310
+ label: string;
1311
+ subtitle?: string;
1312
+ icon?: ReactNode;
1313
+ destructive?: boolean;
1314
+ hidden?: boolean;
1315
+ disabled?: boolean;
1316
+ /** System-provided actions like Remove App or Edit Home Screen. */
1317
+ system?: boolean;
1318
+ onSelect?: () => void;
1319
+ }
1320
+ interface QuickActionMenuPosition {
1321
+ x: number;
1322
+ y: number;
1323
+ }
1324
+
1325
+ interface DockWindow {
1326
+ id: string;
1327
+ title: string;
1328
+ subtitle?: string;
1329
+ }
1330
+ type DockMenuEntry = ContextMenuEntry;
1331
+ interface DockMenuPosition {
1332
+ x: number;
1333
+ y: number;
1334
+ }
1335
+
1336
+ declare function buildDockMenuEntries(options: {
1337
+ isRunning: boolean;
1338
+ openWindows?: DockWindow[];
1339
+ runningEntries?: ContextMenuEntry[];
1340
+ closedEntries?: ContextMenuEntry[];
1341
+ onWindowSelect?: (window: DockWindow) => void;
1342
+ }): ContextMenuEntry[];
1343
+ declare function resolveDockMenuPosition(anchorRect: DOMRect, menuWidth: number, menuHeight: number, viewportWidth?: number): DockMenuPosition;
1344
+ declare function quickActionsToEntries(actions: QuickActionItem[]): ContextMenuEntry[];
1345
+
1346
+ interface DockMenuProps {
1347
+ appName: string;
1348
+ icon: ReactNode;
1349
+ /** Whether the app is currently running (shows window list + running actions). */
1350
+ isRunning?: boolean;
1351
+ openWindows?: DockWindow[];
1352
+ /** High-value actions when the app is running (e.g. New Window, Get New Mail). */
1353
+ runningEntries?: ContextMenuEntry[];
1354
+ /** Actions when the app is not running (e.g. Open). */
1355
+ closedEntries?: ContextMenuEntry[];
1356
+ onWindowSelect?: (window: DockWindow) => void;
1357
+ onEntrySelect?: (entry: ContextMenuItemConfig) => void;
1358
+ open?: boolean;
1359
+ onOpenChange?: (open: boolean) => void;
1360
+ }
1361
+ /**
1362
+ * macOS Dock menu — secondary-click an app icon for open windows and high-value actions.
1363
+ * @see https://developer.apple.com/design/human-interface-guidelines/dock-menus
1364
+ */
1365
+ declare function DockMenu({ appName, icon, isRunning, openWindows, runningEntries, closedEntries, onWindowSelect, onEntrySelect, open, onOpenChange, }: DockMenuProps): react.JSX.Element;
1366
+ interface DockBarProps {
1367
+ children: ReactNode;
1368
+ 'aria-label'?: string;
1369
+ }
1370
+ /** Visual dock strip for grouping app icons in demos. */
1371
+ declare function DockBar({ children, 'aria-label': ariaLabel }: DockBarProps): react.JSX.Element;
1372
+
1373
+ interface HomeScreenQuickActionsProps {
1374
+ appName: string;
1375
+ icon: ReactNode;
1376
+ actions: QuickActionItem[];
1377
+ /** Icon appears on leading or trailing edge depending on Home Screen position. */
1378
+ iconPlacement?: QuickActionIconPlacement;
1379
+ includeSystemActions?: boolean;
1380
+ systemActions?: QuickActionItem[];
1381
+ onActionSelect?: (action: QuickActionItem) => void;
1382
+ open?: boolean;
1383
+ onOpenChange?: (open: boolean) => void;
1384
+ }
1385
+ /**
1386
+ * iOS/iPadOS Home Screen quick actions — touch and hold an app icon for high-value tasks.
1387
+ * @see https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions
1388
+ */
1389
+ declare function HomeScreenQuickActions({ appName, icon, actions, iconPlacement, includeSystemActions, systemActions, onActionSelect, open, onOpenChange, }: HomeScreenQuickActionsProps): react.JSX.Element;
1390
+
1391
+ declare const DEFAULT_SYSTEM_QUICK_ACTIONS: QuickActionItem[];
1392
+
1393
+ declare function prepareQuickActions(actions: QuickActionItem[], options?: {
1394
+ includeSystemActions?: boolean;
1395
+ systemActions?: QuickActionItem[];
1396
+ }): QuickActionItem[];
1397
+ declare function resolveQuickActionMenuPosition(anchorRect: DOMRect, menuWidth: number, menuHeight: number, viewportWidth?: number): QuickActionMenuPosition;
1398
+
1399
+ type MenuLayout = 'small' | 'medium' | 'large';
1400
+ interface MenuItemConfig {
1401
+ type?: 'item';
1402
+ id: string;
1403
+ label: string;
1404
+ icon?: ReactNode;
1405
+ shortcut?: string;
1406
+ /** Label shown when Option (Alt) is held — dynamic menu bar item. */
1407
+ alternateLabel?: string;
1408
+ alternateShortcut?: string;
1409
+ destructive?: boolean;
1410
+ hidden?: boolean;
1411
+ disabled?: boolean;
1412
+ /** Shows a checkmark for toggled/selected state. */
1413
+ selected?: boolean;
1414
+ onSelect?: () => void;
1415
+ }
1416
+ interface MenuSubmenuConfig {
1417
+ type: 'submenu';
1418
+ id: string;
1419
+ label: string;
1420
+ icon?: ReactNode;
1421
+ shortcut?: string;
1422
+ disabled?: boolean;
1423
+ hidden?: boolean;
1424
+ items: MenuItemConfig[];
1425
+ }
1426
+ type MenuSeparatorConfig = {
1427
+ type: 'separator';
1428
+ id?: string;
1429
+ };
1430
+ type MenuEntry = MenuItemConfig | MenuSubmenuConfig | MenuSeparatorConfig;
1431
+
1432
+ declare const MAX_SUBMENU_ITEMS = 5;
1433
+ declare function prepareMenuEntries(entries: MenuEntry[]): MenuEntry[];
1434
+ declare function splitCompactAndList(entries: MenuEntry[], layout: MenuLayout): {
1435
+ compact: MenuItemConfig[];
1436
+ list: MenuEntry[];
1437
+ };
1438
+
1439
+ interface MenuProps {
1440
+ children?: ReactElement;
1441
+ entries: MenuEntry[];
1442
+ layout?: MenuLayout;
1443
+ title?: string;
1444
+ open?: boolean;
1445
+ onOpenChange?: (open: boolean) => void;
1446
+ onEntrySelect?: (entry: MenuItemConfig) => boolean | void;
1447
+ dimBackground?: boolean;
1448
+ }
1449
+ /**
1450
+ * General-purpose menu with small, medium, and large iOS/iPadOS layouts.
1451
+ * @see https://developer.apple.com/design/human-interface-guidelines/menus
1452
+ */
1453
+ declare function Menu({ children, entries, layout, title, open, onOpenChange, onEntrySelect, dimBackground, }: MenuProps): react.JSX.Element;
1454
+
1455
+ type OrnamentEdge = 'top' | 'bottom' | 'leading' | 'trailing';
1456
+ type OrnamentVisibility = 'visible' | 'hidden' | 'automatic';
1457
+ type OrnamentContentAlignment = 'center' | 'leading' | 'trailing';
1458
+ interface OrnamentConfig {
1459
+ id: string;
1460
+ content: ReactNode;
1461
+ edge?: OrnamentEdge;
1462
+ alignment?: OrnamentContentAlignment;
1463
+ /** Hide during immersive content (video, photo). */
1464
+ autoHideImmersive?: boolean;
1465
+ }
1466
+
1467
+ declare function resolveOrnamentVisibility(visibility: OrnamentVisibility, immersive: boolean): boolean;
1468
+ declare function clampOrnamentWidth(windowWidth: number, ornamentWidth: number): number;
1469
+ declare function warnIfTooManyOrnaments(ornaments: OrnamentConfig[]): void;
1470
+
1471
+ interface OrnamentWindowProps {
1472
+ children: ReactNode;
1473
+ /** Single ornament content (shortcut for one bottom ornament). */
1474
+ ornament?: ReactNode;
1475
+ edge?: OrnamentEdge;
1476
+ alignment?: OrnamentContentAlignment;
1477
+ visibility?: OrnamentVisibility;
1478
+ /** When true, automatic visibility hides ornaments (e.g. full-screen media). */
1479
+ immersive?: boolean;
1480
+ ornaments?: OrnamentConfig[];
1481
+ className?: string;
1482
+ 'aria-label'?: string;
1483
+ }
1484
+ interface OrnamentProps {
1485
+ children: ReactNode;
1486
+ className?: string;
1487
+ }
1488
+ interface OrnamentButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
1489
+ active?: boolean;
1490
+ }
1491
+ /**
1492
+ * visionOS ornament — floating glass controls parallel to a window edge.
1493
+ * @see https://developer.apple.com/design/human-interface-guidelines/ornaments
1494
+ */
1495
+ declare function OrnamentWindow({ children, ornament, edge, alignment, visibility, immersive, ornaments, className, 'aria-label': ariaLabel, }: OrnamentWindowProps): react.JSX.Element;
1496
+ /** Glass ornament container for custom controls. */
1497
+ declare function Ornament({ children, className }: OrnamentProps): react.JSX.Element;
1498
+ /** Borderless button styled for ornament glass backgrounds. */
1499
+ declare function OrnamentButton({ active, className, children, ...rest }: OrnamentButtonProps): react.JSX.Element;
1500
+
1501
+ interface PopUpOption {
1502
+ value: string;
1503
+ label: string;
1504
+ disabled?: boolean;
1505
+ }
1506
+ interface PopUpCustomOption {
1507
+ value: string;
1508
+ label: string;
1509
+ onSelect?: () => void;
1510
+ }
1511
+
1512
+ declare function resolvePopUpLabel(options: PopUpOption[], value: string | undefined, placeholder: string): string;
1513
+ declare function resolveDefaultValue(options: PopUpOption[], defaultValue?: string): string | undefined;
1514
+ declare function buildPopUpMenuEntries(options: PopUpOption[], value: string | undefined, customOption?: PopUpCustomOption): MenuEntry[];
1515
+
1516
+ interface PopUpButtonProps {
1517
+ /** Introductory label describing the control (Calendar-style). */
1518
+ label?: string;
1519
+ options: PopUpOption[];
1520
+ value?: string;
1521
+ defaultValue?: string;
1522
+ onValueChange?: (value: string) => void;
1523
+ placeholder?: string;
1524
+ customOption?: PopUpCustomOption;
1525
+ /** Optional explanatory text below the control. */
1526
+ explanatoryText?: string;
1527
+ disabled?: boolean;
1528
+ id?: string;
1529
+ }
1530
+ /**
1531
+ * Pop-up button — flat list of mutually exclusive options in a menu.
1532
+ * @see https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons
1533
+ */
1534
+ declare function PopUpButton({ label, options, value, defaultValue, onValueChange, placeholder, customOption, explanatoryText, disabled, id, }: PopUpButtonProps): react.JSX.Element;
1535
+
1536
+ declare const MIN_PULLDOWN_ITEMS = 3;
1537
+ declare function countPullDownActions(entries: MenuEntry[]): number;
1538
+ declare function warnIfTooFewPullDownItems(entries: MenuEntry[]): void;
1539
+ declare function defaultDestructiveConfirmation(label: string): {
1540
+ title: string;
1541
+ description: string;
1542
+ confirmLabel: string;
1543
+ };
1544
+
1545
+ type PullDownEntry = MenuEntry;
1546
+ type PullDownButtonVariant = 'default' | 'more';
1547
+ interface PullDownDestructiveConfirmation {
1548
+ title?: string;
1549
+ description?: string;
1550
+ confirmLabel?: string;
1551
+ cancelLabel?: string;
1552
+ }
1553
+ interface PullDownButtonProps {
1554
+ /** Button label (required unless variant is "more"). */
1555
+ label?: string;
1556
+ entries: PullDownEntry[];
1557
+ variant?: PullDownButtonVariant;
1558
+ /** Optional menu title — use only when it adds meaning. */
1559
+ menuTitle?: string;
1560
+ onAction?: (entry: MenuItemConfig) => void;
1561
+ destructiveConfirmation?: PullDownDestructiveConfirmation;
1562
+ disabled?: boolean;
1563
+ /** Safari-style touch-and-hold to reveal the menu. */
1564
+ longPress?: boolean;
1565
+ icon?: ReactNode;
1566
+ }
1567
+ /**
1568
+ * Pull-down button — menu of commands related to the button’s action.
1569
+ * @see https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons
1570
+ */
1571
+ declare function PullDownButton({ label, entries, variant, menuTitle, onAction, destructiveConfirmation, disabled, longPress, icon, }: PullDownButtonProps): react.JSX.Element;
1572
+ /** Notes-style More pull-down button. */
1573
+ declare function MorePullDownButton(props: Omit<PullDownButtonProps, 'variant' | 'label'> & {
1574
+ 'aria-label'?: string;
1575
+ }): react.JSX.Element;
1576
+
1577
+ type MenuBarPlatform = 'macos' | 'ipados';
1578
+ interface MenuBarMenuConfig {
1579
+ id: string;
1580
+ title: string;
1581
+ entries: MenuEntry[];
1582
+ /** App menu title appears bold on macOS. */
1583
+ emphasized?: boolean;
1584
+ /** Optional icon or symbol shown instead of the title (e.g. Apple menu). */
1585
+ trigger?: ReactNode;
1586
+ /** Accessible name when `trigger` replaces visible title text. */
1587
+ ariaLabel?: string;
1588
+ }
1589
+ interface MenuBarExtraConfig {
1590
+ id: string;
1591
+ label: string;
1592
+ icon: ReactNode;
1593
+ entries: MenuEntry[];
1594
+ }
1595
+ interface MenuBarDocumentContext {
1596
+ isDocumentOpen?: boolean;
1597
+ isDirty?: boolean;
1598
+ hasTabs?: boolean;
1599
+ toolbarVisible?: boolean;
1600
+ sidebarVisible?: boolean;
1601
+ isFullScreen?: boolean;
1602
+ canUndo?: boolean;
1603
+ canRedo?: boolean;
1604
+ hasSelection?: boolean;
1605
+ canPaste?: boolean;
1606
+ undoLabel?: string;
1607
+ redoLabel?: string;
1608
+ }
1609
+ interface StandardMenuBarHandlers {
1610
+ about?: () => void;
1611
+ settings?: () => void;
1612
+ quit?: () => void;
1613
+ new?: () => void;
1614
+ open?: () => void;
1615
+ close?: () => void;
1616
+ save?: () => void;
1617
+ undo?: () => void;
1618
+ redo?: () => void;
1619
+ cut?: () => void;
1620
+ copy?: () => void;
1621
+ paste?: () => void;
1622
+ delete?: () => void;
1623
+ selectAll?: () => void;
1624
+ help?: () => void;
1625
+ feedback?: () => void;
1626
+ minimize?: () => void;
1627
+ zoom?: () => void;
1628
+ toggleToolbar?: () => void;
1629
+ toggleSidebar?: () => void;
1630
+ toggleFullScreen?: () => void;
1631
+ }
1632
+ interface StandardMenuBarOptions {
1633
+ appName: string;
1634
+ platform?: MenuBarPlatform;
1635
+ context?: MenuBarDocumentContext;
1636
+ handlers?: Partial<StandardMenuBarHandlers>;
1637
+ appSpecificMenus?: MenuBarMenuConfig[];
1638
+ openWindows?: string[];
1639
+ recentDocuments?: string[];
1640
+ }
1641
+ interface MenuBarProps {
1642
+ appName: string;
1643
+ menus?: MenuBarMenuConfig[];
1644
+ /** Used when `menus` is omitted to build the standard HIG menu set. */
1645
+ standardOptions?: StandardMenuBarOptions;
1646
+ appSpecificMenus?: MenuBarMenuConfig[];
1647
+ extras?: MenuBarExtraConfig[];
1648
+ platform?: MenuBarPlatform;
1649
+ /** iPadOS: bar hidden until revealed at the top edge. */
1650
+ revealed?: boolean;
1651
+ onRevealChange?: (revealed: boolean) => void;
1652
+ /** macOS: show a read-only Apple menu stub (system-provided on real macOS). */
1653
+ showAppleMenu?: boolean;
1654
+ className?: string;
1655
+ onMenuAction?: (menuId: string, entryId: string) => void;
1656
+ }
1657
+
1658
+ /**
1659
+ * macOS and iPadOS menu bar with standard menu ordering and dynamic Option-key items.
1660
+ * @see https://developer.apple.com/design/human-interface-guidelines/the-menu-bar
1661
+ */
1662
+ declare function MenuBar({ appName, menus: menusProp, standardOptions, appSpecificMenus, extras, platform, revealed, onRevealChange, showAppleMenu, className, onMenuAction, }: MenuBarProps): react.JSX.Element;
1663
+
1664
+ interface MenuBarExtraProps extends MenuBarExtraConfig {
1665
+ isOpen: boolean;
1666
+ onOpenChange: (open: boolean) => void;
1667
+ optionKey: boolean;
1668
+ onAction?: (entry: MenuItemConfig) => void;
1669
+ }
1670
+ /**
1671
+ * Trailing menu bar extra — exposes app functionality via an icon and menu (not a popover).
1672
+ * @see https://developer.apple.com/design/human-interface-guidelines/the-menu-bar#Menu-bar-extras
1673
+ */
1674
+ declare function MenuBarExtra({ id, label, icon, entries, isOpen, onOpenChange, optionKey, onAction, }: MenuBarExtraProps): react.JSX.Element;
1675
+
1676
+ declare const STANDARD_MENU_SLOTS: readonly ["app", "file", "edit", "format", "view", "window", "help"];
1677
+ declare function resolveDynamicMenuEntries(entries: MenuEntry[], modifiers: {
1678
+ optionKey: boolean;
1679
+ }): MenuEntry[];
1680
+ declare function validateMenuBarOrder(menus: MenuBarMenuConfig[]): void;
1681
+ declare function buildStandardMenuBar(options: StandardMenuBarOptions): MenuBarMenuConfig[];
1682
+ declare function createAppleMenuStub(): MenuEntry[];
1683
+ declare function resolveMenuBarAlignment(platform: MenuBarPlatform): 'start' | 'center';
1684
+
1685
+ declare const STANDARD_SHORTCUTS: {
1686
+ readonly new: "⌘N";
1687
+ readonly open: "⌘O";
1688
+ readonly close: "⌘W";
1689
+ readonly save: "⌘S";
1690
+ readonly saveAll: "⇧⌘S";
1691
+ readonly undo: "⌘Z";
1692
+ readonly redo: "⇧⌘Z";
1693
+ readonly cut: "⌘X";
1694
+ readonly copy: "⌘C";
1695
+ readonly paste: "⌘V";
1696
+ readonly selectAll: "⌘A";
1697
+ readonly find: "⌘F";
1698
+ readonly settings: "⌘,";
1699
+ readonly quit: "⌘Q";
1700
+ readonly minimize: "⌘M";
1701
+ readonly help: "⌘?";
1702
+ };
1703
+ declare function createAppMenu(appName: string, platform: MenuBarPlatform, handlers: {
1704
+ onAbout?: () => void;
1705
+ onSettings?: () => void;
1706
+ onQuit?: () => void;
1707
+ }): MenuEntry[];
1708
+ declare function createFileMenu(context: MenuBarDocumentContext, handlers: {
1709
+ onNew?: () => void;
1710
+ onOpen?: () => void;
1711
+ onClose?: () => void;
1712
+ onSave?: () => void;
1713
+ }, recentDocuments?: string[]): MenuEntry[];
1714
+ declare function createEditMenu(context: MenuBarDocumentContext, handlers: {
1715
+ onUndo?: () => void;
1716
+ onRedo?: () => void;
1717
+ onCut?: () => void;
1718
+ onCopy?: () => void;
1719
+ onPaste?: () => void;
1720
+ onDelete?: () => void;
1721
+ onSelectAll?: () => void;
1722
+ }): MenuEntry[];
1723
+ declare function createFormatMenu(): MenuEntry[];
1724
+ declare function createViewMenu(context: MenuBarDocumentContext, handlers: {
1725
+ onToggleToolbar?: () => void;
1726
+ onToggleSidebar?: () => void;
1727
+ onToggleFullScreen?: () => void;
1728
+ }): MenuEntry[];
1729
+ declare function createWindowMenu(context: MenuBarDocumentContext, openWindows: string[], handlers: {
1730
+ onMinimize?: () => void;
1731
+ onZoom?: () => void;
1732
+ onToggleFullScreen?: () => void;
1733
+ }): MenuEntry[];
1734
+ declare function createHelpMenu(appName: string, handlers: {
1735
+ onHelp?: () => void;
1736
+ onFeedback?: () => void;
1737
+ }): MenuEntry[];
1738
+
1739
+ type ToolbarPlatform = 'ios' | 'ipados' | 'macos' | 'visionos' | 'watchos';
1740
+ type ToolbarPlacement = 'top' | 'bottom';
1741
+ type ToolbarSectionPlacement = 'leading' | 'center' | 'trailing';
1742
+ interface ToolbarAction {
1743
+ id: string;
1744
+ label: string;
1745
+ icon?: ReactNode;
1746
+ showLabel?: boolean;
1747
+ disabled?: boolean;
1748
+ onSelect?: () => void;
1749
+ }
1750
+ interface ToolbarProps {
1751
+ /** Concise view title — aim for under 15 characters. */
1752
+ title?: string;
1753
+ platform?: ToolbarPlatform;
1754
+ /** iOS large title that collapses when scrolling. */
1755
+ largeTitle?: boolean;
1756
+ /** visionOS and watchOS placement. */
1757
+ placement?: ToolbarPlacement;
1758
+ /** Hide toolbar for distraction-free experience. */
1759
+ hidden?: boolean;
1760
+ className?: string;
1761
+ children?: ReactNode;
1762
+ 'aria-label'?: string;
1763
+ }
1764
+ interface ToolbarSectionProps {
1765
+ placement: ToolbarSectionPlacement;
1766
+ /** Center items collapse into the system overflow menu when space is tight. */
1767
+ collapsible?: boolean;
1768
+ className?: string;
1769
+ children?: ReactNode;
1770
+ }
1771
+ interface ToolbarItemProps {
1772
+ id?: string;
1773
+ label: string;
1774
+ icon?: ReactNode;
1775
+ showLabel?: boolean;
1776
+ prominent?: boolean;
1777
+ disabled?: boolean;
1778
+ onClick?: () => void;
1779
+ collapsible?: boolean;
1780
+ className?: string;
1781
+ }
1782
+ interface ToolbarGroupProps {
1783
+ className?: string;
1784
+ children?: ReactNode;
1785
+ }
1786
+ interface ToolbarTitleProps {
1787
+ children: string;
1788
+ large?: boolean;
1789
+ className?: string;
1790
+ }
1791
+ interface ToolbarSearchProps {
1792
+ value?: string;
1793
+ placeholder?: string;
1794
+ onChange?: (value: string) => void;
1795
+ 'aria-label'?: string;
1796
+ className?: string;
1797
+ }
1798
+ interface ToolbarMoreButtonProps {
1799
+ entries: MenuEntry[];
261
1800
  'aria-label'?: string;
1801
+ onAction?: (entryId: string) => void;
1802
+ disabled?: boolean;
1803
+ }
1804
+ interface ToolbarDocumentMenuProps {
1805
+ entries: MenuEntry[];
1806
+ label?: string;
1807
+ onAction?: (entryId: string) => void;
1808
+ disabled?: boolean;
1809
+ }
1810
+ interface ToolbarProminentButtonProps {
1811
+ children: string;
1812
+ onClick?: () => void;
1813
+ disabled?: boolean;
1814
+ className?: string;
1815
+ }
1816
+ interface ToolbarBackButtonProps {
1817
+ onClick?: () => void;
1818
+ disabled?: boolean;
1819
+ /** visionOS reveals label on look — optional visible companion text. */
1820
+ companionLabel?: string;
1821
+ }
1822
+ interface ToolbarCloseButtonProps {
1823
+ onClick?: () => void;
1824
+ disabled?: boolean;
1825
+ }
1826
+
1827
+ declare function ToolbarFixedSpace(): react.JSX.Element;
1828
+ declare function ToolbarGroup({ children, className }: ToolbarGroupProps): react.JSX.Element;
1829
+ declare function ToolbarTitle({ children, large, className }: ToolbarTitleProps): react.JSX.Element;
1830
+ declare function ToolbarItem({ label, icon, showLabel, prominent, disabled, onClick, className, }: ToolbarItemProps): react.JSX.Element;
1831
+ declare function ToolbarBackButton({ onClick, disabled, companionLabel }: ToolbarBackButtonProps): react.JSX.Element;
1832
+ declare function ToolbarCloseButton({ onClick, disabled }: ToolbarCloseButtonProps): react.JSX.Element;
1833
+ declare function ToolbarSearch({ value, placeholder, onChange, 'aria-label': ariaLabel, className, }: ToolbarSearchProps): react.JSX.Element;
1834
+ declare function ToolbarProminentButton({ children, onClick, disabled, className, }: ToolbarProminentButtonProps): react.JSX.Element;
1835
+ declare function ToolbarMoreButton({ entries, 'aria-label': ariaLabel, onAction, disabled, }: ToolbarMoreButtonProps): react.JSX.Element;
1836
+ declare function ToolbarDocumentMenu({ entries, label, onAction, disabled, }: ToolbarDocumentMenuProps): react.JSX.Element;
1837
+ declare function ToolbarSection({ placement, collapsible, children, className }: ToolbarSectionProps): react.JSX.Element;
1838
+ /**
1839
+ * Toolbar — navigation, titles, search, and frequent actions along an edge of the view.
1840
+ * @see https://developer.apple.com/design/human-interface-guidelines/toolbars
1841
+ */
1842
+ declare function Toolbar({ title, platform, largeTitle, placement, hidden, className, children, 'aria-label': ariaLabel, }: ToolbarProps): react.JSX.Element;
1843
+ declare namespace Toolbar {
1844
+ var Leading: (props: Omit<ToolbarSectionProps, "placement">) => react.JSX.Element;
1845
+ var Center: (props: Omit<ToolbarSectionProps, "placement">) => react.JSX.Element;
1846
+ var Trailing: (props: Omit<ToolbarSectionProps, "placement">) => react.JSX.Element;
1847
+ var Item: typeof ToolbarItem;
1848
+ var Group: typeof ToolbarGroup;
1849
+ var Title: typeof ToolbarTitle;
1850
+ var Back: typeof ToolbarBackButton;
1851
+ var Close: typeof ToolbarCloseButton;
1852
+ var Search: typeof ToolbarSearch;
1853
+ var More: typeof ToolbarMoreButton;
1854
+ var DocumentMenu: typeof ToolbarDocumentMenu;
1855
+ var Prominent: typeof ToolbarProminentButton;
1856
+ var Spacer: typeof ToolbarFixedSpace;
1857
+ }
1858
+
1859
+ declare const MAX_TOOLBAR_TITLE_LENGTH = 15;
1860
+ declare const MAX_TOOLBAR_GROUPS = 3;
1861
+ declare function warnIfToolbarTitleTooLong(title: string): void;
1862
+ declare function warnIfTooManyToolbarGroups(groupCount: number): void;
1863
+ declare function warnIfMixedLabelStyles(hasTextButton: boolean, hasSymbolButton: boolean): void;
1864
+ declare function computeVisibleToolbarItemCount(containerWidth: number, itemWidths: number[], options?: {
1865
+ overflowButtonWidth?: number;
1866
+ gap?: number;
1867
+ }): number;
1868
+ declare function toolbarActionsFromEntries(entries: MenuEntry[]): ToolbarAction[];
1869
+ declare function entriesFromToolbarActions(actions: ToolbarAction[]): MenuEntry[];
1870
+ declare function resolveToolbarPlacement(platform: 'ios' | 'ipados' | 'macos' | 'visionos' | 'watchos', placement?: 'top' | 'bottom'): 'top' | 'bottom';
1871
+ declare function shouldUseSystemOverflow(platform: 'ios' | 'ipados' | 'macos' | 'visionos' | 'watchos'): boolean;
1872
+ declare function truncateToolbarTitle(title: string, maxLength?: number): string;
1873
+
1874
+ declare function BackChevronIcon(): react.JSX.Element;
1875
+ declare function CloseIcon(): react.JSX.Element;
1876
+ declare function ComposeIcon(): react.JSX.Element;
1877
+ declare function ShareIcon(): react.JSX.Element;
1878
+ declare function SidebarIcon(): react.JSX.Element;
1879
+ declare function DocumentMenuIcon(): react.JSX.Element;
1880
+ declare function SearchIcon(): react.JSX.Element;
1881
+ declare function OverflowIcon(): react.JSX.Element;
1882
+
1883
+ /** Standard UIResponder-style edit actions. */
1884
+ type StandardEditActionId = 'cut' | 'copy' | 'paste' | 'select' | 'selectAll' | 'delete' | 'translate' | 'lookUp';
1885
+ type EditMenuVariant = 'compact' | 'context' | 'auto';
1886
+ type EditMenuInputMode = 'touch' | 'pointer' | 'auto';
1887
+ type EditMenuContentType = 'text' | 'image' | 'address' | 'link' | 'file';
1888
+ interface EditMenuContext {
1889
+ /** Whether content is currently selected. */
1890
+ hasSelection: boolean;
1891
+ /** Whether pasteboard content can be pasted. */
1892
+ canPaste: boolean;
1893
+ /** Whether the target supports editing (cut/delete). */
1894
+ isEditable?: boolean;
1895
+ /** Allow copying noneditable static text (captions, labels excluded). */
1896
+ allowsCopy?: boolean;
1897
+ contentType?: EditMenuContentType;
1898
+ }
1899
+ interface EditMenuItemConfig {
1900
+ id: string;
1901
+ label: string;
1902
+ icon?: ReactNode;
1903
+ /** Group with standard clipboard, selection, intelligence, or format commands. */
1904
+ group?: 'clipboard' | 'selection' | 'intelligence' | 'format' | 'other';
1905
+ destructive?: boolean;
1906
+ hidden?: boolean;
1907
+ disabled?: boolean;
1908
+ onSelect?: () => void;
1909
+ }
1910
+ interface EditMenuPosition {
1911
+ x: number;
1912
+ y: number;
1913
+ placement: 'above' | 'below';
1914
+ /** Horizontal offset for the pointer relative to menu left edge. */
1915
+ pointerOffset: number;
262
1916
  }
263
- declare function Popover({ trigger, content, open, defaultOpen, onOpenChange, side, 'aria-label': ariaLabel, }: PopoverProps): react.JSX.Element;
1917
+ interface EditMenuResolvedAction extends EditMenuItemConfig {
1918
+ standard?: boolean;
1919
+ }
1920
+
1921
+ declare function resolveEditMenuVariant(variant: EditMenuVariant, inputMode: EditMenuInputMode, pointerType?: string): 'compact' | 'context';
1922
+ declare function isStandardActionAvailable(id: StandardEditActionId, context: EditMenuContext): boolean;
1923
+ declare function buildEditMenuActions(context: EditMenuContext, customActions?: EditMenuItemConfig[], options?: {
1924
+ includeStandard?: boolean;
1925
+ onStandardAction?: (id: StandardEditActionId) => void;
1926
+ }): EditMenuResolvedAction[];
1927
+ declare function filterVisibleEditMenuActions(actions: EditMenuResolvedAction[]): EditMenuResolvedAction[];
1928
+ declare function resolveEditMenuPosition(anchorRect: DOMRect, menuWidth: number, menuHeight: number, preferredPlacement?: 'above' | 'below' | 'auto', viewportHeight?: number, viewportWidth?: number): EditMenuPosition;
1929
+
1930
+ interface EditMenuProps {
1931
+ children: ReactElement;
1932
+ context: EditMenuContext;
1933
+ /** Custom commands listed near related system-provided ones. */
1934
+ customActions?: EditMenuItemConfig[];
1935
+ /** Include standard Cut, Copy, Paste, etc. Defaults to true. */
1936
+ includeStandardActions?: boolean;
1937
+ variant?: EditMenuVariant;
1938
+ inputMode?: EditMenuInputMode;
1939
+ placement?: 'above' | 'below' | 'auto';
1940
+ open?: boolean;
1941
+ onOpenChange?: (open: boolean) => void;
1942
+ onAction?: (actionId: string) => void;
1943
+ onStandardAction?: (actionId: StandardEditActionId) => void;
1944
+ /** Touch-and-hold / long-press to reveal compact edit menu. */
1945
+ longPress?: boolean;
1946
+ dimBackground?: boolean;
1947
+ }
1948
+ /**
1949
+ * Edit menu for changing selected content — compact horizontal bar or vertical context menu.
1950
+ * @see https://developer.apple.com/design/human-interface-guidelines/edit-menus
1951
+ */
1952
+ declare function EditMenu({ children, context, customActions, includeStandardActions, variant, inputMode, placement, open, onOpenChange, onAction, onStandardAction, longPress, dimBackground, }: EditMenuProps): react.JSX.Element;
1953
+ /** Read-only selectable text region for edit menu demos. */
1954
+ declare function EditMenuSelection({ children, selected, className, ...rest }: {
1955
+ children: ReactNode;
1956
+ selected?: boolean;
1957
+ className?: string;
1958
+ } & React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
264
1959
 
265
1960
  interface BreadcrumbItem {
266
1961
  label: string;
@@ -333,6 +2028,122 @@ interface DataTableProps<T> {
333
2028
  }
334
2029
  declare function DataTable<T>({ data, columns, keyExtractor, caption, 'aria-label': ariaLabel, loading, emptyTitle, emptyDescription, emptyMessage, striped, skeletonRows, className, }: DataTableProps<T>): react.JSX.Element;
335
2030
 
2031
+ type ListVariant = 'plain' | 'grouped';
2032
+ type ListAccessory = 'none' | 'disclosure' | 'info' | 'checkmark';
2033
+ type TableSelectionMode = 'none' | 'navigation' | 'options';
2034
+ type SortDirection = 'asc' | 'desc';
2035
+ interface OutlineNode {
2036
+ id: string;
2037
+ label: string;
2038
+ values?: Record<string, string>;
2039
+ children?: OutlineNode[];
2040
+ }
2041
+ interface OutlineColumn {
2042
+ key: string;
2043
+ header: string;
2044
+ sortable?: boolean;
2045
+ width?: number;
2046
+ }
2047
+
2048
+ interface ListProps {
2049
+ variant?: ListVariant;
2050
+ children: ReactNode;
2051
+ className?: string;
2052
+ 'aria-label'?: string;
2053
+ }
2054
+ declare function List({ variant, children, className, 'aria-label': ariaLabel, }: ListProps): react.JSX.Element;
2055
+
2056
+ interface ListSectionProps {
2057
+ header?: string;
2058
+ footer?: string;
2059
+ children: ReactNode;
2060
+ }
2061
+ declare function ListSection({ header, footer, children }: ListSectionProps): react.JSX.Element;
2062
+
2063
+ interface ListRowProps {
2064
+ title: string;
2065
+ subtitle?: string;
2066
+ leading?: ReactNode;
2067
+ accessory?: ListAccessory;
2068
+ selected?: boolean;
2069
+ disabled?: boolean;
2070
+ truncate?: 'end' | 'middle';
2071
+ onPress?: () => void;
2072
+ onInfo?: (event: MouseEvent<HTMLButtonElement>) => void;
2073
+ }
2074
+ declare function ListRow({ title, subtitle, leading, accessory, selected, disabled, truncate, onPress, onInfo, }: ListRowProps): react.JSX.Element;
2075
+
2076
+ interface TableColumn<T> {
2077
+ key: string;
2078
+ header: string;
2079
+ render: (row: T) => ReactNode;
2080
+ sortValue?: (row: T) => string;
2081
+ sortable?: boolean;
2082
+ width?: number;
2083
+ }
2084
+ interface TableProps<T> {
2085
+ data: T[];
2086
+ columns: TableColumn<T>[];
2087
+ keyExtractor: (row: T) => string;
2088
+ caption?: string;
2089
+ 'aria-label'?: string;
2090
+ selectionMode?: TableSelectionMode;
2091
+ selectedKey?: string;
2092
+ onSelectRow?: (row: T) => void;
2093
+ defaultSortKey?: string;
2094
+ defaultSortDirection?: SortDirection;
2095
+ alternatingRows?: boolean;
2096
+ resizableColumns?: boolean;
2097
+ }
2098
+ declare function Table<T>({ data, columns, keyExtractor, caption, 'aria-label': ariaLabel, selectionMode, selectedKey, onSelectRow, defaultSortKey, defaultSortDirection, alternatingRows, resizableColumns, }: TableProps<T>): react.JSX.Element;
2099
+
2100
+ interface OutlineViewProps {
2101
+ data: OutlineNode[];
2102
+ primaryColumnHeader?: string;
2103
+ columns?: Array<string | OutlineColumn>;
2104
+ defaultExpandedIds?: string[];
2105
+ expandedIds?: string[];
2106
+ onExpandedChange?: (expandedIds: string[]) => void;
2107
+ /** Persist expansion state across sessions (localStorage). */
2108
+ storageKey?: string;
2109
+ selectedId?: string;
2110
+ onSelect?: (node: OutlineNode) => void;
2111
+ onRowDoubleClick?: (node: OutlineNode) => void;
2112
+ sortable?: boolean;
2113
+ defaultSortKey?: string;
2114
+ defaultSortDirection?: SortDirection;
2115
+ resizableColumns?: boolean;
2116
+ alternatingRows?: boolean;
2117
+ truncate?: 'middle' | 'end';
2118
+ editableColumns?: string[];
2119
+ onCellEdit?: (nodeId: string, columnKey: string, value: string) => void;
2120
+ searchQuery?: string;
2121
+ 'aria-label'?: string;
2122
+ }
2123
+ declare function OutlineView({ data, primaryColumnHeader, columns, defaultExpandedIds, expandedIds, onExpandedChange, storageKey, selectedId, onSelect, onRowDoubleClick, sortable, defaultSortKey, defaultSortDirection, resizableColumns, alternatingRows, truncate, editableColumns, onCellEdit, searchQuery, 'aria-label': ariaLabel, }: OutlineViewProps): react.JSX.Element;
2124
+
2125
+ interface OutlineViewToolbarProps {
2126
+ searchQuery: string;
2127
+ onSearchChange: (query: string) => void;
2128
+ placeholder?: string;
2129
+ 'aria-label'?: string;
2130
+ }
2131
+ /** Toolbar search field for lengthy outline views. */
2132
+ declare function OutlineViewToolbar({ searchQuery, onSearchChange, placeholder, 'aria-label': ariaLabel, }: OutlineViewToolbarProps): react.JSX.Element;
2133
+
2134
+ declare function formatColumnHeader(header: string): string;
2135
+ declare function truncateMiddle(text: string, maxLength?: number): string;
2136
+ declare function sortRows<T>(rows: T[], accessor: (row: T) => string, direction: SortDirection): T[];
2137
+ declare function flattenOutline(nodes: OutlineNode[], expanded: Set<string>, depth?: number): Array<{
2138
+ node: OutlineNode;
2139
+ depth: number;
2140
+ }>;
2141
+ declare function sortOutlineNodes(nodes: OutlineNode[], sortKey: string, direction: SortDirection): OutlineNode[];
2142
+ /** IDs of a node and every expandable descendant (Option-click expand all). */
2143
+ declare function collectExpandableSubtree(node: OutlineNode): string[];
2144
+ declare function filterOutline(nodes: OutlineNode[], query: string): OutlineNode[];
2145
+ declare function normalizeOutlineColumns(columns: Array<string | OutlineColumn> | undefined): OutlineColumn[];
2146
+
336
2147
  interface FileUploadProps {
337
2148
  label?: string;
338
2149
  hint?: string;
@@ -346,16 +2157,192 @@ interface FileUploadProps {
346
2157
  }
347
2158
  declare function FileUpload({ label, hint, error, accept, multiple, disabled, buttonLabel, onFilesChange, className, }: FileUploadProps): react.JSX.Element;
348
2159
 
2160
+ interface DocumentToolbarProps {
2161
+ onNew?: () => void;
2162
+ onOpen?: () => void;
2163
+ onSave?: () => void;
2164
+ newLabel?: string;
2165
+ openLabel?: string;
2166
+ saveLabel?: string;
2167
+ canSave?: boolean;
2168
+ showAddButton?: boolean;
2169
+ }
2170
+ /**
2171
+ * New, Open, and Save actions for document-based apps.
2172
+ * @see https://developer.apple.com/design/human-interface-guidelines/file-management
2173
+ */
2174
+ declare function DocumentToolbar({ onNew, onOpen, onSave, newLabel, openLabel, saveLabel, canSave, showAddButton, }: DocumentToolbarProps): react.JSX.Element;
2175
+
2176
+ type FileSyncStatus = 'synced' | 'syncing' | 'error' | 'offline';
2177
+ type FileLocation = 'local' | 'remote' | 'icloud';
2178
+ type FileBrowserTab = 'recents' | 'shared' | 'browse';
2179
+ interface FileBrowserItem {
2180
+ id: string;
2181
+ name: string;
2182
+ extension?: string;
2183
+ size?: number;
2184
+ modifiedAt?: Date | string;
2185
+ location?: FileLocation;
2186
+ syncStatus?: FileSyncStatus;
2187
+ thumbnailUrl?: string;
2188
+ /** MIME type or category used for filtering (e.g. pdf, image). */
2189
+ type?: string;
2190
+ shared?: boolean;
2191
+ }
2192
+ interface FilePreviewSource {
2193
+ name: string;
2194
+ url?: string;
2195
+ textContent?: string;
2196
+ type?: string;
2197
+ extension?: string;
2198
+ }
2199
+
2200
+ interface FileBrowserProps {
2201
+ files: FileBrowserItem[];
2202
+ activeTab?: FileBrowserTab;
2203
+ onTabChange?: (tab: FileBrowserTab) => void;
2204
+ showExtensions?: boolean;
2205
+ onShowExtensionsChange?: (show: boolean) => void;
2206
+ selectedId?: string;
2207
+ onSelect?: (file: FileBrowserItem) => void;
2208
+ onOpen?: (file: FileBrowserItem) => void;
2209
+ acceptTypes?: string[];
2210
+ emptyLabel?: string;
2211
+ toolbar?: ReactNode;
2212
+ }
2213
+ declare function FileBrowser({ files, activeTab, onTabChange, showExtensions, onShowExtensionsChange, selectedId, onSelect, onOpen, acceptTypes, emptyLabel, toolbar, }: FileBrowserProps): react.JSX.Element;
2214
+
2215
+ interface FilePreviewProps {
2216
+ source: FilePreviewSource;
2217
+ onClose?: () => void;
2218
+ closeLabel?: string;
2219
+ }
2220
+ /**
2221
+ * Quick Look-style preview for supported file types.
2222
+ * @see https://developer.apple.com/design/human-interface-guidelines/file-management
2223
+ */
2224
+ declare function FilePreview({ source, onClose, closeLabel }: FilePreviewProps): react.JSX.Element;
2225
+
2226
+ interface UnsavedIndicatorProps {
2227
+ title: string;
2228
+ edited?: boolean;
2229
+ /** When false, show the unsaved dot (manual save mode). */
2230
+ autosaveEnabled?: boolean;
2231
+ }
2232
+ /**
2233
+ * Shows unsaved-change feedback per Apple HIG autosave guidance.
2234
+ * @see https://developer.apple.com/design/human-interface-guidelines/file-management
2235
+ */
2236
+ declare function UnsavedIndicator({ title, edited, autosaveEnabled, }: UnsavedIndicatorProps): react.JSX.Element;
2237
+
2238
+ interface DocumentLauncherProps extends Omit<FileBrowserProps, 'toolbar'> {
2239
+ appTitle: string;
2240
+ primaryActionLabel?: string;
2241
+ secondaryActionLabel?: string;
2242
+ onPrimaryAction?: () => void;
2243
+ onSecondaryAction?: () => void;
2244
+ background?: ReactNode;
2245
+ accessories?: ReactNode;
2246
+ }
2247
+ /**
2248
+ * Document launcher pattern: hero title card + file browser sheet.
2249
+ * @see https://developer.apple.com/design/human-interface-guidelines/file-management
2250
+ */
2251
+ declare function DocumentLauncher({ appTitle, primaryActionLabel, secondaryActionLabel, onPrimaryAction, onSecondaryAction, background, accessories, ...browserProps }: DocumentLauncherProps): react.JSX.Element;
2252
+
2253
+ declare function formatDisplayName(name: string, showExtensions: boolean): string;
2254
+ declare function formatFileSize(bytes?: number): string;
2255
+ declare function formatFileDate(value?: Date | string): string;
2256
+ declare function filterFilesByType(items: FileBrowserItem[], acceptTypes?: string[]): FileBrowserItem[];
2257
+ declare function documentTitleWithEditedSuffix(title: string, edited: boolean, autosaveEnabled: boolean): string;
2258
+ declare function canPreviewFile(source: {
2259
+ type?: string;
2260
+ extension?: string;
2261
+ url?: string;
2262
+ textContent?: string;
2263
+ }): boolean;
2264
+
2265
+ type SearchFieldPlacement = 'toolbar-trailing' | 'sidebar-top' | 'inline' | 'tab-dedicated' | 'bottom-toolbar';
2266
+ type SearchFieldPlatform = 'ios' | 'ipados' | 'macos' | 'tvos' | 'visionos' | 'watchos';
2267
+ interface SearchToken {
2268
+ id: string;
2269
+ label: string;
2270
+ icon?: ReactNode;
2271
+ }
2272
+ interface SearchScopeOption {
2273
+ id: string;
2274
+ label: string;
2275
+ }
2276
+ interface SearchFieldProps {
2277
+ value?: string;
2278
+ defaultValue?: string;
2279
+ onChange?: (value: string) => void;
2280
+ onSearch?: (value: string) => void;
2281
+ placeholder?: string;
2282
+ platform?: SearchFieldPlatform;
2283
+ placement?: SearchFieldPlacement;
2284
+ /** Search while typing (default true). */
2285
+ immediate?: boolean;
2286
+ suggestions?: string[];
2287
+ recentSearches?: string[];
2288
+ scope?: {
2289
+ options: SearchScopeOption[];
2290
+ value: string;
2291
+ onChange: (scopeId: string) => void;
2292
+ };
2293
+ tokens?: SearchToken[];
2294
+ onTokenRemove?: (tokenId: string) => void;
2295
+ onTokenSelect?: (tokenId: string) => void;
2296
+ showDictation?: boolean;
2297
+ autoFocus?: boolean;
2298
+ className?: string;
2299
+ 'aria-label'?: string;
2300
+ }
2301
+ interface SearchScopeBarProps {
2302
+ options: SearchScopeOption[];
2303
+ value: string;
2304
+ onChange: (scopeId: string) => void;
2305
+ className?: string;
2306
+ }
2307
+ interface SearchTokenChipProps {
2308
+ token: SearchToken;
2309
+ onRemove?: () => void;
2310
+ onSelect?: () => void;
2311
+ }
2312
+
2313
+ declare const DEFAULT_SEARCH_PLACEHOLDER = "Search";
2314
+ declare function warnIfSearchPlacementMismatch(placement: SearchFieldPlacement, platform: string): void;
2315
+ declare function filterSuggestions(query: string, suggestions: string[], limit?: number): string[];
2316
+ declare function resolveSearchFieldPlacement(platform: 'ios' | 'ipados' | 'macos' | 'tvos' | 'visionos' | 'watchos', placement?: SearchFieldPlacement): SearchFieldPlacement;
2317
+
2318
+ declare function SearchScopeBar({ options, value, onChange, className }: SearchScopeBarProps): react.JSX.Element;
2319
+ declare function SearchTokenChip({ token, onRemove, onSelect }: SearchTokenChipProps): react.JSX.Element;
2320
+ /**
2321
+ * Search field with scope bar, tokens, and suggestions.
2322
+ * @see https://developer.apple.com/design/human-interface-guidelines/search-fields
2323
+ */
2324
+ declare function SearchField({ value, defaultValue, onChange, onSearch, placeholder, platform, placement, immediate, suggestions, recentSearches, scope, tokens, onTokenRemove, onTokenSelect, showDictation, autoFocus, className, 'aria-label': ariaLabel, }: SearchFieldProps): react.JSX.Element;
2325
+
2326
+ type SidebarPlatform = 'ios' | 'ipados' | 'macos' | 'visionos';
2327
+ type SidebarSize = 'small' | 'medium' | 'large';
349
2328
  interface SidebarProps {
350
2329
  children: ReactNode;
2330
+ platform?: SidebarPlatform;
2331
+ size?: SidebarSize;
2332
+ hidden?: boolean;
2333
+ onHiddenChange?: (hidden: boolean) => void;
2334
+ /** Allow content to extend beneath the sidebar (Liquid Glass). */
2335
+ glass?: boolean;
351
2336
  'aria-label'?: string;
352
2337
  className?: string;
353
2338
  }
354
- declare function Sidebar({ children, 'aria-label': ariaLabel, className, }: SidebarProps): react.JSX.Element;
2339
+ declare function Sidebar({ children, platform, size, hidden, glass, 'aria-label': ariaLabel, className, }: SidebarProps): react.JSX.Element | null;
355
2340
  interface SidebarHeaderProps {
356
2341
  children: ReactNode;
357
2342
  }
358
2343
  declare function SidebarHeader({ children }: SidebarHeaderProps): react.JSX.Element;
2344
+ type SidebarSearchProps = Omit<SearchFieldProps, 'placement'>;
2345
+ declare function SidebarSearch(props: SidebarSearchProps): react.JSX.Element;
359
2346
  interface SidebarNavProps {
360
2347
  children: ReactNode;
361
2348
  'aria-label'?: string;
@@ -366,14 +2353,141 @@ interface SidebarGroupProps {
366
2353
  children: ReactNode;
367
2354
  }
368
2355
  declare function SidebarGroup({ label, children }: SidebarGroupProps): react.JSX.Element;
2356
+ interface SidebarDisclosureSectionProps {
2357
+ label: string;
2358
+ defaultExpanded?: boolean;
2359
+ children: ReactNode;
2360
+ }
2361
+ declare function SidebarDisclosureSection({ label, defaultExpanded, children, }: SidebarDisclosureSectionProps): react.JSX.Element;
369
2362
  interface SidebarItemProps {
370
2363
  children: ReactNode;
371
2364
  href?: string;
372
2365
  active?: boolean;
373
2366
  disabled?: boolean;
2367
+ icon?: ReactNode;
2368
+ badge?: number | '!';
2369
+ /** Fixed accent color for special icons (e.g. VIP in Mail). Use sparingly. */
2370
+ accentColor?: string;
374
2371
  onClick?: () => void;
375
2372
  }
376
- declare function SidebarItem({ children, href, active, disabled, onClick, }: SidebarItemProps): react.JSX.Element;
2373
+ declare function SidebarItem({ children, href, active, disabled, icon, badge, accentColor, onClick, }: SidebarItemProps): react.JSX.Element;
2374
+ declare function SidebarToggle({ hidden, onToggle, label, }: {
2375
+ hidden?: boolean;
2376
+ onToggle?: () => void;
2377
+ label?: string;
2378
+ }): react.JSX.Element;
2379
+
2380
+ type PathControlVariant = 'standard' | 'popup';
2381
+ interface PathSegment {
2382
+ id: string;
2383
+ label: string;
2384
+ icon?: ReactNode;
2385
+ }
2386
+ interface PathControlProps {
2387
+ segments: PathSegment[];
2388
+ selectedId?: string;
2389
+ variant?: PathControlVariant;
2390
+ /** macOS: allow drag-and-drop to select a new path item. */
2391
+ editable?: boolean;
2392
+ onSegmentSelect?: (segment: PathSegment) => void;
2393
+ onChoose?: () => void;
2394
+ onDropPath?: (segments: PathSegment[]) => void;
2395
+ className?: string;
2396
+ 'aria-label'?: string;
2397
+ }
2398
+
2399
+ declare const PATH_SEPARATOR = "\u203A";
2400
+ /** Collapse middle segment labels when the path is too long (Finder-style). */
2401
+ declare function collapsePathSegments(segments: PathSegment[], maxVisible?: number): Array<PathSegment | {
2402
+ type: 'ellipsis';
2403
+ id: string;
2404
+ }>;
2405
+ declare function resolveSelectedSegment(segments: PathSegment[], selectedId?: string): PathSegment;
2406
+ declare function warnIfPathControlInToolbar(location: string): void;
2407
+
2408
+ /**
2409
+ * macOS path control — standard linear or pop-up style.
2410
+ * @see https://developer.apple.com/design/human-interface-guidelines/path-controls
2411
+ */
2412
+ declare function PathControl({ segments, selectedId, variant, editable, onSegmentSelect, onChoose, onDropPath, className, 'aria-label': ariaLabel, }: PathControlProps): react.JSX.Element | null;
2413
+
2414
+ type TabBarPlatform = 'ios' | 'ipados' | 'visionos' | 'tvos';
2415
+ type TabBarVariant = 'tabBarOnly' | 'sidebarAdaptable';
2416
+ type TabBarSearchStyle = 'standard' | 'button';
2417
+ interface TabBarProps {
2418
+ value?: string;
2419
+ defaultValue?: string;
2420
+ onValueChange?: (value: string) => void;
2421
+ platform?: TabBarPlatform;
2422
+ variant?: TabBarVariant;
2423
+ /** iOS: search as trailing tab. */
2424
+ searchTab?: {
2425
+ style?: TabBarSearchStyle;
2426
+ label?: string;
2427
+ icon?: ReactNode;
2428
+ };
2429
+ className?: string;
2430
+ children: ReactNode;
2431
+ 'aria-label'?: string;
2432
+ }
2433
+ interface TabBarListProps {
2434
+ children: ReactNode;
2435
+ }
2436
+ interface TabBarItemProps {
2437
+ value: string;
2438
+ label: string;
2439
+ icon?: ReactNode;
2440
+ badge?: number | '!';
2441
+ disabled?: boolean;
2442
+ }
2443
+ interface TabBarPanelProps {
2444
+ value: string;
2445
+ children: ReactNode;
2446
+ }
2447
+
2448
+ declare const MAX_TAB_BAR_ITEMS = 5;
2449
+ declare function warnIfTooManyTabs(count: number): void;
2450
+ declare function formatTabBarBadge(badge?: number | '!'): string | undefined;
2451
+ declare function resolveTabBarPlacement(platform: 'ios' | 'ipados' | 'visionos' | 'tvos'): 'bottom' | 'top' | 'leading';
2452
+
2453
+ declare function TabBarList({ children }: TabBarListProps): react.JSX.Element;
2454
+ declare function TabBarItem({ value, label, icon, badge, disabled }: TabBarItemProps): react.JSX.Element;
2455
+ declare function TabBarPanel({ value, children }: TabBarPanelProps): react.JSX.Element | null;
2456
+ /**
2457
+ * Tab bar for top-level app navigation (iOS, iPadOS, visionOS).
2458
+ * @see https://developer.apple.com/design/human-interface-guidelines/tab-bars
2459
+ */
2460
+ declare function TabBar({ value, defaultValue, onValueChange, platform, variant, searchTab, className, children, 'aria-label': ariaLabel, }: TabBarProps): react.JSX.Element;
2461
+
2462
+ interface TokenFieldToken {
2463
+ id: string;
2464
+ label: string;
2465
+ icon?: ReactNode;
2466
+ }
2467
+ interface TokenFieldProps {
2468
+ tokens?: TokenFieldToken[];
2469
+ defaultTokens?: TokenFieldToken[];
2470
+ onTokensChange?: (tokens: TokenFieldToken[]) => void;
2471
+ suggestions?: TokenFieldToken[];
2472
+ suggestionDelayMs?: number;
2473
+ placeholder?: string;
2474
+ /** Keys that convert current text into a token (default: comma). */
2475
+ delimiters?: string[];
2476
+ onContextMenuEntries?: (token: TokenFieldToken) => MenuEntry[];
2477
+ className?: string;
2478
+ 'aria-label'?: string;
2479
+ }
2480
+
2481
+ declare const DEFAULT_SUGGESTION_DELAY_MS = 250;
2482
+ declare function tokenizeInput(value: string, delimiters: string[]): TokenFieldToken[];
2483
+ declare function mergeUniqueTokens(existing: TokenFieldToken[], incoming: TokenFieldToken[]): TokenFieldToken[];
2484
+ declare function filterTokenSuggestions(query: string, suggestions: TokenFieldToken[]): TokenFieldToken[];
2485
+
2486
+ /**
2487
+ * macOS token field — converts text into selectable, draggable tokens.
2488
+ * @see https://developer.apple.com/design/human-interface-guidelines/token-fields
2489
+ */
2490
+ declare function TokenField({ tokens: tokensProp, defaultTokens, onTokensChange, suggestions, suggestionDelayMs, placeholder, delimiters, onContextMenuEntries, className, 'aria-label': ariaLabel, }: TokenFieldProps): react.JSX.Element;
377
2491
 
378
2492
  interface HeaderProps {
379
2493
  children: ReactNode;
@@ -459,4 +2573,131 @@ interface DateRangePickerProps {
459
2573
  }
460
2574
  declare function DateRangePicker({ label, startLabel, endLabel, hint, state, loading, error, inputSize, value, onChange, min, max, disabled, readOnly, className, id, }: DateRangePickerProps): react.JSX.Element;
461
2575
 
462
- export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, AsyncButton, type AsyncButtonProps, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Drawer, type DrawerProps, type DrawerSide, EmptyState, type EmptyStateProps, FileUpload, type FileUploadProps, Header, HeaderActions, type HeaderActionsProps, HeaderBrand, type HeaderBrandProps, type HeaderProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type LaRoseConfig, LaRoseProvider, type LaRoseProviderProps, Modal, type ModalProps, Pagination, type PaginationProps, Popover, type PopoverProps, type PopoverSide, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, type ToastInput, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, type TooltipSide, useCommandPaletteShortcut, useLaRose, useToast };
2576
+ interface PickerOption {
2577
+ value: string;
2578
+ label: string;
2579
+ disabled?: boolean;
2580
+ }
2581
+ interface PickerColumn {
2582
+ id: string;
2583
+ /** Accessible name for the column (e.g. "Month"). */
2584
+ label?: string;
2585
+ options: PickerOption[];
2586
+ flex?: number;
2587
+ }
2588
+ type PickerStyle = 'wheels' | 'compact';
2589
+ type DateTimePickerStyle = 'compact' | 'wheels' | 'inline' | 'automatic';
2590
+ type DateTimePickerMode = 'date' | 'time' | 'datetime' | 'countdown';
2591
+ interface DateTimeValue {
2592
+ /** ISO date string `YYYY-MM-DD`. */
2593
+ date?: string;
2594
+ /** 24-hour time string `HH:mm`. */
2595
+ time?: string;
2596
+ /** Countdown duration in minutes (0–1439). */
2597
+ countdownMinutes?: number;
2598
+ }
2599
+ type PickerValue = Record<string, string>;
2600
+
2601
+ interface PickerProps {
2602
+ columns: PickerColumn[];
2603
+ value: PickerValue;
2604
+ onChange: (value: PickerValue) => void;
2605
+ style?: PickerStyle;
2606
+ label?: string;
2607
+ hint?: string;
2608
+ error?: string | null;
2609
+ state?: UIState;
2610
+ loading?: boolean;
2611
+ disabled?: boolean;
2612
+ inputSize?: Size;
2613
+ /** Shown on the compact trigger when no selection exists. */
2614
+ placeholder?: string;
2615
+ /** Formats the compact trigger label from the current value. */
2616
+ formatValue?: (value: PickerValue, columns: PickerColumn[]) => string;
2617
+ 'aria-label'?: string;
2618
+ }
2619
+ /**
2620
+ * Multipart picker with scrollable wheel columns — Apple HIG picker pattern.
2621
+ * @see https://developer.apple.com/design/human-interface-guidelines/pickers
2622
+ */
2623
+ declare function Picker({ columns, value, onChange, style, label, hint, error, state, loading, disabled, placeholder, formatValue, 'aria-label': ariaLabel, }: PickerProps): react.JSX.Element;
2624
+
2625
+ interface WheelPickerProps {
2626
+ columns: PickerColumn[];
2627
+ value: PickerValue;
2628
+ onChange: (value: PickerValue) => void;
2629
+ disabled?: boolean;
2630
+ /** Removes chrome for embedding in inline layouts. */
2631
+ inline?: boolean;
2632
+ /** Compact popover presentation — wheels fill the panel edge-to-edge. */
2633
+ compact?: boolean;
2634
+ 'aria-label'?: string;
2635
+ }
2636
+ declare function WheelPicker({ columns, value, onChange, disabled, inline, compact, 'aria-label': ariaLabel, }: WheelPickerProps): react.JSX.Element;
2637
+
2638
+ interface WheelColumnProps {
2639
+ id: string;
2640
+ label?: string;
2641
+ options: PickerOption[];
2642
+ value: string;
2643
+ onChange: (value: string) => void;
2644
+ disabled?: boolean;
2645
+ columnFlex?: number;
2646
+ }
2647
+ declare function WheelColumn({ id, label, options, value, onChange, disabled, columnFlex, }: WheelColumnProps): react.JSX.Element;
2648
+
2649
+ interface DateTimePickerProps {
2650
+ value?: DateTimeValue;
2651
+ onChange?: (value: DateTimeValue) => void;
2652
+ mode?: DateTimePickerMode;
2653
+ style?: DateTimePickerStyle;
2654
+ label?: string;
2655
+ hint?: string;
2656
+ error?: string | null;
2657
+ state?: UIState;
2658
+ loading?: boolean;
2659
+ disabled?: boolean;
2660
+ inputSize?: Size;
2661
+ locale?: string;
2662
+ minuteInterval?: number;
2663
+ use12Hour?: boolean;
2664
+ minDate?: string;
2665
+ maxDate?: string;
2666
+ yearRange?: {
2667
+ start: number;
2668
+ end: number;
2669
+ };
2670
+ }
2671
+ /**
2672
+ * Date and time picker with compact, inline, and wheel styles.
2673
+ * @see https://developer.apple.com/design/human-interface-guidelines/pickers
2674
+ */
2675
+ declare function DateTimePicker({ value, onChange, mode, style, label, hint, error, state, loading, disabled, locale, minuteInterval, use12Hour, minDate, maxDate, yearRange, }: DateTimePickerProps): react.JSX.Element;
2676
+
2677
+ interface CalendarGridProps {
2678
+ value?: string;
2679
+ onChange: (isoDate: string) => void;
2680
+ locale?: string;
2681
+ minDate?: string;
2682
+ maxDate?: string;
2683
+ }
2684
+ declare function CalendarGrid({ value, onChange, locale, minDate, maxDate, }: CalendarGridProps): react.JSX.Element;
2685
+
2686
+ declare function buildMinuteOptions(interval?: number): PickerOption[];
2687
+ declare function buildMonthOptions(locale?: string): PickerOption[];
2688
+ declare function buildDayOptions(year: number, month: number): PickerOption[];
2689
+ declare function parseISODate(value?: string): {
2690
+ year: number;
2691
+ month: number;
2692
+ day: number;
2693
+ };
2694
+ declare function toISODate(year: number, month: number, day: number): string;
2695
+ declare function snapMinuteToInterval(minute: number, interval: number): number;
2696
+ declare function resolveAutomaticPickerStyle(mode: 'date' | 'time' | 'datetime' | 'countdown'): 'compact' | 'wheels' | 'inline';
2697
+ declare function formatDateTimeLabel(value: {
2698
+ date?: string;
2699
+ time?: string;
2700
+ countdownMinutes?: number;
2701
+ }, mode: 'date' | 'time' | 'datetime' | 'countdown', locale?: string): string;
2702
+
2703
+ export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActivityItem, type ActivityKind, type ActivityPresentation, ActivityShareButton, type ActivityShareButtonProps, ActivityView, type ActivityViewProps, Alert, AlertDialog, type AlertDialogAction, type AlertDialogPresentation, type AlertDialogProps, type AlertDialogSuppression, type AlertDialogTextField, type AlertProps, type AlertVariant, AsyncButton, type AsyncButtonProps, BackChevronIcon, Badge, type BadgeProps, type BadgeVariant, Box, type BoxProps, type BoxTitlePosition, type BoxVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonPlatformSize, type ButtonProps, type ButtonShape, CalendarGrid, type CalendarGridProps, CaptionButton, type CaptionButtonContent, type CaptionButtonProps, Card, type CardProps, Chart, type ChartAxisConfig, type ChartDataPoint, type ChartLegendItem, type ChartMark, type ChartProps, type ChartSeries, Checkbox, type CheckboxProps, CloseIcon, type CollaborationAction, CollaborationButton, type CollaborationButtonProps, CollaborationPopover, type CollaborationPopoverProps, type Collaborator, Collapse, type CollapseProps, Collection, type CollectionItem, type CollectionLayout, type CollectionProps, ColumnView, type ColumnViewNode, type ColumnViewProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, ComposeIcon, ContextMenu, type ContextMenuEntry, type ContextMenuItemConfig, type ContextMenuPosition, type ContextMenuProps, type ContextMenuSeparatorConfig, type ContextMenuSubmenuConfig, DEFAULT_SEARCH_PLACEHOLDER, DEFAULT_SUGGESTION_DELAY_MS, DEFAULT_SYSTEM_QUICK_ACTIONS, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerMode, type DateTimePickerProps, type DateTimePickerStyle, type DateTimeValue, Dialog, type DialogProps, DisclosureButton, type DisclosureButtonProps, DisclosureGroup, type DisclosureGroupProps, DisclosureList, type DisclosureListItem, type DisclosureListProps, DisclosureTriangle, type DisclosureTriangleProps, DockBar, type DockBarProps, DockMenu, type DockMenuEntry, type DockMenuProps, type DockWindow, DocumentLauncher, type DocumentLauncherProps, DocumentMenuIcon, DocumentToolbar, type DocumentToolbarProps, DragDropList, type DragDropListItem, type DragDropListProps, DragDropProvider, type DragItem, type DragSession, Draggable, type DraggableProps, Drawer, type DrawerProps, type DrawerSide, type DropOperation, type DropResult, type DropTargetState, DropZone, type DropZoneProps, EditMenu, type EditMenuContentType, type EditMenuContext, type EditMenuInputMode, type EditMenuItemConfig, type EditMenuProps, EditMenuSelection, type EditMenuVariant, EmptyState, type EmptyStateProps, type FieldFormat, type FieldValidator, FileBrowser, type FileBrowserItem, type FileBrowserProps, type FileBrowserTab, type FileLocation, FilePreview, type FilePreviewProps, type FilePreviewSource, type FileSyncStatus, FileUpload, type FileUploadProps, FormContinue, type FormContinueProps, type FormatFieldOptions, Header, HeaderActions, type HeaderActionsProps, HeaderBrand, type HeaderBrandProps, type HeaderProps, HeaderTitle, type HeaderTitleProps, HelpButton, type HelpButtonProps, HomeScreenQuickActions, type HomeScreenQuickActionsProps, type ImageBackground, ImageButton, type ImageButtonProps, type ImageFit, type ImageFrameSequence, ImageOverlay, type ImageOverlayProps, ImageView, type ImageViewProps, ImageWell, type ImageWellProps, Input, type InputProps, type LaRoseConfig, LaRoseProvider, type LaRoseProviderProps, Label, type LabelImportance, type LabelProps, List, type ListAccessory, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, type ListVariant, Lockup, type LockupAxis, LockupCard, type LockupCardProps, type LockupProps, LockupRow, type LockupRowProps, MAX_ALERT_BUTTONS, MAX_CONTEXT_MENU_GROUPS, MAX_SUBMENU_ITEMS, MAX_TAB_BAR_ITEMS, MAX_TAB_VIEW_TABS, MAX_TOOLBAR_GROUPS, MAX_TOOLBAR_TITLE_LENGTH, MIN_PULLDOWN_ITEMS, Menu, MenuBar, type MenuBarDocumentContext, MenuBarExtra, type MenuBarExtraConfig, type MenuBarMenuConfig, type MenuBarPlatform, type MenuBarProps, type MenuEntry, type MenuItemConfig, type MenuLayout, type MenuProps, type MenuSubmenuConfig, Modal, type ModalProps, Monogram, type MonogramProps, MorePullDownButton, type MotionConfig, MotionProvider, type MotionProviderProps, type MotionVariant, Ornament, OrnamentButton, type OrnamentButtonProps, type OrnamentConfig, type OrnamentContentAlignment, type OrnamentEdge, type OrnamentProps, type OrnamentVisibility, OrnamentWindow, type OrnamentWindowProps, type OutlineColumn, type OutlineNode, OutlineView, type OutlineViewProps, OutlineViewToolbar, type OutlineViewToolbarProps, OverflowIcon, PATH_SEPARATOR, Pagination, type PaginationProps, PathControl, type PathControlProps, type PathControlVariant, type PathSegment, Picker, type PickerColumn, type PickerOption, type PickerProps, type PickerStyle, type PickerValue, type PointShape, PopUpButton, type PopUpButtonProps, type PopUpCustomOption, type PopUpOption, Popover, type PopoverProps, type PopoverSide, Poster, type PosterProps, Presence, type PresencePhase, type PresenceProps, Progress, type ProgressProps, type ProgressVariant, PullDownButton, type PullDownButtonProps, type PullDownButtonVariant, type PullDownDestructiveConfirmation, type PullDownEntry, type QuickActionIconPlacement, type QuickActionItem, Radio, type RadioProps, STANDARD_MENU_SLOTS, STANDARD_SHORTCUTS, SYSTEM_ACTIVITY_IDS, SearchField, type SearchFieldPlacement, type SearchFieldPlatform, type SearchFieldProps, SearchIcon, SearchScopeBar, type SearchScopeBarProps, type SearchScopeOption, type SearchToken, SearchTokenChip, type SearchTokenChipProps, SecureField, type SecureFieldProps, Select, type SelectOption, type SelectProps, type ShareAudience, ShareButton, type ShareButtonProps, type ShareDestination, ShareIcon, type SharePermission, type SharePermissionOption, type ShareSettings, ShareSheet, type ShareSheetProps, ShareToolbar, type ShareToolbarProps, Sidebar, SidebarDisclosureSection, type SidebarDisclosureSectionProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarIcon, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, type SidebarPlatform, type SidebarProps, SidebarSearch, type SidebarSearchProps, type SidebarSize, SidebarToggle, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, type SplitCompactMode, type SplitOrientation, SplitView, SplitViewPane, type SplitViewPaneProps, type SplitViewProps, SplitViewToolbar, type SplitViewToolbarProps, SquareButton, type SquareButtonProps, type StandardEditActionId, type StandardMenuBarHandlers, type StandardMenuBarOptions, Switch, type SwitchProps, type SystemActivityId, TabBar, TabBarItem, type TabBarItemProps, TabBarList, type TabBarListProps, TabBarPanel, type TabBarPanelProps, type TabBarPlatform, type TabBarProps, type TabBarSearchStyle, type TabBarVariant, TabView, TabViewList, type TabViewListProps, TabViewPanel, type TabViewPanelProps, type TabViewProps, TabViewTab, type TabViewTabProps, type TabViewVariant, Table, type TableColumn, type TableProps, type TableSelectionMode, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TextView, type TextViewProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, type ToastInput, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, TokenField, type TokenFieldProps, type TokenFieldToken, Toolbar, type ToolbarAction, ToolbarBackButton, type ToolbarBackButtonProps, ToolbarCloseButton, type ToolbarCloseButtonProps, ToolbarDocumentMenu, type ToolbarDocumentMenuProps, ToolbarFixedSpace, ToolbarGroup, type ToolbarGroupProps, ToolbarItem, type ToolbarItemProps, ToolbarMoreButton, type ToolbarMoreButtonProps, type ToolbarPlacement, type ToolbarPlatform, ToolbarProminentButton, type ToolbarProminentButtonProps, type ToolbarProps, ToolbarSearch, type ToolbarSearchProps, ToolbarSection, type ToolbarSectionPlacement, type ToolbarSectionProps, ToolbarTitle, type ToolbarTitleProps, Tooltip, type TooltipProps, type TooltipSide, Typography, type TypographyProps, UnsavedIndicator, type UnsavedIndicatorProps, type UsePresenceOptions, type UsePresenceResult, type UseSpringAnimationOptions, WebView, type WebViewHistoryState, WebViewNavigation, type WebViewNavigationProps, type WebViewProps, WebViewShell, type WebViewShellProps, WheelColumn, type WheelColumnProps, WheelPicker, type WheelPickerProps, acceptsDragType, buildDayOptions, buildDockMenuEntries, buildEditMenuActions, buildMinuteOptions, buildMonthOptions, buildPopUpMenuEntries, buildStandardMenuBar, canPreviewFile, clampOrnamentWidth, collapsePathSegments, collectExpandableSubtree, combineValidators, computeVisibleToolbarItemCount, countPullDownActions, createAppMenu, createAppleMenuStub, createDefaultActivities, createEditMenu, createEmailValidator, createFileMenu, createFormatMenu, createHelpMenu, createPhotoActivities, createRequiredValidator, createViewMenu, createWindowMenu, defaultDestructiveConfirmation, documentTitleWithEditedSuffix, entriesFromToolbarActions, fieldIdFromLabel, filterActivities, filterFilesByType, filterOutline, filterSuggestions, filterTokenSuggestions, filterVisibleEditMenuActions, flattenOutline, formatActivityTitle, formatBoxTitle, formatButtonLabel, formatColumnHeader, formatContextMenuTitle, formatDateTimeLabel, formatDisplayName, formatFieldValue, formatFileDate, formatFileSize, formatRating, formatSharePermissionSummary, formatTabBarBadge, getInitials, isFormComplete, isStandardActionAvailable, mergeUniqueTokens, normalizeOutlineColumns, orderAlertActions, parseISODate, parseNumericInput, prepareActivities, prepareContextMenuEntries, prepareMenuEntries, prepareQuickActions, quickActionsToEntries, resolveAutomaticPickerStyle, resolveButtonShape, resolveCancelAction, resolveDefaultValue, resolveDockMenuPosition, resolveDropOperation, resolveDynamicMenuEntries, resolveEditMenuPosition, resolveEditMenuVariant, resolveMenuBarAlignment, resolveOrnamentVisibility, resolvePopUpLabel, resolveQuickActionMenuPosition, resolveSearchFieldPlacement, resolveSelectedSegment, resolveTabBarPlacement, resolveToolbarPlacement, shouldStyleDestructive, shouldUseSystemOverflow, snapMinuteToInterval, sortActivities, sortOutlineNodes, sortRows, splitCompactAndList, toISODate, tokenizeInput, toolbarActionsFromEntries, truncateMiddle, truncateToolbarTitle, useCommandPaletteShortcut, useLaRose, useMotion, useMotionEnabled, usePresence, useSkipMotion, useSplitView, useSpringAnimation, useToast, useWebViewHistory, validateAlertActions, validateMenuBarOrder, warnIfAlertTitleTooLong, warnIfMixedLabelStyles, warnIfPathControlInToolbar, warnIfSearchPlacementMismatch, warnIfTooFewPullDownItems, warnIfTooManyOrnaments, warnIfTooManyTabs, warnIfTooManyToolbarGroups, warnIfToolbarTitleTooLong };