@ecohouse/ui 0.1.35 → 0.1.38
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/README.md +3 -0
- package/dist/index.cjs +1221 -531
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +231 -128
- package/dist/index.d.ts +231 -128
- package/dist/index.js +1144 -463
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Accordion/Accordion.stories.tsx +47 -0
- package/src/components/Accordion/Accordion.tsx +165 -0
- package/src/components/Accordion/index.ts +2 -0
- package/src/components/AutocompleteInput/AutocompleteInput.stories.tsx +80 -0
- package/src/components/AutocompleteInput/AutocompleteInput.tsx +313 -0
- package/src/components/AutocompleteInput/index.ts +2 -0
- package/src/components/Counter/Counter.tsx +61 -26
- package/src/components/QuantityInput/QuantityInput.stories.tsx +45 -0
- package/src/components/QuantityInput/QuantityInput.tsx +153 -0
- package/src/components/QuantityInput/index.ts +2 -0
- package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx +9 -0
- package/src/components/SegmentedToggle/SegmentedToggle.tsx +19 -13
- package/src/components/index.ts +9 -0
- package/src/icons/ArrowLeft/ArrowLeftIcon.test.ts +10 -0
- package/src/icons/ArrowLeft/ArrowLeftIcon.tsx +21 -0
- package/src/icons/ArrowLeft/ArrowLeftIcon.web.tsx +26 -0
- package/src/icons/ArrowLeft/arrowLeftPath.ts +3 -0
- package/src/icons/ArrowLeft/index.ts +1 -0
- package/src/icons/CurrentLocation/CurrentLocationIcon.test.ts +10 -0
- package/src/icons/CurrentLocation/CurrentLocationIcon.tsx +25 -0
- package/src/icons/CurrentLocation/CurrentLocationIcon.web.tsx +30 -0
- package/src/icons/CurrentLocation/currentLocationPath.ts +3 -0
- package/src/icons/CurrentLocation/index.ts +1 -0
- package/src/icons/MoreHorizontal/MoreHorizontalIcon.tsx +26 -0
- package/src/icons/MoreHorizontal/MoreHorizontalIcon.web.tsx +25 -0
- package/src/icons/MoreHorizontal/index.ts +1 -0
- package/src/icons/MoreHorizontal/moreHorizontalPath.ts +2 -0
- package/src/icons/TableView/TableViewIcon.tsx +20 -0
- package/src/icons/TableView/TableViewIcon.web.tsx +26 -0
- package/src/icons/TableView/index.ts +1 -0
- package/src/icons/TableView/tableViewPath.ts +2 -0
- package/src/icons/index.ts +4 -0
- package/src/icons/registry.ts +12 -0
- package/src/index.ts +15 -0
- package/src/primitives/IconStatusBadge/IconStatusBadge.stories.tsx +21 -0
- package/src/primitives/IconStatusBadge/IconStatusBadge.tsx +76 -0
- package/src/primitives/IconStatusBadge/index.ts +2 -0
- package/src/primitives/InfoCardV2/InfoCardV2.stories.tsx +64 -0
- package/src/primitives/InfoCardV2/InfoCardV2.tsx +116 -0
- package/src/primitives/InfoCardV2/index.ts +2 -0
- package/src/primitives/index.ts +7 -0
- package/src/theme/colors.test.ts +1 -0
- package/src/theme/colors.ts +1 -0
package/dist/index.d.cts
CHANGED
|
@@ -45,131 +45,6 @@ interface MenuItemProps extends Omit<PressableProps, "onPress" | "disabled" | "s
|
|
|
45
45
|
}
|
|
46
46
|
declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<View>>;
|
|
47
47
|
|
|
48
|
-
interface FavoritesButtonProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
49
|
-
/** Controlled favorite state. */
|
|
50
|
-
value?: boolean;
|
|
51
|
-
/** Initial state when the button is uncontrolled. */
|
|
52
|
-
defaultValue?: boolean;
|
|
53
|
-
/** Called with the next favorite state when pressed. */
|
|
54
|
-
onValueChange?: (value: boolean) => void;
|
|
55
|
-
disabled?: boolean;
|
|
56
|
-
style?: StyleProp<ViewStyle>;
|
|
57
|
-
className?: string;
|
|
58
|
-
hitSlop?: PressableProps["hitSlop"];
|
|
59
|
-
}
|
|
60
|
-
declare const FavoritesButton: react.ForwardRefExoticComponent<FavoritesButtonProps & react.RefAttributes<react_native.View>>;
|
|
61
|
-
|
|
62
|
-
type BrandLogoVariant = "white" | "brand";
|
|
63
|
-
interface BrandLogoProps {
|
|
64
|
-
/** White for dark surfaces, or the Cortel brand color for light surfaces. */
|
|
65
|
-
variant?: BrandLogoVariant;
|
|
66
|
-
/** Rendered width. Defaults to 62; setting only width preserves the original ratio. */
|
|
67
|
-
width?: number;
|
|
68
|
-
/** Rendered height. Defaults to 86; setting only height preserves the original ratio. */
|
|
69
|
-
height?: number;
|
|
70
|
-
/** Accessible name announced for the logo. */
|
|
71
|
-
accessibilityLabel?: string;
|
|
72
|
-
}
|
|
73
|
-
declare const BRAND_LOGO_DEFAULT_WIDTH = 62;
|
|
74
|
-
declare const BRAND_LOGO_DEFAULT_HEIGHT = 86;
|
|
75
|
-
declare const BRAND_LOGO_COLORS: {
|
|
76
|
-
readonly white: "#FFFFFF";
|
|
77
|
-
readonly brand: "#B76533";
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
/** Native Cortel Booking brand mark. */
|
|
81
|
-
declare function BrandLogo({ variant, width, height, accessibilityLabel, }: BrandLogoProps): react.JSX.Element;
|
|
82
|
-
|
|
83
|
-
/** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
|
|
84
|
-
type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
|
|
85
|
-
/** Stable identity for React keys; falls back to `label`. */
|
|
86
|
-
key?: string;
|
|
87
|
-
onPress: () => void;
|
|
88
|
-
};
|
|
89
|
-
interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
90
|
-
/** Logged-in user's display name. */
|
|
91
|
-
name: string;
|
|
92
|
-
/** Shown under the name, e.g. the user's email. */
|
|
93
|
-
email?: string;
|
|
94
|
-
/** Photo URL; falls back to a placeholder icon when missing or when it fails to load. */
|
|
95
|
-
imageUrl?: string | null;
|
|
96
|
-
/** Called on every press, in addition to any menu toggling driven by `menuItems`. */
|
|
97
|
-
onPress?: (event: GestureResponderEvent) => void;
|
|
98
|
-
/** External — non-interactive. */
|
|
99
|
-
disabled?: boolean;
|
|
100
|
-
/** Trailing chevron, typically used to hint a dropdown/menu. */
|
|
101
|
-
showChevron?: boolean;
|
|
102
|
-
/**
|
|
103
|
-
* Account-menu options, supplied entirely by the consumer (icon, label,
|
|
104
|
-
* action, and per-item colors). When set, pressing the chip opens a
|
|
105
|
-
* dropdown listing them via `MenuItem`.
|
|
106
|
-
*/
|
|
107
|
-
menuItems?: AvatarMenuItem[];
|
|
108
|
-
/** Controlled open state for the menu. */
|
|
109
|
-
open?: boolean;
|
|
110
|
-
defaultOpen?: boolean;
|
|
111
|
-
onOpenChange?: (open: boolean) => void;
|
|
112
|
-
/** Fixed menu width; defaults to matching the chip's width. */
|
|
113
|
-
menuWidth?: number;
|
|
114
|
-
style?: StyleProp<ViewStyle>;
|
|
115
|
-
className?: string;
|
|
116
|
-
hitSlop?: PressableProps["hitSlop"];
|
|
117
|
-
}
|
|
118
|
-
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
|
|
119
|
-
|
|
120
|
-
interface AvatarSimpleProps extends Omit<ViewProps, "style" | "children"> {
|
|
121
|
-
/** Logged-in user's display name. */
|
|
122
|
-
name: string;
|
|
123
|
-
/** Shown under the name, e.g. the user's email. */
|
|
124
|
-
email: string;
|
|
125
|
-
/** Photo URL; falls back to a solid placeholder when missing or when it fails to load. */
|
|
126
|
-
imageUrl?: string | null;
|
|
127
|
-
/** Called when the trailing logout control is pressed. */
|
|
128
|
-
onLogOut?: () => void;
|
|
129
|
-
/** Accessible label for the logout control. Defaults to `"Log out"`. */
|
|
130
|
-
logOutAccessibilityLabel?: string;
|
|
131
|
-
/**
|
|
132
|
-
* Compact mode — avatar image only (no card chrome, name, email, or logout).
|
|
133
|
-
* Used by collapsed account sidebars.
|
|
134
|
-
*/
|
|
135
|
-
compact?: boolean;
|
|
136
|
-
style?: StyleProp<ViewStyle>;
|
|
137
|
-
className?: string;
|
|
138
|
-
}
|
|
139
|
-
declare const AvatarSimple: react.ForwardRefExoticComponent<AvatarSimpleProps & react.RefAttributes<View>>;
|
|
140
|
-
|
|
141
|
-
interface AccountHeaderProps extends Omit<ViewProps, "style" | "children"> {
|
|
142
|
-
title: string;
|
|
143
|
-
/**
|
|
144
|
-
* When set, shows a 32×32 back control (takes priority over `onMenuPress`).
|
|
145
|
-
* Used on nested account pages such as booking details.
|
|
146
|
-
*/
|
|
147
|
-
onBackPress?: () => void;
|
|
148
|
-
/** When set, shows the 28×28 menu control (mobile account shell). Ignored if `onBackPress` is set. */
|
|
149
|
-
onMenuPress?: () => void;
|
|
150
|
-
onNotificationsPress?: () => void;
|
|
151
|
-
/** Optional control rendered to the left of notifications (e.g. language switcher). */
|
|
152
|
-
languageSlot?: ReactNode;
|
|
153
|
-
/** Optional status chip (or other accessory) rendered after the title with a 12px gap. */
|
|
154
|
-
badge?: ReactNode;
|
|
155
|
-
/** Accessible name for the back control. Defaults to `"Back"`. */
|
|
156
|
-
backAccessibilityLabel?: string;
|
|
157
|
-
/** Accessible name for the menu control. Defaults to `"Open menu"`. */
|
|
158
|
-
menuAccessibilityLabel?: string;
|
|
159
|
-
/** Accessible name for notifications. Defaults to `"Notifications"`. */
|
|
160
|
-
notificationsAccessibilityLabel?: string;
|
|
161
|
-
/**
|
|
162
|
-
* Web CSS class for the menu control (hide on desktop via `#account-header-menu` /
|
|
163
|
-
* `.account-header-menu` while keeping it mounted to avoid a mobile refresh flash).
|
|
164
|
-
*/
|
|
165
|
-
menuClassName?: string;
|
|
166
|
-
/** Optional title style override (e.g. mobile 14px from the web app). */
|
|
167
|
-
titleStyle?: StyleProp<TextStyle>;
|
|
168
|
-
style?: StyleProp<ViewStyle>;
|
|
169
|
-
className?: string;
|
|
170
|
-
}
|
|
171
|
-
declare const AccountHeader: react.ForwardRefExoticComponent<AccountHeaderProps & react.RefAttributes<View>>;
|
|
172
|
-
|
|
173
48
|
interface IconProps {
|
|
174
49
|
size?: number;
|
|
175
50
|
color?: string;
|
|
@@ -187,6 +62,9 @@ interface ArrowRightIconProps {
|
|
|
187
62
|
/** Native — react-native-svg (peer dependency). */
|
|
188
63
|
declare function ArrowRightIcon({ size, color, strokeWidth, }: ArrowRightIconProps): react.JSX.Element;
|
|
189
64
|
|
|
65
|
+
/** Native — react-native-svg (peer dependency). */
|
|
66
|
+
declare function ArrowLeftIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
67
|
+
|
|
190
68
|
declare function AlertTriangleIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
191
69
|
|
|
192
70
|
declare function AppleIcon({ size, color }: IconProps): react.JSX.Element;
|
|
@@ -237,6 +115,9 @@ declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.E
|
|
|
237
115
|
|
|
238
116
|
declare function CloseIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
239
117
|
|
|
118
|
+
/** Native — react-native-svg (peer dependency). */
|
|
119
|
+
declare function CurrentLocationIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
|
|
120
|
+
|
|
240
121
|
declare function EditIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
241
122
|
|
|
242
123
|
declare function SaveHeartIcon({ size, color, strokeWidth, fillOpacity, }: IconProps): react.JSX.Element;
|
|
@@ -325,6 +206,8 @@ declare function MenuLinesIcon({ size, color, strokeWidth }: IconProps): react.J
|
|
|
325
206
|
|
|
326
207
|
declare function MinusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
327
208
|
|
|
209
|
+
declare function MoreHorizontalIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
|
|
210
|
+
|
|
328
211
|
declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
329
212
|
|
|
330
213
|
declare function PhoneIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
@@ -373,6 +256,8 @@ interface StarFilledIconProps extends IconProps {
|
|
|
373
256
|
/** Native — supplied solid orange 28×26 star icon. */
|
|
374
257
|
declare function StarFilledIcon({ size, height, color, strokeWidth, }: StarFilledIconProps): react.JSX.Element;
|
|
375
258
|
|
|
259
|
+
declare function TableViewIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
260
|
+
|
|
376
261
|
interface UserIconProps {
|
|
377
262
|
size?: number;
|
|
378
263
|
color?: string;
|
|
@@ -396,6 +281,7 @@ declare const icons: {
|
|
|
396
281
|
readonly alertTriangle: typeof AlertTriangleIcon;
|
|
397
282
|
readonly areaExpand: typeof AreaExpandIcon;
|
|
398
283
|
readonly apple: typeof AppleIcon;
|
|
284
|
+
readonly arrowLeft: typeof ArrowLeftIcon;
|
|
399
285
|
readonly arrowRight: typeof ArrowRightIcon;
|
|
400
286
|
readonly bag: typeof BagIcon;
|
|
401
287
|
readonly ban: typeof BanIcon;
|
|
@@ -412,6 +298,7 @@ declare const icons: {
|
|
|
412
298
|
readonly chevronLeft: typeof ChevronLeftIcon;
|
|
413
299
|
readonly clock: typeof ClockIcon;
|
|
414
300
|
readonly close: typeof CloseIcon;
|
|
301
|
+
readonly currentLocation: typeof CurrentLocationIcon;
|
|
415
302
|
readonly edit: typeof EditIcon;
|
|
416
303
|
readonly clockFilled: typeof ClockFilledIcon;
|
|
417
304
|
readonly copy: typeof CopyIcon;
|
|
@@ -446,6 +333,7 @@ declare const icons: {
|
|
|
446
333
|
readonly menu: typeof MenuIcon;
|
|
447
334
|
readonly menuLines: typeof MenuLinesIcon;
|
|
448
335
|
readonly minus: typeof MinusIcon;
|
|
336
|
+
readonly moreHorizontal: typeof MoreHorizontalIcon;
|
|
449
337
|
readonly navigate: typeof NavigateIcon;
|
|
450
338
|
readonly noSmoking: typeof NoSmokingIcon;
|
|
451
339
|
readonly paw: typeof PawIcon;
|
|
@@ -465,6 +353,7 @@ declare const icons: {
|
|
|
465
353
|
readonly sort: typeof SortIcon;
|
|
466
354
|
readonly star: typeof StarIcon;
|
|
467
355
|
readonly starFilled: typeof StarFilledIcon;
|
|
356
|
+
readonly tableView: typeof TableViewIcon;
|
|
468
357
|
readonly tooltipArrow: typeof TooltipArrowIcon;
|
|
469
358
|
readonly trash: typeof TrashIcon;
|
|
470
359
|
readonly user: typeof UserIcon;
|
|
@@ -477,8 +366,8 @@ declare const icons: {
|
|
|
477
366
|
type IconName = keyof typeof icons;
|
|
478
367
|
declare const iconNames: IconName[];
|
|
479
368
|
declare const iconGroups: {
|
|
480
|
-
readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "listView", "locationPin", "locationUser", "mapCollapse", "mapExpand", "mapView", "menu", "menuLines", "navigate"];
|
|
481
|
-
readonly actions: readonly ["show", "hide", "alertTriangle", "ban", "bell", "camera", "key", "check", "checkBadge", "checkSuccess", "copy", "download", "search", "calendar", "calendarOutline", "close", "edit", "ratingStar", "saveHeart", "share", "filters", "fullscreen", "heart", "headset", "zoomOut", "star", "starFilled", "minus", "plus", "refresh", "refundStatus", "sort"];
|
|
369
|
+
readonly navigation: readonly ["arrowLeft", "arrowRight", "chevronDown", "chevronLeft", "currentLocation", "home", "listView", "locationPin", "locationUser", "mapCollapse", "mapExpand", "mapView", "menu", "menuLines", "navigate", "tableView"];
|
|
370
|
+
readonly actions: readonly ["show", "hide", "alertTriangle", "ban", "bell", "camera", "key", "check", "checkBadge", "checkSuccess", "copy", "download", "search", "calendar", "calendarOutline", "close", "edit", "ratingStar", "saveHeart", "share", "filters", "fullscreen", "heart", "headset", "zoomOut", "star", "starFilled", "minus", "moreHorizontal", "plus", "refresh", "refundStatus", "sort"];
|
|
482
371
|
readonly objects: readonly ["bag", "bathrooms", "bedrooms", "building", "cardLocation", "clock", "clockFilled", "guests", "lock", "noSmoking", "paw", "qrCode", "quietHours", "trash", "user", "usersAlt", "video", "videoOff", "whatsApp"];
|
|
483
372
|
readonly communication: readonly ["mail", "phone"];
|
|
484
373
|
readonly social: readonly ["apple", "facebook", "googlePlay", "instagram", "linkedin"];
|
|
@@ -493,6 +382,153 @@ interface IconByNameProps extends IconProps {
|
|
|
493
382
|
}
|
|
494
383
|
declare function Icon({ name, ...props }: IconByNameProps): react.JSX.Element;
|
|
495
384
|
|
|
385
|
+
interface InfoCardV2Props extends Omit<ViewProps, "style" | "children"> {
|
|
386
|
+
label: string;
|
|
387
|
+
value: string;
|
|
388
|
+
icon: IconComponent;
|
|
389
|
+
iconProps?: Omit<IconProps, "size">;
|
|
390
|
+
iconSize?: number;
|
|
391
|
+
style?: StyleProp<ViewStyle>;
|
|
392
|
+
className?: string;
|
|
393
|
+
}
|
|
394
|
+
/** Dashboard metric card with a leading icon, muted label, and emphasized value. */
|
|
395
|
+
declare const InfoCardV2: react.ForwardRefExoticComponent<InfoCardV2Props & react.RefAttributes<View>>;
|
|
396
|
+
|
|
397
|
+
interface FavoritesButtonProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
398
|
+
/** Controlled favorite state. */
|
|
399
|
+
value?: boolean;
|
|
400
|
+
/** Initial state when the button is uncontrolled. */
|
|
401
|
+
defaultValue?: boolean;
|
|
402
|
+
/** Called with the next favorite state when pressed. */
|
|
403
|
+
onValueChange?: (value: boolean) => void;
|
|
404
|
+
disabled?: boolean;
|
|
405
|
+
style?: StyleProp<ViewStyle>;
|
|
406
|
+
className?: string;
|
|
407
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
408
|
+
}
|
|
409
|
+
declare const FavoritesButton: react.ForwardRefExoticComponent<FavoritesButtonProps & react.RefAttributes<react_native.View>>;
|
|
410
|
+
|
|
411
|
+
interface IconStatusBadgeProps extends Omit<ViewProps, "style" | "children"> {
|
|
412
|
+
label: string;
|
|
413
|
+
icon: IconComponent;
|
|
414
|
+
iconProps?: Omit<IconProps, "size">;
|
|
415
|
+
iconSize?: number;
|
|
416
|
+
style?: StyleProp<ViewStyle>;
|
|
417
|
+
className?: string;
|
|
418
|
+
}
|
|
419
|
+
declare const IconStatusBadge: react.ForwardRefExoticComponent<IconStatusBadgeProps & react.RefAttributes<View>>;
|
|
420
|
+
|
|
421
|
+
type BrandLogoVariant = "white" | "brand";
|
|
422
|
+
interface BrandLogoProps {
|
|
423
|
+
/** White for dark surfaces, or the Cortel brand color for light surfaces. */
|
|
424
|
+
variant?: BrandLogoVariant;
|
|
425
|
+
/** Rendered width. Defaults to 62; setting only width preserves the original ratio. */
|
|
426
|
+
width?: number;
|
|
427
|
+
/** Rendered height. Defaults to 86; setting only height preserves the original ratio. */
|
|
428
|
+
height?: number;
|
|
429
|
+
/** Accessible name announced for the logo. */
|
|
430
|
+
accessibilityLabel?: string;
|
|
431
|
+
}
|
|
432
|
+
declare const BRAND_LOGO_DEFAULT_WIDTH = 62;
|
|
433
|
+
declare const BRAND_LOGO_DEFAULT_HEIGHT = 86;
|
|
434
|
+
declare const BRAND_LOGO_COLORS: {
|
|
435
|
+
readonly white: "#FFFFFF";
|
|
436
|
+
readonly brand: "#B76533";
|
|
437
|
+
};
|
|
438
|
+
|
|
439
|
+
/** Native Cortel Booking brand mark. */
|
|
440
|
+
declare function BrandLogo({ variant, width, height, accessibilityLabel, }: BrandLogoProps): react.JSX.Element;
|
|
441
|
+
|
|
442
|
+
/** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
|
|
443
|
+
type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
|
|
444
|
+
/** Stable identity for React keys; falls back to `label`. */
|
|
445
|
+
key?: string;
|
|
446
|
+
onPress: () => void;
|
|
447
|
+
};
|
|
448
|
+
interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
449
|
+
/** Logged-in user's display name. */
|
|
450
|
+
name: string;
|
|
451
|
+
/** Shown under the name, e.g. the user's email. */
|
|
452
|
+
email?: string;
|
|
453
|
+
/** Photo URL; falls back to a placeholder icon when missing or when it fails to load. */
|
|
454
|
+
imageUrl?: string | null;
|
|
455
|
+
/** Called on every press, in addition to any menu toggling driven by `menuItems`. */
|
|
456
|
+
onPress?: (event: GestureResponderEvent) => void;
|
|
457
|
+
/** External — non-interactive. */
|
|
458
|
+
disabled?: boolean;
|
|
459
|
+
/** Trailing chevron, typically used to hint a dropdown/menu. */
|
|
460
|
+
showChevron?: boolean;
|
|
461
|
+
/**
|
|
462
|
+
* Account-menu options, supplied entirely by the consumer (icon, label,
|
|
463
|
+
* action, and per-item colors). When set, pressing the chip opens a
|
|
464
|
+
* dropdown listing them via `MenuItem`.
|
|
465
|
+
*/
|
|
466
|
+
menuItems?: AvatarMenuItem[];
|
|
467
|
+
/** Controlled open state for the menu. */
|
|
468
|
+
open?: boolean;
|
|
469
|
+
defaultOpen?: boolean;
|
|
470
|
+
onOpenChange?: (open: boolean) => void;
|
|
471
|
+
/** Fixed menu width; defaults to matching the chip's width. */
|
|
472
|
+
menuWidth?: number;
|
|
473
|
+
style?: StyleProp<ViewStyle>;
|
|
474
|
+
className?: string;
|
|
475
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
476
|
+
}
|
|
477
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
|
|
478
|
+
|
|
479
|
+
interface AvatarSimpleProps extends Omit<ViewProps, "style" | "children"> {
|
|
480
|
+
/** Logged-in user's display name. */
|
|
481
|
+
name: string;
|
|
482
|
+
/** Shown under the name, e.g. the user's email. */
|
|
483
|
+
email: string;
|
|
484
|
+
/** Photo URL; falls back to a solid placeholder when missing or when it fails to load. */
|
|
485
|
+
imageUrl?: string | null;
|
|
486
|
+
/** Called when the trailing logout control is pressed. */
|
|
487
|
+
onLogOut?: () => void;
|
|
488
|
+
/** Accessible label for the logout control. Defaults to `"Log out"`. */
|
|
489
|
+
logOutAccessibilityLabel?: string;
|
|
490
|
+
/**
|
|
491
|
+
* Compact mode — avatar image only (no card chrome, name, email, or logout).
|
|
492
|
+
* Used by collapsed account sidebars.
|
|
493
|
+
*/
|
|
494
|
+
compact?: boolean;
|
|
495
|
+
style?: StyleProp<ViewStyle>;
|
|
496
|
+
className?: string;
|
|
497
|
+
}
|
|
498
|
+
declare const AvatarSimple: react.ForwardRefExoticComponent<AvatarSimpleProps & react.RefAttributes<View>>;
|
|
499
|
+
|
|
500
|
+
interface AccountHeaderProps extends Omit<ViewProps, "style" | "children"> {
|
|
501
|
+
title: string;
|
|
502
|
+
/**
|
|
503
|
+
* When set, shows a 32×32 back control (takes priority over `onMenuPress`).
|
|
504
|
+
* Used on nested account pages such as booking details.
|
|
505
|
+
*/
|
|
506
|
+
onBackPress?: () => void;
|
|
507
|
+
/** When set, shows the 28×28 menu control (mobile account shell). Ignored if `onBackPress` is set. */
|
|
508
|
+
onMenuPress?: () => void;
|
|
509
|
+
onNotificationsPress?: () => void;
|
|
510
|
+
/** Optional control rendered to the left of notifications (e.g. language switcher). */
|
|
511
|
+
languageSlot?: ReactNode;
|
|
512
|
+
/** Optional status chip (or other accessory) rendered after the title with a 12px gap. */
|
|
513
|
+
badge?: ReactNode;
|
|
514
|
+
/** Accessible name for the back control. Defaults to `"Back"`. */
|
|
515
|
+
backAccessibilityLabel?: string;
|
|
516
|
+
/** Accessible name for the menu control. Defaults to `"Open menu"`. */
|
|
517
|
+
menuAccessibilityLabel?: string;
|
|
518
|
+
/** Accessible name for notifications. Defaults to `"Notifications"`. */
|
|
519
|
+
notificationsAccessibilityLabel?: string;
|
|
520
|
+
/**
|
|
521
|
+
* Web CSS class for the menu control (hide on desktop via `#account-header-menu` /
|
|
522
|
+
* `.account-header-menu` while keeping it mounted to avoid a mobile refresh flash).
|
|
523
|
+
*/
|
|
524
|
+
menuClassName?: string;
|
|
525
|
+
/** Optional title style override (e.g. mobile 14px from the web app). */
|
|
526
|
+
titleStyle?: StyleProp<TextStyle>;
|
|
527
|
+
style?: StyleProp<ViewStyle>;
|
|
528
|
+
className?: string;
|
|
529
|
+
}
|
|
530
|
+
declare const AccountHeader: react.ForwardRefExoticComponent<AccountHeaderProps & react.RefAttributes<View>>;
|
|
531
|
+
|
|
496
532
|
type BadgeVariant = "default" | "transparent";
|
|
497
533
|
interface BadgeProps extends Omit<ViewProps, "style" | "children"> {
|
|
498
534
|
label: string;
|
|
@@ -606,6 +642,21 @@ interface AccordionItemProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
606
642
|
*/
|
|
607
643
|
declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<View>>;
|
|
608
644
|
|
|
645
|
+
interface AccordionProps extends Omit<ViewProps, "style" | "children"> {
|
|
646
|
+
title: string;
|
|
647
|
+
children: ReactNode;
|
|
648
|
+
open?: boolean;
|
|
649
|
+
defaultOpen?: boolean;
|
|
650
|
+
onOpenChange?: (open: boolean) => void;
|
|
651
|
+
disabled?: boolean;
|
|
652
|
+
error?: boolean;
|
|
653
|
+
style?: StyleProp<ViewStyle>;
|
|
654
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
655
|
+
className?: string;
|
|
656
|
+
}
|
|
657
|
+
/** Expandable surface for arbitrary interactive content such as form fields. */
|
|
658
|
+
declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<View>>;
|
|
659
|
+
|
|
609
660
|
interface StepListProps extends Omit<ViewProps, "style" | "children"> {
|
|
610
661
|
/** Step descriptions, numbered automatically from 1. */
|
|
611
662
|
steps: string[];
|
|
@@ -625,16 +676,41 @@ interface CounterProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
625
676
|
max?: number;
|
|
626
677
|
step?: number;
|
|
627
678
|
disabled?: boolean;
|
|
679
|
+
/** Places the value before both controls for use inside input-like fields. */
|
|
680
|
+
layout?: "controls-around" | "value-first";
|
|
628
681
|
style?: StyleProp<ViewStyle>;
|
|
629
682
|
className?: string;
|
|
630
683
|
hitSlop?: PressableProps["hitSlop"];
|
|
631
684
|
}
|
|
632
685
|
declare const Counter: react.ForwardRefExoticComponent<CounterProps & react.RefAttributes<View>>;
|
|
633
686
|
|
|
687
|
+
interface QuantityInputProps extends Omit<ViewProps, "style" | "children"> {
|
|
688
|
+
label: string;
|
|
689
|
+
icon: IconComponent;
|
|
690
|
+
iconProps?: Omit<IconProps, "size">;
|
|
691
|
+
iconSize?: number;
|
|
692
|
+
value?: number;
|
|
693
|
+
defaultValue?: number;
|
|
694
|
+
onValueChange?: (value: number) => void;
|
|
695
|
+
min?: number;
|
|
696
|
+
max?: number;
|
|
697
|
+
step?: number;
|
|
698
|
+
disabled?: boolean;
|
|
699
|
+
error?: boolean;
|
|
700
|
+
hint?: string;
|
|
701
|
+
showHint?: boolean;
|
|
702
|
+
style?: StyleProp<ViewStyle>;
|
|
703
|
+
className?: string;
|
|
704
|
+
}
|
|
705
|
+
/** Input-like labeled quantity control with an icon and increment/decrement actions. */
|
|
706
|
+
declare const QuantityInput: react.ForwardRefExoticComponent<QuantityInputProps & react.RefAttributes<View>>;
|
|
707
|
+
|
|
634
708
|
interface SegmentedToggleOption {
|
|
635
709
|
value: string;
|
|
636
710
|
label: string;
|
|
637
711
|
icon?: IconComponent;
|
|
712
|
+
/** Hides the visual label while retaining it as the accessible name. */
|
|
713
|
+
showLabel?: boolean;
|
|
638
714
|
}
|
|
639
715
|
interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
|
|
640
716
|
/**
|
|
@@ -901,6 +977,32 @@ interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
|
|
|
901
977
|
}
|
|
902
978
|
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
|
|
903
979
|
|
|
980
|
+
interface AutocompleteOption {
|
|
981
|
+
value: string;
|
|
982
|
+
label: string;
|
|
983
|
+
description?: string;
|
|
984
|
+
}
|
|
985
|
+
interface AutocompleteInputProps extends Omit<InputProps, "value" | "onChangeText" | "onSubmitEditing"> {
|
|
986
|
+
value: string;
|
|
987
|
+
options: AutocompleteOption[];
|
|
988
|
+
onChangeText: (value: string) => void;
|
|
989
|
+
onOptionSelect: (option: AutocompleteOption) => void;
|
|
990
|
+
onSubmit?: (firstOption?: AutocompleteOption) => void;
|
|
991
|
+
open?: boolean;
|
|
992
|
+
defaultOpen?: boolean;
|
|
993
|
+
onOpenChange?: (open: boolean) => void;
|
|
994
|
+
loading?: boolean;
|
|
995
|
+
loadingText?: string;
|
|
996
|
+
emptyText?: string;
|
|
997
|
+
showEmpty?: boolean;
|
|
998
|
+
renderOption?: (option: AutocompleteOption, highlighted: boolean) => ReactNode;
|
|
999
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
1000
|
+
menuStyle?: StyleProp<ViewStyle>;
|
|
1001
|
+
containerClassName?: string;
|
|
1002
|
+
menuClassName?: string;
|
|
1003
|
+
}
|
|
1004
|
+
declare const AutocompleteInput: react.ForwardRefExoticComponent<AutocompleteInputProps & react.RefAttributes<View>>;
|
|
1005
|
+
|
|
904
1006
|
interface VerificationCodeInputHandle {
|
|
905
1007
|
clear: () => void;
|
|
906
1008
|
focus: (index?: number) => void;
|
|
@@ -1131,6 +1233,7 @@ declare const colors: {
|
|
|
1131
1233
|
readonly whiteAlpha60: "#FFFFFF99";
|
|
1132
1234
|
readonly whiteAlpha40: "#FFFFFF66";
|
|
1133
1235
|
readonly whiteAlpha20: "#FFFFFF33";
|
|
1236
|
+
readonly whiteAlpha1: "#FFFFFF03";
|
|
1134
1237
|
readonly whiteAlpha6: "#FFFFFF0F";
|
|
1135
1238
|
readonly whiteAlpha10: "#FFFFFF1A";
|
|
1136
1239
|
readonly whiteAlpha5: "#FFFFFF0D";
|
|
@@ -1452,4 +1555,4 @@ type ResolvePopoverAlignOptions = {
|
|
|
1452
1555
|
*/
|
|
1453
1556
|
declare function resolvePopoverAlign({ triggerRect, panelWidth, viewportWidth, padding, preferred, }: ResolvePopoverAlignOptions): PopoverAlign;
|
|
1454
1557
|
|
|
1455
|
-
export { AccordionItem, type AccordionItemProps, AccountHeader, type AccountHeaderProps, AlertTriangleIcon, Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, AvatarSimple, type AvatarSimpleProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, type CommentCardProps, ContactInfoCard, type ContactInfoCardProps, CopyIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, DownloadIcon, EditIcon, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, FloatingActionButton, type FloatingActionButtonProps, FullscreenIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, InfoTile, type InfoTileProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherVariant, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MenuLinesIcon, MinusIcon, Modal, type ModalProps, NavigateIcon, NoSmokingIcon, PaginationDots, type PaginationDotsProps, PawIcon, PhoneIcon, PlusIcon, type PopoverAlign, QrCodeIcon, QuietHoursIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, RefreshIcon, RefundStatusIcon, type ResolvePopoverAlignOptions, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, type SidebarItem, type SidebarProps, type SidebarUser, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, StepList, type StepListProps, StepPager, type StepPagerProps, Textarea, type TextareaProps, Toggle, type ToggleProps, ToggleRow, type ToggleRowProps, TooltipArrowIcon, TrashIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, VideoOffIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
|
1558
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AccountHeader, type AccountHeaderProps, AlertTriangleIcon, Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, type AutocompleteInputProps, type AutocompleteOption, Avatar, type AvatarMenuItem, type AvatarProps, AvatarSimple, type AvatarSimpleProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, type CommentCardProps, ContactInfoCard, type ContactInfoCardProps, CopyIcon, Counter, type CounterProps, CurrentLocationIcon, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, DownloadIcon, EditIcon, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, FloatingActionButton, type FloatingActionButtonProps, FullscreenIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, IconStatusBadge, type IconStatusBadgeProps, InfoCardV2, type InfoCardV2Props, InfoTile, type InfoTileProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherVariant, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MenuLinesIcon, MinusIcon, Modal, type ModalProps, MoreHorizontalIcon, NavigateIcon, NoSmokingIcon, PaginationDots, type PaginationDotsProps, PawIcon, PhoneIcon, PlusIcon, type PopoverAlign, QrCodeIcon, QuantityInput, type QuantityInputProps, QuietHoursIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, RefreshIcon, RefundStatusIcon, type ResolvePopoverAlignOptions, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, type SidebarItem, type SidebarProps, type SidebarUser, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, StepList, type StepListProps, StepPager, type StepPagerProps, TableViewIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, ToggleRow, type ToggleRowProps, TooltipArrowIcon, TrashIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, VideoOffIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|