@ecohouse/ui 0.1.34 → 0.1.36
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 +1 -0
- package/dist/index.cjs +903 -489
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +169 -129
- package/dist/index.d.ts +169 -129
- package/dist/index.js +901 -491
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AccordionItem/AccordionItem.tsx +14 -11
- package/src/components/AccountHeader/AccountHeader.tsx +16 -0
- package/src/components/DatePicker/DatePicker.tsx +47 -14
- package/src/components/Input/Input.tsx +54 -21
- package/src/components/LanguageSwitcher/LanguageSwitcher.stories.tsx +11 -0
- package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +103 -19
- package/src/components/LanguageSwitcher/index.ts +5 -1
- package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx +9 -0
- package/src/components/SegmentedToggle/SegmentedToggle.tsx +19 -13
- package/src/components/Select/Select.tsx +90 -5
- package/src/components/Textarea/Textarea.tsx +29 -4
- package/src/components/index.ts +5 -1
- package/src/icons/Globe/GlobeIcon.tsx +2 -2
- package/src/icons/Globe/GlobeIcon.web.tsx +2 -2
- package/src/icons/Globe/globePath.ts +2 -2
- package/src/icons/Key/keyPath.ts +1 -1
- 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 +2 -0
- package/src/icons/registry.ts +6 -0
- package/src/index.ts +7 -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/typography.ts +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -45,129 +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 status chip (or other accessory) rendered after the title with a 12px gap. */
|
|
152
|
-
badge?: ReactNode;
|
|
153
|
-
/** Accessible name for the back control. Defaults to `"Back"`. */
|
|
154
|
-
backAccessibilityLabel?: string;
|
|
155
|
-
/** Accessible name for the menu control. Defaults to `"Open menu"`. */
|
|
156
|
-
menuAccessibilityLabel?: string;
|
|
157
|
-
/** Accessible name for notifications. Defaults to `"Notifications"`. */
|
|
158
|
-
notificationsAccessibilityLabel?: string;
|
|
159
|
-
/**
|
|
160
|
-
* Web CSS class for the menu control (hide on desktop via `#account-header-menu` /
|
|
161
|
-
* `.account-header-menu` while keeping it mounted to avoid a mobile refresh flash).
|
|
162
|
-
*/
|
|
163
|
-
menuClassName?: string;
|
|
164
|
-
/** Optional title style override (e.g. mobile 14px from the web app). */
|
|
165
|
-
titleStyle?: StyleProp<TextStyle>;
|
|
166
|
-
style?: StyleProp<ViewStyle>;
|
|
167
|
-
className?: string;
|
|
168
|
-
}
|
|
169
|
-
declare const AccountHeader: react.ForwardRefExoticComponent<AccountHeaderProps & react.RefAttributes<View>>;
|
|
170
|
-
|
|
171
48
|
interface IconProps {
|
|
172
49
|
size?: number;
|
|
173
50
|
color?: string;
|
|
@@ -323,6 +200,8 @@ declare function MenuLinesIcon({ size, color, strokeWidth }: IconProps): react.J
|
|
|
323
200
|
|
|
324
201
|
declare function MinusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
325
202
|
|
|
203
|
+
declare function MoreHorizontalIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
|
|
204
|
+
|
|
326
205
|
declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
327
206
|
|
|
328
207
|
declare function PhoneIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
@@ -371,6 +250,8 @@ interface StarFilledIconProps extends IconProps {
|
|
|
371
250
|
/** Native — supplied solid orange 28×26 star icon. */
|
|
372
251
|
declare function StarFilledIcon({ size, height, color, strokeWidth, }: StarFilledIconProps): react.JSX.Element;
|
|
373
252
|
|
|
253
|
+
declare function TableViewIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
254
|
+
|
|
374
255
|
interface UserIconProps {
|
|
375
256
|
size?: number;
|
|
376
257
|
color?: string;
|
|
@@ -444,6 +325,7 @@ declare const icons: {
|
|
|
444
325
|
readonly menu: typeof MenuIcon;
|
|
445
326
|
readonly menuLines: typeof MenuLinesIcon;
|
|
446
327
|
readonly minus: typeof MinusIcon;
|
|
328
|
+
readonly moreHorizontal: typeof MoreHorizontalIcon;
|
|
447
329
|
readonly navigate: typeof NavigateIcon;
|
|
448
330
|
readonly noSmoking: typeof NoSmokingIcon;
|
|
449
331
|
readonly paw: typeof PawIcon;
|
|
@@ -463,6 +345,7 @@ declare const icons: {
|
|
|
463
345
|
readonly sort: typeof SortIcon;
|
|
464
346
|
readonly star: typeof StarIcon;
|
|
465
347
|
readonly starFilled: typeof StarFilledIcon;
|
|
348
|
+
readonly tableView: typeof TableViewIcon;
|
|
466
349
|
readonly tooltipArrow: typeof TooltipArrowIcon;
|
|
467
350
|
readonly trash: typeof TrashIcon;
|
|
468
351
|
readonly user: typeof UserIcon;
|
|
@@ -475,8 +358,8 @@ declare const icons: {
|
|
|
475
358
|
type IconName = keyof typeof icons;
|
|
476
359
|
declare const iconNames: IconName[];
|
|
477
360
|
declare const iconGroups: {
|
|
478
|
-
readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "listView", "locationPin", "locationUser", "mapCollapse", "mapExpand", "mapView", "menu", "menuLines", "navigate"];
|
|
479
|
-
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"];
|
|
361
|
+
readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "listView", "locationPin", "locationUser", "mapCollapse", "mapExpand", "mapView", "menu", "menuLines", "navigate", "tableView"];
|
|
362
|
+
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"];
|
|
480
363
|
readonly objects: readonly ["bag", "bathrooms", "bedrooms", "building", "cardLocation", "clock", "clockFilled", "guests", "lock", "noSmoking", "paw", "qrCode", "quietHours", "trash", "user", "usersAlt", "video", "videoOff", "whatsApp"];
|
|
481
364
|
readonly communication: readonly ["mail", "phone"];
|
|
482
365
|
readonly social: readonly ["apple", "facebook", "googlePlay", "instagram", "linkedin"];
|
|
@@ -491,6 +374,153 @@ interface IconByNameProps extends IconProps {
|
|
|
491
374
|
}
|
|
492
375
|
declare function Icon({ name, ...props }: IconByNameProps): react.JSX.Element;
|
|
493
376
|
|
|
377
|
+
interface InfoCardV2Props extends Omit<ViewProps, "style" | "children"> {
|
|
378
|
+
label: string;
|
|
379
|
+
value: string;
|
|
380
|
+
icon: IconComponent;
|
|
381
|
+
iconProps?: Omit<IconProps, "size">;
|
|
382
|
+
iconSize?: number;
|
|
383
|
+
style?: StyleProp<ViewStyle>;
|
|
384
|
+
className?: string;
|
|
385
|
+
}
|
|
386
|
+
/** Dashboard metric card with a leading icon, muted label, and emphasized value. */
|
|
387
|
+
declare const InfoCardV2: react.ForwardRefExoticComponent<InfoCardV2Props & react.RefAttributes<View>>;
|
|
388
|
+
|
|
389
|
+
interface FavoritesButtonProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
390
|
+
/** Controlled favorite state. */
|
|
391
|
+
value?: boolean;
|
|
392
|
+
/** Initial state when the button is uncontrolled. */
|
|
393
|
+
defaultValue?: boolean;
|
|
394
|
+
/** Called with the next favorite state when pressed. */
|
|
395
|
+
onValueChange?: (value: boolean) => void;
|
|
396
|
+
disabled?: boolean;
|
|
397
|
+
style?: StyleProp<ViewStyle>;
|
|
398
|
+
className?: string;
|
|
399
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
400
|
+
}
|
|
401
|
+
declare const FavoritesButton: react.ForwardRefExoticComponent<FavoritesButtonProps & react.RefAttributes<react_native.View>>;
|
|
402
|
+
|
|
403
|
+
interface IconStatusBadgeProps extends Omit<ViewProps, "style" | "children"> {
|
|
404
|
+
label: string;
|
|
405
|
+
icon: IconComponent;
|
|
406
|
+
iconProps?: Omit<IconProps, "size">;
|
|
407
|
+
iconSize?: number;
|
|
408
|
+
style?: StyleProp<ViewStyle>;
|
|
409
|
+
className?: string;
|
|
410
|
+
}
|
|
411
|
+
declare const IconStatusBadge: react.ForwardRefExoticComponent<IconStatusBadgeProps & react.RefAttributes<View>>;
|
|
412
|
+
|
|
413
|
+
type BrandLogoVariant = "white" | "brand";
|
|
414
|
+
interface BrandLogoProps {
|
|
415
|
+
/** White for dark surfaces, or the Cortel brand color for light surfaces. */
|
|
416
|
+
variant?: BrandLogoVariant;
|
|
417
|
+
/** Rendered width. Defaults to 62; setting only width preserves the original ratio. */
|
|
418
|
+
width?: number;
|
|
419
|
+
/** Rendered height. Defaults to 86; setting only height preserves the original ratio. */
|
|
420
|
+
height?: number;
|
|
421
|
+
/** Accessible name announced for the logo. */
|
|
422
|
+
accessibilityLabel?: string;
|
|
423
|
+
}
|
|
424
|
+
declare const BRAND_LOGO_DEFAULT_WIDTH = 62;
|
|
425
|
+
declare const BRAND_LOGO_DEFAULT_HEIGHT = 86;
|
|
426
|
+
declare const BRAND_LOGO_COLORS: {
|
|
427
|
+
readonly white: "#FFFFFF";
|
|
428
|
+
readonly brand: "#B76533";
|
|
429
|
+
};
|
|
430
|
+
|
|
431
|
+
/** Native Cortel Booking brand mark. */
|
|
432
|
+
declare function BrandLogo({ variant, width, height, accessibilityLabel, }: BrandLogoProps): react.JSX.Element;
|
|
433
|
+
|
|
434
|
+
/** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
|
|
435
|
+
type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
|
|
436
|
+
/** Stable identity for React keys; falls back to `label`. */
|
|
437
|
+
key?: string;
|
|
438
|
+
onPress: () => void;
|
|
439
|
+
};
|
|
440
|
+
interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
441
|
+
/** Logged-in user's display name. */
|
|
442
|
+
name: string;
|
|
443
|
+
/** Shown under the name, e.g. the user's email. */
|
|
444
|
+
email?: string;
|
|
445
|
+
/** Photo URL; falls back to a placeholder icon when missing or when it fails to load. */
|
|
446
|
+
imageUrl?: string | null;
|
|
447
|
+
/** Called on every press, in addition to any menu toggling driven by `menuItems`. */
|
|
448
|
+
onPress?: (event: GestureResponderEvent) => void;
|
|
449
|
+
/** External — non-interactive. */
|
|
450
|
+
disabled?: boolean;
|
|
451
|
+
/** Trailing chevron, typically used to hint a dropdown/menu. */
|
|
452
|
+
showChevron?: boolean;
|
|
453
|
+
/**
|
|
454
|
+
* Account-menu options, supplied entirely by the consumer (icon, label,
|
|
455
|
+
* action, and per-item colors). When set, pressing the chip opens a
|
|
456
|
+
* dropdown listing them via `MenuItem`.
|
|
457
|
+
*/
|
|
458
|
+
menuItems?: AvatarMenuItem[];
|
|
459
|
+
/** Controlled open state for the menu. */
|
|
460
|
+
open?: boolean;
|
|
461
|
+
defaultOpen?: boolean;
|
|
462
|
+
onOpenChange?: (open: boolean) => void;
|
|
463
|
+
/** Fixed menu width; defaults to matching the chip's width. */
|
|
464
|
+
menuWidth?: number;
|
|
465
|
+
style?: StyleProp<ViewStyle>;
|
|
466
|
+
className?: string;
|
|
467
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
468
|
+
}
|
|
469
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
|
|
470
|
+
|
|
471
|
+
interface AvatarSimpleProps extends Omit<ViewProps, "style" | "children"> {
|
|
472
|
+
/** Logged-in user's display name. */
|
|
473
|
+
name: string;
|
|
474
|
+
/** Shown under the name, e.g. the user's email. */
|
|
475
|
+
email: string;
|
|
476
|
+
/** Photo URL; falls back to a solid placeholder when missing or when it fails to load. */
|
|
477
|
+
imageUrl?: string | null;
|
|
478
|
+
/** Called when the trailing logout control is pressed. */
|
|
479
|
+
onLogOut?: () => void;
|
|
480
|
+
/** Accessible label for the logout control. Defaults to `"Log out"`. */
|
|
481
|
+
logOutAccessibilityLabel?: string;
|
|
482
|
+
/**
|
|
483
|
+
* Compact mode — avatar image only (no card chrome, name, email, or logout).
|
|
484
|
+
* Used by collapsed account sidebars.
|
|
485
|
+
*/
|
|
486
|
+
compact?: boolean;
|
|
487
|
+
style?: StyleProp<ViewStyle>;
|
|
488
|
+
className?: string;
|
|
489
|
+
}
|
|
490
|
+
declare const AvatarSimple: react.ForwardRefExoticComponent<AvatarSimpleProps & react.RefAttributes<View>>;
|
|
491
|
+
|
|
492
|
+
interface AccountHeaderProps extends Omit<ViewProps, "style" | "children"> {
|
|
493
|
+
title: string;
|
|
494
|
+
/**
|
|
495
|
+
* When set, shows a 32×32 back control (takes priority over `onMenuPress`).
|
|
496
|
+
* Used on nested account pages such as booking details.
|
|
497
|
+
*/
|
|
498
|
+
onBackPress?: () => void;
|
|
499
|
+
/** When set, shows the 28×28 menu control (mobile account shell). Ignored if `onBackPress` is set. */
|
|
500
|
+
onMenuPress?: () => void;
|
|
501
|
+
onNotificationsPress?: () => void;
|
|
502
|
+
/** Optional control rendered to the left of notifications (e.g. language switcher). */
|
|
503
|
+
languageSlot?: ReactNode;
|
|
504
|
+
/** Optional status chip (or other accessory) rendered after the title with a 12px gap. */
|
|
505
|
+
badge?: ReactNode;
|
|
506
|
+
/** Accessible name for the back control. Defaults to `"Back"`. */
|
|
507
|
+
backAccessibilityLabel?: string;
|
|
508
|
+
/** Accessible name for the menu control. Defaults to `"Open menu"`. */
|
|
509
|
+
menuAccessibilityLabel?: string;
|
|
510
|
+
/** Accessible name for notifications. Defaults to `"Notifications"`. */
|
|
511
|
+
notificationsAccessibilityLabel?: string;
|
|
512
|
+
/**
|
|
513
|
+
* Web CSS class for the menu control (hide on desktop via `#account-header-menu` /
|
|
514
|
+
* `.account-header-menu` while keeping it mounted to avoid a mobile refresh flash).
|
|
515
|
+
*/
|
|
516
|
+
menuClassName?: string;
|
|
517
|
+
/** Optional title style override (e.g. mobile 14px from the web app). */
|
|
518
|
+
titleStyle?: StyleProp<TextStyle>;
|
|
519
|
+
style?: StyleProp<ViewStyle>;
|
|
520
|
+
className?: string;
|
|
521
|
+
}
|
|
522
|
+
declare const AccountHeader: react.ForwardRefExoticComponent<AccountHeaderProps & react.RefAttributes<View>>;
|
|
523
|
+
|
|
494
524
|
type BadgeVariant = "default" | "transparent";
|
|
495
525
|
interface BadgeProps extends Omit<ViewProps, "style" | "children"> {
|
|
496
526
|
label: string;
|
|
@@ -633,6 +663,8 @@ interface SegmentedToggleOption {
|
|
|
633
663
|
value: string;
|
|
634
664
|
label: string;
|
|
635
665
|
icon?: IconComponent;
|
|
666
|
+
/** Hides the visual label while retaining it as the accessible name. */
|
|
667
|
+
showLabel?: boolean;
|
|
636
668
|
}
|
|
637
669
|
interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
|
|
638
670
|
/**
|
|
@@ -700,6 +732,7 @@ interface LanguageOption {
|
|
|
700
732
|
/** Short label shown in the trigger and menu. */
|
|
701
733
|
label: string;
|
|
702
734
|
}
|
|
735
|
+
type LanguageSwitcherVariant = "default" | "icon";
|
|
703
736
|
interface LanguageSwitcherProps extends Omit<ViewProps, "style" | "children"> {
|
|
704
737
|
options?: readonly LanguageOption[];
|
|
705
738
|
value?: string;
|
|
@@ -709,6 +742,11 @@ interface LanguageSwitcherProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
709
742
|
defaultOpen?: boolean;
|
|
710
743
|
onOpenChange?: (open: boolean) => void;
|
|
711
744
|
disabled?: boolean;
|
|
745
|
+
/**
|
|
746
|
+
* `default` — globe + label + chevron (marketing header).
|
|
747
|
+
* `icon` — icon-only control matching account header action buttons.
|
|
748
|
+
*/
|
|
749
|
+
variant?: LanguageSwitcherVariant;
|
|
712
750
|
accessibilityLabel?: string;
|
|
713
751
|
style?: StyleProp<ViewStyle>;
|
|
714
752
|
className?: string;
|
|
@@ -954,6 +992,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
|
954
992
|
/** Override color for the selected value text in the trigger. */
|
|
955
993
|
valueColor?: string;
|
|
956
994
|
style?: StyleProp<ViewStyle>;
|
|
995
|
+
/** Styles applied to the dropdown menu only (not the trigger). */
|
|
996
|
+
menuStyle?: StyleProp<ViewStyle>;
|
|
957
997
|
className?: string;
|
|
958
998
|
};
|
|
959
999
|
type SelectSingleProps = SelectBaseProps & {
|
|
@@ -1197,13 +1237,13 @@ declare const segmentedToggleTypography: {
|
|
|
1197
1237
|
readonly lineHeight: 14;
|
|
1198
1238
|
readonly letterSpacing: 0;
|
|
1199
1239
|
};
|
|
1200
|
-
/** Language switcher trigger and option labels — SemiBold 14
|
|
1240
|
+
/** Language switcher trigger and option labels — SemiBold 14, tracking 3%. */
|
|
1201
1241
|
declare const languageSwitcherTypography: {
|
|
1202
1242
|
readonly fontFamily: "Noto Sans Armenian";
|
|
1203
1243
|
readonly fontSize: 14;
|
|
1204
1244
|
readonly fontWeight: "600";
|
|
1205
|
-
readonly lineHeight:
|
|
1206
|
-
readonly letterSpacing: 0;
|
|
1245
|
+
readonly lineHeight: 14;
|
|
1246
|
+
readonly letterSpacing: 0.42;
|
|
1207
1247
|
};
|
|
1208
1248
|
/** Counter value — Bold 14, line-height 100%, letter-spacing 0. */
|
|
1209
1249
|
declare const counterTypography: {
|
|
@@ -1442,4 +1482,4 @@ type ResolvePopoverAlignOptions = {
|
|
|
1442
1482
|
*/
|
|
1443
1483
|
declare function resolvePopoverAlign({ triggerRect, panelWidth, viewportWidth, padding, preferred, }: ResolvePopoverAlignOptions): PopoverAlign;
|
|
1444
1484
|
|
|
1445
|
-
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, 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 };
|
|
1485
|
+
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, 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, 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 };
|