@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.
- package/dist/index.css +7655 -1294
- package/dist/index.d.ts +2253 -12
- package/dist/index.js +11836 -1262
- 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
|
-
|
|
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?:
|
|
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
|
|
242
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 };
|