@ecohouse/ui 0.1.31 → 0.1.33
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 +5 -0
- package/dist/index.cjs +1594 -523
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +218 -10
- package/dist/index.d.ts +218 -10
- package/dist/index.js +1516 -471
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AccountHeader/AccountHeader.stories.tsx +70 -0
- package/src/components/AccountHeader/AccountHeader.tsx +224 -0
- package/src/components/AccountHeader/index.ts +2 -0
- package/src/components/AvatarSimple/AvatarSimple.tsx +2 -2
- package/src/components/Button/Button.tsx +4 -1
- package/src/components/DatePicker/DatePicker.tsx +129 -54
- package/src/components/FloatingActionButton/FloatingActionButton.stories.tsx +42 -0
- package/src/components/FloatingActionButton/FloatingActionButton.tsx +77 -0
- package/src/components/FloatingActionButton/index.ts +2 -0
- package/src/components/InfoTile/InfoTile.stories.tsx +80 -0
- package/src/components/InfoTile/InfoTile.tsx +118 -0
- package/src/components/InfoTile/index.ts +2 -0
- package/src/components/PaginationDots/PaginationDots.stories.tsx +48 -0
- package/src/components/PaginationDots/PaginationDots.tsx +111 -0
- package/src/components/PaginationDots/index.ts +2 -0
- package/src/components/Select/Select.tsx +5 -2
- package/src/components/Sidebar/Sidebar.tsx +25 -11
- package/src/components/StatusBadge/StatusBadge.stories.tsx +54 -0
- package/src/components/StatusBadge/StatusBadge.tsx +108 -0
- package/src/components/StatusBadge/index.ts +2 -0
- package/src/components/StepList/StepList.stories.tsx +37 -0
- package/src/components/StepList/StepList.tsx +152 -0
- package/src/components/StepList/index.ts +2 -0
- package/src/components/StepPager/StepPager.tsx +150 -0
- package/src/components/StepPager/index.ts +2 -0
- package/src/components/index.ts +21 -0
- package/src/icons/AlertTriangle/AlertTriangleIcon.tsx +19 -0
- package/src/icons/AlertTriangle/AlertTriangleIcon.web.tsx +18 -0
- package/src/icons/AlertTriangle/alertTrianglePath.ts +3 -0
- package/src/icons/AlertTriangle/index.ts +1 -0
- package/src/icons/Ban/BanIcon.tsx +15 -0
- package/src/icons/Ban/banPath.ts +2 -0
- package/src/icons/Ban/index.ts +1 -0
- package/src/icons/Bell/BellIcon.tsx +2 -2
- package/src/icons/Bell/BellIcon.web.tsx +2 -2
- package/src/icons/Bell/bellPath.ts +1 -1
- package/src/icons/CottageDetail/CottageDetailIcons.tsx +15 -0
- package/src/icons/CottageDetail/CottageDetailIcons.web.tsx +15 -0
- package/src/icons/CottageDetail/cottageDetailPaths.ts +3 -0
- package/src/icons/CottageDetail/index.ts +1 -0
- package/src/icons/Edit/EditIcon.tsx +20 -0
- package/src/icons/Edit/EditIcon.web.tsx +19 -0
- package/src/icons/Edit/editPath.ts +3 -0
- package/src/icons/Edit/index.ts +1 -0
- package/src/icons/Fullscreen/FullscreenIcon.tsx +21 -0
- package/src/icons/Fullscreen/fullscreenPath.ts +2 -0
- package/src/icons/Fullscreen/index.ts +1 -0
- package/src/icons/Home/homePath.ts +1 -1
- package/src/icons/HouseRules/HouseRulesIcons.tsx +62 -0
- package/src/icons/HouseRules/HouseRulesIcons.web.tsx +61 -0
- package/src/icons/HouseRules/houseRulesPaths.ts +24 -0
- package/src/icons/HouseRules/index.ts +2 -0
- package/src/icons/LocationUser/LocationUserIcon.tsx +15 -0
- package/src/icons/LocationUser/LocationUserIcon.web.tsx +14 -0
- package/src/icons/LocationUser/index.ts +1 -0
- package/src/icons/LocationUser/locationUserPath.ts +2 -0
- package/src/icons/Lock/LockIcon.tsx +21 -0
- package/src/icons/Lock/LockIcon.web.tsx +26 -0
- package/src/icons/Lock/index.ts +1 -0
- package/src/icons/Lock/lockPath.ts +3 -0
- package/src/icons/Refresh/RefreshIcon.tsx +20 -0
- package/src/icons/Refresh/RefreshIcon.web.tsx +19 -0
- package/src/icons/Refresh/index.ts +1 -0
- package/src/icons/Refresh/refreshPath.ts +3 -0
- package/src/icons/RefundStatus/RefundStatusIcon.tsx +24 -0
- package/src/icons/RefundStatus/RefundStatusIcon.web.tsx +23 -0
- package/src/icons/RefundStatus/index.ts +1 -0
- package/src/icons/RefundStatus/refundStatusPath.ts +3 -0
- package/src/icons/Sort/SortIcon.tsx +3 -3
- package/src/icons/Sort/SortIcon.web.tsx +2 -2
- package/src/icons/Sort/sortPath.ts +3 -2
- package/src/icons/VideoOff/VideoOffIcon.tsx +21 -0
- package/src/icons/VideoOff/VideoOffIcon.web.tsx +27 -0
- package/src/icons/VideoOff/index.ts +1 -0
- package/src/icons/VideoOff/videoOffPath.ts +2 -0
- package/src/icons/ZoomOut/ZoomOutIcon.tsx +21 -0
- package/src/icons/ZoomOut/index.ts +1 -0
- package/src/icons/ZoomOut/zoomOutPath.ts +2 -0
- package/src/icons/index.ts +12 -0
- package/src/icons/registry.ts +42 -0
- package/src/index.ts +34 -0
- package/src/theme/colors.test.ts +1 -1
- package/src/theme/colors.ts +4 -0
- package/src/theme/typography.ts +5 -5
- package/src/utils/dateUtils.ts +25 -0
- package/src/utils/popoverAlign.ts +85 -0
package/dist/index.d.cts
CHANGED
|
@@ -138,6 +138,29 @@ interface AvatarSimpleProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
138
138
|
}
|
|
139
139
|
declare const AvatarSimple: react.ForwardRefExoticComponent<AvatarSimpleProps & react.RefAttributes<View>>;
|
|
140
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
|
+
style?: StyleProp<ViewStyle>;
|
|
160
|
+
className?: string;
|
|
161
|
+
}
|
|
162
|
+
declare const AccountHeader: react.ForwardRefExoticComponent<AccountHeaderProps & react.RefAttributes<View>>;
|
|
163
|
+
|
|
141
164
|
interface IconProps {
|
|
142
165
|
size?: number;
|
|
143
166
|
color?: string;
|
|
@@ -155,11 +178,16 @@ interface ArrowRightIconProps {
|
|
|
155
178
|
/** Native — react-native-svg (peer dependency). */
|
|
156
179
|
declare function ArrowRightIcon({ size, color, strokeWidth, }: ArrowRightIconProps): react.JSX.Element;
|
|
157
180
|
|
|
181
|
+
declare function AlertTriangleIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
182
|
+
|
|
158
183
|
declare function AppleIcon({ size, color }: IconProps): react.JSX.Element;
|
|
159
184
|
declare function GooglePlayIcon({ size }: IconProps): react.JSX.Element;
|
|
160
185
|
|
|
161
186
|
declare function BagIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
162
187
|
|
|
188
|
+
/** Filled prohibition / deactivated mark (28×28 viewBox). */
|
|
189
|
+
declare function BanIcon({ size, color }: IconProps): react.JSX.Element;
|
|
190
|
+
|
|
163
191
|
declare function BellIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
164
192
|
|
|
165
193
|
declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
@@ -197,6 +225,8 @@ declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.E
|
|
|
197
225
|
|
|
198
226
|
declare function CloseIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
199
227
|
|
|
228
|
+
declare function EditIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
229
|
+
|
|
200
230
|
declare function SaveHeartIcon({ size, color, strokeWidth, fillOpacity, }: IconProps): react.JSX.Element;
|
|
201
231
|
declare function RatingStarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
202
232
|
declare function CardLocationIcon({ size, color, strokeWidth, secondaryColor, }: IconProps): react.JSX.Element;
|
|
@@ -205,6 +235,7 @@ declare function BedroomsIcon({ size, color, fillOpacity }: IconProps): react.JS
|
|
|
205
235
|
declare function BathroomsIcon({ size, color, fillOpacity }: IconProps): react.JSX.Element;
|
|
206
236
|
|
|
207
237
|
declare function ShareIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
238
|
+
declare function DownloadIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
208
239
|
declare function AreaExpandIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
209
240
|
declare function ClockFilledIcon({ size, color }: IconProps): react.JSX.Element;
|
|
210
241
|
declare function QrCodeIcon({ size, color }: IconProps): react.JSX.Element;
|
|
@@ -213,11 +244,19 @@ declare function CopyIcon({ size, color, strokeWidth }: IconProps): react.JSX.El
|
|
|
213
244
|
declare function CheckSuccessIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
214
245
|
declare function TooltipArrowIcon({ size, color }: IconProps): react.JSX.Element;
|
|
215
246
|
|
|
247
|
+
declare function QuietHoursIcon({ size, color }: IconProps): react.JSX.Element;
|
|
248
|
+
declare function NoSmokingIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
249
|
+
declare function PawIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
250
|
+
declare function TrashIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
251
|
+
|
|
216
252
|
declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
|
|
217
253
|
|
|
218
254
|
/** Native — react-native-svg (peer dependency). */
|
|
219
255
|
declare function FiltersIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
220
256
|
|
|
257
|
+
/** Four-corner fullscreen / maximize control (24×24 viewBox). */
|
|
258
|
+
declare function FullscreenIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
259
|
+
|
|
221
260
|
/** Native — react-native-svg (peer dependency). */
|
|
222
261
|
declare function HeartIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
223
262
|
|
|
@@ -243,6 +282,12 @@ declare function ListViewIcon({ size, color, strokeWidth }: IconProps): react.JS
|
|
|
243
282
|
/** Native — react-native-svg (peer dependency). */
|
|
244
283
|
declare function LocationPinIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
245
284
|
|
|
285
|
+
/** Native — react-native-svg (peer dependency). */
|
|
286
|
+
declare function LocationUserIcon({ size, color }: IconProps): react.JSX.Element;
|
|
287
|
+
|
|
288
|
+
/** Native — react-native-svg (peer dependency). */
|
|
289
|
+
declare function LockIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
290
|
+
|
|
246
291
|
/** Native — react-native-svg (peer dependency). */
|
|
247
292
|
declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
248
293
|
|
|
@@ -267,6 +312,10 @@ declare function PhoneIcon({ size, color, strokeWidth }: IconProps): react.JSX.E
|
|
|
267
312
|
|
|
268
313
|
declare function PlusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
269
314
|
|
|
315
|
+
declare function RefreshIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
316
|
+
|
|
317
|
+
declare function RefundStatusIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
|
|
318
|
+
|
|
270
319
|
interface SearchIconProps {
|
|
271
320
|
size?: number;
|
|
272
321
|
color?: string;
|
|
@@ -289,7 +338,7 @@ declare function ShowIcon({ size, color, strokeWidth }: ShowIconProps): react.JS
|
|
|
289
338
|
/** Native — react-native-svg (peer dependency). */
|
|
290
339
|
declare function SidebarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
291
340
|
|
|
292
|
-
/**
|
|
341
|
+
/** Bidirectional sort (20×20 viewBox). */
|
|
293
342
|
declare function SortIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
294
343
|
|
|
295
344
|
interface StarIconProps extends IconProps {
|
|
@@ -318,11 +367,19 @@ declare function UsersAltIcon({ size, color }: IconProps): react.JSX.Element;
|
|
|
318
367
|
/** Native — react-native-svg (peer dependency). */
|
|
319
368
|
declare function VideoIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
320
369
|
|
|
370
|
+
/** Video / camera off (24×24 viewBox). */
|
|
371
|
+
declare function VideoOffIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
372
|
+
|
|
373
|
+
/** Exit-fullscreen / zoom-out corners control (24×24 viewBox). */
|
|
374
|
+
declare function ZoomOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
375
|
+
|
|
321
376
|
declare const icons: {
|
|
377
|
+
readonly alertTriangle: typeof AlertTriangleIcon;
|
|
322
378
|
readonly areaExpand: typeof AreaExpandIcon;
|
|
323
379
|
readonly apple: typeof AppleIcon;
|
|
324
380
|
readonly arrowRight: typeof ArrowRightIcon;
|
|
325
381
|
readonly bag: typeof BagIcon;
|
|
382
|
+
readonly ban: typeof BanIcon;
|
|
326
383
|
readonly bell: typeof BellIcon;
|
|
327
384
|
readonly building: typeof BuildingIcon;
|
|
328
385
|
readonly calendar: typeof CalendarIcon;
|
|
@@ -335,13 +392,16 @@ declare const icons: {
|
|
|
335
392
|
readonly chevronLeft: typeof ChevronLeftIcon;
|
|
336
393
|
readonly clock: typeof ClockIcon;
|
|
337
394
|
readonly close: typeof CloseIcon;
|
|
395
|
+
readonly edit: typeof EditIcon;
|
|
338
396
|
readonly clockFilled: typeof ClockFilledIcon;
|
|
339
397
|
readonly copy: typeof CopyIcon;
|
|
398
|
+
readonly download: typeof DownloadIcon;
|
|
340
399
|
readonly bathrooms: typeof BathroomsIcon;
|
|
341
400
|
readonly bedrooms: typeof BedroomsIcon;
|
|
342
401
|
readonly cardLocation: typeof CardLocationIcon;
|
|
343
402
|
readonly facebook: typeof FacebookIcon;
|
|
344
403
|
readonly filters: typeof FiltersIcon;
|
|
404
|
+
readonly fullscreen: typeof FullscreenIcon;
|
|
345
405
|
readonly guests: typeof GuestsIcon;
|
|
346
406
|
readonly heart: typeof HeartIcon;
|
|
347
407
|
readonly globe: typeof GlobeIcon;
|
|
@@ -354,6 +414,8 @@ declare const icons: {
|
|
|
354
414
|
readonly linkedin: typeof LinkedInIcon;
|
|
355
415
|
readonly listView: typeof ListViewIcon;
|
|
356
416
|
readonly locationPin: typeof LocationPinIcon;
|
|
417
|
+
readonly locationUser: typeof LocationUserIcon;
|
|
418
|
+
readonly lock: typeof LockIcon;
|
|
357
419
|
readonly logOut: typeof LogOutIcon;
|
|
358
420
|
readonly mail: typeof MailIcon;
|
|
359
421
|
readonly mapView: typeof MapViewIcon;
|
|
@@ -362,10 +424,15 @@ declare const icons: {
|
|
|
362
424
|
readonly menu: typeof MenuIcon;
|
|
363
425
|
readonly minus: typeof MinusIcon;
|
|
364
426
|
readonly navigate: typeof NavigateIcon;
|
|
427
|
+
readonly noSmoking: typeof NoSmokingIcon;
|
|
428
|
+
readonly paw: typeof PawIcon;
|
|
365
429
|
readonly phone: typeof PhoneIcon;
|
|
366
430
|
readonly qrCode: typeof QrCodeIcon;
|
|
431
|
+
readonly quietHours: typeof QuietHoursIcon;
|
|
367
432
|
readonly ratingStar: typeof RatingStarIcon;
|
|
368
433
|
readonly plus: typeof PlusIcon;
|
|
434
|
+
readonly refresh: typeof RefreshIcon;
|
|
435
|
+
readonly refundStatus: typeof RefundStatusIcon;
|
|
369
436
|
readonly search: typeof SearchIcon;
|
|
370
437
|
readonly saveHeart: typeof SaveHeartIcon;
|
|
371
438
|
readonly share: typeof ShareIcon;
|
|
@@ -376,17 +443,20 @@ declare const icons: {
|
|
|
376
443
|
readonly star: typeof StarIcon;
|
|
377
444
|
readonly starFilled: typeof StarFilledIcon;
|
|
378
445
|
readonly tooltipArrow: typeof TooltipArrowIcon;
|
|
446
|
+
readonly trash: typeof TrashIcon;
|
|
379
447
|
readonly user: typeof UserIcon;
|
|
380
448
|
readonly usersAlt: typeof UsersAltIcon;
|
|
381
449
|
readonly video: typeof VideoIcon;
|
|
450
|
+
readonly videoOff: typeof VideoOffIcon;
|
|
382
451
|
readonly whatsApp: typeof WhatsAppIcon;
|
|
452
|
+
readonly zoomOut: typeof ZoomOutIcon;
|
|
383
453
|
};
|
|
384
454
|
type IconName = keyof typeof icons;
|
|
385
455
|
declare const iconNames: IconName[];
|
|
386
456
|
declare const iconGroups: {
|
|
387
|
-
readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "listView", "locationPin", "mapCollapse", "mapExpand", "mapView", "menu", "navigate"];
|
|
388
|
-
readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "checkSuccess", "copy", "search", "calendar", "calendarOutline", "close", "ratingStar", "saveHeart", "share", "filters", "heart", "star", "starFilled", "minus", "plus", "sort"];
|
|
389
|
-
readonly objects: readonly ["bag", "bathrooms", "bedrooms", "building", "cardLocation", "clock", "clockFilled", "guests", "qrCode", "user", "usersAlt", "video", "whatsApp"];
|
|
457
|
+
readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "listView", "locationPin", "locationUser", "mapCollapse", "mapExpand", "mapView", "menu", "navigate"];
|
|
458
|
+
readonly actions: readonly ["show", "alertTriangle", "ban", "bell", "camera", "key", "check", "checkBadge", "checkSuccess", "copy", "download", "search", "calendar", "calendarOutline", "close", "edit", "ratingStar", "saveHeart", "share", "filters", "fullscreen", "heart", "zoomOut", "star", "starFilled", "minus", "plus", "refresh", "refundStatus", "sort"];
|
|
459
|
+
readonly objects: readonly ["bag", "bathrooms", "bedrooms", "building", "cardLocation", "clock", "clockFilled", "guests", "lock", "noSmoking", "paw", "qrCode", "quietHours", "trash", "user", "usersAlt", "video", "videoOff", "whatsApp"];
|
|
390
460
|
readonly communication: readonly ["mail", "phone"];
|
|
391
461
|
readonly social: readonly ["apple", "facebook", "googlePlay", "instagram", "linkedin"];
|
|
392
462
|
readonly interface: readonly ["areaExpand", "globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut", "tooltipArrow"];
|
|
@@ -410,6 +480,85 @@ interface BadgeProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
410
480
|
}
|
|
411
481
|
declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<View>>;
|
|
412
482
|
|
|
483
|
+
type StatusBadgeTone = "active" | "completed" | "cancelled";
|
|
484
|
+
interface StatusBadgeProps extends Omit<ViewProps, "style" | "children"> {
|
|
485
|
+
label: string;
|
|
486
|
+
tone?: StatusBadgeTone;
|
|
487
|
+
style?: StyleProp<ViewStyle>;
|
|
488
|
+
className?: string;
|
|
489
|
+
}
|
|
490
|
+
/**
|
|
491
|
+
* Compact status chip (e.g. booking active / completed / cancelled).
|
|
492
|
+
* Height 28, pill radius, Semibold 12 — distinct from amenity `Badge`.
|
|
493
|
+
*/
|
|
494
|
+
declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<View>>;
|
|
495
|
+
|
|
496
|
+
interface PaginationDotsProps extends Omit<ViewProps, "style" | "children"> {
|
|
497
|
+
/** Total number of steps / slides. */
|
|
498
|
+
count: number;
|
|
499
|
+
/** Zero-based active index. */
|
|
500
|
+
activeIndex: number;
|
|
501
|
+
/** Called when a dot is pressed. */
|
|
502
|
+
onDotPress?: (index: number) => void;
|
|
503
|
+
/** Accessible name for the control group. */
|
|
504
|
+
accessibilityLabel?: string;
|
|
505
|
+
style?: StyleProp<ViewStyle>;
|
|
506
|
+
className?: string;
|
|
507
|
+
}
|
|
508
|
+
/**
|
|
509
|
+
* Carousel / stepper pagination.
|
|
510
|
+
* Whole track is `48` wide; height `6`; gap `4`; inactive dots `6×6`;
|
|
511
|
+
* active pill takes the remaining width.
|
|
512
|
+
*/
|
|
513
|
+
declare const PaginationDots: react.ForwardRefExoticComponent<PaginationDotsProps & react.RefAttributes<View>>;
|
|
514
|
+
|
|
515
|
+
interface StepPagerProps extends Omit<ViewProps, "style" | "children"> {
|
|
516
|
+
/** Zero-based active step index. */
|
|
517
|
+
index: number;
|
|
518
|
+
/** Total number of steps. */
|
|
519
|
+
count: number;
|
|
520
|
+
onPrevious?: () => void;
|
|
521
|
+
onNext?: () => void;
|
|
522
|
+
previousAccessibilityLabel?: string;
|
|
523
|
+
nextAccessibilityLabel?: string;
|
|
524
|
+
style?: StyleProp<ViewStyle>;
|
|
525
|
+
className?: string;
|
|
526
|
+
}
|
|
527
|
+
/**
|
|
528
|
+
* Compact prev / current-of-total / next control (e.g. camera fullscreen pager).
|
|
529
|
+
* Fixed 121×48 pill, 12 gap/padding, 77 radius.
|
|
530
|
+
*/
|
|
531
|
+
declare const StepPager: react.ForwardRefExoticComponent<StepPagerProps & react.RefAttributes<View>>;
|
|
532
|
+
|
|
533
|
+
interface InfoTileProps extends Omit<ViewProps, "style" | "children"> {
|
|
534
|
+
title: string;
|
|
535
|
+
/** Optional supporting line under the title. */
|
|
536
|
+
description?: string;
|
|
537
|
+
icon: IconComponent;
|
|
538
|
+
iconProps?: Omit<IconProps, "size">;
|
|
539
|
+
iconSize?: number;
|
|
540
|
+
/** Icon slot fill. Defaults to `grey600`. */
|
|
541
|
+
iconSlotBackgroundColor?: string;
|
|
542
|
+
style?: StyleProp<ViewStyle>;
|
|
543
|
+
className?: string;
|
|
544
|
+
}
|
|
545
|
+
/**
|
|
546
|
+
* Compact info tile — icon slot + title (+ optional description).
|
|
547
|
+
* Padding 12, radius 16, icon container 36×36.
|
|
548
|
+
*/
|
|
549
|
+
declare const InfoTile: react.ForwardRefExoticComponent<InfoTileProps & react.RefAttributes<View>>;
|
|
550
|
+
|
|
551
|
+
interface StepListProps extends Omit<ViewProps, "style" | "children"> {
|
|
552
|
+
/** Step descriptions, numbered automatically from 1. */
|
|
553
|
+
steps: string[];
|
|
554
|
+
style?: StyleProp<ViewStyle>;
|
|
555
|
+
className?: string;
|
|
556
|
+
}
|
|
557
|
+
/**
|
|
558
|
+
* Vertical numbered process list — 42px badges, 2×19 connectors with 8px gaps.
|
|
559
|
+
*/
|
|
560
|
+
declare const StepList: react.ForwardRefExoticComponent<StepListProps & react.RefAttributes<View>>;
|
|
561
|
+
|
|
413
562
|
interface CounterProps extends Omit<ViewProps, "style" | "children"> {
|
|
414
563
|
value?: number;
|
|
415
564
|
defaultValue?: number;
|
|
@@ -478,6 +627,8 @@ interface SidebarProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
478
627
|
collapsed?: boolean;
|
|
479
628
|
defaultCollapsed?: boolean;
|
|
480
629
|
onCollapsedChange?: (collapsed: boolean) => void;
|
|
630
|
+
/** When false, hides the expand/collapse control. Defaults to `true`. */
|
|
631
|
+
showCollapseToggle?: boolean;
|
|
481
632
|
style?: StyleProp<ViewStyle>;
|
|
482
633
|
className?: string;
|
|
483
634
|
}
|
|
@@ -536,6 +687,8 @@ interface ButtonProps extends Omit<TouchableOpacityProps, "onPress" | "disabled"
|
|
|
536
687
|
size?: ButtonSize;
|
|
537
688
|
showIcon?: boolean;
|
|
538
689
|
icon?: ReactNode;
|
|
690
|
+
/** Overrides the trailing icon badge fill (defaults to the variant preset). */
|
|
691
|
+
iconBadgeBackgroundColor?: string;
|
|
539
692
|
style?: StyleProp<ViewStyle>;
|
|
540
693
|
textStyle?: StyleProp<TextStyle>;
|
|
541
694
|
className?: string;
|
|
@@ -600,6 +753,11 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
|
600
753
|
weekStartsOn?: 0 | 1;
|
|
601
754
|
/** Styles the calendar popup independently from the trigger width. */
|
|
602
755
|
calendarStyle?: StyleProp<ViewStyle>;
|
|
756
|
+
/**
|
|
757
|
+
* When true, only the calendar panel is rendered (no field/trigger).
|
|
758
|
+
* Use with controlled `open` for icon-button / popover hosts.
|
|
759
|
+
*/
|
|
760
|
+
hideTrigger?: boolean;
|
|
603
761
|
style?: StyleProp<ViewStyle>;
|
|
604
762
|
className?: string;
|
|
605
763
|
};
|
|
@@ -618,6 +776,17 @@ type DatePickerRangeProps = DatePickerBaseProps & {
|
|
|
618
776
|
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
619
777
|
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
|
|
620
778
|
|
|
779
|
+
interface FloatingActionButtonProps extends Omit<TouchableOpacityProps, "onPress" | "disabled" | "style" | "children"> {
|
|
780
|
+
onPress: (event: GestureResponderEvent) => void;
|
|
781
|
+
disabled?: boolean;
|
|
782
|
+
/** Defaults to a 24×24 white plus icon. */
|
|
783
|
+
icon?: ReactNode;
|
|
784
|
+
accessibilityLabel?: string;
|
|
785
|
+
style?: StyleProp<ViewStyle>;
|
|
786
|
+
className?: string;
|
|
787
|
+
}
|
|
788
|
+
declare const FloatingActionButton: react.ForwardRefExoticComponent<FloatingActionButtonProps & react.RefAttributes<react_native.View>>;
|
|
789
|
+
|
|
621
790
|
type StatefulIcon = ReactNode | IconComponent;
|
|
622
791
|
|
|
623
792
|
type InputSize = "lg" | "sm";
|
|
@@ -703,6 +872,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
|
703
872
|
loading?: boolean;
|
|
704
873
|
/** Text shown when no options match. */
|
|
705
874
|
emptyText?: string;
|
|
875
|
+
/** Override color for the selected value text in the trigger. */
|
|
876
|
+
valueColor?: string;
|
|
706
877
|
style?: StyleProp<ViewStyle>;
|
|
707
878
|
className?: string;
|
|
708
879
|
};
|
|
@@ -860,10 +1031,13 @@ declare const colors: {
|
|
|
860
1031
|
readonly red: "#A63E3E";
|
|
861
1032
|
readonly lightGrey: "#B7B7B7";
|
|
862
1033
|
readonly green: "#34A853";
|
|
1034
|
+
readonly greenMuted: "#34A85329";
|
|
863
1035
|
readonly primaryMuted: "#B464360F";
|
|
864
1036
|
readonly primaryHover: "#B4643633";
|
|
865
1037
|
readonly redMuted: "#A63E3E0F";
|
|
866
1038
|
readonly redHover: "#A63E3E33";
|
|
1039
|
+
readonly greyMuted: "#76767629";
|
|
1040
|
+
readonly cancelledMuted: "#A63E3E29";
|
|
867
1041
|
readonly grey0: "#767676";
|
|
868
1042
|
readonly grey50: "#6E6E6E";
|
|
869
1043
|
readonly grey100: "#666666";
|
|
@@ -873,6 +1047,7 @@ declare const colors: {
|
|
|
873
1047
|
readonly grey400: "#373737";
|
|
874
1048
|
readonly grey500: "#272727";
|
|
875
1049
|
readonly grey600: "#1F1F1F";
|
|
1050
|
+
readonly grey650: "#1B1B1B";
|
|
876
1051
|
readonly grey700: "#171717";
|
|
877
1052
|
readonly grey750: "#161616";
|
|
878
1053
|
readonly grey800: "#101010";
|
|
@@ -993,7 +1168,7 @@ declare const inputTypography: {
|
|
|
993
1168
|
readonly fontFamily: "Noto Sans Armenian";
|
|
994
1169
|
readonly fontSize: 12;
|
|
995
1170
|
readonly fontWeight: "400";
|
|
996
|
-
readonly lineHeight:
|
|
1171
|
+
readonly lineHeight: 16;
|
|
997
1172
|
readonly letterSpacing: 0.36;
|
|
998
1173
|
};
|
|
999
1174
|
readonly hint: {
|
|
@@ -1017,7 +1192,7 @@ declare const selectTypography: {
|
|
|
1017
1192
|
readonly fontFamily: "Noto Sans Armenian";
|
|
1018
1193
|
readonly fontSize: 12;
|
|
1019
1194
|
readonly fontWeight: "400";
|
|
1020
|
-
readonly lineHeight:
|
|
1195
|
+
readonly lineHeight: 16;
|
|
1021
1196
|
readonly letterSpacing: 0.36;
|
|
1022
1197
|
};
|
|
1023
1198
|
readonly hint: {
|
|
@@ -1041,7 +1216,7 @@ declare const avatarTypography: {
|
|
|
1041
1216
|
readonly fontFamily: "Noto Sans Armenian";
|
|
1042
1217
|
readonly fontSize: 12;
|
|
1043
1218
|
readonly fontWeight: "400";
|
|
1044
|
-
readonly lineHeight:
|
|
1219
|
+
readonly lineHeight: 14;
|
|
1045
1220
|
readonly letterSpacing: 0;
|
|
1046
1221
|
};
|
|
1047
1222
|
readonly menuItem: {
|
|
@@ -1064,7 +1239,7 @@ declare const datePickerTypography: {
|
|
|
1064
1239
|
readonly fontFamily: "Noto Sans Armenian";
|
|
1065
1240
|
readonly fontSize: 12;
|
|
1066
1241
|
readonly fontWeight: "400";
|
|
1067
|
-
readonly lineHeight:
|
|
1242
|
+
readonly lineHeight: 14;
|
|
1068
1243
|
readonly letterSpacing: 0.36;
|
|
1069
1244
|
};
|
|
1070
1245
|
readonly rangeLabel: {
|
|
@@ -1125,7 +1300,7 @@ declare const textareaTypography: {
|
|
|
1125
1300
|
readonly fontFamily: "Noto Sans Armenian";
|
|
1126
1301
|
readonly fontSize: 12;
|
|
1127
1302
|
readonly fontWeight: "400";
|
|
1128
|
-
readonly lineHeight:
|
|
1303
|
+
readonly lineHeight: 16;
|
|
1129
1304
|
readonly letterSpacing: 0.36;
|
|
1130
1305
|
};
|
|
1131
1306
|
readonly hint: {
|
|
@@ -1137,4 +1312,37 @@ declare const textareaTypography: {
|
|
|
1137
1312
|
};
|
|
1138
1313
|
};
|
|
1139
1314
|
|
|
1140
|
-
|
|
1315
|
+
/** Zero-padded "DD.MM.YYYY" — matches the Figma reference formatting. */
|
|
1316
|
+
declare function formatDate(date: Date): string;
|
|
1317
|
+
/**
|
|
1318
|
+
* Shortens a month name to `letterCount` letters.
|
|
1319
|
+
* Armenian digraph «ու» counts as one letter so «Հուլիս» → «Հուլ», not «Հու».
|
|
1320
|
+
*/
|
|
1321
|
+
declare function abbreviateMonthName(monthName: string, letterCount?: number): string;
|
|
1322
|
+
/** "15 Հուլ 2026" — day + abbreviated month + year for range triggers. */
|
|
1323
|
+
declare function formatDateDayShortMonth(date: Date, monthNames: string[], letterCount?: number): string;
|
|
1324
|
+
|
|
1325
|
+
type PopoverAlign = "center" | "start" | "end";
|
|
1326
|
+
type ResolvePopoverAlignOptions = {
|
|
1327
|
+
/** Trigger element bounds in viewport coordinates. */
|
|
1328
|
+
triggerRect: Pick<DOMRect, "left" | "right" | "width">;
|
|
1329
|
+
/** Popover panel width in px. */
|
|
1330
|
+
panelWidth: number;
|
|
1331
|
+
/** Viewport width in px. */
|
|
1332
|
+
viewportWidth: number;
|
|
1333
|
+
/** Minimum gap from the viewport edges. Defaults to 8. */
|
|
1334
|
+
padding?: number;
|
|
1335
|
+
/**
|
|
1336
|
+
* `auto` (default): prefer center, then end (opens left), then start (opens right).
|
|
1337
|
+
* Fixed values force that alignment.
|
|
1338
|
+
*/
|
|
1339
|
+
preferred?: PopoverAlign | "auto";
|
|
1340
|
+
};
|
|
1341
|
+
/**
|
|
1342
|
+
* Picks horizontal popover alignment so the panel stays in view.
|
|
1343
|
+
* Preference for `auto`: center → start (rightward) → end (leftward)
|
|
1344
|
+
* when the trigger sits near the left edge (common for card actions).
|
|
1345
|
+
*/
|
|
1346
|
+
declare function resolvePopoverAlign({ triggerRect, panelWidth, viewportWidth, padding, preferred, }: ResolvePopoverAlignOptions): PopoverAlign;
|
|
1347
|
+
|
|
1348
|
+
export { 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, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, type CommentCardProps, 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, HeartIcon, HelpCircleIcon, 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, MinusIcon, 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, 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 };
|