@ecohouse/ui 0.1.28 → 0.1.29
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 +14 -13
- package/dist/index.cjs +281 -79
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +26 -1
- package/dist/index.d.ts +26 -1
- package/dist/index.js +283 -82
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/VerificationCodeInput/VerificationCodeInput.stories.tsx +112 -0
- package/src/components/VerificationCodeInput/VerificationCodeInput.test.ts +42 -0
- package/src/components/VerificationCodeInput/VerificationCodeInput.tsx +255 -0
- package/src/components/VerificationCodeInput/VerificationCodeInput.utils.ts +34 -0
- package/src/components/VerificationCodeInput/index.ts +5 -0
- package/src/components/index.ts +6 -0
- package/src/index.ts +3 -0
package/dist/index.d.cts
CHANGED
|
@@ -585,6 +585,31 @@ interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
|
|
|
585
585
|
}
|
|
586
586
|
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
|
|
587
587
|
|
|
588
|
+
interface VerificationCodeInputHandle {
|
|
589
|
+
clear: () => void;
|
|
590
|
+
focus: (index?: number) => void;
|
|
591
|
+
}
|
|
592
|
+
interface VerificationCodeInputProps extends Omit<ViewProps, "children" | "style"> {
|
|
593
|
+
/** Number of numeric cells. */
|
|
594
|
+
length?: number;
|
|
595
|
+
value?: string;
|
|
596
|
+
defaultValue?: string;
|
|
597
|
+
onValueChange?: (value: string) => void;
|
|
598
|
+
/** Called whenever every cell contains a digit. */
|
|
599
|
+
onComplete?: (value: string) => void;
|
|
600
|
+
/** Called when Enter/submit is pressed from a cell. */
|
|
601
|
+
onSubmit?: (value: string) => void;
|
|
602
|
+
error?: boolean;
|
|
603
|
+
disabled?: boolean;
|
|
604
|
+
autoFocus?: boolean;
|
|
605
|
+
/** Localized accessible name for each zero-based cell index. */
|
|
606
|
+
getDigitAccessibilityLabel?: (index: number) => string;
|
|
607
|
+
style?: StyleProp<ViewStyle>;
|
|
608
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
609
|
+
className?: string;
|
|
610
|
+
}
|
|
611
|
+
declare const VerificationCodeInput: react.ForwardRefExoticComponent<VerificationCodeInputProps & react.RefAttributes<VerificationCodeInputHandle>>;
|
|
612
|
+
|
|
588
613
|
type SelectOption = {
|
|
589
614
|
label: string;
|
|
590
615
|
value: string;
|
|
@@ -1050,4 +1075,4 @@ declare const textareaTypography: {
|
|
|
1050
1075
|
};
|
|
1051
1076
|
};
|
|
1052
1077
|
|
|
1053
|
-
export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, 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, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
|
1078
|
+
export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, 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, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
package/dist/index.d.ts
CHANGED
|
@@ -585,6 +585,31 @@ interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
|
|
|
585
585
|
}
|
|
586
586
|
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
|
|
587
587
|
|
|
588
|
+
interface VerificationCodeInputHandle {
|
|
589
|
+
clear: () => void;
|
|
590
|
+
focus: (index?: number) => void;
|
|
591
|
+
}
|
|
592
|
+
interface VerificationCodeInputProps extends Omit<ViewProps, "children" | "style"> {
|
|
593
|
+
/** Number of numeric cells. */
|
|
594
|
+
length?: number;
|
|
595
|
+
value?: string;
|
|
596
|
+
defaultValue?: string;
|
|
597
|
+
onValueChange?: (value: string) => void;
|
|
598
|
+
/** Called whenever every cell contains a digit. */
|
|
599
|
+
onComplete?: (value: string) => void;
|
|
600
|
+
/** Called when Enter/submit is pressed from a cell. */
|
|
601
|
+
onSubmit?: (value: string) => void;
|
|
602
|
+
error?: boolean;
|
|
603
|
+
disabled?: boolean;
|
|
604
|
+
autoFocus?: boolean;
|
|
605
|
+
/** Localized accessible name for each zero-based cell index. */
|
|
606
|
+
getDigitAccessibilityLabel?: (index: number) => string;
|
|
607
|
+
style?: StyleProp<ViewStyle>;
|
|
608
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
609
|
+
className?: string;
|
|
610
|
+
}
|
|
611
|
+
declare const VerificationCodeInput: react.ForwardRefExoticComponent<VerificationCodeInputProps & react.RefAttributes<VerificationCodeInputHandle>>;
|
|
612
|
+
|
|
588
613
|
type SelectOption = {
|
|
589
614
|
label: string;
|
|
590
615
|
value: string;
|
|
@@ -1050,4 +1075,4 @@ declare const textareaTypography: {
|
|
|
1050
1075
|
};
|
|
1051
1076
|
};
|
|
1052
1077
|
|
|
1053
|
-
export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, 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, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
|
1078
|
+
export { Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, 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, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, TooltipArrowIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|