@wereform/pkgm-shared 1.0.0

package/README.md

@@ -0,0 +1,30 @@
+# @begenone/pkgm-shared
+
+This is the **shared utility and components** package used across all BEGENONE modules.
+
+## Overview
+
+It holds **reusable code** that needs to be accessed from multiple packages — reducing duplication and ensuring consistent logic.
+
+## Contents
+
+- 🧩 UI components (buttons, cards, loaders)
+- 🔁 Utility functions (formatting, parsing, validators)
+- 🔐 Auth context & hooks
+- 🌐 API layer helpers
+
+## Features
+
+- Single source of truth for design components
+- Shared logic between channel, video, wire, and settings packages
+- Centralized error and logging utilities
+
+## Usage
+
+Imported by all other packages that require consistent behavior or style.
+
+## Tech Stack
+
+- React + React Native
+- TypeScript
+- React Context & Hooks

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["module:metro-react-native-babel-preset"],
+};

package/dist/components/buttons/CustomizableButton.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CustomizedButton=CustomizedButton;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _customizableButtonStyles=require("../../styles/customizableButtonStyles");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\buttons\\CustomizableButton.jsx";function CustomizedButton(_ref){var label=_ref.label,onPress=_ref.onPress,onPressStyle=_ref.onPressStyle,textColor=_ref.textColor,fontSize=_ref.fontSize,fontFamily=_ref.fontFamily,fontWeight=_ref.fontWeight,customIcon=_ref.customIcon,style=_ref.style,isDisabled=_ref.isDisabled;if(!label){console.warn("CustomizedButton: 'label' prop is missing.");}var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),pressed=_useState2[0],setPressed=_useState2[1];return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPress||function(){return console.warn("CustomizedButton: onPress not provided");},onPressIn:function onPressIn(){return setPressed(true);},onPressOut:function onPressOut(){return setPressed(false);},style:[_customizableButtonStyles.customizableButtonStyles.buttonContainer,style,pressed&&onPressStyle],activeOpacity:1,disabled:isDisabled,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:customIcon?{flexDirection:"row",width:"100%",justifyContent:"space-between",alignItems:"center",paddingRight:12}:{},children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_customizableButtonStyles.customizableButtonStyles.buttonText,{color:textColor||"#fff",fontSize:fontSize||16,fontFamily:fontFamily,fontWeight:fontWeight}],children:label||"Default Button"}),(0,_jsxRuntime.jsx)(_reactNative.View,{children:customIcon&&customIcon})]})});}

package/dist/components/dropdowns/DropDown.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.DropDown=DropDown;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _reactNativeModalSelector=_interopRequireDefault(require("react-native-modal-selector"));var _react=require("react");var _dropDownStyles=require("../../styles/dropDownStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\dropdowns\\DropDown.jsx";function DropDown(_ref){var selectText=_ref.selectText,data=_ref.data,styles=_ref.styles,iconStyles=_ref.iconStyles;var _useState=(0,_react.useState)(selectText),_useState2=(0,_slicedToArray2.default)(_useState,2),selected=_useState2[0],setSelected=_useState2[1];return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_dropDownStyles.dropDownStyles.container,styles],children:(0,_jsxRuntime.jsx)(_reactNativeModalSelector.default,{data:data,initValue:selectText||"Select Option",onChange:function onChange(option){console.log("Selected option:",option);setSelected(option);},overlayStyle:_dropDownStyles.dropDownStyles.overlayStyle,optionTextStyle:{color:"#fff",fontWeight:"500"},optionContainerStyle:_dropDownStyles.dropDownStyles.optionContainerStyle,cancelTextStyle:{color:"#000",fontFamily:"Inter",fontWeight:"800"},cancelStyle:_dropDownStyles.dropDownStyles.cancelContainerStyle,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_dropDownStyles.dropDownStyles.dropDownContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_dropDownStyles.dropDownStyles.dropDownText,children:typeof selected==="string"?selected:(selected==null?void 0:selected.label)||"Select Option"}),(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"caret-down",size:16,color:"white",style:iconStyles})]})})});}

package/dist/components/headers/HeaderGlobal.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.HeaderGlobal=HeaderGlobal;var _reactNative=require("react-native");var _headerGlobalStyles=require("../../styles/headerGlobalStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\headers\\HeaderGlobal.jsx";function HeaderGlobal(_ref){var aiIcon=_ref.aiIcon,notificationIcon=_ref.notificationIcon,searchIcon=_ref.searchIcon;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_headerGlobalStyles.headerGlobalStyles.container,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:"https://begenone-images.s3.us-east-1.amazonaws.com/begenone-white-transparent-logo-beta-min.png"},style:_headerGlobalStyles.headerGlobalStyles.image}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_headerGlobalStyles.headerGlobalStyles.iconsContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_headerGlobalStyles.headerGlobalStyles.icons,children:aiIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_headerGlobalStyles.headerGlobalStyles.icons,children:notificationIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_headerGlobalStyles.headerGlobalStyles.icons,children:searchIcon})]})]});}

package/dist/components/inputs/InputComment.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.InputComment=InputComment;var _reactNative=require("react-native");var _commentInputStyles=require("../../styles/commentInputStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\inputs\\InputComment.jsx";function InputComment(_ref){var placeholder=_ref.placeholder,submitIcon=_ref.submitIcon,props=_ref.props;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_commentInputStyles.commentInputStyles.container,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,Object.assign({placeholder:placeholder,placeholderTextColor:"#999",style:[_commentInputStyles.commentInputStyles.input]},props)),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{children:submitIcon})]});}

package/dist/components/inputs/InputField.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.InputField=InputField;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _inputStyles=require("../../styles/inputStyles");var _inter=require("@expo-google-fonts/inter");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\inputs\\InputField.jsx";var _excluded=["placeholder","error","iconLeft","iconRight","onIconPress","iconRightColor","inputStyle","inputWrapper","multiline","onChangeText","isEditable","secureTextEntry","Children"];function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function InputField(_ref){var placeholder=_ref.placeholder,error=_ref.error,iconLeft=_ref.iconLeft,iconRight=_ref.iconRight,onIconPress=_ref.onIconPress,iconRightColor=_ref.iconRightColor,inputStyle=_ref.inputStyle,inputWrapper=_ref.inputWrapper,multiline=_ref.multiline,onChangeText=_ref.onChangeText,isEditable=_ref.isEditable,secureTextEntry=_ref.secureTextEntry,Children=_ref.Children,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useFonts=(0,_inter.useFonts)({Inter_400Regular:_inter.Inter_400Regular,Inter_700Bold:_inter.Inter_700Bold}),_useFonts2=(0,_slicedToArray2.default)(_useFonts,1),fontsLoaded=_useFonts2[0];if(!fontsLoaded){return null;}var isMultiline=multiline||false;return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_inputStyles.inputStyles.inputWrapper,inputWrapper],children:[iconLeft&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:_inputStyles.inputStyles.icon,children:iconLeft}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,Object.assign({editable:isEditable,placeholder:placeholder,placeholderTextColor:"#999",multiline:isMultiline,style:[_inputStyles.inputStyles.input,inputStyle,isMultiline&&{textAlignVertical:"top"}],onChangeText:onChangeText,secureTextEntry:secureTextEntry},props)),iconRight&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_inputStyles.inputStyles.icon,onPress:onIconPress,disabled:!onIconPress,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:iconRight,size:18,color:iconRightColor||"#fff"})})]}),error&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:customErrorStyle,children:error})]});}

package/dist/components/menus/MenuChannelMeta.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.MenuChannelMeta=void 0;var _reactNative=require("react-native");var _MenuChannelMetaStyles=require("../../styles/MenuChannelMetaStyles");var _vectorIcons=require("@expo/vector-icons");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\menus\\MenuChannelMeta.jsx";var calcWidth;var calcHeight;var MenuChannelMeta=exports.MenuChannelMeta=function MenuChannelMeta(_ref){var timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,containerStyles=_ref.containerStyles,channelContainerStyles=_ref.channelContainerStyles;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.container,containerStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateViewsContainer,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar",size:16,color:"white"})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.dateText,children:timeAgo||"14 Hours Ago"})]})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.channelMetaContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.channelMetaContainer_ColumnOne,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_MenuChannelMetaStyles.MenuChannelMetaStyles.userImage}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.nameSubcountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.userName,inlineStyles.userName],children:userName||"Default Username"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.subCountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.subCount,children:subscribersCount||"0"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_MenuChannelMetaStyles.MenuChannelMetaStyles.subText,children:"Subscribers"})]})]})]}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.subscribeButtonContainer,{backgroundColor:"#303030"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_MenuChannelMetaStyles.MenuChannelMetaStyles.subscribeButtonText,{color:"#7f7f7f"}],children:"Subscribe"})})]})]});};var inlineStyles=_reactNative.StyleSheet.create({userName:{width:""}});

package/dist/components/menus/MenuInteraction.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.MenuInteraction=void 0;var _reactNative=require("react-native");var _MenuInteractionStyles=require("../../styles/MenuInteractionStyles");var _vectorIcons=require("@expo/vector-icons");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\menus\\MenuInteraction.jsx";var MenuInteraction=exports.MenuInteraction=function MenuInteraction(_ref){var containerStyles=_ref.containerStyles,columnMainIconStyles=_ref.columnMainIconStyles,pressed=_ref.pressed;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_MenuInteractionStyles.MenuInteractionStyles.container,containerStyles],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_MenuInteractionStyles.MenuInteractionStyles.column_mainIcons,columnMainIconStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"arrow-redo",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"chatbubble-ellipses",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"repeat-outline",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"thumbs-up-outline",size:24,color:"white"})})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:_MenuInteractionStyles.MenuInteractionStyles.icon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"thumbs-down-outline",size:24,color:"white"})})})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:function onPress(){return pressed(true);},children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"ellipsis-vertical-outline",size:24,color:"white"})})]});};

package/dist/components/menus/MenuNav.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.MenuNav=MenuNav;var _reactNative=require("react-native");var _menuNavStyles=require("../../styles/menuNavStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\menus\\MenuNav.jsx";function MenuNav(_ref){var homeIcon=_ref.homeIcon,wireIcon=_ref.wireIcon,uploadIcon=_ref.uploadIcon,channelIcon=_ref.channelIcon,profileIcon=_ref.profileIcon,onPressHome=_ref.onPressHome,onPressWire=_ref.onPressWire,onPressUpload=_ref.onPressUpload,onPressChannel=_ref.onPressChannel,onPressProfile=_ref.onPressProfile;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_menuNavStyles.menuNavStyles.container,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressHome,children:homeIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressWire,children:wireIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressUpload,children:uploadIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressChannel,children:channelIcon}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressProfile,children:profileIcon||(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"person-outline",size:24,color:"white"})})]});}

package/dist/components/titles/CustomizedTitle.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.CustomizedTitle=CustomizedTitle;var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\components\\titles\\CustomizedTitle.jsx";function CustomizedTitle(_ref){var title=_ref.title,fontSize=_ref.fontSize,fontFamily=_ref.fontFamily,textColor=_ref.textColor,style=_ref.style,textStyle=_ref.textStyle,dateTextStyles=_ref.dateTextStyles;var displayTitle=title&&title.length>75?title.slice(0,75)+"…":title||"Here is your default Title!";return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{width:"100%"},style],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{flexShrink:1,fontFamily:fontFamily,fontSize:fontSize,color:textColor,flexWrap:"wrap"},textStyle],numberOfLines:2,children:displayTitle})});}

package/dist/index.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"CustomizedButton",{enumerable:true,get:function get(){return _CustomizableButton.CustomizedButton;}});Object.defineProperty(exports,"CustomizedTitle",{enumerable:true,get:function get(){return _CustomizedTitle.CustomizedTitle;}});Object.defineProperty(exports,"DateViews",{enumerable:true,get:function get(){return _DateViews.DateViews;}});Object.defineProperty(exports,"DropDown",{enumerable:true,get:function get(){return _DropDown.DropDown;}});Object.defineProperty(exports,"HeaderGlobal",{enumerable:true,get:function get(){return _HeaderGlobal.HeaderGlobal;}});Object.defineProperty(exports,"InputComment",{enumerable:true,get:function get(){return _InputComment.InputComment;}});Object.defineProperty(exports,"InputField",{enumerable:true,get:function get(){return _InputField.InputField;}});Object.defineProperty(exports,"MenuChannelMeta",{enumerable:true,get:function get(){return _MenuChannelMeta.MenuChannelMeta;}});Object.defineProperty(exports,"MenuInteraction",{enumerable:true,get:function get(){return _MenuInteraction.MenuInteraction;}});Object.defineProperty(exports,"MenuNav",{enumerable:true,get:function get(){return _MenuNav.MenuNav;}});Object.defineProperty(exports,"normalizeUrl",{enumerable:true,get:function get(){return _normalizeUrl.default;}});var _InputField=require("./components/inputs/InputField");var _MenuNav=require("./components/menus/MenuNav");var _HeaderGlobal=require("./components/headers/HeaderGlobal");var _MenuInteraction=require("./components/menus/MenuInteraction");var _MenuChannelMeta=require("./components/menus/MenuChannelMeta");var _InputComment=require("./components/inputs/InputComment.jsx");var _DropDown=require("./components/dropdowns/DropDown.jsx");var _CustomizedTitle=require("./components/titles/CustomizedTitle.jsx");var _CustomizableButton=require("./components/buttons/CustomizableButton.jsx");var _DateViews=require("./utils/DateViews.jsx");var _normalizeUrl=_interopRequireDefault(require("./utils/normalizeUrl.js"));

package/dist/styles/MenuChannelMetaStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.checkDimensions=exports.MenuChannelMetaStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var checkDimensions=exports.checkDimensions=function checkDimensions(){};var MenuChannelMetaStyles=exports.MenuChannelMetaStyles=_reactNative.StyleSheet.create({container:{width:"auto",marginRight:12,marginLeft:12},dateViewsContainer:{width:"100%",flexDirection:"row",justifyContent:"space-between",marginTop:12,paddingRight:6,paddingLeft:6},dateContainer:{flexDirection:"row",rowGap:20},dateIcon:{marginRight:8},viewsContainer:{flexDirection:"row",alignItems:"center"},eyeIcon:{marginRight:8,marginLeft:8},dateText:{color:_globalStyles.globalStyles.colors.colorPrimary600},viewsText:{color:_globalStyles.globalStyles.colors.colorPrimary600},channelMetaContainer:{flexDirection:"row",backgroundColor:_globalStyles.globalStyles.colors.colorPrimary200,padding:12,marginBottom:6,marginTop:12,borderRadius:_globalStyles.globalStyles.borders.borderPrimary100,justifyContent:"space-between"},channelMetaContainer_ColumnOne:{flexDirection:"row"},userImage:{width:40,height:40,borderRadius:_globalStyles.globalStyles.borders.borderPrimary50},nameSubcountContainer:{flexDirection:"column",paddingLeft:12},userName:{color:"#fff",fontSize:_reactNative.Platform.OS==="ios"?16:14,paddingBottom:4,fontWeight:"bold"},subCountContainer:{flexDirection:"row"},subCount:{color:_globalStyles.globalStyles.colors.colorPrimary600,paddingRight:6,fontSize:12,fontWeight:"bold"},subText:{color:"#fff",fontSize:12},subscribeButtonContainer:{backgroundColor:_globalStyles.globalStyles.colors.colorPrimary600,width:_reactNative.Platform.OS==="ios"?100:80,borderRadius:_globalStyles.globalStyles.borders.borderPrimary400,alignItems:"center",justifyContent:"center"},subscribeButtonText:{color:"#fff",fontWeight:"bold",fontSize:_reactNative.Platform==="ios"?18:12}});

package/dist/styles/MenuInteractionStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.MenuInteractionStyles=void 0;var MenuInteractionStyles=exports.MenuInteractionStyles={container:{width:"100%",height:40,flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingRight:16},column_mainIcons:{flexDirection:"row",justifyContent:"space-evenly"},icon:{paddingLeft:18}};

package/dist/styles/commentInputStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.commentInputStyles=void 0;var _globalStyles=require("./globalStyles");var commentInputStyles=exports.commentInputStyles={container:{flexDirection:"row",width:"auto",backgroundColor:_globalStyles.globalStyles.colors.colorPrimary350,borderRadius:_globalStyles.globalStyles.borders.borderPrimary200,height:50,justifyContent:"space-between",alignItems:"center",justifySelf:"center",marginRight:12,marginLeft:12,paddingLeft:12,paddingRight:24},input:{paddingLeft:8,paddingRight:8,color:"#fff"}};

package/dist/styles/customizableButtonStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.customizableButtonStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var customizableButtonStyles=exports.customizableButtonStyles=_reactNative.StyleSheet.create({container:{},buttonContainer:{height:50,width:"auto",flexGrow:1,justifyContent:"center",alignItems:"center",borderRadius:_globalStyles.globalStyles.borders.borderPrimary100,backgroundColor:"#fff"},buttonText:{flexDirection:"row",color:"#000",fontSize:16,textAlign:"center",textAlignVertical:"center",alignItems:"center"}});

package/dist/styles/dropDownStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.dropDownStyles=void 0;var _globalStyles=require("./globalStyles");var dropDownStyles=exports.dropDownStyles={container:{width:"auto"},picker:{height:40,flex:1},overlayStyle:{backgroundColor:_globalStyles.globalStyles.colors.colorPrimary50},optionTextStyle:{color:"#fff"},optionContainerStyle:{backgroundColor:_globalStyles.globalStyles.colors.colorPrimary200,borderWidth:1,borderRadius:_globalStyles.globalStyles.borders.borderPrimary200,justifyContent:"space-between"},cancelContainerStyle:{backgroundColor:"#fff"},dropDownContainer:{flexDirection:"row",width:"100%",justifyContent:"space-between",borderRadius:_globalStyles.globalStyles.borders.borderPrimary200,height:50,alignItems:"center",paddingRight:12,paddingLeft:12,backgroundColor:_globalStyles.globalStyles.colors.colorPrimary200},dropDownText:{color:"#fff",paddingLeft:12}};

package/dist/styles/globalStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.globalStyles=void 0;var globalStyles=exports.globalStyles={colors:{colorPrimary50:"rgba(21, 21, 21, .7)",colorPrimary100:"#151515",colorPrimary200:"#252525",colorPrimary250:"rgba(37, 37, 37, .9)",colorPrimary300:"#3C3C3C",colorPrimary350:"rgba(60,60,60,.2)",colorPrimary400:"#7F7F7F",colorPrimary500:"#D3D3D3",colorPrimary600:"#ff6600ff",colorPrimary700:"#FF8800"},borders:{borderPrimary50:8,borderPrimary100:10,borderPrimary200:12,borderPrimary300:15,borderPrimary400:30}};

package/dist/styles/headerGlobalStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.headerGlobalStyles=void 0;var headerGlobalStyles=exports.headerGlobalStyles={container:{height:75,width:"100%",flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:-5},iconsContainer:{flexDirection:"row"},icons:{paddingRight:20},image:{width:120,height:120,resizeMode:"contain",marginLeft:24}};

package/dist/styles/inputStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.inputStyles=void 0;var inputStyles=exports.inputStyles={label:{fontSize:14,marginBottom:5,color:"#333"},inputWrapper:{flexDirection:"row",alignItems:"center",borderRadius:8,borderWidth:1,borderColor:"rgba(37, 37, 37, 0)",overflow:"hidden"},input:{width:"auto",paddingLeft:14,paddingRight:14,fontFamily:"Inter",fontWeight:"700",color:"#3c3c3c"},icon:{marginHorizontal:5},error:{color:"red",fontSize:12,marginTop:4}};

package/dist/styles/menuNavStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.menuNavStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var menuNavStyles=exports.menuNavStyles=_reactNative.StyleSheet.create({container:{flexDirection:"row",justifyContent:"space-evenly",backgroundColor:_globalStyles.globalStyles.colors.colorPrimary200,height:60,width:"80%",alignSelf:"center",alignItems:"center",borderRadius:_globalStyles.globalStyles.borders.borderPrimary300},uploadIcon:{color:_globalStyles.globalStyles.colors.colorPrimary600}});

package/dist/utils/DateViews.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.DateViews=DateViews;var _reactNative=require("react-native");var _globalStyles=require("../styles/globalStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-shared\\src\\utils\\DateViews.jsx";function DateViews(_ref){var timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,containerStyles=_ref.containerStyles,dateTextStyles=_ref.dateTextStyles,viewsTextStyles=_ref.viewsTextStyles,dateContainerStyles=_ref.dateContainerStyles;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.dateViewsContainer,containerStyles],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.dateContainer,dateContainerStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dateIcon],children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar-clear-outline",size:16,color:"white"})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.dateText,dateTextStyles],children:timeAgo||"14 Hours Ago"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewsContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.eyeIcon],children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"eye-outline",size:16,color:"white"})}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.viewsText,viewsTextStyles],children:[viewsText||"123.400",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"white"},children:" Views"})]})]})]});}var styles=_reactNative.StyleSheet.create({dateViewsContainer:{width:"100%",height:30,flexDirection:"row",justifyContent:"space-between",marginTop:12,paddingRight:8},dateContainer:{flexDirection:"row",rowGap:20,paddingRight:16},dateIcon:{marginRight:8},viewsContainer:{flexDirection:"row"},eyeIcon:{marginRight:8},dateText:{color:_globalStyles.globalStyles.colors.colorPrimary600},viewsText:{color:_globalStyles.globalStyles.colors.colorPrimary600}});

package/dist/utils/normalizeUrl.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var normalizeUrl=function normalizeUrl(url){if(!url)return null;if(/^https?:\/\//i.test(url))return url;if(/^[\w.-]+\.[a-z]{2,}$/i.test(url))return`https://${url}`;return null;};var _default=exports.default=normalizeUrl;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@wereform/pkgm-shared",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@react-native-picker/picker": "^2.11.4",
+    "react": "19.1.0",
+    "react-native": "^0.81.4"
+  },
+  "dependencies": {
+    "@expo-google-fonts/inter": "^0.4.2",
+    "@expo/vector-icons": "^15.0.3",
+    "expo-font": "^14.0.9",
+    "react-native-dropdown-select-list": "^2.0.5",
+    "react-native-modal-selector": "^2.1.2",
+    "react-native-picker-select": "^9.3.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "metro-react-native-babel-preset": "^0.77.0"
+  }
+}

package/packageJSON.md

@@ -0,0 +1,28 @@
+{
+"name": "@begenone/pkgm-shared",
+"version": "1.0.0",
+"private": true,
+"main": "dist/index.js",
+"scripts": {
+"build": "babel src --out-dir dist --extensions .js,.jsx"
+},
+"peerDependencies": {
+"@react-native-picker/picker": "^2.11.4",
+"react": "19.1.0",
+"react-native": "^0.81.4"
+},
+"dependencies": {
+"@expo-google-fonts/inter": "^0.4.2",
+"@expo/vector-icons": "^15.0.3",
+"expo-font": "^14.0.9",
+"react-native-dropdown-select-list": "^2.0.5",
+"react-native-modal-selector": "^2.1.2",
+"react-native-picker-select": "^9.3.1"
+},
+"devDependencies": {
+"@babel/cli": "^7.28.3",
+"@babel/core": "^7.28.5",
+"@babel/preset-env": "^7.28.5",
+"metro-react-native-babel-preset": "^0.77.0"
+}
+}

package/src/components/buttons/CustomizableButton.jsx

@@ -0,0 +1,69 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { customizableButtonStyles } from "../../styles/customizableButtonStyles";
+import { useState } from "react";
+
+export function CustomizedButton({
+  label,
+  onPress,
+  onPressStyle,
+  textColor,
+  fontSize,
+  fontFamily,
+  fontWeight,
+  customIcon,
+  style,
+  isDisabled,
+}) {
+  if (!label) {
+    console.warn("CustomizedButton: 'label' prop is missing.");
+  }
+
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <TouchableOpacity
+      onPress={
+        onPress ||
+        (() => console.warn("CustomizedButton: onPress not provided"))
+      }
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[
+        customizableButtonStyles.buttonContainer,
+        style,
+        pressed && onPressStyle,
+      ]}
+      activeOpacity={1}
+      disabled={isDisabled}
+    >
+      <View
+        style={
+          customIcon
+            ? {
+                flexDirection: "row",
+                width: "100%",
+                justifyContent: "space-between",
+                alignItems: "center",
+                paddingRight: 12,
+              }
+            : {}
+        }
+      >
+        <Text
+          style={[
+            customizableButtonStyles.buttonText,
+            {
+              color: textColor || "#fff",
+              fontSize: fontSize || 16,
+              fontFamily: fontFamily,
+              fontWeight: fontWeight,
+            },
+          ]}
+        >
+          {label || "Default Button"}
+        </Text>
+        <View>{customIcon && customIcon}</View>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/src/components/dropdowns/DropDown.jsx

@@ -0,0 +1,44 @@
+import { Text, View } from "react-native";
+import ModalSelector from "react-native-modal-selector";
+import { useState } from "react";
+import { dropDownStyles } from "../../styles/dropDownStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function DropDown({ selectText, data, styles, iconStyles }) {
+  const [selected, setSelected] = useState(selectText);
+  return (
+    <View style={[dropDownStyles.container, styles]}>
+      <ModalSelector
+        data={data}
+        initValue={selectText || "Select Option"}
+        onChange={option => {
+          console.log("Selected option:", option); // <-- key + label!
+          setSelected(option);
+        }}
+        overlayStyle={dropDownStyles.overlayStyle}
+        optionTextStyle={{ color: "#fff", fontWeight: "500" }}
+        optionContainerStyle={dropDownStyles.optionContainerStyle}
+        cancelTextStyle={{
+          color: "#000",
+          fontFamily: "Inter",
+          fontWeight: "800",
+        }}
+        cancelStyle={dropDownStyles.cancelContainerStyle}
+      >
+        <View style={dropDownStyles.dropDownContainer}>
+          <Text style={dropDownStyles.dropDownText}>
+            {typeof selected === "string"
+              ? selected // shows default selectText
+              : selected?.label || "Select Option"}
+          </Text>
+          <Ionicons
+            name="caret-down"
+            size={16}
+            color={"white"}
+            style={iconStyles}
+          />
+        </View>
+      </ModalSelector>
+    </View>
+  );
+}

package/src/components/headers/HeaderGlobal.jsx

@@ -0,0 +1,26 @@
+import { Image, TouchableOpacity, View } from "react-native";
+import { headerGlobalStyles } from "../../styles/headerGlobalStyles";
+
+export function HeaderGlobal({ aiIcon, notificationIcon, searchIcon }) {
+  return (
+    <View style={headerGlobalStyles.container}>
+      <Image
+        source={{
+          uri: "https://begenone-images.s3.us-east-1.amazonaws.com/begenone-white-transparent-logo-beta-min.png",
+        }}
+        style={headerGlobalStyles.image}
+      />
+      <View style={headerGlobalStyles.iconsContainer}>
+        <TouchableOpacity style={headerGlobalStyles.icons}>
+          {aiIcon}
+        </TouchableOpacity>
+        <TouchableOpacity style={headerGlobalStyles.icons}>
+          {notificationIcon}
+        </TouchableOpacity>
+        <TouchableOpacity style={headerGlobalStyles.icons}>
+          {searchIcon}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

package/src/components/inputs/InputComment.jsx

@@ -0,0 +1,16 @@
+import { Pressable, TextInput, View } from "react-native";
+import { commentInputStyles } from "../../styles/commentInputStyles";
+
+export function InputComment({ placeholder, submitIcon, props }) {
+  return (
+    <View style={commentInputStyles.container}>
+      <TextInput
+        placeholder={placeholder}
+        placeholderTextColor="#999"
+        style={[commentInputStyles.input]}
+        {...props}
+      />
+      <Pressable>{submitIcon}</Pressable>
+    </View>
+  );
+}

package/src/components/inputs/InputField.jsx

@@ -0,0 +1,85 @@
+// packages/begenone-pkgm-shared/src/components/inputs/InputField.jsx
+import React, { useState } from "react";
+import {
+  View,
+  TextInput,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import { inputStyles } from "../../styles/inputStyles";
+import {
+  useFonts,
+  Inter_400Regular,
+  Inter_700Bold,
+} from "@expo-google-fonts/inter";
+import { Ionicons } from "@expo/vector-icons";
+
+export function InputField({
+  placeholder,
+  error,
+  iconLeft,
+  iconRight,
+  onIconPress,
+  iconRightColor,
+  inputStyle,
+  inputWrapper,
+  multiline,
+  onChangeText,
+  isEditable,
+  secureTextEntry,
+  Children,
+  // onPressFunction,
+  ...props
+}) {
+  const [fontsLoaded] = useFonts({
+    Inter_400Regular,
+    Inter_700Bold,
+  });
+
+  if (!fontsLoaded) {
+    return null; // or <AppLoading />
+  }
+
+  // console.log(`Multi Line CHECK`, multiline);
+
+  const isMultiline = multiline || false;
+
+  return (
+    <View>
+      <View style={[inputStyles.inputWrapper, inputWrapper]}>
+        {iconLeft && <View style={inputStyles.icon}>{iconLeft}</View>}
+        <TextInput
+          editable={isEditable}
+          placeholder={placeholder}
+          placeholderTextColor="#999"
+          multiline={isMultiline}
+          style={[
+            inputStyles.input,
+            inputStyle,
+            isMultiline && { textAlignVertical: "top" },
+          ]}
+          onChangeText={onChangeText}
+          secureTextEntry={secureTextEntry}
+          {...props}
+        />
+        {iconRight && (
+          <TouchableOpacity
+            style={inputStyles.icon}
+            onPress={onIconPress}
+            disabled={!onIconPress}
+          >
+            <Ionicons
+              name={iconRight}
+              size={18}
+              color={iconRightColor || "#fff"}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+      {error && <Text style={customErrorStyle}>{error}</Text>}
+    </View>
+  );
+}
+// ~2.28.0
+// ~4.16.0

package/src/components/menus/MenuChannelMeta.jsx

@@ -0,0 +1,94 @@
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { MenuChannelMetaStyles } from "../../styles/MenuChannelMetaStyles";
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect } from "react";
+
+let calcWidth;
+let calcHeight;
+
+export const MenuChannelMeta = ({
+  timeAgo,
+  viewsText,
+  channelLogo,
+  userName,
+  subscribersCount,
+  containerStyles,
+  channelContainerStyles,
+}) => {
+  return (
+    <View style={[MenuChannelMetaStyles.container, containerStyles]}>
+      <View style={MenuChannelMetaStyles.dateViewsContainer}>
+        <View style={MenuChannelMetaStyles.dateContainer}>
+          <View style={MenuChannelMetaStyles.dateIcon}>
+            <Ionicons name="calendar" size={16} color="white" />
+          </View>
+          <Text style={MenuChannelMetaStyles.dateText}>
+            {timeAgo || "14 Hours Ago"}
+          </Text>
+        </View>
+        {/* <View style={MenuChannelMetaStyles.viewsContainer}>
+          <Text style={MenuChannelMetaStyles.viewsText}>
+            {viewsText || "0"}
+          </Text>
+          <View style={MenuChannelMetaStyles.eyeIcon}>
+            <Ionicons name="eye" size={16} color="white" />
+          </View>
+        </View> */}
+      </View>
+      <View style={MenuChannelMetaStyles.channelMetaContainer}>
+        <View style={MenuChannelMetaStyles.channelMetaContainer_ColumnOne}>
+          <Image
+            source={{
+              uri:
+                channelLogo ||
+                "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+            }}
+            style={MenuChannelMetaStyles.userImage}
+          />
+          <View style={MenuChannelMetaStyles.nameSubcountContainer}>
+            <Text
+              style={[MenuChannelMetaStyles.userName, inlineStyles.userName]}
+            >
+              {userName || "Default Username"}
+            </Text>
+            <View style={MenuChannelMetaStyles.subCountContainer}>
+              <Text style={MenuChannelMetaStyles.subCount}>
+                {subscribersCount || "0"}
+              </Text>
+              <Text style={MenuChannelMetaStyles.subText}>Subscribers</Text>
+            </View>
+          </View>
+        </View>
+        <Pressable
+          style={[
+            MenuChannelMetaStyles.subscribeButtonContainer,
+            { backgroundColor: "#303030" },
+          ]}
+        >
+          <Text
+            style={[
+              MenuChannelMetaStyles.subscribeButtonText,
+              { color: "#7f7f7f" },
+            ]}
+          >
+            Subscribe
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const inlineStyles = StyleSheet.create({
+  userName: {
+    width: "",
+  },
+});

package/src/components/menus/MenuInteraction.jsx

@@ -0,0 +1,52 @@
+import { TouchableOpacity, View } from "react-native";
+import { MenuInteractionStyles } from "../../styles/MenuInteractionStyles";
+import { Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+
+export const MenuInteraction = ({
+  containerStyles,
+  columnMainIconStyles,
+  pressed,
+}) => {
+  return (
+    <View style={[MenuInteractionStyles.container, containerStyles]}>
+      <View
+        style={[MenuInteractionStyles.column_mainIcons, columnMainIconStyles]}
+      >
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="arrow-redo" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="chatbubble-ellipses" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="repeat-outline" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="thumbs-up-outline" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="thumbs-down-outline" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+      </View>
+
+      <TouchableOpacity onPress={() => pressed(true)}>
+        <Ionicons name="ellipsis-vertical-outline" size={24} color="white" />
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/components/menus/MenuNav.jsx

@@ -0,0 +1,33 @@
+import { TouchableOpacity, View } from "react-native";
+import { menuNavStyles } from "../../styles/menuNavStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function MenuNav({
+  homeIcon,
+  wireIcon,
+  uploadIcon,
+  channelIcon,
+  profileIcon,
+
+  onPressHome,
+  onPressWire,
+  onPressUpload,
+  onPressChannel,
+  onPressProfile,
+}) {
+  return (
+    <View style={menuNavStyles.container}>
+      <TouchableOpacity onPress={onPressHome}>{homeIcon}</TouchableOpacity>
+      <TouchableOpacity onPress={onPressWire}>{wireIcon}</TouchableOpacity>
+      <TouchableOpacity onPress={onPressUpload}>{uploadIcon}</TouchableOpacity>
+      <TouchableOpacity onPress={onPressChannel}>
+        {channelIcon}
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPressProfile}>
+        {profileIcon || (
+          <Ionicons name="person-outline" size={24} color="white" />
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/components/titles/CustomizedTitle.jsx

@@ -0,0 +1,36 @@
+import { Text, View } from "react-native";
+
+export function CustomizedTitle({
+  title,
+  fontSize,
+  fontFamily,
+  textColor,
+  style,
+  textStyle,
+  dateTextStyles,
+}) {
+  const displayTitle =
+    title && title.length > 75
+      ? title.slice(0, 75) + "…" // adds an ellipsis when truncated
+      : title || "Here is your default Title!";
+
+  return (
+    <View style={[{ width: "100%" }, style]}>
+      <Text
+        style={[
+          {
+            flexShrink: 1,
+            fontFamily: fontFamily,
+            fontSize: fontSize,
+            color: textColor,
+            flexWrap: "wrap",
+          },
+          textStyle,
+        ]}
+        numberOfLines={2}
+      >
+        {displayTitle}
+      </Text>
+    </View>
+  );
+}

package/src/index.js

@@ -0,0 +1,11 @@
+export { InputField } from "./components/inputs/InputField";
+export { MenuNav } from "./components/menus/MenuNav";
+export { HeaderGlobal } from "./components/headers/HeaderGlobal";
+export { MenuInteraction } from "./components/menus/MenuInteraction";
+export { MenuChannelMeta } from "./components/menus/MenuChannelMeta";
+export { InputComment } from "./components/inputs/InputComment.jsx";
+export { DropDown } from "./components/dropdowns/DropDown.jsx";
+export { CustomizedTitle } from "./components/titles/CustomizedTitle.jsx";
+export { CustomizedButton } from "./components/buttons/CustomizableButton.jsx";
+export { DateViews } from "./utils/DateViews.jsx";
+export { default as normalizeUrl } from "./utils/normalizeUrl.js";

package/src/styles/MenuChannelMetaStyles.js

@@ -0,0 +1,114 @@
+import { Platform, StyleSheet, useWindowDimensions } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const checkDimensions = () => {};
+
+// checkDimensions();
+
+export const MenuChannelMetaStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    marginRight: 12,
+    marginLeft: 12,
+  },
+
+  dateViewsContainer: {
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 12,
+    paddingRight: 6,
+    paddingLeft: 6,
+  },
+
+  dateContainer: {
+    flexDirection: "row",
+    rowGap: 20,
+  },
+
+  dateIcon: {
+    marginRight: 8,
+  },
+
+  viewsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+
+  eyeIcon: {
+    marginRight: 8,
+    marginLeft: 8,
+  },
+
+  dateText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  viewsText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  channelMetaContainer: {
+    flexDirection: "row",
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    // width: "100%",
+    // margin: 12,
+    padding: 12,
+    marginBottom: 6,
+    marginTop: 12,
+    borderRadius: globalStyles.borders.borderPrimary100,
+    justifyContent: "space-between",
+  },
+
+  channelMetaContainer_ColumnOne: {
+    flexDirection: "row",
+  },
+
+  userImage: {
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  nameSubcountContainer: {
+    flexDirection: "column",
+    paddingLeft: 12,
+  },
+
+  userName: {
+    color: "#fff",
+    fontSize: Platform.OS === "ios" ? 16 : 14,
+    paddingBottom: 4,
+    fontWeight: "bold",
+  },
+
+  subCountContainer: {
+    flexDirection: "row",
+  },
+
+  subCount: {
+    color: globalStyles.colors.colorPrimary600,
+    paddingRight: 6,
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+
+  subText: {
+    color: "#fff",
+    fontSize: 12,
+  },
+
+  subscribeButtonContainer: {
+    backgroundColor: globalStyles.colors.colorPrimary600,
+    width: Platform.OS === "ios" ? 100 : 80,
+    borderRadius: globalStyles.borders.borderPrimary400,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  subscribeButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+    fontSize: Platform === "ios" ? 18 : 12,
+  },
+});

package/src/styles/MenuInteractionStyles.js

@@ -0,0 +1,21 @@
+export const MenuInteractionStyles = {
+  container: {
+    width: "100%",
+    height: 40,
+    // backgroundColor: "#be2e2eff",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingRight: 16,
+  },
+
+  column_mainIcons: {
+    flexDirection: "row",
+    // width: "100%",
+    justifyContent: "space-evenly",
+  },
+
+  icon: {
+    paddingLeft: 18,
+  },
+};

package/src/styles/commentInputStyles.js

@@ -0,0 +1,30 @@
+import { globalStyles } from "./globalStyles";
+
+export const commentInputStyles = {
+  container: {
+    flexDirection: "row",
+    width: "auto",
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    height: 50,
+
+    justifyContent: "space-between",
+    alignItems: "center",
+
+    justifySelf: "center",
+
+    marginRight: 12,
+    marginLeft: 12,
+
+    paddingLeft: 12,
+    paddingRight: 24,
+  },
+
+  input: {
+    // width: "100%",
+
+    paddingLeft: 8,
+    paddingRight: 8,
+    color: "#fff",
+  },
+};

package/src/styles/customizableButtonStyles.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const customizableButtonStyles = StyleSheet.create({
+  container: {},
+
+  buttonContainer: {
+    height: 50,
+    width: "auto",
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: globalStyles.borders.borderPrimary100,
+    backgroundColor: "#fff",
+  },
+
+  buttonText: {
+    flexDirection: "row",
+    color: "#000",
+    fontSize: 16,
+    textAlign: "center",
+    textAlignVertical: "center",
+    alignItems: "center",
+  },
+});

package/src/styles/dropDownStyles.js

@@ -0,0 +1,54 @@
+import { globalStyles } from "./globalStyles";
+
+export const dropDownStyles = {
+  container: {
+    width: "auto",
+    // marginLeft: 16,
+    // marginRight: 16,
+    // justifyContent: "start",
+  },
+
+  picker: {
+    height: 40,
+    flex: 1,
+
+    // color: "#151515",
+  },
+
+  overlayStyle: {
+    backgroundColor: globalStyles.colors.colorPrimary50,
+  },
+
+  optionTextStyle: {
+    color: "#fff",
+  },
+
+  optionContainerStyle: {
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    borderWidth: 1,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    justifyContent: "space-between",
+  },
+
+  cancelContainerStyle: {
+    backgroundColor: "#fff",
+  },
+
+  dropDownContainer: {
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "space-between",
+    // borderWidth: 1,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    height: 50,
+    alignItems: "center",
+    paddingRight: 12,
+    paddingLeft: 12,
+    backgroundColor: globalStyles.colors.colorPrimary200,
+  },
+
+  dropDownText: {
+    color: "#fff",
+    paddingLeft: 12,
+  },
+};

package/src/styles/globalStyles.js

@@ -0,0 +1,27 @@
+export const globalStyles = {
+  colors: {
+    colorPrimary50: "rgba(21, 21, 21, .7)",
+    colorPrimary100: "#151515",
+
+    colorPrimary200: "#252525",
+    colorPrimary250: "rgba(37, 37, 37, .9)",
+
+    colorPrimary300: "#3C3C3C",
+    colorPrimary350: "rgba(60,60,60,.2)",
+
+    colorPrimary400: "#7F7F7F",
+
+    colorPrimary500: "#D3D3D3",
+
+    colorPrimary600: "#ff6600ff",
+
+    colorPrimary700: "#FF8800",
+  },
+  borders: {
+    borderPrimary50: 8,
+    borderPrimary100: 10,
+    borderPrimary200: 12,
+    borderPrimary300: 15,
+    borderPrimary400: 30,
+  },
+};

package/src/styles/headerGlobalStyles.js

@@ -0,0 +1,26 @@
+export const headerGlobalStyles = {
+  container: {
+    height: 75,
+    width: "100%",
+    // backgroundColor: "#fffffff",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: -5,
+  },
+
+  iconsContainer: {
+    flexDirection: "row",
+  },
+
+  icons: {
+    paddingRight: 20,
+  },
+
+  image: {
+    width: 120,
+    height: 120,
+    resizeMode: "contain",
+    marginLeft: 24,
+  },
+};

package/src/styles/inputStyles.js

@@ -0,0 +1,36 @@
+export const inputStyles = {
+  label: {
+    fontSize: 14,
+    marginBottom: 5,
+    color: "#333",
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(37, 37, 37, 0)",
+    // backgroundColor: "#fff",
+    // width: 320,
+    overflow: "hidden", // necessary for clipping children
+  },
+  input: {
+    // height: 50,
+    width: "auto",
+    paddingLeft: 14,
+    paddingRight: 14,
+    fontFamily: "Inter",
+    fontWeight: "700",
+    color: "#3c3c3c",
+  },
+
+  icon: {
+    marginHorizontal: 5,
+  },
+  error: {
+    color: "red",
+    fontSize: 12,
+    marginTop: 4,
+  },
+};

package/src/styles/menuNavStyles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const menuNavStyles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+
+    backgroundColor: globalStyles.colors.colorPrimary200,
+
+    height: 60,
+    width: "80%",
+
+    alignSelf: "center",
+    alignItems: "center",
+
+    borderRadius: globalStyles.borders.borderPrimary300,
+  },
+
+  uploadIcon: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+});

package/src/utils/DateViews.jsx

@@ -0,0 +1,72 @@
+import { StyleSheet, Text, View } from "react-native";
+import { globalStyles } from "../styles/globalStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function DateViews({
+  timeAgo,
+  viewsText,
+  containerStyles,
+  dateTextStyles,
+  viewsTextStyles,
+  dateContainerStyles,
+}) {
+  return (
+    <View style={[styles.dateViewsContainer, containerStyles]}>
+      <View style={[styles.dateContainer, dateContainerStyles]}>
+        <View style={[styles.dateIcon]}>
+          <Ionicons name="calendar-clear-outline" size={16} color="white" />
+        </View>
+        <Text style={[styles.dateText, dateTextStyles]}>
+          {timeAgo || "14 Hours Ago"}
+        </Text>
+      </View>
+      <View style={styles.viewsContainer}>
+        <View style={[styles.eyeIcon]}>
+          <Ionicons name="eye-outline" size={16} color="white" />
+        </View>
+        <Text style={[styles.viewsText, viewsTextStyles]}>
+          {viewsText || "123.400"}
+          <Text style={{ color: "white" }}>{" Views"}</Text>
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dateViewsContainer: {
+    width: "100%",
+    height: 30,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 12,
+    paddingRight: 8,
+    // paddingLeft: 8,
+  },
+
+  dateContainer: {
+    flexDirection: "row",
+    rowGap: 20,
+    paddingRight: 16,
+  },
+
+  dateIcon: {
+    marginRight: 8,
+  },
+
+  viewsContainer: {
+    flexDirection: "row",
+  },
+
+  eyeIcon: {
+    marginRight: 8,
+  },
+
+  dateText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  viewsText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+});

package/src/utils/normalizeUrl.js

@@ -0,0 +1,14 @@
+const normalizeUrl = url => {
+  if (!url) return null;
+
+  // If it already starts with http:// or https://, return as-is
+  if (/^https?:\/\//i.test(url)) return url;
+
+  // If it looks like a domain (e.g. google.com or mysite.org)
+  if (/^[\w.-]+\.[a-z]{2,}$/i.test(url)) return `https://${url}`;
+
+  // Otherwise, not a valid link — return null or handle differently
+  return null;
+};
+
+export default normalizeUrl;