@ecohouse/ui 0.1.7 → 0.1.8
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 +13 -12
- package/dist/index.cjs +363 -120
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +45 -2
- package/dist/index.d.ts +45 -2
- package/dist/index.js +360 -121
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/LanguageSwitcher/LanguageSwitcher.stories.tsx +52 -0
- package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +287 -0
- package/src/components/LanguageSwitcher/index.ts +2 -0
- package/src/components/index.ts +3 -0
- package/src/icons/Globe/GlobeIcon.tsx +20 -0
- package/src/icons/Globe/GlobeIcon.web.tsx +26 -0
- package/src/icons/Globe/globePath.ts +3 -0
- package/src/icons/Globe/index.ts +2 -0
- package/src/icons/index.ts +1 -0
- package/src/icons/registry.ts +3 -1
- package/src/index.ts +6 -0
- package/src/theme/index.ts +1 -0
- package/src/theme/typography.ts +9 -0
package/dist/index.d.cts
CHANGED
|
@@ -114,6 +114,8 @@ declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
|
|
|
114
114
|
/** Native — react-native-svg (peer dependency). */
|
|
115
115
|
declare function HeartIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
116
116
|
|
|
117
|
+
declare function GlobeIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
118
|
+
|
|
117
119
|
/** Native — react-native-svg (peer dependency). */
|
|
118
120
|
declare function HelpCircleIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
|
|
119
121
|
|
|
@@ -204,6 +206,7 @@ declare const icons: {
|
|
|
204
206
|
readonly clock: typeof ClockIcon;
|
|
205
207
|
readonly facebook: typeof FacebookIcon;
|
|
206
208
|
readonly heart: typeof HeartIcon;
|
|
209
|
+
readonly globe: typeof GlobeIcon;
|
|
207
210
|
readonly helpCircle: typeof HelpCircleIcon;
|
|
208
211
|
readonly home: typeof HomeIcon;
|
|
209
212
|
readonly instagram: typeof InstagramIcon;
|
|
@@ -234,7 +237,7 @@ declare const iconGroups: {
|
|
|
234
237
|
readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
|
|
235
238
|
readonly communication: readonly ["mail", "phone"];
|
|
236
239
|
readonly social: readonly ["facebook", "instagram", "linkedin"];
|
|
237
|
-
readonly interface: readonly ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"];
|
|
240
|
+
readonly interface: readonly ["globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut"];
|
|
238
241
|
};
|
|
239
242
|
type IconGroup = keyof typeof iconGroups;
|
|
240
243
|
declare const iconGroupNames: IconGroup[];
|
|
@@ -287,6 +290,38 @@ interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
287
290
|
}
|
|
288
291
|
declare const SegmentedToggle: react.ForwardRefExoticComponent<SegmentedToggleProps & react.RefAttributes<View>>;
|
|
289
292
|
|
|
293
|
+
interface LanguageOption {
|
|
294
|
+
/** Stable locale identifier, such as `hy`, `en`, or `ru`. */
|
|
295
|
+
value: string;
|
|
296
|
+
/** Short label shown in the trigger and menu. */
|
|
297
|
+
label: string;
|
|
298
|
+
}
|
|
299
|
+
interface LanguageSwitcherProps extends Omit<ViewProps, "style" | "children"> {
|
|
300
|
+
options?: readonly LanguageOption[];
|
|
301
|
+
value?: string;
|
|
302
|
+
defaultValue?: string;
|
|
303
|
+
onValueChange?: (value: string) => void;
|
|
304
|
+
open?: boolean;
|
|
305
|
+
defaultOpen?: boolean;
|
|
306
|
+
onOpenChange?: (open: boolean) => void;
|
|
307
|
+
disabled?: boolean;
|
|
308
|
+
accessibilityLabel?: string;
|
|
309
|
+
style?: StyleProp<ViewStyle>;
|
|
310
|
+
className?: string;
|
|
311
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
312
|
+
}
|
|
313
|
+
declare const defaultLanguageOptions: readonly [{
|
|
314
|
+
readonly value: "hy";
|
|
315
|
+
readonly label: "Հայ";
|
|
316
|
+
}, {
|
|
317
|
+
readonly value: "en";
|
|
318
|
+
readonly label: "Eng";
|
|
319
|
+
}, {
|
|
320
|
+
readonly value: "ru";
|
|
321
|
+
readonly label: "Рус";
|
|
322
|
+
}];
|
|
323
|
+
declare const LanguageSwitcher: react.ForwardRefExoticComponent<LanguageSwitcherProps & react.RefAttributes<View>>;
|
|
324
|
+
|
|
290
325
|
interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
|
|
291
326
|
label: string;
|
|
292
327
|
icon: IconComponent;
|
|
@@ -615,6 +650,14 @@ declare const segmentedToggleTypography: {
|
|
|
615
650
|
readonly lineHeight: 14;
|
|
616
651
|
readonly letterSpacing: 0;
|
|
617
652
|
};
|
|
653
|
+
/** Language switcher trigger and option labels — SemiBold 14. */
|
|
654
|
+
declare const languageSwitcherTypography: {
|
|
655
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
656
|
+
readonly fontSize: 14;
|
|
657
|
+
readonly fontWeight: "600";
|
|
658
|
+
readonly lineHeight: 19;
|
|
659
|
+
readonly letterSpacing: 0;
|
|
660
|
+
};
|
|
618
661
|
/** Counter value — Bold 14, line-height 100%, letter-spacing 0. */
|
|
619
662
|
declare const counterTypography: {
|
|
620
663
|
readonly fontFamily: "Noto Sans Armenian";
|
|
@@ -798,4 +841,4 @@ declare const textareaTypography: {
|
|
|
798
841
|
};
|
|
799
842
|
};
|
|
800
843
|
|
|
801
|
-
export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
|
844
|
+
export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, 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
|
@@ -114,6 +114,8 @@ declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
|
|
|
114
114
|
/** Native — react-native-svg (peer dependency). */
|
|
115
115
|
declare function HeartIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
116
116
|
|
|
117
|
+
declare function GlobeIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
118
|
+
|
|
117
119
|
/** Native — react-native-svg (peer dependency). */
|
|
118
120
|
declare function HelpCircleIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
|
|
119
121
|
|
|
@@ -204,6 +206,7 @@ declare const icons: {
|
|
|
204
206
|
readonly clock: typeof ClockIcon;
|
|
205
207
|
readonly facebook: typeof FacebookIcon;
|
|
206
208
|
readonly heart: typeof HeartIcon;
|
|
209
|
+
readonly globe: typeof GlobeIcon;
|
|
207
210
|
readonly helpCircle: typeof HelpCircleIcon;
|
|
208
211
|
readonly home: typeof HomeIcon;
|
|
209
212
|
readonly instagram: typeof InstagramIcon;
|
|
@@ -234,7 +237,7 @@ declare const iconGroups: {
|
|
|
234
237
|
readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
|
|
235
238
|
readonly communication: readonly ["mail", "phone"];
|
|
236
239
|
readonly social: readonly ["facebook", "instagram", "linkedin"];
|
|
237
|
-
readonly interface: readonly ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"];
|
|
240
|
+
readonly interface: readonly ["globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut"];
|
|
238
241
|
};
|
|
239
242
|
type IconGroup = keyof typeof iconGroups;
|
|
240
243
|
declare const iconGroupNames: IconGroup[];
|
|
@@ -287,6 +290,38 @@ interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
|
|
|
287
290
|
}
|
|
288
291
|
declare const SegmentedToggle: react.ForwardRefExoticComponent<SegmentedToggleProps & react.RefAttributes<View>>;
|
|
289
292
|
|
|
293
|
+
interface LanguageOption {
|
|
294
|
+
/** Stable locale identifier, such as `hy`, `en`, or `ru`. */
|
|
295
|
+
value: string;
|
|
296
|
+
/** Short label shown in the trigger and menu. */
|
|
297
|
+
label: string;
|
|
298
|
+
}
|
|
299
|
+
interface LanguageSwitcherProps extends Omit<ViewProps, "style" | "children"> {
|
|
300
|
+
options?: readonly LanguageOption[];
|
|
301
|
+
value?: string;
|
|
302
|
+
defaultValue?: string;
|
|
303
|
+
onValueChange?: (value: string) => void;
|
|
304
|
+
open?: boolean;
|
|
305
|
+
defaultOpen?: boolean;
|
|
306
|
+
onOpenChange?: (open: boolean) => void;
|
|
307
|
+
disabled?: boolean;
|
|
308
|
+
accessibilityLabel?: string;
|
|
309
|
+
style?: StyleProp<ViewStyle>;
|
|
310
|
+
className?: string;
|
|
311
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
312
|
+
}
|
|
313
|
+
declare const defaultLanguageOptions: readonly [{
|
|
314
|
+
readonly value: "hy";
|
|
315
|
+
readonly label: "Հայ";
|
|
316
|
+
}, {
|
|
317
|
+
readonly value: "en";
|
|
318
|
+
readonly label: "Eng";
|
|
319
|
+
}, {
|
|
320
|
+
readonly value: "ru";
|
|
321
|
+
readonly label: "Рус";
|
|
322
|
+
}];
|
|
323
|
+
declare const LanguageSwitcher: react.ForwardRefExoticComponent<LanguageSwitcherProps & react.RefAttributes<View>>;
|
|
324
|
+
|
|
290
325
|
interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
|
|
291
326
|
label: string;
|
|
292
327
|
icon: IconComponent;
|
|
@@ -615,6 +650,14 @@ declare const segmentedToggleTypography: {
|
|
|
615
650
|
readonly lineHeight: 14;
|
|
616
651
|
readonly letterSpacing: 0;
|
|
617
652
|
};
|
|
653
|
+
/** Language switcher trigger and option labels — SemiBold 14. */
|
|
654
|
+
declare const languageSwitcherTypography: {
|
|
655
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
656
|
+
readonly fontSize: 14;
|
|
657
|
+
readonly fontWeight: "600";
|
|
658
|
+
readonly lineHeight: 19;
|
|
659
|
+
readonly letterSpacing: 0;
|
|
660
|
+
};
|
|
618
661
|
/** Counter value — Bold 14, line-height 100%, letter-spacing 0. */
|
|
619
662
|
declare const counterTypography: {
|
|
620
663
|
readonly fontFamily: "Noto Sans Armenian";
|
|
@@ -798,4 +841,4 @@ declare const textareaTypography: {
|
|
|
798
841
|
};
|
|
799
842
|
};
|
|
800
843
|
|
|
801
|
-
export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
|
844
|
+
export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|