@ecohouse/ui 0.1.10 → 0.1.12

package/dist/index.d.cts

@@ -156,6 +156,11 @@ declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.
 
 declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+interface MenuIconProps extends IconProps {
+    open?: boolean;
+}
+declare function MenuIcon({ size, color, strokeWidth, open, }: MenuIconProps): react.JSX.Element;
+
 declare function MinusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
@@ -236,6 +241,7 @@ declare const icons: {
     readonly linkedin: typeof LinkedInIcon;
     readonly logOut: typeof LogOutIcon;
     readonly mail: typeof MailIcon;
+    readonly menu: typeof MenuIcon;
     readonly minus: typeof MinusIcon;
     readonly navigate: typeof NavigateIcon;
     readonly phone: typeof PhoneIcon;
@@ -253,7 +259,7 @@ declare const icons: {
 type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
-    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
+    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"];
     readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "star", "starFilled", "minus", "plus"];
     readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
     readonly communication: readonly ["mail", "phone"];
@@ -412,6 +418,8 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     formatValue?: (date: Date) => string;
     /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
     weekStartsOn?: 0 | 1;
+    /** Styles the calendar popup independently from the trigger width. */
+    calendarStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     className?: string;
 };
@@ -863,4 +871,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, 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 };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, 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, MenuIcon, type MenuIconProps, 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

@@ -156,6 +156,11 @@ declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.
 
 declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+interface MenuIconProps extends IconProps {
+    open?: boolean;
+}
+declare function MenuIcon({ size, color, strokeWidth, open, }: MenuIconProps): react.JSX.Element;
+
 declare function MinusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
@@ -236,6 +241,7 @@ declare const icons: {
     readonly linkedin: typeof LinkedInIcon;
     readonly logOut: typeof LogOutIcon;
     readonly mail: typeof MailIcon;
+    readonly menu: typeof MenuIcon;
     readonly minus: typeof MinusIcon;
     readonly navigate: typeof NavigateIcon;
     readonly phone: typeof PhoneIcon;
@@ -253,7 +259,7 @@ declare const icons: {
 type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
-    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
+    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"];
     readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "star", "starFilled", "minus", "plus"];
     readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
     readonly communication: readonly ["mail", "phone"];
@@ -412,6 +418,8 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     formatValue?: (date: Date) => string;
     /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
     weekStartsOn?: 0 | 1;
+    /** Styles the calendar popup independently from the trigger width. */
+    calendarStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     className?: string;
 };
@@ -863,4 +871,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, 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 };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, 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, MenuIcon, type MenuIconProps, 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.js

@@ -615,6 +615,28 @@ function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Menu/menuPath.ts
+var MENU_PATH = "M8 12.6667H17.3333M1 6.83332H17.3333M8 0.999985H17.3333";
+var MENU_CLOSE_PATH = "M15 1L1 15M1 1L15 15";
+function MenuIcon({
+  size = 19,
+  color = colors.white,
+  strokeWidth = 2,
+  open = false
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 19 19", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: open ? MENU_CLOSE_PATH : MENU_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      transform: open ? "translate(1.5 1.5)" : "translate(0 2.5)"
+    }
+  ) });
+}
+
 // src/icons/Minus/minusPath.ts
 var MINUS_PATH = "M3.33337 8H12.6667";
 function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
@@ -871,6 +893,7 @@ var icons = {
   linkedin: LinkedInIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  menu: MenuIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
@@ -887,7 +910,7 @@ var icons = {
 };
 var iconNames = Object.keys(icons);
 var iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"],
   actions: [
     "show",
     "bell",
@@ -1893,10 +1916,7 @@ var styles6 = StyleSheet.create({
     gap: 8,
     borderRadius: 12,
     backgroundColor: colors.whiteAlpha6,
-    ...Platform.select({
-      web: { boxShadow: `0 8px 24px ${colors.black}73` },
-      default: { elevation: 8 }
-    })
+    overflow: "hidden"
   },
   item: {
     height: CONTROL_HEIGHT,
@@ -2039,6 +2059,7 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
+      hasIcon ? styles8.contentWithIcon : styles8.contentWithoutIcon,
       disabled && styles8.disabled,
       style
     ];
@@ -2094,6 +2115,12 @@ var styles8 = StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  contentWithIcon: {
+    justifyContent: "space-between"
+  },
+  contentWithoutIcon: {
+    justifyContent: "center"
+  },
   label: {},
   labelAndroid: {
     includeFontPadding: false
@@ -2300,6 +2327,7 @@ var DatePicker = forwardRef(
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
       formatValue = formatDate,
       weekStartsOn = 1,
+      calendarStyle,
       style,
       className,
       accessibilityLabel,
@@ -2454,7 +2482,7 @@ var DatePicker = forwardRef(
               ]
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxs(View, { style: styles10.menu, children: [
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles10.menu, calendarStyle], children: [
             /* @__PURE__ */ jsxs(View, { style: styles10.calendarHeader, children: [
               /* @__PURE__ */ jsx(
                 Pressable,
@@ -2634,7 +2662,7 @@ var styles10 = StyleSheet.create({
     position: "absolute",
     top: "100%",
     left: 0,
-    right: 0,
+    width: DEFAULT_WIDTH,
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS2,
@@ -4144,6 +4172,6 @@ var styles16 = StyleSheet.create({
   }
 });
 
-export { ArrowRightIcon, Avatar, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, Counter, DatePicker, FacebookIcon, GlobeIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, 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 };
+export { ArrowRightIcon, Avatar, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, Counter, DatePicker, FacebookIcon, GlobeIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map